diff --git a/apps/web/src/components/Basenames/UsernameProfileSectionFrames/FrameListItem.tsx b/apps/web/src/components/Basenames/UsernameProfileSectionFrames/FrameListItem.tsx index 073b51544f..c163bf48e6 100644 --- a/apps/web/src/components/Basenames/UsernameProfileSectionFrames/FrameListItem.tsx +++ b/apps/web/src/components/Basenames/UsernameProfileSectionFrames/FrameListItem.tsx @@ -8,7 +8,7 @@ import { useFrameContext } from 'apps/web/src/components/Basenames/UsernameProfi import Frame from 'apps/web/src/components/Basenames/UsernameProfileSectionFrames/Frame'; import { ActionType } from 'libs/base-ui/utils/logEvent'; import Image, { StaticImageData } from 'next/image'; -import { useCallback } from 'react'; +import { useCallback, useState } from 'react'; import TrashIcon from './assets/trash-icon.svg'; import { useCopyToClipboard } from 'usehooks-ts'; import { Icon } from 'apps/web/src/components/Icon/Icon'; @@ -17,10 +17,22 @@ export default function FrameListItem({ url }: { url: string }) { const { removeFrame } = useFrameContext(); const { currentWalletIsProfileOwner } = useUsernameProfile(); const { logEventWithContext } = useAnalytics(); + const [isCopied, setIsCopied] = useState(false); const [, copy] = useCopyToClipboard(); const handleCopyFrameURLClick = useCallback(() => { - void copy(url); + copy(url) + .then(() => { + setIsCopied(true); + }) + .catch((e) => { + console.error(e); + }) + .finally(() => { + setTimeout(() => { + setIsCopied(false); + }, 2000); + }); }, [copy, url]); const handleRemoveFrameClick = useCallback(() => { @@ -55,7 +67,15 @@ export default function FrameListItem({ url }: { url: string }) { onClick={handleCopyFrameURLClick} className="flex flex-row items-center justify-start gap-2 px-2 py-1" > - Copy frame URL + {isCopied ? ( + <> + Frame link copied! + + ) : ( + <> + Copy frame URL + + )} {currentWalletIsProfileOwner && (