@rango-dev/widget-embedded 0.12.1-next.2 → 0.12.1-next.21

package/src/components/AppRouter.tsx

@@ -1,11 +1,41 @@
-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 ref = useRef(true);
+
+  useEffect(() => {
+    if (
+      location.pathname === '/' + navigationRoutes.confirmSwap &&
+      ref.current
+    ) {
+      navigate(navigationRoutes.home + location.search, { state: 'redirect' });
+    }
+
+    ref.current = false;
+  }, []);
+
+  if (location.pathname === '/' + navigationRoutes.confirmSwap && ref.current) {
+    return <Home />;
+  }
+
+  return <> {props.children}</>;
+}
 
 export function AppRouter({
   children,
@@ -16,7 +46,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 { type BlockchainMeta, TransactionType } from 'rango-sdk';
+
+import { containsText } from '../../utils/common';
+import { BlockchainCategories } from '../SelectableCategoryList/SelectableCategoryList.types';
+
+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/BlockchainsChip/BlockchainsChip.styles.ts

@@ -0,0 +1,30 @@
+import { styled } from '@rango-dev/ui';
+
+export const Chip = styled('button', {
+  padding: '$10',
+  borderRadius: '$sm',
+  backgroundColor: '$neutral100',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  cursor: 'pointer',
+  border: 0,
+  '.image-container': {
+    borderRadius: '$xm',
+    overflow: 'hidden',
+  },
+  '&:hover': {
+    backgroundColor: '$neutral400',
+  },
+  '&:focus-visible': {
+    outline: 0,
+    backgroundColor: '$neutral500',
+  },
+  variants: {
+    selected: {
+      true: { outline: '1px solid $secondary500' },
+      false: { outline: 0 },
+    },
+  },
+});

package/src/components/BlockchainsChip/BlockchainsChip.tsx

@@ -0,0 +1,15 @@
+import type { PropTypes } from './BlockchainsChip.types';
+import type { PropsWithChildren } from 'react';
+
+import React from 'react';
+
+import { Chip } from './BlockchainsChip.styles';
+
+export function BlockchainsChip(props: PropsWithChildren<PropTypes>) {
+  const { children, selected, onClick } = props;
+  return (
+    <Chip selected={selected} onClick={onClick}>
+      {children}
+    </Chip>
+  );
+}

package/src/components/BlockchainsChip/BlockchainsChip.types.ts

@@ -0,0 +1,4 @@
+export interface PropTypes {
+  selected?: boolean;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}

package/src/components/BlockchainsChip/index.ts

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

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,100 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import type { PropTypes } from './BlockchainsSection.types';
+
+import { i18n } from '@lingui/core';
+import { 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 { BlockchainsChip } from '../BlockchainsChip';
+
+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';

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;
+}