@lifi/widget 2.9.4 → 3.0.0-alpha.1

package/src/_esm/utils/converters.js

@@ -0,0 +1,169 @@
+const buildProcessFromTxHistory = (tx) => {
+    const sending = tx.sending;
+    const receiving = tx.receiving;
+    if (!sending.token?.chainId || !receiving.token?.chainId) {
+        return [];
+    }
+    const processStatus = tx.status === 'DONE' ? 'DONE' : 'FAILED';
+    const substatus = processStatus === 'FAILED' ? 'UNKNOWN_ERROR' : 'COMPLETED';
+    if (sending.chainId === receiving.chainId) {
+        return [
+            {
+                type: 'SWAP', // operations on same chain will be swaps
+                startedAt: sending.timestamp ?? Date.now(),
+                message: '',
+                status: processStatus,
+                txHash: sending.txHash,
+                txLink: sending.txLink,
+                doneAt: receiving.timestamp ?? Date.now(),
+                substatus,
+                substatusMessage: '',
+            },
+        ];
+    }
+    const process = [
+        {
+            type: 'CROSS_CHAIN', // first step of bridging, ignoring the approvals
+            startedAt: sending.timestamp ?? Date.now(),
+            message: '',
+            status: processStatus, // can be FAILED
+            txHash: sending.txHash,
+            txLink: sending.txLink,
+            doneAt: sending.timestamp,
+        },
+        {
+            type: 'RECEIVING_CHAIN', // final step of bridging, post swaps
+            startedAt: receiving.timestamp ?? Date.now(),
+            message: '',
+            status: processStatus,
+            substatus,
+            substatusMessage: '',
+            doneAt: receiving.timestamp ?? Date.now(),
+            txHash: receiving.txHash,
+            txLink: receiving.txLink,
+        },
+    ];
+    return process;
+};
+export const buildRouteFromTxHistory = (tx, tools) => {
+    const sending = tx.sending;
+    const receiving = tx.receiving;
+    if (!sending.token?.chainId || !receiving.token?.chainId) {
+        return;
+    }
+    const selectedBridge = tools?.bridges.find((bridge) => bridge.key === tx.tool);
+    const selectedExchange = tools?.exchanges.find((exchange) => exchange.key === tx.tool);
+    const usedTool = {
+        key: tx.tool,
+        name: selectedBridge?.name ?? selectedExchange?.name ?? tx.tool,
+        logoURI: selectedBridge?.logoURI ?? selectedExchange?.logoURI ?? '',
+    };
+    const fromToken = {
+        ...sending.token,
+        amount: BigInt(sending.amount ?? 0),
+        priceUSD: sending.amountUSD ?? '0',
+        symbol: sending.token?.symbol ?? '',
+        decimals: sending.token?.decimals ?? 0,
+        name: sending.token?.name ?? '',
+        chainId: sending.token?.chainId,
+    };
+    const toToken = {
+        ...receiving.token,
+        amount: BigInt(receiving.amount ?? 0),
+        priceUSD: receiving.amountUSD ?? '0',
+        symbol: receiving.token?.symbol ?? '',
+        decimals: receiving.token?.decimals ?? 0,
+        name: receiving.token?.name ?? '',
+        chainId: receiving.token?.chainId,
+    };
+    const routeExecution = {
+        status: 1,
+        route: {
+            id: tx.transactionId,
+            fromAddress: tx.fromAddress,
+            toAddress: tx.toAddress,
+            fromChainId: sending.chainId,
+            fromAmount: sending.amount ?? '',
+            fromAmountUSD: sending.amountUSD ?? '',
+            toAmount: receiving.amount ?? '',
+            toAmountMin: receiving.amount ?? '',
+            toAmountUSD: receiving.amountUSD ?? '',
+            toChainId: receiving.chainId,
+            fromToken,
+            toToken,
+            steps: [
+                {
+                    id: '',
+                    type: 'lifi',
+                    tool: tx.tool,
+                    toolDetails: usedTool,
+                    action: {
+                        fromToken: sending.token,
+                        fromAmount: sending.amount ?? '',
+                        fromChainId: sending.chainId,
+                        fromAddress: tx.fromAddress,
+                        toToken: receiving.token,
+                        toChainId: receiving.chainId,
+                        toAddress: tx.toAddress,
+                        slippage: 0,
+                    },
+                    estimate: {
+                        tool: tx.tool,
+                        approvalAddress: '',
+                        fromAmount: sending.amount ?? '',
+                        fromAmountUSD: sending.amountUSD ?? '',
+                        toAmountMin: receiving.amount ?? '',
+                        toAmount: receiving.amount ?? '',
+                        toAmountUSD: receiving.amountUSD ?? '',
+                        executionDuration: 30,
+                    },
+                    includedSteps: [
+                        {
+                            id: '',
+                            type: sending.chainId === receiving.chainId ? 'swap' : 'cross',
+                            action: {
+                                fromChainId: sending.chainId,
+                                fromAmount: sending.amount ?? '',
+                                fromToken: sending.token,
+                                toChainId: receiving.chainId,
+                                toToken: receiving.token,
+                                slippage: 0,
+                                fromAddress: tx.fromAddress,
+                                toAddress: tx.toAddress,
+                            },
+                            estimate: {
+                                tool: tx.tool,
+                                fromAmount: sending.amount ?? '',
+                                toAmount: receiving.amount ?? '',
+                                toAmountMin: receiving.amount ?? '',
+                                approvalAddress: '',
+                                executionDuration: 30,
+                            },
+                            tool: tx.tool,
+                            toolDetails: usedTool,
+                        },
+                    ],
+                    integrator: '',
+                    execution: {
+                        status: 'DONE', // can be FAILED
+                        process: buildProcessFromTxHistory(tx),
+                        fromAmount: sending.amount,
+                        toAmount: receiving.amount,
+                        toToken: receiving.token,
+                        gasAmount: sending.gasAmount,
+                        gasAmountUSD: sending.gasAmountUSD,
+                        gasPrice: sending.gasPrice,
+                        gasToken: sending.gasToken,
+                        gasUsed: sending.gasUsed,
+                    },
+                },
+            ],
+            insurance: {
+                state: 'NOT_INSURABLE',
+                feeAmountUsd: '0',
+            },
+        },
+    };
+    return routeExecution;
+};
+//# sourceMappingURL=converters.js.map

package/src/_esm/utils/converters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"converters.js","sourceRoot":"","sources":["../../../../src/utils/converters.ts"],"names":[],"mappings":"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"}

package/src/_esm/utils/deepMerge.js

@@ -0,0 +1,15 @@
+const isObject = (obj) => obj && typeof obj === 'object';
+export const deepMerge = (...objects) => {
+    return objects.reduce((prev, obj) => {
+        for (const key in obj) {
+            if (isObject(prev[key]) && isObject(obj[key])) {
+                prev[key] = deepMerge(prev[key], obj[key]);
+            }
+            else {
+                prev[key] = obj[key];
+            }
+        }
+        return prev;
+    }, {});
+};
+//# sourceMappingURL=deepMerge.js.map

package/src/_esm/utils/deepMerge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"deepMerge.js","sourceRoot":"","sources":["../../../../src/utils/deepMerge.ts"],"names":[],"mappings":"AAAA,MAAM,QAAQ,GAAG,CAAC,GAAQ,EAAE,EAAE,CAAC,GAAG,IAAI,OAAO,GAAG,KAAK,QAAQ,CAAC;AAE9D,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,GAAG,OAAc,EAAE,EAAE;IAC7C,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE;QAClC,KAAK,MAAM,GAAG,IAAI,GAAG,EAAE,CAAC;YACtB,IAAI,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;gBAC9C,IAAI,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;YAC7C,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;YACvB,CAAC;QACH,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC,CAAC"}

package/src/_esm/utils/elements.js

@@ -0,0 +1,9 @@
+export var ElementId;
+(function (ElementId) {
+    ElementId["AppExpandedContainer"] = "widget-app-expanded-container";
+    ElementId["Header"] = "widget-header";
+    ElementId["RelativeContainer"] = "widget-relative-container";
+    ElementId["ScrollableContainer"] = "widget-scrollable-container";
+})(ElementId || (ElementId = {}));
+export const createElementId = (ElementId, elementId) => elementId ? `${ElementId}-${elementId}` : ElementId;
+//# sourceMappingURL=elements.js.map

package/src/_esm/utils/elements.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elements.js","sourceRoot":"","sources":["../../../../src/utils/elements.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,SAKX;AALD,WAAY,SAAS;IACnB,mEAAsD,CAAA;IACtD,qCAAwB,CAAA;IACxB,4DAA+C,CAAA;IAC/C,gEAAmD,CAAA;AACrD,CAAC,EALW,SAAS,KAAT,SAAS,QAKpB;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,SAAoB,EAAE,SAAiB,EAAE,EAAE,CACzE,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC"}

package/src/_esm/utils/enum.js

@@ -0,0 +1,2 @@
+export const hasEnumFlag = (flags, flag) => (flags & flag) === flag;
+//# sourceMappingURL=enum.js.map

package/src/_esm/utils/enum.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"enum.js","sourceRoot":"","sources":["../../../../src/utils/enum.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG,CAA4B,KAAQ,EAAE,IAAO,EAAE,EAAE,CAC1E,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC"}

package/src/_esm/utils/format.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Format token amount to at least 4 decimals.
+ * @param amount amount to format.
+ * @returns formatted amount.
+ */
+export declare const formatTokenAmount: (amount: bigint | undefined, decimals: number, decimalPlaces?: number) => string;
+export declare const formatSlippage: (slippage?: string, defaultValue?: string, returnInitial?: boolean) => string;
+export declare const formatInputAmount: (amount: string, decimals?: number | null, returnInitial?: boolean) => string;
+export declare const formatTokenPrice: (amount?: string, price?: string) => number;

package/src/_esm/utils/format.js

@@ -0,0 +1,76 @@
+import { formatUnits } from 'viem';
+/**
+ * Format token amount to at least 4 decimals.
+ * @param amount amount to format.
+ * @returns formatted amount.
+ */
+export const formatTokenAmount = (amount = 0n, decimals, decimalPlaces = 3) => {
+    const formattedAmount = amount ? formatUnits(amount, decimals) : '0';
+    const parsedAmount = parseFloat(formattedAmount);
+    if (parsedAmount === 0 || isNaN(Number(formattedAmount))) {
+        return '0';
+    }
+    const absAmount = Math.abs(parsedAmount);
+    while (absAmount < 1 / 10 ** decimalPlaces) {
+        decimalPlaces++;
+    }
+    return parsedAmount.toFixed(decimalPlaces + 1);
+};
+export const formatSlippage = (slippage = '', defaultValue = '', returnInitial = false) => {
+    if (!slippage) {
+        return slippage;
+    }
+    const parsedSlippage = parseFloat(slippage);
+    if (isNaN(Number(slippage)) && !isNaN(parsedSlippage)) {
+        return parsedSlippage.toString();
+    }
+    if (isNaN(parsedSlippage)) {
+        return defaultValue;
+    }
+    if (parsedSlippage > 100) {
+        return '100';
+    }
+    if (parsedSlippage < 0) {
+        return Math.abs(parsedSlippage).toString();
+    }
+    if (returnInitial) {
+        return slippage;
+    }
+    return parsedSlippage.toString();
+};
+export const formatInputAmount = (amount, decimals = null, returnInitial = false) => {
+    if (!amount) {
+        return amount;
+    }
+    let formattedAmount = amount.replaceAll(',', '.');
+    if (formattedAmount.startsWith('.')) {
+        formattedAmount = '0' + formattedAmount;
+    }
+    const parsedAmount = parseFloat(formattedAmount);
+    if (isNaN(Number(formattedAmount)) && !isNaN(parsedAmount)) {
+        return parsedAmount.toString();
+    }
+    if (isNaN(Math.abs(Number(formattedAmount)))) {
+        return '';
+    }
+    if (returnInitial) {
+        return formattedAmount;
+    }
+    let [integer, fraction = ''] = formattedAmount.split('.');
+    if (decimals !== null && fraction.length > decimals) {
+        fraction = fraction.slice(0, decimals);
+    }
+    integer = integer.replace(/^0+|-/, '');
+    fraction = fraction.replace(/(0+)$/, '');
+    return `${integer || (fraction ? '0' : '')}${fraction ? `.${fraction}` : ''}`;
+};
+export const formatTokenPrice = (amount, price) => {
+    if (!amount || !price) {
+        return 0;
+    }
+    if (isNaN(Number(amount)) || isNaN(Number(price))) {
+        return 0;
+    }
+    return parseFloat(amount) * parseFloat(price);
+};
+//# sourceMappingURL=format.js.map

package/src/_esm/utils/format.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"format.js","sourceRoot":"","sources":["../../../../src/utils/format.ts"],"names":[],"mappings":"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"}

package/src/_esm/utils/index.d.ts

@@ -0,0 +1,9 @@
+export * from './colors';
+export * from './deepMerge';
+export * from './elements';
+export * from './enum';
+export * from './format';
+export * from './input';
+export * from './navigationRoutes';
+export * from './svm';
+export * from './wallet';

package/src/_esm/utils/index.js

@@ -0,0 +1,10 @@
+export * from './colors';
+export * from './deepMerge';
+export * from './elements';
+export * from './enum';
+export * from './format';
+export * from './input';
+export * from './navigationRoutes';
+export * from './svm';
+export * from './wallet';
+//# sourceMappingURL=index.js.map

package/src/_esm/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC"}

package/src/_esm/utils/input.js

@@ -0,0 +1,27 @@
+export const fitInputText = (maxFontSize, minFontSize, element) => {
+    if (!element) {
+        return;
+    }
+    let high = maxFontSize;
+    let low = minFontSize;
+    let size = minFontSize;
+    let mid = 0;
+    // Binary search for highest font size best fit
+    while (low <= high) {
+        mid = (high + low) >> 1;
+        const fontSize = `${mid + 1}px`;
+        element.style.fontSize = fontSize;
+        // scrollWidth has different rounding than clientWidth, remove 1px for consistency
+        const scrollWidth = element.scrollWidth - 1;
+        if (scrollWidth <= element.clientWidth) {
+            size = mid;
+            low = mid + 1;
+        }
+        else {
+            high = mid - 1;
+        }
+    }
+    const fontSize = `${size}px`;
+    element.style.fontSize = fontSize;
+};
+//# sourceMappingURL=input.js.map

package/src/_esm/utils/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../../src/utils/input.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,WAAmB,EACnB,WAAmB,EACnB,OAAoB,EACpB,EAAE;IACF,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO;IACT,CAAC;IACD,IAAI,IAAI,GAAG,WAAW,CAAC;IACvB,IAAI,GAAG,GAAG,WAAW,CAAC;IACtB,IAAI,IAAI,GAAG,WAAW,CAAC;IACvB,IAAI,GAAG,GAAG,CAAC,CAAC;IACZ,+CAA+C;IAC/C,OAAO,GAAG,IAAI,IAAI,EAAE,CAAC;QACnB,GAAG,GAAG,CAAC,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC;QACxB,MAAM,QAAQ,GAAG,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC;QAChC,OAAO,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAClC,kFAAkF;QAClF,MAAM,WAAW,GAAG,OAAO,CAAC,WAAW,GAAG,CAAC,CAAC;QAC5C,IAAI,WAAW,IAAI,OAAO,CAAC,WAAW,EAAE,CAAC;YACvC,IAAI,GAAG,GAAG,CAAC;YACX,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC;QAChB,CAAC;aAAM,CAAC;YACN,IAAI,GAAG,GAAG,GAAG,CAAC,CAAC;QACjB,CAAC;IACH,CAAC;IACD,MAAM,QAAQ,GAAG,GAAG,IAAI,IAAI,CAAC;IAC7B,OAAO,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;AACpC,CAAC,CAAC"}

package/src/_esm/utils/navigationRoutes.d.ts

@@ -0,0 +1,22 @@
+export declare const navigationRoutes: {
+    home: string;
+    activeTransactions: string;
+    bridges: string;
+    exchanges: string;
+    fromChain: string;
+    fromToken: string;
+    languages: string;
+    routes: string;
+    selectWallet: string;
+    settings: string;
+    toChain: string;
+    toToken: string;
+    toTokenNative: string;
+    transactionDetails: string;
+    transactionExecution: string;
+    transactionHistory: string;
+};
+export declare const navigationRoutesValues: string[];
+export declare const stickyHeaderRoutes: string[];
+export declare const backButtonRoutes: string[];
+export type NavigationRouteType = keyof typeof navigationRoutes;

package/src/_esm/utils/navigationRoutes.js

@@ -0,0 +1,52 @@
+export const navigationRoutes = {
+    home: '/',
+    activeTransactions: 'active-transactions',
+    bridges: 'bridges',
+    exchanges: 'exchanges',
+    fromChain: 'from-chain',
+    fromToken: 'from-token',
+    languages: 'languages',
+    routes: 'routes',
+    selectWallet: 'select-wallet',
+    settings: 'settings',
+    toChain: 'to-chain',
+    toToken: 'to-token',
+    toTokenNative: 'to-token-native',
+    transactionDetails: 'transaction-details',
+    transactionExecution: 'transaction-execution',
+    transactionHistory: 'transaction-history',
+};
+export const navigationRoutesValues = Object.values(navigationRoutes);
+export const stickyHeaderRoutes = [
+    navigationRoutes.activeTransactions,
+    navigationRoutes.bridges,
+    navigationRoutes.exchanges,
+    navigationRoutes.fromChain,
+    navigationRoutes.home,
+    navigationRoutes.routes,
+    navigationRoutes.selectWallet,
+    navigationRoutes.settings,
+    navigationRoutes.toChain,
+    navigationRoutes.toTokenNative,
+    navigationRoutes.transactionDetails,
+    navigationRoutes.transactionExecution,
+    navigationRoutes.transactionHistory,
+];
+export const backButtonRoutes = [
+    navigationRoutes.activeTransactions,
+    navigationRoutes.bridges,
+    navigationRoutes.exchanges,
+    navigationRoutes.languages,
+    navigationRoutes.fromChain,
+    navigationRoutes.fromToken,
+    navigationRoutes.routes,
+    navigationRoutes.selectWallet,
+    navigationRoutes.settings,
+    navigationRoutes.toChain,
+    navigationRoutes.toToken,
+    navigationRoutes.toTokenNative,
+    navigationRoutes.transactionDetails,
+    navigationRoutes.transactionExecution,
+    navigationRoutes.transactionHistory,
+];
+//# sourceMappingURL=navigationRoutes.js.map

package/src/_esm/utils/navigationRoutes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigationRoutes.js","sourceRoot":"","sources":["../../../../src/utils/navigationRoutes.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,IAAI,EAAE,GAAG;IACT,kBAAkB,EAAE,qBAAqB;IACzC,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,WAAW;IACtB,SAAS,EAAE,YAAY;IACvB,SAAS,EAAE,YAAY;IACvB,SAAS,EAAE,WAAW;IACtB,MAAM,EAAE,QAAQ;IAChB,YAAY,EAAE,eAAe;IAC7B,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,UAAU;IACnB,OAAO,EAAE,UAAU;IACnB,aAAa,EAAE,iBAAiB;IAChC,kBAAkB,EAAE,qBAAqB;IACzC,oBAAoB,EAAE,uBAAuB;IAC7C,kBAAkB,EAAE,qBAAqB;CAC1C,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;AAEtE,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,gBAAgB,CAAC,kBAAkB;IACnC,gBAAgB,CAAC,OAAO;IACxB,gBAAgB,CAAC,SAAS;IAC1B,gBAAgB,CAAC,SAAS;IAC1B,gBAAgB,CAAC,IAAI;IACrB,gBAAgB,CAAC,MAAM;IACvB,gBAAgB,CAAC,YAAY;IAC7B,gBAAgB,CAAC,QAAQ;IACzB,gBAAgB,CAAC,OAAO;IACxB,gBAAgB,CAAC,aAAa;IAC9B,gBAAgB,CAAC,kBAAkB;IACnC,gBAAgB,CAAC,oBAAoB;IACrC,gBAAgB,CAAC,kBAAkB;CACpC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,gBAAgB,CAAC,kBAAkB;IACnC,gBAAgB,CAAC,OAAO;IACxB,gBAAgB,CAAC,SAAS;IAC1B,gBAAgB,CAAC,SAAS;IAC1B,gBAAgB,CAAC,SAAS;IAC1B,gBAAgB,CAAC,SAAS;IAC1B,gBAAgB,CAAC,MAAM;IACvB,gBAAgB,CAAC,YAAY;IAC7B,gBAAgB,CAAC,QAAQ;IACzB,gBAAgB,CAAC,OAAO;IACxB,gBAAgB,CAAC,OAAO;IACxB,gBAAgB,CAAC,aAAa;IAC9B,gBAAgB,CAAC,kBAAkB;IACnC,gBAAgB,CAAC,oBAAoB;IACrC,gBAAgB,CAAC,kBAAkB;CACpC,CAAC"}

package/src/_esm/utils/svm.d.ts

@@ -0,0 +1 @@
+export declare const isSVMAddress: (address: string) => boolean;

package/src/_esm/utils/svm.js

@@ -0,0 +1,11 @@
+import { PublicKey } from '@solana/web3.js';
+export const isSVMAddress = (address) => {
+    try {
+        new PublicKey(address);
+        return true;
+    }
+    catch {
+        return false;
+    }
+};
+//# sourceMappingURL=svm.js.map

package/src/_esm/utils/svm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svm.js","sourceRoot":"","sources":["../../../../src/utils/svm.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,OAAe,EAAE,EAAE;IAC9C,IAAI,CAAC;QACH,IAAI,SAAS,CAAC,OAAO,CAAC,CAAC;QACvB,OAAO,IAAI,CAAC;IACd,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,KAAK,CAAC;IACf,CAAC;AACH,CAAC,CAAC"}

package/src/_esm/utils/wallet.js

@@ -0,0 +1,4 @@
+export const shortenAddress = (address) => address
+    ? `${address.substring(0, 5)}...${address.substring(address.length - 4)}`
+    : null;
+//# sourceMappingURL=wallet.js.map

package/src/_esm/utils/wallet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wallet.js","sourceRoot":"","sources":["../../../../src/utils/wallet.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,OAAgB,EAAE,EAAE,CACjD,OAAO;IACL,CAAC,CAAC,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE;IACzE,CAAC,CAAC,IAAI,CAAC"}

package/src/components/ActiveTransactions/ActiveTransactionItem.tsx

@@ -0,0 +1,98 @@
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import ErrorRoundedIcon from '@mui/icons-material/ErrorRounded';
+import InfoRoundedIcon from '@mui/icons-material/InfoRounded';
+import { ListItemAvatar, ListItemText, Typography } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+import { useProcessMessage, useRouteExecution } from '../../hooks';
+import { RouteExecutionStatus } from '../../stores';
+import { navigationRoutes } from '../../utils';
+import { StepTimer } from '../Step/StepTimer';
+import { TokenAvatar, TokenAvatarGroup } from '../TokenAvatar';
+import { ListItem, ListItemButton } from './ActiveTransactions.style';
+
+export const ActiveTransactionItem: React.FC<{
+  routeId: string;
+  dense?: boolean;
+}> = ({ routeId, dense }) => {
+  const navigate = useNavigate();
+  const { route, status } = useRouteExecution({
+    routeId,
+    executeInBackground: true,
+  });
+
+  const lastActiveStep = route?.steps.findLast((step) => step.execution);
+  const lastActiveProcess = lastActiveStep?.execution?.process.at(-1);
+
+  const { title } = useProcessMessage(lastActiveStep, lastActiveProcess);
+
+  if (!route || !lastActiveStep) {
+    return null;
+  }
+
+  const handleClick = () => {
+    navigate(navigationRoutes.transactionExecution, { state: { routeId } });
+  };
+
+  const getStatusComponent = () => {
+    switch (lastActiveProcess?.status) {
+      case 'ACTION_REQUIRED':
+        return <InfoRoundedIcon color="info" fontSize="small" />;
+      case 'FAILED':
+        return <ErrorRoundedIcon color="error" fontSize="small" />;
+      default:
+        return (
+          <Typography fontSize={14} fontWeight={500}>
+            <StepTimer step={lastActiveStep} hideInProgress />
+          </Typography>
+        );
+    }
+  };
+
+  const ListItemComponent = dense ? ListItem : ListItemButton;
+
+  return (
+    <ListItemComponent onClick={handleClick} dense disableRipple={dense}>
+      <ListItemAvatar>
+        <TokenAvatarGroup total={2}>
+          <TokenAvatar token={route.fromToken} />
+          <TokenAvatar token={route.toToken} />
+        </TokenAvatarGroup>
+      </ListItemAvatar>
+      <ListItemText
+        sx={{ margin: 0 }}
+        disableTypography
+        primary={
+          <Typography
+            fontWeight={500}
+            lineHeight={1}
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              marginLeft: 2,
+              height: 16,
+            }}
+          >
+            {route.fromToken.symbol}
+            <ArrowForwardIcon sx={{ paddingX: 0.5 }} />
+            {route.toToken.symbol}
+          </Typography>
+        }
+        secondary={
+          status !== RouteExecutionStatus.Done ? (
+            <Typography
+              fontWeight={400}
+              fontSize={12}
+              color="text.secondary"
+              lineHeight={1}
+              mt={0.75}
+              ml={2}
+            >
+              {title}
+            </Typography>
+          ) : null
+        }
+      />
+      {getStatusComponent()}
+    </ListItemComponent>
+  );
+};

package/src/components/ActiveTransactions/ActiveTransactions.style.ts

@@ -0,0 +1,39 @@
+import {
+  Button,
+  ListItem as MuiListItem,
+  ListItemButton as MuiListItemButton,
+} from '@mui/material';
+import { listItemSecondaryActionClasses } from '@mui/material/ListItemSecondaryAction';
+import { styled } from '@mui/material/styles';
+import { getContrastAlphaColor } from '../../utils';
+
+export const ListItemButton = styled(MuiListItemButton)(({ theme }) => ({
+  borderRadius: theme.shape.borderRadius,
+  paddingLeft: theme.spacing(1.5),
+  paddingRight: theme.spacing(1.5),
+  height: 64,
+  '&:hover': {
+    backgroundColor: getContrastAlphaColor(theme.palette.mode, '4%'),
+  },
+}));
+
+export const ListItem = styled(MuiListItem, {
+  shouldForwardProp: (prop) => prop !== 'disableRipple',
+})(({ theme }) => ({
+  padding: theme.spacing(0, 1.5),
+  [`.${listItemSecondaryActionClasses.root}`]: {
+    right: theme.spacing(3),
+  },
+  '&:hover': {
+    cursor: 'pointer',
+  },
+}));
+
+export const ShowAllButton = styled(Button)(({ theme }) => ({
+  background: 'none',
+  '&:hover': {
+    background: 'none',
+  },
+  padding: theme.spacing(0.75, 2),
+  fontSize: '0.875rem',
+}));