fix: add link to explorer from smart account address (#1367)

* fix: add link to explorer from smart account address * chore: build docs * chore: remove unnecessary effect
alchemyplatform · Feb 18, 2025 · b436dba · b436dba
1 parent 5e09e3b
commit b436dba
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 25 deletions.
diff --git a/examples/ui-demo/src/app/config.tsx b/examples/ui-demo/src/app/config.tsx
@@ -1,4 +1,5 @@
 import { AuthCardHeader } from "@/components/shared/AuthCardHeader";
+import { odyssey, splitOdysseyTransport } from "@/hooks/7702/transportSetup";
 import { alchemy, arbitrumSepolia } from "@account-kit/infra";
 import { cookieStorage, createConfig } from "@account-kit/react";
 import { AccountKitTheme } from "@account-kit/react/tailwind";
@@ -86,8 +87,19 @@ export const alchemyConfig = () =>
     {
       transport: alchemy({ rpcUrl: "/api/rpc" }),
       chain: arbitrumSepolia,
+      chains: [
+        {
+          chain: arbitrumSepolia,
+          transport: alchemy({ rpcUrl: "/api/rpc" }),
+          policyId: process.env.NEXT_PUBLIC_PAYMASTER_POLICY_ID,
+        },
+        {
+          chain: odyssey,
+          transport: splitOdysseyTransport,
+          policyId: process.env.NEXT_PUBLIC_PAYMASTER_POLICY_ID,
+        },
+      ],
       ssr: true,
-      policyId: process.env.NEXT_PUBLIC_PAYMASTER_POLICY_ID,
       connectors: [
         walletConnect({ projectId: "30e7ffaff99063e68cc9870c105d905b" }),
       ],

diff --git a/examples/ui-demo/src/components/configuration/Configuration.tsx b/examples/ui-demo/src/components/configuration/Configuration.tsx
@@ -1,23 +1,27 @@
-// import { useState } from "react";
 import { cn } from "@/lib/utils";
 
 import { SettingsIcon } from "../icons/settings";
-// import { HelpTooltip } from "../shared/HelpTooltip";
 import { WalletTypeSwitch } from "../shared/WalletTypeSwitch";
 import ExternalLink from "../shared/ExternalLink";
 import { useConfigStore } from "@/state";
 import { WalletTypes } from "@/app/config";
+import { useChain } from "@account-kit/react";
+import { arbitrumSepolia } from "@account-kit/infra";
+import { odyssey } from "@/hooks/7702/transportSetup";
 
 export const Configuration = ({ className }: { className?: string }) => {
   const { setWalletType, walletType } = useConfigStore();
-  // const [walletType, setWalletType] = useState(WalletTypes.smart);
+  const { setChain } = useChain();
 
   const onSwitchWalletType = () => {
-    setWalletType(
+    const newValue =
       walletType === WalletTypes.smart
         ? WalletTypes.hybrid7702
-        : WalletTypes.smart
-    );
+        : WalletTypes.smart;
+    setWalletType(newValue);
+    setChain({
+      chain: newValue === WalletTypes.smart ? arbitrumSepolia : odyssey,
+    });
   };
 
   return (

diff --git a/examples/ui-demo/src/components/shared/ExternalLink.tsx b/examples/ui-demo/src/components/shared/ExternalLink.tsx
@@ -1,20 +1,22 @@
 import Link, { LinkProps } from "next/link";
+import { forwardRef, ReactNode } from "react";
 
-const ExternalLink = ({
-  className,
-  children,
-  ...rest
-}: LinkProps & { className?: string; children: React.ReactNode }) => {
+const ExternalLink = forwardRef<
+  HTMLAnchorElement,
+  LinkProps & { className?: string; children: ReactNode }
+>(({ className, children, ...rest }, ref) => {
   return (
     <Link
       {...rest}
       className={className}
       target="_blank"
       rel="noopener noreferrer"
+      ref={ref}
     >
       {children}
     </Link>
   );
-};
+});
+ExternalLink.displayName = "ExternalLink";
 
 export default ExternalLink;
diff --git a/examples/ui-demo/src/components/user-connection-avatar/UserAddressLink.tsx b/examples/ui-demo/src/components/user-connection-avatar/UserAddressLink.tsx
@@ -6,12 +6,22 @@ import {
   TooltipContent,
   TooltipArrow,
 } from "@radix-ui/react-tooltip";
-import { useState } from "react";
+import { useState, useMemo } from "react";
+import ExternalLink from "../shared/ExternalLink";
+import { useChain } from "@account-kit/react";
 
-export const UserAddressLink = ({ address }: { address: string | null }) => {
+export const UserAddressTooltip = ({
+  address,
+  linkEnabled,
+}: {
+  address: string | null;
+  /** If link is enabled, clicking the address will open it using the chain's explorer URL. If disabled, clicking it will copy it to the clipboard. */
+  linkEnabled?: boolean;
+}) => {
   const [showCopied, setShowCopied] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const truncatedAddress = truncateAddress(address ?? "");
+  const { chain } = useChain();
 
   const handleClick = async () => {
     if (!address) return;
@@ -21,16 +31,33 @@ export const UserAddressLink = ({ address }: { address: string | null }) => {
     setTimeout(() => setShowCopied(false), 2000);
   };
 
+  const explorerLink = useMemo(() => {
+    const explorer = chain?.blockExplorers?.default;
+    if (!address || !explorer) {
+      return undefined;
+    }
+    return `${explorer.url}/address/${address}`;
+  }, [address, chain]);
+
   return (
     <TooltipProvider>
       <Tooltip open={isOpen} onOpenChange={setIsOpen}>
         <TooltipTrigger asChild>
-          <button
-            onClick={handleClick}
-            className="text-fg-primary underline text-md md:text-sm"
-          >
-            {truncatedAddress}
-          </button>
+          {linkEnabled && explorerLink ? (
+            <ExternalLink
+              className="text-fg-primary underline text-md md:text-sm"
+              href={explorerLink}
+            >
+              {truncatedAddress}
+            </ExternalLink>
+          ) : (
+            <button
+              onClick={handleClick}
+              className="text-fg-primary underline text-md md:text-sm"
+            >
+              {truncatedAddress}
+            </button>
+          )}
         </TooltipTrigger>
         <TooltipContent
           align="start"

diff --git a/examples/ui-demo/src/components/user-connection-avatar/UserConnectionDetails.tsx b/examples/ui-demo/src/components/user-connection-avatar/UserConnectionDetails.tsx
@@ -2,7 +2,7 @@ import { WalletTypes } from "@/app/config";
 import { ExternalLinkIcon } from "@/components/icons/external-link";
 import { LogoutIcon } from "@/components/icons/logout";
 import { DeploymentStatusIndicator } from "@/components/user-connection-avatar/DeploymentStatusIndicator";
-import { UserAddressLink } from "./UserAddressLink";
+import { UserAddressTooltip } from "./UserAddressLink";
 import { useConfigStore } from "@/state";
 import { useAccount, useLogout, useSigner, useUser } from "@account-kit/react";
 import { useQuery } from "@tanstack/react-query";
@@ -51,7 +51,7 @@ export function UserConnectionDetails({
           <span className="text-md md:text-sm text-fg-secondary">
             EOA Address
           </span>
-          <UserAddressLink address={user?.address} />
+          <UserAddressTooltip address={user?.address} linkEnabled />
         </div>
 
         {/* Logout */}
@@ -80,12 +80,13 @@ export function UserConnectionDetails({
         <span className="text-md md:text-sm text-fg-secondary">
           {walletType === WalletTypes.smart ? "Smart account" : "Address"}
         </span>
-        <UserAddressLink
+        <UserAddressTooltip
           address={
             walletType === WalletTypes.smart
               ? scaAccount.address ?? ""
               : signerAddress ?? ""
           }
+          linkEnabled
         />
       </div>
 
@@ -119,7 +120,7 @@ export function UserConnectionDetails({
               </div>
             </a>
 
-            <UserAddressLink address={signerAddress} />
+            <UserAddressTooltip address={signerAddress} />
           </div>
         </>
       ) : (