@rango-dev/widget-embedded 0.29.1-next.8 → 0.30.0

package/src/store/quote.ts

@@ -1,4 +1,3 @@
-import type { QuoteError, QuoteWarning, SelectedQuote, Wallet } from '../types';
 import type {
   BlockchainMeta,
   MetaResponse,
@@ -12,6 +11,15 @@ import { create } from 'zustand';
 import { subscribeWithSelector } from 'zustand/middleware';
 
 import { ZERO } from '../constants/numbers';
+import { eventEmitter } from '../services/eventEmitter';
+import {
+  type QuoteError,
+  QuoteEventTypes,
+  type QuoteWarning,
+  type SelectedQuote,
+  type Wallet,
+  WidgetEvents,
+} from '../types';
 import { isPositiveNumber } from '../utils/numbers';
 import { getQuoteToTokenUsdPrice } from '../utils/quote';
 import { calcOutputUsdValue } from '../utils/swap';
@@ -160,11 +168,12 @@ export const useQuoteStore = createSelectors(
 
           return {
             fromBlockchain: chain,
+            inputUsdValue: new BigNumber(0),
             ...(state.fromToken && {
               selectedQuote: null,
               fromToken: null,
               outputAmount: null,
-              outputUsdValue: null,
+              outputUsdValue: new BigNumber(0),
             }),
           };
         });
@@ -195,7 +204,7 @@ export const useQuoteStore = createSelectors(
               selectedQuote: null,
               toToken: null,
               outputAmount: null,
-              outputUsdValue: null,
+              outputUsdValue: new BigNumber(0),
             }),
           };
         });
@@ -260,8 +269,10 @@ export const useQuoteStore = createSelectors(
         set(() => ({
           fromToken: null,
           fromBlockchain: null,
+          outputUsdValue: new BigNumber(0),
+          inputUsdValue: new BigNumber(0),
+          inputAmount: '',
           outputAmount: null,
-          outputUsdValue: null,
           selectedQuote: null,
         })),
       resetToBlockchain: () =>
@@ -269,7 +280,7 @@ export const useQuoteStore = createSelectors(
           toToken: null,
           toBlockchain: null,
           outputAmount: null,
-          outputUsdValue: null,
+          outputUsdValue: new BigNumber(0),
           selectedQuote: null,
         })),
       setQuoteWalletConfirmed: (flag) =>
@@ -289,3 +300,57 @@ export const useQuoteStore = createSelectors(
     }))
   )
 );
+
+export const unsubscribeQuoteStore = useQuoteStore.subscribe(
+  (selectedState, previousSelectedState) => {
+    if (
+      selectedState.fromBlockchain !== previousSelectedState.fromBlockchain ||
+      selectedState.fromToken !== previousSelectedState.fromToken ||
+      selectedState.toBlockchain !== previousSelectedState.toBlockchain ||
+      selectedState.toToken !== previousSelectedState.toToken ||
+      selectedState.inputAmount !== previousSelectedState.inputAmount
+    ) {
+      // useEffect hook can not be used in Zustand subscribe
+      eventEmitter.emit(WidgetEvents.QuoteEvent, {
+        type: QuoteEventTypes.QUOTE_INPUT_UPDATE,
+        payload: {
+          fromBlockchain: selectedState.fromBlockchain?.name,
+          toBlockchain: selectedState.toBlockchain?.name,
+          fromToken: selectedState.fromToken
+            ? {
+                symbol: selectedState.fromToken.symbol,
+                name: selectedState.fromToken.name,
+                address: selectedState.fromToken.address,
+              }
+            : undefined,
+          toToken: selectedState.toToken
+            ? {
+                symbol: selectedState.toToken.symbol,
+                name: selectedState.toToken.name,
+                address: selectedState.toToken.address,
+              }
+            : undefined,
+          requestAmount: selectedState.inputAmount,
+        },
+      });
+    }
+
+    if (
+      selectedState.selectedQuote?.requestId !==
+      previousSelectedState.selectedQuote?.requestId
+    ) {
+      eventEmitter.emit(WidgetEvents.QuoteEvent, {
+        type: QuoteEventTypes.QUOTE_OUTPUT_UPDATE,
+        payload: selectedState.selectedQuote
+          ? {
+              requestAmount: selectedState.selectedQuote.requestAmount,
+              swaps: selectedState.selectedQuote.swaps,
+              outputAmount: selectedState.selectedQuote.outputAmount,
+              resultType: selectedState.selectedQuote.resultType,
+              tags: selectedState.selectedQuote.tags,
+            }
+          : null,
+      });
+    }
+  }
+);

package/src/store/slices/config.ts

@@ -9,6 +9,10 @@ export const DEFAULT_CONFIG: WidgetConfig = {
   excludeLiquiditySources: true,
   customDestination: true,
   variant: 'default',
+  trezorManifest: {
+    appUrl: 'https://widget.rango.exchange/',
+    email: 'hi+trezorwidget@rango.exchange',
+  },
 };
 
 interface IframeConfigs {

package/src/store/slices/settings.ts

@@ -159,6 +159,8 @@ export const createSettingsSlice: StateCreator<
     const isLanguageHidden = isFeatureHidden('language', features);
     const isLiquidityHidden = isFeatureHidden('liquiditySource', features);
     const singleTheme = theme?.singleTheme;
+    const autoUpdateSettings =
+      nextConfig?.__UNSTABLE_OR_INTERNAL__?.autoUpdateSettings;
 
     set({
       ...(isThemeHidden && { theme: nextConfig.theme?.mode || 'auto' }),
@@ -169,7 +171,8 @@ export const createSettingsSlice: StateCreator<
       ...(isLiquidityHidden && {
         disabledLiquiditySources: nextConfig.liquiditySources || [],
       }),
-      ...(nextConfig?._INTERNAL_SETTINGS_?.autoUpdateSettings && {
+      ...(autoUpdateSettings && {
+        // For the time being, we have added the language; if more are needed later, we can add other parameters.
         language: nextConfig.language || DEFAULT_LANGUAGE,
       }),
     });

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,10 +231,6 @@ export type WidgetConfig = {
   // These are likely to change or remove at anytime. Please use with a caution.
   __UNSTABLE_OR_INTERNAL__?: {
     walletConnectListedDesktopWalletLink?: string;
-  };
-
-  // Internal configuration options. Not intended for public use or modification.
-  _INTERNAL_SETTINGS_?: {
     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;
+};