diff --git a/examples/ui-demo/src/components/shared/user-connection-avatar/UserAddressLink.tsx b/examples/ui-demo/src/components/shared/user-connection-avatar/UserAddressLink.tsx index ea040257b2..8f7f48db35 100644 --- a/examples/ui-demo/src/components/shared/user-connection-avatar/UserAddressLink.tsx +++ b/examples/ui-demo/src/components/shared/user-connection-avatar/UserAddressLink.tsx @@ -1,25 +1,46 @@ import truncateAddress from "@/utils/truncate-address"; -import { useConnection } from "@account-kit/react"; -import { useMemo } from "react"; +import { + TooltipProvider, + Tooltip, + TooltipTrigger, + TooltipContent, + TooltipArrow, +} from "@radix-ui/react-tooltip"; +import { useState } from "react"; export const UserAddressLink = ({ address }: { address: string | null }) => { - const connection = useConnection(); + const [showCopied, setShowCopied] = useState(false); + const [isOpen, setIsOpen] = useState(false); const truncatedAddress = truncateAddress(address ?? ""); - const addressBlockExplorerUrl = useMemo(() => { - if (!address || !connection.chain.blockExplorers) { - return null; - } - return `${connection.chain.blockExplorers?.default.url}/address/${address}`; - }, [address, connection]); + const handleClick = async () => { + if (!address) return; + await navigator.clipboard.writeText(address); + setShowCopied(true); + setIsOpen(true); + setTimeout(() => setShowCopied(false), 2000); + }; return ( - - {truncatedAddress} - + + + + + {truncatedAddress} + + + + + {showCopied ? "Copied!" : address} + + + ); };
{showCopied ? "Copied!" : address}