@rango-dev/widget-embedded 0.12.1-next.7 → 0.12.1-next.8

package/src/pages/LanguagePage.tsx

@@ -0,0 +1,83 @@
+import { i18n } from '@lingui/core';
+import {
+  List,
+  ListItemButton,
+  Radio,
+  RadioRoot,
+  Typography,
+} from '@rango-dev/ui';
+import React, { useState } from 'react';
+
+import { Layout } from '../components/Layout';
+import { SettingsContainer } from '../components/SettingsContainer';
+import { navigationRoutes } from '../constants/navigationRoutes';
+import { useNavigateBack } from '../hooks/useNavigateBack';
+
+enum Languages {
+  ENGLISH = 'english',
+  FRENCH = 'french',
+  SPANISH = 'spanish',
+}
+export function LanguagePage() {
+  const { navigateBackFrom } = useNavigateBack();
+  const [language, setLanguage] = useState(Languages.ENGLISH);
+
+  const languageList = [
+    {
+      id: Languages.ENGLISH,
+      value: Languages.ENGLISH,
+      title: (
+        <Typography variant="title" size="xmedium">
+          {i18n.t('English')}
+        </Typography>
+      ),
+      onClick: () => setLanguage(Languages.ENGLISH),
+      end: <Radio value={Languages.ENGLISH} />,
+    },
+    {
+      id: Languages.FRENCH,
+      value: Languages.FRENCH,
+      title: (
+        <Typography variant="title" size="xmedium">
+          {i18n.t('French')}
+        </Typography>
+      ),
+      onClick: () => setLanguage(Languages.FRENCH),
+      end: <Radio value={Languages.FRENCH} />,
+    },
+    {
+      id: Languages.SPANISH,
+      value: Languages.SPANISH,
+      title: (
+        <Typography variant="title" size="xmedium">
+          {i18n.t('Spanish')}
+        </Typography>
+      ),
+      onClick: () => setLanguage(Languages.SPANISH),
+      end: <Radio value={Languages.SPANISH} />,
+    },
+  ];
+
+  return (
+    <Layout
+      header={{
+        onBack: navigateBackFrom.bind(null, navigationRoutes.settings),
+        title: i18n.t('Language'),
+      }}>
+      <SettingsContainer>
+        <RadioRoot value={language}>
+          <List
+            type={
+              <ListItemButton
+                title="language"
+                id="_"
+                onClick={() => console.log()}
+              />
+            }
+            items={languageList}
+          />
+        </RadioRoot>
+      </SettingsContainer>
+    </Layout>
+  );
+}

package/src/pages/LiquiditySourcePage.tsx

@@ -0,0 +1,160 @@
+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 {
+  LiquiditySourceDivider,
+  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}
+                    />
+                    <LiquiditySourceDivider />
+                  </React.Fragment>
+                );
+              })}
+            </LiquiditySourceList>
+          )
+        )}
+      </SettingsContainer>
+    </Layout>
+  );
+}

package/src/pages/SelectBlockchainPage.tsx

@@ -0,0 +1,77 @@
+import { i18n } from '@lingui/core';
+import { Divider } 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 { SelectableCategoryList } from '../components/SelectableCategoryList';
+import { navigationRoutes } from '../constants/navigationRoutes';
+import { useNavigateBack } from '../hooks/useNavigateBack';
+import { useBestRouteStore } from '../store/bestRoute';
+import { useMetaStore } from '../store/meta';
+
+interface PropTypes {
+  type: 'from' | 'to';
+  supportedBlockchains?: string[];
+}
+
+export function SelectBlockchainPage(props: PropTypes) {
+  const { type, supportedBlockchains } = 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 blockchains = supportedBlockchains
+    ? useMetaStore.use
+        .meta()
+        .blockchains.filter((chain) =>
+          supportedBlockchains.includes(chain.name)
+        )
+    : useMetaStore.use.meta().blockchains;
+
+  return (
+    <Layout
+      header={{
+        onBack: navigateBackFrom.bind(
+          null,
+          navigationRoutes[`${type}Blockchain`]
+        ),
+        title: i18n.t(`Select Blockchain`),
+      }}>
+      <Divider size={12} />
+      <SelectableCategoryList
+        setCategory={setBlockchainCategory}
+        category={blockchainCategory}
+      />
+      <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 === 'from') {
+            setFromBlockchain(blockchain, true);
+          } else {
+            setToBlockchain(blockchain, true);
+          }
+          navigateBackFrom(navigationRoutes[`${type}Blockchain`]);
+        }}
+      />
+    </Layout>
+  );
+}

package/src/pages/SelectSwapItemsPage.tsx

@@ -0,0 +1,153 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import type { Asset } from 'rango-sdk';
+
+import { i18n } from '@lingui/core';
+import { Divider } from '@rango-dev/ui';
+import React, { useEffect, 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 { filterTokens } from '../components/TokenList/TokenList.helpers';
+import { navigationRoutes } from '../constants/navigationRoutes';
+import { useNavigateBack } from '../hooks/useNavigateBack';
+import { useBestRouteStore } from '../store/bestRoute';
+import { useMetaStore } from '../store/meta';
+import { useWalletsStore } from '../store/wallets';
+import { tokensAreEqual } from '../utils/wallets';
+
+interface PropTypes {
+  type: 'from' | 'to';
+  supportedBlockchains?: string[];
+  supportedTokens?: Asset[];
+  pinnedTokens?: Asset[];
+}
+
+export function SelectSwapItemsPage(props: PropTypes) {
+  const { type, supportedBlockchains, supportedTokens, pinnedTokens } = props;
+  const navigate = useNavigate();
+  const { navigateBackFrom } = useNavigateBack();
+  const { tokens } = useMetaStore.use.meta();
+  const sourceTokens = useBestRouteStore.use.sourceTokens();
+  const destinationTokens = useBestRouteStore.use.destinationTokens();
+  const [searchedFor, setSearchedFor] = useState<string>('');
+  const setFromToken = useBestRouteStore.use.setFromToken();
+  const setToToken = useBestRouteStore.use.setToToken();
+  const setToBlockchain = useBestRouteStore.use.setToBlockchain();
+  const setFromBlockchain = useBestRouteStore.use.setFromBlockchain();
+  const toBlockchain = useBestRouteStore.use.toBlockchain();
+  const fromBlockchain = useBestRouteStore.use.fromBlockchain();
+  const connectedWallets = useWalletsStore.use.connectedWallets();
+  const loadingWallet = useWalletsStore.use.loading();
+  const setTokensWithBalance = useMetaStore.use.setTokensWithBalance();
+
+  const blockchains = supportedBlockchains
+    ? useMetaStore.use
+        .meta()
+        .blockchains.filter((chain) =>
+          supportedBlockchains.includes(chain.name)
+        )
+    : useMetaStore.use.meta().blockchains;
+  const allTokens = supportedTokens
+    ? tokens.filter((token) =>
+        tokens.some((supportedToken) => tokensAreEqual(supportedToken, token))
+      )
+    : tokens;
+  const supportedSourceTokens = supportedTokens
+    ? sourceTokens.filter((token) =>
+        supportedTokens.some((supportedToken) =>
+          tokensAreEqual(supportedToken, token)
+        )
+      )
+    : sourceTokens;
+
+  const supportedDestinationTokens = supportedTokens
+    ? destinationTokens.filter((token) =>
+        supportedTokens.some((supportedToken) =>
+          tokensAreEqual(supportedToken, token)
+        )
+      )
+    : destinationTokens;
+
+  const tokensByType =
+    type === 'from' ? supportedSourceTokens : supportedDestinationTokens;
+
+  const tokenList = (tokensByType.length ? tokensByType : allTokens).map(
+    (token) => ({
+      ...token,
+      pin: pinnedTokens?.some((pinnedToken) =>
+        tokensAreEqual(pinnedToken, token)
+      ),
+    })
+  );
+
+  useEffect(() => {
+    if (connectedWallets.length && !loadingWallet) {
+      setTokensWithBalance();
+    }
+  }, [connectedWallets, loadingWallet]);
+
+  return (
+    <Layout
+      header={{
+        onBack: navigateBackFrom.bind(null, navigationRoutes.home),
+        title: i18n.t('Swap {type}', { type }),
+      }}>
+      <BlockchainsSection
+        blockchains={blockchains}
+        type={type}
+        blockchain={type === 'from' ? fromBlockchain : toBlockchain}
+        onMoreClick={() =>
+          navigate(
+            type === 'from'
+              ? navigationRoutes.fromBlockchain
+              : navigationRoutes.toBlockchain
+          )
+        }
+        onChange={(blockchain) => {
+          {
+            if (type === 'from') {
+              setFromBlockchain(blockchain, true);
+            } else {
+              setToBlockchain(blockchain, true);
+            }
+          }
+        }}
+      />
+      <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={filterTokens(tokenList, searchedFor)}
+        onChange={(token) => {
+          const blockchain = blockchains.find(
+            (chain) => token.blockchain === chain.name
+          );
+          if (type === 'from') {
+            setFromToken(token);
+            if (!!blockchain) {
+              setFromBlockchain(blockchain, true);
+            }
+          } else {
+            setToToken(token);
+            if (!!blockchain) {
+              setToBlockchain(blockchain, true);
+            }
+          }
+          navigateBackFrom(navigationRoutes.fromSwap);
+        }}
+      />
+    </Layout>
+  );
+}