feat:(widget-v2) add useWidget hook

widget/embedded/src/QueueManager.tsx

@@ -17,7 +17,7 @@ import { useWalletsStore } from './store/wallets';
 import { getConfig } from './utils/configs';
 import { walletAndSupportedChainsNames } from './utils/wallets';
 
-function QueueManager(props: PropsWithChildren) {
+function QueueManager(props: PropsWithChildren<{ apiKey?: string }>) {
   const {
     providers,
     getSigners,
@@ -29,9 +29,9 @@ function QueueManager(props: PropsWithChildren) {
 
   const swapQueueDef = useMemo(() => {
     return makeQueueDefinition({
-      API_KEY: getConfig('API_KEY'),
+      API_KEY: props.apiKey || getConfig('API_KEY'),
     });
-  }, []);
+  }, [props.apiKey]);
 
   const blockchains = useAppStore().blockchains();
   const connectedWallets = useWalletsStore.use.connectedWallets();

widget/embedded/src/containers/App/App.styles.ts

@@ -0,0 +1,18 @@
+import { styled } from '@rango-dev/ui';
+
+export const MainContainer = styled('div', {
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  fontFamily: '$widget',
+  boxSizing: 'border-box',
+  '& *, *::before, *::after': {
+    boxSizing: 'inherit',
+    listStyleType: 'none',
+  },
+  '& *:focus-visible': {
+    outlineColor: '$info500',
+    transition: 'none',
+  },
+});

widget/embedded/src/containers/App/App.tsx

@@ -0,0 +1,65 @@
+import type { WalletType } from '@rango-dev/wallets-shared';
+
+import { I18nManager } from '@rango-dev/ui';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
+
+import { AppRouter } from '../../components/AppRouter';
+import { AppRoutes } from '../../components/AppRoutes';
+import { WidgetEvents } from '../../components/WidgetEvents';
+import { globalFont } from '../../globalStyles';
+import { useLanguage } from '../../hooks/useLanguage';
+import { useTheme } from '../../hooks/useTheme';
+import { useAppStore } from '../../store/AppStore';
+import { useNotificationStore } from '../../store/notification';
+import { useSettingsStore } from '../../store/settings';
+import { initConfig } from '../../utils/configs';
+import { WidgetContext } from '../Wallets';
+
+import { MainContainer } from './App.styles';
+
+export function Main() {
+  globalFont();
+
+  const { fetch: fetchMeta, config } = useAppStore();
+  const { activeTheme } = useTheme(config?.theme || {});
+  const { activeLanguage, changeLanguage } = useLanguage();
+  const [lastConnectedWalletWithNetwork, setLastConnectedWalletWithNetwork] =
+    useState<string>('');
+  const [disconnectedWallet, setDisconnectedWallet] = useState<WalletType>();
+  const widgetContext = useContext(WidgetContext);
+
+  useMemo(() => {
+    if (config?.apiKey) {
+      initConfig({
+        API_KEY: config?.apiKey,
+      });
+    }
+  }, [config]);
+  useEffect(() => {
+    void fetchMeta().catch();
+    void useSettingsStore.persist.rehydrate();
+    void useNotificationStore.persist.rehydrate();
+    widgetContext.onConnectWallet(setLastConnectedWalletWithNetwork);
+  }, []);
+  useEffect(() => {
+    if (config?.language) {
+      changeLanguage(config.language);
+    }
+  }, [config?.language]);
+
+  return (
+    <I18nManager language={activeLanguage}>
+      <MainContainer id="swap-container" className={activeTheme()}>
+        <WidgetEvents />
+        <AppRouter
+          lastConnectedWallet={lastConnectedWalletWithNetwork}
+          disconnectedWallet={disconnectedWallet}
+          clearDisconnectedWallet={() => {
+            setDisconnectedWallet(undefined);
+          }}>
+          <AppRoutes />
+        </AppRouter>
+      </MainContainer>
+    </I18nManager>
+  );
+}

widget/embedded/src/containers/App/index.ts

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

widget/embedded/src/Wallets.tsx → widget/embedded/src/containers/Wallets/Wallets.tsx

@@ -1,5 +1,9 @@
-import type { WidgetConfig } from './types';
-import type { ProvidersOptions } from './utils/providers';
+import type {
+  OnConnectHandler,
+  PropTypes,
+  WidgetContextInterface,
+} from './Wallets.types';
+import type { ProvidersOptions } from '../../utils/providers';
 import type { EventHandler } from '@rango-dev/wallets-react';
 import type { Network } from '@rango-dev/wallets-shared';
 import type { PropsWithChildren } from 'react';
@@ -8,37 +12,28 @@ import { Events, Provider } from '@rango-dev/wallets-react';
 import { isEvmBlockchain } from 'rango-sdk';
 import React, { createContext, useEffect, useRef } from 'react';
 
-import { useWalletProviders } from './hooks/useWalletProviders';
-import { AppStoreProvider, useAppStore } from './store/AppStore';
-import { useWalletsStore } from './store/wallets';
+import { useWalletProviders } from '../../hooks/useWalletProviders';
+import { AppStoreProvider, useAppStore } from '../../store/AppStore';
+import { useWalletsStore } from '../../store/wallets';
 import {
   prepareAccountsForWalletStore,
   walletAndSupportedChainsNames,
-} from './utils/wallets';
-
-type OnConnectHandler = (key: string) => void;
-interface WidgetContextInterface {
-  onConnectWallet(handler: OnConnectHandler): void;
-}
+} from '../../utils/wallets';
 
 export const WidgetContext = createContext<WidgetContextInterface>({
   onConnectWallet: () => {
     return;
   },
 });
 
-function Main(
-  props: PropsWithChildren<{
-    providers: WidgetConfig['wallets'];
-    options?: ProvidersOptions;
-    onUpdateState?: EventHandler;
-    config: WidgetConfig;
-  }>
-) {
+function Main(props: PropsWithChildren<PropTypes>) {
   const updateConfig = useAppStore().updateConfig;
   const blockchains = useAppStore().blockchains();
   const tokens = useAppStore().tokens();
-  const { providers } = useWalletProviders(props.providers, props?.options);
+  const walletOptions: ProvidersOptions = {
+    walletConnectProjectId: props.config?.walletConnectProjectId,
+  };
+  const { providers } = useWalletProviders(props.config.wallets, walletOptions);
   const disconnectWallet = useWalletsStore.use.disconnectWallet();
   const connectWallet = useWalletsStore.use.connectWallet();
   const onConnectWalletHandler = useRef<OnConnectHandler>();
@@ -117,14 +112,7 @@ function Main(
   );
 }
 
-export function WidgetWallets(
-  props: PropsWithChildren<{
-    providers: WidgetConfig['wallets'];
-    options?: ProvidersOptions;
-    onUpdateState?: EventHandler;
-    config: WidgetConfig;
-  }>
-) {
+export function WidgetWallets(props: PropsWithChildren<PropTypes>) {
   const { config, ...otherProps } = props;
   return (
     <AppStoreProvider config={config}>

widget/embedded/src/containers/Wallets/Wallets.types.ts

@@ -0,0 +1,12 @@
+import type { WidgetConfig } from '../../types';
+import type { EventHandler } from '@rango-dev/wallets-react';
+
+export type OnConnectHandler = (key: string) => void;
+export interface WidgetContextInterface {
+  onConnectWallet(handler: OnConnectHandler): void;
+}
+
+export interface PropTypes {
+  onUpdateState?: EventHandler;
+  config: WidgetConfig;
+}

widget/embedded/src/containers/Wallets/index.ts

@@ -0,0 +1 @@
+export { WidgetWallets, WidgetContext } from './Wallets';

widget/embedded/src/containers/Widget/Widget.tsx

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

widget/embedded/src/containers/Widget/Widget.types.ts

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

widget/embedded/src/containers/Widget/index.ts

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

widget/embedded/src/containers/WidgetInfo/WidgetInfo.tsx

@@ -0,0 +1,36 @@
+import type { WidgetInfoContextInterface } from './WidgetInfo.types';
+
+import { useManager } from '@rango-dev/queue-manager-react';
+import React, { createContext, useContext, useMemo } from 'react';
+
+import { getPendingSwaps } from '../../utils/queue';
+
+export const WidgetInfoContext = createContext<
+  WidgetInfoContextInterface | undefined
+>(undefined);
+
+export function WidgetInfo(props: React.PropsWithChildren) {
+  const { manager } = useManager();
+  const swaps = getPendingSwaps(manager);
+  const value = useMemo(() => {
+    return {
+      swaps,
+    };
+  }, [manager, swaps]);
+
+  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;
+}

widget/embedded/src/containers/WidgetInfo/WidgetInfo.types.ts

@@ -0,0 +1,5 @@
+import type { PendingSwapWithQueueID } from '@rango-dev/queue-manager-rango-preset';
+
+export interface WidgetInfoContextInterface {
+  swaps?: PendingSwapWithQueueID[];
+}

widget/embedded/src/containers/WidgetInfo/index.ts

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

widget/embedded/src/containers/WidgetProvider/WidgetProvider.tsx

@@ -0,0 +1,19 @@
+import type { PropTypes } from './WidgetProvider.types';
+import type { PropsWithChildren } from 'react';
+
+import React from 'react';
+
+import QueueManager from '../../QueueManager';
+import { WidgetWallets } from '../Wallets';
+import { WidgetInfo } from '../WidgetInfo';
+
+export function WidgetProvider(props: PropsWithChildren<PropTypes>) {
+  const { onUpdateState, config } = props;
+  return (
+    <WidgetWallets config={config} onUpdateState={onUpdateState}>
+      <QueueManager apiKey={config.apiKey}>
+        <WidgetInfo>{props.children}</WidgetInfo>
+      </QueueManager>
+    </WidgetWallets>
+  );
+}