@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
144 lines • 8.08 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useContext, useMemo, useState } from 'react';
import { Dropdown, DropdownMenuItem } from '../primitives/Dropdown.js';
import { Box, Button, Flex, Text } from '../primitives/index.js';
import { truncateAddress } from '../../utils/truncate.js';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronDown, faClipboard } from '@fortawesome/free-solid-svg-icons';
import { eclipse, eclipseWallets, solana } from '../../utils/solana.js';
import { useENSResolver } from '../../hooks/index.js';
import { EventNames } from '../../constants/events.js';
import { isValidAddress, addressesEqual } from '../../utils/address.js';
import { ProviderOptionsContext } from '../../providers/RelayKitProvider.js';
export const MultiWalletDropdown = ({ context, wallets, selectedWalletAddress, chain, disablePasteWalletAddressOption, onSelect, onAnalyticEvent, onLinkNewWallet, setAddressModalOpen }) => {
const [open, setOpen] = useState(false);
const providerOptionsContext = useContext(ProviderOptionsContext);
const connectorKeyOverrides = providerOptionsContext.vmConnectorKeyOverrides;
const filteredWallets = useMemo(() => {
if (!chain)
return wallets;
let eclipseConnectorKeys = undefined;
if (connectorKeyOverrides && connectorKeyOverrides[eclipse.id]) {
eclipseConnectorKeys = connectorKeyOverrides[eclipse.id];
}
else if (chain.vmType === 'svm') {
eclipseConnectorKeys = eclipseWallets;
}
return wallets.filter((wallet) => {
if (wallet.vmType !== chain.vmType) {
return false;
}
if (chain.id === eclipse.id &&
!eclipseConnectorKeys.includes(wallet.connector.toLowerCase())) {
return false;
}
else if (chain.id === solana.id &&
eclipseConnectorKeys.includes(wallet.connector.toLowerCase())) {
return false;
}
return true;
});
}, [wallets, chain]);
const selectedWallet = useMemo(() => wallets.find((wallet) => addressesEqual(wallet.vmType, wallet.address, selectedWalletAddress)), [wallets, selectedWalletAddress]);
const isSupportedSelectedWallet = useMemo(() => chain
? isValidAddress(chain?.vmType, selectedWalletAddress, chain?.id, selectedWallet?.connector, connectorKeyOverrides)
: true, [
selectedWalletAddress,
selectedWallet,
chain?.vmType,
chain?.id,
connectorKeyOverrides
]);
const showDropdown = context !== 'origin' || filteredWallets.length > 0;
const { displayName } = useENSResolver(selectedWalletAddress, {
enabled: (chain?.vmType === 'evm' || chain?.vmType === 'hypevm') &&
isSupportedSelectedWallet
});
return (_jsx(Dropdown, { open: showDropdown ? open : false, onOpenChange: (open) => {
if (showDropdown) {
setOpen(open);
onAnalyticEvent?.(open
? EventNames.WALLET_SELECTOR_OPEN
: EventNames.WALLET_SELECTOR_CLOSE, {
context
});
}
}, trigger: _jsxs(Button, { "aria-label": `Multi wallet dropdown`, color: !selectedWallet && selectedWalletAddress ? 'warning' : 'ghost', onClick: () => {
if (!showDropdown) {
onLinkNewWallet();
onAnalyticEvent?.(EventNames.WALLET_SELECTOR_SELECT, {
context: 'not_connected'
});
}
}, size: "none", corners: "pill", css: {
gap: '2',
px: '2 !important',
py: '1',
cursor: 'pointer',
display: 'flex',
alignContent: 'center'
}, children: [_jsxs(Flex, { align: "center", css: { gap: '1' }, children: [isSupportedSelectedWallet && selectedWallet?.walletLogoUrl ? (_jsx("img", { src: selectedWallet.walletLogoUrl, style: { width: 16, height: 16, borderRadius: 4 } })) : selectedWalletAddress && !selectedWallet ? (_jsx(Box, { css: { color: 'amber11' }, children: _jsx(FontAwesomeIcon, { icon: faClipboard, width: 16, height: 16 }) })) : null, _jsx(Text, { style: "subtitle2", css: {
color: !selectedWallet && selectedWalletAddress
? 'amber11'
: 'anchor-color'
}, children: isSupportedSelectedWallet &&
selectedWalletAddress &&
selectedWalletAddress != ''
? displayName &&
(chain?.vmType === 'evm' || chain?.vmType === 'hypevm')
? displayName
: truncateAddress(selectedWalletAddress)
: 'Select wallet' })] }), showDropdown && (_jsx(Box, { css: {
color: !selectedWallet && selectedWalletAddress
? 'amber11'
: 'anchor-color'
}, children: _jsx(FontAwesomeIcon, { icon: faChevronDown, width: 14, height: 14 }) }))] }), contentProps: {
sideOffset: 12,
alignOffset: -12,
align: 'end',
css: { maxWidth: 248, p: 0 }
}, children: _jsxs(Flex, { direction: "column", css: { borderRadius: 12, p: '1', gap: '1' }, children: [filteredWallets.map((wallet, idx) => {
return (_jsxs(DropdownMenuItem, { "aria-label": wallet.address, onClick: () => {
onAnalyticEvent?.(EventNames.WALLET_SELECTOR_SELECT, {
context: 'select_option',
wallet_address: wallet.address,
wallet_vm: wallet.vmType,
wallet_icon: wallet.walletLogoUrl ?? ''
});
setOpen(false);
onSelect(wallet);
}, css: {
...DropdownItemBaseStyle,
'--borderColor': 'colors.gray.6',
border: '1px solid var(--borderColor)'
}, children: [wallet.walletLogoUrl ? (_jsx("img", { src: wallet.walletLogoUrl, style: { width: 16, height: 16, borderRadius: 4 } })) : null, _jsx(Text, { style: "subtitle2", children: truncateAddress(wallet.address) })] }, idx));
}), _jsx(DropdownMenuItem, { "aria-label": "Connect a new wallet", css: {
...DropdownItemBaseStyle
}, onClick: () => {
onAnalyticEvent?.(EventNames.WALLET_SELECTOR_SELECT, {
context: 'link_option'
});
onLinkNewWallet();
}, children: _jsx(Text, { style: "subtitle2", children: "Connect a new wallet" }) }), context === 'destination' && !disablePasteWalletAddressOption ? (_jsx(DropdownMenuItem, { "aria-label": "Paste wallet address", css: {
...DropdownItemBaseStyle
}, onClick: () => {
onAnalyticEvent?.(EventNames.WALLET_SELECTOR_SELECT, {
context: 'custom_option'
});
setAddressModalOpen?.(true);
}, children: _jsx(Text, { style: "subtitle2", children: "Paste wallet address" }) })) : null] }) }));
};
const DropdownItemBaseStyle = {
borderRadius: 8,
gap: '2',
cursor: 'pointer',
p: '2',
transition: 'backdrop-filter 250ms linear',
_hover: {
backdropFilter: 'brightness(98%)'
},
flexShrink: 0,
alignContent: 'center',
width: '100%'
};
//# sourceMappingURL=MultiWalletDropdown.js.map