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

package/src/hooks/useTheme.ts

@@ -0,0 +1,104 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import {
+  createTheme,
+  darkTheme as defaultDarkTheme,
+  lightTheme as defaultLightTheme,
+} from '@rango-dev/ui';
+import { useEffect, useState } from 'react';
+
+import { DEFAULT_FONT_FAMILY } from '../constants/fonts';
+import { useAppStore } from '../store/AppStore';
+import { type WidgetTheme } from '../types';
+import {
+  DEFAULT_PRIMARY_RADIUS,
+  DEFAULT_SECONDARY_RADIUS,
+} from '../utils/configs';
+import { customizedThemeTokens } from '../utils/ui';
+
+function doesWindowPreferDarkColorScheme() {
+  return (
+    window.matchMedia &&
+    window.matchMedia('(prefers-color-scheme: dark)').matches
+  );
+}
+
+export function useTheme(props: WidgetTheme) {
+  const {
+    colors,
+    fontFamily = DEFAULT_FONT_FAMILY,
+    borderRadius = DEFAULT_PRIMARY_RADIUS,
+    secondaryBorderRadius = DEFAULT_SECONDARY_RADIUS,
+  } = props;
+
+  const [OSTheme, setOSTheme] = useState(
+    doesWindowPreferDarkColorScheme() ? 'dark' : 'light'
+  );
+
+  const { theme } = useAppStore();
+
+  const { dark, light } = customizedThemeTokens(colors);
+
+  const baseTheme = createTheme({
+    shadows: props.shadows || {},
+    radii: {
+      primary: `${borderRadius}px`,
+      secondary: `${secondaryBorderRadius}px`,
+    },
+    fonts: {
+      widget: fontFamily,
+    },
+  });
+  const lightThemeClasses = [baseTheme.className, defaultLightTheme.className];
+  const darkThemeClasses = [baseTheme.className, defaultDarkTheme.className];
+
+  /*
+   * If theme has been customized, we will push the customized theme to override the default themes.
+   * To be overridden, it should be last thing that has been pushed.
+   */
+  if (light) {
+    const customizedLightTheme = createTheme(light.id, light.tokens);
+    lightThemeClasses.push(customizedLightTheme.className);
+  }
+  if (dark) {
+    const customizedDarkTheme = createTheme(dark.id, dark.tokens);
+    darkThemeClasses.push(customizedDarkTheme.className);
+  }
+
+  useEffect(() => {
+    const switchThemeListener = (event: MediaQueryListEvent) => {
+      if (event.matches) {
+        setOSTheme('dark');
+      } else {
+        setOSTheme('light');
+      }
+    };
+
+    if (doesWindowPreferDarkColorScheme()) {
+      setOSTheme('dark');
+    }
+
+    window
+      .matchMedia('(prefers-color-scheme: dark)')
+      .addEventListener('change', switchThemeListener);
+    return () => {
+      window
+        .matchMedia('(prefers-color-scheme: dark)')
+        .removeEventListener('change', switchThemeListener);
+    };
+  }, []);
+
+  const getActiveTheme = () => {
+    const lightClassNames = lightThemeClasses.join(' ');
+    const darkClassNames = darkThemeClasses.join(' ');
+    if (theme === 'auto') {
+      return OSTheme === 'dark' ? darkClassNames : lightClassNames;
+    }
+
+    return theme === 'dark' ? darkClassNames : lightClassNames;
+  };
+
+  return {
+    activeTheme: getActiveTheme,
+    mode: theme === 'auto' ? OSTheme : theme,
+  };
+}

package/src/hooks/useUpdateQuoteInputs/index.ts

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

package/src/hooks/useUpdateQuoteInputs/useUpdateQuoteInputs.ts

@@ -0,0 +1,50 @@
+import type { UpdateQuoteInputs } from '../../types';
+
+import { useAppStore } from '../../store/AppStore';
+import { useQuoteStore } from '../../store/quote';
+
+// This hook provides a function to update quote inputs using fewer and simpler parameters.
+export function useUpdateQuoteInputs() {
+  const { findToken } = useAppStore();
+  const blockchains = useAppStore().blockchains();
+  const tokens = useAppStore().tokens();
+  const {
+    setFromBlockchain,
+    setFromToken,
+    setToBlockchain,
+    setToToken,
+    setInputAmount,
+  } = useQuoteStore()();
+
+  const updateQuoteInputs: UpdateQuoteInputs = (params) => {
+    const { fromBlockchain, fromToken, toBlockchain, toToken, requestAmount } =
+      params;
+    const meta = { blockchains, tokens };
+
+    if (fromBlockchain !== undefined) {
+      const blockchainMeta =
+        blockchains.find((blockchain) => blockchain.name === fromBlockchain) ??
+        null;
+      setFromBlockchain(blockchainMeta);
+    }
+    if (fromToken !== undefined) {
+      const token = fromToken ? findToken(fromToken) ?? null : null;
+      setFromToken({ meta, token });
+    }
+    if (toBlockchain !== undefined) {
+      const blockchainMeta =
+        blockchains.find((blockchain) => blockchain.name === toBlockchain) ??
+        null;
+      setToBlockchain(blockchainMeta);
+    }
+    if (toToken !== undefined) {
+      const token = toToken ? findToken(toToken) ?? null : null;
+      setToToken({ meta, token });
+    }
+    if (requestAmount !== undefined) {
+      setInputAmount(requestAmount);
+    }
+  };
+
+  return updateQuoteInputs;
+}

package/src/hooks/useWalletList.ts

@@ -0,0 +1,144 @@
+import type { ExtendedModalWalletInfo } from '../utils/wallets';
+import type { WalletInfo } from '@rango-dev/ui';
+import type { BlockchainMeta } from 'rango-sdk';
+
+import { WalletState } from '@rango-dev/ui';
+import { useWallets } from '@rango-dev/wallets-react';
+import {
+  detectMobileScreens,
+  KEPLR_COMPATIBLE_WALLETS,
+  WalletTypes,
+} from '@rango-dev/wallets-shared';
+import { useCallback, useEffect } from 'react';
+
+import { useAppStore } from '../store/AppStore';
+import { configWalletsToWalletName } from '../utils/providers';
+import {
+  hashWalletsState,
+  isExperimentalChain,
+  mapWalletTypesToWalletInfo,
+  sortWalletsBasedOnConnectionState,
+} from '../utils/wallets';
+
+import { useStatefulConnect } from './useStatefulConnect/useStatefulConnect';
+
+interface Params {
+  chain?: string;
+}
+
+interface API {
+  list: ExtendedModalWalletInfo[];
+  terminateConnectingWallets: () => void;
+}
+
+/**
+ *
+ * Returning list of wallets which has a applied sorting and filtering (some of wallet can be excluded).
+ * It can have some functionality on list itself,
+ * now it only has a method to disconnect the wallets that has `connecting` status. This is useful for exiting page and terminating wallet connection.
+ *
+ */
+export function useWalletList(params?: Params): API {
+  const { chain } = params || {};
+  const { connectedWallets, getAvailableProviders } = useAppStore();
+  const { state, getWalletInfo } = useWallets();
+  const blockchains = useAppStore().blockchains();
+  const { handleDisconnect } = useStatefulConnect();
+
+  /** It can be what has been set by widget config or as a fallback we use all the supported wallets by our library */
+  const listAvailableWalletTypes = configWalletsToWalletName(
+    getAvailableProviders()
+  );
+
+  let wallets = mapWalletTypesToWalletInfo(
+    state,
+    getWalletInfo,
+    listAvailableWalletTypes,
+    chain
+  );
+
+  wallets = detectMobileScreens()
+    ? wallets.filter(
+        (wallet) =>
+          wallet.showOnMobile !== false && state(wallet.type).installed
+      )
+    : wallets;
+
+  const sortedWallets = sortWalletsBasedOnConnectionState(wallets);
+
+  const isExperimentalChainNotAdded = (walletType: string) =>
+    !connectedWallets.find(
+      (connectedWallet) =>
+        connectedWallet.walletType === walletType &&
+        connectedWallet.chain === chain
+    );
+
+  const terminateConnectingWallets = useCallback(() => {
+    const connectingWallets =
+      wallets?.filter((wallet) => wallet.state === WalletState.CONNECTING) ||
+      [];
+    for (const wallet of connectingWallets) {
+      void handleDisconnect(wallet);
+    }
+  }, [hashWalletsState(wallets)]);
+
+  useEffect(() => {
+    return () => {
+      terminateConnectingWallets();
+    };
+  }, []);
+
+  /*
+   * Atm, we only support default injected wallet for the EVM
+   * so we show default wallet when there is no other evm wallet installed
+   * but we have ethereum injected
+   */
+  const shouldShowDefaultInjectedWallet = (wallets: WalletInfo[]) => {
+    // don't show default injected wallet when it's not installed
+    const defaultWallet = wallets.find(
+      (wallet) => wallet.type === WalletTypes.DEFAULT
+    );
+    if (!defaultWallet || defaultWallet.state === WalletState.NOT_INSTALLED) {
+      return false;
+    }
+
+    /*
+     * if we have another evm wallet installed (except wallet connect),
+     * there is no need to show default injected wallet anymore
+     */
+    const isEvmWalletInstalledExceptDefault = wallets.filter(
+      (wallet) =>
+        wallet.state != WalletState.NOT_INSTALLED &&
+        ![
+          WalletTypes.DEFAULT,
+          WalletTypes.WALLET_CONNECT_2,
+          WalletTypes.LEDGER,
+        ].includes(wallet.type as WalletTypes) &&
+        getWalletInfo(wallet.type).supportedChains.filter(
+          (blockchain) => blockchain.type == 'EVM'
+        ).length > 0
+    );
+    return isEvmWalletInstalledExceptDefault.length == 0;
+  };
+
+  const shouldExcludeWallet = (
+    walletType: string,
+    chain: string,
+    blockchains: BlockchainMeta[]
+  ) => {
+    return (
+      (isExperimentalChain(blockchains, chain) &&
+        isExperimentalChainNotAdded(walletType) &&
+        !KEPLR_COMPATIBLE_WALLETS.includes(walletType)) ||
+      (walletType == WalletTypes.DEFAULT &&
+        !shouldShowDefaultInjectedWallet(wallets))
+    );
+  };
+
+  return {
+    list: sortedWallets.filter(
+      (wallet) => !shouldExcludeWallet(wallet.type, chain ?? '', blockchains)
+    ),
+    terminateConnectingWallets,
+  };
+}

package/src/hooks/useWalletProviders/index.ts

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

package/src/hooks/useWalletProviders/useWalletProviders.helpers.ts

@@ -0,0 +1,19 @@
+import type { ProviderInterface } from '@rango-dev/wallets-react';
+
+import { Provider } from '@rango-dev/wallets-core';
+
+export function hashProviders(
+  providers: (string | ProviderInterface | Provider)[]
+): string {
+  return providers
+    .map((provider) => {
+      if (typeof provider === 'string') {
+        return provider;
+      }
+      if (provider instanceof Provider) {
+        return provider.id;
+      }
+      return provider.config.type;
+    })
+    .join('-');
+}

package/src/hooks/useWalletProviders/useWalletProviders.ts

@@ -0,0 +1,30 @@
+import type { WidgetConfig } from '../../types';
+import type { ProvidersOptions } from '../../utils/providers';
+
+import { useEffect } from 'react';
+
+import { useAppStore } from '../../store/AppStore';
+
+import { hashProviders } from './useWalletProviders.helpers';
+
+export function useWalletProviders(
+  configWallets: WidgetConfig['wallets'],
+  options?: ProvidersOptions
+) {
+  const { clearConnectedWallet, getAvailableProviders, buildAndSetProviders } =
+    useAppStore();
+  const providers = getAvailableProviders();
+
+  useEffect(() => {
+    clearConnectedWallet();
+    buildAndSetProviders();
+  }, [
+    hashProviders(configWallets ?? []),
+    options?.walletConnectProjectId,
+    options?.walletConnectListedDesktopWalletLink,
+  ]);
+
+  return {
+    providers,
+  };
+}

package/src/hooks/useWidgetEvents/index.ts

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

package/src/hooks/useWidgetEvents/useWidgetEvents.ts

@@ -0,0 +1,9 @@
+import type { WidgetEventEmitter } from '../../types';
+
+import { eventEmitter } from '../../services/eventEmitter';
+
+export function useWidgetEvents(): WidgetEventEmitter {
+  // To be exported for Dapps
+  const { on, off } = eventEmitter;
+  return { on, off };
+}

package/src/index.ts

@@ -0,0 +1,192 @@
+import type { WidgetProps } from './containers/Widget';
+import type { UseStatefulConnect } from './hooks/useStatefulConnect';
+import type { ConnectedWallet } from './store/slices/wallets';
+import type {
+  BlockchainAndTokenConfig,
+  QuoteEventData,
+  Tokens,
+  UiEventData,
+  WalletEventData,
+  WalletInfoWithExtra,
+  WidgetColors,
+  WidgetColorsKeys,
+  WidgetConfig,
+  WidgetTheme,
+  WidgetVariant,
+} from './types';
+import type {
+  PendingSwapWithQueueID,
+  Route,
+  RouteEvent,
+  RouteEventData,
+  RouteExecutionEvents,
+  RouteFailedEvent,
+  RouteStartedEvent,
+  RouteSucceededEvent,
+  Step,
+  StepApprovalTxSucceededEvent,
+  StepCheckStatusEvent,
+  StepEvent,
+  StepEventData,
+  StepFailedEvent,
+  StepOutputRevealedEvent,
+  StepStartedEvent,
+  StepSucceededEvent,
+  StepTxExecutionBlockedEvent,
+  StepTxExecutionUpdatedEvent,
+} from '@rango-dev/queue-manager-rango-preset';
+import type {
+  LegacyEventHandler as HandleWalletsUpdate,
+  LegacyProviderInterface as ProviderInterface,
+} from '@rango-dev/wallets-core/legacy';
+import type {
+  WalletInfo,
+  WalletState,
+  WalletType,
+} from '@rango-dev/wallets-shared';
+import type { PendingSwap, PendingSwapStep } from 'rango-types';
+
+import {
+  EventSeverity,
+  RouteEventType,
+  StepEventType,
+  StepExecutionBlockedEventStatus,
+  StepExecutionEventStatus,
+} from '@rango-dev/queue-manager-rango-preset';
+import { legacyReadAccountAddress as readAccountAddress } from '@rango-dev/wallets-core/legacy';
+import { useWallets, Events as WalletEvents } from '@rango-dev/wallets-react';
+import { Networks, WalletTypes } from '@rango-dev/wallets-shared';
+import { PendingSwapNetworkStatus } from 'rango-types';
+
+import {
+  isOnDerivationPath,
+  isOnDetached,
+  isOnNamespace,
+} from './components/StatefulConnectModal';
+import {
+  DerivationPath,
+  Detached,
+  Namespaces,
+} from './components/WalletStatefulConnect';
+import { WIDGET_UI_ID as UI_ID } from './constants';
+import { SUPPORTED_FONTS } from './constants/fonts';
+import { Refuel } from './containers/Refuel';
+import { WidgetWallets } from './containers/Wallets';
+import { Widget } from './containers/Widget';
+import { useWidget } from './containers/WidgetInfo';
+import { WidgetProvider } from './containers/WidgetProvider';
+import { useStatefulConnect } from './hooks/useStatefulConnect';
+import { SwapModeContext } from './hooks/useSwapMode';
+import { useWalletList } from './hooks/useWalletList';
+import { useWidgetEvents } from './hooks/useWidgetEvents';
+import { widgetEventEmitter } from './services/eventEmitter';
+import {
+  WidgetEvents as MainEvents,
+  QuoteEventTypes,
+  UiEventTypes,
+  WalletEventTypes,
+  WidgetEvents,
+} from './types';
+import { pickProviderVersionWithFallbackToLegacy } from './utils/providers';
+import { customizedThemeTokens } from './utils/ui';
+
+export const StatefulConnect = {
+  DerivationPath,
+  Namespaces,
+  Detached,
+  isOnDerivationPath,
+  isOnNamespace,
+  isOnDetached,
+};
+
+export type {
+  WidgetConfig,
+  WalletType,
+  WidgetTheme,
+  WidgetColors,
+  WidgetColorsKeys,
+  ProviderInterface,
+  BlockchainAndTokenConfig,
+  WidgetProps,
+  RouteEvent,
+  RouteEventData,
+  StepEvent,
+  StepEventData,
+  Route,
+  Step,
+  RouteStartedEvent,
+  RouteSucceededEvent,
+  RouteFailedEvent,
+  StepStartedEvent,
+  StepSucceededEvent,
+  StepFailedEvent,
+  StepTxExecutionUpdatedEvent,
+  StepTxExecutionBlockedEvent,
+  StepCheckStatusEvent,
+  StepApprovalTxSucceededEvent,
+  StepOutputRevealedEvent,
+  HandleWalletsUpdate,
+  ConnectedWallet,
+  Tokens,
+  WidgetVariant,
+  WalletEventData,
+  QuoteEventData,
+  UiEventData,
+  WalletInfoWithExtra,
+  UseStatefulConnect,
+};
+export {
+  Widget,
+  Refuel,
+  SwapModeContext,
+  /**
+   * @deprecated Use `WidgetProvider` instead. This component will be removed in future versions.
+   */
+  WidgetWallets,
+  WidgetProvider,
+  useWidget,
+  useWallets,
+  useStatefulConnect,
+  /**
+   * @deprecated Use `widgetEventEmitter` instead. This hook will be removed in future versions.
+   */
+  useWidgetEvents,
+  useWalletList,
+  customizedThemeTokens,
+  widgetEventEmitter,
+  WidgetEvents,
+  /**
+   * @deprecated Use `WidgetEvents` instead. This enum will be removed in future versions.
+   */
+  MainEvents,
+  QuoteEventTypes,
+  WalletEventTypes,
+  UiEventTypes,
+  RouteEventType,
+  StepEventType,
+  StepExecutionEventStatus,
+  StepExecutionBlockedEventStatus,
+  UI_ID,
+  SUPPORTED_FONTS,
+};
+
+// Internal type exports for Rango
+export type {
+  WalletState,
+  WalletInfo,
+  PendingSwap,
+  PendingSwapWithQueueID,
+  PendingSwapStep,
+  RouteExecutionEvents,
+};
+
+// Internal function and enum exports for Rango
+export {
+  readAccountAddress,
+  pickProviderVersionWithFallbackToLegacy,
+  Networks,
+  WalletEvents,
+  WalletTypes,
+  PendingSwapNetworkStatus,
+  EventSeverity,
+};

package/src/libs/tabManager/index.ts

@@ -0,0 +1,2 @@
+export { TabManager } from './tabManager';
+export type { TabManagerInterface } from './tabManager.types';

package/src/libs/tabManager/tabManager.constants.ts

@@ -0,0 +1,3 @@
+export const TIMEOUT = 300;
+export const MAXIMUM_TAB_ID = 100_000;
+export const CHANNEL_NAME = 'rango-widget';