@rango-dev/widget-embedded 0.1.13-next.0 → 0.1.13-next.5

package/src/pages/Home.tsx

@@ -139,7 +139,7 @@ export function Home() {
         title="SWAP"
         suffix={
           <HeaderButtons
-            onClickRefresh={!!bestRoute ? fetchBestRoute : undefined}
+            onClickRefresh={!!bestRoute || bestRouteError ? fetchBestRoute : undefined}
           />
         }
       />

package/src/pages/SwapDetailsPage.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import { navigationRoutes } from '../constants/navigationRoutes';
-import useCopyToClipboard from '../hooks/useCopyToClipboard';
 import { useManager } from '@rango-dev/queue-manager-react';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { getPendingSwaps } from '../utils/queue';
-import { SwapHistory } from '@rango-dev/ui';
+import { SwapHistory, useCopyToClipboard } from '@rango-dev/ui';
 import { useUiStore } from '../store/ui';
 import {
   cancelSwap,

package/src/store/bestRoute.ts

@@ -40,6 +40,7 @@ export interface RouteState {
   error: string;
   sourceTokens: Token[];
   destinationTokens: Token[];
+  resetRoute: () => void;
   setFromChain: (
     chain: BlockchainMeta | null,
     setDefaultToken?: boolean
@@ -92,6 +93,14 @@ export const useBestRouteStore = createSelectors(
             }),
           };
         }),
+      resetRoute: () =>
+        set(() => ({
+          loading: true,
+          error: '',
+          bestRoute: null,
+          outputAmount: null,
+          outputUsdValue: new BigNumber(0),
+        })),
       setFromChain: (chain, setDefaultToken) => {
         set((state) => {
           if (state.fromChain?.name === chain?.name) return {};
@@ -155,6 +164,7 @@ export const useBestRouteStore = createSelectors(
             outputAmount: new BigNumber(0),
             outputUsdValue: new BigNumber(0),
             bestRoute: null,
+            error: '',
           }),
           ...(!!state.fromToken && {
             inputUsdValue: getUsdValue(state.fromToken, amount),
@@ -250,7 +260,8 @@ const bestRoute = (
 ) => {
   let abortController: AbortController | null = null;
   const fetchBestRoute = () => {
-    const { fromToken, toToken, inputAmount } = bestRouteStore.getState();
+    const { fromToken, toToken, inputAmount, resetRoute } =
+      bestRouteStore.getState();
     const { slippage, customSlippage, disabledLiquiditySources, affiliateRef } =
       settingsStore.getState();
     if (!fromToken || !toToken || !isPositiveNumber(inputAmount)) return;
@@ -267,13 +278,10 @@ const bestRoute = (
       userSlippage,
       affiliateRef
     );
-    if (!bestRouteStore.getState().loading)
-      bestRouteStore.setState({
-        loading: true,
-        bestRoute: null,
-        outputAmount: null,
-        outputUsdValue: new BigNumber(0),
-      });
+
+    if (!bestRouteStore.getState().loading) {
+      resetRoute();
+    }
     httpService()
       .getBestRoute(requestBody, {
         signal: abortController.signal,
@@ -296,7 +304,7 @@ const bestRoute = (
   const debouncedFetchBestRoute = debounce(fetchBestRoute, 600);
 
   const bestRouteParamsListener = () => {
-    const { fromToken, toToken, inputAmount, inputUsdValue } =
+    const { fromToken, toToken, inputAmount, inputUsdValue, resetRoute } =
       useBestRouteStore.getState();
     if (!isPositiveNumber(inputAmount) || inputUsdValue.eq(0))
       return bestRouteStore.setState({ loading: false });
@@ -309,13 +317,7 @@ const bestRoute = (
         outputUsdValue: inputUsdValue,
       });
 
-    if (!bestRouteStore.getState().loading)
-      bestRouteStore.setState({
-        loading: true,
-        bestRoute: null,
-        outputAmount: null,
-        outputUsdValue: new BigNumber(0),
-      });
+    if (!bestRouteStore.getState().loading) resetRoute();
     debouncedFetchBestRoute();
   };
 

package/src/store/wallets.ts

@@ -54,17 +54,17 @@ interface WalletsStore {
   initSelectedWallets: () => void;
   setSelectedWallet: (wallet: SelectableWallet) => void;
   clearConnectedWallet: () => void;
+  getOneOfWalletsDetails: (account: Account) => void;
 }
 
 export const useWalletsStore = createSelectors(
   create<WalletsStore>()(
-    subscribeWithSelector((set) => ({
+    subscribeWithSelector((set, get) => ({
       accounts: [],
       balances: [],
       selectedWallets: [],
       connectWallet: (accounts) => {
-        const tokens = useMetaStore.getState().meta.tokens;
-
+        const getOneOfWalletsDetails = get().getOneOfWalletsDetails;
         set((state) => ({
           accounts: state.accounts.concat(accounts),
           balances: state.balances.concat(
@@ -79,31 +79,7 @@ export const useWalletsStore = createSelectors(
             }))
           ),
         }));
-        accounts.forEach(async (account) => {
-          try {
-            const response = await httpService().getWalletsDetails([
-              { address: account.address, blockchain: account.chain },
-            ]);
-            const retrivedBalance = response.wallets[0];
-            if (retrivedBalance) {
-              set((state) => ({
-                balances: state.balances.map((balance) => {
-                  return isAccountAndBalanceMatched(account, balance)
-                    ? makeBalanceFor(account, retrivedBalance, tokens)
-                    : balance;
-                }),
-              }));
-            } else throw new Error('Wallet not found');
-          } catch (error) {
-            set((state) => ({
-              balances: state.balances.map((balance) => {
-                return isAccountAndBalanceMatched(account, balance)
-                  ? resetBalanceState(balance)
-                  : balance;
-              }),
-            }));
-          }
-        });
+        accounts.forEach(async (account) => getOneOfWalletsDetails(account));
       },
       disconnectWallet: (walletType) => {
         set((state) => ({
@@ -162,6 +138,40 @@ export const useWalletsStore = createSelectors(
           balances: [],
           selectedWallets: [],
         })),
+      getOneOfWalletsDetails: async (account: Account) => {
+        const tokens = useMetaStore.getState().meta.tokens;
+        set((state) => ({
+          balances: state.balances.map((balance) => {
+            return balance.address === account.address &&
+              balance.chain === account.chain
+              ? { ...balance, loading: true }
+              : balance;
+          }),
+        }));
+        try {
+          const response = await httpService().getWalletsDetails([
+            { address: account.address, blockchain: account.chain },
+          ]);
+          const retrivedBalance = response.wallets[0];
+          if (retrivedBalance) {
+            set((state) => ({
+              balances: state.balances.map((balance) => {
+                return isAccountAndBalanceMatched(account, balance)
+                  ? makeBalanceFor(account, retrivedBalance, tokens)
+                  : balance;
+              }),
+            }));
+          } else throw new Error('Wallet not found');
+        } catch (error) {
+          set((state) => ({
+            balances: state.balances.map((balance) => {
+              return isAccountAndBalanceMatched(account, balance)
+                ? resetBalanceState(balance)
+                : balance;
+            }),
+          }));
+        }
+      },
     }))
   )
 );

package/src/utils/numbers.ts

@@ -12,11 +12,11 @@ export const secondsToString = (s: number): string => {
 };
 
 export const numberToString = (
-  number: BigNumber | string | null,
+  number: BigNumber | string | null | undefined,
   minDecimals: number | null = null,
   maxDecimals: number | null = null
 ): string => {
-  if (number === null) return '';
+  if (number === null || number === undefined) return '';
   if (number === '') return '';
   const n = new BigNumber(number);
   const roundingMode = 1;
@@ -126,9 +126,6 @@ export const rawFees = (data: BestRouteResponse): string =>
     .reduce((partialSum, a) => partialSum + parseFloat(a.fee.amount), 0)
     .toFixed(3);
 
-export const decimalNumber = (number = '0', toFixed: number) =>
-  parseFloat(number).toFixed(toFixed);
-
 export const containsText = (text: string, searchText: string) =>
   text.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
 

package/dist/hooks/useCopyToClipboard.d.ts

@@ -1,2 +0,0 @@
-export default function useCopyToClipboard(resetInterval?: number): readonly [boolean, (text: string | number) => void];
-//# sourceMappingURL=useCopyToClipboard.d.ts.map

package/dist/hooks/useCopyToClipboard.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useCopyToClipboard.d.ts","sourceRoot":"","sources":["../src/hooks/useCopyToClipboard.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,aAAa,CAAC,EAAE,MAAM,6BAGnB,MAAM,GAAG,MAAM,WAgB5D"}

package/src/hooks/useCopyToClipboard.ts

@@ -1,23 +0,0 @@
-import React from 'react';
-import copy from 'copy-to-clipboard';
-
-export default function useCopyToClipboard(resetInterval?: number) {
-  const [isCopied, setCopied] = React.useState(false);
-
-  const handleCopy = React.useCallback((text: string | number) => {
-    copy(text.toString());
-    setCopied(true);
-  }, []);
-
-  React.useEffect(() => {
-    let timeout: NodeJS.Timeout;
-    if (isCopied && resetInterval) {
-      timeout = setTimeout(() => setCopied(false), resetInterval);
-    }
-    return () => {
-      clearTimeout(timeout);
-    };
-  }, [isCopied, resetInterval]);
-
-  return [isCopied, handleCopy] as const;
-}