@rango-dev/widget-embedded 0.36.1-next.7 → 0.37.0

package/src/containers/WidgetInfo/WidgetInfo.tsx

@@ -9,6 +9,7 @@ import { useAppStore } from '../../store/AppStore';
 import { useNotificationStore } from '../../store/notification';
 import { useQuoteStore } from '../../store/quote';
 import { tabManager, useUiStore } from '../../store/ui';
+import { useWalletsStore } from '../../store/wallets';
 import { calculateWalletUsdValue } from '../../utils/wallets';
 
 import { WidgetHistory } from './WidgetInfo.helpers';
@@ -21,16 +22,13 @@ export function WidgetInfo(props: React.PropsWithChildren) {
   const { manager } = useManager();
   const isActiveTab = useUiStore.use.isActiveTab();
   const retrySwap = useQuoteStore.use.retry();
-  const {
-    findToken,
-    connectedWallets,
-    getBalances,
-    fetchBalances: refetch,
-  } = useAppStore();
+  const { findToken } = useAppStore();
 
   const history = new WidgetHistory(manager, { retrySwap, findToken });
-  const { fetchingWallets: isLoading } = useAppStore();
-  const totalBalance = calculateWalletUsdValue(getBalances());
+  const details = useWalletsStore.use.connectedWallets();
+  const isLoading = useWalletsStore.use.loading();
+  const totalBalance = calculateWalletUsdValue(details);
+  const refetch = useWalletsStore.use.getWalletsDetails();
   const blockchains = useAppStore().blockchains();
   const tokens = useAppStore().tokens();
   const swappers = useAppStore().swappers();
@@ -49,9 +47,9 @@ export function WidgetInfo(props: React.PropsWithChildren) {
     history,
     wallets: {
       isLoading,
-      details: connectedWallets,
+      details,
       totalBalance,
-      refetch: async (accounts) => refetch(accounts),
+      refetch: (accounts) => refetch(accounts, findToken),
     },
     meta: {
       blockchains,

package/src/containers/WidgetInfo/WidgetInfo.types.ts

@@ -1,6 +1,6 @@
 import type { WidgetHistory } from './WidgetInfo.helpers';
 import type { FetchStatus, FindToken } from '../../store/slices/data';
-import type { ConnectedWallet } from '../../store/slices/wallets';
+import type { ConnectedWallet } from '../../store/wallets';
 import type { QuoteInputs, UpdateQuoteInputs, Wallet } from '../../types';
 import type { Notification } from '../../types/notification';
 import type { BlockchainMeta, SwapperMeta, Token } from 'rango-sdk';
@@ -13,7 +13,7 @@ export interface WidgetInfoContextInterface {
     details: ConnectedWallet[];
     totalBalance: string;
     isLoading: boolean;
-    refetch: (accounts: Wallet[]) => void;
+    refetch: (accounts: Wallet[], tokens: Token[]) => void;
   };
   meta: {
     blockchains: BlockchainMeta[];

package/src/hooks/useFetchCustomToken.ts

@@ -103,11 +103,6 @@ export function useFetchCustomToken(): UseFetchCustomToken {
 
       return token;
     } catch (error: any) {
-      if (error?.code === 'ERR_BAD_REQUEST') {
-        const errorMessage = produceErrorMessage('not-found', blockchain);
-        setError(errorMessage);
-        return undefined;
-      }
       setError(undefined);
       throw new Error(error.message);
     } finally {

package/src/hooks/useObserveBalanceChanges/index.ts

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

package/src/hooks/useObserveBalanceChanges/useObserveBalanceChanges.ts

@@ -0,0 +1,68 @@
+import type { WalletEventData } from '../../types';
+
+import { useWallets } from '@rango-dev/wallets-react';
+import { useEffect, useRef, useState } from 'react';
+
+import { widgetEventEmitter } from '../../services/eventEmitter';
+import { useWalletsStore } from '../../store/wallets';
+import { WalletEventTypes, WidgetEvents } from '../../types';
+
+// A hook to listen for and detect changes in balances on a specific blockchain.
+export function useObserveBalanceChanges(selectedBlockchain?: string) {
+  const { connectedWallets } = useWalletsStore();
+  const { getWalletInfo } = useWallets();
+  const prevFetchingBalanceWallets = useRef<string[]>([]);
+  // The "balanceKey" will be updated and incremented after each change in the balance for a blockchain.
+  const [balanceKey, setBalanceKey] = useState(0);
+
+  useEffect(() => {
+    const handleWalletEvent = (event: WalletEventData) => {
+      if (event.type === WalletEventTypes.DISCONNECT) {
+        const walletInfo = getWalletInfo(event.payload.walletType);
+        const blockchainSupported = walletInfo.supportedChains.some(
+          (chain) => chain.name === selectedBlockchain
+        );
+
+        if (blockchainSupported) {
+          setBalanceKey((prev) => prev + 1);
+        }
+      }
+    };
+
+    widgetEventEmitter.on(WidgetEvents.WalletEvent, handleWalletEvent);
+
+    if (!selectedBlockchain) {
+      return setBalanceKey((prev) => prev + 1);
+    }
+
+    const supportedWallets = connectedWallets.filter(
+      (wallet) => wallet.chain === selectedBlockchain
+    );
+
+    supportedWallets.forEach((wallet) => {
+      const { walletType } = wallet;
+      const walletIsAlreadyFetching =
+        prevFetchingBalanceWallets.current.includes(walletType);
+
+      /**
+       * Watching for changes in "wallet.balances.length" is not accurate.
+       * Additionally, checking the equality of previous and current balances for a specific blockchain is resource-intensive, so we avoid these methods.
+       */
+      if (wallet.loading && !walletIsAlreadyFetching) {
+        prevFetchingBalanceWallets.current =
+          prevFetchingBalanceWallets.current.concat(walletType);
+      } else if (!wallet.loading && walletIsAlreadyFetching) {
+        prevFetchingBalanceWallets.current =
+          prevFetchingBalanceWallets.current.filter(
+            (prevWallet) => prevWallet !== walletType
+          );
+        setBalanceKey((prev) => prev + 1);
+      }
+    });
+
+    return () =>
+      widgetEventEmitter.off(WidgetEvents.WalletEvent, handleWalletEvent);
+  }, [connectedWallets, selectedBlockchain, getWalletInfo]);
+
+  return { balanceKey };
+}

package/src/hooks/useStatefulConnect/useStatefulConnect.ts

@@ -1,15 +1,15 @@
 import type { HandleConnectOptions, Result } from './useStatefulConnect.types';
 import type { WalletInfoWithExtra } from '../../types';
-import type { ExtendedModalWalletInfo } from '../../utils/wallets';
-import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
-import type { NamespaceData, WalletType } from '@rango-dev/wallets-shared';
+import type {
+  Namespace,
+  NamespaceData,
+  WalletType,
+} from '@rango-dev/wallets-shared';
 
 import { WalletState } from '@rango-dev/ui';
 import { useWallets } from '@rango-dev/wallets-react';
 import { useReducer } from 'react';
 
-import { convertCommonNamespacesKeysToLegacyNamespace } from '../../utils/hub';
-
 import {
   isStateOnDerivationPathStep,
   isStateOnNamespace,
@@ -61,11 +61,7 @@ export function useStatefulConnect(): UseStatefulConnect {
     });
 
     try {
-      const legacyNamespacesInput = namespaces?.map((namespaceInput) => ({
-        ...namespaceInput,
-        network: undefined,
-      }));
-      await connect(type, legacyNamespacesInput);
+      await connect(type, undefined, namespaces);
 
       return { status: ResultStatus.Connected };
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -79,7 +75,7 @@ export function useStatefulConnect(): UseStatefulConnect {
   };
 
   const handleConnect = async (
-    wallet: ExtendedModalWalletInfo,
+    wallet: WalletInfoWithExtra,
     options?: HandleConnectOptions
   ): Promise<{
     status: ResultStatus;
@@ -87,37 +83,6 @@ export function useStatefulConnect(): UseStatefulConnect {
     const isDisconnected = wallet.state === WalletState.DISCONNECTED;
 
     if (isDisconnected) {
-      // Legacy and hub have different structure to check wether we need to show namespace or not.
-
-      // Hub
-      const isHub = !!wallet.isHub;
-      if (isHub) {
-        const detachedInstances = wallet.properties?.find(
-          (item) => item.name === 'detached'
-        );
-        const needsNamespace =
-          detachedInstances && wallet.state !== 'connected';
-
-        if (needsNamespace) {
-          const availableNamespaces =
-            convertCommonNamespacesKeysToLegacyNamespace(
-              detachedInstances.value
-            );
-
-          dispatch({
-            type: 'needsNamespace',
-            payload: {
-              providerType: wallet.type,
-              providerImage: wallet.image,
-              availableNamespaces,
-              singleNamespace: false,
-            },
-          });
-          return { status: ResultStatus.Namespace };
-        }
-      }
-
-      // Legacy
       if (!wallet.namespaces) {
         return await runConnect(wallet.type, undefined, options);
       }

package/src/hooks/useStatefulConnect/useStatefulConnect.types.ts

@@ -1,4 +1,4 @@
-import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
+import type { Namespace } from '@rango-dev/wallets-shared';
 
 export interface HandleConnectOptions {
   // To have a switch between connect and disconnect when user is clicking on a button, this option can be helpful.

package/src/hooks/useSubscribeToWidgetEvents/useSubscribeToWidgetEvents.ts

@@ -12,10 +12,13 @@ import { useEffect } from 'react';
 import { eventEmitter } from '../../services/eventEmitter';
 import { useAppStore } from '../../store/AppStore';
 import { useNotificationStore } from '../../store/notification';
+import { useWalletsStore } from '../../store/wallets';
 
 export function useSubscribeToWidgetEvents() {
+  const connectedWallets = useWalletsStore.use.connectedWallets();
+  const getWalletsDetails = useWalletsStore.use.getWalletsDetails();
   const setNotification = useNotificationStore.use.setNotification();
-  const { connectedWallets, fetchBalances } = useAppStore();
+  const { findToken } = useAppStore();
 
   useEffect(() => {
     const handleStepEvent = (widgetEvent: StepEventData) => {
@@ -36,12 +39,8 @@ export function useSubscribeToWidgetEvents() {
             (wallet) => wallet.chain === step?.toBlockchain
           );
 
-        if (fromAccount) {
-          void fetchBalances([fromAccount]);
-        }
-        if (toAccount) {
-          void fetchBalances([toAccount]);
-        }
+        fromAccount && getWalletsDetails([fromAccount], findToken);
+        toAccount && getWalletsDetails([toAccount], findToken);
       }
 
       setNotification(event, route);

package/src/hooks/useSwapInput.ts

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
+import { useWalletsStore } from '../store/wallets';
 import { QuoteErrorType } from '../types';
 import { debounce } from '../utils/common';
 import { isPositiveNumber } from '../utils/numbers';
@@ -49,7 +50,7 @@ export function useSwapInput({
   const { fetch: fetchQuote, cancelFetch } = useFetchAllQuotes();
   const { excludeLiquiditySources: configExcludeLiquiditySources, routing } =
     useAppStore().config;
-  const { connectedWallets } = useAppStore();
+  const connectedWallets = useWalletsStore.use.connectedWallets();
 
   const {
     fromToken,

package/src/hooks/useWalletList.ts

@@ -12,6 +12,7 @@ import {
 import { useCallback, useEffect } from 'react';
 
 import { useAppStore } from '../store/AppStore';
+import { useWalletsStore } from '../store/wallets';
 import { configWalletsToWalletName } from '../utils/providers';
 import {
   hashWalletsState,
@@ -42,8 +43,9 @@ interface API {
  */
 export function useWalletList(params?: Params): API {
   const { chain } = params || {};
-  const { config, connectedWallets } = useAppStore();
+  const { config } = useAppStore();
   const { state, getWalletInfo } = useWallets();
+  const { connectedWallets } = useWalletsStore();
   const blockchains = useAppStore().blockchains();
   const { handleDisconnect } = useStatefulConnect();
 

package/src/hooks/useWalletProviders/useWalletProviders.ts

@@ -1,9 +1,10 @@
 import type { WidgetConfig } from '../../types';
 import type { ProvidersOptions } from '../../utils/providers';
+import type { ProviderInterface } from '@rango-dev/wallets-react';
 
 import { useEffect } from 'react';
 
-import { useAppStore } from '../../store/AppStore';
+import { useWalletsStore } from '../../store/wallets';
 import { matchAndGenerateProviders } from '../../utils/providers';
 
 import { hashProviders } from './useWalletProviders.helpers';
@@ -12,8 +13,11 @@ export function useWalletProviders(
   providers: WidgetConfig['wallets'],
   options?: ProvidersOptions
 ) {
-  const { clearConnectedWallet } = useAppStore();
-  let generateProviders = matchAndGenerateProviders(providers, options);
+  const clearConnectedWallet = useWalletsStore.use.clearConnectedWallet();
+  let generateProviders: ProviderInterface[] = matchAndGenerateProviders(
+    providers,
+    options
+  );
 
   useEffect(() => {
     clearConnectedWallet();

package/src/index.ts

@@ -1,5 +1,5 @@
 import type { WidgetProps } from './containers/Widget';
-import type { ConnectedWallet } from './store/slices/wallets';
+import type { ConnectedWallet } from './store/wallets';
 import type {
   BlockchainAndTokenConfig,
   QuoteEventData,

package/src/pages/Home.tsx

@@ -19,6 +19,7 @@ import { useSwapInput } from '../hooks/useSwapInput';
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 import { useUiStore } from '../store/ui';
+import { useWalletsStore } from '../store/wallets';
 import { UiEventTypes } from '../types';
 import { isVariantExpandable } from '../utils/configs';
 import { emitPreventableEvent } from '../utils/events';
@@ -54,12 +55,9 @@ export function Home() {
   const { isLargeScreen, isExtraLargeScreen } = useScreenDetect();
 
   const { fetch: fetchQuote, loading } = useSwapInput({ refetchQuote });
-  const {
-    config,
-    fetchStatus: fetchMetaStatus,
-    connectedWallets,
-  } = useAppStore();
+  const { config, fetchStatus: fetchMetaStatus } = useAppStore();
 
+  const { connectedWallets } = useWalletsStore();
   const { isActiveTab } = useUiStore();
   const [showQuoteWarningModal, setShowQuoteWarningModal] = useState(false);
 

package/src/pages/SelectSwapItemsPage.tsx

@@ -13,6 +13,7 @@ import { navigationRoutes } from '../constants/navigationRoutes';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
+import { useWalletsStore } from '../store/wallets';
 
 interface PropTypes {
   type: 'source' | 'destination';
@@ -30,7 +31,7 @@ export function SelectSwapItemsPage(props: PropTypes) {
     setFromBlockchain,
     setToBlockchain,
   } = useQuoteStore();
-  const { getBalanceFor } = useAppStore();
+  const getBalanceFor = useWalletsStore.use.getBalanceFor();
   const [searchedFor, setSearchedFor] = useState<string>('');
 
   const selectedBlockchain = type === 'source' ? fromBlockchain : toBlockchain;

package/src/store/app.ts

@@ -1,4 +1,6 @@
-import type { AppStoreState } from './slices/types';
+import type { ConfigSlice } from './slices/config';
+import type { DataSlice } from './slices/data';
+import type { SettingsSlice } from './slices/settings';
 import type { WidgetConfig } from '../types';
 import type { StateCreator } from 'zustand';
 
@@ -8,7 +10,6 @@ import { persist } from 'zustand/middleware';
 import { createConfigSlice } from './slices/config';
 import { createDataSlice } from './slices/data';
 import { createSettingsSlice } from './slices/settings';
-import { createWalletsSlice } from './slices/wallets';
 
 export type StateCreatorWithInitialData<
   T extends Partial<WidgetConfig>,
@@ -19,13 +20,12 @@ export type StateCreatorWithInitialData<
   ...rest: Parameters<StateCreator<R, [], [], V>>
 ) => ReturnType<StateCreator<R, [], [], V>>;
 
-export type { AppStoreState };
+export type AppStoreState = DataSlice & ConfigSlice & SettingsSlice;
 
 export function createAppStore(initialData?: WidgetConfig) {
   return create<AppStoreState>()(
     persist(
       (...a) => ({
-        ...createWalletsSlice(...a),
         ...createDataSlice(...a),
         ...createSettingsSlice(...a),
         ...createConfigSlice(initialData, ...a),

package/src/store/slices/config.ts

@@ -21,9 +21,6 @@ export const DEFAULT_CONFIG: WidgetConfig = {
     manifestUrl:
       'https://raw.githubusercontent.com/rango-exchange/rango-types/main/assets/manifests/tonconnect-manifest.json',
   },
-  features: {
-    experimentalWallet: 'enabled',
-  },
 };
 
 interface IframeConfigs {

package/src/store/slices/data.ts

@@ -348,9 +348,8 @@ export const createDataSlice: StateCreator<
         {};
       const tokens: Token[] = [];
       const popularTokens: Token[] = response.popularTokens;
-      const swappers: SwapperMeta[] = response.swappers.filter(
-        (swapper) => swapper.enabled
-      );
+      const swappers: SwapperMeta[] = response.swappers;
+
       const blockchainsWithAtLeastOneToken = new Set();
 
       response.tokens.forEach((token) => {