@rango-dev/widget-embedded 0.12.1-next.6 → 0.12.1-next.8

package/src/hooks/useSwapInput.ts

@@ -0,0 +1,102 @@
+import { useEffect, 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 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) {
+      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);
+      return cancelFetch();
+    }
+    if (shouldSkipRequest) {
+      return;
+    }
+    resetRoute();
+    setLoading(true);
+    debouncedFetch();
+    return cancelFetch;
+  }, [inputAmount]);
+
+  return { fetch, loading, error };
+}

package/src/hooks/useTheme.ts

@@ -1,4 +1,4 @@
-import { createTheme, generateRangeColors } from '@rango-dev/ui';
+import { darkTheme, lightTheme } from '@rango-dev/ui';
 import { useState, useEffect, useLayoutEffect } from 'react';
 import { useMetaStore } from '../store/meta';
 import { useSettingsStore } from '../store/settings';
@@ -6,72 +6,72 @@ import { WidgetTheme } from '../types';
 import usePrevious from './usePrevious';
 
 export function useTheme({
-  colors: themeColors,
+  // colors,
   fontFamily = 'Roboto',
-  borderRadius = 8,
+  // borderRadius = 8,
   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 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 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 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,
-    radii: {
-      5: `${borderRadius}px`,
-    },
-    shadows: {
-      s: `0px 3px 5px 3px ${light?.neutral || '#f0f2f5'} ,0px 6px 10px 3px ${
-        light?.neutral || '#f0f2f5'
-      }, 0px 1px 18px 3px ${light?.neutral || '#f0f2f5'}`,
-    },
-  });
+  // const customLightTheme = createTheme({
+  //   colors: lightColors,
+  //   radii: {
+  //     xs: `${borderRadius}px`,
+  //   },
+  //   shadows: {
+  //     s: `0px 3px 5px 3px ${light?.neutral || '#f0f2f5'} ,0px 6px 10px 3px ${
+  //       light?.neutral || '#f0f2f5'
+  //     }, 0px 1px 18px 3px ${light?.neutral || '#f0f2f5'}`,
+  //   },
+  // });
 
-  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 customDarkTheme = createTheme({
+  //   colors: {
+  //     ...lightColors,
+  //     ...generateRangeColors('neutral', 'dark', '#111111'),
+  //     foreground: background,
+  //     background: foreground,
+  //     surface: '#000',
+  //     ...JSON.parse(JSON.stringify(darkColors)),
+  //   },
+  //   radii: {
+  //     xs: `${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 [OSTheme, setOSTheme] = useState('light');
 
   useEffect(() => {
@@ -113,9 +113,8 @@ export function useTheme({
   }, [fontFamily]);
 
   const getActiveTheme = () => {
-    if (theme === 'auto')
-      return OSTheme === 'dark' ? customDarkTheme : customLightTheme;
-    else return theme === 'dark' ? customDarkTheme : customLightTheme;
+    if (theme === 'auto') return OSTheme === 'dark' ? darkTheme : lightTheme;
+    else return theme === 'dark' ? darkTheme : lightTheme;
   };
 
   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,
+  };
+}