@lifi/widget 2.9.3 → 3.0.0-alpha.0

package/pages/TransactionHistoryPage/TransactionHistoryPage.js

@@ -1,31 +1,30 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import DeleteIcon from '@mui/icons-material/DeleteOutline';
-import { Button, Container, DialogActions, DialogContent, DialogContentText, DialogTitle, IconButton, Stack, } from '@mui/material';
-import { useCallback, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Dialog } from '../../components/Dialog';
-import { useWallet } from '../../providers';
-import { useHeaderStoreContext, useRouteExecutionStore } from '../../stores';
-import { useTransactionHistory } from '../../stores/routes';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Container, List } from '@mui/material';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { useRef } from 'react';
+import { useTransactionHistory } from '../../hooks/useTransactionHistory';
 import { TransactionHistoryEmpty } from './TransactionHistoryEmpty';
 import { TransactionHistoryItem } from './TransactionHistoryItem';
+import { TransactionHistorySkeleton } from './TransactionHistorySkeleton';
+import { minTransactionListHeight } from './constants';
 export const TransactionHistoryPage = () => {
-    const { t } = useTranslation();
-    const { account } = useWallet();
-    const transactions = useTransactionHistory(account.address);
-    const headerStoreContext = useHeaderStoreContext();
-    const deleteRoutes = useRouteExecutionStore((store) => store.deleteRoutes);
-    const [open, setOpen] = useState(false);
-    const toggleDialog = useCallback(() => {
-        setOpen((open) => !open);
-    }, []);
-    useEffect(() => {
-        if (transactions.length) {
-            return headerStoreContext.getState().setAction(_jsx(IconButton, { size: "medium", edge: "end", onClick: toggleDialog, children: _jsx(DeleteIcon, {}) }));
-        }
-    }, [transactions.length, toggleDialog, headerStoreContext]);
-    if (!transactions.length) {
+    // Parent ref and useVirtualizer should be in one file to avoid blank page (0 virtual items) issue
+    const parentRef = useRef(null);
+    const { data: transactions, isLoading } = useTransactionHistory();
+    const { getVirtualItems, getTotalSize } = useVirtualizer({
+        count: transactions.length,
+        overscan: 10,
+        paddingStart: 8,
+        paddingEnd: 12,
+        getScrollElement: () => parentRef.current,
+        estimateSize: () => 194,
+        getItemKey: (index) => `${transactions[index].transactionId}-${index}`,
+    });
+    if (!transactions.length && !isLoading) {
         return _jsx(TransactionHistoryEmpty, {});
     }
-    return (_jsxs(Container, { children: [_jsx(Stack, { spacing: 2, mt: 1, children: transactions.length ? (transactions.map(({ route }) => (_jsx(TransactionHistoryItem, { route: route }, route.id)))) : (_jsx(TransactionHistoryEmpty, {})) }), _jsxs(Dialog, { open: open, onClose: toggleDialog, children: [_jsx(DialogTitle, { children: t('warning.title.deleteTransactionHistory') }), _jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('warning.message.deleteTransactionHistory') }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: toggleDialog, children: t('button.cancel') }), _jsx(Button, { variant: "contained", onClick: () => deleteRoutes('completed'), autoFocus: true, children: t('button.delete') })] })] })] }));
+    return (_jsx(Container, { ref: parentRef, style: { height: minTransactionListHeight, overflow: 'auto' }, children: _jsx(List, { style: { height: getTotalSize(), width: '100%', position: 'relative' }, disablePadding: true, children: isLoading ? (_jsx(List, { disablePadding: true, sx: { paddingTop: 1 }, children: Array.from({ length: 3 }).map((_, index) => (_jsx(TransactionHistorySkeleton, {}, index))) })) : (getVirtualItems().map((item) => {
+                const transaction = transactions[item.index];
+                return (_jsx(TransactionHistoryItem, { size: item.size, start: item.start, transaction: transaction }, item.key));
+            })) }) }));
 };

package/pages/TransactionHistoryPage/TransactionHistorySkeleton.d.ts

@@ -0,0 +1 @@
+export declare const TransactionHistorySkeleton: () => import("react/jsx-runtime").JSX.Element;

package/pages/TransactionHistoryPage/TransactionHistorySkeleton.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Skeleton } from '@mui/material';
+import { Card } from '../../components/Card';
+import { TokenDivider } from '../../components/Token';
+const TokenSkeleton = ({ showDivider }) => {
+    return (_jsxs(Box, { flex: 1, px: 2, pt: showDivider ? 1 : 0.5, pb: showDivider ? 0 : 1, children: [_jsxs(Box, { display: "flex", flex: 1, alignItems: "center", children: [_jsx(Skeleton, { variant: "rounded", width: 32, height: 32, sx: {
+                            borderRadius: '100%',
+                        } }), _jsx(Box, { display: "flex", flexDirection: "column", flex: 1, ml: 2, children: _jsx(Skeleton, { width: 40, height: 30, variant: "text" }) })] }), _jsxs(Box, { display: "flex", marginLeft: "-16px", children: [_jsx(Box, { display: "flex", flexDirection: 'column', marginTop: 0.5, visibility: showDivider ? 'visible' : 'hidden', children: _jsx(TokenDivider, {}) }), _jsx(Skeleton, { width: 64, height: 12, sx: { marginTop: 0.5 }, variant: "rounded" }), _jsx(Skeleton, { width: 96, height: 12, variant: "rounded", sx: { marginTop: 0.5, marginLeft: 0.5 } })] })] }));
+};
+export const TransactionHistorySkeleton = () => {
+    return (_jsxs(Card, { style: {
+            marginBottom: '16px',
+        }, children: [_jsxs(Box, { sx: {
+                    display: 'flex',
+                    flex: 1,
+                    justifyContent: 'space-between',
+                }, pt: 2, px: 2, children: [_jsx(Skeleton, { variant: "rectangular", width: 96, height: 16, sx: (theme) => ({
+                            borderRadius: `${theme.shape.borderRadius}px`,
+                        }) }), _jsx(Skeleton, { variant: "rectangular", width: 64, height: 16, sx: (theme) => ({
+                            borderRadius: `${theme.shape.borderRadius}px`,
+                        }) })] }), _jsxs(Box, { py: 1, children: [_jsx(TokenSkeleton, { showDivider: true }), _jsx(TokenDivider, {}), _jsx(TokenSkeleton, {})] })] }));
+};

package/pages/TransactionHistoryPage/constants.d.ts

@@ -0,0 +1 @@
+export declare const minTransactionListHeight = 544;

package/pages/TransactionHistoryPage/constants.js

@@ -0,0 +1 @@
+export const minTransactionListHeight = 544;

package/pages/TransactionPage/ExchangeRateBottomSheet.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
 import { Box, Button, Typography } from '@mui/material';
-import Big from 'big.js';
 import { forwardRef, useCallback, useImperativeHandle, useRef, useState, } from 'react';
 import { useTranslation } from 'react-i18next';
 import { BottomSheet } from '../../components/BottomSheet';
@@ -44,15 +43,17 @@ const ExchangeRateBottomSheetContent = ({ data, onCancel, onContinue }) => {
     const { t } = useTranslation();
     const ref = useRef();
     useSetContentHeight(ref);
-    const oldAmount = Big(data?.oldToAmount || 1);
+    if (!data) {
+        return;
+    }
+    const oldAmount = BigInt(data.oldToAmount || 1);
+    const rateChange = ((Number((BigInt(data.newToAmount || 0) * 1000000n) / oldAmount) /
+        1000000) *
+        100 -
+        100).toFixed(2);
     return (_jsxs(Box, { p: 3, ref: ref, children: [_jsxs(CenterContainer, { children: [_jsx(IconCircle, { status: "warning", mb: 1, children: _jsx(WarningRoundedIcon, { color: "warning" }) }), _jsx(Typography, { py: 1, fontSize: 18, fontWeight: 700, children: t('warning.title.rateChanged') })] }), _jsx(Typography, { py: 1, children: t('warning.message.rateChanged') }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 1, children: [_jsx(Typography, { children: t('main.quotedAmount') }), _jsxs(Typography, { fontWeight: 600, children: [t('format.number', {
-                                value: formatTokenAmount(data?.oldToAmount, data?.toToken.decimals, 5),
+                                value: formatTokenAmount(BigInt(data.oldToAmount), data.toToken.decimals, 5),
                             }), ' ', data?.toToken.symbol] })] }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [_jsx(Typography, { children: t('main.currentAmount') }), _jsxs(Typography, { fontWeight: 600, children: [t('format.number', {
-                                value: formatTokenAmount(data?.newToAmount, data?.toToken.decimals, 5),
-                            }), ' ', data?.toToken.symbol] })] }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [_jsx(Typography, { children: t('main.rateChange') }), _jsxs(Typography, { fontWeight: 600, children: [Big(data?.newToAmount || 0)
-                                .div(oldAmount.eq(0) ? Big(1) : oldAmount)
-                                .minus(1)
-                                .mul(100)
-                                .round(2, Big.roundUp)
-                                .toString(), "%"] })] }), _jsxs(Box, { display: "flex", mt: 3, children: [_jsx(Button, { variant: "text", onClick: onCancel, fullWidth: true, children: t('button.cancel') }), _jsx(Box, { display: "flex", p: 1 }), _jsx(Button, { variant: "contained", onClick: onContinue, fullWidth: true, children: t('button.continue') })] })] }));
+                                value: formatTokenAmount(BigInt(data?.newToAmount), data?.toToken.decimals, 5),
+                            }), ' ', data?.toToken.symbol] })] }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [_jsx(Typography, { children: t('main.rateChange') }), _jsxs(Typography, { fontWeight: 600, children: [rateChange, "%"] })] }), _jsxs(Box, { display: "flex", mt: 3, children: [_jsx(Button, { variant: "text", onClick: onCancel, fullWidth: true, children: t('button.cancel') }), _jsx(Box, { display: "flex", p: 1 }), _jsx(Button, { variant: "contained", onClick: onContinue, fullWidth: true, children: t('button.continue') })] })] }));
 };

package/pages/TransactionPage/StartTransactionButton.js

@@ -3,8 +3,8 @@ import { BaseTransactionButton } from '../../components/BaseTransactionButton';
 import { useFromTokenSufficiency, useGasSufficiency, useRoutes, } from '../../hooks';
 import { useRouteExecutionStore } from '../../stores';
 export const StartTransactionButton = ({ onClick, route, text, loading, }) => {
-    const { insufficientGas, isInitialLoading: isGasSufficiencyLoading } = useGasSufficiency(route);
-    const { insufficientFromToken, isInitialLoading: isFromTokenSufficiencyLoading, } = useFromTokenSufficiency(route);
+    const { insufficientGas, isLoading: isGasSufficiencyLoading } = useGasSufficiency(route);
+    const { insufficientFromToken, isLoading: isFromTokenSufficiencyLoading } = useFromTokenSufficiency(route);
     const shouldDisableButton = insufficientFromToken || !!insufficientGas?.length;
     return (_jsx(BaseTransactionButton, { onClick: onClick, text: text, disabled: shouldDisableButton, loading: isFromTokenSufficiencyLoading || isGasSufficiencyLoading || loading }));
 };

package/pages/TransactionPage/StatusBottomSheet.js

@@ -9,25 +9,25 @@ import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { BottomSheet } from '../../components/BottomSheet';
 import { Token } from '../../components/Token';
-import { getProcessMessage, useChains, useNavigateBack, useTokenBalance, } from '../../hooks';
+import { getProcessMessage, useAvailableChains, useNavigateBack, useTokenBalance, } from '../../hooks';
 import { FormKey, useWidgetConfig } from '../../providers';
-import { RouteExecutionStatus } from '../../stores';
+import { RouteExecutionStatus, getSourceTxHash } from '../../stores';
 import { formatTokenAmount, hasEnumFlag, navigationRoutes, shortenAddress, } from '../../utils';
 import { CenterContainer, IconCircle } from './StatusBottomSheet.style';
 export const StatusBottomSheet = ({ status, route, }) => {
     const { t } = useTranslation();
     const { navigateBack, navigate } = useNavigateBack();
     const ref = useRef(null);
-    const { getChainById } = useChains();
+    const { getChainById } = useAvailableChains();
     const { setValue } = useFormContext();
     const { subvariant, contractComponent, contractSecondaryComponent, contractCompactComponent, } = useWidgetConfig();
     const toToken = {
         ...(route.steps.at(-1)?.execution?.toToken ?? route.toToken),
-        amount: route.steps.at(-1)?.execution?.toAmount ??
+        amount: BigInt(route.steps.at(-1)?.execution?.toAmount ??
             route.steps.at(-1)?.estimate.toAmount ??
-            route.toAmount,
+            route.toAmount),
     };
-    const { token, refetch, refetchNewBalance, refetchAllBalances } = useTokenBalance(toToken, route.toAddress);
+    const { token, refetch, refetchNewBalance, refetchAllBalances } = useTokenBalance(route.toAddress, toToken);
     const clearFromAmount = () => {
         refetchAllBalances();
         setValue(FormKey.FromAmount, '');
@@ -59,8 +59,12 @@ export const StatusBottomSheet = ({ status, route, }) => {
     };
     const handleSeeDetails = () => {
         handleClose();
+        const transactionHash = getSourceTxHash(route);
         navigate(navigationRoutes.transactionDetails, {
-            state: { routeId: route.id },
+            state: {
+                routeId: route.id,
+                transactionHash,
+            },
             replace: true,
         });
     };
@@ -77,7 +81,7 @@ export const StatusBottomSheet = ({ status, route, }) => {
                     : t(`success.title.${transactionType}Successful`);
             if (token) {
                 primaryMessage = t('success.message.exchangeSuccessful', {
-                    amount: formatTokenAmount(token.amount),
+                    amount: formatTokenAmount(token.amount, token.decimals),
                     tokenSymbol: token.symbol,
                     chainName: getChainById(token.chainId)?.name,
                     walletAddress: shortenAddress(route.toAddress),
@@ -94,7 +98,7 @@ export const StatusBottomSheet = ({ status, route, }) => {
             });
             if (token) {
                 secondaryMessage = t('success.message.exchangeSuccessful', {
-                    amount: formatTokenAmount(token.amount),
+                    amount: formatTokenAmount(token.amount, token.decimals),
                     tokenSymbol: token.symbol,
                     chainName: getChainById(token.chainId)?.name,
                     walletAddress: shortenAddress(route.toAddress),
@@ -111,7 +115,7 @@ export const StatusBottomSheet = ({ status, route, }) => {
             });
             if (token) {
                 secondaryMessage = t('success.message.exchangeSuccessful', {
-                    amount: formatTokenAmount(token.amount),
+                    amount: formatTokenAmount(token.amount, token.decimals),
                     tokenSymbol: token.symbol,
                     chainName: getChainById(token.chainId)?.name,
                     walletAddress: shortenAddress(route.toAddress),

package/pages/TransactionPage/TransactionPage.js

@@ -124,7 +124,7 @@ export const TransactionPage = () => {
     const getInsuranceCoverageId = () => route.steps[0].execution?.process
         .filter((process) => process.type !== 'TOKEN_ALLOWANCE')
         .find((process) => process.txHash)?.txHash ?? route.fromAddress;
-    return (_jsxs(Container, { children: [getStepList(route, subvariant), subvariant === 'nft' ? (_jsx(ContractComponent, { mt: 2, children: contractSecondaryComponent || contractComponent })) : null, insuranceAvailable ? (_jsx(Insurance, { mt: 2, status: status, insurableRouteId: stateRouteId, feeAmountUsd: route.insurance.feeAmountUsd, insuredAmount: formatTokenAmount(route.toAmountMin, route.toToken.decimals), insuredTokenSymbol: route.toToken.symbol, insuranceCoverageId: getInsuranceCoverageId(), onChange: setRouteId })) : null, status === RouteExecutionStatus.Idle ||
+    return (_jsxs(Container, { children: [getStepList(route, subvariant), subvariant === 'nft' ? (_jsx(ContractComponent, { mt: 2, children: contractSecondaryComponent || contractComponent })) : null, insuranceAvailable ? (_jsx(Insurance, { mt: 2, status: status, insurableRouteId: stateRouteId, feeAmountUsd: route.insurance.feeAmountUsd, insuredAmount: formatTokenAmount(BigInt(route.toAmountMin), route.toToken.decimals), insuredTokenSymbol: route.toToken.symbol, insuranceCoverageId: getInsuranceCoverageId(), onChange: setRouteId })) : null, status === RouteExecutionStatus.Idle ||
                 status === RouteExecutionStatus.Failed ? (_jsxs(_Fragment, { children: [_jsx(GasMessage, { mt: 2, route: route }), _jsxs(Box, { mt: 2, display: "flex", children: [_jsx(StartButton, { text: getButtonText(), onClick: handleStartClick, route: route, insurableRouteId: stateRouteId }), status === RouteExecutionStatus.Failed ? (_jsx(Tooltip, { title: t('button.removeTransaction'), placement: "bottom-end", enterDelay: 400, arrow: true, children: _jsx(Button, { onClick: handleRemoveRoute, sx: {
                                         minWidth: 48,
                                         marginLeft: 1,

package/providers/FormProvider/FormUpdater.js

@@ -2,11 +2,11 @@
 import { useEffect, useRef } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { FormKey } from '.';
-import { useWallet } from '../WalletProvider';
+import { useAccount } from '../../hooks';
 import { isItemAllowed, useWidgetConfig } from '../WidgetProvider';
 export const FormUpdater = ({ defaultValues }) => {
     const { fromChain, toChain, chains } = useWidgetConfig();
-    const { account } = useWallet();
+    const { account } = useAccount();
     const { setValue, getValues, getFieldState, resetField, 
     // Subscription to touchedFields is required by getFieldState to work
     formState: { touchedFields }, } = useFormContext();
@@ -14,7 +14,7 @@ export const FormUpdater = ({ defaultValues }) => {
     // Set wallet chain as default if no chains are provided by config and if they were not changed during widget usage
     useEffect(() => {
         const chainAllowed = account.chainId && isItemAllowed(account.chainId, chains);
-        if (!account.isActive || !account.chainId || !chainAllowed) {
+        if (!account.isConnected || !account.chainId || !chainAllowed) {
             return;
         }
         const { isTouched: isFromChainTouched } = getFieldState(FormKey.FromChain);
@@ -37,7 +37,7 @@ export const FormUpdater = ({ defaultValues }) => {
         }
     }, [
         account.chainId,
-        account.isActive,
+        account.isConnected,
         chains,
         fromChain,
         getFieldState,

package/providers/I18nProvider/I18nProvider.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import i18next from 'i18next';
-import LanguageDetector from 'i18next-browser-languagedetector';
+import { createInstance } from 'i18next';
 import { useMemo } from 'react';
 import { I18nextProvider, initReactI18next } from 'react-i18next';
 import * as supportedLanguages from '../../i18n';
@@ -8,7 +7,7 @@ import { useSettings } from '../../stores';
 import { deepMerge } from '../../utils';
 import { isItemAllowed, useWidgetConfig } from '../WidgetProvider';
 export const I18nProvider = ({ children, }) => {
-    const { languageResources, languages, disableLanguageDetector } = useWidgetConfig();
+    const { languageResources, languages } = useWidgetConfig();
     const { language } = useSettings(['language']);
     const i18n = useMemo(() => {
         let resources = Object.keys(supportedLanguages)
@@ -31,7 +30,7 @@ export const I18nProvider = ({ children, }) => {
                 return resources;
             }, resources);
         }
-        let i18n = i18next.createInstance({
+        let i18n = createInstance({
             lng: languages?.default || language,
             fallbackLng: resources.en
                 ? 'en'
@@ -47,11 +46,8 @@ export const I18nProvider = ({ children, }) => {
                 caches: [],
             },
         });
-        if (!language && !languages?.default && !disableLanguageDetector) {
-            i18n = i18n.use(LanguageDetector);
-        }
         i18n.use(initReactI18next).init();
         return i18n;
-    }, [disableLanguageDetector, language, languageResources, languages]);
+    }, [language, languageResources, languages]);
     return _jsx(I18nextProvider, { i18n: i18n, children: children });
 };

package/providers/I18nProvider/types.d.ts

@@ -3,13 +3,14 @@ export type PartialResource<T> = T extends object ? {
     [P in keyof T]?: PartialResource<T[P]>;
 } : T;
 export type LanguageKey = keyof typeof languages;
+export type LanguageResource = typeof languages.en;
 export type LanguageResources = {
-    [language in LanguageKey]?: PartialResource<typeof languages.en>;
+    [language in LanguageKey]?: PartialResource<LanguageResource>;
 } | {
-    [language: string]: PartialResource<typeof languages.en>;
+    [language: string]: PartialResource<LanguageResource>;
 };
 export type LanguageTranslationResource = {
-    [namespace in 'translation']: PartialResource<typeof languages.en>;
+    [namespace in 'translation']: PartialResource<LanguageResource>;
 };
 export type LanguageTranslationResources = {
     [language: string]: LanguageTranslationResource;

package/providers/WalletProvider/EVMProvider.d.ts

@@ -0,0 +1,3 @@
+import { type FC, type PropsWithChildren } from 'react';
+export declare const EVMProvider: FC<PropsWithChildren>;
+export declare const EVMBaseProvider: FC<PropsWithChildren>;

package/providers/WalletProvider/EVMProvider.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { alpha, binance, bitget, bitpie, block, brave, coinbase, dcent, exodus, frame, frontier, gate, hyperpay, imtoken, liquality, okx, oneinch, ownbit, rabby, safepal, status, taho, tokenary, tokenpocket, trust, walletConnect, xdefi, } from '@lifi/wallet-management';
+import { useContext, useMemo } from 'react';
+import { createClient } from 'viem';
+import { WagmiContext, WagmiProvider, createConfig, http } from 'wagmi';
+import { mainnet } from 'wagmi/chains';
+import { useAvailableChains } from '../../hooks';
+import { formatChain } from './utils';
+const connectors = [
+    walletConnect,
+    coinbase,
+    bitget,
+    gate,
+    exodus,
+    taho,
+    binance,
+    frontier,
+    okx,
+    trust,
+    status,
+    alpha,
+    block,
+    bitpie,
+    brave,
+    dcent,
+    frame,
+    hyperpay,
+    imtoken,
+    liquality,
+    ownbit,
+    tokenpocket,
+    xdefi,
+    oneinch,
+    tokenary,
+    safepal,
+    rabby,
+];
+export const EVMProvider = ({ children }) => {
+    const inWagmiContext = useInWagmiContext();
+    return inWagmiContext ? (children) : (_jsx(EVMBaseProvider, { children: children }));
+};
+export const EVMBaseProvider = ({ children }) => {
+    const { chains } = useAvailableChains();
+    const wagmiConfig = useMemo(() => {
+        const _chains = chains?.length
+            ? chains.map(formatChain)
+            : [mainnet];
+        // Add ENS contracts
+        const _mainnet = _chains.find((chain) => chain.id === mainnet.id);
+        if (_mainnet) {
+            _mainnet.contracts = mainnet.contracts;
+        }
+        const wagmiConfig = createConfig({
+            chains: _chains,
+            connectors: connectors,
+            client({ chain }) {
+                return createClient({ chain, transport: http() });
+            },
+            // transports: _chains.reduce(
+            //   (transports, chain) => {
+            //     transports[chain.id] = http();
+            //     return transports;
+            //   },
+            //   {} as Record<number, Transport>,
+            // ),
+        });
+        return wagmiConfig;
+    }, [chains]);
+    return (_jsx(WagmiProvider, { config: wagmiConfig, reconnectOnMount: Boolean(chains?.length), children: children }));
+};
+function useInWagmiContext() {
+    const context = useContext(WagmiContext);
+    return Boolean(context);
+}

package/providers/WalletProvider/SDKProviders.d.ts

@@ -0,0 +1 @@
+export declare const SDKProviders: () => null;

package/providers/WalletProvider/SDKProviders.js

@@ -0,0 +1,27 @@
+import { EVM, Solana, config } from '@lifi/sdk';
+import { useWallet } from '@solana/wallet-adapter-react';
+import { getWalletClient, switchChain } from '@wagmi/core';
+import { useEffect } from 'react';
+import { useConfig } from 'wagmi';
+export const SDKProviders = () => {
+    const { wallet } = useWallet();
+    const wagmiConfig = useConfig();
+    useEffect(() => {
+        // Configure SDK Providers
+        config.setProviders([
+            EVM({
+                getWalletClient: () => getWalletClient(wagmiConfig),
+                switchChain: async (chainId) => {
+                    await switchChain(wagmiConfig, { chainId });
+                    return getWalletClient(wagmiConfig);
+                },
+            }),
+            Solana({
+                async getWalletAdapter() {
+                    return wallet?.adapter;
+                },
+            }),
+        ]);
+    }, [wagmiConfig, wallet?.adapter]);
+    return null;
+};

package/providers/WalletProvider/SolanaProvider.d.ts

@@ -0,0 +1,3 @@
+import { type FC, type PropsWithChildren } from 'react';
+export declare const SolanaProvider: FC<PropsWithChildren>;
+export declare const SolanaBaseProvider: FC<PropsWithChildren>;

package/providers/WalletProvider/SolanaProvider.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
+import { ConnectionContext, ConnectionProvider, WalletProvider, } from '@solana/wallet-adapter-react';
+import { clusterApiUrl } from '@solana/web3.js';
+import { useContext } from 'react';
+const endpoint = clusterApiUrl(WalletAdapterNetwork.Mainnet);
+/**
+ * Wallets that implement either of these standards will be available automatically.
+ *
+ *   - Solana Mobile Stack Mobile Wallet Adapter Protocol
+ *     (https://github.com/solana-mobile/mobile-wallet-adapter)
+ *   - Solana Wallet Standard
+ *     (https://github.com/solana-labs/wallet-standard)
+ *
+ * If you wish to support a wallet that supports neither of those standards,
+ * instantiate its legacy wallet adapter here. Common legacy adapters can be found
+ * in the npm package `@solana/wallet-adapter-wallets`.
+ */
+const wallets = [];
+export const SolanaProvider = ({ children }) => {
+    const inSolanaContext = useInSolanaContext();
+    return inSolanaContext ? (children) : (_jsx(SolanaBaseProvider, { children: children }));
+};
+export const SolanaBaseProvider = ({ children }) => {
+    return (_jsx(ConnectionProvider, { endpoint: endpoint, children: _jsx(WalletProvider, { wallets: wallets, autoConnect: true, children: children }) }));
+};
+function useInSolanaContext() {
+    const context = useContext(ConnectionContext);
+    return Boolean(context?.connection);
+}

package/providers/WalletProvider/WalletProvider.d.ts

@@ -1,16 +1,2 @@
-import type { Signer } from '@ethersproject/abstract-signer';
-import type { FC, PropsWithChildren } from 'react';
-import type { WalletContextProps } from './types';
-export declare const useWallet: () => WalletContextProps;
+import { type FC, type PropsWithChildren } from 'react';
 export declare const WalletProvider: FC<PropsWithChildren>;
-export declare const extractAccountFromSigner: (signer?: Signer) => Promise<{
-    address: string | undefined;
-    isActive: boolean;
-    signer: Signer | undefined;
-    chainId: number | undefined;
-} | {
-    address?: undefined;
-    isActive?: undefined;
-    signer?: undefined;
-    chainId?: undefined;
-}>;