@rango-dev/widget-embedded 0.0.0-experimental-936229e8-20251208

package/src/pages/LiquiditySourcePage.tsx

@@ -0,0 +1,177 @@
+import type { UniqueSwappersGroupType } from '../utils/settings';
+import type { SwapperType } from 'rango-sdk';
+
+import { i18n } from '@lingui/core';
+import {
+  Button,
+  Checkbox,
+  Image,
+  ListItemButton,
+  NotFound,
+  Typography,
+} from '@rango-dev/ui';
+import React, { useState } from 'react';
+
+import { Layout, PageContainer } from '../components/Layout';
+import { LoadingLiquiditySourceList } from '../components/LoadingLiquiditySourceList';
+import { SearchInput } from '../components/SearchInput';
+import {
+  LiquiditySourceList,
+  LiquiditySourceSuffix,
+  NotFoundContainer,
+} from '../components/SettingsContainer';
+import { useAppStore } from '../store/AppStore';
+import { containsText } from '../utils/numbers';
+import { replaceSpacesWithDash } from '../utils/sanitizers';
+import { getUniqueSwappersGroups } from '../utils/settings';
+
+interface PropTypes {
+  sourceType: 'Exchanges' | 'Bridges';
+}
+
+export function LiquiditySourcePage({ sourceType }: PropTypes) {
+  const fetchStatus = useAppStore().fetchStatus;
+  const swappers = useAppStore().swappers();
+  const disabledLiquiditySources = useAppStore().getDisabledLiquiditySources();
+  const [searchedFor, setSearchedFor] = useState<string>('');
+  const toggleLiquiditySource = useAppStore().toggleLiquiditySource;
+  const campaignMode = useAppStore().isInCampaignMode();
+  const supportedUniqueSwappersGroups: Array<UniqueSwappersGroupType> =
+    getUniqueSwappersGroups(swappers, disabledLiquiditySources);
+
+  const types = { Exchanges: i18n.t('Exchanges'), Bridges: i18n.t('Bridges') };
+  const validTypes: Array<SwapperType> = [];
+  if (sourceType === 'Exchanges') {
+    validTypes.push('DEX');
+  }
+  if (sourceType === 'Bridges') {
+    validTypes.push('BRIDGE', 'AGGREGATOR', 'OFF_CHAIN');
+  }
+
+  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, id, ...restSourceItem } = sourceItem;
+
+    return {
+      id: `widget-setting-liquidity-source-${replaceSpacesWithDash(
+        id.toLowerCase()
+      )}-item-btn`,
+
+      start: <Image src={logo} size={22} type="circular" />,
+      onClick: () => {
+        if (!campaignMode) {
+          toggleLiquiditySource(groupTitle);
+        }
+      },
+      end: <Checkbox checked={selected} disabled={campaignMode} />,
+      title: (
+        <Typography variant="title" size="xmedium">
+          {i18n.t(groupTitle)}
+        </Typography>
+      ),
+      selected,
+      groupTitle,
+      logo,
+      ...restSourceItem,
+    };
+  });
+
+  const handleSearch = (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={{
+        title: i18n.t(sourceType),
+        suffix: (
+          <LiquiditySourceSuffix>
+            {/* eslint-disable-next-line jsx-id-attribute-enforcement/missing-ids */}
+            <Button
+              id={`widget-liquidity-source-${
+                hasSelectAll ? 'deselect-all' : 'select-all'
+              }-btn`}
+              variant="ghost"
+              size="xsmall"
+              onClick={toggleAllSources}>
+              {hasSelectAll ? i18n.t('Deselect all') : i18n.t('Select all')}
+            </Button>
+          </LiquiditySourceSuffix>
+        ),
+      }}>
+      <PageContainer view>
+        <SearchInput
+          value={searchedFor}
+          setValue={setSearchedFor}
+          id="widget-liquidity-source-search-input"
+          fullWidth
+          color="light"
+          variant="contained"
+          placeholder={i18n.t('Search {sourceType}', {
+            sourceType: types[sourceType],
+          })}
+          onChange={handleSearch}
+        />
+        {fetchStatus === 'loading' && <LoadingLiquiditySourceList />}
+
+        {!filteredList.length && !!searchedFor ? (
+          <NotFoundContainer>
+            <NotFound
+              title={i18n.t('No results found')}
+              description={i18n.t('Try using different keywords')}
+            />
+          </NotFoundContainer>
+        ) : (
+          fetchStatus === 'success' && (
+            <LiquiditySourceList
+              disabled={campaignMode}
+              className="widget-liquidity-source-list">
+              {filteredList.map((sourceItem) => {
+                const { groupTitle, ...otherProps } = sourceItem;
+
+                return (
+                  <React.Fragment key={sourceItem.id}>
+                    <ListItemButton
+                      style={{ height: '61px' }}
+                      {...otherProps}
+                      selected={false}
+                      className="widget-liquidity-source-list-item-btn"
+                      hasDivider
+                    />
+                  </React.Fragment>
+                );
+              })}
+            </LiquiditySourceList>
+          )
+        )}
+      </PageContainer>
+    </Layout>
+  );
+}

package/src/pages/Routes.tsx

@@ -0,0 +1,71 @@
+import type { SelectedQuote } from '../types';
+
+import { i18n } from '@lingui/core';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { HeaderButtons } from '../components/HeaderButtons';
+import { Layout, PageContainer } from '../components/Layout';
+import { Quotes } from '../components/Quotes';
+import { navigationRoutes } from '../constants/navigationRoutes';
+import { useNavigateBack } from '../hooks/useNavigateBack';
+import { useSwapInput } from '../hooks/useSwapInput';
+import { useQuoteStore } from '../store/quote';
+
+export function RoutesPage() {
+  const navigate = useNavigate();
+  const navigateBack = useNavigateBack();
+  const {
+    selectedQuote,
+    refetchQuote,
+    setSelectedQuote,
+    updateQuotePartialState,
+    error: quoteError,
+  } = useQuoteStore()();
+
+  const { fetch: fetchQuote, loading: fetchingQuote } = useSwapInput({
+    refetchQuote,
+  });
+
+  const onClickOnQuote = (quote: SelectedQuote) => {
+    setSelectedQuote(quote);
+    updateQuotePartialState('refetchQuote', false);
+    navigateBack();
+  };
+
+  const settings_url = `../${navigationRoutes.settings}`;
+  const wallets_url = `../${navigationRoutes.wallets}`;
+  return (
+    <Layout
+      header={{
+        onWallet: () => {
+          navigate(wallets_url);
+          updateQuotePartialState('refetchQuote', true);
+        },
+        onBack: () => {
+          updateQuotePartialState('refetchQuote', false);
+        },
+        title: i18n.t('Routes'),
+        suffix: (
+          <HeaderButtons
+            onClickRefresh={
+              !!selectedQuote || quoteError ? fetchQuote : undefined
+            }
+            hidden={['notifications', 'history']}
+            onClickSettings={() => {
+              navigate(settings_url);
+              updateQuotePartialState('refetchQuote', true);
+            }}
+          />
+        ),
+      }}>
+      <PageContainer>
+        <Quotes
+          fetch={fetchQuote}
+          loading={fetchingQuote}
+          onClickOnQuote={onClickOnQuote}
+        />
+      </PageContainer>
+    </Layout>
+  );
+}

package/src/pages/SelectBlockchainPage.tsx

@@ -0,0 +1,114 @@
+import type { BlockchainMeta } from 'rango-types';
+
+import { i18n } from '@lingui/core';
+import {
+  Divider,
+  getCategoriesCount,
+  SelectableCategoryList,
+} from '@rango-dev/ui';
+import React, { useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { BlockchainList } from '../components/BlockchainList';
+import { Layout, PageContainer } from '../components/Layout';
+import { SearchInput } from '../components/SearchInput';
+import { useNavigateBack } from '../hooks/useNavigateBack';
+import { useSwapMode } from '../hooks/useSwapMode';
+import { useAppStore } from '../store/AppStore';
+import { useQuoteStore } from '../store/quote';
+import { filterBlockchainsWithAtLeastOneToken } from '../utils/common';
+
+interface PropTypes {
+  type: 'source' | 'destination' | 'custom-token';
+  hideCategory?: boolean;
+}
+
+export function SelectBlockchainPage(props: PropTypes) {
+  const { type } = props;
+  const navigateBack = useNavigateBack();
+  const [searchedFor, setSearchedFor] = useState<string>('');
+  const [blockchainCategory, setBlockchainCategory] = useState<string>('ALL');
+  const setToBlockchain = useQuoteStore().use.setToBlockchain();
+  const setFromBlockchain = useQuoteStore().use.setFromBlockchain();
+  const setToToken = useQuoteStore().use.setToToken();
+  const { fetchStatus, findNativeToken } = useAppStore();
+  const navigate = useNavigate();
+  const { swapMode } = useSwapMode();
+
+  const blockchains = useAppStore().blockchains({
+    type,
+  });
+  const tokens = useAppStore().tokens();
+  const filteredBlockchains = useMemo(
+    () => filterBlockchainsWithAtLeastOneToken(blockchains, tokens),
+    [blockchains.length, tokens.length]
+  );
+  const activeCategoriesCount = getCategoriesCount(filteredBlockchains);
+
+  const showCategory = !props.hideCategory && activeCategoriesCount !== 1;
+
+  const handleBlockchainChange = (blockchain: BlockchainMeta) => {
+    if (type === 'custom-token') {
+      navigate(`..?blockchain=${blockchain.name}`, { replace: true });
+    } else {
+      if (type === 'source') {
+        setFromBlockchain(blockchain);
+      } else {
+        if (swapMode === 'swap') {
+          setToBlockchain(blockchain);
+        } else {
+          const blockchainNativeToken = findNativeToken(blockchain);
+          if (blockchainNativeToken) {
+            setToToken({
+              token: blockchainNativeToken,
+              meta: { blockchains },
+            });
+          }
+        }
+      }
+      navigateBack();
+    }
+  };
+
+  return (
+    <Layout
+      header={{
+        title: i18n.t(`Select Chain`),
+      }}>
+      <PageContainer view>
+        {showCategory && (
+          <>
+            <SelectableCategoryList
+              setCategory={setBlockchainCategory}
+              category={blockchainCategory}
+              blockchains={filteredBlockchains}
+              isLoading={fetchStatus === 'loading'}
+            />
+            <Divider size={24} />
+          </>
+        )}
+
+        <SearchInput
+          value={searchedFor}
+          autoFocus
+          placeholder={i18n.t('Search Chain')}
+          id="widget-select-blockchain-search-input"
+          color="light"
+          variant="contained"
+          size="large"
+          setValue={() => setSearchedFor('')}
+          onChange={(event) => setSearchedFor(event.target.value)}
+        />
+        <Divider size={16} />
+
+        <BlockchainList
+          list={filteredBlockchains}
+          showTitle={type !== 'custom-token'}
+          searchedFor={searchedFor}
+          blockchainCategory={blockchainCategory}
+          onChange={handleBlockchainChange}
+        />
+      </PageContainer>
+    </Layout>
+  );
+}

package/src/pages/SelectSwapItemPage/SelectSwapItemPage.constants.ts

@@ -0,0 +1,2 @@
+export const MAX_TOKENS_BEFORE_FETCH = 20;
+export const MIN_SEARCH_LENGTH = 3;

package/src/pages/SelectSwapItemPage/SelectSwapItemPage.helpers.ts

@@ -0,0 +1,51 @@
+import type { TokenList } from '../../components/TokenList';
+import type { Token } from 'rango-sdk';
+import type { ComponentProps } from 'react';
+
+import {
+  MAX_TOKENS_BEFORE_FETCH,
+  MIN_SEARCH_LENGTH,
+} from './SelectSwapItemPage.constants';
+
+export function shouldSearchForCustomTokens(
+  metaSearchResultTokens: Token[],
+  query: string,
+  blockchain?: string
+) {
+  if (
+    blockchain &&
+    metaSearchResultTokens.length === 1 &&
+    metaSearchResultTokens[0]?.address === query
+  ) {
+    return false;
+  }
+  return (
+    metaSearchResultTokens.length < MAX_TOKENS_BEFORE_FETCH &&
+    query.trim().length >= MIN_SEARCH_LENGTH
+  );
+}
+
+export function prepareTokensList(
+  tokens: Token[],
+  customTokens: Token[],
+  query: string,
+  loading: boolean,
+  blockchain?: string
+) {
+  let modifiedList: ComponentProps<typeof TokenList>['list'] = [...tokens];
+
+  if (shouldSearchForCustomTokens(tokens, query, blockchain)) {
+    modifiedList = loading
+      ? [...modifiedList, 'skeleton', 'skeleton', 'skeleton']
+      : [
+          ...modifiedList,
+          ...customTokens.map((customToken) => ({
+            ...customToken,
+            customToken: true,
+            warning: true,
+          })),
+        ];
+  }
+
+  return modifiedList;
+}

package/src/pages/SelectSwapItemPage/SelectSwapItemsPage.tsx

@@ -0,0 +1,160 @@
+import type { BlockchainMeta, Token } from 'rango-sdk';
+
+import { i18n } from '@lingui/core';
+import { Divider, Spinner } from '@rango-dev/ui';
+import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { BlockchainsSection } from '../../components/BlockchainsSection';
+import { Layout, PageContainer } from '../../components/Layout';
+import { SearchInput } from '../../components/SearchInput';
+import { TokenList } from '../../components/TokenList';
+import { navigationRoutes } from '../../constants/navigationRoutes';
+import { useNavigateBack } from '../../hooks/useNavigateBack';
+import { useSearchCustomTokens } from '../../hooks/useSearchCustomTokens';
+import { useAppStore } from '../../store/AppStore';
+import { useQuoteStore } from '../../store/quote';
+
+import {
+  prepareTokensList,
+  shouldSearchForCustomTokens,
+} from './SelectSwapItemPage.helpers';
+
+interface PropTypes {
+  type: 'source' | 'destination';
+}
+
+export function SelectSwapItemsPage(props: PropTypes) {
+  const { type } = props;
+  const navigate = useNavigate();
+  const navigateBack = useNavigateBack();
+  const {
+    fromBlockchain,
+    toBlockchain,
+    setFromToken,
+    setToToken,
+    setFromBlockchain,
+    setToBlockchain,
+  } = useQuoteStore()();
+  const { getBalanceFor } = useAppStore();
+  const {
+    fetch,
+    loading,
+    tokens: customTokens,
+    cancel,
+  } = useSearchCustomTokens();
+  const [searchedFor, setSearchedFor] = useState<string>('');
+
+  const selectedBlockchain = type === 'source' ? fromBlockchain : toBlockchain;
+  const selectedBlockchainName = selectedBlockchain?.name ?? '';
+
+  // Tokens & Blockchains list
+  const blockchains = useAppStore().blockchains({
+    type,
+  });
+  const tokens = useAppStore().tokens({
+    type,
+    blockchain: selectedBlockchainName,
+    searchFor: searchedFor,
+    getBalanceFor: getBalanceFor,
+  });
+
+  const modifiedTokens = prepareTokensList(
+    tokens,
+    customTokens,
+    searchedFor,
+    loading,
+    selectedBlockchain?.name
+  );
+
+  const updateBlockchain = (blockchain: BlockchainMeta) => {
+    if (type === 'source') {
+      setFromBlockchain(blockchain);
+    } else {
+      setToBlockchain(blockchain);
+    }
+  };
+
+  const updateToken = (token: Token) => {
+    if (type === 'source') {
+      setFromToken({ token, meta: { blockchains } });
+    } else {
+      setToToken({ token, meta: { blockchains } });
+    }
+  };
+  const types = {
+    source: i18n.t('Source'),
+    destination: i18n.t('Destination'),
+  };
+
+  useEffect(() => {
+    if (
+      shouldSearchForCustomTokens(tokens, searchedFor, selectedBlockchain?.name)
+    ) {
+      fetch(searchedFor, selectedBlockchain?.name ?? undefined);
+    }
+
+    return () => {
+      cancel();
+    };
+  }, [tokens.length, searchedFor, selectedBlockchain?.name]);
+
+  return (
+    <Layout
+      header={{
+        title: i18n.t('Swap {type}', { type: types[type] }),
+      }}>
+      <PageContainer>
+        <BlockchainsSection
+          blockchains={blockchains}
+          type={type == 'source' ? 'from' : 'to'}
+          blockchain={type === 'source' ? fromBlockchain : toBlockchain}
+          onMoreClick={() => navigate(navigationRoutes.blockchains)}
+          onChange={(blockchain) => {
+            updateBlockchain(blockchain);
+          }}
+        />
+        <Divider size={24} />
+        <SearchInput
+          value={searchedFor}
+          id="widget-select-swap-item-search-input"
+          autoFocus
+          placeholder={i18n.t('Search Token')}
+          color="light"
+          variant="contained"
+          size="large"
+          setValue={() => setSearchedFor('')}
+          onChange={(event) => setSearchedFor(event.target.value)}
+          suffix={
+            shouldSearchForCustomTokens(
+              tokens,
+              searchedFor,
+              selectedBlockchain?.name
+            ) && loading ? (
+              <Spinner size={12} color="secondary" />
+            ) : undefined
+          }
+        />
+        <Divider size={16} />
+        <TokenList
+          list={modifiedTokens}
+          selectedBlockchain={selectedBlockchainName}
+          searchedFor={searchedFor}
+          type={type}
+          onChange={(token) => {
+            updateToken(token);
+
+            const tokenBlockchain = blockchains.find(
+              (chain) => token.blockchain === chain.name
+            );
+            if (tokenBlockchain) {
+              updateBlockchain(tokenBlockchain);
+            }
+
+            navigateBack();
+          }}
+        />
+      </PageContainer>
+    </Layout>
+  );
+}

package/src/pages/SelectSwapItemPage/index.ts

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

package/src/pages/SettingsPage.tsx

@@ -0,0 +1,67 @@
+import { i18n } from '@lingui/core';
+import { Alert, Button, styled } from '@rango-dev/ui';
+import React from 'react';
+import { useInRouterContext, useSearchParams } from 'react-router-dom';
+
+import { Layout, PageContainer } from '../components/Layout';
+import { Slippage } from '../components/Slippage';
+import { SearchParams } from '../constants/searchParams';
+import { SettingsLists } from '../containers/Settings/Lists';
+import { useAppStore } from '../store/AppStore';
+
+const ResetAction = styled('div', {
+  paddingLeft: '$8',
+});
+
+export function SettingsPage() {
+  const { isInCampaignMode, updateCampaignMode } = useAppStore();
+  const campaignMode = isInCampaignMode();
+
+  const [, setSearchParams] = useSearchParams();
+  const isRouterInContext = useInRouterContext();
+
+  const onClick = () => {
+    if (isRouterInContext && campaignMode) {
+      setSearchParams(
+        (prev) => {
+          prev.delete(SearchParams.LIQUIDITY_SOURCES);
+          return prev;
+        },
+        { replace: true }
+      );
+      updateCampaignMode('liquiditySources', undefined);
+    }
+  };
+  return (
+    <Layout
+      header={{
+        title: i18n.t('Settings'),
+      }}>
+      <PageContainer>
+        {campaignMode && (
+          <Alert
+            type="info"
+            variant="alarm"
+            id="widget-settings-campaign-mode-alert"
+            title={i18n.t(
+              "Currently, you're in campaign mode with restrictions on liquidity sources. Would you like to switch out of this mode and make use of all available liquidity sources?"
+            )}
+            action={
+              <ResetAction>
+                <Button
+                  id="widget-setting-exit-campaign-mode-btn"
+                  type="secondary"
+                  size="small"
+                  onClick={onClick}>
+                  {i18n.t('Reset')}
+                </Button>
+              </ResetAction>
+            }
+          />
+        )}
+        <Slippage />
+        <SettingsLists />
+      </PageContainer>
+    </Layout>
+  );
+}