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

package/dist/pages/ConfirmSwapPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAmD5E,wBAAgB,eAAe,sBAmU9B"}
+{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAmD5E,wBAAgB,eAAe,sBAuU9B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.23.1-next.24",
+  "version": "0.23.1-next.26",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -21,6 +21,7 @@
   "dependencies": {
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
+    "@rango-dev/logging-core": "^0.1.1-next.0",
     "@rango-dev/provider-all": "^0.28.1-next.2",
     "@rango-dev/queue-manager-core": "^0.26.0",
     "@rango-dev/queue-manager-rango-preset": "^0.28.1-next.3",

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/components/SwapDetailsModal/SwapDetailsModal.WalletState.tsx

@@ -1,5 +1,6 @@
 import type { WalletStateContentProps } from './SwapDetailsModal.types';
 
+import { debug } from '@rango-dev/logging-core';
 import { MessageBox, Wallet } from '@rango-dev/ui';
 import { useWallets } from '@rango-dev/wallets-react';
 import React from 'react';
@@ -39,7 +40,10 @@ export const WalletStateContent = (props: WalletStateContentProps) => {
             state={walletState}
             link={walletInfo.installLink}
             disabled={walletButtonDisabled}
-            onClick={async () => connect(walletType)}
+            // TODO we need to show an error modal when user reject the connection
+            onClick={async () =>
+              connect(walletType).catch((error) => debug(error))
+            }
           />
         </WalletContainer>
       )}

package/src/constants/index.ts

@@ -2,7 +2,7 @@ import { UI_ID } from '@rango-dev/ui';
 
 export const RANGO_PUBLIC_API_KEY = 'c6381a79-2817-4602-83bf-6a641a409e32';
 export const DEFAULT_BASE_URL = 'https://api.rango.exchange';
-export const SCANNER_BASE_URL = 'https://scan.rango.exchange';
+export const SCANNER_BASE_URL = 'https://explorer.rango.exchange';
 
 export const WIDGET_UI_ID = {
   SWAP_BOX_ID: 'rango-swap-box',

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

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>