@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
332 lines • 26.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const OnrampWidgetRenderer_js_1 = tslib_1.__importDefault(require("./OnrampWidgetRenderer.js"));
const index_js_1 = require("../../../primitives/index.js");
const AmountInput_js_1 = tslib_1.__importDefault(require("../../../common/AmountInput.js"));
const react_1 = require("react");
const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
const TokenSelector_js_1 = tslib_1.__importDefault(require("../../../common/TokenSelector/TokenSelector.js"));
const events_js_1 = require("../../../../constants/events.js");
const TokenTrigger_js_1 = require("../../../common/TokenSelector/triggers/TokenTrigger.js");
const MultiWalletDropdown_js_1 = require("../../../common/MultiWalletDropdown.js");
const CustomAddressModal_js_1 = require("../../../common/CustomAddressModal.js");
const wagmi_1 = require("wagmi");
const OnrampModal_js_1 = require("../modals/OnrampModal.js");
const numbers_js_1 = require("../../../../utils/numbers.js");
const address_js_1 = require("../../../../utils/address.js");
const RelayKitProvider_js_1 = require("../../../../providers/RelayKitProvider.js");
const OnrampWidget = ({ defaultWalletAddress, moonPayApiKey, moonpayOnUrlSignatureRequested, linkedWallets, multiWalletSupportEnabled, supportedWalletVMs, moonPayThemeId, moonPayThemeMode, token, setToken, disablePasteWalletAddressOption, onTokenChange, onConnectWallet, onLinkNewWallet, onSetPrimaryWallet, onAnalyticEvent: _onAnalyticEvent, onSuccess }) => {
const onAnalyticEvent = (0, react_1.useCallback)((eventName, data) => {
try {
_onAnalyticEvent?.(eventName, data);
}
catch (e) {
console.error('Error in onAnalyticEvent', eventName, data, e);
}
}, [_onAnalyticEvent]);
const [addressModalOpen, setAddressModalOpen] = (0, react_1.useState)(false);
const [onrampModalOpen, setOnrampModalOpen] = (0, react_1.useState)(false);
const { isConnected } = (0, wagmi_1.useAccount)();
const providerOptionsContext = (0, react_1.useContext)(RelayKitProvider_js_1.ProviderOptionsContext);
const connectorKeyOverrides = providerOptionsContext.vmConnectorKeyOverrides;
return ((0, jsx_runtime_1.jsx)(OnrampWidgetRenderer_js_1.default, { defaultWalletAddress: defaultWalletAddress, supportedWalletVMs: supportedWalletVMs, linkedWallets: linkedWallets, multiWalletSupportEnabled: multiWalletSupportEnabled, moonPayApiKey: moonPayApiKey, token: token, setToken: setToken, children: ({ displayCurrency, setDisplayCurrency, recipient, setRecipient, isRecipientLinked, isValidRecipient, amount, amountToToken, setInputValue, amountToTokenFormatted, token, fromToken, setToken, toChain, fromChain, toDisplayName, toChainWalletVMSupported, fiatCurrency, setFiatCurrency, minAmountCurrency, notEnoughFiat, ctaCopy, moonPayCurrencyCode, isPassthrough, usdRate }) => {
(0, react_1.useEffect)(() => {
if (multiWalletSupportEnabled &&
fromChain &&
recipient &&
linkedWallets &&
!isValidRecipient) {
const supportedAddress = (0, address_js_1.findSupportedWallet)(fromChain, recipient, linkedWallets, connectorKeyOverrides);
if (supportedAddress) {
onSetPrimaryWallet?.(supportedAddress);
}
}
if (multiWalletSupportEnabled &&
toChain &&
recipient &&
linkedWallets &&
!isValidRecipient) {
setRecipient(undefined);
}
}, [
multiWalletSupportEnabled,
fromChain?.id,
toChain?.id,
linkedWallets,
onSetPrimaryWallet,
isValidRecipient,
connectorKeyOverrides
]);
const formattedAmount = amount === ''
? ''
: amount.endsWith('.')
? new Intl.NumberFormat(undefined, {
style: 'currency',
currency: 'USD',
currencyDisplay: 'narrowSymbol',
minimumFractionDigits: 0,
maximumFractionDigits: 0
}).format(+amount) + '.'
: new Intl.NumberFormat(undefined, {
style: 'currency',
currency: 'USD',
currencyDisplay: 'narrowSymbol',
minimumFractionDigits: amount.includes('.0')
? 1
: amount.endsWith('0') && amount.includes('.')
? 2
: 0,
maximumFractionDigits: amount.includes('.') ? 2 : 0,
minimumSignificantDigits: 1,
maximumSignificantDigits: amount.length
}).format(+amount);
return ((0, jsx_runtime_1.jsxs)("div", { className: "relay-kit-reset", style: { maxWidth: 408, minWidth: 308, width: '100%' }, children: [(0, jsx_runtime_1.jsx)(index_js_1.Flex, { direction: "column", css: {
gap: '2',
border: 'widget-border',
width: '100%'
}, children: (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", css: {
width: '100%',
overflow: 'hidden',
borderRadius: 'widget-card-border-radius',
backgroundColor: 'widget-background',
border: 'widget-card-border',
mb: 'widget-card-section-gutter',
px: '4',
pt: '40px',
pb: '24px'
}, children: [(0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle2", color: "subtle", css: { textAlign: 'center' }, children: "Enter an amount" }), (0, jsx_runtime_1.jsx)(AmountInput_js_1.default, { value: displayCurrency
? amountToToken !== ''
? `${amountToToken} ${token.symbol}`
: ''
: formattedAmount, setValue: (e) => {
}, placeholder: ` 0`, onChange: (e) => {
const input = e.target;
setInputValue(input.value);
if (displayCurrency) {
setTimeout(() => {
const numericValue = input.value.match(/[\d.]+/g);
const numericValueLength = numericValue !== null
? numericValue.join('').length
: 0;
input.setSelectionRange(numericValueLength, numericValueLength);
}, 0);
}
}, onKeyDown: (e) => {
const input = e.target;
const cursorPosition = input.selectionStart;
if (e.key === '.' &&
(input.value.match(/\./g) || []).length > 0) {
e.preventDefault();
return;
}
if (e.key === 'ArrowLeft' && cursorPosition !== null) {
const valueBeforeCursor = input.value.substring(0, cursorPosition);
const charBeforeCursor = valueBeforeCursor.charAt(cursorPosition - 1);
if (charBeforeCursor === '$') {
e.preventDefault();
}
}
if (e.key === 'ArrowRight' && cursorPosition !== null) {
const valueAfterCursor = input.value.substring(0, cursorPosition + 1);
const charAfterCursor = valueAfterCursor.charAt(cursorPosition);
if (charAfterCursor === ' ') {
e.preventDefault();
}
}
}, onMouseDown: (e) => {
const input = e.target;
input.style.caretColor = 'transparent';
}, onMouseUp: (e) => {
const input = e.target;
const cursorPosition = input.selectionStart;
if (cursorPosition !== null) {
const valueAfterCursor = input.value.substring(0, cursorPosition + 1);
const charAfterCursor = valueAfterCursor.charAt(cursorPosition);
const valueBeforeCursor = input.value.substring(0, cursorPosition);
const charBeforeCursor = valueBeforeCursor.charAt(cursorPosition - 1);
const specialCharacterRegex = /[ a-zA-Z]/;
const alphaRegex = /[a-zA-Z]/;
if (charAfterCursor === '$' ||
alphaRegex.test(charAfterCursor) ||
specialCharacterRegex.test(charBeforeCursor)) {
e.preventDefault();
e.stopPropagation();
input.setSelectionRange(1, 1);
}
}
input.style.caretColor = 'initial';
}, css: {
fontWeight: '700',
fontSize: 48,
lineHeight: '58px',
textAlign: 'center',
textIndent: amount === '' || amountToToken === ''
? '-36px'
: undefined,
whiteSpace: 'pre',
_placeholder: {
color: 'text-subtle'
}
}, containerCss: {
mb: '2',
width: '100%'
} }), notEnoughFiat ? ((0, jsx_runtime_1.jsxs)(index_js_1.Text, { color: "red", css: { mb: 24, textAlign: 'center' }, children: ["Minimum amount is", ' ', displayCurrency && minAmountCurrency
? `${minAmountCurrency} ${token.symbol}`
: '$20'] })) : undefined, (0, jsx_runtime_1.jsxs)("button", { style: {
gap: '8px',
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
marginBottom: '16px',
alignSelf: 'center'
}, onClick: () => {
const _displayCurrency = !displayCurrency;
setDisplayCurrency(_displayCurrency);
if (_displayCurrency) {
let _amountToToken = 21 / usdRate;
if (+amountToToken > _amountToToken) {
_amountToToken = +amountToToken;
}
setInputValue((0, numbers_js_1.formatBN)(_amountToToken, 5, token.decimals, false), _displayCurrency);
}
}, children: [(0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "body2", color: "subtle", children: displayCurrency
? formattedAmount
: `${amountToTokenFormatted} ${token.symbol}` }), (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { css: {
color: 'gray8'
}, children: [(0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { style: { height: 14 }, icon: free_solid_svg_icons_1.faArrowUpLong }), (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { style: { height: 14 }, icon: free_solid_svg_icons_1.faArrowDownLong })] })] }), (0, jsx_runtime_1.jsx)(TokenSelector_js_1.default, { address: recipient, isValidAddress: isValidRecipient, token: token, onAnalyticEvent: onAnalyticEvent, fromChainWalletVMSupported: false, supportedWalletVMs: [], setToken: (token) => {
setToken(token);
onTokenChange?.(token);
}, context: "to", trigger: (0, jsx_runtime_1.jsx)("div", { style: {
width: 'max-content',
margin: '0 auto',
marginBottom: '16px'
}, children: (0, jsx_runtime_1.jsx)(TokenTrigger_js_1.TokenTrigger, { isSingleChainLocked: true, token: token }) }) }), (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { css: { gap: '2', margin: '0 auto' }, children: [(0, jsx_runtime_1.jsx)(index_js_1.Button, { color: "white", corners: "pill", css: {
minHeight: 28,
px: 3,
py: 1,
_light: {
filter: amount === '100' && !displayCurrency
? 'brightness(97%)'
: undefined
},
_dark: {
filter: amount === '100' && !displayCurrency
? 'brightness(130%)'
: undefined
}
}, onClick: () => {
setDisplayCurrency(false);
setInputValue('100', false);
}, children: (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle2", children: "$100" }) }), (0, jsx_runtime_1.jsx)(index_js_1.Button, { color: "white", corners: "pill", css: {
minHeight: 28,
px: 3,
py: 1,
_light: {
filter: amount === '300' && !displayCurrency
? 'brightness(97%)'
: undefined
},
_dark: {
filter: amount === '300' && !displayCurrency
? 'brightness(130%)'
: undefined
}
}, onClick: () => {
setDisplayCurrency(false);
setInputValue('300', false);
}, children: (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle2", children: "$300" }) }), (0, jsx_runtime_1.jsx)(index_js_1.Button, { color: "white", corners: "pill", css: {
minHeight: 28,
px: 3,
py: 1,
_light: {
filter: amount === '1000' && !displayCurrency
? 'brightness(97%)'
: undefined
},
_dark: {
filter: amount === '1000' && !displayCurrency
? 'brightness(130%)'
: undefined
}
}, onClick: () => {
setDisplayCurrency(false);
setInputValue('1000', false);
}, children: (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle2", children: "$1,000" }) })] })] }) }), (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", css: {
width: '100%',
overflow: 'hidden',
borderRadius: 'widget-card-border-radius',
backgroundColor: 'widget-background',
border: 'widget-card-border',
mb: 'widget-card-section-gutter',
p: '4'
}, children: [(0, jsx_runtime_1.jsxs)(index_js_1.Flex, { justify: "between", align: "center", css: { mb: '2' }, children: [(0, jsx_runtime_1.jsx)(index_js_1.Text, { color: "subtle", style: "subtitle2", children: "Recipient" }), multiWalletSupportEnabled === true &&
toChainWalletVMSupported ? ((0, jsx_runtime_1.jsx)(MultiWalletDropdown_js_1.MultiWalletDropdown, { context: "destination", selectedWalletAddress: recipient, onSelect: (wallet) => setRecipient(wallet.address), chain: toChain, onLinkNewWallet: () => {
if ((!linkedWallets || linkedWallets.length === 0) &&
toChainWalletVMSupported) {
onConnectWallet?.();
}
else {
onLinkNewWallet?.({
chain: toChain,
direction: 'to'
})?.then((wallet) => {
onSetPrimaryWallet?.(wallet.address);
});
}
}, setAddressModalOpen: setAddressModalOpen, wallets: linkedWallets, onAnalyticEvent: onAnalyticEvent, disablePasteWalletAddressOption: disablePasteWalletAddressOption })) : null, !multiWalletSupportEnabled || !toChainWalletVMSupported ? ((0, jsx_runtime_1.jsxs)(index_js_1.Button, { color: isValidRecipient && !isRecipientLinked
? 'warning'
: 'secondary', corners: "pill", size: "none", css: {
display: 'flex',
alignItems: 'center',
px: '2',
py: '1'
}, onClick: () => {
setAddressModalOpen(true);
onAnalyticEvent?.(events_js_1.EventNames.SWAP_ADDRESS_MODAL_CLICKED);
}, children: [isValidRecipient && !isRecipientLinked ? ((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: isValidRecipient && !isRecipientLinked
? 'amber11'
: 'anchor-color'
}, children: !isValidRecipient ? `Enter Address` : toDisplayName })] })) : null] }), (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { justify: "between", align: "center", children: [(0, jsx_runtime_1.jsx)(index_js_1.Text, { color: "subtle", style: "subtitle2", children: "Paying with" }), (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { css: {
alignItems: 'center',
gap: '2',
ml: 'auto',
mr: '2',
color: 'gray9'
}, children: [(0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { style: { width: 16 }, icon: free_solid_svg_icons_1.faCreditCard }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle2", children: "Card" })] })] })] }), (0, jsx_runtime_1.jsx)(index_js_1.Button, { css: { width: '100%', justifyContent: 'center' }, disabled: notEnoughFiat, onClick: () => {
if (!recipient && toChainWalletVMSupported) {
if (!linkedWallets || linkedWallets.length === 0) {
onConnectWallet?.();
}
else {
onLinkNewWallet?.({
chain: toChain,
direction: 'to'
})?.then((wallet) => {
onSetPrimaryWallet?.(wallet.address);
});
}
}
else if (!recipient) {
setAddressModalOpen(true);
}
else {
setOnrampModalOpen(true);
}
}, children: ctaCopy }), (0, jsx_runtime_1.jsx)(CustomAddressModal_js_1.CustomAddressModal, { open: addressModalOpen, toAddress: recipient, toChain: toChain, isConnected: (linkedWallets && linkedWallets.length > 0) || isConnected
? true
: false, linkedWallets: linkedWallets ?? [], multiWalletSupportEnabled: multiWalletSupportEnabled, onAnalyticEvent: onAnalyticEvent, onOpenChange: (open) => {
setAddressModalOpen(open);
}, onConfirmed: (address) => {
setRecipient(address);
}, onClear: () => {
setRecipient(undefined);
} }), (0, jsx_runtime_1.jsx)(OnrampModal_js_1.OnrampModal, { open: onrampModalOpen, onOpenChange: setOnrampModalOpen, onAnalyticEvent: onAnalyticEvent, moonpayOnUrlSignatureRequested: moonpayOnUrlSignatureRequested, fromToken: fromToken, toToken: token, fromChain: fromChain, toChain: toChain, amount: amount, amountFormatted: formattedAmount, amountToTokenFormatted: amountToTokenFormatted, fiatCurrency: fiatCurrency, recipient: recipient, onSuccess: onSuccess, moonPayCurrencyCode: moonPayCurrencyCode, isPassthrough: isPassthrough, usdRate: usdRate, moonPayThemeId: moonPayThemeId, moonPayThemeMode: moonPayThemeMode, moonPayApiKey: moonPayApiKey })] }));
} }));
};
exports.default = OnrampWidget;
//# sourceMappingURL=index.js.map