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

package/src/Widget.tsx

@@ -1,30 +1,39 @@
-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 { useBestRouteStore } from './store/bestRoute';
+import { useMetaStore } from './store/meta';
+import { useNotificationStore } from './store/notification';
+import { useSettingsStore } from './store/settings';
 import { initConfig } from './utils/configs';
+import { tokensAreEqual } from './utils/wallets';
 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 +42,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,25 +59,81 @@ export function Main(props: PropsWithChildren<WidgetProps>) {
   }, [config]);
 
   useEffect(() => {
-    useSettingsStore.persist.rehydrate();
+    void useSettingsStore.persist.rehydrate();
+    void useNotificationStore.persist.rehydrate();
     widgetContext.onConnectWallet(setLastConnectedWalletWithNetwork);
   }, []);
 
+  const {
+    setInputAmount,
+    setToToken,
+    setToBlockchain,
+    setFromBlockchain,
+    setFromToken,
+  } = useBestRouteStore();
+
+  const {
+    meta: { tokens, blockchains },
+    loadingStatus: loadingMetaStatus,
+  } = useMetaStore();
+
+  const { setAffiliateRef, setAffiliatePercent, setAffiliateWallets } =
+    useSettingsStore();
+
+  useEffect(() => {
+    setInputAmount(config?.amount?.toString() || '');
+  }, [config?.amount]);
+
+  useEffect(() => {
+    if (loadingMetaStatus === 'success') {
+      const chain = blockchains.find(
+        (chain) => chain.name === config?.from?.blockchain
+      );
+      const token = tokens.find((t) =>
+        tokensAreEqual(t, config?.from?.token || null)
+      );
+
+      setFromBlockchain(chain || null);
+      setFromToken(token || null);
+    }
+  }, [config?.from?.token, config?.from?.blockchain, loadingMetaStatus]);
+
+  useEffect(() => {
+    if (loadingMetaStatus === 'success') {
+      const chain = blockchains.find(
+        (chain) => chain.name === config?.to?.blockchain
+      );
+      const token = tokens.find((t) =>
+        tokensAreEqual(t, config?.to?.token || null)
+      );
+      setToBlockchain(chain || null);
+      setToToken(token || null);
+    }
+  }, [config?.to?.token, config?.to?.blockchain, loadingMetaStatus]);
+
+  useEffect(() => {
+    setAffiliateRef(config?.affiliate?.ref ?? null);
+    setAffiliatePercent(config?.affiliate?.percent ?? null);
+    setAffiliateWallets(config?.affiliate?.wallets ?? null);
+  }, [
+    config?.affiliate?.ref,
+    config?.affiliate?.percent,
+    config?.affiliate?.wallets,
+  ]);
+
   return (
     <I18nManager language={config?.language}>
       <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
+            lastConnectedWallet={lastConnectedWalletWithNetwork}
+            disconnectedWallet={disconnectedWallet}
+            clearDisconnectedWallet={() => {
+              setDisconnectedWallet(undefined);
+            }}>
+            <AppRoutes config={config} />
+          </AppRouter>
         </QueueManager>
       </MainContainer>
     </I18nManager>

package/src/components/AppRouter.tsx

@@ -1,11 +1,40 @@
-import React, { Fragment, PropsWithChildren } from 'react';
-import { MemoryRouter, useInRouterContext } from 'react-router';
+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,
@@ -16,7 +45,7 @@ export function AppRouter({
   clearDisconnectedWallet: () => void;
 }) {
   const isRouterInContext = useInRouterContext();
-  const Router = isRouterInContext ? Fragment : MemoryRouter;
+  const Router = isRouterInContext ? Route : MemoryRouter;
   const { blockchains } = useMetaStore.use.meta();
   const { canSwitchNetworkTo } = useWallets();
 

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,30 +31,43 @@ export function AppRoutes(props: PropTypes) {
       element: <Home />,
     },
     {
-      path: navigationRoutes.fromChain,
+      path: navigationRoutes.fromSwap,
       element: (
-        <SelectChainPage
+        <SelectSwapItemsPage
           type="from"
-          supportedChains={config?.from?.blockchains}
+          supportedBlockchains={config?.from?.blockchains}
+          supportedTokens={config?.from?.tokens}
+          pinnedTokens={config?.pinnedTokens}
         />
       ),
     },
     {
-      path: navigationRoutes.toChain,
+      path: navigationRoutes.toSwap,
       element: (
-        <SelectChainPage type="to" supportedChains={config?.to?.blockchains} />
+        <SelectSwapItemsPage
+          type="to"
+          supportedBlockchains={config?.to?.blockchains}
+          supportedTokens={config?.to?.tokens}
+          pinnedTokens={config?.pinnedTokens}
+        />
       ),
     },
     {
-      path: navigationRoutes.fromToken,
+      path: navigationRoutes.fromBlockchain,
       element: (
-        <SelectTokenPage type="from" supportedTokens={config?.from?.tokens} />
+        <SelectBlockchainPage
+          type="from"
+          supportedBlockchains={config?.to?.blockchains}
+        />
       ),
     },
     {
-      path: navigationRoutes.toToken,
+      path: navigationRoutes.toBlockchain,
       element: (
-        <SelectTokenPage type="to" supportedTokens={config?.to?.tokens} />
+        <SelectBlockchainPage
+          type="to"
+          supportedBlockchains={config?.to?.blockchains}
+        />
       ),
     },
     {
@@ -63,9 +80,29 @@ export function AppRoutes(props: PropTypes) {
       ),
     },
     {
-      path: navigationRoutes.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 supportedSwappers={config?.liquiditySources} />
+        <LiquiditySourcePage
+          sourceType="Bridges"
+          supportedSwappers={config?.liquiditySources}
+        />
       ),
     },
     { path: navigationRoutes.swaps, element: <HistoryPage /> },
@@ -89,9 +126,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/BlockchainSection.helpers.ts

@@ -0,0 +1,20 @@
+import type { BlockchainMeta } from 'rango-sdk';
+
+export const sortBlockchains = (blockchains: BlockchainMeta[]) => {
+  const importantBlockchains: BlockchainMeta[] = [];
+  const otherBlockchains: BlockchainMeta[] = [];
+
+  for (const blockchain of blockchains) {
+    if (
+      blockchain.name === 'ETH' ||
+      blockchain.name === 'COSMOS' ||
+      blockchain.name === 'OSMOSIS'
+    ) {
+      importantBlockchains.push(blockchain);
+    } else {
+      otherBlockchains.push(blockchain);
+    }
+  }
+
+  return importantBlockchains.concat(otherBlockchains);
+};

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,105 @@
+/* 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 { type BlockchainMeta } from 'rango-sdk';
+import React, { useEffect, useState } from 'react';
+
+import { useBestRouteStore } from '../../store/bestRoute';
+import { useMetaStore } from '../../store/meta';
+
+import { sortBlockchains } from './BlockchainSection.helpers';
+import { Container } from './BlockchainsSection.styles';
+
+const MIN = 9;
+const MAX = 10;
+const NUMBER_OF_LOADING = 12;
+export function BlockchainsSection(props: PropTypes) {
+  const { blockchains, type, blockchain, onChange, onMoreClick } = props;
+  const sortedBlockchains = sortBlockchains(blockchains);
+  const [selectFromMoreBlockchain, setSelectFromMoreBlockchain] =
+    useState<BlockchainMeta | null>(null);
+  const loadingStatus = useMetaStore.use.loadingStatus();
+  const resetToBlockchain = useBestRouteStore.use.resetToBlockchain();
+  const resetFromBlockchain = useBestRouteStore.use.resetFromBlockchain();
+  const COUNT_BLOCKCHAINS = !!selectFromMoreBlockchain ? MIN : MAX;
+
+  useEffect(() => {
+    const selectBlockchainFromMore = sortedBlockchains
+      .slice(MAX, sortedBlockchains.length)
+      .find(
+        (item) =>
+          item.chainId === blockchain?.chainId && item.name === blockchain?.name
+      );
+    if (!!selectBlockchainFromMore) {
+      setSelectFromMoreBlockchain(selectBlockchainFromMore);
+    }
+  }, [blockchain]);
+
+  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>
+            {!!selectFromMoreBlockchain && (
+              <BlockchainsChip
+                selected={
+                  !!selectFromMoreBlockchain &&
+                  selectFromMoreBlockchain.chainId === blockchain?.chainId
+                }
+                key={selectFromMoreBlockchain.chainId}
+                onClick={() => onChange(selectFromMoreBlockchain)}>
+                <Image src={selectFromMoreBlockchain.logo} size={30} />
+              </BlockchainsChip>
+            )}
+            {sortedBlockchains.slice(0, COUNT_BLOCKCHAINS).map((item) => (
+              <BlockchainsChip
+                key={item.chainId}
+                selected={!!blockchain && blockchain.chainId === item.chainId}
+                onClick={() => onChange(item)}>
+                <Image src={item.logo} size={30} />
+              </BlockchainsChip>
+            ))}
+
+            <BlockchainsChip onClick={onMoreClick}>
+              <Typography variant="body" size="xsmall" color="secondary500">
+                {i18n._('More +{count}', {
+                  count: sortedBlockchains.length - MAX,
+                })}
+              </Typography>
+            </BlockchainsChip>
+          </>
+        )}
+      </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';