wallet-ext: copy to clipboard use toast for confirmation feedback

* show a toast instead of scaling the copy icon
* move copy to functionality to hooks to reuse it
* also removes unused code for rendering sui objects

apps/wallet/src/ui/app/components/account-address/index.tsx

@@ -42,7 +42,11 @@ function AccountAddress({
     return address ? (
         <span className={cl(st.addressContainer, className)}>
             {copyable ? (
-                <CopyToClipboard txt={address} mode={cpIconMode}>
+                <CopyToClipboard
+                    txt={address}
+                    mode={cpIconMode}
+                    copySuccessMessage="Address copied"
+                >
                     {addressLink}
                 </CopyToClipboard>
             ) : (

apps/wallet/src/ui/app/components/copy-to-clipboard/CopyToClipboard.module.scss

@@ -26,14 +26,4 @@
     &.plain {
         font-weight: 100;
     }
-
-    &.copied {
-        transform: scale(150%, 150%);
-        color: colors.$sui-blue;
-        opacity: 1;
-
-        &.plain {
-            color: inherit;
-        }
-    }
 }

apps/wallet/src/ui/app/components/copy-to-clipboard/index.tsx

@@ -2,22 +2,21 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import cl from 'classnames';
-import { memo, useCallback, useEffect, useState } from 'react';
 
+import { useCopyToClipboard } from '../../hooks/useCopyToClipboard';
 import Icon, { SuiIcons } from '_components/icon';
 
-import type { ReactNode, MouseEventHandler } from 'react';
+import type { ReactNode } from 'react';
 
 import st from './CopyToClipboard.module.scss';
 
-const COPY_CHECKMARK_MILLIS = 600;
-
 export type CopyToClipboardProps = {
     txt: string;
     children: ReactNode;
     copyOnlyOnIconClick?: boolean;
     className?: string;
     mode?: 'normal' | 'highlighted' | 'plain';
+    copySuccessMessage?: string;
 };
 
 function CopyToClipboard({
@@ -26,42 +25,17 @@ function CopyToClipboard({
     copyOnlyOnIconClick = false,
     className,
     mode = 'normal',
+    copySuccessMessage,
 }: CopyToClipboardProps) {
-    const [copied, setCopied] = useState(false);
-    const copyToClipboard = useCallback<MouseEventHandler<HTMLElement>>(
-        async (e) => {
-            e.stopPropagation();
-            e.preventDefault();
-            if (!txt) {
-                return;
-            }
-            await navigator.clipboard.writeText(txt);
-            setCopied(true);
-        },
-        [txt]
-    );
-    useEffect(() => {
-        let timeout: number;
-        if (copied) {
-            timeout = window.setTimeout(
-                () => setCopied(false),
-                COPY_CHECKMARK_MILLIS
-            );
-        }
-        return () => {
-            if (timeout) {
-                clearTimeout(timeout);
-            }
-        };
-    }, [copied]);
+    const copyToClipboard = useCopyToClipboard(txt, { copySuccessMessage });
     return (
         <span
             className={cl(st.container, className)}
             onClick={!copyOnlyOnIconClick ? copyToClipboard : undefined}
         >
             {children}
             <Icon
-                className={cl(st.copyIcon, st[mode], { [st.copied]: copied })}
+                className={cl(st.copyIcon, st[mode])}
                 icon={SuiIcons.Copy}
                 onClick={copyToClipboard}
                 title="Copy to clipboard"
@@ -70,4 +44,4 @@ function CopyToClipboard({
     );
 }
 
-export default memo(CopyToClipboard);
+export default CopyToClipboard;

apps/wallet/src/ui/app/hooks/useCopyToClipboard.ts

@@ -0,0 +1,28 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { type MouseEventHandler, useCallback } from 'react';
+import { toast } from 'react-hot-toast';
+
+export type CopyOptions = {
+    copySuccessMessage?: string;
+};
+
+export function useCopyToClipboard(
+    textToCopy: string,
+    { copySuccessMessage = 'Copied' }: CopyOptions = {}
+) {
+    return useCallback<MouseEventHandler>(
+        async (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            try {
+                await navigator.clipboard.writeText(textToCopy);
+                toast.success(copySuccessMessage);
+            } catch (e) {
+                // silence clipboard errors
+            }
+        },
+        [textToCopy, copySuccessMessage]
+    );
+}