@imtbl/sdk 1.2.0 → 1.4.0-alpha.2

package/dist/browser/checkout/TopUpView-590c2c4c.js

@@ -0,0 +1,365 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Box, MenuItem, Heading } from '@biom3/react';
+import { createContext, useReducer, useEffect, useContext, useState } from 'react';
+import { V as ViewContext, E as EventTargetContext, u as useAnalytics, a as SimpleLayout, H as HeaderNavigation, F as FooterLogo, b as ViewActions, ae as SwapWidgetViews, o as orchestrationEvents, aq as BridgeWidgetViews, O as OnRampWidgetViews } from './index-4511315b.js';
+import { GasEstimateType, IMTBLWidgetEvents } from '@imtbl/checkout-sdk';
+import { CryptoFiat, CryptoFiatConfiguration } from '@imtbl/cryptofiat';
+import { useTranslation } from 'react-i18next';
+import { ethers } from 'ethers';
+
+var FiatSymbols;
+(function (FiatSymbols) {
+    FiatSymbols["USD"] = "usd";
+})(FiatSymbols || (FiatSymbols = {}));
+const initialCryptoFiatState = {
+    cryptoFiat: null,
+    fiatSymbol: FiatSymbols.USD,
+    tokenSymbols: [],
+    conversions: new Map(),
+};
+var CryptoFiatActions;
+(function (CryptoFiatActions) {
+    CryptoFiatActions["SET_CRYPTO_FIAT"] = "SET_CRYPTO_FIAT";
+    CryptoFiatActions["SET_FIAT_SYMBOL"] = "SET_FIAT_SYMBOL";
+    CryptoFiatActions["SET_TOKEN_SYMBOLS"] = "SET_TOKEN_SYMBOLS";
+    CryptoFiatActions["SET_CONVERSIONS"] = "SET_CONVERSIONS";
+})(CryptoFiatActions || (CryptoFiatActions = {}));
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const CryptoFiatContext = createContext({
+    cryptoFiatState: initialCryptoFiatState,
+    cryptoFiatDispatch: () => { },
+});
+const cryptoFiatReducer = (state, action) => {
+    switch (action.payload.type) {
+        case CryptoFiatActions.SET_CRYPTO_FIAT:
+            return {
+                ...state,
+                cryptoFiat: action.payload.cryptoFiat,
+            };
+        case CryptoFiatActions.SET_FIAT_SYMBOL:
+            return {
+                ...state,
+                fiatSymbol: action.payload.fiatSymbol,
+            };
+        case CryptoFiatActions.SET_TOKEN_SYMBOLS:
+            return {
+                ...state,
+                tokenSymbols: action.payload.tokenSymbols,
+            };
+        case CryptoFiatActions.SET_CONVERSIONS:
+            return {
+                ...state,
+                conversions: action.payload.conversions,
+            };
+        default:
+            return state;
+    }
+};
+
+const updateConversions = (cryptoToFiatResult, fiatSymbol) => {
+    const conversionMap = new Map();
+    // TODO: Consider using Object.keys(cryptoToFiatResult) instead of for...in
+    // for...in includes properties from the prototype chain
+    // eslint-disable-next-line no-restricted-syntax, guard-for-in
+    for (const tokenSymbol in cryptoToFiatResult) {
+        const conversion = cryptoToFiatResult[tokenSymbol];
+        const usdAmount = conversion[fiatSymbol];
+        if (usdAmount !== undefined) {
+            conversionMap.set(tokenSymbol, usdAmount);
+        }
+    }
+    return conversionMap;
+};
+const getCryptoToFiatConversion = async (cryptoFiat, fiatSymbol, tokenSymbols) => {
+    try {
+        if (tokenSymbols.length === 0)
+            return new Map();
+        const cryptoToFiatResult = await cryptoFiat.convert({
+            tokenSymbols,
+            fiatSymbol,
+        });
+        return updateConversions(cryptoToFiatResult, fiatSymbol);
+    }
+    catch (err) {
+        return new Map();
+    }
+};
+
+const DEFAULT_TOKEN_SYMBOLS = ['ETH', 'IMX'];
+function CryptoFiatProvider({ environment, children }) {
+    const [cryptoFiatState, cryptoFiatDispatch] = useReducer(cryptoFiatReducer, initialCryptoFiatState);
+    const { cryptoFiat, fiatSymbol, tokenSymbols } = cryptoFiatState;
+    useEffect(() => {
+        cryptoFiatDispatch({
+            payload: {
+                type: CryptoFiatActions.SET_CRYPTO_FIAT,
+                cryptoFiat: new CryptoFiat(new CryptoFiatConfiguration({
+                    baseConfig: {
+                        environment,
+                    },
+                })),
+            },
+        });
+    }, []);
+    useEffect(() => {
+        if (!cryptoFiat || !fiatSymbol)
+            return;
+        (async () => {
+            const conversions = await getCryptoToFiatConversion(cryptoFiat, fiatSymbol, [...new Set([...tokenSymbols, ...DEFAULT_TOKEN_SYMBOLS])]);
+            cryptoFiatDispatch({
+                payload: {
+                    type: CryptoFiatActions.SET_CONVERSIONS,
+                    conversions,
+                },
+            });
+        })();
+    }, [cryptoFiat, tokenSymbols, fiatSymbol]);
+    return (
+    // TODO: The object passed as the value prop to the Context provider changes every render.
+    // To fix this consider wrapping it in a useMemo hook.
+    // eslint-disable-next-line react/jsx-no-constructed-context-values
+    jsx(CryptoFiatContext.Provider, { value: { cryptoFiatState, cryptoFiatDispatch }, children: children }));
+}
+
+const convertFeeToFiat = (fee, token, conversions) => {
+    let feeAmountInFiat = -1;
+    if (fee && token) {
+        const formattedAmount = ethers.utils.formatUnits(fee, token.decimals);
+        const gasFeeTokenConversion = conversions.get(token.symbol.toLocaleLowerCase());
+        if (gasFeeTokenConversion) {
+            const parsedAmount = parseFloat(formattedAmount);
+            if (Number.isNaN(parsedAmount))
+                return feeAmountInFiat;
+            feeAmountInFiat = parsedAmount * gasFeeTokenConversion;
+        }
+    }
+    return feeAmountInFiat;
+};
+// Formats a value to 2 decimal places unless the value is less than 0.01, in which case it will show the first non-zero digit of the decimal places
+function formatFiatDecimals(value) {
+    if (value < 0) {
+        return '-.--';
+    }
+    const str = value.toString();
+    if (str.includes('e') || value === 0) {
+        // In this scenario, converting the fee to fiat has given us an exponent from
+        // parseFloat as the fee value is very low. If the value is low enough that converting
+        // the fee to fiat has returned an exponent, then it is significantly low enough to
+        // be considered essentially zero.
+        return '0.00';
+    }
+    if (value < 0.01) {
+        for (let i = 0; i < str.length; i++) {
+            if (str[i] !== '0' && str[i] !== '.') {
+                return value.toFixed(i - 1);
+            }
+        }
+    }
+    return value.toFixed(2);
+}
+const getOnRampFeeEstimation = (onRampFees) => {
+    const { minPercentage, maxPercentage } = onRampFees;
+    if (minPercentage === undefined || maxPercentage === undefined)
+        return '-.--';
+    return `${minPercentage}% to ${maxPercentage}`;
+};
+const getBridgeFeeEstimation = (bridgeFees, conversions) => {
+    const { fees, token } = bridgeFees;
+    const feeAmount = fees.totalFees;
+    if (feeAmount === undefined)
+        return '-.--';
+    if (token === undefined)
+        return '-.--';
+    const feesInFiat = convertFeeToFiat(fees.totalFees, token, conversions);
+    if (feesInFiat < 0)
+        return '-.--';
+    return formatFiatDecimals(feesInFiat);
+};
+
+function TopUpMenuItem({ testId, icon, heading, caption, onClick, renderFeeFunction, isDisabled, }) {
+    return (jsx(Box, { testId: "top-up-view", sx: { paddingY: '1px' }, children: jsxs(MenuItem, { testId: `menu-item-${testId}`, size: "medium", emphasized: true, onClick: !isDisabled ? onClick : undefined, sx: isDisabled ? { opacity: '0.5', cursor: 'not-allowed' } : {}, children: [jsx(MenuItem.Icon, { icon: icon }), jsx(MenuItem.Label, { size: "medium", children: heading }), jsx(MenuItem.IntentIcon, {}), jsxs(MenuItem.Caption, { testId: `menu-item-caption-${testId}`, children: [caption, jsx("br", {}), isDisabled ? '' : renderFeeFunction('-.--', false)] })] }) }));
+}
+
+function TopUpView({ widgetEvent, checkout, 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+provider, // Keep this for future use
+showOnrampOption, showSwapOption, showBridgeOption, tokenAddress, amount, analytics, onCloseButtonClick, onBackButtonClick, }) {
+    const { t } = useTranslation();
+    const { userJourney } = analytics;
+    const { viewDispatch } = useContext(ViewContext);
+    const { cryptoFiatState, cryptoFiatDispatch } = useContext(CryptoFiatContext);
+    const { conversions, fiatSymbol } = cryptoFiatState;
+    const { eventTargetState: { eventTarget } } = useContext(EventTargetContext);
+    const [onRampFeesPercentage, setOnRampFeesPercentage] = useState('-.--');
+    const swapFeesInFiat = '0.05';
+    const [bridgeFeesInFiat, setBridgeFeesInFiat] = useState('-.--');
+    const [isSwapAvailable, setIsSwapAvailable] = useState(true);
+    const { page, track } = useAnalytics();
+    useEffect(() => {
+        page({
+            userJourney,
+            screen: 'TopUp',
+        });
+    }, []);
+    useEffect(() => {
+        if (!cryptoFiatDispatch)
+            return;
+        cryptoFiatDispatch({
+            payload: {
+                type: CryptoFiatActions.SET_TOKEN_SYMBOLS,
+                tokenSymbols: DEFAULT_TOKEN_SYMBOLS,
+            },
+        });
+    }, [cryptoFiatDispatch]);
+    // Bridge fees estimation
+    useEffect(() => {
+        if (!checkout)
+            return;
+        (async () => {
+            const bridgeEstimate = await checkout.gasEstimate({
+                gasEstimateType: GasEstimateType.BRIDGE_TO_L2,
+            });
+            const est = await getBridgeFeeEstimation(bridgeEstimate, conversions);
+            setBridgeFeesInFiat(est);
+        })();
+    }, [checkout !== undefined]);
+    // Onramp fees estimation
+    useEffect(() => {
+        if (!checkout)
+            return;
+        (async () => {
+            const onRampFeesEstimate = await checkout.getExchangeFeeEstimate();
+            const onRampFees = getOnRampFeeEstimation(onRampFeesEstimate);
+            setOnRampFeesPercentage(onRampFees);
+        })();
+    }, [checkout !== undefined]);
+    // Check if swap is available
+    useEffect(() => {
+        if (!checkout)
+            return;
+        (async () => {
+            setIsSwapAvailable(await checkout.isSwapAvailable());
+        })();
+    }, [checkout !== undefined]);
+    const localTrack = (control, extras, controlType = 'Button') => {
+        track({
+            userJourney,
+            screen: 'TopUp',
+            control,
+            controlType,
+            extras,
+        });
+    };
+    const onClickSwap = () => {
+        if (widgetEvent === IMTBLWidgetEvents.IMTBL_SWAP_WIDGET_EVENT) {
+            const data = {
+                toTokenAddress: '',
+                fromAmount: '',
+                fromTokenAddress: '',
+            };
+            viewDispatch({
+                payload: {
+                    type: ViewActions.UPDATE_VIEW,
+                    view: {
+                        type: SwapWidgetViews.SWAP,
+                        data,
+                    },
+                },
+            });
+            localTrack('Swap', { ...data, widgetEvent });
+            return;
+        }
+        const data = {
+            fromTokenAddress: '',
+            toTokenAddress: tokenAddress ?? '',
+            amount: '',
+        };
+        orchestrationEvents.sendRequestSwapEvent(eventTarget, widgetEvent, data);
+        localTrack('Swap', { ...data, widgetEvent });
+    };
+    const onClickBridge = () => {
+        if (widgetEvent === IMTBLWidgetEvents.IMTBL_BRIDGE_WIDGET_EVENT) {
+            const data = {
+                fromTokenAddress: '',
+                fromAmount: '',
+            };
+            viewDispatch({
+                payload: {
+                    type: ViewActions.UPDATE_VIEW,
+                    view: {
+                        type: BridgeWidgetViews.WALLET_NETWORK_SELECTION,
+                        data,
+                    },
+                },
+            });
+            localTrack('Bridge', { ...data, widgetEvent });
+            return;
+        }
+        const data = {
+            tokenAddress: '',
+            amount: '',
+        };
+        orchestrationEvents.sendRequestBridgeEvent(eventTarget, widgetEvent, data);
+        localTrack('Bridge', { ...data, widgetEvent });
+    };
+    const onClickOnRamp = () => {
+        if (widgetEvent === IMTBLWidgetEvents.IMTBL_ONRAMP_WIDGET_EVENT) {
+            const data = {
+                tokenAddress: '',
+                amount: '',
+            };
+            viewDispatch({
+                payload: {
+                    type: ViewActions.UPDATE_VIEW,
+                    view: {
+                        type: OnRampWidgetViews.ONRAMP,
+                        data,
+                    },
+                },
+            });
+            localTrack('OnRamp', { ...data, widgetEvent });
+            return;
+        }
+        const data = {
+            tokenAddress: tokenAddress ?? '',
+            amount: amount ?? '',
+        };
+        orchestrationEvents.sendRequestOnrampEvent(eventTarget, widgetEvent, data);
+        localTrack('OnRamp', { ...data, widgetEvent });
+    };
+    const renderFees = (txt) => (jsx(Box, { sx: { fontSize: 'base.text.caption.small.regular.fontSize' }, children: txt }));
+    const topUpFeatures = [
+        {
+            testId: 'onramp',
+            icon: 'Wallet',
+            textConfigKey: 'views.TOP_UP_VIEW.topUpOptions.onramp',
+            onClickEvent: onClickOnRamp,
+            fee: () => renderFees(`${t('views.TOP_UP_VIEW.topUpOptions.onramp.subcaption')} ≈ ${onRampFeesPercentage}%`),
+            isAvailable: true,
+            isEnabled: showOnrampOption,
+        }, {
+            testId: 'swap',
+            icon: 'Coins',
+            textConfigKey: 'views.TOP_UP_VIEW.topUpOptions.swap',
+            onClickEvent: onClickSwap,
+            fee: () => renderFees(`${t('views.TOP_UP_VIEW.topUpOptions.swap.subcaption')} ≈ $${swapFeesInFiat} ${fiatSymbol.toUpperCase()}`),
+            isAvailable: isSwapAvailable,
+            isEnabled: showSwapOption,
+        },
+        {
+            testId: 'bridge',
+            icon: 'Minting',
+            textConfigKey: 'views.TOP_UP_VIEW.topUpOptions.bridge',
+            onClickEvent: onClickBridge,
+            fee: () => renderFees(`${t('views.TOP_UP_VIEW.topUpOptions.bridge.subcaption')} ≈ $${bridgeFeesInFiat} ${fiatSymbol.toUpperCase()}`),
+            isAvailable: true,
+            isEnabled: showBridgeOption,
+        },
+    ];
+    return (jsx(SimpleLayout, { header: (jsx(HeaderNavigation, { onBackButtonClick: onBackButtonClick, onCloseButtonClick: onCloseButtonClick, showBack: true })), footer: jsx(FooterLogo, {}), children: jsxs(Box, { sx: { paddingX: 'base.spacing.x4', paddingY: 'base.spacing.x4' }, children: [jsx(Heading, { size: "small", children: t('views.TOP_UP_VIEW.header.title') }), jsx(Box, { sx: { paddingY: 'base.spacing.x4' }, children: topUpFeatures
+                        .sort((a, b) => Number(b.isAvailable) - Number(a.isAvailable))
+                        .map((element) => element.isEnabled && (jsx(TopUpMenuItem, { testId: element.testId, icon: element.icon, heading: t(`${element.textConfigKey}.heading`), caption: !element.isAvailable
+                            ? t(`${element.textConfigKey}.disabledCaption`) : t(`${element.textConfigKey}.caption`), onClick: element.onClickEvent, renderFeeFunction: element.fee, isDisabled: !element.isAvailable }, t(`${element.textConfigKey}.heading`).toLowerCase()))) })] }) }));
+}
+
+export { CryptoFiatContext as C, TopUpView as T, CryptoFiatActions as a, CryptoFiatProvider as b };

package/dist/browser/checkout/TopUpView-ff09517a.js

@@ -0,0 +1 @@
+import{r as t,a7 as e,b9 as s,j as n,aV as o,W as i,w as a,u as r,V as c,E as d,a as l,bu as p,c as u,H as f,F as E,x as h,I as v,d as y,aN as m,z as w,bg as S,O as T}from"./index-9a5fbaa1.js";var g;!function(t){t.USD="usd"}(g||(g={}));const C={cryptoFiat:null,fiatSymbol:g.USD,tokenSymbols:[],conversions:new Map};var b;!function(t){t.SET_CRYPTO_FIAT="SET_CRYPTO_FIAT",t.SET_FIAT_SYMBOL="SET_FIAT_SYMBOL",t.SET_TOKEN_SYMBOLS="SET_TOKEN_SYMBOLS",t.SET_CONVERSIONS="SET_CONVERSIONS"}(b||(b={}));const _=t.createContext({cryptoFiatState:C,cryptoFiatDispatch:()=>{}}),O=(t,e)=>{switch(e.payload.type){case b.SET_CRYPTO_FIAT:return{...t,cryptoFiat:e.payload.cryptoFiat};case b.SET_FIAT_SYMBOL:return{...t,fiatSymbol:e.payload.fiatSymbol};case b.SET_TOKEN_SYMBOLS:return{...t,tokenSymbols:e.payload.tokenSymbols};case b.SET_CONVERSIONS:return{...t,conversions:e.payload.conversions};default:return t}};class x{baseConfig;constructor({baseConfig:t}){this.baseConfig=t}}const I={[e.SANDBOX]:"https://checkout-api.sandbox.immutable.com",[e.PRODUCTION]:"https://checkout-api.immutable.com"};class k{coinsCache;overridesCache;config;constructor(t){this.coinsCache=null,this.overridesCache=null,this.config=t.baseConfig}urlWithPath(t){return I[this.config.environment]+t}async fetchOverrides(){if(null!==this.overridesCache)return;const t=this.urlWithPath("/v1/fiat/coins/overrides"),e=await s.get(t);if(200!==e.status)throw new Error(`Error fetching coins overrides: ${e.status} ${e.statusText}`);this.overridesCache=new Map(Object.entries(e.data))}async fetchCoins(){if(null!==this.coinsCache)return;await this.fetchOverrides();const t=this.urlWithPath("/v1/fiat/coins/all"),e=await s.get(t);if(200!==e.status)throw new Error(`Error fetching coins list: ${e.status} ${e.statusText}`);const{data:n}=e;this.coinsCache=new Map;for(const t of n){const e=this.overridesCache.get(t.symbol.toLowerCase());this.coinsCache.set(t.symbol.toLowerCase(),e||t.id.toLowerCase())}}async convert({tokenSymbols:t,fiatSymbols:e=[]}){if(!t||0===t.length)throw new Error("Error missing token symbols to convert");const n=e.filter((t=>""!==t));0===n.length&&n.push("usd"),await this.fetchCoins();const o=t.map((t=>this.coinsCache.get(t.toLowerCase()))).filter((t=>""!==t&&void 0!==t)).join(","),i=n.join(",").toLowerCase(),a=this.urlWithPath(`/v1/fiat/conversion?ids=${o}&currencies=${i}`),r=await s.get(a);if(200!==r.status)throw new Error(`Error fetching prices: ${r.status} ${r.statusText}`);const{data:c}=r,d={};for(const e of t){const t=e.toLowerCase(),s=this.coinsCache.get(t);d[t]={},s&&(d[t]=c[s]||{})}return d}}const A=async(t,e,s)=>{try{if(0===s.length)return new Map;return((t,e)=>{const s=new Map;for(const n in t){const o=t[n][e];void 0!==o&&s.set(n,o)}return s})(await t.convert({tokenSymbols:s,fiatSymbol:e}),e)}catch(t){return new Map}},P=["ETH","IMX"];function F({environment:e,children:s}){const[o,i]=t.useReducer(O,C),{cryptoFiat:a,fiatSymbol:r,tokenSymbols:c}=o;return t.useEffect((()=>{i({payload:{type:b.SET_CRYPTO_FIAT,cryptoFiat:new k(new x({baseConfig:{environment:e}}))}})}),[]),t.useEffect((()=>{a&&r&&(async()=>{const t=await A(a,r,[...new Set([...c,...P])]);i({payload:{type:b.SET_CONVERSIONS,conversions:t}})})()}),[a,c,r]),n.jsx(_.Provider,{value:{cryptoFiatState:o,cryptoFiatDispatch:i},children:s})}const N=(t,e)=>{const{fees:s,token:n}=t;if(void 0===s.totalFees)return"-.--";if(void 0===n)return"-.--";const i=((t,e,s)=>{let n=-1;if(t&&e){const i=o(t,e.decimals),a=s.get(e.symbol.toLocaleLowerCase());if(a){const t=parseFloat(i);if(Number.isNaN(t))return n;n=t*a}}return n})(s.totalFees,n,e);return i<0?"-.--":function(t){if(t<0)return"-.--";const e=t.toString();if(e.includes("e")||0===t)return"0.00";if(t<.01)for(let s=0;s<e.length;s++)if("0"!==e[s]&&"."!==e[s])return t.toFixed(s-1);return t.toFixed(2)}(i)};function B({testId:t,icon:e,heading:s,caption:o,onClick:r,renderFeeFunction:c,isDisabled:d}){return n.jsx(i,{testId:"top-up-view",sx:{paddingY:"1px"},children:n.jsxs(a,{testId:`menu-item-${t}`,size:"medium",emphasized:!0,onClick:d?void 0:r,sx:d?{opacity:"0.5",cursor:"not-allowed"}:{},children:[n.jsx(a.Icon,{icon:e}),n.jsx(a.Label,{size:"medium",children:s}),n.jsx(a.IntentIcon,{}),n.jsxs(a.Caption,{testId:`menu-item-caption-${t}`,children:[o,n.jsx("br",{}),d?"":c("-.--",!1)]})]})})}function $({widgetEvent:e,checkout:s,provider:o,showOnrampOption:a,showSwapOption:g,showBridgeOption:C,tokenAddress:O,amount:x,analytics:I,onCloseButtonClick:k,onBackButtonClick:A}){const{t:F}=r(),{userJourney:$}=I,{viewDispatch:L}=t.useContext(c),{cryptoFiatState:U,cryptoFiatDispatch:W}=t.useContext(_),{conversions:j,fiatSymbol:M}=U,{eventTargetState:{eventTarget:R}}=t.useContext(d),[V,D]=t.useState("-.--"),[Y,K]=t.useState("-.--"),[z,G]=t.useState(!0),{page:q,track:J}=l();t.useEffect((()=>{q({userJourney:$,screen:"TopUp"})}),[]),t.useEffect((()=>{W&&W({payload:{type:b.SET_TOKEN_SYMBOLS,tokenSymbols:P}})}),[W]),t.useEffect((()=>{s&&(async()=>{const t=await s.gasEstimate({gasEstimateType:p.BRIDGE_TO_L2}),e=await N(t,j);K(e)})()}),[void 0!==s]),t.useEffect((()=>{s&&(async()=>{const t=(t=>{const{minPercentage:e,maxPercentage:s}=t;return void 0===e||void 0===s?"-.--":`${e}% to ${s}`})(await s.getExchangeFeeEstimate());D(t)})()}),[void 0!==s]),t.useEffect((()=>{s&&(async()=>{G(await s.isSwapAvailable())})()}),[void 0!==s]);const X=(t,e,s="Button")=>{J({userJourney:$,screen:"TopUp",control:t,controlType:s,extras:e})},H=t=>n.jsx(i,{sx:{fontSize:"base.text.caption.small.regular.fontSize"},children:t}),Q=[{testId:"onramp",icon:"Wallet",textConfigKey:"views.TOP_UP_VIEW.topUpOptions.onramp",onClickEvent:()=>{if(e===v.IMTBL_ONRAMP_WIDGET_EVENT){const t={tokenAddress:"",amount:""};return L({payload:{type:y.UPDATE_VIEW,view:{type:T.ONRAMP,data:t}}}),void X("OnRamp",{...t,widgetEvent:e})}const t={tokenAddress:O??"",amount:x??""};w.sendRequestOnrampEvent(R,e,t),X("OnRamp",{...t,widgetEvent:e})},fee:()=>H(`${F("views.TOP_UP_VIEW.topUpOptions.onramp.subcaption")} ≈ ${V}%`),isAvailable:!0,isEnabled:a},{testId:"swap",icon:"Coins",textConfigKey:"views.TOP_UP_VIEW.topUpOptions.swap",onClickEvent:()=>{if(e===v.IMTBL_SWAP_WIDGET_EVENT){const t={toTokenAddress:"",fromAmount:"",fromTokenAddress:""};return L({payload:{type:y.UPDATE_VIEW,view:{type:m.SWAP,data:t}}}),void X("Swap",{...t,widgetEvent:e})}const t={fromTokenAddress:"",toTokenAddress:O??"",amount:""};w.sendRequestSwapEvent(R,e,t),X("Swap",{...t,widgetEvent:e})},fee:()=>H(`${F("views.TOP_UP_VIEW.topUpOptions.swap.subcaption")} ≈ $0.05 ${M.toUpperCase()}`),isAvailable:z,isEnabled:g},{testId:"bridge",icon:"Minting",textConfigKey:"views.TOP_UP_VIEW.topUpOptions.bridge",onClickEvent:()=>{if(e===v.IMTBL_BRIDGE_WIDGET_EVENT){const t={fromTokenAddress:"",fromAmount:""};return L({payload:{type:y.UPDATE_VIEW,view:{type:S.WALLET_NETWORK_SELECTION,data:t}}}),void X("Bridge",{...t,widgetEvent:e})}const t={tokenAddress:"",amount:""};w.sendRequestBridgeEvent(R,e,t),X("Bridge",{...t,widgetEvent:e})},fee:()=>H(`${F("views.TOP_UP_VIEW.topUpOptions.bridge.subcaption")} ≈ $${Y} ${M.toUpperCase()}`),isAvailable:!0,isEnabled:C}];return n.jsx(u,{header:n.jsx(f,{onBackButtonClick:A,onCloseButtonClick:k,showBack:!0}),footer:n.jsx(E,{}),children:n.jsxs(i,{sx:{paddingX:"base.spacing.x4",paddingY:"base.spacing.x4"},children:[n.jsx(h,{size:"small",children:F("views.TOP_UP_VIEW.header.title")}),n.jsx(i,{sx:{paddingY:"base.spacing.x4"},children:Q.sort(((t,e)=>Number(e.isAvailable)-Number(t.isAvailable))).map((t=>t.isEnabled&&n.jsx(B,{testId:t.testId,icon:t.icon,heading:F(`${t.textConfigKey}.heading`),caption:t.isAvailable?F(`${t.textConfigKey}.caption`):F(`${t.textConfigKey}.disabledCaption`),onClick:t.onClickEvent,renderFeeFunction:t.fee,isDisabled:!t.isAvailable},F(`${t.textConfigKey}.heading`).toLowerCase())))})]})})}export{_ as C,$ as T,b as a,F as b};