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 && (