@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
148 lines • 9 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.MultiWalletDropdown = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const Dropdown_js_1 = require("../primitives/Dropdown.js");
const index_js_1 = require("../primitives/index.js");
const truncate_js_1 = require("../../utils/truncate.js");
const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
const solana_js_1 = require("../../utils/solana.js");
const index_js_2 = require("../../hooks/index.js");
const events_js_1 = require("../../constants/events.js");
const address_js_1 = require("../../utils/address.js");
const RelayKitProvider_js_1 = require("../../providers/RelayKitProvider.js");
const MultiWalletDropdown = ({ context, wallets, selectedWalletAddress, chain, disablePasteWalletAddressOption, onSelect, onAnalyticEvent, onLinkNewWallet, setAddressModalOpen }) => {
const [open, setOpen] = (0, react_1.useState)(false);
const providerOptionsContext = (0, react_1.useContext)(RelayKitProvider_js_1.ProviderOptionsContext);
const connectorKeyOverrides = providerOptionsContext.vmConnectorKeyOverrides;
const filteredWallets = (0, react_1.useMemo)(() => {
if (!chain)
return wallets;
let eclipseConnectorKeys = undefined;
if (connectorKeyOverrides && connectorKeyOverrides[solana_js_1.eclipse.id]) {
eclipseConnectorKeys = connectorKeyOverrides[solana_js_1.eclipse.id];
}
else if (chain.vmType === 'svm') {
eclipseConnectorKeys = solana_js_1.eclipseWallets;
}
return wallets.filter((wallet) => {
if (wallet.vmType !== chain.vmType) {
return false;
}
if (chain.id === solana_js_1.eclipse.id &&
!eclipseConnectorKeys.includes(wallet.connector.toLowerCase())) {
return false;
}
else if (chain.id === solana_js_1.solana.id &&
eclipseConnectorKeys.includes(wallet.connector.toLowerCase())) {
return false;
}
return true;
});
}, [wallets, chain]);
const selectedWallet = (0, react_1.useMemo)(() => wallets.find((wallet) => (0, address_js_1.addressesEqual)(wallet.vmType, wallet.address, selectedWalletAddress)), [wallets, selectedWalletAddress]);
const isSupportedSelectedWallet = (0, react_1.useMemo)(() => chain
? (0, address_js_1.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 } = (0, index_js_2.useENSResolver)(selectedWalletAddress, {
enabled: (chain?.vmType === 'evm' || chain?.vmType === 'hypevm') &&
isSupportedSelectedWallet
});
return ((0, jsx_runtime_1.jsx)(Dropdown_js_1.Dropdown, { open: showDropdown ? open : false, onOpenChange: (open) => {
if (showDropdown) {
setOpen(open);
onAnalyticEvent?.(open
? events_js_1.EventNames.WALLET_SELECTOR_OPEN
: events_js_1.EventNames.WALLET_SELECTOR_CLOSE, {
context
});
}
}, trigger: (0, jsx_runtime_1.jsxs)(index_js_1.Button, { "aria-label": `Multi wallet dropdown`, color: !selectedWallet && selectedWalletAddress ? 'warning' : 'ghost', onClick: () => {
if (!showDropdown) {
onLinkNewWallet();
onAnalyticEvent?.(events_js_1.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: [(0, jsx_runtime_1.jsxs)(index_js_1.Flex, { align: "center", css: { gap: '1' }, children: [isSupportedSelectedWallet && selectedWallet?.walletLogoUrl ? ((0, jsx_runtime_1.jsx)("img", { src: selectedWallet.walletLogoUrl, style: { width: 16, height: 16, borderRadius: 4 } })) : selectedWalletAddress && !selectedWallet ? ((0, jsx_runtime_1.jsx)(index_js_1.Box, { css: { color: 'amber11' }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faClipboard, width: 16, height: 16 }) })) : null, (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle2", css: {
color: !selectedWallet && selectedWalletAddress
? 'amber11'
: 'anchor-color'
}, children: isSupportedSelectedWallet &&
selectedWalletAddress &&
selectedWalletAddress != ''
? displayName &&
(chain?.vmType === 'evm' || chain?.vmType === 'hypevm')
? displayName
: (0, truncate_js_1.truncateAddress)(selectedWalletAddress)
: 'Select wallet' })] }), showDropdown && ((0, jsx_runtime_1.jsx)(index_js_1.Box, { css: {
color: !selectedWallet && selectedWalletAddress
? 'amber11'
: 'anchor-color'
}, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faChevronDown, width: 14, height: 14 }) }))] }), contentProps: {
sideOffset: 12,
alignOffset: -12,
align: 'end',
css: { maxWidth: 248, p: 0 }
}, children: (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", css: { borderRadius: 12, p: '1', gap: '1' }, children: [filteredWallets.map((wallet, idx) => {
return ((0, jsx_runtime_1.jsxs)(Dropdown_js_1.DropdownMenuItem, { "aria-label": wallet.address, onClick: () => {
onAnalyticEvent?.(events_js_1.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 ? ((0, jsx_runtime_1.jsx)("img", { src: wallet.walletLogoUrl, style: { width: 16, height: 16, borderRadius: 4 } })) : null, (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle2", children: (0, truncate_js_1.truncateAddress)(wallet.address) })] }, idx));
}), (0, jsx_runtime_1.jsx)(Dropdown_js_1.DropdownMenuItem, { "aria-label": "Connect a new wallet", css: {
...DropdownItemBaseStyle
}, onClick: () => {
onAnalyticEvent?.(events_js_1.EventNames.WALLET_SELECTOR_SELECT, {
context: 'link_option'
});
onLinkNewWallet();
}, children: (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle2", children: "Connect a new wallet" }) }), context === 'destination' && !disablePasteWalletAddressOption ? ((0, jsx_runtime_1.jsx)(Dropdown_js_1.DropdownMenuItem, { "aria-label": "Paste wallet address", css: {
...DropdownItemBaseStyle
}, onClick: () => {
onAnalyticEvent?.(events_js_1.EventNames.WALLET_SELECTOR_SELECT, {
context: 'custom_option'
});
setAddressModalOpen?.(true);
}, children: (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle2", children: "Paste wallet address" }) })) : null] }) }));
};
exports.MultiWalletDropdown = MultiWalletDropdown;
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