diff --git a/apps/wallet/src/ui/app/components/account-address/index.tsx b/apps/wallet/src/ui/app/components/account-address/index.tsx index 7bf424d03586b..840bec7a2383e 100644 --- a/apps/wallet/src/ui/app/components/account-address/index.tsx +++ b/apps/wallet/src/ui/app/components/account-address/index.tsx @@ -42,7 +42,11 @@ function AccountAddress({ return address ? ( {copyable ? ( - + {addressLink} ) : ( diff --git a/apps/wallet/src/ui/app/components/copy-to-clipboard/CopyToClipboard.module.scss b/apps/wallet/src/ui/app/components/copy-to-clipboard/CopyToClipboard.module.scss index 904652a396982..87683a945678d 100644 --- a/apps/wallet/src/ui/app/components/copy-to-clipboard/CopyToClipboard.module.scss +++ b/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; - } - } } diff --git a/apps/wallet/src/ui/app/components/copy-to-clipboard/index.tsx b/apps/wallet/src/ui/app/components/copy-to-clipboard/index.tsx index 74c3d0bf67764..b778ba918c574 100644 --- a/apps/wallet/src/ui/app/components/copy-to-clipboard/index.tsx +++ b/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,34 +25,9 @@ function CopyToClipboard({ copyOnlyOnIconClick = false, className, mode = 'normal', + copySuccessMessage, }: CopyToClipboardProps) { - const [copied, setCopied] = useState(false); - const copyToClipboard = useCallback>( - 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 ( {children} - {name} - {children} - - ); -} - -export default memo(Field); diff --git a/apps/wallet/src/ui/app/components/sui-object/index.tsx b/apps/wallet/src/ui/app/components/sui-object/index.tsx deleted file mode 100644 index ef334cba97488..0000000000000 --- a/apps/wallet/src/ui/app/components/sui-object/index.tsx +++ /dev/null @@ -1,94 +0,0 @@ -// Copyright (c) Mysten Labs, Inc. -// SPDX-License-Identifier: Apache-2.0 - -import { is, SuiMovePackage } from '@mysten/sui.js'; -import cl from 'classnames'; -import { memo, useMemo } from 'react'; -import { Link } from 'react-router-dom'; - -import Field from './field'; -import CopyToClipboard from '_components/copy-to-clipboard'; -import ExplorerLink from '_components/explorer-link'; -import { ExplorerLinkType } from '_components/explorer-link/ExplorerLinkType'; -import { useMiddleEllipsis, useMediaUrl, useSuiObjectFields } from '_hooks'; - -import type { SuiObject as SuiObjectType } from '@mysten/sui.js'; - -import st from './SuiObject.module.scss'; - -export type SuiObjectProps = { - obj: SuiObjectType; - sendNFT?: boolean; -}; - -function SuiObject({ obj, sendNFT }: SuiObjectProps) { - const { objectId } = obj.reference; - const shortId = useMiddleEllipsis(objectId); - const objType = - (obj.data.dataType === 'moveObject' && obj.data.type) || 'Move Package'; - const imgUrl = useMediaUrl(obj.data); - const { keys } = useSuiObjectFields(obj.data); - const suiMoveObjectFields = - obj.data.dataType === 'moveObject' ? obj.data.fields : null; - - const sendUrl = useMemo( - () => `/send-nft?${new URLSearchParams({ objectId }).toString()}`, - [objectId] - ); - return ( -
- - {shortId} - - {objType} -
- {imgUrl ? ( - <> -
- NFT -
-
- - ) : null} -
- {suiMoveObjectFields ? ( - <> - {keys.map((aField) => ( - - {String(suiMoveObjectFields[aField])} - - ))} - {sendNFT ? ( -
- - Send NFT - -
- ) : null} - - ) : null} - - {is(obj.data, SuiMovePackage) ? ( - - {JSON.stringify(obj.data.disassembled).substring( - 0, - 50 - )} - - ) : null} -
-
- -
- ); -} - -export default memo(SuiObject); diff --git a/apps/wallet/src/ui/app/hooks/useCopyToClipboard.ts b/apps/wallet/src/ui/app/hooks/useCopyToClipboard.ts new file mode 100644 index 0000000000000..890a199dda1f5 --- /dev/null +++ b/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( + async (e) => { + e.stopPropagation(); + e.preventDefault(); + try { + await navigator.clipboard.writeText(textToCopy); + toast.success(copySuccessMessage); + } catch (e) { + // silence clipboard errors + } + }, + [textToCopy, copySuccessMessage] + ); +}