import { useCallback, useEffect, useMemo, useState } from 'react'; import CopyToClipboard from 'react-copy-to-clipboard'; import classNames from 'classnames'; import { t, truncateByChars } from '@vegaprotocol/react-helpers'; import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, Icon, Drawer, } from '@vegaprotocol/ui-toolkit'; import type { PubKey } from '@vegaprotocol/wallet'; import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet'; import { Networks, useEnvironment } from '@vegaprotocol/environment'; import { WalletIcon } from '../icons/wallet'; const MobileWalletButton = ({ isConnected, activeKey, }: { isConnected?: boolean; activeKey?: PubKey; }) => { const { pubKeys, selectPubKey, disconnect } = useVegaWallet(); const openVegaWalletDialog = useVegaWalletDialogStore( (store) => store.openVegaWalletDialog ); const { VEGA_ENV } = useEnvironment(); const isYellow = VEGA_ENV === Networks.TESTNET; const [drawerOpen, setDrawerOpen] = useState(false); const mobileDisconnect = useCallback(() => { setDrawerOpen(false); disconnect(); }, [disconnect]); const openDrawer = useCallback(() => { if (!isConnected) { openVegaWalletDialog(); setDrawerOpen(false); } else { setDrawerOpen(!drawerOpen); } }, [drawerOpen, isConnected, openVegaWalletDialog]); const iconClass = drawerOpen ? 'hidden' : isYellow ? 'fill-black' : 'fill-white'; const [container, setContainer] = useState(null); const walletButton = ( ); const onSelectItem = useCallback( (pubkey: string) => { setDrawerOpen(false); selectPubKey(pubkey); }, [selectPubKey] ); return (
{(pubKeys || []).map((pk) => ( ))}
); }; export const VegaWalletConnectButton = () => { const [dropdownOpen, setDropdownOpen] = useState(false); const openVegaWalletDialog = useVegaWalletDialogStore( (store) => store.openVegaWalletDialog ); const { pubKey, pubKeys, selectPubKey, disconnect } = useVegaWallet(); const isConnected = pubKey !== null; const activeKey = useMemo(() => { return pubKeys?.find((pk) => pk.publicKey === pubKey); }, [pubKey, pubKeys]); if (isConnected && pubKeys) { return ( <>
setDropdownOpen((curr) => !curr)} > {activeKey && {activeKey.name}} {': '} {truncateByChars(pubKey)} setDropdownOpen(false)} >
{ selectPubKey(value); }} > {pubKeys.map((pk) => ( ))} {t('Disconnect')}
); } return ( <> ); }; const KeypairItem = ({ pk }: { pk: PubKey }) => { const [copied, setCopied] = useState(false); useEffect(() => { // eslint-disable-next-line let timeout: any; if (copied) { timeout = setTimeout(() => { setCopied(false); }, 800); } return () => { clearTimeout(timeout); }; }, [copied]); return (
{pk.name}:{' '} {truncateByChars(pk.publicKey)} setCopied(true)}> {copied && ( {t('Copied')} )}
); }; const KeypairListItem = ({ pk, isActive, onSelectItem, }: { pk: PubKey; isActive: boolean; onSelectItem: (pk: string) => void; }) => { const [copied, setCopied] = useState(false); useEffect(() => { // eslint-disable-next-line let timeout: any; if (copied) { timeout = setTimeout(() => { setCopied(false); }, 800); } return () => { clearTimeout(timeout); }; }, [copied]); return (
{isActive && } {truncateByChars(pk.publicKey)}{' '} setCopied(true)}> {copied && ( {t('Copied')} )}
); };