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

package/src/containers/Settings/Lists.tsx

@@ -0,0 +1,280 @@
+import type { ThemeMode } from '../../store/slices/settings';
+import type { ListPropTypes, SvgIconProps } from '@rango-dev/ui';
+
+import { i18n } from '@lingui/core';
+import {
+  AutoThemeIcon,
+  BridgeIcon,
+  ChevronRightIcon,
+  DarkModeIcon,
+  Divider,
+  DoneIcon,
+  ExchangeIcon,
+  InfoIcon,
+  LanguageIcon,
+  LightModeIcon,
+  List,
+  ListItem,
+  ListItemButton,
+  Skeleton,
+  styled,
+  Switch,
+  Tabs,
+  Tooltip,
+  Typography,
+} from '@rango-dev/ui';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { SlippageTooltipContainer as TooltipContainer } from '../../components/Slippage/Slippage.styles';
+import { navigationRoutes } from '../../constants/navigationRoutes';
+import { ThemeModeEnum } from '../../constants/settings';
+import { useLanguage } from '../../hooks/useLanguage';
+import { useAppStore } from '../../store/AppStore';
+import { getContainer } from '../../utils/common';
+import { getUniqueSwappersGroups, isFeatureHidden } from '../../utils/settings';
+
+const ThemeSection = styled('div', {
+  width: '202px',
+  height: '$40',
+});
+
+const themesList = [
+  {
+    id: ThemeModeEnum.LIGHT,
+    icon: <LightModeIcon color="black" size={16} />,
+    tooltip: (
+      <Typography size="xsmall" variant="body">
+        {i18n.t('Light')}
+      </Typography>
+    ),
+  },
+  {
+    id: ThemeModeEnum.DARK,
+    icon: <DarkModeIcon color="black" size={14} />,
+    tooltip: (
+      <Typography size="xsmall" variant="body">
+        {i18n.t('Dark')}
+      </Typography>
+    ),
+  },
+  {
+    id: ThemeModeEnum.AUTO,
+    icon: <AutoThemeIcon color="black" size={16} />,
+    tooltip: (
+      <Typography size="xsmall" variant="body">
+        {i18n.t('Auto')}
+      </Typography>
+    ),
+  },
+];
+
+const getThemeIcon = (theme: ThemeMode) => {
+  const iconProps: SvgIconProps = { color: 'gray', size: 14 };
+
+  switch (theme) {
+    case 'auto':
+      return <AutoThemeIcon {...iconProps} />;
+    case 'dark':
+      return <DarkModeIcon {...iconProps} />;
+    default:
+      return <LightModeIcon {...iconProps} />;
+  }
+};
+
+export function SettingsLists() {
+  const navigate = useNavigate();
+  const { theme: themeConfig } = useAppStore().config;
+  const { setTheme, theme } = useAppStore();
+  const { activeLanguage, languages } = useLanguage();
+  const currentLanguage = languages.find(
+    (language) => language.local === activeLanguage
+  )?.label;
+
+  const fetchStatus = useAppStore().fetchStatus;
+  const swappers = useAppStore().swappers();
+  const disabledLiquiditySources = useAppStore().getDisabledLiquiditySources();
+  const {
+    config: { features },
+  } = useAppStore();
+  const isThemeHidden = isFeatureHidden('theme', features);
+  const isLiquidityHidden = isFeatureHidden('liquiditySource', features);
+  const isLanguageHidden = isFeatureHidden('language', features);
+
+  const infiniteApprove = useAppStore().infiniteApprove;
+  const toggleInfiniteApprove = useAppStore().toggleInfiniteApprove;
+
+  const supportedUniqueSwappersGroups = getUniqueSwappersGroups(
+    swappers,
+    disabledLiquiditySources
+  );
+
+  const bridgeSources = supportedUniqueSwappersGroups.filter((uniqueItem) =>
+    ['BRIDGE', 'AGGREGATOR', 'OFF_CHAIN'].includes(uniqueItem.type)
+  );
+
+  const totalBridgeSources = bridgeSources.length;
+  const totalSelectedBridgeSources = bridgeSources.filter(
+    (uniqueItem) => uniqueItem.selected
+  ).length;
+
+  const exchangeSources = supportedUniqueSwappersGroups.filter(
+    (uniqueItem) => uniqueItem.type === 'DEX'
+  );
+
+  const totalExchangeSources = exchangeSources.length;
+  const totalSelectedExchangeSources = exchangeSources.filter(
+    (uniqueItem) => uniqueItem.selected
+  ).length;
+
+  const handleSwapperEndItem = (totalSelected: number, total: number) => {
+    switch (fetchStatus) {
+      case 'loading':
+        return <Skeleton variant="text" size="medium" width={50} />;
+      case 'failed':
+        return (
+          <Typography variant="body" size="medium" color="$error500">
+            {i18n.t('Loading failed')}
+          </Typography>
+        );
+      default:
+        return (
+          <Typography variant="body" size="medium">
+            {`${totalSelected} / ${total}`}
+          </Typography>
+        );
+    }
+  };
+
+  const bridgeItem = {
+    id: 'bridge-item',
+    title: (
+      <Typography variant="title" size="xmedium">
+        {i18n.t('Enabled bridges')}
+      </Typography>
+    ),
+    end: (
+      <>
+        {handleSwapperEndItem(totalSelectedBridgeSources, totalBridgeSources)}
+        <Divider direction="horizontal" size={8} />
+        <ChevronRightIcon color="black" />
+      </>
+    ),
+    onClick: () => navigate(navigationRoutes.bridges),
+    start: <BridgeIcon color="gray" size={14} />,
+  };
+
+  const exchangeItem = {
+    id: 'exchange-item',
+    title: (
+      <Typography variant="title" size="xmedium">
+        {i18n.t('Enabled exchanges')}
+      </Typography>
+    ),
+    end: (
+      <>
+        {handleSwapperEndItem(
+          totalSelectedExchangeSources,
+          totalExchangeSources
+        )}
+        <Divider direction="horizontal" size={8} />
+        <ChevronRightIcon color="gray" />
+      </>
+    ),
+    start: <ExchangeIcon color="gray" size={14} />,
+    onClick: () => navigate(navigationRoutes.exchanges),
+  };
+
+  const languageItem = {
+    id: 'language-item',
+    title: (
+      <Typography variant="title" size="xmedium">
+        {i18n.t('Language')}
+      </Typography>
+    ),
+    start: <LanguageIcon color="gray" size={14} />,
+    end: (
+      <>
+        <Typography variant="body" size="medium">
+          {currentLanguage}
+        </Typography>
+        <Divider direction="horizontal" size={8} />
+        <ChevronRightIcon color="gray" />
+      </>
+    ),
+    onClick: () => navigate(navigationRoutes.languages),
+  };
+
+  const infiniteApprovalItem = {
+    id: 'infinite-approval-item',
+    title: (
+      <>
+        <Typography variant="title" size="xmedium">
+          {i18n.t('Infinite approval')}
+        </Typography>
+        <Divider direction="horizontal" size={4} />
+        <Tooltip
+          side="top"
+          sideOffset={4}
+          container={getContainer()}
+          content={
+            <TooltipContainer>
+              <Typography variant="label" size="medium" color="neutral700">
+                {i18n.t(
+                  "Enabling the 'Infinite approval' mode grants unrestricted access to smart contracts of DEXes/Bridges, allowing them to utilize the approved token amount without limitations."
+                )}
+              </Typography>
+            </TooltipContainer>
+          }>
+          <InfoIcon color="gray" />
+        </Tooltip>
+      </>
+    ),
+    start: <DoneIcon color="gray" size={14} />,
+    end: <Switch checked={infiniteApprove} />,
+    onClick: toggleInfiniteApprove,
+  };
+
+  const themeItem = {
+    id: 'theme-item',
+    type: <ListItem />,
+    title: (
+      <Typography variant="title" size="xmedium">
+        {i18n.t('Theme')}
+      </Typography>
+    ),
+    end: (
+      <ThemeSection>
+        <Tabs
+          container={getContainer()}
+          items={themesList}
+          value={theme}
+          onChange={(item) => setTheme(item.id as ThemeMode)}
+          type="primary"
+          borderRadius="small"
+        />
+      </ThemeSection>
+    ),
+    start: getThemeIcon(theme),
+  };
+
+  const settingItems: ListPropTypes['items'] = isLiquidityHidden
+    ? []
+    : [bridgeItem, exchangeItem];
+
+  if (!isLanguageHidden) {
+    settingItems.push(languageItem);
+  }
+  settingItems.push(infiniteApprovalItem);
+
+  if (!themeConfig?.singleTheme && !isThemeHidden) {
+    settingItems.push(themeItem);
+  }
+
+  return (
+    <List
+      type={<ListItemButton hasDivider id="_" onClick={() => console.log()} />}
+      items={settingItems}
+    />
+  );
+}

package/src/containers/Wallets/Wallets.tsx

@@ -1,5 +1,5 @@
 import type {
-  OnConnectHandler,
+  OnWalletConnectionChange,
   PropTypes,
   WidgetContextInterface,
 } from './Wallets.types';
@@ -10,7 +10,7 @@ import type { PropsWithChildren } from 'react';
 import { Events, Provider } from '@rango-dev/wallets-react';
 import { type Network } from '@rango-dev/wallets-shared';
 import { isEvmBlockchain } from 'rango-sdk';
-import React, { createContext, useEffect, useRef } from 'react';
+import React, { createContext, useEffect, useMemo, useRef } from 'react';
 
 import { useWalletProviders } from '../../hooks/useWalletProviders';
 import { AppStoreProvider, useAppStore } from '../../store/AppStore';
@@ -25,6 +25,9 @@ export const WidgetContext = createContext<WidgetContextInterface>({
   onConnectWallet: () => {
     return;
   },
+  onDisconnectWallet: () => {
+    return;
+  },
 });
 
 function Main(props: PropsWithChildren<PropTypes>) {
@@ -36,7 +39,8 @@ function Main(props: PropsWithChildren<PropTypes>) {
   };
   const { providers } = useWalletProviders(props.config.wallets, walletOptions);
   const { connectWallet, disconnectWallet } = useWalletsStore();
-  const onConnectWalletHandler = useRef<OnConnectHandler>();
+  const onConnectWalletHandler = useRef<OnWalletConnectionChange>();
+  const onDisconnectWalletHandler = useRef<OnWalletConnectionChange>();
 
   useEffect(() => {
     void fetchMeta().catch(console.log);
@@ -70,6 +74,13 @@ function Main(props: PropsWithChildren<PropTypes>) {
         }
       } else {
         disconnectWallet(type);
+        if (!!onDisconnectWalletHandler.current) {
+          onDisconnectWalletHandler.current(type);
+        } else {
+          console.warn(
+            `onDisconnectWallet handler hasn't been set. Are you sure?`
+          );
+        }
       }
     }
     if (event === Events.ACCOUNTS && state.connected) {
@@ -102,14 +113,20 @@ function Main(props: PropsWithChildren<PropTypes>) {
   };
   const isActiveTab = useUiStore.use.isActiveTab();
 
+  const handlers = useMemo(
+    () => ({
+      onConnectWallet: (handler: OnWalletConnectionChange) => {
+        onConnectWalletHandler.current = handler;
+      },
+      onDisconnectWallet: (handler: OnWalletConnectionChange) => {
+        onDisconnectWalletHandler.current = handler;
+      },
+    }),
+    []
+  );
+
   return (
-    <WidgetContext.Provider
-      // eslint-disable-next-line react/jsx-no-constructed-context-values
-      value={{
-        onConnectWallet: (handler) => {
-          onConnectWalletHandler.current = handler;
-        },
-      }}>
+    <WidgetContext.Provider value={handlers}>
       <Provider
         allBlockChains={blockchains}
         providers={providers}

package/src/containers/Wallets/Wallets.types.ts

@@ -1,9 +1,20 @@
 import type { WidgetConfig } from '../../types';
 import type { EventHandler } from '@rango-dev/wallets-react';
 
-export type OnConnectHandler = (key: string) => void;
+export type OnWalletConnectionChange = (key: string) => void;
 export interface WidgetContextInterface {
-  onConnectWallet(handler: OnConnectHandler): void;
+  /**
+   * A wallet connection handler, utilized within the wallet provider,
+   * is linked to the useBootstrap hook for synchronizing the state of the last connected wallet.
+   * It's important not to override this handler in other locations.
+   */
+  onConnectWallet(handler: OnWalletConnectionChange): void;
+  /**
+   * A wallet disconnection handler, utilized within the wallet provider,
+   * is linked to the useBootstrap hook for synchronizing the state of the last disconnected wallet.
+   * It's important not to override this handler in other locations.
+   */
+  onDisconnectWallet(handler: OnWalletConnectionChange): void;
 }
 
 export interface PropTypes {

package/src/containers/Widget/Widget.tsx

@@ -1,25 +1,25 @@
 import type { WidgetProps } from './Widget.types';
 import type { PropsWithChildren } from 'react';
 
-import React, { useEffect } from 'react';
+import React from 'react';
 
+import { AppRouter } from '../../components/AppRouter';
 import { DEFAULT_CONFIG } from '../../store/slices/config';
-import { tabManager } from '../../store/ui';
 import { Main } from '../App';
 import { WidgetProvider } from '../WidgetProvider';
 
 export function Widget(props: PropsWithChildren<WidgetProps>) {
-  useEffect(() => {
-    tabManager.init();
-    return tabManager.destroy;
-  }, []);
+  const isExternalWalletsEnabled = props.config?.externalWallets;
 
-  if (!props.config?.externalWallets) {
-    return (
-      <WidgetProvider config={props.config ?? DEFAULT_CONFIG}>
+  return (
+    <AppRouter>
+      {isExternalWalletsEnabled ? (
         <Main />
-      </WidgetProvider>
-    );
-  }
-  return <Main />;
+      ) : (
+        <WidgetProvider config={props.config ?? DEFAULT_CONFIG}>
+          <Main />
+        </WidgetProvider>
+      )}
+    </AppRouter>
+  );
 }

package/src/hooks/useBootstrap/index.ts

@@ -0,0 +1 @@
+export { useBootstrap } from './useBootstrap';

package/src/hooks/useBootstrap/useBootstrap.ts

@@ -0,0 +1,72 @@
+import type { WalletType } from '../..';
+
+import { useQueueManager } from '@rango-dev/queue-manager-rango-preset';
+import { splitWalletNetwork } from '@rango-dev/wallets-shared';
+import { isEvmBlockchain } from 'rango-sdk';
+import { useContext, useEffect, useState } from 'react';
+
+import { useWallets } from '../..';
+import { WidgetContext } from '../../containers/Wallets';
+import { globalFont } from '../../globalStyles';
+import { useAppStore } from '../../store/AppStore';
+import { useNotificationStore } from '../../store/notification';
+import { tabManager } from '../../store/ui';
+import { useFetchApiConfig } from '../useFetchApiConfig';
+import { useForceAutoConnect } from '../useForceAutoConnect';
+
+export function useBootstrap() {
+  globalFont();
+  useForceAutoConnect();
+  const blockchains = useAppStore().blockchains();
+  const { canSwitchNetworkTo } = useWallets();
+  const [lastConnectedWalletWithNetwork, setLastConnectedWalletWithNetwork] =
+    useState('');
+  const [disconnectedWallet, setDisconnectedWallet] = useState<WalletType>();
+  const widgetContext = useContext(WidgetContext);
+
+  const evmChains = blockchains.filter(isEvmBlockchain);
+
+  const { fetchApiConfig } = useFetchApiConfig();
+
+  // At the moment, we only detect the disconnection of EVM wallets.
+  useQueueManager({
+    lastConnectedWallet: lastConnectedWalletWithNetwork,
+    clearDisconnectedWallet: () => {
+      setDisconnectedWallet(undefined);
+    },
+    disconnectedWallet: disconnectedWallet,
+    evmChains,
+    canSwitchNetworkTo,
+  });
+
+  useEffect(() => {
+    tabManager.init();
+
+    if (!useNotificationStore.persist.hasHydrated()) {
+      void useNotificationStore.persist.rehydrate();
+    }
+
+    /**
+     * Add handlers to the widget context for connecting and disconnecting wallets.
+     * We pass these handlers to the wallet provider to keep track of the last connected and last disconnected wallets.
+     * The 'queue-manager' uses these details to spot any changes in the connection status of the required wallet during the swap process.
+     *
+     * with this approch anyone who use the widget context can override these handlers and causes some bugs happens.
+     * it the future we should add a safer soloution like considering array of handlers .
+     * https://github.com/rango-exchange/rango-client/pull/630/files#r1518846728
+     */
+    widgetContext.onConnectWallet(setLastConnectedWalletWithNetwork);
+    widgetContext.onDisconnectWallet((walletType) => {
+      setDisconnectedWallet(walletType);
+      if (
+        walletType === splitWalletNetwork(lastConnectedWalletWithNetwork)?.[0]
+      ) {
+        setLastConnectedWalletWithNetwork('');
+      }
+    });
+
+    void fetchApiConfig().catch(console.log);
+
+    return tabManager.destroy;
+  }, []);
+}

package/src/hooks/useScreenDetect.ts

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react';
+
+/*
+ * mobile: screen <= 480
+ * tablet: screen > 480 and screen <= 768
+ * notebook: screen > 768 & screen <= 1024
+ * large: screen > 1024 & screen <= 1200
+ * extra large: screen > 1200
+ */
+
+const MIN_TABLET_WIDTH = 480;
+const MIN_NOTEBOOK_WIDTH = 768;
+const MIN_LARGE_SCREEN_WIDTH = 1024;
+const MIN_EXTRA_LARGE_SCREEN_WIDTH = 1200;
+
+const useScreenDetect = () => {
+  const [isMobile, setIsMobile] = useState(false);
+  const [isTablet, setIsTablet] = useState(false);
+  const [isNotebook, setIsNotebook] = useState(false);
+  const [isLargeScreen, setIsLargeScreen] = useState(false);
+  const [isExtraLargeScreen, setIsExtraLargeScreen] = useState(false);
+
+  const handleResize = () => {
+    setIsMobile(window.innerWidth <= MIN_TABLET_WIDTH);
+    setIsTablet(
+      window.innerWidth > MIN_TABLET_WIDTH &&
+        window.innerWidth <= MIN_NOTEBOOK_WIDTH
+    );
+    setIsNotebook(
+      window.innerWidth > MIN_NOTEBOOK_WIDTH &&
+        window.innerWidth <= MIN_LARGE_SCREEN_WIDTH
+    );
+    setIsLargeScreen(
+      window.innerWidth > MIN_LARGE_SCREEN_WIDTH &&
+        window.innerWidth <= MIN_EXTRA_LARGE_SCREEN_WIDTH
+    );
+    setIsExtraLargeScreen(window.innerWidth > MIN_EXTRA_LARGE_SCREEN_WIDTH);
+  };
+
+  useEffect(() => {
+    handleResize(); // Initial check
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return { isMobile, isTablet, isNotebook, isLargeScreen, isExtraLargeScreen };
+};
+
+export default useScreenDetect;

package/src/hooks/useSwapInput.ts

@@ -46,7 +46,11 @@ export function useSwapInput({
   refetchQuote,
 }: UseSwapInputProps): UseSwapInput {
   const { fetch: fetchQuote, cancelFetch } = useFetchAllQuotes();
-  const { enableNewLiquiditySources, features } = useAppStore().config;
+  const {
+    excludeLiquiditySources: configExcludeLiquiditySources,
+    features,
+    enableCentralizedSwappers,
+  } = useAppStore().config;
   const connectedWallets = useWalletsStore.use.connectedWallets();
 
   const tokens = useAppStore().tokens();
@@ -118,6 +122,7 @@ export function useSwapInput({
         affiliateRef,
         affiliatePercent,
         affiliateWallets,
+        enableCentralizedSwappers,
       });
       if (isFeatureEnabled('experimentalRoute', features)) {
         requestBody.experimental = true;
@@ -223,7 +228,7 @@ export function useSwapInput({
     toToken?.blockchain,
     shouldSkipRequest,
     liquiditySources?.length,
-    enableNewLiquiditySources,
+    configExcludeLiquiditySources,
     disabledLiquiditySources.length,
     userSlippage,
     affiliateRef,

package/src/hooks/useTheme.ts

@@ -21,12 +21,11 @@ export function useTheme(props: WidgetTheme) {
     fontFamily = DEFAULT_FONT_FAMILY,
     borderRadius = DEFAULT_PRIMARY_RADIUS,
     secondaryBorderRadius = DEFAULT_SECONDARY_RADIUS,
-    mode = 'auto',
   } = props;
 
   const [OSTheme, setOSTheme] = useState('light');
 
-  const { setTheme, theme } = useAppStore();
+  const { theme } = useAppStore();
 
   const { dark, light } = customizedThemeTokens(colors);
 
@@ -81,12 +80,6 @@ export function useTheme(props: WidgetTheme) {
     };
   }, []);
 
-  useEffect(() => {
-    if (mode !== 'auto') {
-      setTheme(mode);
-    }
-  }, [mode]);
-
   const getActiveTheme = () => {
     const lightClassNames = lightThemeClasses.join(' ');
     const darkClassNames = darkThemeClasses.join(' ');

package/src/hooks/useWalletList.ts

@@ -109,6 +109,18 @@ export function useWalletList(params: Params) {
    * but we have ethereum injected
    */
   const shouldShowDefaultInjectedWallet = (wallets: WalletInfo[]) => {
+    // don't show default injected wallet when it's not installed
+    const defaultWallet = wallets.find(
+      (wallet) => wallet.type === WalletTypes.DEFAULT
+    );
+    if (!defaultWallet || defaultWallet.state === WalletState.NOT_INSTALLED) {
+      return false;
+    }
+
+    /*
+     * if we have another evm wallet installed (except wallet connect),
+     * there is no need to show default injected wallet anymore
+     */
     const isEvmWalletInstalledExceptDefault = wallets.filter(
       (wallet) =>
         wallet.state != WalletState.NOT_INSTALLED &&

package/src/pages/ConfirmSwapPage.tsx

@@ -87,6 +87,7 @@ export function ConfirmSwapPage() {
   const { connectedWallets } = useWalletsStore();
   const showWalletsOnInit = !quoteWalletsConfirmed;
   const [showWallets, setShowWallets] = useState(false);
+  const [isConfirming, setIsConfirming] = useState(false);
   const { isActiveTab } = useUiStore();
   const disabledLiquiditySources = useAppStore().getDisabledLiquiditySources();
   const prevDisabledLiquiditySources = useRef(disabledLiquiditySources);
@@ -137,7 +138,9 @@ export function ConfirmSwapPage() {
   };
 
   const onConfirm = async () => {
+    setIsConfirming(true);
     await addNewSwap();
+    setIsConfirming(false);
   };
 
   const onStartConfirmSwap = async () => {
@@ -326,7 +329,7 @@ export function ConfirmSwapPage() {
               type="primary"
               size="large"
               fullWidth
-              loading={fetchingConfirmationQuote}
+              loading={fetchingConfirmationQuote || isConfirming}
               disabled={!!confirmSwapResult.error || !isActiveTab}
               onClick={onStartConfirmSwap}>
               {i18n.t('Start Swap')}
@@ -336,7 +339,8 @@ export function ConfirmSwapPage() {
             variant="contained"
             type="primary"
             size="large"
-            loading={fetchingConfirmationQuote}
+            loading={fetchingConfirmationQuote || isConfirming}
+            disabled={!isActiveTab}
             onClick={setShowWallets.bind(null, true)}>
             <WalletIcon size={24} />
           </IconButton>
@@ -371,14 +375,19 @@ export function ConfirmSwapPage() {
         </div>
         <Divider size="12" />
 
-        {joinList(alerts, <Divider size={10} />)}
+        {joinList(
+          alerts.map((alert, index) => ({
+            element: alert,
+            key: `alert-${index}`,
+          })),
+          <Divider size={10} />
+        )}
         {alerts.length > 0 ? <Divider size={10} /> : null}
 
         <QuoteInfo
           quote={selectedQuote}
           type="swap-preview"
-          expanded={true}
-          selected
+          expanded
           tagHidden
           error={confirmSwapResult.error}
           loading={fetchingConfirmationQuote}