@lifi/widget 1.16.0 → 1.16.1

package/hooks/useChains.js

@@ -9,14 +9,14 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { useQuery } from '@tanstack/react-query';
 import { useCallback } from 'react';
-import { LiFi } from '../config/lifi';
-import { useWidgetConfig } from '../providers/WidgetProvider';
+import { useLiFi, useWidgetConfig } from '../providers';
 import { useSetChainOrder } from '../stores/chains';
 export const useChains = () => {
     const { disabledChains } = useWidgetConfig();
+    const lifi = useLiFi();
     const [, initializeChains] = useSetChainOrder();
     const { data, isLoading } = useQuery(['chains'], () => __awaiter(void 0, void 0, void 0, function* () {
-        const chains = yield LiFi.getChains();
+        const chains = yield lifi.getChains();
         const filteredChains = chains.filter((chain) => !(disabledChains === null || disabledChains === void 0 ? void 0 : disabledChains.includes(chain.id)));
         initializeChains(filteredChains.map((chain) => chain.id));
         return filteredChains;

package/hooks/useFeaturedTokens.js

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { useWidgetConfig } from '../providers/WidgetProvider';
+import { useWidgetConfig } from '../providers';
 export const useFeaturedTokens = (selectedChainId) => {
     const { featuredTokens } = useWidgetConfig();
     return useMemo(() => featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.filter((token) => token.chainId === selectedChainId), [featuredTokens, selectedChainId]);

package/hooks/useGasSufficiency.js

@@ -2,8 +2,7 @@ import Big from 'big.js';
 import { useMemo } from 'react';
 import { useWatch } from 'react-hook-form';
 import { useChains, useDebouncedWatch } from '.';
-import { SwapFormKey, SwapFormKeyHelper } from '../providers/SwapFormProvider';
-import { useWallet } from '../providers/WalletProvider';
+import { SwapFormKey, SwapFormKeyHelper, useWallet } from '../providers';
 import { useTokenBalances } from './useTokenBalances';
 export const useGasSufficiency = (route) => {
     const { account } = useWallet();

package/hooks/useInitializer.js

@@ -1,5 +1,11 @@
 /* eslint-disable no-underscore-dangle */
+import { checkPackageUpdates } from '@lifi/sdk';
+import { useEffect } from 'react';
+import { name, version } from '../config/version';
 import { useTools } from './useTools';
 export const useInitializer = () => {
     useTools();
+    useEffect(() => {
+        checkPackageUpdates(name, version);
+    }, []);
 };

package/hooks/useRouteExecution.js

@@ -10,13 +10,13 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { useMutation } from '@tanstack/react-query';
 import { useCallback, useEffect, useRef } from 'react';
 import shallow from 'zustand/shallow';
-import { LiFi } from '../config/lifi';
-import { useWallet } from '../providers/WalletProvider';
+import { useLiFi, useWallet } from '../providers';
 import { isRouteActive, isRouteCompleted, isRouteFailed, useRouteStore, } from '../stores';
 import { WidgetEvent } from '../types/events';
 import { deepClone } from '../utils';
 import { useWidgetEvents } from './useWidgetEvents';
 export const useRouteExecution = (routeId, executeInBackground) => {
+    const lifi = useLiFi();
     const { account, switchChain } = useWallet();
     const resumedAfterMount = useRef(false);
     const emitter = useWidgetEvents();
@@ -53,7 +53,7 @@ export const useRouteExecution = (routeId, executeInBackground) => {
         if (!(routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route)) {
             throw Error('Execution route not found.');
         }
-        return LiFi.executeRoute(account.signer, routeExecution.route, {
+        return lifi.executeRoute(account.signer, routeExecution.route, {
             updateCallback,
             switchChainHook,
             infiniteApproval: false,
@@ -72,7 +72,7 @@ export const useRouteExecution = (routeId, executeInBackground) => {
         if (!(routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route)) {
             throw Error('Execution route not found.');
         }
-        return LiFi.resumeRoute(account.signer, resumedRoute !== null && resumedRoute !== void 0 ? resumedRoute : routeExecution.route, {
+        return lifi.resumeRoute(account.signer, resumedRoute !== null && resumedRoute !== void 0 ? resumedRoute : routeExecution.route, {
             updateCallback,
             switchChainHook,
             infiniteApproval: false,
@@ -132,11 +132,11 @@ export const useRouteExecution = (routeId, executeInBackground) => {
             if (!route || !isRouteActive(route)) {
                 return;
             }
-            LiFi.updateRouteExecution(route, { executeInBackground: true });
+            lifi.updateRouteExecution(route, { executeInBackground: true });
             console.log('Move route execution to background.', routeId);
             resumedAfterMount.current = false;
         };
-    }, [routeId]);
+    }, [lifi, routeId]);
     return {
         executeRoute,
         restartRoute: restartRouteMutation,

package/hooks/useSwapRoutes.js

@@ -12,13 +12,12 @@ import { useQuery, useQueryClient } from '@tanstack/react-query';
 import Big from 'big.js';
 import { useWatch } from 'react-hook-form';
 import { useDebouncedWatch, useToken } from '.';
-import { LiFi } from '../config/lifi';
-import { SwapFormKey } from '../providers/SwapFormProvider';
-import { useWallet } from '../providers/WalletProvider';
+import { SwapFormKey, useLiFi, useWallet } from '../providers';
 import { useSettings } from '../stores';
 const refetchTime = 60000;
 export const useSwapRoutes = () => {
     var _a;
+    const lifi = useLiFi();
     const { account, provider } = useWallet();
     const queryClient = useQueryClient();
     const { slippage, enabledBridges, enabledExchanges, routePriority } = useSettings([
@@ -75,7 +74,7 @@ export const useSwapRoutes = () => {
         catch (_d) {
             toWalletAddress = isAddress(toAddress) ? toAddress : fromAddress;
         }
-        return LiFi.getRoutes({
+        return lifi.getRoutes({
             fromChainId,
             fromAmount: Big(Number(fromTokenAmount) * Math.pow(10, ((_c = token === null || token === void 0 ? void 0 : token.decimals) !== null && _c !== void 0 ? _c : 0))).toString(),
             fromTokenAddress,

package/hooks/useTokenBalances.js

@@ -10,14 +10,14 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 /* eslint-disable consistent-return */
 import { useQuery } from '@tanstack/react-query';
 import { useState } from 'react';
-import { LiFi } from '../config/lifi';
-import { useWallet } from '../providers/WalletProvider';
+import { useLiFi, useWallet } from '../providers';
 import { formatTokenAmount } from '../utils';
 import { useFeaturedTokens } from './useFeaturedTokens';
 import { useTokens } from './useTokens';
 const defaultRefetchInterval = 60000;
 const minRefetchInterval = 1000;
 export const useTokenBalances = (selectedChainId) => {
+    const lifi = useLiFi();
     const { account } = useWallet();
     const featuredTokens = useFeaturedTokens(selectedChainId);
     const { tokens, isLoading } = useTokens(selectedChainId);
@@ -27,7 +27,7 @@ export const useTokenBalances = (selectedChainId) => {
         if (!accountAddress || !tokens) {
             return;
         }
-        const tokenBalances = yield LiFi.getTokenBalances(accountAddress, tokens);
+        const tokenBalances = yield lifi.getTokenBalances(accountAddress, tokens);
         if (!(tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.length)) {
             // Sometimes RPCs (e.g. Arbitrum) don't return balances on first call
             // TODO: fix and remove backplane

package/hooks/useTokenSearch.js

@@ -8,11 +8,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { LiFi } from '../config/lifi';
+import { useLiFi } from '../providers';
 export const useTokenSearch = (token, chainId, enabled) => {
+    const lifi = useLiFi();
     const queryClient = useQueryClient();
     const { data, isLoading, isFetching, isFetched } = useQuery(['token-search', chainId, token], ({ queryKey: [, chainId, token], signal }) => __awaiter(void 0, void 0, void 0, function* () {
-        const data = yield LiFi.getToken(chainId, token, {
+        const data = yield lifi.getToken(chainId, token, {
             signal,
         });
         if (data) {

package/hooks/useTokens.js

@@ -8,13 +8,14 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { useQuery } from '@tanstack/react-query';
-import { LiFi } from '../config/lifi';
+import { useLiFi } from '../providers';
 import { useFeaturedTokens } from './useFeaturedTokens';
 export const useTokens = (selectedChainId) => {
+    const lifi = useLiFi();
     const featuredTokens = useFeaturedTokens(selectedChainId);
     const { data: tokens, isLoading, isFetching, } = useQuery(['tokens', selectedChainId, featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.length], () => __awaiter(void 0, void 0, void 0, function* () {
         var _a, _b, _c;
-        const data = yield LiFi.getTokens({ chains: [selectedChainId] });
+        const data = yield lifi.getTokens({ chains: [selectedChainId] });
         const featuredTokenAddresses = new Set(featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.map((token) => token.address));
         return [
             ...((_a = featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.map((token) => {

package/hooks/useTools.js

@@ -1,10 +1,11 @@
 import { useQuery } from '@tanstack/react-query';
 import { useMemo } from 'react';
-import { LiFi } from '../config/lifi';
+import { useLiFi } from '../providers';
 import { useSettingsStore } from '../stores';
 export const useTools = () => {
+    const lifi = useLiFi();
     const initializeTools = useSettingsStore((state) => state.initializeTools);
-    const { data } = useQuery(['tools'], ({ signal }) => LiFi.getTools(undefined, { signal }), {
+    const { data } = useQuery(['tools'], ({ signal }) => lifi.getTools(undefined, { signal }), {
         onSuccess(data) {
             initializeTools('Bridges', data.bridges.map((bridge) => bridge.key));
             initializeTools('Exchanges', data.exchanges.map((exchange) => exchange.key));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.16.0",
+  "version": "1.16.1",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "main": "./cjs/index.js",
   "module": "./index.js",

package/providers/SDKProvider/SDKProvider.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import LIFI from '@lifi/sdk';
+export declare const useLiFi: () => LIFI;
+export declare const SDKProvider: React.FC<React.PropsWithChildren>;

package/providers/SDKProvider/SDKProvider.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import LIFI from '@lifi/sdk';
+import { createContext, useContext, useMemo } from 'react';
+import { useWidgetConfig } from '../WidgetProvider';
+let lifi;
+const SDKContext = createContext(null);
+export const useLiFi = () => useContext(SDKContext);
+export const SDKProvider = ({ children, }) => {
+    const { sdkConfig, integrator } = useWidgetConfig();
+    const value = useMemo(() => {
+        const config = Object.assign(Object.assign({}, sdkConfig), { defaultRouteOptions: Object.assign(Object.assign({}, sdkConfig === null || sdkConfig === void 0 ? void 0 : sdkConfig.defaultRouteOptions), { integrator: integrator !== null && integrator !== void 0 ? integrator : window.location.hostname }) });
+        if (!lifi) {
+            lifi = new LIFI(Object.assign({ disableVersionCheck: true }, config));
+        }
+        lifi.setConfig(config);
+        return lifi;
+    }, [integrator, sdkConfig]);
+    return _jsx(SDKContext.Provider, Object.assign({ value: value }, { children: children }));
+};

package/providers/SDKProvider/index.d.ts

@@ -0,0 +1 @@
+export * from './SDKProvider';

package/providers/SDKProvider/index.js

@@ -0,0 +1 @@
+export * from './SDKProvider';

package/providers/TelemetryProvider/TelemetryProvider.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const TelemetryProvider: React.FC<{
+    children: React.ReactElement<any, any> | null;
+}>;

package/providers/TelemetryProvider/TelemetryProvider.js

@@ -0,0 +1,7 @@
+import { useWidgetConfig } from '..';
+import { useTelemetry } from '../../hooks';
+export const TelemetryProvider = ({ children }) => {
+    const config = useWidgetConfig();
+    useTelemetry(config === null || config === void 0 ? void 0 : config.disableTelemetry);
+    return children;
+};

package/providers/TelemetryProvider/index.d.ts

@@ -0,0 +1 @@
+export * from './TelemetryProvider';

package/providers/TelemetryProvider/index.js

@@ -0,0 +1 @@
+export * from './TelemetryProvider';

package/providers/WalletProvider/WalletProvider.d.ts

@@ -1,11 +1,8 @@
 import type { Signer } from 'ethers';
 import type { FC, PropsWithChildren } from 'react';
-import type { WidgetWalletManagement } from '../../types';
 import type { WalletContextProps } from './types';
 export declare const useWallet: () => WalletContextProps;
-export declare const WalletProvider: FC<PropsWithChildren<{
-    walletManagement?: WidgetWalletManagement;
-}>>;
+export declare const WalletProvider: FC<PropsWithChildren>;
 export declare const extractAccountFromSigner: (signer?: Signer) => Promise<{
     address: string | undefined;
     isActive: boolean;

package/providers/WalletProvider/WalletProvider.js

@@ -10,6 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { jsx as _jsx } from "react/jsx-runtime";
 import { addChain as walletAddChain, switchChain as walletSwitchChain, switchChainAndAddToken, useLiFiWalletManagement, } from '@lifi/wallet-management';
 import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
+import { useWidgetConfig } from '../WidgetProvider';
 const stub = () => {
     throw new Error('You forgot to wrap your component in <WalletProvider>.');
 };
@@ -23,7 +24,8 @@ const initialContext = {
 };
 const WalletContext = createContext(initialContext);
 export const useWallet = () => useContext(WalletContext);
-export const WalletProvider = ({ children, walletManagement }) => {
+export const WalletProvider = ({ children }) => {
+    const { walletManagement } = useWidgetConfig();
     const { connect: walletManagementConnect, disconnect: walletManagementDisconnect, signer, provider, } = useLiFiWalletManagement();
     const [account, setAccount] = useState({});
     const connect = useCallback((wallet) => __awaiter(void 0, void 0, void 0, function* () {

package/providers/WidgetProvider/WidgetProvider.js

@@ -10,20 +10,15 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { checkPackageUpdates, getChainByKey } from '@lifi/sdk';
-import { createContext, useContext, useEffect, useMemo } from 'react';
-import { updateLiFiConfig } from '../../config/lifi';
-import { name, version } from '../../config/version';
-const stub = () => {
-    throw new Error('You forgot to wrap your component in <WidgetProvider>.');
-};
+import { getChainByKey } from '@lifi/sdk';
+import { createContext, useContext, useMemo } from 'react';
 const initialContext = {
     disabledChains: [],
 };
 const WidgetContext = createContext(initialContext);
 export const useWidgetConfig = () => useContext(WidgetContext);
 export const WidgetProvider = (_a) => {
-    var { children } = _a, _b = _a.config, _c = _b === void 0 ? {} : _b, { fromChain, fromToken, toChain, toToken, fromAmount, integrator, sdkConfig } = _c, config = __rest(_c, ["fromChain", "fromToken", "toChain", "toToken", "fromAmount", "integrator", "sdkConfig"]);
+    var { children } = _a, _b = _a.config, _c = _b === void 0 ? {} : _b, { fromChain, fromToken, toChain, toToken, fromAmount } = _c, config = __rest(_c, ["fromChain", "fromToken", "toChain", "toToken", "fromAmount"]);
     const value = useMemo(() => {
         var _a, _b, _c, _d;
         try {
@@ -53,11 +48,5 @@ export const WidgetProvider = (_a) => {
             return config;
         }
     }, [config, fromAmount, fromChain, fromToken, toChain, toToken]);
-    useEffect(() => {
-        updateLiFiConfig(Object.assign(Object.assign({}, sdkConfig), { defaultRouteOptions: Object.assign(Object.assign({}, sdkConfig === null || sdkConfig === void 0 ? void 0 : sdkConfig.defaultRouteOptions), { integrator: integrator !== null && integrator !== void 0 ? integrator : window.location.hostname }) }));
-    }, [integrator, sdkConfig]);
-    useEffect(() => {
-        checkPackageUpdates(name, version);
-    }, []);
     return (_jsx(WidgetContext.Provider, Object.assign({ value: value }, { children: children })));
 };

package/providers/index.d.ts

@@ -1,4 +1,6 @@
+export * from './SDKProvider';
 export * from './SwapFormProvider';
+export * from './TelemetryProvider';
 export * from './ThemeProvider';
 export * from './WalletProvider';
 export * from './WidgetProvider';

package/providers/index.js

@@ -1,4 +1,6 @@
+export * from './SDKProvider';
 export * from './SwapFormProvider';
+export * from './TelemetryProvider';
 export * from './ThemeProvider';
 export * from './WalletProvider';
 export * from './WidgetProvider';