@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
197 lines • 8.86 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const index_js_1 = require("../../../../hooks/index.js");
const viem_1 = require("viem");
const RelayKitProvider_js_1 = require("../../../../providers/RelayKitProvider.js");
const address_js_1 = require("../../../../utils/address.js");
const useWalletAddress_js_1 = tslib_1.__importDefault(require("../../../../hooks/useWalletAddress.js"));
const relay_kit_hooks_1 = require("@reservoir0x/relay-kit-hooks");
const numbers_js_1 = require("../../../../utils/numbers.js");
const depositAddresses_js_1 = require("../../../../constants/depositAddresses.js");
const OnrampWidgetRenderer = ({ defaultWalletAddress, linkedWallets, supportedWalletVMs, multiWalletSupportEnabled, moonPayApiKey, token: _token, setToken: _setToken, children }) => {
const client = (0, index_js_1.useRelayClient)();
const providerOptionsContext = (0, react_1.useContext)(RelayKitProvider_js_1.ProviderOptionsContext);
const connectorKeyOverrides = providerOptionsContext.vmConnectorKeyOverrides;
const [token, setToken] = (0, index_js_1.useFallbackState)(_token && _setToken
? _token
: {
address: viem_1.zeroAddress,
chainId: 8453,
name: 'ETH',
symbol: 'ETH',
decimals: 18,
logoURI: 'https://assets.relay.link/icons/currencies/eth.png'
}, _token && _setToken
? [_token, _setToken]
: undefined);
(0, react_1.useEffect)(() => {
if (_token &&
_setToken &&
depositAddresses_js_1.UnsupportedDepositAddressChainIds.includes(token.chainId)) {
setToken({
address: viem_1.zeroAddress,
chainId: 8453,
name: 'ETH',
symbol: 'ETH',
decimals: 18,
logoURI: 'https://assets.relay.link/icons/currencies/eth.png'
});
}
}, [_token]);
const [displayCurrency, setDisplayCurrency] = (0, react_1.useState)(false);
const { data: usdTokenPriceResponse } = (0, relay_kit_hooks_1.useTokenPrice)(client?.baseApiUrl, {
address: token.address,
chainId: token.chainId,
referrer: client?.source
}, {
refetchInterval: 60000 * 5,
refetchOnWindowFocus: false
});
const usdRate = usdTokenPriceResponse?.price ?? 0;
const minAmountCurrency = (0, numbers_js_1.formatBN)(20 / usdRate, 5, token.decimals, false);
const toChain = (0, react_1.useMemo)(() => client?.chains.find((chain) => chain.id === token.chainId), [token, client?.chains]);
const toChainWalletVMSupported = !toChain?.vmType || supportedWalletVMs.includes(toChain?.vmType);
const moonPayCurrency = (0, index_js_1.useSupportedMoonPayCurrencyCode)([
'usdc_base',
'usdc_polygon',
'usdc',
'eth',
'eth_arbitrum',
'eth_optimism'
], moonPayApiKey, token);
const fromToken = {
chainId: +moonPayCurrency.chainId,
address: moonPayCurrency.contractAddress,
symbol: moonPayCurrency.code.includes('eth') ? 'ETH' : 'USDC',
name: moonPayCurrency.code.includes('eth') ? 'ETH' : 'USDC',
logoURI: moonPayCurrency.code.includes('eth')
? 'https://assets.relay.link/icons/1/light.png'
: 'https://coin-images.coingecko.com/coins/images/6319/large/usdc.png?1696506694',
decimals: moonPayCurrency.code.includes('eth') ? 18 : 6
};
const fromChain = (0, react_1.useMemo)(() => client?.chains.find((chain) => chain.id === +moonPayCurrency.chainId), [fromToken, client?.chains, moonPayCurrency]);
const [amount, setAmount] = (0, react_1.useState)('20');
const [amountToToken, setAmountToToken] = (0, react_1.useState)('');
const [recipient, setRecipient] = (0, react_1.useState)(defaultWalletAddress);
const { displayName: toDisplayName } = (0, index_js_1.useENSResolver)(recipient, {
refetchOnWindowFocus: false,
enabled: toChain?.vmType === 'evm'
});
const [fiatCurrency, setFiatCurrency] = (0, react_1.useState)({
name: 'US Dollar',
code: 'usd',
minAmount: 20,
icon: 'https://static.moonpay.com/widget/currencies/usd.svg'
});
const address = (0, useWalletAddress_js_1.default)(undefined, linkedWallets);
const defaultRecipient = (0, react_1.useMemo)(() => {
const _linkedWallet = linkedWallets?.find((linkedWallet) => address ===
(linkedWallet.vmType === 'evm'
? linkedWallet.address.toLowerCase()
: linkedWallet.address));
const _isValidRecipient = (0, address_js_1.isValidAddress)(toChain?.vmType, recipient ?? '', toChain?.id, _linkedWallet?.address === recipient
? _linkedWallet?.connector
: undefined, connectorKeyOverrides);
if (multiWalletSupportEnabled &&
toChain &&
linkedWallets &&
!_isValidRecipient) {
const supportedAddress = (0, address_js_1.findSupportedWallet)(toChain, recipient, linkedWallets, connectorKeyOverrides);
return supportedAddress;
}
}, [
multiWalletSupportEnabled,
toChain,
recipient,
linkedWallets,
setRecipient
]);
const _recipient = recipient && recipient.length > 0 ? recipient : defaultRecipient;
const isRecipientLinked = (_recipient
? linkedWallets?.find((wallet) => wallet.address === _recipient) ||
address === _recipient
: undefined) !== undefined;
const isValidRecipient = (0, address_js_1.isValidAddress)(toChain?.vmType, _recipient ?? '', toChain?.id);
const { isPassthrough, moonPayCurrency: passThroughCurrency } = (0, index_js_1.useIsPassthrough)(token, moonPayApiKey);
(0, react_1.useEffect)(() => {
setInputValue(displayCurrency ? amountToToken : amount);
}, [usdRate]);
const amountToTokenFormatted = amountToToken
? (0, numbers_js_1.formatBN)(parseFloat(amountToToken), 5, token.decimals)
: '-';
const setInputValue = (0, react_1.useCallback)((inputValue, overrideDisplayCurrency) => {
const _displayCurrency = overrideDisplayCurrency !== undefined
? overrideDisplayCurrency
: displayCurrency;
if (_displayCurrency) {
const _amountToToken = inputValue.replace(/[^0-9.]+/g, '');
setAmountToToken(_amountToToken);
const _amount = _amountToToken && +_amountToToken > 0 ? +_amountToToken * usdRate : 0;
setAmount(`${parseFloat(_amount.toFixed(2))}`);
}
else {
let _amount = '';
const numericValue = inputValue
.replace(/[^0-9.]/g, '')
.replace(/(\..*?)(\..*)/, '$1')
.replace(/(\.\d{2})\d+/, '$1');
const regex = /^[0-9]+(\.[0-9]*)?$/;
if (numericValue === '.' || numericValue.includes(',')) {
_amount = '0.';
}
else if (regex.test(numericValue) || numericValue === '') {
_amount = numericValue;
}
const _amountToToken = _amount && +_amount > 0 ? +_amount / usdRate : 0;
setAmount(_amount);
setAmountToToken(`${_amountToToken}`);
}
}, [usdRate, displayCurrency]);
const notEnoughFiat = !amount || +amount < 20;
let ctaCopy = 'Buy';
if (notEnoughFiat) {
ctaCopy = 'Enter an amount';
}
else if (!_recipient && toChainWalletVMSupported) {
ctaCopy = `Connect Wallet`;
}
else if (!_recipient) {
ctaCopy = `Enter ${toChain?.displayName} address`;
}
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children({
displayCurrency,
setDisplayCurrency,
recipient: _recipient,
setRecipient,
isRecipientLinked,
isValidRecipient,
amount,
setAmount,
amountToToken,
setAmountToToken,
setInputValue,
token,
fromToken,
setToken,
toChain,
fromChain,
toDisplayName,
toChainWalletVMSupported,
fiatCurrency,
setFiatCurrency,
amountToTokenFormatted,
usdRate,
minAmountCurrency,
notEnoughFiat,
ctaCopy,
isPassthrough,
moonPayCurrencyCode: isPassthrough && passThroughCurrency?.code
? passThroughCurrency?.code
: moonPayCurrency.code
}) }));
};
exports.default = OnrampWidgetRenderer;
//# sourceMappingURL=OnrampWidgetRenderer.js.map