@rango-dev/widget-embedded 0.12.1-next.2 → 0.12.1-next.21

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/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,
+  };
+}