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

package/src/store/wallets.ts

@@ -6,7 +6,9 @@ import type { Token } from 'rango-sdk';
 import { create } from 'zustand';
 import { subscribeWithSelector } from 'zustand/middleware';
 
+import { eventEmitter } from '../services/eventEmitter';
 import { httpService } from '../services/httpService';
+import { WalletEventTypes, WidgetEvents } from '../types';
 import { createTokenHash } from '../utils/meta';
 import {
   isAccountAndWalletMatched,
@@ -54,156 +56,195 @@ interface WalletsStore {
 
 export const useWalletsStore = createSelectors(
   create<WalletsStore>()(
-    subscribeWithSelector((set, get) => ({
-      connectedWallets: [],
-      balances: {},
-      loading: false,
-      connectWallet: (accounts, findToken) => {
-        const getWalletsDetails = get().getWalletsDetails;
-        set((state) => ({
-          loading: true,
-          connectedWallets: state.connectedWallets
-            .filter((wallet) => wallet.walletType !== accounts[0].walletType)
-            .concat(
-              accounts.map((account) => {
-                const shouldMarkWalletAsSelected = !state.connectedWallets.some(
-                  (connectedWallet) =>
-                    connectedWallet.chain === account.chain &&
-                    connectedWallet.selected &&
-                    /**
-                     * Sometimes, the connect function can be called multiple times for a particular wallet type when using the auto-connect feature.
-                     * This check is there to make sure the chosen wallet doesn't end up unselected.
-                     */
-                    connectedWallet.walletType !== account.walletType
+    subscribeWithSelector((set, get) => {
+      return {
+        connectedWallets: [],
+        balances: {},
+        loading: false,
+        connectWallet: (accounts, findToken) => {
+          eventEmitter.emit(WidgetEvents.WalletEvent, {
+            type: WalletEventTypes.CONNECT,
+            payload: { walletType: accounts[0].walletType, accounts },
+          });
+
+          const getWalletsDetails = get().getWalletsDetails;
+          set((state) => ({
+            loading: true,
+            connectedWallets: state.connectedWallets
+              .filter((wallet) => wallet.walletType !== accounts[0].walletType)
+              .concat(
+                accounts.map((account) => {
+                  const shouldMarkWalletAsSelected =
+                    !state.connectedWallets.some(
+                      (connectedWallet) =>
+                        connectedWallet.chain === account.chain &&
+                        connectedWallet.selected &&
+                        /**
+                         * Sometimes, the connect function can be called multiple times for a particular wallet type when using the auto-connect feature.
+                         * This check is there to make sure the chosen wallet doesn't end up unselected.
+                         */
+                        connectedWallet.walletType !== account.walletType
+                    );
+                  return {
+                    balances: [],
+                    address: account.address,
+                    chain: account.chain,
+                    explorerUrl: null,
+                    walletType: account.walletType,
+                    selected: shouldMarkWalletAsSelected,
+                    loading: true,
+                    error: false,
+                  };
+                })
+              ),
+          }));
+          getWalletsDetails(accounts, findToken);
+        },
+        disconnectWallet: (walletType) => {
+          set((state) => {
+            if (
+              state.connectedWallets.find(
+                (wallet) => wallet.walletType === walletType
+              )
+            ) {
+              eventEmitter.emit(WidgetEvents.WalletEvent, {
+                type: WalletEventTypes.DISCONNECT,
+                payload: { walletType },
+              });
+            }
+
+            const selectedWallets = state.connectedWallets
+              .filter(
+                (connectedWallet) =>
+                  connectedWallet.selected &&
+                  connectedWallet.walletType !== walletType
+              )
+              .map((selectedWallet) => selectedWallet.chain);
+
+            const connectedWallets = state.connectedWallets
+              .filter(
+                (connectedWallet) => connectedWallet.walletType !== walletType
+              )
+              .map((connectedWallet) => {
+                const anyWalletSelectedForBlockchain = selectedWallets.includes(
+                  connectedWallet.chain
                 );
-                return {
-                  balances: [],
-                  address: account.address,
-                  chain: account.chain,
-                  explorerUrl: null,
-                  walletType: account.walletType,
-                  selected: shouldMarkWalletAsSelected,
-                  loading: true,
-                  error: false,
-                };
-              })
-            ),
-        }));
-        getWalletsDetails(accounts, findToken);
-      },
-      disconnectWallet: (walletType) => {
-        set((state) => {
-          const selectedWallets = state.connectedWallets
-            .filter(
-              (connectedWallet) =>
-                connectedWallet.selected &&
-                connectedWallet.walletType !== walletType
-            )
-            .map((selectedWallet) => selectedWallet.chain);
-
-          const connectedWallets = state.connectedWallets
-            .filter(
-              (connectedWallet) => connectedWallet.walletType !== walletType
-            )
-            .map((connectedWallet) => {
-              const anyWalletSelectedForBlockchain = selectedWallets.includes(
-                connectedWallet.chain
+                if (anyWalletSelectedForBlockchain) {
+                  return connectedWallet;
+                }
+                selectedWallets.push(connectedWallet.chain);
+                return { ...connectedWallet, selected: true };
+              });
+
+            const balances = makeTokensBalance(connectedWallets);
+
+            return {
+              balances,
+              connectedWallets,
+            };
+          });
+        },
+        selectWallets: (wallets) =>
+          set((state) => ({
+            connectedWallets: state.connectedWallets.map((connectedWallet) => {
+              const walletSelected = !!wallets.find(
+                (wallet) =>
+                  wallet.chain === connectedWallet.chain &&
+                  wallet.walletType !== connectedWallet.walletType &&
+                  connectedWallet.selected
+              );
+              const walletNotSelected = !!wallets.find(
+                (wallet) =>
+                  wallet.chain === connectedWallet.chain &&
+                  wallet.walletType === connectedWallet.walletType &&
+                  !connectedWallet.selected
               );
-              if (anyWalletSelectedForBlockchain) {
-                return connectedWallet;
+              if (walletSelected) {
+                return { ...connectedWallet, selected: false };
+              } else if (walletNotSelected) {
+                return { ...connectedWallet, selected: true };
               }
-              selectedWallets.push(connectedWallet.chain);
-              return { ...connectedWallet, selected: true };
-            });
-
-          const balances = makeTokensBalance(connectedWallets);
-
-          return {
-            balances,
-            connectedWallets,
-          };
-        });
-      },
-      selectWallets: (wallets) =>
-        set((state) => ({
-          connectedWallets: state.connectedWallets.map((connectedWallet) => {
-            const walletSelected = !!wallets.find(
-              (wallet) =>
-                wallet.chain === connectedWallet.chain &&
-                wallet.walletType !== connectedWallet.walletType &&
-                connectedWallet.selected
-            );
-            const walletNotSelected = !!wallets.find(
-              (wallet) =>
-                wallet.chain === connectedWallet.chain &&
-                wallet.walletType === connectedWallet.walletType &&
-                !connectedWallet.selected
-            );
-            if (walletSelected) {
-              return { ...connectedWallet, selected: false };
-            } else if (walletNotSelected) {
-              return { ...connectedWallet, selected: true };
-            }
 
-            return connectedWallet;
-          }),
-        })),
-      clearConnectedWallet: () =>
-        set(() => ({
-          connectedWallets: [],
-          selectedWallets: [],
-        })),
-      getWalletsDetails: async (accounts, findToken, shouldRetry = true) => {
-        const getWalletsDetails = get().getWalletsDetails;
-        set((state) => ({
-          loading: true,
-          connectedWallets: state.connectedWallets.map((wallet) => {
-            return accounts.find((account) =>
-              isAccountAndWalletMatched(account, wallet)
-            )
-              ? { ...wallet, loading: true }
-              : wallet;
-          }),
-        }));
-        try {
-          const data = accounts.map(({ address, chain }) => ({
-            address,
-            blockchain: chain,
+              return connectedWallet;
+            }),
+          })),
+        clearConnectedWallet: () =>
+          set(() => ({
+            connectedWallets: [],
+            selectedWallets: [],
+          })),
+        getWalletsDetails: async (accounts, findToken, shouldRetry = true) => {
+          const getWalletsDetails = get().getWalletsDetails;
+          set((state) => ({
+            loading: true,
+            connectedWallets: state.connectedWallets.map((wallet) => {
+              return accounts.find((account) =>
+                isAccountAndWalletMatched(account, wallet)
+              )
+                ? { ...wallet, loading: true }
+                : wallet;
+            }),
           }));
-          const response = await httpService().getWalletsDetails(data);
-          const retrievedBalance = response.wallets;
-          if (retrievedBalance) {
-            set((state) => {
-              const connectedWallets = state.connectedWallets.map(
-                (connectedWallet) => {
-                  const matchedAccount = accounts.find((account) =>
-                    isAccountAndWalletMatched(account, connectedWallet)
-                  );
-                  const retrievedBalanceAccount = retrievedBalance.find(
-                    (balance) =>
-                      balance.address === connectedWallet.address &&
-                      balance.blockChain === connectedWallet.chain
-                  );
-                  if (
-                    retrievedBalanceAccount?.failed &&
-                    matchedAccount &&
-                    shouldRetry
-                  ) {
-                    getWalletsDetails([matchedAccount], findToken, false);
+          try {
+            const data = accounts.map(({ address, chain }) => ({
+              address,
+              blockchain: chain,
+            }));
+            const response = await httpService().getWalletsDetails(data);
+            const retrievedBalance = response.wallets;
+            if (retrievedBalance) {
+              set((state) => {
+                const connectedWallets = state.connectedWallets.map(
+                  (connectedWallet) => {
+                    const matchedAccount = accounts.find((account) =>
+                      isAccountAndWalletMatched(account, connectedWallet)
+                    );
+                    const retrievedBalanceAccount = retrievedBalance.find(
+                      (balance) =>
+                        balance.address === connectedWallet.address &&
+                        balance.blockChain === connectedWallet.chain
+                    );
+                    if (
+                      retrievedBalanceAccount?.failed &&
+                      matchedAccount &&
+                      shouldRetry
+                    ) {
+                      getWalletsDetails([matchedAccount], findToken, false);
+                    }
+                    return matchedAccount && retrievedBalanceAccount
+                      ? {
+                          ...connectedWallet,
+                          explorerUrl: retrievedBalanceAccount.explorerUrl,
+                          balances: makeBalanceFor(
+                            retrievedBalanceAccount,
+                            findToken
+                          ),
+                          loading: false,
+                        }
+                      : connectedWallet;
                   }
-                  return matchedAccount && retrievedBalanceAccount
-                    ? {
-                        ...connectedWallet,
-                        explorerUrl: retrievedBalanceAccount.explorerUrl,
-                        balances: makeBalanceFor(
-                          retrievedBalanceAccount,
-                          findToken
-                        ),
-                        loading: false,
-                      }
-                    : connectedWallet;
-                }
-              );
+                );
+
+                const balances = makeTokensBalance(connectedWallets);
+
+                return {
+                  loading: false,
+                  balances,
+                  connectedWallets,
+                };
+              });
+            } else {
+              throw new Error('Wallet not found');
+            }
+          } catch (error) {
+            set((state) => {
+              const connectedWallets = state.connectedWallets.map((balance) => {
+                return accounts.find((account) =>
+                  isAccountAndWalletMatched(account, balance)
+                )
+                  ? resetConnectedWalletState(balance)
+                  : balance;
+              });
 
               const balances = makeTokensBalance(connectedWallets);
 
@@ -213,35 +254,15 @@ export const useWalletsStore = createSelectors(
                 connectedWallets,
               };
             });
-          } else {
-            throw new Error('Wallet not found');
           }
-        } catch (error) {
-          set((state) => {
-            const connectedWallets = state.connectedWallets.map((balance) => {
-              return accounts.find((account) =>
-                isAccountAndWalletMatched(account, balance)
-              )
-                ? resetConnectedWalletState(balance)
-                : balance;
-            });
-
-            const balances = makeTokensBalance(connectedWallets);
-
-            return {
-              loading: false,
-              balances,
-              connectedWallets,
-            };
-          });
-        }
-      },
-      getBalanceFor: (token) => {
-        const { balances } = get();
-        const tokenHash = createTokenHash(token);
-        const balance = balances[tokenHash];
-        return balance ?? null;
-      },
-    }))
+        },
+        getBalanceFor: (token) => {
+          const { balances } = get();
+          const tokenHash = createTokenHash(token);
+          const balance = balances[tokenHash];
+          return balance ?? null;
+        },
+      };
+    })
   )
 );

package/src/types/config.ts

@@ -145,6 +145,11 @@ export type Features = Partial<
 > &
   Partial<Record<'experimentalRoute', 'disabled' | 'enabled'>>;
 
+export type TrezorManifest = {
+  appUrl: string;
+  email: string;
+};
+
 /**
  * The type WidgetConfig defines the configuration options for a widget, including API key, affiliate
  * reference, amount, blockchain and token configurations, liquidity sources, wallet types, language,
@@ -158,6 +163,8 @@ export type Features = Partial<
  * @property {BlockchainAndTokenConfig} from - The `from` property is an optional property of type
  * `BlockchainAndTokenConfig` that specifies the default blockchain and token from which the user wants to
  * exchange.It can also used to limit source swap blockchains/tokens to some limited ones.
+ * @property {TrezorManifest} trezorManifest - Trezor Connect Manifest requires that you,
+ * as a Trezor Connect integrator,share your e-mail and application url.
  * @property {BlockchainAndTokenConfig} to - The "to" property is an optional property of type
  * "BlockchainAndTokenConfig" that specifies the default blockchain and token to which the user wants to
  * exchange.It can also used to limit destination swap blockchains/tokens to some limited ones.
@@ -203,6 +210,7 @@ export type WidgetConfig = {
   apiUrl?: string;
   title?: string;
   walletConnectProjectId?: string;
+  trezorManifest?: TrezorManifest;
   affiliate?: WidgetAffiliate;
   amount?: number;
   from?: BlockchainAndTokenConfig;
@@ -223,5 +231,6 @@ export type WidgetConfig = {
   // These are likely to change or remove at anytime. Please use with a caution.
   __UNSTABLE_OR_INTERNAL__?: {
     walletConnectListedDesktopWalletLink?: string;
+    autoUpdateSettings?: boolean; // If true, settings will be updated automatically based on the configuration.
   };
 };

package/src/types/event.ts

@@ -0,0 +1,89 @@
+import type { SelectedQuote } from './quote';
+import type { Wallet } from './wallets';
+import type {
+  RouteEventData,
+  StepEventData,
+} from '@rango-dev/queue-manager-rango-preset';
+
+import { WidgetEvents as QueueManagerEvents } from '@rango-dev/queue-manager-rango-preset';
+
+type Account = Wallet;
+
+export enum QuoteEventTypes {
+  QUOTE_INPUT_UPDATE = 'quoteInputUpdate',
+  QUOTE_OUTPUT_UPDATE = 'quoteOutputUpdate',
+}
+
+export enum WalletEventTypes {
+  CONNECT = 'connect',
+  DISCONNECT = 'disconnect',
+}
+
+export type QuoteInputUpdateEventPayload = {
+  fromBlockchain?: string;
+  toBlockchain?: string;
+  fromToken?: { symbol: string; name: string | null; address: string | null };
+  toToken?: { symbol: string; name: string | null; address: string | null };
+  requestAmount?: string;
+};
+
+export type QuoteUpdateEventPayload = Pick<
+  SelectedQuote,
+  'requestAmount' | 'swaps' | 'outputAmount' | 'resultType' | 'tags'
+> | null;
+
+export type ConnectWalletEventPayload = {
+  walletType: string;
+  accounts: Account[];
+};
+
+export type DisconnectWalletEventPayload = {
+  walletType: string;
+};
+
+export type QuoteEventData =
+  | {
+      type: QuoteEventTypes.QUOTE_INPUT_UPDATE;
+      payload: QuoteInputUpdateEventPayload;
+    }
+  | {
+      type: QuoteEventTypes.QUOTE_OUTPUT_UPDATE;
+      payload: QuoteUpdateEventPayload;
+    };
+
+export type WalletEventData =
+  | {
+      type: WalletEventTypes.CONNECT;
+      payload: ConnectWalletEventPayload;
+    }
+  | {
+      type: WalletEventTypes.DISCONNECT;
+      payload: DisconnectWalletEventPayload;
+    };
+
+export enum WidgetEvents {
+  RouteEvent = QueueManagerEvents.RouteEvent,
+  StepEvent = QueueManagerEvents.StepEvent,
+  QuoteEvent = 'quoteEvent',
+  WalletEvent = 'walletEvent',
+}
+
+export type Events = {
+  [WidgetEvents.RouteEvent]: RouteEventData;
+  [WidgetEvents.StepEvent]: StepEventData;
+  [WidgetEvents.QuoteEvent]: QuoteEventData;
+  [WidgetEvents.WalletEvent]: WalletEventData;
+};
+
+declare type EventHandler<T = unknown> = (event: T) => void;
+
+export type WidgetEventEmitter = {
+  on<Key extends WidgetEvents>(
+    type: Key,
+    handler: EventHandler<Events[Key]>
+  ): void;
+  off<Key extends WidgetEvents>(
+    type: Key,
+    handler?: EventHandler<Events[Key]>
+  ): void;
+};

package/src/types/index.ts

@@ -2,3 +2,4 @@ export * from './swap';
 export * from './config';
 export * from './quote';
 export * from './wallets';
+export * from './event';

package/src/types/wallets.ts

@@ -24,7 +24,8 @@ export type TokensBalance = {
   [key: TokenHash]: Balance;
 };
 
-export type WalletInfoWithNamespaces = WalletInfo & {
+export type WalletInfoWithExtra = WalletInfo & {
   namespaces?: Namespace[];
   singleNamespace?: boolean;
+  needsDerivationPath?: boolean;
 };

package/src/utils/common.ts

@@ -1,6 +1,7 @@
+import type { WalletInfoWithExtra } from '../types';
 import type { Token } from 'rango-sdk';
 
-import { BlockchainCategories } from '@rango-dev/ui';
+import { BlockchainCategories, WalletState } from '@rango-dev/ui';
 import { TransactionType } from 'rango-sdk';
 
 import { WIDGET_UI_ID } from '../constants';
@@ -247,3 +248,13 @@ export const getFontUrlByName = (fontName: string) => {
   const font = SUPPORTED_FONTS.find((font) => font.value === fontName);
   return font?.url;
 };
+
+export function isSingleWalletActive(
+  wallets: WalletInfoWithExtra[],
+  multiWallets?: boolean
+) {
+  const atLeastOneWalletIsConnected = !!wallets.find(
+    (w) => w.state === WalletState.CONNECTED
+  );
+  return multiWallets === false && atLeastOneWalletIsConnected;
+}

package/src/utils/meta.ts

@@ -16,6 +16,14 @@ export function getBlockchainShortNameFor(
     ?.shortName;
 }
 
+export function getBlockchainImage(
+  blockchainName: string,
+  blockchains: BlockchainMeta[]
+): string | undefined {
+  return blockchains.find((blockchain) => blockchain.name === blockchainName)
+    ?.logo;
+}
+
 export function getSwapperDisplayName(
   swapperId: string,
   swappers: SwapperMeta[]

package/src/utils/numbers.ts

@@ -4,8 +4,6 @@ import type { BestRouteResponse } from 'rango-sdk';
 
 import { BigNumber } from 'bignumber.js';
 
-import { TOOLTIP_DECIMALS } from '../constants/routing';
-
 /*
  * if time > 1h -> rounded with 5 minutes precision
  * if time < 1h -> rounded with 15 seconds precision
@@ -127,13 +125,3 @@ export const containsText = (text: string, searchText: string) =>
 
 export const isPositiveNumber = (text?: string) =>
   !!text && parseFloat(text) > 0;
-10;
-
-export function formatTooltipNumbers(
-  number: BigNumber | string | number | null | undefined
-) {
-  return numberToString(number, TOOLTIP_DECIMALS, TOOLTIP_DECIMALS).replace(
-    /(?:\.0*|(\.\d+?)0*)$/,
-    '$1'
-  );
-}

package/src/utils/providers.ts

@@ -8,6 +8,7 @@ export interface ProvidersOptions {
   walletConnectListedDesktopWalletLink?: NonNullable<
     WidgetConfig['__UNSTABLE_OR_INTERNAL__']
   >['walletConnectListedDesktopWalletLink'];
+  trezorManifest: WidgetConfig['trezorManifest'];
 }
 
 /**
@@ -27,6 +28,9 @@ export function matchAndGenerateProviders(
         options?.walletConnectListedDesktopWalletLink,
     },
     selectedProviders: providers,
+    trezor: options?.trezorManifest
+      ? { manifest: options.trezorManifest }
+      : undefined,
   });
 
   if (providers) {

package/src/utils/wallets.ts

@@ -5,7 +5,7 @@ import type {
   SelectedQuote,
   TokensBalance,
   Wallet,
-  WalletInfoWithNamespaces,
+  WalletInfoWithExtra,
 } from '../types';
 import type { WalletInfo as ModalWalletInfo } from '@rango-dev/ui';
 import type {
@@ -68,7 +68,7 @@ export function mapWalletTypesToWalletInfo(
   getWalletInfo: (type: WalletType) => WalletInfo,
   list: WalletType[],
   chain?: string
-): WalletInfoWithNamespaces[] {
+): WalletInfoWithExtra[] {
   return list
     .filter((wallet) => !EXCLUDED_WALLETS.includes(wallet as WalletTypes))
     .filter((wallet) => {
@@ -96,6 +96,7 @@ export function mapWalletTypesToWalletInfo(
         namespaces,
         singleNamespace,
         supportedChains,
+        needsDerivationPath,
       } = getWalletInfo(type);
       const blockchainTypes = removeDuplicateFrom(
         supportedChains.map((item) => item.type)
@@ -112,6 +113,7 @@ export function mapWalletTypesToWalletInfo(
         namespaces,
         singleNamespace,
         blockchainTypes,
+        needsDerivationPath,
       };
     });
 }
@@ -434,8 +436,8 @@ export function areTokensEqual(
 }
 
 export function sortWalletsBasedOnConnectionState(
-  wallets: WalletInfoWithNamespaces[]
-): WalletInfoWithNamespaces[] {
+  wallets: WalletInfoWithExtra[]
+): WalletInfoWithExtra[] {
   return wallets.sort(
     (a, b) =>
       Number(b.state === WalletStatus.CONNECTED) -
@@ -549,7 +551,7 @@ export function filterBlockchainsByWalletTypes(
 }
 
 export function filterWalletsByCategory(
-  wallets: WalletInfoWithNamespaces[],
+  wallets: WalletInfoWithExtra[],
   category: string
 ) {
   if (category === BlockchainCategories.ALL) {