diff --git a/apps/web/src/components/Basenames/UsernameProfileSectionFrames/FrameListItem.tsx b/apps/web/src/components/Basenames/UsernameProfileSectionFrames/FrameListItem.tsx index c15dd36934..691903eeb0 100644 --- a/apps/web/src/components/Basenames/UsernameProfileSectionFrames/FrameListItem.tsx +++ b/apps/web/src/components/Basenames/UsernameProfileSectionFrames/FrameListItem.tsx @@ -8,13 +8,32 @@ 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'; 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(() => { + copy(url) + .then(() => { + setIsCopied(true); + }) + .catch((e) => { + console.error(e); + }) + .finally(() => { + setTimeout(() => { + setIsCopied(false); + }, 2000); + }); + }, [copy, url]); const handleRemoveFrameClick = useCallback(() => { removeFrame(url) @@ -26,23 +45,42 @@ export default function FrameListItem({ url }: { url: string }) { return (