90 lines
2.4 KiB
TypeScript
90 lines
2.4 KiB
TypeScript
import { Button, Flex, Icon, IconName, Menu } from '@/components';
|
|
import { env } from '@/constants';
|
|
import { FleekERC721 } from '@/integrations/ethereum/contracts';
|
|
import { forwardStyledRef } from '@/theme';
|
|
import { AppLog } from '@/utils';
|
|
|
|
import { IndexedNFA } from '../../indexed-nfa.context';
|
|
import { IndexedNFAStyles as S } from '../../indexed-nfa.styles';
|
|
|
|
const openseaLink = `https://${
|
|
env.environment === 'development' ? 'testnets' : ''
|
|
}.opensea.io/assets/${
|
|
env.environment === 'development' ? 'goerli' : 'ethereum'
|
|
}/${FleekERC721.address}`;
|
|
|
|
type CustomButtonProps = {
|
|
icon: IconName;
|
|
};
|
|
|
|
const CustomButon = forwardStyledRef<HTMLButtonElement, CustomButtonProps>(
|
|
({ icon, ...props }, ref) => (
|
|
<Button
|
|
ref={ref}
|
|
{...props}
|
|
css={{ borderRadius: '0.375rem', padding: '$2', color: 'white' }}
|
|
>
|
|
<Icon name={icon} />
|
|
</Button>
|
|
)
|
|
);
|
|
|
|
type MenuItemProps = {
|
|
label: string;
|
|
iconName: IconName;
|
|
href: string;
|
|
};
|
|
|
|
const MenuItem: React.FC<MenuItemProps> = ({
|
|
label,
|
|
iconName,
|
|
href,
|
|
}: MenuItemProps) => {
|
|
return (
|
|
<a href={href} rel="noopener noreferrer" target="_blank">
|
|
<Flex css={{ gap: '$2' }}>
|
|
<Icon name={iconName} />
|
|
{label}
|
|
</Flex>
|
|
</a>
|
|
);
|
|
};
|
|
|
|
export const ButtonsFragment: React.FC = () => {
|
|
const { nfa } = IndexedNFA.useContext();
|
|
|
|
const handleShareOnClick = (): void => {
|
|
const location = window.location.href;
|
|
navigator.clipboard.writeText(location);
|
|
AppLog.successToast('Link copied to clipboard');
|
|
};
|
|
|
|
return (
|
|
<S.Aside.Button.Container>
|
|
<Menu.Root>
|
|
<Menu.Button as={CustomButon} icon="three-dots" />
|
|
<Menu.Items css={{ minWidth: '12rem' }}>
|
|
{/* TODO remove span and render as fragment */}
|
|
<span>
|
|
<MenuItem
|
|
label="Open on OpenSea"
|
|
iconName="opensea"
|
|
href={`${openseaLink}/${nfa.tokenId}`}
|
|
/>
|
|
</span>
|
|
<span>
|
|
<MenuItem
|
|
label="Share to Twitter"
|
|
iconName="twitter"
|
|
href={env.twitter.url}
|
|
/>
|
|
</span>
|
|
</Menu.Items>
|
|
</Menu.Root>
|
|
|
|
{/* TODO add tooltip to copy link */}
|
|
<CustomButon icon="share" onClick={handleShareOnClick} />
|
|
</S.Aside.Button.Container>
|
|
);
|
|
};
|