@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
105 lines • 8.47 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.CustomAddressModal = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const index_js_1 = require("../primitives/index.js");
const Modal_js_1 = require("../common/Modal.js");
const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
const index_js_2 = require("../../hooks/index.js");
const ens_js_1 = require("../../utils/ens.js");
const LoadingSpinner_js_1 = require("../common/LoadingSpinner.js");
const events_js_1 = require("../../constants/events.js");
const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
const Anchor_js_1 = require("../primitives/Anchor.js");
const truncate_js_1 = require("../../utils/truncate.js");
const address_js_1 = require("../../utils/address.js");
const RelayKitProvider_js_1 = require("../../providers/RelayKitProvider.js");
const CustomAddressModal = ({ open, toAddress, toChain, linkedWallets, isConnected, multiWalletSupportEnabled, wallet, onAnalyticEvent, onOpenChange, onConfirmed, onClear }) => {
const connectedAddress = (0, index_js_2.useWalletAddress)(wallet, linkedWallets);
const [address, setAddress] = (0, react_1.useState)('');
const [input, setInput] = (0, react_1.useState)('');
const providerOptionsContext = (0, react_1.useContext)(RelayKitProvider_js_1.ProviderOptionsContext);
const connectorKeyOverrides = providerOptionsContext.vmConnectorKeyOverrides;
const availableWallets = (0, react_1.useMemo)(() => linkedWallets.filter((wallet) => (0, address_js_1.isValidAddress)(toChain?.vmType, wallet.address, toChain?.id, wallet.connector, connectorKeyOverrides)), [toChain, linkedWallets]);
const connectedAddressSet = (!address && !toAddress) ||
(toAddress === connectedAddress && address === connectedAddress) ||
availableWallets.some((wallet) => wallet.address === toAddress);
(0, react_1.useEffect)(() => {
if (!open) {
setAddress('');
setInput('');
}
else {
if ((0, address_js_1.isValidAddress)(toChain?.vmType, toAddress ?? '', toChain?.id)) {
setAddress(toAddress ? toAddress : '');
setInput(toAddress ? toAddress : '');
}
onAnalyticEvent?.(events_js_1.EventNames.ADDRESS_MODAL_OPEN);
}
}, [open]);
const { data: resolvedENS, isLoading } = (0, index_js_2.useENSResolver)((0, ens_js_1.isENSName)(input) ? input : '');
(0, react_1.useEffect)(() => {
if ((0, address_js_1.isValidAddress)(toChain?.vmType, input, toChain?.id)) {
setAddress(input);
}
else if (resolvedENS?.address) {
setAddress(resolvedENS.address);
}
else {
setAddress('');
}
}, [input, resolvedENS]);
return ((0, jsx_runtime_1.jsx)(Modal_js_1.Modal, { trigger: null, open: open, onOpenChange: onOpenChange, css: {
overflow: 'hidden'
}, children: (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", css: {
width: '100%',
height: '100%',
gap: '4',
sm: {
width: 370
}
}, children: [(0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "h6", children: "To Address" }), (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", css: { gap: '2', position: 'relative' }, children: [(0, jsx_runtime_1.jsxs)(index_js_1.Flex, { css: {
position: 'relative',
display: 'inline-block'
}, children: [(0, jsx_runtime_1.jsx)(index_js_1.Input, { type: "text", inputMode: "text", autoComplete: "off", autoCorrect: "off", className: "ph-no-capture", css: {
width: '100%',
height: 48
}, placeholder: !toChain
? 'Enter address'
: toChain.vmType === 'evm'
? 'Address or ENS'
: `Enter ${toChain.displayName} address`, value: input, onChange: (e) => {
setInput(e.target.value);
} }), isLoading && ((0, jsx_runtime_1.jsx)(LoadingSpinner_js_1.LoadingSpinner, { css: {
right: 2,
top: 3,
position: 'absolute'
} }))] }), !address && input.length ? ((0, jsx_runtime_1.jsx)(index_js_1.Text, { color: "red", style: "subtitle2", children: "Not a valid address" })) : null, !connectedAddressSet && address && isConnected ? ((0, jsx_runtime_1.jsxs)(index_js_1.Flex, { css: { bg: 'amber2', p: '2', borderRadius: 8, gap: '2' }, align: "center", children: [(0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faTriangleExclamation, color: "#FFA01C", width: 16, height: 16, style: { flexShrink: 0 } }), (0, jsx_runtime_1.jsxs)(index_js_1.Text, { style: "subtitle3", color: "warning", children: ["This isn't the connected wallet address. Please ensure that the address provided is accurate.", ' '] })] })) : null, !multiWalletSupportEnabled && isConnected ? (connectedAddressSet ? ((0, jsx_runtime_1.jsxs)(index_js_1.Flex, { css: { bg: 'green2', p: '2', borderRadius: 8, gap: '2' }, align: "center", children: [(0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faCircleCheck, color: "#30A46C", width: 16, height: 16 }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle3", children: "Connected Wallet" })] })) : ((0, jsx_runtime_1.jsx)(Anchor_js_1.AnchorButton, { onClick: () => {
onClear();
onOpenChange(false);
}, children: "Use connected wallet address" }))) : null, multiWalletSupportEnabled && availableWallets.length > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle2", children: "Use connected wallet address" }), (0, jsx_runtime_1.jsx)(index_js_1.Flex, { css: { gap: '2', flexWrap: 'wrap' }, align: "center", children: availableWallets.map((wallet) => ((0, jsx_runtime_1.jsxs)(index_js_1.Pill, { color: "transparent", bordered: true, radius: "squared", css: {
display: 'flex',
alignItems: 'center',
gap: '6px',
cursor: 'pointer'
}, onClick: () => {
onConfirmed(wallet.address);
onOpenChange(false);
onAnalyticEvent?.(events_js_1.EventNames.ADDRESS_MODAL_CONFIRMED, {
address: wallet.address,
context: 'linked_wallet'
});
}, children: [(0, jsx_runtime_1.jsx)("img", { src: wallet.walletLogoUrl, style: { width: 16, height: 16, borderRadius: 4 } }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle2", children: (0, truncate_js_1.truncateAddress)(wallet.address) })] }, wallet.address))) })] })) : null] }), (0, jsx_runtime_1.jsx)(index_js_1.Button, { disabled: !(0, address_js_1.isValidAddress)(toChain?.vmType, address, toChain?.id), css: { justifyContent: 'center' }, onClick: () => {
if ((0, address_js_1.isValidAddress)(toChain?.vmType, address, toChain?.id)) {
onConfirmed(address);
onAnalyticEvent?.(events_js_1.EventNames.ADDRESS_MODAL_CONFIRMED, {
address: address,
context: 'input'
});
}
onOpenChange(false);
}, children: "Save" })] }) }));
};
exports.CustomAddressModal = CustomAddressModal;
//# sourceMappingURL=CustomAddressModal.js.map