@rango-dev/widget-embedded 0.0.0-experimental-936229e8-20251208

package/src/containers/Wallets/useUpdates.ts

@@ -0,0 +1,248 @@
+import type {
+  OnWalletConnectHandler,
+  OnWalletDisconnectHandler,
+} from './Wallets.types';
+import type { LastConnectedWallet } from '@rango-dev/queue-manager-rango-preset';
+import type {
+  LegacyEventHandler as EventHandler,
+  LegacyEventHandler,
+} from '@rango-dev/wallets-core/legacy';
+
+import {
+  legacyFormatAddressWithNetwork as formatAddressWithNetwork,
+  legacyReadAccountAddress as readAccountAddress,
+} from '@rango-dev/wallets-core/legacy';
+import { Events } from '@rango-dev/wallets-react';
+import { type Network } from '@rango-dev/wallets-shared';
+import { isEvmBlockchain } from 'rango-sdk';
+
+import { useAppStore } from '../../store/AppStore';
+import {
+  prepareAccountsForWalletStore,
+  walletAndSupportedChainsNames,
+} from '../../utils/wallets';
+
+interface UseUpdatesParams {
+  onConnectWalletHandler: React.MutableRefObject<
+    OnWalletConnectHandler | undefined
+  >;
+  onDisconnectWalletHandler: React.MutableRefObject<
+    OnWalletDisconnectHandler | undefined
+  >;
+}
+interface UseUpdates {
+  handler: EventHandler;
+}
+
+export function useUpdates(params: UseUpdatesParams): UseUpdates {
+  const {
+    newWalletConnected,
+    disconnectWallet,
+    disconnectNamespaces,
+    connectedWallets,
+    removeBalancesForWallet,
+    blockchains,
+  } = useAppStore();
+
+  const { onConnectWalletHandler, onDisconnectWalletHandler } = params;
+  const evmBasedChainNames = blockchains()
+    .filter(isEvmBlockchain)
+    .map((chain) => chain.name);
+
+  const onAccountsEvent = (
+    event: Parameters<LegacyEventHandler>,
+    params: {
+      supportedChainNames: Network[] | null;
+    }
+  ) => {
+    const [type, , value, state, info] = event;
+
+    const walletFromEvent: LastConnectedWallet = {
+      walletType: type,
+      network: state.network ?? undefined,
+      accounts: value,
+    };
+    if (!!onConnectWalletHandler.current) {
+      onConnectWalletHandler.current(walletFromEvent);
+    } else {
+      console.warn(`onConnectWallet handler hasn't been set. Are you sure?`);
+    }
+
+    const data = prepareAccountsForWalletStore(
+      type,
+      value,
+      evmBasedChainNames,
+      params.supportedChainNames,
+      info.isContractWallet
+    );
+
+    if (data.length) {
+      void newWalletConnected(data, info.namespace, state.derivationPath);
+    }
+  };
+
+  const handleUpdatesForHub: EventHandler = (
+    type,
+    event,
+    value,
+    state,
+    info
+  ) => {
+    if (event === Events.ACCOUNTS) {
+      const supportedChainNames: Network[] | null =
+        walletAndSupportedChainsNames(info.supportedBlockchains);
+
+      // After cleaning up balances, it's time to add new accounts.
+      if (value) {
+        onAccountsEvent([type, event, value, state, info], {
+          supportedChainNames,
+        });
+      }
+    }
+
+    if (event === Events.PROVIDER_DISCONNECTED) {
+      disconnectWallet(type);
+      if (!!onDisconnectWalletHandler.current) {
+        onDisconnectWalletHandler.current(type);
+      } else {
+        console.warn(
+          `onDisconnectWallet handler hasn't been set. Are you sure?`
+        );
+      }
+    }
+
+    if (event === Events.NAMESPACE_DISCONNECTED) {
+      disconnectNamespaces(type, value);
+    }
+  };
+
+  const handleUpdatesForLegacy: EventHandler = (
+    type,
+    event,
+    value,
+    state,
+    info
+  ) => {
+    if (event === Events.ACCOUNTS) {
+      const supportedChainNames: Network[] | null =
+        walletAndSupportedChainsNames(info.supportedBlockchains);
+
+      /*
+       * When a wallet is connecting to an evm account, we will consider it as the account exists on other evm-compatible blockchains
+       * To get their balances.
+       *
+       * The logic here is for handling switching account functionality in wallets. when a wallet is switching to another account
+       * we need to clean the balances for old accounts.
+       *
+       * Note: hub will do the cleanup on namespace diconnected event.
+       */
+      const evmAccounts: string[] = [];
+      const nonEvmAccounts: string[] = [];
+
+      value?.forEach((account: string) => {
+        const { network } = readAccountAddress(account);
+        if (evmBasedChainNames.includes(network)) {
+          evmAccounts.push(account);
+        } else {
+          nonEvmAccounts.push(account);
+        }
+      });
+
+      const previousAccounts = connectedWallets
+        .filter((wallet) => wallet.walletType === type)
+        .map((wallet) =>
+          formatAddressWithNetwork(wallet.address, wallet.chain)
+        );
+
+      if (previousAccounts.length > 0) {
+        if (evmAccounts.length > 0) {
+          // We use same logic for removing as we use for adding.
+          const data = prepareAccountsForWalletStore(
+            type,
+            evmAccounts,
+            evmBasedChainNames,
+            supportedChainNames,
+            info.isContractWallet
+          );
+
+          removeBalancesForWallet(type, {
+            chains: data.map((account) => account.chain),
+          });
+        }
+
+        if (nonEvmAccounts.length > 0) {
+          removeBalancesForWallet(type, {
+            chains: nonEvmAccounts.map((account) => {
+              const { network } = readAccountAddress(account);
+              return network;
+            }),
+          });
+        }
+      }
+
+      // After cleaning up balances, it's time to add new accounts.
+      if (value) {
+        onAccountsEvent([type, event, value, state, info], {
+          supportedChainNames,
+        });
+      } else {
+        disconnectWallet(type);
+        if (!!onDisconnectWalletHandler.current) {
+          onDisconnectWalletHandler.current(type);
+        } else {
+          console.warn(
+            `onDisconnectWallet handler hasn't been set. Are you sure?`
+          );
+        }
+      }
+    }
+  };
+
+  const handleUpdatesForBoth: EventHandler = (
+    type,
+    event,
+    value,
+    state,
+    _info
+  ) => {
+    if (event === Events.CONNECTED && value) {
+      const walletFromEvent: LastConnectedWallet = {
+        walletType: type,
+        network: state.network ?? undefined,
+        accounts: state.accounts ?? undefined,
+      };
+      if (!!onConnectWalletHandler.current) {
+        onConnectWalletHandler.current(walletFromEvent);
+      } else {
+        console.warn(`onConnectWallet handler hasn't been set. Are you sure?`);
+      }
+    }
+
+    if (event === Events.NETWORK && value) {
+      const walletFromEvent: LastConnectedWallet = {
+        walletType: type,
+        network: value,
+        accounts: state.accounts ?? undefined,
+      };
+      if (!!onConnectWalletHandler.current) {
+        onConnectWalletHandler.current(walletFromEvent);
+      } else {
+        console.warn(`onConnectWallet handler hasn't been set. Are you sure?`);
+      }
+    }
+  };
+
+  const handler: EventHandler = (type, event, value, state, info) => {
+    if (info.isHub) {
+      handleUpdatesForHub(type, event, value, state, info);
+    } else {
+      handleUpdatesForLegacy(type, event, value, state, info);
+    }
+
+    handleUpdatesForBoth(type, event, value, state, info);
+  };
+
+  return {
+    handler,
+  };
+}

package/src/containers/Widget/Widget.tsx

@@ -0,0 +1,25 @@
+import type { WidgetProps } from './Widget.types';
+import type { PropsWithChildren } from 'react';
+
+import React from 'react';
+
+import { AppRouter } from '../../components/AppRouter';
+import { DEFAULT_CONFIG } from '../../store/slices/config';
+import { Main } from '../App';
+import { WidgetProvider } from '../WidgetProvider';
+
+export function Widget(props: PropsWithChildren<WidgetProps>) {
+  const isExternalWalletsEnabled = props.config?.externalWallets;
+
+  return (
+    <AppRouter>
+      {isExternalWalletsEnabled ? (
+        <Main />
+      ) : (
+        <WidgetProvider config={props.config ?? DEFAULT_CONFIG}>
+          <Main />
+        </WidgetProvider>
+      )}
+    </AppRouter>
+  );
+}

package/src/containers/Widget/Widget.types.ts

@@ -0,0 +1,5 @@
+import type { WidgetConfig } from '../../types';
+
+export type WidgetProps = {
+  config?: WidgetConfig;
+};

package/src/containers/Widget/index.ts

@@ -0,0 +1,2 @@
+export { Widget } from './Widget';
+export type { WidgetProps } from './Widget.types';

package/src/containers/WidgetInfo/WidgetInfo.helpers.ts

@@ -0,0 +1,73 @@
+import type { Meta, RetryQuote } from '../../store/quote';
+import type { FindToken } from '../../store/slices/data';
+import type { Manager } from '@rango-dev/queue-manager-core';
+import type { PendingSwap } from 'rango-types/lib';
+
+import {
+  cancelSwap,
+  getCurrentNamespaceOfOrNull,
+  getCurrentStep,
+  getRelatedWalletOrNull,
+} from '@rango-dev/queue-manager-rango-preset';
+
+import { getPendingSwaps } from '../../utils/queue';
+import { createRetryQuote } from '../../utils/quote';
+
+interface WidgetHistoryActions {
+  retrySwap: (retryQuote: RetryQuote) => void;
+  findToken: FindToken;
+}
+
+export class WidgetHistory {
+  private manager: Manager | undefined;
+  private actions: WidgetHistoryActions;
+
+  constructor(manager: Manager | undefined, actions: WidgetHistoryActions) {
+    this.manager = manager;
+    this.actions = actions;
+  }
+
+  public getAllSwaps() {
+    return getPendingSwaps(this.manager);
+  }
+
+  public getCurrentStep(swap: PendingSwap) {
+    return this.getCurrentStepInfo(swap).step;
+  }
+
+  public getCurrentStepWallet(swap: PendingSwap) {
+    return this.getCurrentStepInfo(swap).wallet;
+  }
+
+  public getCurrentStepNetwork(swap: PendingSwap) {
+    return this.getCurrentStepInfo(swap).network;
+  }
+
+  public retry(swap: PendingSwap, meta: Meta) {
+    const retryQuote = createRetryQuote(
+      swap,
+      meta.blockchains,
+      this.actions.findToken
+    );
+
+    return this.actions.retrySwap(retryQuote);
+  }
+
+  public cancel(id: string) {
+    const queue = this.manager?.get(id);
+    if (queue) {
+      cancelSwap(queue);
+    }
+  }
+
+  private getCurrentStepInfo(swap: PendingSwap) {
+    const currentStep = getCurrentStep(swap);
+    return {
+      step: currentStep,
+      wallet: currentStep ? getRelatedWalletOrNull(swap, currentStep) : null,
+      network: currentStep
+        ? getCurrentNamespaceOfOrNull(swap, currentStep)?.network
+        : null,
+    };
+  }
+}

package/src/containers/WidgetInfo/WidgetInfo.tsx

@@ -0,0 +1,107 @@
+import type { WidgetInfoContextInterface } from './WidgetInfo.types';
+
+import { useManager } from '@rango-dev/queue-manager-react';
+import React, { createContext, useContext } from 'react';
+
+import { useLanguage } from '../../hooks/useLanguage';
+import { useUpdateQuoteInputs } from '../../hooks/useUpdateQuoteInputs/useUpdateQuoteInputs';
+import { useAppStore } from '../../store/AppStore';
+import { useNotificationStore } from '../../store/notification';
+import { useQuoteStore } from '../../store/quote';
+import { tabManager, useUiStore } from '../../store/ui';
+import { calculateWalletUsdValue } from '../../utils/wallets';
+
+import { WidgetHistory } from './WidgetInfo.helpers';
+
+export const WidgetInfoContext = createContext<
+  WidgetInfoContextInterface | undefined
+>(undefined);
+
+export function WidgetInfo(props: React.PropsWithChildren) {
+  const { manager } = useManager();
+  const isActiveTab = useUiStore.use.isActiveTab();
+  const retrySwap = useQuoteStore().use.retry();
+  const {
+    findToken,
+    getBalances,
+    getConnectedWalletsDetails,
+    fetchBalances: refetch,
+  } = useAppStore();
+
+  const history = new WidgetHistory(manager, { retrySwap, findToken });
+  const { fetchingWallets: isLoading } = useAppStore();
+  const totalBalance = calculateWalletUsdValue(getBalances());
+  const blockchains = useAppStore().blockchains();
+  const tokens = useAppStore().tokens();
+  const swappers = useAppStore().swappers();
+  const loadingStatus = useAppStore().fetchStatus;
+  const resetLanguage = useLanguage().resetLanguage;
+  const notifications = useNotificationStore().getNotifications();
+  const clearNotifications = useNotificationStore().clearNotifications;
+  const updateQuoteInputs = useUpdateQuoteInputs();
+  const { fromBlockchain, toBlockchain, fromToken, toToken, inputAmount } =
+    useQuoteStore()();
+
+  // eslint-disable-next-line react/jsx-no-constructed-context-values
+  const value: WidgetInfoContextInterface = {
+    isActiveTab,
+    setCurrentTabAsActive: tabManager.forceClaim,
+    history,
+    wallets: {
+      isLoading,
+      details: getConnectedWalletsDetails(),
+      totalBalance,
+      refetch: async (accounts) => refetch(accounts),
+    },
+    meta: {
+      blockchains,
+      tokens,
+      swappers,
+      loadingStatus,
+      findToken,
+    },
+    resetLanguage,
+    notifications: {
+      list: notifications,
+      clearAll: clearNotifications,
+    },
+    quote: {
+      quoteInputs: {
+        fromBlockchain: fromBlockchain?.name ?? null,
+        fromToken: fromToken
+          ? {
+              symbol: fromToken.symbol,
+              blockchain: fromToken.blockchain,
+              address: fromToken.address,
+            }
+          : null,
+        toBlockchain: toBlockchain?.name ?? null,
+        toToken: toToken
+          ? {
+              symbol: toToken.symbol,
+              blockchain: toToken.blockchain,
+              address: toToken.address,
+            }
+          : null,
+        requestAmount: inputAmount,
+      },
+      updateQuoteInputs,
+    },
+  };
+
+  return (
+    <WidgetInfoContext.Provider value={value}>
+      {props.children}
+    </WidgetInfoContext.Provider>
+  );
+}
+
+export function useWidget(): WidgetInfoContextInterface {
+  const context = useContext(WidgetInfoContext);
+  if (!context) {
+    throw new Error(
+      'useWidget can only be used within the WidgetProvider component'
+    );
+  }
+  return context;
+}

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

@@ -0,0 +1,34 @@
+import type { WidgetHistory } from './WidgetInfo.helpers';
+import type { FetchStatus, FindToken } from '../../store/slices/data';
+import type { DeprecatedWalletDetail } from '../../store/slices/wallets';
+import type { QuoteInputs, UpdateQuoteInputs, Wallet } from '../../types';
+import type { Notification } from '../../types/notification';
+import type { BlockchainMeta, SwapperMeta, Token } from 'rango-sdk';
+
+export interface WidgetInfoContextInterface {
+  isActiveTab: boolean;
+  setCurrentTabAsActive: () => void;
+  history: WidgetHistory;
+  wallets: {
+    details: DeprecatedWalletDetail[];
+    totalBalance: string;
+    isLoading: boolean;
+    refetch: (accounts: Wallet[]) => void;
+  };
+  meta: {
+    blockchains: BlockchainMeta[];
+    tokens: Token[];
+    swappers: SwapperMeta[];
+    loadingStatus: FetchStatus;
+    findToken: FindToken;
+  };
+  resetLanguage: () => void;
+  notifications: {
+    list: Notification[];
+    clearAll: () => void;
+  };
+  quote: {
+    quoteInputs: QuoteInputs;
+    updateQuoteInputs: UpdateQuoteInputs;
+  };
+}

package/src/containers/WidgetInfo/index.ts

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

package/src/containers/WidgetProvider/WidgetProvider.tsx

@@ -0,0 +1,53 @@
+import type { PropTypes } from './WidgetProvider.types';
+import type { PropsWithChildren } from 'react';
+
+import { setSolanaSignerConfig } from '@rango-dev/signer-solana';
+import React, { useEffect, useMemo } from 'react';
+
+import { DEFAULT_BASE_URL, RANGO_PUBLIC_API_KEY } from '../../constants';
+import { useFetchApiConfig } from '../../hooks/useFetchApiConfig';
+import useFontLoader from '../../hooks/useFontLoader';
+import QueueManager from '../../QueueManager';
+import { initConfig } from '../../utils/configs';
+import { WidgetWallets } from '../Wallets';
+import { WidgetInfo } from '../WidgetInfo';
+
+export function WidgetProvider(props: PropsWithChildren<PropTypes>) {
+  const { onUpdateState, config } = props;
+
+  const fontFamily = props.config?.theme?.fontFamily;
+
+  const { fetchApiConfig } = useFetchApiConfig();
+  const { handleLoadCustomFont } = useFontLoader();
+
+  useEffect(() => {
+    void fetchApiConfig().catch(console.log);
+  }, []);
+
+  useEffect(() => {
+    if (fontFamily) {
+      handleLoadCustomFont(fontFamily);
+    }
+  }, [fontFamily]);
+
+  useMemo(() => {
+    initConfig({
+      API_KEY: config?.apiKey || RANGO_PUBLIC_API_KEY,
+      BASE_URL: config?.apiUrl || DEFAULT_BASE_URL,
+    });
+  }, [config.apiKey, config.apiUrl]);
+
+  useEffect(() => {
+    if (props.config?.signers?.customSolanaRPC) {
+      setSolanaSignerConfig('customRPC', props.config.signers.customSolanaRPC);
+    }
+  }, [props.config?.signers?.customSolanaRPC]);
+
+  return (
+    <WidgetWallets config={config} onUpdateState={onUpdateState}>
+      <QueueManager apiKey={config.apiKey}>
+        <WidgetInfo>{props.children}</WidgetInfo>
+      </QueueManager>
+    </WidgetWallets>
+  );
+}

package/src/containers/WidgetProvider/WidgetProvider.types.ts

@@ -0,0 +1,7 @@
+import type { WidgetConfig } from '../../types';
+import type { LegacyEventHandler as EventHandler } from '@rango-dev/wallets-core/legacy';
+
+export type PropTypes = {
+  onUpdateState?: EventHandler;
+  config: WidgetConfig;
+};

package/src/containers/WidgetProvider/index.ts

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

package/src/globalStyles.ts

@@ -0,0 +1,7 @@
+import { globalCss } from '@rango-dev/ui';
+
+export const globalFont = () =>
+  globalCss({
+    '@import':
+      "url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap')",
+  })();

package/src/hooks/useBootstrap/index.ts

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

package/src/hooks/useBootstrap/useBootstrap.ts

@@ -0,0 +1,102 @@
+import type { WalletType } from '../..';
+import type { LastConnectedWallet } from '@rango-dev/queue-manager-rango-preset';
+
+import { useQueueManager } from '@rango-dev/queue-manager-rango-preset';
+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 {
+  unsubscribeRefuelQuoteStore,
+  unsubscribeSwapQuoteStore,
+} from '../../store/quote';
+import { tabManager } from '../../store/ui';
+import { useForceAutoConnect } from '../useForceAutoConnect';
+import { useSubscribeToWidgetEvents } from '../useSubscribeToWidgetEvents';
+import { useSyncNotifications } from '../useSyncNotifications';
+
+export function useBootstrap() {
+  useForceAutoConnect();
+  globalFont();
+  useSubscribeToWidgetEvents();
+  useSyncNotifications();
+  const blockchains = useAppStore().blockchains();
+  const { canSwitchNetworkTo } = useWallets();
+  const [lastConnectedWallet, setLastConnectedWallet] =
+    useState<LastConnectedWallet | null>(null);
+  const [disconnectedWallet, setDisconnectedWallet] = useState<WalletType>();
+  const widgetContext = useContext(WidgetContext);
+
+  const evmChains = blockchains.filter(isEvmBlockchain);
+
+  // Unsubscribe QuoteStore listeners
+  useEffect(() => () => unsubscribeSwapQuoteStore(), []);
+  useEffect(() => () => unsubscribeRefuelQuoteStore(), []);
+
+  // At the moment, we only detect the disconnection of EVM wallets.
+  useQueueManager({
+    lastConnectedWallet,
+    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((walletFromEvent) => {
+      /*
+       * If no wallet was previously connected or the wallet type has changed,
+       * replace the last connected wallet with the new one from the event.
+       * Otherwise, merge updated `network` and `accounts` information from the new wallet
+       * into the existing last connected wallet without replacing the entire object.
+       */
+      setLastConnectedWallet((lastConnectedWallet) => {
+        if (
+          !lastConnectedWallet ||
+          lastConnectedWallet.walletType !== walletFromEvent.walletType
+        ) {
+          return walletFromEvent;
+        }
+        const lastConnectedWalletClone = { ...lastConnectedWallet };
+        if (walletFromEvent.network) {
+          lastConnectedWalletClone.network = walletFromEvent.network;
+        }
+        if (walletFromEvent.accounts) {
+          lastConnectedWalletClone.accounts = walletFromEvent.accounts;
+        }
+        return lastConnectedWalletClone;
+      });
+    });
+    widgetContext.onDisconnectWallet((walletType) => {
+      setDisconnectedWallet(walletType);
+      setLastConnectedWallet((lastConnectedWallet) =>
+        walletType === lastConnectedWallet?.walletType
+          ? null
+          : lastConnectedWallet
+      );
+    });
+
+    return tabManager.destroy;
+  }, []);
+}

package/src/hooks/useConfirmSwap/index.ts

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