@imtbl/sdk 1.4.0-alpha.2 → 1.4.1-alpha.1

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

@@ -1,365 +0,0 @@
-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

@@ -1 +0,0 @@
-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};