feat: copy address icon transition to check mark after clicking on it (…

…#140)
ChainSafe · Feb 24, 2025 · d342559 · d342559
1 parent 5986748
commit d342559
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 13 deletions.
diff --git a/packages/circle-react-elements/package.json b/packages/circle-react-elements/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@circle-libs/react-elements",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "React components compatible with Circle SDK",
   "keywords": [
     "react",

diff --git a/packages/circle-react-elements/src/NextJsGuide.mdx b/packages/circle-react-elements/src/NextJsGuide.mdx
@@ -613,12 +613,21 @@ Update the wallet set list page at `src/app/page.tsx` by including a link to the
 // Add the following import
 import Link from 'next/link';
 
-// Extend the WalletSetDetails component with a link to the wallet set page
-<WalletSetDetails walletSet={walletSet}>
-  <Link href={`/wallets/${walletSet.id}`} className="text-blue-500 hover:underline">
-    Show Wallets
-  </Link>
-</WalletSetDetails>;
+// Update the WalletSets component
+export default function WalletSets() {
+  // Existing code
+
+  return (
+    // Existing code
+
+    // Extend the WalletSetDetails component with a link to the wallet set page
+    <WalletSetDetails walletSet={walletSet}>
+      <Link href={`/wallets/${walletSet.id}`} className="text-blue-500 hover:underline">
+        Show Wallets
+      </Link>
+    </WalletSetDetails>
+  );
+}
 ```
 
 And that's it! You've successfully implemented wallet creation and listing within a wallet set. Go back to your development server and navigate to the wallet set page to see the new features in action.

diff --git a/packages/circle-react-elements/src/components/WalletDetails/WalletDetails.tsx b/packages/circle-react-elements/src/components/WalletDetails/WalletDetails.tsx
@@ -1,7 +1,7 @@
 import { AccountType } from '@circle-fin/developer-controlled-wallets';
 import makeBlockie from 'ethereum-blockies-base64';
-import { Copy } from 'lucide-react';
-import { useMemo } from 'react';
+import { Check, Copy } from 'lucide-react';
+import { useMemo, useState } from 'react';
 
 import { Badge } from '~/components/ui/badge';
 import { Button } from '~/components/ui/button';
@@ -52,17 +52,19 @@ const ACCOUNT_TYPE_TO_TEXT: Record<AccountType, string> = {
  * - Displays shortened wallet address with copy button
  * - Shows blockchain network with icon
  * - Supports custom child components for extensibility
- * - Address clipboard copy with optional callback
- * - Responsive layout with consistent spacing
- * - Uses design system components (Badge, Button)
  * - Full address available in tooltip
  */
 export function WalletDetails({ wallet, onAddressCopy, children }: WalletDetailsProps) {
   const shortAddress = useMemo(() => shortenAddress(wallet.address), [wallet]);
   const walletImage = useMemo(() => makeBlockie(wallet.address), [wallet]);
+  const [copied, setCopied] = useState(false);
 
   const copyToClipboard = () => {
     void navigator.clipboard.writeText(wallet.address);
+    setCopied(true);
+
+    setTimeout(() => setCopied(false), 2000); // Reset after 2 seconds
+
     if (typeof onAddressCopy === 'function') {
       onAddressCopy(wallet.address);
     }
@@ -88,7 +90,11 @@ export function WalletDetails({ wallet, onAddressCopy, children }: WalletDetails
           </span>
 
           <Button onClick={copyToClipboard} variant="ghost" size="sm">
-            <Copy size={16} strokeWidth={1} />
+            {copied ? (
+              <Check size={16} strokeWidth={1} />
+            ) : (
+              <Copy size={16} strokeWidth={1} />
+            )}
           </Button>
         </p>