@lifi/widget 1.18.8 → 1.18.9

package/components/Token/Token.style.d.ts

@@ -1,4 +1,14 @@
 /// <reference types="react" />
+export declare const TextSecondaryContainer: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "ref" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    connected?: boolean | undefined;
+}, {}, {}>;
 export declare const TextSecondary: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
     align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;
     children?: import("react").ReactNode;

package/components/Token/Token.style.js

@@ -1,12 +1,8 @@
 import { Box, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
-export const TextSecondary = styled(Typography, {
+export const TextSecondaryContainer = styled(Box, {
     shouldForwardProp: (prop) => prop !== 'connected',
 })(({ theme, connected }) => ({
-    fontSize: 12,
-    lineHeight: 1,
-    fontWeight: 500,
-    color: theme.palette.text.secondary,
     borderLeftWidth: connected ? 2 : 0,
     borderLeftStyle: 'solid',
     borderColor: theme.palette.mode === 'light'
@@ -14,12 +10,22 @@ export const TextSecondary = styled(Typography, {
         : theme.palette.grey[800],
     margin: connected
         ? theme.spacing(0.5, 0, 0, 1.875)
-        : theme.spacing(0.5, 0, 0, 6),
+        : theme.spacing(0, 0, 0, 6),
     padding: connected
         ? theme.spacing(0, 0, 0, 3.875)
         : theme.spacing(0, 0, 0, 0),
     display: 'flex',
     alignItems: 'flex-start',
+    flexWrap: 'wrap',
+}));
+export const TextSecondary = styled(Typography, {
+    shouldForwardProp: (prop) => prop !== 'connected',
+})(({ theme, connected }) => ({
+    fontSize: 12,
+    lineHeight: 1,
+    fontWeight: 500,
+    color: theme.palette.text.secondary,
+    marginTop: connected ? 0 : theme.spacing(0.5),
 }));
 export const TokenDivider = styled(Box)(({ theme }) => ({
     height: 12,

package/components/TokenList/TokenList.js

@@ -27,7 +27,7 @@ export const TokenList = ({ formType, height, onClick, }) => {
         !filteredTokens.length &&
         !!tokenSearchFilter &&
         !!selectedChainId;
-    const { token: searchedToken, isLoading: isSearchedTokenLoading } = useTokenSearch(tokenSearchFilter, selectedChainId, tokenSearchEnabled);
+    const { token: searchedToken, isLoading: isSearchedTokenLoading } = useTokenSearch(selectedChainId, tokenSearchFilter, tokenSearchEnabled);
     const isLoading = isTokensLoading || (tokenSearchEnabled && isSearchedTokenLoading);
     const tokens = filteredTokens.length
         ? filteredTokens

package/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "1.18.8";
+export declare const version = "1.18.9";

package/config/version.js

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '1.18.8';
+export const version = '1.18.9';

package/hooks/useToken.js

@@ -1,13 +1,16 @@
 import { useMemo } from 'react';
 import { useTokens } from './useTokens';
+import { useTokenSearch } from './useTokenSearch';
 export const useToken = (chainId, tokenAddress) => {
     const { tokens, isLoading } = useTokens(chainId);
     const token = useMemo(() => {
         const token = tokens === null || tokens === void 0 ? void 0 : tokens.find((token) => token.address === tokenAddress && token.chainId === chainId);
         return token;
     }, [chainId, tokenAddress, tokens]);
+    const tokenSearchEnabled = !isLoading && !token;
+    const { token: searchedToken, isLoading: isSearchedTokenLoading } = useTokenSearch(chainId, tokenAddress, tokenSearchEnabled);
     return {
-        token,
-        isLoading,
+        token: token !== null && token !== void 0 ? token : searchedToken,
+        isLoading: isLoading || (tokenSearchEnabled && isSearchedTokenLoading),
     };
 };

package/hooks/useTokenBalance.js

@@ -18,18 +18,23 @@ export const useTokenBalance = (token, accountAddress) => {
     const queryClient = useQueryClient();
     const walletAddress = accountAddress !== null && accountAddress !== void 0 ? accountAddress : account.address;
     const getTokenBalancesWithRetry = useCallback((accountAddress, tokens, depth = 0) => __awaiter(void 0, void 0, void 0, function* () {
-        const tokenBalances = yield lifi.getTokenBalances(accountAddress, tokens);
-        if (!tokenBalances.every((token) => token.blockNumber)) {
-            if (depth > 5) {
-                console.warn('Token balance backoff depth exceeded.');
-                return undefined;
+        try {
+            const tokenBalances = yield lifi.getTokenBalances(accountAddress, tokens);
+            if (!tokenBalances.every((token) => token.blockNumber)) {
+                if (depth > 5) {
+                    console.warn('Token balance backoff depth exceeded.');
+                    return undefined;
+                }
+                yield new Promise((resolve) => {
+                    setTimeout(resolve, depth * 100);
+                });
+                return getTokenBalancesWithRetry(accountAddress, tokens, depth + 1);
             }
-            yield new Promise((resolve) => {
-                setTimeout(resolve, depth * 100);
-            });
-            return getTokenBalancesWithRetry(accountAddress, tokens, depth + 1);
+            return tokenBalances;
+        }
+        catch (error) {
+            //
         }
-        return tokenBalances;
     }), [lifi]);
     const tokenBalanceQueryKey = useMemo(() => ['token-balance', walletAddress, token === null || token === void 0 ? void 0 : token.chainId, token === null || token === void 0 ? void 0 : token.address], [token === null || token === void 0 ? void 0 : token.address, token === null || token === void 0 ? void 0 : token.chainId, walletAddress]);
     const { data, isLoading, refetch } = useQuery(tokenBalanceQueryKey, ({ queryKey: [, accountAddress] }) => __awaiter(void 0, void 0, void 0, function* () {

package/hooks/useTokenSearch.d.ts

@@ -1,7 +1,5 @@
 import type { Token } from '../types';
-export declare const useTokenSearch: (token: string, chainId: number, enabled?: boolean) => {
+export declare const useTokenSearch: (chainId: number, token: string, enabled?: boolean) => {
     token: Token | undefined;
     isLoading: boolean;
-    isFetching: boolean;
-    isFetched: boolean;
 };

package/hooks/useTokenSearch.js

@@ -9,10 +9,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { useLiFi } from '../providers';
-export const useTokenSearch = (token, chainId, enabled) => {
+export const useTokenSearch = (chainId, token, 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, isLoading } = useQuery(['token-search', chainId, token], ({ queryKey: [, chainId, token], signal }) => __awaiter(void 0, void 0, void 0, function* () {
         const data = yield lifi.getToken(chainId, token, {
             signal,
         });
@@ -26,13 +26,11 @@ export const useTokenSearch = (token, chainId, enabled) => {
         }
         return data;
     }), {
-        enabled,
+        enabled: Boolean(chainId && token && enabled),
         retry: false,
     });
     return {
         token: data,
         isLoading,
-        isFetching,
-        isFetched,
     };
 };

package/i18n/en/translation.json

@@ -58,7 +58,7 @@
     "stepSwap": "Swap",
     "stepBridge": "Bridge",
     "stepSwapAndBridge": "Swap and bridge",
-    "estimatedTime": "~{{value}} min.",
+    "estimatedTime": "{{value}}m",
     "crossStepDetails": "Bridge from {{from}} to {{to}} via {{tool}}",
     "swapStepDetails": "Swap on {{chain}} via {{tool}}",
     "tokenOnChain": "{{tokenSymbol}} on {{chainName}}",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.18.8",
+  "version": "1.18.9",
   "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",
@@ -47,10 +47,10 @@
     "@mui/icons-material": "^5.10.6",
     "@mui/lab": "^5.0.0-alpha.101",
     "@mui/material": "^5.10.7",
-    "@sentry/integrations": "^7.13.0",
-    "@sentry/react": "^7.13.0",
-    "@sentry/tracing": "^7.13.0",
-    "@tanstack/react-query": "^4.7.1",
+    "@sentry/integrations": "^7.14.0",
+    "@sentry/react": "^7.14.0",
+    "@sentry/tracing": "^7.14.0",
+    "@tanstack/react-query": "^4.8.0",
     "@tanstack/react-virtual": "^3.0.0-beta.18",
     "big.js": "^6.2.1",
     "i18next": "^21.9.2",

package/stores/routes/useRouteExecutionStore.js

@@ -79,6 +79,7 @@ export const useRouteExecutionStore = create()(persist(immer((set) => ({
                     }
                 });
             }
+            localStorage.removeItem('routes');
         }
         catch (error) {
             console.log(error);

package/stores/settings/useSettingsStore.js

@@ -20,7 +20,7 @@ export const useSettingsStore = create()(persist(immer((set) => ({
     appearance: 'auto',
     gasPrice: 'normal',
     routePriority: 'RECOMMENDED',
-    slippage: '3',
+    slippage: '0.5',
     setValue: (key, value) => set((state) => {
         state[key] = value;
     }),
@@ -65,7 +65,7 @@ export const useSettingsStore = create()(persist(immer((set) => ({
     }),
 })), {
     name: 'li.fi-widget-settings',
-    version: 1,
+    version: 2,
     partialize: (state) => {
         const { enabledBridges, enabledExchanges } = state, partializedState = __rest(state, ["enabledBridges", "enabledExchanges"]);
         return partializedState;
@@ -83,6 +83,9 @@ export const useSettingsStore = create()(persist(immer((set) => ({
         if (version === 0 && persistedState.appearance === 'system') {
             persistedState.appearance = 'auto';
         }
+        if (version === 1) {
+            persistedState.slippage = '0.5';
+        }
         return persistedState;
     },
 }));