@rango-dev/widget-embedded 0.23.1-next.24 → 0.23.1-next.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.23.1-next.24",
+  "version": "0.23.1-next.25",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",

package/src/components/AppRouter.tsx

@@ -1,39 +1,11 @@
-import type { WalletType } from '@rango-dev/wallets-shared';
 import type { PropsWithChildren } from 'react';
 
-import { useQueueManager } from '@rango-dev/queue-manager-rango-preset';
-import { useWallets } from '@rango-dev/wallets-react';
-import { isEvmBlockchain } from 'rango-types';
 import React, { Fragment } from 'react';
 import { MemoryRouter, useInRouterContext } from 'react-router';
 
-import { useForceAutoConnect } from '../hooks/useForceAutoConnect';
-import { useAppStore } from '../store/AppStore';
-
-export function AppRouter({
-  children,
-  ...props
-}: PropsWithChildren & {
-  lastConnectedWallet: string;
-  disconnectedWallet: WalletType | undefined;
-  clearDisconnectedWallet: () => void;
-}) {
+export function AppRouter({ children }: PropsWithChildren) {
   const isRouterInContext = useInRouterContext();
   const Router = isRouterInContext ? Fragment : MemoryRouter;
-  const blockchains = useAppStore().blockchains();
-  const { canSwitchNetworkTo } = useWallets();
-
-  useForceAutoConnect();
-
-  const evmChains = blockchains.filter(isEvmBlockchain);
-
-  useQueueManager({
-    lastConnectedWallet: props.lastConnectedWallet,
-    clearDisconnectedWallet: props.clearDisconnectedWallet,
-    disconnectedWallet: props.disconnectedWallet,
-    evmChains,
-    canSwitchNetworkTo,
-  });
 
   return <Router>{children}</Router>;
 }

package/src/containers/App/App.tsx

@@ -1,48 +1,27 @@
-import type { WalletType } from '@rango-dev/wallets-shared';
-
 import { I18nManager } from '@rango-dev/ui';
-import React, { useContext, useEffect, useState } from 'react';
+import React from 'react';
 
 import { AppRouter } from '../../components/AppRouter';
 import { AppRoutes } from '../../components/AppRoutes';
 import { WidgetEvents } from '../../components/WidgetEvents';
-import { globalFont } from '../../globalStyles';
-import { useFetchApiConfig } from '../../hooks/useFetchApiConfig';
+import { useBootstrap } from '../../hooks/useBootstrap';
 import { useLanguage } from '../../hooks/useLanguage';
 import { useTheme } from '../../hooks/useTheme';
 import { useAppStore } from '../../store/AppStore';
-import { useNotificationStore } from '../../store/notification';
-import { WidgetContext } from '../Wallets';
 
 import { MainContainer } from './App.styles';
 
 export function Main() {
-  globalFont();
-
+  useBootstrap();
   const { config } = useAppStore();
   const { activeTheme } = useTheme(config?.theme || {});
   const { activeLanguage } = useLanguage();
-  const [lastConnectedWalletWithNetwork, setLastConnectedWalletWithNetwork] =
-    useState<string>('');
-  const [disconnectedWallet, setDisconnectedWallet] = useState<WalletType>();
-  const widgetContext = useContext(WidgetContext);
-  const { fetchApiConfig } = useFetchApiConfig();
-  useEffect(() => {
-    void useNotificationStore.persist.rehydrate();
-    widgetContext.onConnectWallet(setLastConnectedWalletWithNetwork);
-    void fetchApiConfig().catch(console.log);
-  }, []);
 
   return (
     <I18nManager language={activeLanguage}>
       <MainContainer id="swap-container" className={activeTheme()}>
         <WidgetEvents />
-        <AppRouter
-          lastConnectedWallet={lastConnectedWalletWithNetwork}
-          disconnectedWallet={disconnectedWallet}
-          clearDisconnectedWallet={() => {
-            setDisconnectedWallet(undefined);
-          }}>
+        <AppRouter>
           <AppRoutes />
         </AppRouter>
       </MainContainer>

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,19 +1,13 @@
 import type { WidgetProps } from './Widget.types';
 import type { PropsWithChildren } from 'react';
 
-import React, { useEffect } from 'react';
+import React from 'react';
 
 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;
-  }, []);
-
   if (!props.config?.externalWallets) {
     return (
       <WidgetProvider config={props.config ?? DEFAULT_CONFIG}>

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;
+  }, []);
+}