@rango-dev/widget-embedded 0.12.1-next.3 → 0.12.1-next.31

package/src/hooks/usePrepareBlockchainList.ts

@@ -0,0 +1,122 @@
+import type { BlockchainMeta } from 'rango-sdk';
+
+import { useMemo, useRef } from 'react';
+
+interface PrepareListOptions {
+  limit?: number;
+  selected?: string;
+}
+
+interface PrepareListOutput {
+  list: BlockchainMeta[];
+  more: BlockchainMeta[];
+}
+
+/**
+ *
+ * UI needs some specific logics like limiting the list and sorting,
+ * this function is getting the raw blockchains list and return a list for showing in UI.
+ *
+ */
+export function usePrepareBlockchainList(
+  blockchains: BlockchainMeta[],
+  options?: PrepareListOptions
+): PrepareListOutput {
+  const prevSelectedBlockchain = useRef({ index: -1, name: '' });
+
+  blockchains.sort(sortByMostUsedBlockchains);
+
+  return useMemo(() => {
+    const list: BlockchainMeta[] = blockchains;
+    let more: BlockchainMeta[] = [];
+
+    // Checking `limit` has set and it should be more than of the list items.
+    if (options?.limit && blockchains.length > options.limit) {
+      const start = options.limit;
+      /** Try find the blockchain and returns the index. */
+      const selectedIndex = options.selected
+        ? blockchains.findIndex(
+            (blockchains) => blockchains.name === options.selected
+          )
+        : -1;
+
+      const prevSelectedBlockchainWasInMoreSection =
+        prevSelectedBlockchain.current.index > options.limit - 1 &&
+        !!blockchains.find(
+          (blockchains) =>
+            blockchains.name === prevSelectedBlockchain.current.name
+        );
+
+      /*
+       * If the selected blockchain is in `more` section, we should move it to front of the list
+       */
+      if (
+        options.selected &&
+        ((prevSelectedBlockchainWasInMoreSection &&
+          selectedIndex < options.limit - 1) ||
+          selectedIndex > options.limit - 1)
+      ) {
+        blockchains.sort(
+          generateSortBySelectedFor(
+            prevSelectedBlockchainWasInMoreSection
+              ? prevSelectedBlockchain.current.name
+              : options.selected
+          )
+        );
+      }
+
+      /*
+       * Splice will modify the original list and returns the deleted items
+       * We use the deleted items as `more`
+       */
+      more = list.splice(start);
+      prevSelectedBlockchain.current = {
+        index: selectedIndex,
+        name: options.selected ?? '',
+      };
+    }
+
+    return {
+      list,
+      more,
+    };
+    //TODO: replace with better solution
+  }, [JSON.stringify(blockchains)]);
+}
+
+function generateSortBySelectedFor(selected: string) {
+  /** Move `selected` blockchain to the front of list. */
+  return function sortBySelected(a: BlockchainMeta, b: BlockchainMeta) {
+    if (a.name === selected) {
+      return -1;
+    }
+    if (b.name === selected) {
+      return 1;
+    }
+
+    return 0;
+  };
+}
+
+/** There is a hardcoded list of blockchains that we want to show them first in the list. */
+function sortByMostUsedBlockchains(a: BlockchainMeta, b: BlockchainMeta) {
+  const mostUsed = ['ETH', 'COSMOS', 'OSMOSIS'];
+  const aIndexInMostUsed = mostUsed.findIndex((token) => token === a.name);
+  const bIndexInMostUsed = mostUsed.findIndex((token) => token === b.name);
+  const aIsMostUsed = aIndexInMostUsed > -1;
+  const bIsMostUsed = bIndexInMostUsed > -1;
+
+  if (aIsMostUsed && bIsMostUsed) {
+    return aIndexInMostUsed > bIndexInMostUsed ? 1 : -1;
+  }
+
+  if (aIsMostUsed) {
+    return -1;
+  }
+
+  if (bIsMostUsed) {
+    return 1;
+  }
+
+  return 0;
+}

package/src/hooks/useSwapInput.ts

@@ -0,0 +1,116 @@
+import { useEffect, useRef, useState } from 'react';
+
+import { useBestRouteStore } from '../store/bestRoute';
+import { useSettingsStore } from '../store/settings';
+import { debounce } from '../utils/common';
+import { isPositiveNumber } from '../utils/numbers';
+import { createBestRouteRequestBody } from '../utils/swap';
+import { tokensAreEqual } from '../utils/wallets';
+
+import { useFetchBestRoute } from './useFetchBestRoute';
+
+const DEBOUNCE_DELAY = 600;
+
+type UseSwapInput = {
+  fetch: () => void;
+  loading: boolean;
+  error: string;
+};
+
+/**
+ * a hook for fetching best route based on from and to input values
+ * we use this hook in home page
+ */
+export function useSwapInput(): UseSwapInput {
+  const { fetch: fetchBestRoute, cancelFetch } = useFetchBestRoute();
+  const [loading, setLoading] = useState(false);
+  const {
+    fromToken,
+    toToken,
+    inputAmount,
+    inputUsdValue,
+    resetRoute,
+    setRoute,
+  } = useBestRouteStore();
+  const {
+    slippage,
+    customSlippage,
+    affiliatePercent,
+    affiliateRef,
+    affiliateWallets,
+    disabledLiquiditySources,
+  } = useSettingsStore();
+  const [error, setError] = useState('');
+  const prevDisabledLiquiditySources = useRef(disabledLiquiditySources);
+  const userSlippage = customSlippage ?? slippage;
+  const hasTokensValue = !fromToken || !toToken;
+  const shouldSkipRequest =
+    hasTokensValue ||
+    tokensAreEqual(fromToken, toToken) ||
+    !isPositiveNumber(inputAmount);
+
+  const fetch: UseSwapInput['fetch'] = () => {
+    if (!loading) {
+      setLoading(true);
+    }
+    if (!shouldSkipRequest) {
+      resetRoute();
+      const requestBody = createBestRouteRequestBody({
+        fromToken,
+        toToken,
+        inputAmount,
+        disabledLiquiditySources,
+        slippage: userSlippage,
+        affiliateRef,
+        affiliatePercent,
+        affiliateWallets,
+      });
+      fetchBestRoute(requestBody)
+        .then((res) => {
+          setLoading(false);
+          setRoute(res);
+        })
+        .catch((error) => {
+          resetRoute();
+          if (error?.code !== 'ERR_CANCELED') {
+            setError(error.message);
+            setLoading(false);
+          }
+        });
+    }
+  };
+
+  const debouncedFetch = debounce(() => {
+    if (!shouldSkipRequest) {
+      fetch();
+    }
+  }, DEBOUNCE_DELAY);
+
+  useEffect(() => {
+    if (!isPositiveNumber(inputAmount) || inputUsdValue?.eq(0)) {
+      setLoading(false);
+      cancelFetch();
+      return;
+    }
+    if (shouldSkipRequest) {
+      return;
+    }
+    resetRoute();
+    setLoading(true);
+    debouncedFetch();
+    return cancelFetch;
+  }, [inputAmount, shouldSkipRequest]);
+
+  useEffect(() => {
+    const disabledLiquiditySourceReset =
+      !!prevDisabledLiquiditySources.current.length &&
+      !disabledLiquiditySources.length;
+    if (!shouldSkipRequest && disabledLiquiditySourceReset) {
+      fetch();
+    }
+    prevDisabledLiquiditySources.current = disabledLiquiditySources;
+    return cancelFetch;
+  }, [disabledLiquiditySources.length]);
+
+  return { fetch, loading, error };
+}

package/src/hooks/useSyncStoresWithConfig.ts

@@ -0,0 +1,102 @@
+import type { WidgetConfig } from '../types';
+import type { Asset } from 'rango-sdk';
+
+import { useEffect, useRef } from 'react';
+
+import { useBestRouteStore } from '../store/bestRoute';
+import { useMetaStore } from '../store/meta';
+import { useSettingsStore } from '../store/settings';
+import { tokensAreEqual } from '../utils/wallets';
+
+export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
+  const {
+    setInputAmount,
+    setToToken,
+    setToBlockchain,
+    setFromBlockchain,
+    setFromToken,
+  } = useBestRouteStore();
+
+  const {
+    meta: { tokens, blockchains },
+    loadingStatus: loadingMetaStatus,
+  } = useMetaStore();
+
+  const { setAffiliateRef, setAffiliatePercent, setAffiliateWallets } =
+    useSettingsStore();
+
+  const prevConfigFromToken = useRef<Asset | undefined>(undefined);
+  const prevConfigToToken = useRef<Asset | undefined>(undefined);
+  const prevConfigFromBlockchain = useRef<string | undefined>(undefined);
+  const prevConfigToBlockchain = useRef<string | undefined>(undefined);
+
+  useEffect(() => {
+    setInputAmount(config?.amount?.toString() || '');
+  }, [config?.amount]);
+
+  useEffect(() => {
+    if (loadingMetaStatus === 'success') {
+      const chain = blockchains.find(
+        (chain) => chain.name === config?.from?.blockchain
+      );
+      const token = tokens.find((t) =>
+        tokensAreEqual(t, config?.from?.token || null)
+      );
+
+      if (chain || (!chain && prevConfigFromBlockchain.current)) {
+        setFromBlockchain(chain ?? null);
+      }
+
+      if (token || (!token && prevConfigFromToken.current)) {
+        setFromToken(token ?? null);
+      }
+
+      prevConfigFromBlockchain.current = config?.from?.blockchain;
+      prevConfigFromToken.current = config?.from?.token;
+    }
+  }, [
+    config?.from?.token?.symbol,
+    config?.from?.token?.address,
+    config?.from?.blockchain,
+    config?.from?.blockchain,
+    loadingMetaStatus,
+  ]);
+
+  useEffect(() => {
+    if (loadingMetaStatus === 'success') {
+      const chain = blockchains.find(
+        (chain) => chain.name === config?.to?.blockchain
+      );
+      const token = tokens.find((t) =>
+        tokensAreEqual(t, config?.to?.token || null)
+      );
+
+      if (chain || (!chain && prevConfigToBlockchain.current)) {
+        setToBlockchain(chain ?? null);
+      }
+
+      if (token || (!token && prevConfigToToken.current)) {
+        setToToken(token ?? null);
+      }
+
+      prevConfigToBlockchain.current = config?.to?.blockchain;
+      prevConfigToToken.current = config?.to?.token;
+    }
+  }, [
+    config?.to?.token?.symbol,
+    config?.to?.token?.address,
+    config?.to?.token?.blockchain,
+    config?.to?.blockchain,
+    loadingMetaStatus,
+  ]);
+
+  useEffect(() => {
+    setAffiliateRef(config?.affiliate?.ref ?? null);
+    setAffiliatePercent(config?.affiliate?.percent ?? null);
+    setAffiliateWallets(config?.affiliate?.wallets ?? null);
+  }, [
+    config?.affiliate?.ref,
+    config?.affiliate?.percent,
+    config?.affiliate?.wallets,
+  ]);
+}

package/src/hooks/useTheme.ts

@@ -1,87 +1,53 @@
-import { createTheme, generateRangeColors } from '@rango-dev/ui';
-import { useState, useEffect, useLayoutEffect } from 'react';
+import type { WidgetTheme } from '../types';
+
+import { createTheme, darkTheme, lightTheme } from '@rango-dev/ui';
+import { useEffect, useState } from 'react';
+
 import { useMetaStore } from '../store/meta';
 import { useSettingsStore } from '../store/settings';
-import { WidgetTheme } from '../types';
-import usePrevious from './usePrevious';
+import {
+  DEFAULT_PRIMARY_RADIUS,
+  DEFAULT_SECONDARY_RADIUS,
+} from '../utils/configs';
 
 export function useTheme({
-  colors: themeColors,
+  // colors,
   fontFamily = 'Roboto',
-  borderRadius = 8,
+  borderRadius = DEFAULT_PRIMARY_RADIUS,
+  secondaryBorderRadius = DEFAULT_SECONDARY_RADIUS,
   mode = 'auto',
 }: WidgetTheme) {
   const theme = useSettingsStore.use.theme();
   const fetchMeta = useMetaStore.use.fetchMeta();
   const setTheme = useSettingsStore.use.setTheme();
-  const light = themeColors?.light;
-  const dark = themeColors?.dark;
-  const neutral = light?.neutral || '#fafafa';
-  const background = light?.background || '#fff';
-  const foreground = light?.foreground || '#000';
 
-  const darkColors = {
-    ...generateRangeColors('primary', 'dark', dark?.primary),
-    ...generateRangeColors('error', 'dark', dark?.error),
-    ...generateRangeColors('warning', 'dark', dark?.warning),
-    ...generateRangeColors('success', 'dark', dark?.success),
-    ...generateRangeColors('neutral', 'dark', dark?.neutral),
-    surface: dark?.surface,
-    background: dark?.background,
-    foreground: dark?.foreground,
-  };
-
-  const lightColors = {
-    surface: light?.surface || '#fff',
-    ...generateRangeColors('primary', 'light', light?.primary || '#5FA425'),
-    ...generateRangeColors('error', 'light', light?.error || '#FF0000'),
-    ...generateRangeColors('warning', 'light', light?.warning || '#F5A623'),
-    ...generateRangeColors('success', 'light', light?.success || '#0070F3'),
-    ...generateRangeColors('neutral', 'light', neutral),
-    background,
-    foreground,
-  };
-
-  const customLightTheme = createTheme({
-    colors: lightColors,
+  const customTheme = createTheme({
     radii: {
-      5: `${borderRadius}px`,
+      primary: `${borderRadius}px`,
+      secondary: `${secondaryBorderRadius}px`,
     },
-    shadows: {
-      s: `0px 3px 5px 3px ${light?.neutral || '#f0f2f5'} ,0px 6px 10px 3px ${
-        light?.neutral || '#f0f2f5'
-      }, 0px 1px 18px 3px ${light?.neutral || '#f0f2f5'}`,
+    fonts: {
+      widget: fontFamily,
     },
   });
 
-  const customDarkTheme = createTheme({
-    colors: {
-      ...lightColors,
-      ...generateRangeColors('neutral', 'dark', '#111111'),
-      foreground: background,
-      background: foreground,
-      surface: '#000',
-      ...JSON.parse(JSON.stringify(darkColors)),
-    },
-    radii: {
-      5: `${borderRadius}px`,
-    },
-    shadows: {
-      s: `0px 3px 5px 3px ${dark?.neutral || '#222'}, 0px 6px 10px 3px ${
-        dark?.neutral || '#222'
-      }, 0px 1px 18px 3px ${dark?.neutral || '#222'}`,
-    },
-  });
+  const lightClassName = `${customTheme.className} ${lightTheme.className}`;
+  const darkClassName = `${customTheme.className} ${darkTheme.className}`;
+
   const [OSTheme, setOSTheme] = useState('light');
 
   useEffect(() => {
-    (async () => {
+    const fetchData = async () => {
       await fetchMeta();
-    })();
+    };
+    void fetchData();
 
     const switchTheme = (event: MediaQueryListEvent) => {
-      if (event.matches) setOSTheme('dark');
-      else setOSTheme('light');
+      if (event.matches) {
+        setOSTheme('dark');
+      } else {
+        setOSTheme('light');
+      }
     };
 
     if (
@@ -101,21 +67,16 @@ export function useTheme({
     };
   }, []);
   useEffect(() => {
-    if (mode !== 'auto') setTheme(mode);
+    if (mode !== 'auto') {
+      setTheme(mode);
+    }
   }, [mode]);
-  const prevFont = usePrevious(fontFamily);
-
-  useLayoutEffect(() => {
-    const { classList } = document.body;
-
-    if (prevFont) classList.remove(`font_${prevFont.replace(/ /g, '')}`);
-    classList.add(`font_${fontFamily.replace(/ /g, '')}`);
-  }, [fontFamily]);
 
   const getActiveTheme = () => {
-    if (theme === 'auto')
-      return OSTheme === 'dark' ? customDarkTheme : customLightTheme;
-    else return theme === 'dark' ? customDarkTheme : customLightTheme;
+    if (theme === 'auto') {
+      return OSTheme === 'dark' ? darkClassName : lightClassName;
+    }
+    return theme === 'dark' ? darkClassName : lightClassName;
   };
 
   return { activeTheme: getActiveTheme() };

package/src/hooks/useWalletList.ts

@@ -0,0 +1,125 @@
+import type { WidgetConfig } from '../types';
+import type { BlockchainMeta } from 'rango-sdk';
+
+import { WalletState } from '@rango-dev/ui';
+import { useWallets } from '@rango-dev/wallets-react';
+import {
+  KEPLR_COMPATIBLE_WALLETS,
+  type WalletType,
+  WalletTypes,
+} from '@rango-dev/wallets-shared';
+import { useEffect, useState } from 'react';
+
+import { useMetaStore } from '../store/meta';
+import { useWalletsStore } from '../store/wallets';
+import { configWalletsToWalletName } from '../utils/providers';
+import {
+  isExperimentalChain,
+  mapWalletTypesToWalletInfo,
+  sortWalletsBasedOnConnectionState,
+} from '../utils/wallets';
+
+const ALL_SUPPORTED_WALLETS = Object.values(WalletTypes);
+
+interface Params {
+  config?: WidgetConfig;
+  chain?: string;
+  onBeforeConnect?: (walletType: string) => void;
+  onConnect?: (walletType: string) => void;
+}
+
+/**
+ * gets list of wallets with their information and an action for handling click callback fo UI
+ * we need to share the logic of rendering list of wallets and handle clicking on them in different places
+ * you can use this list whenever you need to show the list of wallets and needed callbacks
+ */
+export function useWalletList(params: Params) {
+  const { config, chain, onBeforeConnect, onConnect } = params;
+  const { state, disconnect, getWalletInfo, connect } = useWallets();
+  const { connectedWallets } = useWalletsStore();
+  const { blockchains } = useMetaStore().meta;
+  const multiWallets =
+    typeof config?.multiWallets === 'undefined' ? true : config.multiWallets;
+
+  /** It can be what has been set by widget config or as a fallback we use all the supported wallets by our library */
+  const listAvailableWalletTypes =
+    configWalletsToWalletName(config?.wallets, {
+      walletConnectProjectId: config?.walletConnectProjectId,
+    }) || ALL_SUPPORTED_WALLETS;
+
+  const wallets = mapWalletTypesToWalletInfo(
+    state,
+    getWalletInfo,
+    listAvailableWalletTypes,
+    chain
+  );
+
+  const sortedWallets = sortWalletsBasedOnConnectionState(wallets);
+  const [error, setError] = useState('');
+
+  const isExperimentalChainNotAdded = (walletType: string) =>
+    !connectedWallets.find(
+      (connectedWallet) =>
+        connectedWallet.walletType === walletType &&
+        connectedWallet.chain === chain
+    );
+
+  const handleClick = async (type: WalletType) => {
+    const wallet = state(type);
+    try {
+      if (error) {
+        setError('');
+      }
+      if (wallet.connected) {
+        await disconnect(type);
+      } else {
+        const atLeastOneWalletIsConnected = !!wallets.find(
+          (w) => w.state === WalletState.CONNECTED
+        );
+        if (!multiWallets && atLeastOneWalletIsConnected) {
+          return;
+        }
+        onBeforeConnect?.(type);
+        await connect(type);
+        onConnect?.(type);
+      }
+    } catch (e) {
+      setError('Error: ' + (e as any)?.message);
+    }
+  };
+
+  const disconnectConnectingWallets = () => {
+    const connectingWallets =
+      wallets?.filter((wallet) => wallet.state === WalletState.CONNECTING) ||
+      [];
+    for (const wallet of connectingWallets) {
+      void disconnect(wallet.type);
+    }
+  };
+
+  useEffect(() => {
+    return () => {
+      disconnectConnectingWallets();
+    };
+  }, []);
+
+  const shouldExcludeWallet = (
+    walletType: string,
+    chain: string,
+    blockchains: BlockchainMeta[]
+  ) => {
+    return (
+      isExperimentalChain(blockchains, chain) &&
+      isExperimentalChainNotAdded(walletType) &&
+      !KEPLR_COMPATIBLE_WALLETS.includes(walletType)
+    );
+  };
+
+  return {
+    list: sortedWallets.filter(
+      (wallet) => !shouldExcludeWallet(wallet.type, chain ?? '', blockchains)
+    ),
+    error,
+    handleClick,
+  };
+}

package/src/hooks/useWalletProviders.ts

@@ -1,11 +1,11 @@
-import { ProviderInterface } from '@rango-dev/wallets-react';
+import type { WidgetConfig } from '../types';
+import type { ProvidersOptions } from '../utils/providers';
+import type { ProviderInterface } from '@rango-dev/wallets-react';
+
 import { useEffect } from 'react';
+
 import { useWalletsStore } from '../store/wallets';
-import { WidgetConfig } from '../types';
-import {
-  matchAndGenerateProviders,
-  ProvidersOptions,
-} from '../utils/providers';
+import { matchAndGenerateProviders } from '../utils/providers';
 
 export function useWalletProviders(
   providers: WidgetConfig['wallets'],
@@ -22,7 +22,7 @@ export function useWalletProviders(
     generateProviders = matchAndGenerateProviders(providers, {
       walletConnectProjectId: options?.walletConnectProjectId,
     });
-  }, [providers]);
+  }, [providers?.length]);
 
   return {
     providers: generateProviders,