@rango-dev/widget-embedded 0.18.0 → 0.19.0

package/package.json

@@ -1,9 +1,8 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "license": "MIT",
   "type": "module",
-  "source": "./src/index.ts",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "files": [
@@ -13,7 +12,6 @@
   "browserslist": "> 0.5%, last 2 versions, not dead",
   "scripts": {
     "build": "node ../../scripts/build/command.mjs --path widget/embedded",
-    "ts-check": "tsc --declaration --emitDeclarationOnly -p ./tsconfig.json",
     "clean": "rimraf dist",
     "format": "prettier --write '{.,src}/**/*.{ts,tsx}'",
     "lint": "eslint \"**/*.{ts,tsx}\" --ignore-path ../../.eslintignore"
@@ -21,20 +19,20 @@
   "dependencies": {
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
-    "@rango-dev/provider-all": "^0.23.0",
-    "@rango-dev/queue-manager-core": "^0.22.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.23.0",
-    "@rango-dev/queue-manager-react": "^0.22.0",
-    "@rango-dev/ui": "^0.23.0",
-    "@rango-dev/wallets-react": "^0.9.0",
-    "@rango-dev/wallets-shared": "^0.22.0",
+    "@rango-dev/provider-all": "^0.24.0",
+    "@rango-dev/queue-manager-core": "^0.23.0",
+    "@rango-dev/queue-manager-rango-preset": "^0.24.0",
+    "@rango-dev/queue-manager-react": "^0.23.0",
+    "@rango-dev/ui": "^0.24.0",
+    "@rango-dev/wallets-react": "^0.10.0",
+    "@rango-dev/wallets-shared": "^0.23.0",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",
     "immer": "^9.0.19",
     "mitt": "^3.0.0",
-    "rango-sdk": "^0.1.44",
-    "rango-types": "^0.1.57",
+    "rango-sdk": "^0.1.35",
+    "rango-types": "^0.1.46",
     "react-i18next": "^12.2.0",
     "react-router-dom": "^6.8.0",
     "values.js": "2.1.1",

package/src/QueueManager.tsx

@@ -1,23 +1,23 @@
-import type { SwapQueueContext } from '@rango-dev/queue-manager-rango-preset';
-import type { Network, WalletType } from '@rango-dev/wallets-shared';
-import type { PropsWithChildren } from 'react';
-
+import React, { PropsWithChildren, useMemo } from 'react';
+import { Provider as ManagerProvider } from '@rango-dev/queue-manager-react';
 import {
-  checkWaitingForNetworkChange,
   makeQueueDefinition,
+  SwapQueueContext,
+  checkWaitingForNetworkChange,
 } from '@rango-dev/queue-manager-rango-preset';
-import { Provider as ManagerProvider } from '@rango-dev/queue-manager-react';
 import { useWallets } from '@rango-dev/wallets-react';
-import { convertEvmBlockchainMetaToEvmChainInfo } from '@rango-dev/wallets-shared';
-import { isEvmBlockchain } from 'rango-types';
-import React, { useMemo } from 'react';
-
-import { useAppStore } from './store/AppStore';
+import {
+  convertEvmBlockchainMetaToEvmChainInfo,
+  Network,
+  WalletType,
+} from '@rango-dev/wallets-shared';
+import { useMetaStore } from './store/meta';
 import { useWalletsStore } from './store/wallets';
-import { getConfig } from './utils/configs';
 import { walletAndSupportedChainsNames } from './utils/wallets';
+import { getConfig } from './utils/configs';
+import { isEvmBlockchain } from 'rango-types';
 
-function QueueManager(props: PropsWithChildren<{ apiKey?: string }>) {
+function QueueManager(props: PropsWithChildren) {
   const {
     providers,
     getSigners,
@@ -29,12 +29,11 @@ function QueueManager(props: PropsWithChildren<{ apiKey?: string }>) {
 
   const swapQueueDef = useMemo(() => {
     return makeQueueDefinition({
-      API_KEY: props.apiKey || getConfig('API_KEY'),
-      BASE_URL: getConfig('BASE_URL'),
+      API_KEY: getConfig('API_KEY'),
     });
-  }, [props.apiKey]);
+  }, []);
 
-  const blockchains = useAppStore().blockchains();
+  const { blockchains } = useMetaStore.use.meta();
   const connectedWallets = useWalletsStore.use.connectedWallets();
 
   const wallets = {
@@ -44,7 +43,7 @@ function QueueManager(props: PropsWithChildren<{ apiKey?: string }>) {
     })),
   };
 
-  const switchNetwork = async (wallet: WalletType, network: Network) => {
+  const switchNetwork = (wallet: WalletType, network: Network) => {
     if (!canSwitchNetworkTo(wallet, network)) {
       return undefined;
     }

package/src/{containers/Wallets/Wallets.tsx → Wallets.tsx}

@@ -1,25 +1,25 @@
-import type {
-  OnConnectHandler,
-  PropTypes,
-  WidgetContextInterface,
-} from './Wallets.types';
-import type { ProvidersOptions } from '../../utils/providers';
+import type { WidgetConfig } from './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';
 
 import { Events, Provider } from '@rango-dev/wallets-react';
 import { isEvmBlockchain } from 'rango-sdk';
-import React, { createContext, useEffect, useRef } from 'react';
+import React, { createContext, useRef } from 'react';
 
-import { useSyncStoresWithConfig } from '../../hooks/useSyncStoresWithConfig';
-import { useWalletProviders } from '../../hooks/useWalletProviders';
-import { AppStoreProvider, useAppStore } from '../../store/AppStore';
-import { useWalletsStore } from '../../store/wallets';
+import { useWalletProviders } from './hooks/useWalletProviders';
+import { useMetaStore } from './store/meta';
+import { useWalletsStore } from './store/wallets';
 import {
   prepareAccountsForWalletStore,
   walletAndSupportedChainsNames,
-} from '../../utils/wallets';
+} from './utils/wallets';
+
+type OnConnectHandler = (key: string) => void;
+interface WidgetContextInterface {
+  onConnectWallet(handler: OnConnectHandler): void;
+}
 
 export const WidgetContext = createContext<WidgetContextInterface>({
   onConnectWallet: () => {
@@ -27,46 +27,41 @@ export const WidgetContext = createContext<WidgetContextInterface>({
   },
 });
 
-function Main(props: PropsWithChildren<PropTypes>) {
-  const { updateConfig, updateSettings, fetch: fetchMeta } = useAppStore();
-  const blockchains = useAppStore().blockchains();
-  const tokens = useAppStore().tokens();
-  const walletOptions: ProvidersOptions = {
-    walletConnectProjectId: props.config?.walletConnectProjectId,
-  };
-  const { providers } = useWalletProviders(props.config.wallets, walletOptions);
-  const { connectWallet, disconnectWallet } = useWalletsStore();
+export function WidgetWallets(
+  props: PropsWithChildren<{
+    providers: WidgetConfig['wallets'];
+    options?: ProvidersOptions;
+    onUpdateState?: EventHandler;
+  }>
+) {
+  const { blockchains } = useMetaStore.use.meta();
+  const { providers } = useWalletProviders(props.providers, props?.options);
+  const disconnectWallet = useWalletsStore.use.disconnectWallet();
+  const connectWallet = useWalletsStore.use.connectWallet();
   const onConnectWalletHandler = useRef<OnConnectHandler>();
-  useSyncStoresWithConfig();
-
-  useEffect(() => {
-    void fetchMeta().catch(console.log);
-  }, []);
-
-  useEffect(() => {
-    if (props.config) {
-      updateConfig(props.config);
-      updateSettings(props.config);
-    }
-  }, [props.config]);
 
   const evmBasedChainNames = blockchains
     .filter(isEvmBlockchain)
     .map((chain) => chain.name);
 
-  const onUpdateState: EventHandler = (type, event, value, state, meta) => {
+  const onUpdateState: EventHandler = (
+    type,
+    event,
+    value,
+    state,
+    supportedBlockchains
+  ) => {
     if (event === Events.ACCOUNTS) {
       if (value) {
         const supportedChainNames: Network[] | null =
-          walletAndSupportedChainsNames(meta.supportedBlockchains);
+          walletAndSupportedChainsNames(supportedBlockchains);
         const data = prepareAccountsForWalletStore(
           type,
           value,
           evmBasedChainNames,
-          supportedChainNames,
-          meta.isContractWallet
+          supportedChainNames
         );
-        connectWallet(data, tokens);
+        connectWallet(data);
       } else {
         disconnectWallet(type);
       }
@@ -96,7 +91,7 @@ function Main(props: PropsWithChildren<PropTypes>) {
 
     // propagate updates for Dapps using external wallets
     if (props.onUpdateState) {
-      props.onUpdateState(type, event, value, state, meta);
+      props.onUpdateState(type, event, value, state, supportedBlockchains);
     }
   };
   return (
@@ -117,12 +112,3 @@ function Main(props: PropsWithChildren<PropTypes>) {
     </WidgetContext.Provider>
   );
 }
-
-export function WidgetWallets(props: PropsWithChildren<PropTypes>) {
-  const { config, ...otherProps } = props;
-  return (
-    <AppStoreProvider config={config}>
-      <Main {...otherProps} config={config} />
-    </AppStoreProvider>
-  );
-}

package/src/Widget.tsx

@@ -0,0 +1,119 @@
+import type { WidgetConfig } from './types';
+import type { WalletType } from '@rango-dev/wallets-shared';
+import type { PropsWithChildren } from 'react';
+
+import { I18nManager, styled } 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 QueueManager from './QueueManager';
+import { useAppStore } from './store/app';
+import { useMetaStore } from './store/meta';
+import { useNotificationStore } from './store/notification';
+import { useSettingsStore } from './store/settings';
+import { initConfig } from './utils/configs';
+import { WidgetContext, WidgetWallets } from './Wallets';
+
+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',
+  },
+});
+
+export type WidgetProps = {
+  config?: WidgetConfig;
+};
+
+export function Main(props: PropsWithChildren<WidgetProps>) {
+  const { config } = props;
+  globalFont();
+
+  const { activeTheme } = useTheme(config?.theme || {});
+  const { activeLanguage, changeLanguage } = useLanguage();
+
+  const [lastConnectedWalletWithNetwork, setLastConnectedWalletWithNetwork] =
+    useState<string>('');
+  const [disconnectedWallet, setDisconnectedWallet] = useState<WalletType>();
+  const widgetContext = useContext(WidgetContext);
+  const fetchMeta = useMetaStore.use.fetchMeta();
+
+  useMemo(() => {
+    if (config?.apiKey) {
+      initConfig({
+        API_KEY: config?.apiKey,
+      });
+    }
+  }, [config]);
+
+  useEffect(() => {
+    void fetchMeta();
+    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()}>
+        <QueueManager>
+          <WidgetEvents />
+          <AppRouter
+            config={config}
+            lastConnectedWallet={lastConnectedWalletWithNetwork}
+            disconnectedWallet={disconnectedWallet}
+            clearDisconnectedWallet={() => {
+              setDisconnectedWallet(undefined);
+            }}>
+            <AppRoutes config={config} />
+          </AppRouter>
+        </QueueManager>
+      </MainContainer>
+    </I18nManager>
+  );
+}
+
+export function Widget(props: PropsWithChildren<WidgetProps>) {
+  const { updateConfig, config } = useAppStore();
+  useEffect(() => {
+    if (props.config) {
+      updateConfig(props.config);
+    }
+  }, [props.config]);
+
+  if (!props.config?.externalWallets) {
+    return (
+      <WidgetWallets
+        providers={config?.wallets}
+        options={{
+          walletConnectProjectId:
+            config?.walletConnectProjectId ||
+            props.config?.walletConnectProjectId,
+        }}>
+        <Main {...props} />
+      </WidgetWallets>
+    );
+  }
+  return <Main {...props} />;
+}

package/src/components/AppRouter.tsx

@@ -1,17 +1,42 @@
+import type { WidgetConfig } from '../types';
 import type { WalletType } from '@rango-dev/wallets-shared';
 import type { PropsWithChildren } from 'react';
 
 import { useQueueManager } from '@rango-dev/queue-manager-rango-preset';
 import { useWallets } from '@rango-dev/wallets-react';
 import { isEvmBlockchain } from 'rango-types';
-import React, { Fragment } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { MemoryRouter, useInRouterContext } from 'react-router';
+import { useLocation, useNavigate } from 'react-router-dom';
 
-import { useForceAutoConnect } from '../hooks/useForceAutoConnect';
-import { useAppStore } from '../store/AppStore';
+import { navigationRoutes } from '../constants/navigationRoutes';
+import { Home } from '../pages/Home';
+import { useMetaStore } from '../store/meta';
 
 import { UpdateUrl } from './UpdateUrl';
 
+function Route(props: PropsWithChildren) {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const firstRender = useRef(true);
+  const paths = location.pathname.split('/');
+  const pathMatched = paths[paths.length - 1] === navigationRoutes.confirmSwap;
+  const shouldRedirectToMainPage = pathMatched && firstRender.current;
+
+  useEffect(() => {
+    if (shouldRedirectToMainPage) {
+      navigate('.');
+    }
+    firstRender.current = false;
+  }, []);
+
+  if (shouldRedirectToMainPage) {
+    return <Home />;
+  }
+
+  return <> {props.children}</>;
+}
+
 export function AppRouter({
   children,
   ...props
@@ -19,14 +44,13 @@ export function AppRouter({
   lastConnectedWallet: string;
   disconnectedWallet: WalletType | undefined;
   clearDisconnectedWallet: () => void;
+  config: WidgetConfig | undefined;
 }) {
   const isRouterInContext = useInRouterContext();
-  const Router = isRouterInContext ? Fragment : MemoryRouter;
-  const blockchains = useAppStore().blockchains();
+  const Router = isRouterInContext ? Route : MemoryRouter;
+  const { blockchains } = useMetaStore.use.meta();
   const { canSwitchNetworkTo } = useWallets();
 
-  useForceAutoConnect();
-
   const evmChains = blockchains.filter(isEvmBlockchain);
 
   useQueueManager({
@@ -40,7 +64,7 @@ export function AppRouter({
   return (
     <>
       <Router>{children}</Router>
-      {isRouterInContext && <UpdateUrl />}
+      {isRouterInContext && <UpdateUrl config={props.config} />}
     </>
   );
 }

package/src/components/AppRoutes.tsx

@@ -1,3 +1,5 @@
+import type { WidgetConfig } from '../types';
+
 import React from 'react';
 import { useRoutes } from 'react-router-dom';
 
@@ -14,7 +16,15 @@ import { SwapDetailsPage } from '../pages/SwapDetailsPage';
 import { ThemePage } from '../pages/ThemePage';
 import { WalletsPage } from '../pages/WalletsPage';
 
-export function AppRoutes() {
+const getAbsolutePath = (path: string) => path.replace('/', '');
+
+interface PropTypes {
+  config?: WidgetConfig;
+}
+
+export function AppRoutes(props: PropTypes) {
+  const { config } = props;
+
   return useRoutes([
     {
       path: navigationRoutes.home,
@@ -22,75 +32,77 @@ export function AppRoutes() {
     },
     {
       path: navigationRoutes.fromSwap,
-      children: [
-        {
-          index: true,
-          element: <SelectSwapItemsPage type="source" />,
-        },
-        {
-          path: navigationRoutes.blockchains,
-          element: <SelectBlockchainPage type="source" />,
-        },
-      ],
+      element: <SelectSwapItemsPage type="source" />,
     },
     {
       path: navigationRoutes.toSwap,
-      children: [
-        {
-          index: true,
-          element: <SelectSwapItemsPage type="destination" />,
-        },
-        {
-          path: navigationRoutes.blockchains,
-          element: <SelectBlockchainPage type="destination" />,
-        },
-      ],
+      element: <SelectSwapItemsPage type="destination" />,
+    },
+    {
+      path: navigationRoutes.fromBlockchain,
+      element: <SelectBlockchainPage type="source" />,
+    },
+    {
+      path: navigationRoutes.toBlockchain,
+      element: <SelectBlockchainPage type="destination" />,
     },
     {
       path: navigationRoutes.settings,
-      children: [
-        {
-          index: true,
-          element: <SettingsPage />,
-        },
-        {
-          path: navigationRoutes.themes,
-          element: <ThemePage />,
-        },
-        {
-          path: navigationRoutes.languages,
-          element: <LanguagePage />,
-        },
-        {
-          path: navigationRoutes.exchanges,
-          element: <LiquiditySourcePage sourceType="Exchanges" />,
-        },
-        {
-          path: navigationRoutes.bridges,
-          element: <LiquiditySourcePage sourceType="Bridges" />,
-        },
-      ],
+      element: (
+        <SettingsPage
+          singleTheme={config?.theme?.singleTheme}
+          supportedSwappers={config?.liquiditySources}
+        />
+      ),
+    },
+    {
+      path: navigationRoutes.themes,
+      element: <ThemePage />,
+    },
+    {
+      path: navigationRoutes.languages,
+      element: <LanguagePage />,
+    },
+    {
+      path: navigationRoutes.exchanges,
+      element: (
+        <LiquiditySourcePage
+          sourceType="Exchanges"
+          supportedSwappers={config?.liquiditySources}
+        />
+      ),
+    },
+    {
+      path: navigationRoutes.bridges,
+      element: (
+        <LiquiditySourcePage
+          sourceType="Bridges"
+          supportedSwappers={config?.liquiditySources}
+        />
+      ),
     },
+    { path: navigationRoutes.swaps, element: <HistoryPage /> },
     {
-      path: navigationRoutes.swaps,
-      children: [
-        {
-          index: true,
-          element: <HistoryPage />,
-        },
-        {
-          path: navigationRoutes.swapDetails,
-          element: <SwapDetailsPage />,
-        },
-      ],
+      path: navigationRoutes.swapDetails,
+      element: <SwapDetailsPage />,
     },
     {
       path: navigationRoutes.wallets,
-      element: <WalletsPage />,
+      element: (
+        <WalletsPage
+          supportedWallets={config?.wallets}
+          multiWallets={
+            typeof config?.multiWallets === 'undefined'
+              ? true
+              : config.multiWallets
+          }
+          config={config}
+        />
+      ),
     },
     {
-      path: navigationRoutes.confirmSwap,
-      element: <ConfirmSwapPage />,
+      path: getAbsolutePath(navigationRoutes.confirmSwap),
+      element: <ConfirmSwapPage config={config} />,
     },
   ]);
 }

package/src/components/BlockchainList/BlockchainList.styles.ts

@@ -1,4 +1,4 @@
-import { ImageContainer, styled } from '@rango-dev/ui';
+import { styled } from '@rango-dev/ui';
 
 export const Container = styled('div', {
   display: 'flex',
@@ -12,7 +12,7 @@ export const List = styled('ul', {
   listStyle: 'none',
   overflowY: 'auto',
   paddingRight: '$5',
-  [`& ${ImageContainer}`]: {
+  '.image-container': {
     borderRadius: '$xm',
     overflow: 'hidden',
   },

package/src/components/BlockchainList/BlockchainList.tsx

@@ -11,7 +11,7 @@ import {
 } from '@rango-dev/ui';
 import React, { useEffect, useState } from 'react';
 
-import { useAppStore } from '../../store/AppStore';
+import { useMetaStore } from '../../store/meta';
 
 import { filterBlockchains } from './BlockchainList.helpers';
 import { Container, List } from './BlockchainList.styles';
@@ -20,7 +20,7 @@ import { LoadingBlockchainList } from './LoadingBlockchainList';
 export function BlockchainList(props: PropTypes) {
   const { list, searchedFor, onChange, blockchainCategory } = props;
   const [blockchains, setBlockchains] = useState<BlockchainMeta[]>(list);
-  const { fetchStatus } = useAppStore();
+  const loadingStatus = useMetaStore.use.loadingStatus();
 
   useEffect(() => {
     setBlockchains([
@@ -66,8 +66,8 @@ export function BlockchainList(props: PropTypes) {
         {i18n.t('Select Blockchain')}
       </Typography>
       <Divider size={4} />
-      {fetchStatus === 'loading' && <LoadingBlockchainList />}
-      {fetchStatus === 'success' && renderList()}
+      {loadingStatus === 'loading' && <LoadingBlockchainList />}
+      {loadingStatus === 'success' && renderList()}
     </Container>
   );
 }

package/src/components/BlockchainsSection/BlockchainsSection.styles.ts

@@ -1,6 +1,6 @@
 import { styled } from '@rango-dev/ui';
 
-export const Blockchains = styled('div', {
+export const Container = styled('div', {
   display: 'grid',
   gap: '$10',
   gridTemplateColumns: 'repeat(6, minmax(0, 1fr))',