From b49383106fbf7d018d48ebebba745623051dcf67 Mon Sep 17 00:00:00 2001
From: Jordan Frankfurt <jordanwfrankfurt@gmail.com>
Date: Thu, 10 Oct 2024 11:16:46 -0500
Subject: [PATCH] feat: copy frame urls (#1042)

* feat: copy frame urls

* switch order, switch icon

* frame link copied! copy
---
 .../FrameListItem.tsx                         | 74 ++++++++++++++-----
 1 file changed, 56 insertions(+), 18 deletions(-)

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 (
     <div className="relative mb-4 break-inside-avoid">
-      {currentWalletIsProfileOwner && (
-        <Popover.Root>
-          <Popover.Trigger asChild>
+      <Popover.Root>
+        <Popover.Trigger asChild>
+          <button
+            type="button"
+            aria-label="more"
+            className="absolute right-2.5 top-2.5 z-2 flex items-center justify-center rounded-lg bg-white p-2 text-gray-80 transition-colors hover:bg-gray-5"
+          >
+            <EllipsisHorizontalIcon width="12px" />
+          </button>
+        </Popover.Trigger>
+        <Popover.Portal>
+          <Popover.Content
+            align="end"
+            className="data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade rounded-xl bg-white p-2 will-change-[transform,opacity]"
+            sideOffset={5}
+          >
             <button
               type="button"
-              aria-label="more"
-              className="absolute right-2.5 top-2.5 z-2 flex items-center justify-center rounded-lg bg-white p-2 text-gray-80 transition-colors hover:bg-gray-5"
+              aria-label="copy frame url"
+              onClick={handleCopyFrameURLClick}
+              className="flex flex-row items-center justify-start gap-2 px-2 py-1"
             >
-              <EllipsisHorizontalIcon width="12px" />
+              {isCopied ? (
+                <>
+                  <span className="text-[#62A77E]">
+                    <Icon name="checkmark" color="currentColor" width={16} />{' '}
+                  </span>
+                  <span>Frame link copied!</span>
+                </>
+              ) : (
+                <>
+                  <Icon name="copy" color="currentColor" width={16} /> Copy frame URL
+                </>
+              )}
             </button>
-          </Popover.Trigger>
-          <Popover.Portal>
-            <Popover.Content
-              align="end"
-              className="data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade rounded-xl bg-white p-2 will-change-[transform,opacity]"
-              sideOffset={5}
-            >
+            {currentWalletIsProfileOwner && (
               <button
                 type="button"
                 aria-label="remove frame"
@@ -51,10 +89,10 @@ export default function FrameListItem({ url }: { url: string }) {
               >
                 <Image alt="" src={TrashIcon as StaticImageData} width={16} /> Remove frame
               </button>
-            </Popover.Content>
-          </Popover.Portal>
-        </Popover.Root>
-      )}
+            )}
+          </Popover.Content>
+        </Popover.Portal>
+      </Popover.Root>
       <Frame url={url} />
     </div>
   );