Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: copy frame urls #1042

Merged
merged 5 commits into from
Oct 10, 2024
Merged

feat: copy frame urls #1042

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
701a685
feat: copy frame urls
JFrankfurt Oct 5, 2024
5e2cd3c
switch order, switch icon
JFrankfurt Oct 7, 2024
672b63f
Merge branch 'master' into feature/bapp-652-improvement-copy-frame-ur…
JFrankfurt Oct 9, 2024
1bb1623
frame link copied! copy
JFrankfurt Oct 9, 2024
d631041
make copy checkmark green
JFrankfurt Oct 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 56 additions & 18 deletions apps/web/src/components/Basenames/UsernameProfileSectionFrames/FrameListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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"
Expand All @@ -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>
);
Expand Down
Loading