@rango-dev/widget-embedded 0.29.1-next.11 → 0.29.1-next.13

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/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';