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

package/src/pages/LiquiditySourcePage.tsx

@@ -0,0 +1,159 @@
+import type {
+  LiquiditySourceType,
+  UniqueSwappersGroupType,
+} from '../utils/settings';
+
+import { i18n } from '@lingui/core';
+import {
+  Button,
+  Checkbox,
+  Image,
+  ListItemButton,
+  NotFound,
+  Typography,
+} from '@rango-dev/ui';
+import React, { useState } from 'react';
+
+import { Layout } from '../components/Layout';
+import { LoadingLiquiditySourceList } from '../components/LoadingLiquiditySourceList';
+import { SearchInput } from '../components/SearchInput';
+import {
+  LiquiditySourceList,
+  LiquiditySourceSuffix,
+  NotFoundContainer,
+  SettingsContainer,
+} from '../components/SettingsContainer';
+import { navigationRoutes } from '../constants/navigationRoutes';
+import { useNavigateBack } from '../hooks/useNavigateBack';
+import { useMetaStore } from '../store/meta';
+import { useSettingsStore } from '../store/settings';
+import { containsText } from '../utils/numbers';
+import { getUniqueSwappersGroups } from '../utils/settings';
+
+interface PropTypes {
+  supportedSwappers?: string[];
+  sourceType: 'Exchanges' | 'Bridges';
+}
+
+export function LiquiditySourcePage({
+  supportedSwappers,
+  sourceType,
+}: PropTypes) {
+  const [searchedFor, setSearchedFor] = useState<string>('');
+  const toggleLiquiditySource = useSettingsStore.use.toggleLiquiditySource();
+  const { navigateBackFrom } = useNavigateBack();
+  const loadingMetaStatus = useMetaStore.use.loadingStatus();
+
+  const supportedUniqueSwappersGroups: Array<UniqueSwappersGroupType> =
+    getUniqueSwappersGroups(supportedSwappers);
+
+  const validTypes: Array<LiquiditySourceType> = [];
+  if (sourceType === 'Exchanges') {
+    validTypes.push('DEX');
+  }
+  if (sourceType === 'Bridges') {
+    validTypes.push('BRIDGE');
+    validTypes.push('AGGREGATOR');
+  }
+
+  const liquiditySources = supportedUniqueSwappersGroups.filter((uniqueItem) =>
+    validTypes.includes(uniqueItem.type)
+  );
+
+  const hasSelectAll =
+    liquiditySources.length ===
+    liquiditySources.filter((sourceItem) => sourceItem.selected).length;
+
+  const toggleAllSources = () => {
+    liquiditySources.forEach((sourceItem) => {
+      if (hasSelectAll) {
+        toggleLiquiditySource(sourceItem.groupTitle);
+      } else {
+        if (!sourceItem.selected) {
+          toggleLiquiditySource(sourceItem.groupTitle);
+        }
+      }
+    });
+  };
+
+  const list = liquiditySources.map((sourceItem) => {
+    const { selected, groupTitle, logo } = sourceItem;
+    return {
+      start: <Image src={logo} size={22} type="circular" />,
+      onClick: () => toggleLiquiditySource(groupTitle),
+      end: <Checkbox checked={selected} />,
+      title: (
+        <Typography variant="title" size="xmedium">
+          {i18n.t(groupTitle)}
+        </Typography>
+      ),
+      ...sourceItem,
+    };
+  });
+
+  const searchHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value;
+    setSearchedFor(value);
+  };
+
+  let filteredList = list;
+  if (searchedFor) {
+    filteredList = list.filter((sourceItem) =>
+      containsText(sourceItem.groupTitle, searchedFor)
+    );
+  }
+
+  return (
+    <Layout
+      header={{
+        onBack: navigateBackFrom.bind(null, navigationRoutes.settings),
+        title: i18n.t(sourceType),
+        suffix: (
+          <LiquiditySourceSuffix>
+            <Button variant="ghost" size="xsmall" onClick={toggleAllSources}>
+              {i18n.t(hasSelectAll ? 'Deselect all' : 'Select all')}
+            </Button>
+          </LiquiditySourceSuffix>
+        ),
+      }}>
+      <SettingsContainer>
+        <SearchInput
+          value={searchedFor}
+          setValue={setSearchedFor}
+          fullWidth
+          color="light"
+          variant="contained"
+          placeholder={i18n.t('Swap {sourceType}', { sourceType })}
+          onChange={searchHandler}
+        />
+        {loadingMetaStatus === 'loading' && <LoadingLiquiditySourceList />}
+
+        {!filteredList.length && !!searchedFor ? (
+          <NotFoundContainer>
+            <NotFound
+              title={i18n.t('No results found')}
+              description={i18n.t('Try using different keywords')}
+            />
+          </NotFoundContainer>
+        ) : (
+          loadingMetaStatus === 'success' && (
+            <LiquiditySourceList>
+              {filteredList.map((sourceItem) => {
+                return (
+                  <React.Fragment key={sourceItem.id}>
+                    <ListItemButton
+                      style={{ height: '61px' }}
+                      {...sourceItem}
+                      selected={false}
+                      hasDivider
+                    />
+                  </React.Fragment>
+                );
+              })}
+            </LiquiditySourceList>
+          )
+        )}
+      </SettingsContainer>
+    </Layout>
+  );
+}

package/src/pages/SelectBlockchainPage.tsx

@@ -0,0 +1,76 @@
+import { i18n } from '@lingui/core';
+import { Divider, SelectableCategoryList } from '@rango-dev/ui';
+import React, { useState } from 'react';
+
+import { BlockchainList } from '../components/BlockchainList';
+import { Layout } from '../components/Layout';
+import { SearchInput } from '../components/SearchInput';
+import { navigationRoutes } from '../constants/navigationRoutes';
+import { useNavigateBack } from '../hooks/useNavigateBack';
+import { useAppStore } from '../store/app';
+import { useBestRouteStore } from '../store/bestRoute';
+import { useMetaStore } from '../store/meta';
+
+interface PropTypes {
+  type: 'source' | 'destination';
+}
+
+export function SelectBlockchainPage(props: PropTypes) {
+  const { type } = props;
+  const { navigateBackFrom } = useNavigateBack();
+  const [searchedFor, setSearchedFor] = useState<string>('');
+  const [blockchainCategory, setBlockchainCategory] = useState<string>('ALL');
+  const setToBlockchain = useBestRouteStore.use.setToBlockchain();
+  const setFromBlockchain = useBestRouteStore.use.setFromBlockchain();
+  const { loadingStatus } = useMetaStore();
+
+  const blockchains = useAppStore().blockchains({
+    type: type,
+  });
+  const routeKey = type === 'source' ? 'fromBlockchain' : 'toBlockchain';
+
+  return (
+    <Layout
+      header={{
+        onBack: () => {
+          navigateBackFrom(navigationRoutes[routeKey]);
+        },
+        title: i18n.t(`Select Blockchain`),
+      }}>
+      <Divider size={12} />
+      <SelectableCategoryList
+        setCategory={setBlockchainCategory}
+        category={blockchainCategory}
+        blockchains={blockchains}
+        isLoading={loadingStatus === 'loading'}
+      />
+      <Divider size={24} />
+      <SearchInput
+        value={searchedFor}
+        autoFocus
+        placeholder={i18n.t('Search Blockchain')}
+        color="light"
+        variant="contained"
+        size="large"
+        setValue={() => setSearchedFor('')}
+        onChange={(event) => setSearchedFor(event.target.value)}
+      />
+      <Divider size={16} />
+
+      <BlockchainList
+        list={blockchains}
+        searchedFor={searchedFor}
+        blockchainCategory={blockchainCategory}
+        onChange={(blockchain) => {
+          if (type === 'source') {
+            setFromBlockchain(blockchain);
+          } else {
+            setToBlockchain(blockchain);
+          }
+
+          navigateBackFrom(navigationRoutes[routeKey]);
+        }}
+      />
+    </Layout>
+  );
+}

package/src/pages/SelectSwapItemsPage.tsx

@@ -0,0 +1,131 @@
+import type { BlockchainMeta, Token } from 'rango-sdk';
+
+import { i18n } from '@lingui/core';
+import { Divider } from '@rango-dev/ui';
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { BlockchainsSection } from '../components/BlockchainsSection';
+import { Layout } from '../components/Layout';
+import { SearchInput } from '../components/SearchInput';
+import { TokenList } from '../components/TokenList/TokenList';
+import { navigationRoutes } from '../constants/navigationRoutes';
+import { useNavigateBack } from '../hooks/useNavigateBack';
+import { useAppStore } from '../store/app';
+import { useBestRouteStore } from '../store/bestRoute';
+import { useWalletsStore } from '../store/wallets';
+import { getTokensBalanceFromWalletAndSort } from '../utils/wallets';
+
+interface PropTypes {
+  type: 'source' | 'destination';
+}
+
+export function SelectSwapItemsPage(props: PropTypes) {
+  const { type } = props;
+  const navigate = useNavigate();
+  const { navigateBackFrom } = useNavigateBack();
+  const {
+    fromBlockchain,
+    toBlockchain,
+    setFromToken,
+    setToToken,
+    setFromBlockchain,
+    setToBlockchain,
+  } = useBestRouteStore();
+  const { connectedWallets } = useWalletsStore();
+  const [searchedFor, setSearchedFor] = useState<string>('');
+
+  const selectedBlockchain = type === 'source' ? fromBlockchain : toBlockchain;
+  const selectedBlockchainName = selectedBlockchain?.name ?? '';
+
+  // Tokens & Blockchains list
+  const blockchains = useAppStore().blockchains({
+    type: type,
+  });
+  const tokens = useAppStore().tokens({
+    type,
+    blockchain: selectedBlockchainName,
+    searchFor: searchedFor,
+  });
+  const tokensList = getTokensBalanceFromWalletAndSort(
+    tokens,
+    connectedWallets
+  );
+
+  // Actions
+  const updateBlockchain = (blockchain: BlockchainMeta) => {
+    if (type === 'source') {
+      setFromBlockchain(blockchain);
+    } else {
+      setToBlockchain(blockchain);
+    }
+  };
+
+  const updateToken = (token: Token) => {
+    if (type === 'source') {
+      setFromToken(token);
+    } else {
+      setToToken(token);
+    }
+  };
+
+  return (
+    <Layout
+      header={{
+        onBack: () =>
+          navigateBackFrom(
+            type === 'source'
+              ? navigationRoutes.fromSwap
+              : navigationRoutes.toSwap
+          ),
+        title: i18n.t('Swap {type}', {
+          type: type === 'source' ? 'from' : 'to',
+        }),
+      }}>
+      <BlockchainsSection
+        blockchains={blockchains}
+        type={type == 'source' ? 'from' : 'to'}
+        blockchain={type === 'source' ? fromBlockchain : toBlockchain}
+        onMoreClick={() =>
+          navigate(
+            type === 'source'
+              ? navigationRoutes.fromBlockchain
+              : navigationRoutes.toBlockchain
+          )
+        }
+        onChange={(blockchain) => {
+          updateBlockchain(blockchain);
+        }}
+      />
+      <Divider size={24} />
+      <SearchInput
+        value={searchedFor}
+        autoFocus
+        placeholder={i18n.t('Search Token')}
+        color="light"
+        variant="contained"
+        size="large"
+        setValue={() => setSearchedFor('')}
+        onChange={(event) => setSearchedFor(event.target.value)}
+      />
+      <Divider size={16} />
+      <TokenList
+        list={tokensList}
+        selectedBlockchain={selectedBlockchainName}
+        searchedFor={searchedFor}
+        onChange={(token) => {
+          updateToken(token);
+
+          const tokenBlockchain = blockchains.find(
+            (chain) => token.blockchain === chain.name
+          );
+          if (tokenBlockchain) {
+            updateBlockchain(tokenBlockchain);
+          }
+
+          navigateBackFrom(navigationRoutes.fromSwap);
+        }}
+      />
+    </Layout>
+  );
+}

package/src/pages/SettingsPage.tsx

@@ -1,30 +1,35 @@
+import { i18n } from '@lingui/core';
+import {
+  ChevronRightIcon,
+  Divider,
+  InfoIcon,
+  List,
+  ListItemButton,
+  Skeleton,
+  Switch,
+  Tooltip,
+  Typography,
+} from '@rango-dev/ui';
 import React from 'react';
-import { Settings } from '@rango-dev/ui';
-import { useSettingsStore } from '../store/settings';
-import { useMetaStore } from '../store/meta';
 import { useNavigate } from 'react-router-dom';
+
+import { Layout } from '../components/Layout';
+import { SettingsContainer } from '../components/SettingsContainer';
+import { Slippage } from '../components/Slippage';
+import { SlippageTooltipContainer as TooltipContainer } from '../components/Slippage/Slippage.styles';
 import { navigationRoutes } from '../constants/navigationRoutes';
-import { removeDuplicateFrom } from '../utils/common';
-import {
-  MAX_SLIPPAGE,
-  MIN_SLIPPGAE,
-  SLIPPAGES,
-} from '../constants/swapSettings';
 import { useNavigateBack } from '../hooks/useNavigateBack';
+import { useMetaStore } from '../store/meta';
+import { useSettingsStore } from '../store/settings';
+import { getContainer } from '../utils/common';
+import { getUniqueSwappersGroups } from '../utils/settings';
+
 interface PropTypes {
   supportedSwappers?: string[];
   singleTheme?: boolean;
 }
+
 export function SettingsPage({ supportedSwappers, singleTheme }: PropTypes) {
-  const slippage = useSettingsStore.use.slippage();
-  const setSlippage = useSettingsStore.use.setSlippage();
-  const disabledLiquiditySources =
-    useSettingsStore.use.disabledLiquiditySources();
-  const customSlippage = useSettingsStore.use.customSlippage();
-  const setCustomSlippage = useSettingsStore.use.setCustomSlippage();
-  const theme = useSettingsStore.use.theme();
-  const setTheme = useSettingsStore.use.setTheme();
-  const swappers = useMetaStore.use.meta().swappers;
   const navigate = useNavigate();
   const { navigateBackFrom } = useNavigateBack();
 
@@ -32,62 +37,150 @@ export function SettingsPage({ supportedSwappers, singleTheme }: PropTypes) {
   const toggleInfiniteApprove = useSettingsStore.use.toggleInfiniteApprove();
   const loadingMetaStatus = useMetaStore.use.loadingStatus();
 
-  const uniqueSwappersGroups: Array<{
-    title: string;
-    logo: string;
-    type: 'BRIDGE' | 'AGGREGATOR' | 'DEX';
-    selected: boolean;
-  }> = [];
-  removeDuplicateFrom(swappers.map((s) => s.swapperGroup))
-    .map((swapperGroup) => {
-      return swappers.find((s) => s.swapperGroup === swapperGroup);
-    })
-    .find((s) => {
-      if (s) {
-        for (const type of s.types) {
-          uniqueSwappersGroups.push({
-            title: s.swapperGroup,
-            logo: s.logo,
-            type,
-            selected: !disabledLiquiditySources.includes(s.swapperGroup),
-          });
-        }
-      }
-    });
-  supportedSwappers &&
-    uniqueSwappersGroups.filter(
-      (item) => supportedSwappers.filter((s) => s === item.title).length > 0
-    );
+  const supportedUniqueSwappersGroups =
+    getUniqueSwappersGroups(supportedSwappers);
+
+  const bridgeSources = supportedUniqueSwappersGroups.filter(
+    (uniqueItem) =>
+      uniqueItem.type === 'BRIDGE' || uniqueItem.type === 'AGGREGATOR'
+  );
+  const totalBridgeSources = bridgeSources.length;
+  const totalSelectedBridgeSources = bridgeSources.filter(
+    (uniqueItem) => uniqueItem.selected
+  ).length;
+
+  const exchangeSources = supportedUniqueSwappersGroups.filter(
+    (uniqueItem) => uniqueItem.type === 'DEX'
+  );
+  const totalExchangeSources = exchangeSources.length;
+  const totalSelectedExchangeSources = exchangeSources.filter(
+    (uniqueItem) => uniqueItem.selected
+  ).length;
+
+  const handleEndItem = (totalSelected: number, total: number) => {
+    switch (loadingMetaStatus) {
+      case 'loading':
+        return <Skeleton variant="text" size="medium" width={50} />;
+      case 'failed':
+        return (
+          <Typography variant="body" size="medium" color="$error500">
+            {i18n.t('Loading failed')}
+          </Typography>
+        );
+      default:
+        return (
+          <Typography variant="body" size="medium">
+            {`${totalSelected} / ${total}`}
+          </Typography>
+        );
+    }
+  };
+
+  const bridgeItem = {
+    id: 'bridge-item',
+    title: (
+      <Typography variant="title" size="xmedium">
+        {i18n.t('Enabled bridges')}
+      </Typography>
+    ),
+    end: (
+      <>
+        {handleEndItem(totalSelectedBridgeSources, totalBridgeSources)}
+        <Divider direction="horizontal" size={8} />
+        <ChevronRightIcon color="black" />
+      </>
+    ),
+    onClick: () => navigate(navigationRoutes.bridges),
+  };
+
+  const exchangeItem = {
+    id: 'exchange-item',
+    title: (
+      <Typography variant="title" size="xmedium">
+        {i18n.t('Enabled exchanges')}
+      </Typography>
+    ),
+    end: (
+      <>
+        {handleEndItem(totalSelectedExchangeSources, totalExchangeSources)}
+        <Divider direction="horizontal" size={8} />
+        <ChevronRightIcon color="gray" />
+      </>
+    ),
+    onClick: () => navigate(navigationRoutes.exchanges),
+  };
+
+  const languageItem = {
+    id: 'language-item',
+    title: (
+      <Typography variant="title" size="xmedium">
+        {i18n.t('Language')}
+      </Typography>
+    ),
+    end: <ChevronRightIcon color="gray" />,
+    onClick: () => navigate(navigationRoutes.languages),
+  };
+
+  const themeItem = {
+    id: 'theme-item',
+    title: (
+      <Typography variant="title" size="xmedium">
+        {i18n.t('Theme')}
+      </Typography>
+    ),
+    end: <ChevronRightIcon color="gray" />,
+    onClick: () => navigate(navigationRoutes.themes),
+  };
+
+  const infiniteApprovalItem = {
+    id: 'infinite-approval-item',
+    title: (
+      <>
+        <Typography variant="title" size="xmedium">
+          {i18n.t('Infinite Approval')}
+        </Typography>
+        <Divider direction="horizontal" size={4} />
+        <Tooltip
+          side="top"
+          container={getContainer()}
+          content={
+            <TooltipContainer>
+              <Typography variant="label" size="medium" color="neutral900">
+                {i18n.t(
+                  "Enabling the 'Infinite Approval' mode grants unrestricted access to smart contracts of DEXes/Bridges, allowing them to utilize the approved token amount without limitations."
+                )}
+              </Typography>
+            </TooltipContainer>
+          }>
+          <InfoIcon color="gray" />
+        </Tooltip>
+      </>
+    ),
+    end: <Switch checked={infiniteApprove} />,
+    onClick: toggleInfiniteApprove,
+  };
 
-  const supportedUniqueSwappersGroups = supportedSwappers
-    ? uniqueSwappersGroups.filter(
-        (item) => supportedSwappers.filter((s) => s === item.title).length > 0
-      )
-    : uniqueSwappersGroups;
+  const settingItems = [bridgeItem, exchangeItem, languageItem];
+  if (!singleTheme) {
+    settingItems.push(themeItem);
+  }
+  settingItems.push(infiniteApprovalItem);
 
   return (
-    <Settings
-      slippages={SLIPPAGES}
-      selectedSlippage={slippage}
-      onSlippageChange={(slippage) => setSlippage(slippage)}
-      onLiquiditySourcesClick={() =>
-        navigate(navigationRoutes.liquiditySources)
-      }
-      onBack={navigateBackFrom.bind(null, navigationRoutes.settings)}
-      liquiditySources={supportedUniqueSwappersGroups}
-      selectedLiquiditySources={supportedUniqueSwappersGroups.filter(
-        (s) => s.selected
-      )}
-      singleTheme={singleTheme}
-      customSlippage={customSlippage}
-      onCustomSlippageChange={setCustomSlippage}
-      minSlippage={MIN_SLIPPGAE}
-      maxSlippage={MAX_SLIPPAGE}
-      selectedTheme={theme}
-      onThemeChange={setTheme}
-      infiniteApprove={infiniteApprove}
-      toggleInfiniteApprove={toggleInfiniteApprove}
-      loadingStatus={loadingMetaStatus}
-    />
+    <Layout
+      header={{
+        onBack: navigateBackFrom.bind(null, navigationRoutes.settings),
+        title: i18n.t('Setting'),
+      }}>
+      <SettingsContainer>
+        <Slippage />
+        <List
+          type={
+            <ListItemButton title="_" id="_" onClick={() => console.log()} />
+          }
+          items={settingItems}
+        />
+      </SettingsContainer>
+    </Layout>
   );
 }