feat(website): add etherscan external link when address input types

usecannon · Jan 31, 2025 · aec848a · aec848a
1 parent c508c8d
commit aec848a
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 9 deletions.
diff --git a/packages/website/src/components/AbiParameterPreview.tsx b/packages/website/src/components/AbiParameterPreview.tsx
@@ -10,16 +10,22 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@/components/ui/tooltip';
+import { useCannonChains } from '@/providers/CannonProvidersProvider';
+import { ExternalLinkButton } from './ExternalLinkButton';
 
 interface Props {
+  chainId: number;
   abiParameter: viem.AbiParameter;
   value?: unknown;
 }
 
-export function AbiParameterPreview({ abiParameter, value }: Props) {
+export function AbiParameterPreview({ chainId, abiParameter, value }: Props) {
   const { type, name } = abiParameter;
   const val = isNil(value) ? _renderEmptyValue(abiParameter) : value;
   const tooltipText = _encodeArgTooltip(type, val);
+  const { getExplorerUrl } = useCannonChains();
+  const explorerUrl =
+    type === 'address' ? getExplorerUrl(chainId, val) : undefined;
 
   return (
     <div>
@@ -63,7 +69,8 @@ export function AbiParameterPreview({ abiParameter, value }: Props) {
               value={_encodeArg(type, val)}
             />
           )}
-          <div className="absolute right-0 top-1">
+          <div className="absolute flex gap-1 right-0 top-0 p-1">
+            {explorerUrl && <ExternalLinkButton href={explorerUrl} />}
             <ClipboardButton text={val} />
           </div>
         </div>

diff --git a/packages/website/src/components/ClipboardButton.tsx b/packages/website/src/components/ClipboardButton.tsx
@@ -24,7 +24,7 @@ export const ClipboardButton: FC<ClibpboardButtonProps> = ({
     <Button
       size="icon"
       variant="ghost"
-      className={`flex-shrink-0 h-7 w-7 bg-background border border-border absolute right-1 ${className}`}
+      className={`flex-shrink-0 h-7 w-7 bg-background border border-border ${className}`}
       onClick={copyToClipboard}
     >
       <AnimatePresence mode="wait" initial={false}>

diff --git a/packages/website/src/components/ExternalLinkButton.tsx b/packages/website/src/components/ExternalLinkButton.tsx
@@ -0,0 +1,21 @@
+import { ExternalLinkIcon } from '@radix-ui/react-icons';
+import { Button } from '@/components/ui/button';
+
+interface Props {
+  href: string;
+  className?: string;
+}
+
+export const ExternalLinkButton = ({ href, className }: Props) => {
+  return (
+    <Button
+      size="icon"
+      variant="ghost"
+      className={`flex-shrink-0 h-7 w-7 bg-background border border-border ${className}`}
+    >
+      <a href={href} target="_blank" rel="noopener noreferrer">
+        <ExternalLinkIcon className="h-3.5 w-3.5 text-muted-foreground" />
+      </a>
+    </Button>
+  );
+};
diff --git a/packages/website/src/features/Deploy/DisplayedTransaction.tsx b/packages/website/src/features/Deploy/DisplayedTransaction.tsx
@@ -191,6 +191,7 @@ export function DisplayedTransaction(props: {
             <div className="flex flex-col gap-4">
               {functionParameters.map((_arg, i) => (
                 <AbiParameterPreview
+                  chainId={chain.id}
                   key={JSON.stringify(functionParameters[i])}
                   abiParameter={functionParameters[i]}
                   value={functionArgs[i] as string}

diff --git a/packages/website/src/features/Packages/Function.tsx b/packages/website/src/features/Packages/Function.tsx
@@ -627,6 +627,7 @@ export const Function: FC<FunctionProps> = ({
                   )}
               </AnimatePresence>
               <FunctionOutput
+                chainId={chainId}
                 methodResult={methodCallOrQueuedResult?.value as string}
                 abiParameters={f.outputs}
               />

diff --git a/packages/website/src/features/Packages/FunctionOutput.tsx b/packages/website/src/features/Packages/FunctionOutput.tsx
@@ -10,14 +10,20 @@ function _isArrayAbiParameter(
 }
 
 interface Props {
+  chainId: number;
   abiParameters: viem.AbiParameter | readonly viem.AbiParameter[];
   methodResult?: string;
 }
 
-export function FunctionOutput({ abiParameters, methodResult }: Props) {
+export function FunctionOutput({
+  chainId,
+  abiParameters,
+  methodResult,
+}: Props) {
   if (_isArrayAbiParameter(abiParameters)) {
     return abiParameters.map((abiParameter, index) => (
       <AbiParameterPreview
+        chainId={chainId}
         key={`${abiParameter.name}-${index}`}
         abiParameter={abiParameter}
         value={methodResult?.[index]}
@@ -27,6 +33,7 @@ export function FunctionOutput({ abiParameters, methodResult }: Props) {
 
   return (
     <AbiParameterPreview
+      chainId={chainId}
       key={`${abiParameters.name}-${methodResult}`}
       abiParameter={abiParameters}
       value={methodResult}

diff --git a/packages/website/src/features/Packages/Interact.tsx b/packages/website/src/features/Packages/Interact.tsx
@@ -415,7 +415,7 @@ const Interact: FC = () => {
                     </span>
                   </a>
 
-                  <div className="flex items-center">
+                  <div className="flex items-center relative">
                     {explorerUrl ? (
                       <>
                         <a
@@ -430,10 +430,12 @@ const Interact: FC = () => {
                             {contractAddress.slice(-4)}
                           </span>
                         </a>
-                        <ClipboardButton
-                          text={contractAddress}
-                          className="static ml-1 scale-75"
-                        />
+                        <div className="absolute right-0 top-0 p-1">
+                          <ClipboardButton
+                            text={contractAddress}
+                            className="static ml-1 scale-75"
+                          />
+                        </div>
                       </>
                     ) : null}{' '}
                     {moduleName !== name ? (