Improve display of links to deployments

LedgerHQ · Oct 4, 2024 · dd86ec4 · dd86ec4
1 parent bfc192d
commit dd86ec4
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 10 deletions.
diff --git a/developer-preview/public/assets/external-link.svg b/developer-preview/public/assets/external-link.svg
diff --git a/developer-preview/src/app/ContractInfo.tsx b/developer-preview/src/app/ContractInfo.tsx
@@ -14,14 +14,17 @@ export const ContractInfo = ({ data }: { data: PreviewData }) => {
           <UI.InputText>{data.contract.name}</UI.InputText>
 
           {data.contract.deployments.map(({ address }: Deploymnent) => (
-            <UI.GreyLink
-              href={`https://etherscan.io/address/${address}`}
-              key={address}
-              title={address}
-              target="_blank"
-            >
-              {formatShortAddress(address)}
-            </UI.GreyLink>
+            <>
+              {" "}
+              <UI.GreyLink
+                href={`https://etherscan.io/address/${address}`}
+                key={address}
+                title={address}
+                target="_blank"
+              >
+                {formatShortAddress(address)}
+              </UI.GreyLink>
+            </>
           ))}
         </div>
       </UI.FauxInput>

diff --git a/developer-preview/src/ui/UI.tsx b/developer-preview/src/ui/UI.tsx
@@ -47,8 +47,9 @@ export const UI = {
   }: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "className"> & {
     children: string;
   }) => (
-    <a className="text-sm text-tool-neutral-70" {...props}>
-      {children}
+    <a className="flex gap-1 text-sm text-tool-neutral-70" {...props}>
+      {children}{" "}
+      <Image alt="" src="/assets/external-link.svg" width={16} height={16} />
     </a>
   ),
   Label: ({ children }: { children: string }) => (