@rango-dev/widget-embedded 0.12.1-next.3 → 0.12.1-next.31

package/src/Widget.tsx

@@ -1,30 +1,37 @@
-import { SwapContainer, styled, I18nManager } from '@rango-dev/ui';
-import React, {
-  PropsWithChildren,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
+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 { WalletType } from '@rango-dev/wallets-shared';
-import { Layout } from './components/Layout';
+import { AppRoutes } from './components/AppRoutes';
+import { WidgetEvents } from './components/WidgetEvents';
 import { globalFont } from './globalStyles';
 import { useTheme } from './hooks/useTheme';
-import { WidgetConfig } from './types';
 import QueueManager from './QueueManager';
-import { useUiStore } from './store/ui';
-import { navigationRoutes } from './constants/navigationRoutes';
+import { useAppStore } from './store/app';
+import { useNotificationStore } from './store/notification';
+import { useSettingsStore } from './store/settings';
 import { initConfig } from './utils/configs';
 import { WidgetContext, WidgetWallets } from './Wallets';
-import { WidgetEvents } from './components/WidgetEvents';
-import { useSettingsStore } from './store/settings';
 
 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': {
+    outline: '1px $info500 solid',
+    transition: 'none',
+  },
 });
 
 export type WidgetProps = {
@@ -33,13 +40,12 @@ export type WidgetProps = {
 
 export function Main(props: PropsWithChildren<WidgetProps>) {
   const { config } = props;
-  globalFont(config?.theme?.fontFamily || 'Roboto');
+  globalFont();
 
   const { activeTheme } = useTheme(config?.theme || {});
   const [lastConnectedWalletWithNetwork, setLastConnectedWalletWithNetwork] =
     useState<string>('');
   const [disconnectedWallet, setDisconnectedWallet] = useState<WalletType>();
-  const currentPage = useUiStore.use.currentPage();
   const widgetContext = useContext(WidgetContext);
 
   useMemo(() => {
@@ -51,7 +57,8 @@ export function Main(props: PropsWithChildren<WidgetProps>) {
   }, [config]);
 
   useEffect(() => {
-    useSettingsStore.persist.rehydrate();
+    void useSettingsStore.persist.rehydrate();
+    void useNotificationStore.persist.rehydrate();
     widgetContext.onConnectWallet(setLastConnectedWalletWithNetwork);
   }, []);
 
@@ -60,16 +67,15 @@ export function Main(props: PropsWithChildren<WidgetProps>) {
       <MainContainer id="swap-container" className={activeTheme}>
         <QueueManager>
           <WidgetEvents />
-          <SwapContainer fixedHeight={currentPage !== navigationRoutes.home}>
-            <AppRouter
-              lastConnectedWallet={lastConnectedWalletWithNetwork}
-              disconnectedWallet={disconnectedWallet}
-              clearDisconnectedWallet={() => {
-                setDisconnectedWallet(undefined);
-              }}>
-              <Layout config={config} />
-            </AppRouter>
-          </SwapContainer>
+          <AppRouter
+            config={config}
+            lastConnectedWallet={lastConnectedWalletWithNetwork}
+            disconnectedWallet={disconnectedWallet}
+            clearDisconnectedWallet={() => {
+              setDisconnectedWallet(undefined);
+            }}>
+            <AppRoutes config={config} />
+          </AppRouter>
         </QueueManager>
       </MainContainer>
     </I18nManager>
@@ -77,12 +83,19 @@ export function Main(props: PropsWithChildren<WidgetProps>) {
 }
 
 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={props.config?.wallets}
+        providers={config?.wallets}
         options={{
-          walletConnectProjectId: props.config?.walletConnectProjectId,
+          walletConnectProjectId: config?.walletConnectProjectId,
         }}>
         <Main {...props} />
       </WidgetWallets>

package/src/components/AppRouter.tsx

@@ -1,11 +1,41 @@
-import React, { Fragment, PropsWithChildren } from 'react';
-import { MemoryRouter, useInRouterContext } from 'react-router';
+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 { WalletType } from '@rango-dev/wallets-shared';
-import { UpdateUrl } from './UpdateUrl';
-import { useMetaStore } from '../store/meta';
 import { useWallets } from '@rango-dev/wallets-react';
 import { isEvmBlockchain } from 'rango-types';
+import React, { useEffect, useRef } from 'react';
+import { MemoryRouter, useInRouterContext } from 'react-router';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+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,
@@ -14,9 +44,10 @@ export function AppRouter({
   lastConnectedWallet: string;
   disconnectedWallet: WalletType | undefined;
   clearDisconnectedWallet: () => void;
+  config: WidgetConfig | undefined;
 }) {
   const isRouterInContext = useInRouterContext();
-  const Router = isRouterInContext ? Fragment : MemoryRouter;
+  const Router = isRouterInContext ? Route : MemoryRouter;
   const { blockchains } = useMetaStore.use.meta();
   const { canSwitchNetworkTo } = useWallets();
 
@@ -33,7 +64,7 @@ export function AppRouter({
   return (
     <>
       <Router>{children}</Router>
-      {isRouterInContext && <UpdateUrl />}
+      {isRouterInContext && <UpdateUrl config={props.config} />}
     </>
   );
 }

package/src/components/AppRoutes.tsx

@@ -1,16 +1,20 @@
+import type { WidgetConfig } from '../types';
+
 import React from 'react';
 import { useRoutes } from 'react-router-dom';
+
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { ConfirmSwapPage } from '../pages/ConfirmSwapPage';
 import { HistoryPage } from '../pages/HistoryPage';
 import { Home } from '../pages/Home';
-import { LiquiditySourcePage } from '../pages/LiquiditySourcesPage';
-import { SelectChainPage } from '../pages/SelectChainPage';
-import { SelectTokenPage } from '../pages/SelectTokenPage';
+import { LanguagePage } from '../pages/LanguagePage';
+import { LiquiditySourcePage } from '../pages/LiquiditySourcePage';
+import { SelectBlockchainPage } from '../pages/SelectBlockchainPage';
+import { SelectSwapItemsPage } from '../pages/SelectSwapItemsPage';
 import { SettingsPage } from '../pages/SettingsPage';
-import { WalletsPage } from '../pages/WalletsPage';
 import { SwapDetailsPage } from '../pages/SwapDetailsPage';
-import { WidgetConfig } from '../types';
+import { ThemePage } from '../pages/ThemePage';
+import { WalletsPage } from '../pages/WalletsPage';
 
 const getAbsolutePath = (path: string) => path.replace('/', '');
 
@@ -27,31 +31,20 @@ export function AppRoutes(props: PropTypes) {
       element: <Home />,
     },
     {
-      path: navigationRoutes.fromChain,
-      element: (
-        <SelectChainPage
-          type="from"
-          supportedChains={config?.from?.blockchains}
-        />
-      ),
+      path: navigationRoutes.fromSwap,
+      element: <SelectSwapItemsPage type="source" />,
     },
     {
-      path: navigationRoutes.toChain,
-      element: (
-        <SelectChainPage type="to" supportedChains={config?.to?.blockchains} />
-      ),
+      path: navigationRoutes.toSwap,
+      element: <SelectSwapItemsPage type="destination" />,
     },
     {
-      path: navigationRoutes.fromToken,
-      element: (
-        <SelectTokenPage type="from" supportedTokens={config?.from?.tokens} />
-      ),
+      path: navigationRoutes.fromBlockchain,
+      element: <SelectBlockchainPage type="source" />,
     },
     {
-      path: navigationRoutes.toToken,
-      element: (
-        <SelectTokenPage type="to" supportedTokens={config?.to?.tokens} />
-      ),
+      path: navigationRoutes.toBlockchain,
+      element: <SelectBlockchainPage type="destination" />,
     },
     {
       path: navigationRoutes.settings,
@@ -63,9 +56,29 @@ export function AppRoutes(props: PropTypes) {
       ),
     },
     {
-      path: navigationRoutes.liquiditySources,
+      path: navigationRoutes.themes,
+      element: <ThemePage />,
+    },
+    {
+      path: navigationRoutes.languages,
+      element: <LanguagePage />,
+    },
+    {
+      path: navigationRoutes.exchanges,
       element: (
-        <LiquiditySourcePage supportedSwappers={config?.liquiditySources} />
+        <LiquiditySourcePage
+          sourceType="Exchanges"
+          supportedSwappers={config?.liquiditySources}
+        />
+      ),
+    },
+    {
+      path: navigationRoutes.bridges,
+      element: (
+        <LiquiditySourcePage
+          sourceType="Bridges"
+          supportedSwappers={config?.liquiditySources}
+        />
       ),
     },
     { path: navigationRoutes.swaps, element: <HistoryPage /> },
@@ -89,9 +102,7 @@ export function AppRoutes(props: PropTypes) {
     },
     {
       path: getAbsolutePath(navigationRoutes.confirmSwap),
-      element: (
-        <ConfirmSwapPage customDestinationEnabled={config?.customDestination} />
-      ),
+      element: <ConfirmSwapPage config={config} />,
     },
   ]);
 }

package/src/components/BlockchainList/BlockchainList.helpers.ts

@@ -0,0 +1,37 @@
+import { BlockchainCategories } from '@rango-dev/ui';
+import { type BlockchainMeta, TransactionType } from 'rango-sdk';
+
+import { containsText } from '../../utils/common';
+
+export const filterByType = (
+  blockchain: BlockchainMeta,
+  type: string
+): boolean => {
+  switch (type) {
+    case BlockchainCategories.ALL:
+      return true;
+    case BlockchainCategories.UTXO:
+      return blockchain.type === TransactionType.TRANSFER;
+    case BlockchainCategories.OTHER:
+      return (
+        blockchain.type !== TransactionType.TRANSFER &&
+        blockchain.type !== TransactionType.COSMOS &&
+        blockchain.type !== TransactionType.EVM
+      );
+    default:
+      return blockchain.type === type;
+  }
+};
+
+export const filterBlockchains = (
+  list: BlockchainMeta[],
+  searchedFor: string,
+  blockchainType: string
+) =>
+  list
+    .filter((blockchain) => filterByType(blockchain, blockchainType))
+    .filter(
+      (blockchain) =>
+        containsText(blockchain.name, searchedFor) ||
+        containsText(blockchain.displayName, searchedFor)
+    );

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

@@ -0,0 +1,19 @@
+import { styled } from '@rango-dev/ui';
+
+export const Container = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  overflow: 'hidden',
+});
+
+export const List = styled('ul', {
+  padding: 0,
+  margin: 0,
+  listStyle: 'none',
+  overflowY: 'auto',
+  paddingRight: '$5',
+  '.image-container': {
+    borderRadius: '$xm',
+    overflow: 'hidden',
+  },
+});

package/src/components/BlockchainList/BlockchainList.tsx

@@ -0,0 +1,73 @@
+import type { PropTypes } from './BlockchainList.types';
+import type { BlockchainMeta } from 'rango-sdk';
+
+import { i18n } from '@lingui/core';
+import {
+  Divider,
+  Image,
+  ListItemButton,
+  NotFound,
+  Typography,
+} from '@rango-dev/ui';
+import React, { useEffect, useState } from 'react';
+
+import { useMetaStore } from '../../store/meta';
+
+import { filterBlockchains } from './BlockchainList.helpers';
+import { Container, List } from './BlockchainList.styles';
+import { LoadingBlockchainList } from './LoadingBlockchainList';
+
+export function BlockchainList(props: PropTypes) {
+  const { list, searchedFor, onChange, blockchainCategory } = props;
+  const [blockchains, setBlockchains] = useState<BlockchainMeta[]>(list);
+  const loadingStatus = useMetaStore.use.loadingStatus();
+
+  useEffect(() => {
+    setBlockchains([
+      ...filterBlockchains(list, searchedFor, blockchainCategory),
+    ]);
+  }, [list, searchedFor, blockchainCategory]);
+
+  const renderList = () => {
+    if (!blockchains.length && !!searchedFor) {
+      return (
+        <>
+          <Divider size={32} />
+          <NotFound
+            title={i18n.t('No results found')}
+            description={i18n.t('Try using different keywords')}
+          />
+        </>
+      );
+    }
+    return (
+      <List key={`${blockchainCategory}-${searchedFor}`}>
+        {blockchains.map((item) => (
+          <ListItemButton
+            key={`${item.name}-${item.chainId}`}
+            hasDivider
+            onClick={() => onChange(item)}
+            start={<Image src={item.logo} size={30} />}
+            title={
+              <Typography variant="title" size="medium">
+                {item.displayName}
+              </Typography>
+            }
+            id={item.chainId as string}
+          />
+        ))}
+      </List>
+    );
+  };
+
+  return (
+    <Container>
+      <Typography variant="label" size="large">
+        {i18n.t('Select Blockchain')}
+      </Typography>
+      <Divider size={4} />
+      {loadingStatus === 'loading' && <LoadingBlockchainList />}
+      {loadingStatus === 'success' && renderList()}
+    </Container>
+  );
+}

package/src/components/BlockchainList/BlockchainList.types.ts

@@ -0,0 +1,8 @@
+import type { BlockchainMeta } from 'rango-sdk';
+
+export interface PropTypes {
+  list: BlockchainMeta[];
+  searchedFor: string;
+  blockchainCategory: string;
+  onChange: (blockchain: BlockchainMeta) => void;
+}

package/src/components/BlockchainList/LoadingBlockchainList.tsx

@@ -0,0 +1,20 @@
+import { ListItem, Skeleton } from '@rango-dev/ui';
+import React from 'react';
+
+import { List } from './BlockchainList.styles';
+
+const ITEM_SKELETON_COUNT = 20;
+export function LoadingBlockchainList() {
+  return (
+    <List>
+      {Array.from(Array(ITEM_SKELETON_COUNT), (e) => (
+        <ListItem
+          key={e}
+          hasDivider
+          start={<Skeleton variant="circular" width={35} height={35} />}
+          title={<Skeleton variant="text" size="large" width={90} />}
+        />
+      ))}
+    </List>
+  );
+}

package/src/components/BlockchainList/index.ts

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

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

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

package/src/components/BlockchainsSection/BlockchainsSection.tsx

@@ -0,0 +1,83 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import type { PropTypes } from './BlockchainsSection.types';
+
+import { i18n } from '@lingui/core';
+import {
+  BlockchainsChip,
+  Divider,
+  Image,
+  Skeleton,
+  Typography,
+} from '@rango-dev/ui';
+import React from 'react';
+
+import { usePrepareBlockchainList } from '../../hooks/usePrepareBlockchainList';
+import { useBestRouteStore } from '../../store/bestRoute';
+import { useMetaStore } from '../../store/meta';
+
+import { Container } from './BlockchainsSection.styles';
+
+const LIST_SIZE = 10;
+const NUMBER_OF_LOADING = 12;
+
+export function BlockchainsSection(props: PropTypes) {
+  const { blockchains, type, blockchain, onChange, onMoreClick } = props;
+  const blockchainsList = usePrepareBlockchainList(blockchains, {
+    limit: LIST_SIZE,
+    selected: blockchain?.name,
+  });
+
+  const loadingStatus = useMetaStore.use.loadingStatus();
+  const resetToBlockchain = useBestRouteStore.use.resetToBlockchain();
+  const resetFromBlockchain = useBestRouteStore.use.resetFromBlockchain();
+  return (
+    <div>
+      <Divider size={12} />
+      <Typography variant="label" size="large">
+        {i18n.t('Select Blockchain')}
+      </Typography>
+      <Divider size={12} />
+      <Container>
+        {loadingStatus === 'loading' &&
+          Array.from(Array(NUMBER_OF_LOADING), (e) => (
+            <Skeleton key={e} variant="rounded" height={50} />
+          ))}
+        {loadingStatus === 'success' && (
+          <>
+            <BlockchainsChip
+              selected={!blockchain}
+              onClick={() => {
+                if (type === 'from') {
+                  resetFromBlockchain();
+                } else {
+                  resetToBlockchain();
+                }
+              }}>
+              <Typography variant="body" size="xsmall" color="secondary500">
+                {i18n.t('All')}
+              </Typography>
+            </BlockchainsChip>
+            {blockchainsList.list.map((item) => (
+              <BlockchainsChip
+                key={item.chainId}
+                selected={!!blockchain && blockchain.chainId === item.chainId}
+                onClick={() => onChange(item)}>
+                <Image src={item.logo} size={30} />
+              </BlockchainsChip>
+            ))}
+
+            {blockchainsList.more.length ? (
+              <BlockchainsChip onClick={onMoreClick}>
+                <Typography variant="body" size="xsmall" color="secondary500">
+                  {i18n._('More +{count}', {
+                    count: blockchainsList.more.length,
+                  })}
+                </Typography>
+              </BlockchainsChip>
+            ) : null}
+          </>
+        )}
+      </Container>
+    </div>
+  );
+}

package/src/components/BlockchainsSection/BlockchainsSection.types.ts

@@ -0,0 +1,9 @@
+import type { BlockchainMeta } from 'rango-sdk';
+
+export interface PropTypes {
+  blockchains: BlockchainMeta[];
+  type: 'from' | 'to';
+  blockchain: BlockchainMeta | null;
+  onChange: (blockchain: BlockchainMeta) => void;
+  onMoreClick: () => void;
+}

package/src/components/BlockchainsSection/index.ts

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

package/src/components/ConfirmWalletsModal/ConfirmWallets.helpers.ts

@@ -0,0 +1,86 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import type { Step } from '@rango-dev/ui/dist/widget/ui/src/components/BestRoute/BestRoute.types';
+import type { BestRouteResponse, BlockchainMeta } from 'rango-sdk';
+
+import {
+  TOKEN_AMOUNT_MAX_DECIMALS,
+  TOKEN_AMOUNT_MIN_DECIMALS,
+  USD_VALUE_MAX_DECIMALS,
+  USD_VALUE_MIN_DECIMALS,
+} from '../../constants/routing';
+import { numberToString } from '../../utils/numbers';
+
+export function formatBestRoute(
+  bestRoute: BestRouteResponse
+): Step[] | undefined {
+  return bestRoute.result?.swaps.map((swap) => {
+    return {
+      swapper: { displayName: swap.swapperId, image: swap.swapperLogo },
+      from: {
+        token: { displayName: swap.from.symbol, image: swap.from.logo },
+        chain: {
+          displayName: swap.from.blockchain,
+          image: swap.from.blockchainLogo,
+        },
+        price: {
+          value: numberToString(
+            swap.fromAmount,
+            TOKEN_AMOUNT_MIN_DECIMALS,
+            TOKEN_AMOUNT_MAX_DECIMALS
+          ),
+          usdValue: numberToString(
+            swap.from.usdPrice?.toString(),
+            USD_VALUE_MIN_DECIMALS,
+            USD_VALUE_MAX_DECIMALS
+          ),
+        },
+      },
+      to: {
+        token: { displayName: swap.to.symbol, image: swap.to.logo },
+        chain: {
+          displayName: swap.to.blockchain,
+          image: swap.to.blockchainLogo,
+        },
+        price: {
+          value: numberToString(
+            swap.toAmount,
+            TOKEN_AMOUNT_MIN_DECIMALS,
+            TOKEN_AMOUNT_MAX_DECIMALS
+          ),
+          usdValue: numberToString(
+            swap.to.usdPrice?.toString(),
+            USD_VALUE_MIN_DECIMALS,
+            USD_VALUE_MAX_DECIMALS
+          ),
+        },
+      },
+    };
+  });
+}
+
+export function getRequiredWallets(route: BestRouteResponse | null): string[] {
+  const wallets: string[] = [];
+
+  route?.result?.swaps.forEach((swap) => {
+    const currentStepFromBlockchain = swap.from.blockchain;
+    const currentStepToBlockchain = swap.to.blockchain;
+    let lastAddedWallet = wallets[wallets.length - 1];
+    if (currentStepFromBlockchain != lastAddedWallet) {
+      wallets.push(currentStepFromBlockchain);
+    }
+    lastAddedWallet = wallets[wallets.length - 1];
+    if (currentStepToBlockchain != lastAddedWallet) {
+      wallets.push(currentStepToBlockchain);
+    }
+  });
+  return wallets;
+}
+
+export function isValidAddress(
+  chain: BlockchainMeta,
+  address: string
+): boolean {
+  const regex = chain.addressPatterns;
+  const valid = regex.filter((r) => new RegExp(r).test(address)).length > 0;
+  return valid;
+}