@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
86 lines • 15.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.WaitingForDepositStep = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const index_js_1 = require("../../../primitives/index.js");
const LoadingSpinner_js_1 = require("../../LoadingSpinner.js");
const truncate_js_1 = require("../../../../utils/truncate.js");
const relay_sdk_1 = require("@reservoir0x/relay-sdk");
const CopyToClipBoard_js_1 = require("../../CopyToClipBoard.js");
const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
const qrcode_react_1 = require("qrcode.react");
const qrcode_js_1 = require("../../../../utils/qrcode.js");
const react_popover_1 = require("@radix-ui/react-popover");
const WaitingForDepositStep = ({ fromToken, fromChain, fromAmountFormatted, isFetchingQuote, depositAddress }) => {
const qrcodeUrl = (0, qrcode_js_1.generateQrWalletDeeplink)(fromChain?.vmType, fromAmountFormatted, fromToken &&
fromChain &&
fromToken.address !== (0, relay_sdk_1.getDeadAddress)(fromChain?.vmType)
? fromToken.address
: undefined, depositAddress, fromChain?.id);
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", css: {
'--borderColor': 'colors.subtle-border-color',
border: '1px solid var(--borderColor)',
borderRadius: 8,
px: '2',
py: '3',
mb: '3',
gap: '2'
}, children: [(0, jsx_runtime_1.jsxs)(index_js_1.Text, { style: "body2", children: ["Transfer funds manually from your ", fromChain?.displayName, " wallet to Relay\u2019s deposit address to complete the bridge."] }), (0, jsx_runtime_1.jsx)(index_js_1.Anchor, { href: "https://support.relay.link/en/articles/10269920-how-do-deposit-addresses-work", target: "_blank", children: "Learn More" })] }), (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { css: { gap: '1' }, children: [(0, jsx_runtime_1.jsxs)(index_js_1.Flex, { css: { gap: '1', width: '100%' }, direction: "column", children: [(0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle2", children: "Network" }), (0, jsx_runtime_1.jsxs)(index_js_1.Pill, { color: "gray", css: {
display: 'flex',
alignItems: 'center',
py: '2'
}, radius: "squared", children: [(0, jsx_runtime_1.jsx)(index_js_1.ChainIcon, { chainId: fromChain?.id, height: 20, width: 20 }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "h6", children: fromChain?.displayName })] })] }), (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { css: { gap: '1', width: '100%' }, direction: "column", children: [(0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle2", children: "Amount to transfer" }), (0, jsx_runtime_1.jsxs)(index_js_1.Pill, { color: "gray", css: {
display: 'flex',
alignItems: 'center',
py: '2'
}, radius: "squared", children: [fromAmountFormatted ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [' ', (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "h6", css: { fontWeight: '500', mr: '1' }, children: fromAmountFormatted }), (0, jsx_runtime_1.jsx)("img", { alt: fromToken?.name, src: fromToken?.logoURI, width: 20, height: 20, style: {
borderRadius: 9999
} }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "h6", children: fromToken?.symbol })] })) : ((0, jsx_runtime_1.jsx)(index_js_1.Skeleton, { css: { height: 24, width: '100%' } })), ' '] })] })] }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle2", children: "Relay's Deposit Address" }), (0, jsx_runtime_1.jsx)(index_js_1.Pill, { radius: "rounded", color: "gray", css: { display: 'flex', alignItems: 'center', gap: '3', p: '3' }, children: isFetchingQuote ? ((0, jsx_runtime_1.jsx)(index_js_1.Skeleton, { css: { height: 21, width: '100%' } })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle2", css: { marginRight: 'auto' }, children: (0, truncate_js_1.truncateAddress)(depositAddress, '...', 28, 4) }), qrcodeUrl ? ((0, jsx_runtime_1.jsxs)(react_popover_1.Popover, { children: [(0, jsx_runtime_1.jsx)(react_popover_1.PopoverTrigger, { style: { cursor: 'pointer' }, children: (0, jsx_runtime_1.jsx)(index_js_1.Box, { css: { color: 'gray9' }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faQrcode, style: { width: 16, height: 16 } }) }) }), (0, jsx_runtime_1.jsx)(react_popover_1.PopoverPortal, { children: (0, jsx_runtime_1.jsx)(react_popover_1.PopoverContent, { style: { zIndex: 9999 }, sideOffset: 4, children: (0, jsx_runtime_1.jsx)(index_js_1.Box, { css: {
boxShadow: '0px 1px 5px rgba(0,0,0,0.2)',
borderRadius: 8,
overflow: 'hidden',
transition: 'transform 0.3s ease',
'&:hover': {
transform: 'scale(1.25)'
}
}, children: (0, jsx_runtime_1.jsx)(index_js_1.Box, { css: {
background: 'modal-background',
p: '2'
}, children: (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { css: { margin: '0 auto', width: 105, height: 105 }, children: [(0, jsx_runtime_1.jsx)(index_js_1.Flex, { css: {
position: 'absolute',
width: 105,
height: 105,
alignItems: 'center',
justifyContent: 'center'
}, children: (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { css: {
position: 'relative',
zIndex: '999',
transform: 'translate3d(0,0,0)'
}, children: [(0, jsx_runtime_1.jsx)(index_js_1.ChainIcon, { chainId: fromChain?.id, height: 14, width: 14, css: {
borderRadius: 4,
border: '1.5px solid white',
position: 'absolute',
bottom: 0,
right: 0
} }), (0, jsx_runtime_1.jsx)("img", { alt: fromToken?.name, src: fromToken?.logoURI, width: 33, height: 33, style: {
borderRadius: '100%',
border: '1.5px solid white',
background: 'white'
} })] }) }), (0, jsx_runtime_1.jsx)(qrcode_react_1.QRCodeCanvas, { value: qrcodeUrl, width: 105, height: 105, level: 'H', imageSettings: {
src: 'data:image/png;base64,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Y29tL2V4aWYvMS4wLyIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+MTk0PC9leGlmOlBpeGVsWERpbWVuc2lvbj4KICAgICAgICAgPGV4aWY6VXNlckNvbW1lbnQ+U2NyZWVuc2hvdDwvZXhpZjpVc2VyQ29tbWVudD4KICAgICAgICAgPGV4aWY6UGl4ZWxZRGltZW5zaW9uPjE4NjwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgICAgIDx0aWZmOlJlc29sdXRpb25Vbml0PjI8L3RpZmY6UmVzb2x1dGlvblVuaXQ+CiAgICAgICAgIDx0aWZmOllSZXNvbHV0aW9uPjE0NDwvdGlmZjpZUmVzb2x1dGlvbj4KICAgICAgICAgPHRpZmY6WFJlc29sdXRpb24+MTQ0PC90aWZmOlhSZXNvbHV0aW9uPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4Kmj5GzQAAACtJREFUWAnt0DEBAAAAwqD1T20ND4hAYcCAAQMGDBgwYMCAAQMGDBgwcDEwEakAAc3C1KAAAAAASUVORK5CYII=',
height: 33,
width: 33,
excavate: true
}, style: {
margin: '0 auto',
width: 105,
height: 105
} })] }) }) }) }) })] })) : null, (0, jsx_runtime_1.jsx)(CopyToClipBoard_js_1.CopyToClipBoard, { text: depositAddress ?? '' })] })) }), (0, jsx_runtime_1.jsxs)(index_js_1.Button, { disabled: true, css: {
color: 'button-disabled-color !important',
mt: 8,
justifyContent: 'center'
}, children: [(0, jsx_runtime_1.jsx)(LoadingSpinner_js_1.LoadingSpinner, { css: { height: 16, width: 16, fill: 'button-disabled-color' } }), "Waiting for you to transfer funds"] })] }));
};
exports.WaitingForDepositStep = WaitingForDepositStep;
//# sourceMappingURL=WaitingForDepositStep.js.map