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

package/src/pages/HistoryPage.tsx

@@ -0,0 +1,311 @@
+import { i18n } from '@lingui/core';
+import { useManager } from '@rango-dev/queue-manager-react';
+import {
+  Button,
+  darkTheme,
+  Divider,
+  MessageBox,
+  NotFound,
+  styled,
+  Tabs,
+  Typography,
+} from '@rango-dev/ui';
+import {
+  type PendingSwap,
+  type PendingSwapStep,
+  TransactionStatus,
+} from 'rango-types';
+import React, { useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { WatermarkedModal } from '../components/common/WatermarkedModal';
+import { FilterSelector } from '../components/FilterSelector';
+import { SuffixContainer } from '../components/HeaderButtons/HeaderButtons.styles';
+import { HistoryGroupedList } from '../components/HistoryGroupedList';
+import { NotFoundContainer } from '../components/HistoryGroupedList/HistoryGroupedList.styles';
+import { Layout, PageContainer } from '../components/Layout';
+import { SearchInput } from '../components/SearchInput';
+import { useSwapMode } from '../hooks/useSwapMode';
+import { getContainer } from '../utils/common';
+import { groupSwapsByDate } from '../utils/date';
+import { containsText } from '../utils/numbers';
+import { getPendingSwaps } from '../utils/queue';
+
+type SwapModeTab = 'all' | 'swap' | 'refuel';
+
+const HistoryGroupedListContainer = styled('div', {
+  overflowY: 'visible',
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 15,
+  height: '100%',
+  // See note on https://github.com/rango-exchange/rango-client/pull/1284
+  minHeight: 0,
+  flexGrow: 1,
+});
+
+const SearchAndFilterBar = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+const Description = styled('div', {
+  '._typography': {
+    color: '$neutral700',
+    [`.${darkTheme}&`]: {
+      color: '$neutral900',
+    },
+  },
+});
+
+const isStepContainsText = (steps: PendingSwapStep[], value: string) => {
+  if (!steps?.length) {
+    return false;
+  }
+  return steps.filter(
+    (step) =>
+      containsText(step.fromBlockchain, value) ||
+      containsText(step.toBlockchain, value) ||
+      containsText(step.toSymbol, value) ||
+      containsText(step.fromSymbol, value)
+  ).length;
+};
+
+export function HistoryPage() {
+  const navigate = useNavigate();
+  const { manager, state } = useManager();
+  const list: PendingSwap[] = getPendingSwaps(manager).map(({ swap }) => swap);
+  const [searchedFor, setSearchedFor] = useState<string>('');
+  const [openFilterSelector, setOpenFilterSelector] = useState(false);
+  const loading = !state.loadedFromPersistor;
+  const [filterBy, setFilterBy] = useState('');
+  const [openClearModal, setOpenClearModal] = useState(false);
+  const [swapModeActiveTab, setSwapModeActiveTab] =
+    useState<SwapModeTab>('all');
+  const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value;
+    setSearchedFor(value);
+  };
+  const { isMultiMode } = useSwapMode();
+
+  const transactionStatusFilters = [
+    {
+      id: TransactionStatus.SUCCESS,
+      title: i18n.t('Complete'),
+    },
+    {
+      id: TransactionStatus.RUNNING,
+      title: i18n.t('Running'),
+    },
+    { id: TransactionStatus.FAILED, title: i18n.t('Failed') },
+  ];
+
+  const swapModeTabItems = [
+    {
+      id: 'all',
+      title: i18n.t('All'),
+    },
+    {
+      id: 'swap',
+      title: i18n.t('Swap'),
+    },
+    {
+      id: 'refuel',
+      title: i18n.t('Refuel'),
+    },
+  ];
+
+  const filteredList = useMemo(() => {
+    if (!searchedFor && !filterBy && swapModeActiveTab === 'all') {
+      return list;
+    }
+
+    return list.filter((swap) => {
+      const { inputAmount, status, steps, requestId, mode } = swap;
+
+      const matchesSearch =
+        !searchedFor ||
+        containsText(inputAmount, searchedFor) ||
+        containsText(status, searchedFor) ||
+        isStepContainsText(steps, searchedFor) ||
+        containsText(requestId, searchedFor);
+
+      const matchesFilter = !filterBy || filterBy === status;
+
+      const matchesSwapMode = (() => {
+        if (swapModeActiveTab === 'all') {
+          return true;
+        }
+        if (swapModeActiveTab === 'swap') {
+          return !mode || mode === 'swap';
+        }
+        if (swapModeActiveTab === 'refuel') {
+          return mode === 'refuel';
+        }
+        return false;
+      })();
+
+      return matchesSearch && matchesFilter && matchesSwapMode;
+    });
+  }, [list, searchedFor, filterBy, swapModeActiveTab]);
+
+  const isEmpty = !filteredList?.length && !loading;
+
+  const onCloseModal = () => setOpenClearModal(false);
+  const onClear = async () => {
+    try {
+      await manager?.clearQueue();
+
+      setOpenClearModal(false);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+  const isClearButtonDisabled = useMemo(() => {
+    return !list.some(
+      (swap) =>
+        swap.status === TransactionStatus.SUCCESS ||
+        swap.status === TransactionStatus.FAILED
+    );
+  }, [list]);
+
+  return (
+    <Layout
+      header={{
+        title: i18n.t('History'),
+        suffix: (
+          <SuffixContainer>
+            <Button
+              id="widget-history-clear-btn"
+              disabled={isClearButtonDisabled}
+              variant="ghost"
+              size="xsmall"
+              onClick={() => setOpenClearModal(true)}>
+              <Typography size="medium" variant="label" color="error">
+                {i18n.t('Clear')}
+              </Typography>
+            </Button>
+          </SuffixContainer>
+        ),
+      }}>
+      <PageContainer>
+        <SearchAndFilterBar>
+          <SearchInput
+            setValue={setSearchedFor}
+            fullWidth
+            variant="contained"
+            placeholder={i18n.t('Search Transaction')}
+            id="widget-history-search-transaction-input"
+            autoFocus
+            onChange={handleSearch}
+            style={{ height: 36 }}
+            value={searchedFor}
+          />
+          <Divider size={10} direction="horizontal" />
+
+          <FilterSelector
+            filterBy={filterBy}
+            open={openFilterSelector}
+            onOpenChange={(open) => setOpenFilterSelector(open)}
+            onClickItem={(id) => setFilterBy(id)}
+            list={transactionStatusFilters}
+          />
+        </SearchAndFilterBar>
+
+        <Divider size="16" />
+
+        {isMultiMode && !loading && (
+          <>
+            <Tabs
+              items={swapModeTabItems}
+              onChange={(item) => setSwapModeActiveTab(item.id as SwapModeTab)}
+              value={swapModeActiveTab}
+              type="secondary"
+            />
+            <Divider size="12" />
+          </>
+        )}
+        <HistoryGroupedListContainer>
+          {isEmpty && (
+            <NotFoundContainer>
+              <Divider size={32} />
+              <NotFound
+                title={
+                  searchedFor
+                    ? i18n.t('No results found')
+                    : i18n.t('No transactions')
+                }
+                titleColor={!searchedFor ? '$info' : undefined}
+                hasIcon={!!searchedFor}
+                description={
+                  searchedFor
+                    ? i18n.t('Try using different keywords')
+                    : i18n.t(
+                        'Your transaction history is stored locally and will appear here after you start a swap'
+                      )
+                }
+              />
+            </NotFoundContainer>
+          )}
+          {!isEmpty && (
+            <HistoryGroupedList
+              list={filteredList}
+              onSwapClick={navigate}
+              groupBy={groupSwapsByDate}
+              isLoading={loading}
+            />
+          )}
+        </HistoryGroupedListContainer>
+      </PageContainer>
+      <WatermarkedModal
+        open={openClearModal}
+        onClose={onCloseModal}
+        id="widget-history-clear-modal"
+        container={getContainer()}>
+        <Divider size={20} />
+        <MessageBox
+          type="warning"
+          title={i18n.t('Clear Transaction History')}
+          description={
+            <Description>
+              <Typography variant="body" size="medium">
+                {i18n.t(
+                  'Proceeding will remove all successful and failed transactions from the widget. Do you want to continue?'
+                )}
+              </Typography>
+              <Divider size={'24'} />
+
+              <Typography variant="body" size="small">
+                {i18n.t(
+                  'Note: This does not erase your transaction history on the chain; it only removes them here.'
+                )}
+              </Typography>
+            </Description>
+          }
+        />
+        <Divider size={30} />
+        <Button
+          id="widget-history-clear-modal-yes-btn"
+          variant="contained"
+          type="primary"
+          size="large"
+          onClick={onClear}>
+          {i18n.t('Yes, Clear the history')}
+        </Button>
+        <Divider size={10} />
+        <Button
+          id="widget-history-clear-modal-no-btn"
+          variant="outlined"
+          type="primary"
+          size="large"
+          onClick={onCloseModal}>
+          <Typography variant="title" size="medium" color="primary">
+            {i18n.t('No, Cancel')}
+          </Typography>
+        </Button>
+      </WatermarkedModal>
+    </Layout>
+  );
+}

package/src/pages/Home.tsx

@@ -0,0 +1,313 @@
+import type { SelectedQuote } from '../types';
+
+import { i18n } from '@lingui/core';
+import { Button, Divider, styled, WarningIcon } from '@rango-dev/ui';
+import BigNumber from 'bignumber.js';
+import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { HeaderButtons } from '../components/HeaderButtons';
+import { Layout, PageContainer } from '../components/Layout';
+import { QuoteWarningsAndErrors } from '../components/QuoteWarningsAndErrors';
+import { SameTokensWarning } from '../components/SameTokensWarning';
+import { SlippageWarningsAndErrors } from '../components/SlippageWarningsAndErrors/SlippageWarningsAndErrors';
+import { SwapMetrics } from '../components/SwapMetrics';
+import { navigationRoutes } from '../constants/navigationRoutes';
+import { SLIPPAGES } from '../constants/swapSettings';
+import { ExpandedQuotes } from '../containers/ExpandedQuotes';
+import { Inputs } from '../containers/Inputs';
+import { QuoteInfo } from '../containers/QuoteInfo';
+import useScreenDetect from '../hooks/useScreenDetect';
+import { useSwapInput } from '../hooks/useSwapInput';
+import { useSwapMode } from '../hooks/useSwapMode';
+import { useAppStore } from '../store/AppStore';
+import { useQuoteStore } from '../store/quote';
+import { useUiStore } from '../store/ui';
+import { UiEventTypes } from '../types';
+import { isVariantExpandable } from '../utils/configs';
+import { emitPreventableEvent } from '../utils/events';
+import { getSlippageValidation } from '../utils/settings';
+import { getSwapButtonState, isTokensIdentical } from '../utils/swap';
+
+const MainContainer = styled('div', {
+  display: 'flex',
+  alignItems: 'flex-start',
+  maxHeight: 700,
+  '& .footer__alert': {
+    paddingTop: '0 !important',
+  },
+});
+export const TIME_TO_NAVIGATE_ANOTHER_PAGE = 300;
+
+export function Home() {
+  const navigate = useNavigate();
+  const {
+    fromToken,
+    toToken,
+    inputAmount,
+    selectedQuote,
+    refetchQuote,
+    error: quoteError,
+    warning: quoteWarning,
+    quotes,
+    setSelectedQuote,
+    resetQuoteWallets,
+    setQuoteWarningsConfirmed,
+    updateQuotePartialState,
+  } = useQuoteStore()();
+
+  const [isVisibleExpanded, setIsVisibleExpanded] = useState<boolean>(false);
+  const { isLargeScreen, isExtraLargeScreen } = useScreenDetect();
+
+  const { fetch: fetchQuote, loading } = useSwapInput({ refetchQuote });
+  const {
+    config,
+    fetchStatus: fetchMetaStatus,
+    connectedWallets,
+    customSlippage,
+    slippage,
+    setSlippage,
+    setCustomSlippage,
+  } = useAppStore();
+
+  const { isActiveTab } = useUiStore();
+  const [showQuoteWarningModal, setShowQuoteWarningModal] = useState(false);
+  const currentSlippage = customSlippage !== null ? customSlippage : slippage;
+  const { swapMode } = useSwapMode();
+
+  const slippageValidation = getSlippageValidation(currentSlippage);
+
+  const needsToWarnEthOnPath = false;
+
+  const swapButtonState = getSwapButtonState({
+    fetchMetaStatus,
+    fetchingQuote: loading,
+    inputAmount,
+    quote: selectedQuote,
+    anyWalletConnected: connectedWallets.length > 0,
+    error: quoteError,
+    warning: quoteWarning,
+    needsToWarnEthOnPath,
+  });
+
+  const isExpandable = isVariantExpandable(
+    isLargeScreen,
+    isExtraLargeScreen,
+    config?.variant
+  );
+
+  const hasInputs =
+    !!inputAmount &&
+    !!fromToken &&
+    !!toToken &&
+    new BigNumber(inputAmount).gt(0) &&
+    !isTokensIdentical(fromToken, toToken);
+
+  const fetchingQuote = hasInputs && fetchMetaStatus === 'success' && loading;
+
+  const currentQuoteWarning =
+    slippageValidation?.quoteValidation || quoteWarning;
+
+  const hasValidQuotes =
+    !isExpandable || (isExpandable && quotes?.results.length);
+  const hasWarningOrError = currentQuoteWarning || quoteError;
+  const showMessages = hasValidQuotes && hasWarningOrError;
+
+  const showSwapMetrics = !!fromToken && !!toToken;
+  const showSlippageAlerts = showSwapMetrics && !!slippageValidation;
+
+  const onClickRefresh =
+    (!!selectedQuote || quoteError) && !showQuoteWarningModal
+      ? fetchQuote
+      : undefined;
+
+  const onHandleNavigation = (route: string) => {
+    if (isExpandable && isVisibleExpanded) {
+      setIsVisibleExpanded(false);
+      setTimeout(() => {
+        navigate(route);
+      }, TIME_TO_NAVIGATE_ANOTHER_PAGE);
+    } else {
+      navigate(route);
+    }
+  };
+  const onClickOnQuote = (quote: SelectedQuote) => {
+    if (selectedQuote?.requestId !== quote.requestId) {
+      setShowQuoteWarningModal(false);
+      setSelectedQuote(quote);
+    }
+  };
+
+  const onChangeSlippage = (slippage: number | null) => {
+    if (!slippage) {
+      return;
+    }
+    if (SLIPPAGES.includes(slippage)) {
+      setSlippage(slippage);
+      setCustomSlippage(null);
+      return;
+    }
+    setCustomSlippage(slippage);
+  };
+
+  const handleInputTokenClick = (mode: 'from' | 'to') => {
+    if (mode === 'from') {
+      onHandleNavigation(navigationRoutes.fromSwap);
+    } else {
+      onHandleNavigation(
+        swapMode === 'swap'
+          ? navigationRoutes.toSwap
+          : navigationRoutes.toSwap + '/' + navigationRoutes.blockchains
+      );
+    }
+  };
+
+  useEffect(() => {
+    resetQuoteWallets();
+    updateQuotePartialState('refetchQuote', true);
+  }, []);
+
+  useEffect(() => {
+    setIsVisibleExpanded(hasInputs);
+  }, [hasInputs]);
+
+  return (
+    <MainContainer>
+      <Layout
+        height="auto"
+        footer={
+          // eslint-disable-next-line jsx-id-attribute-enforcement/missing-ids
+          <Button
+            id={`widget-swap-${swapButtonState.action}-btn`}
+            type="primary"
+            size="large"
+            disabled={swapButtonState.disabled || !isActiveTab}
+            prefix={
+              swapButtonState.action === 'confirm-warning' && <WarningIcon />
+            }
+            fullWidth
+            onClick={() => {
+              if (swapButtonState.action === 'connect-wallet') {
+                emitPreventableEvent(
+                  { type: UiEventTypes.CLICK_CONNECT_WALLET },
+                  () => onHandleNavigation(navigationRoutes.wallets)
+                );
+              } else if (swapButtonState.action === 'confirm-warning') {
+                setShowQuoteWarningModal(true);
+              } else {
+                onHandleNavigation(navigationRoutes.confirmSwap);
+              }
+            }}>
+            {swapButtonState.title}
+          </Button>
+        }
+        header={{
+          onWallet: () => {
+            onHandleNavigation(navigationRoutes.wallets);
+          },
+          hasBackButton: false,
+          title:
+            config.title ||
+            (swapMode === 'swap' ? i18n.t('Swap') : i18n.t('Refuel')),
+          suffix: (
+            <HeaderButtons
+              hidden={isExpandable ? ['refresh'] : undefined}
+              onClickRefresh={onClickRefresh}
+              onClickHistory={() => onHandleNavigation(navigationRoutes.swaps)}
+              onClickSettings={() => {
+                onHandleNavigation(navigationRoutes.settings);
+              }}
+            />
+          ),
+        }}>
+        <PageContainer>
+          <Inputs
+            fetchingQuote={fetchingQuote}
+            fetchMetaStatus={fetchMetaStatus}
+            isExpandable={isExpandable}
+            onClickToken={handleInputTokenClick}
+          />
+          <Divider size="2" />
+          {!isExpandable ? (
+            <QuoteInfo
+              quote={selectedQuote}
+              loading={fetchingQuote}
+              error={quoteError}
+              id="widget-home-expandable-quote-container"
+              tagHidden={false}
+              warning={currentQuoteWarning}
+              type="basic"
+              onClickAllRoutes={
+                !!quotes && quotes.results.length > 1
+                  ? () => {
+                      updateQuotePartialState('refetchQuote', false);
+                      onHandleNavigation(navigationRoutes.routes);
+                    }
+                  : undefined
+              }
+            />
+          ) : null}
+          {showSwapMetrics && (
+            <>
+              <Divider size={8} />
+              <SwapMetrics
+                quoteError={quoteError}
+                quoteWarning={currentQuoteWarning}
+                fromToken={fromToken}
+                toToken={toToken}
+                quote={selectedQuote}
+                loading={fetchingQuote}
+              />
+            </>
+          )}
+
+          {showMessages ? (
+            <>
+              <QuoteWarningsAndErrors
+                warning={currentQuoteWarning}
+                error={quoteError}
+                skipAlerts={!!slippageValidation}
+                couldChangeSettings={true}
+                refetchQuote={fetchQuote}
+                showWarningModal={showQuoteWarningModal}
+                confirmationDisabled={!isActiveTab}
+                onOpenWarningModal={() => setShowQuoteWarningModal(true)}
+                onCloseWarningModal={() => setShowQuoteWarningModal(false)}
+                onChangeSlippage={onChangeSlippage}
+                onConfirmWarningModal={() => {
+                  setShowQuoteWarningModal(false);
+                  setQuoteWarningsConfirmed(true);
+                  onHandleNavigation(navigationRoutes.confirmSwap);
+                }}
+                onChangeSettings={() =>
+                  onHandleNavigation(navigationRoutes.settings)
+                }
+              />
+            </>
+          ) : null}
+
+          {showSlippageAlerts && (
+            <>
+              <Divider size="10" />
+              <SlippageWarningsAndErrors
+                onChangeSettings={() =>
+                  onHandleNavigation(navigationRoutes.settings)
+                }
+              />
+            </>
+          )}
+          <SameTokensWarning />
+        </PageContainer>
+      </Layout>
+      {isExpandable ? (
+        <ExpandedQuotes
+          loading={fetchingQuote}
+          onClickOnQuote={onClickOnQuote}
+          fetch={fetchQuote}
+          onClickRefresh={onClickRefresh}
+          isVisible={isVisibleExpanded}
+        />
+      ) : null}
+    </MainContainer>
+  );
+}

package/src/pages/LanguagePage.tsx

@@ -0,0 +1,69 @@
+import { i18n } from '@lingui/core';
+import {
+  Alert,
+  Divider,
+  List,
+  ListItemButton,
+  Radio,
+  RadioRoot,
+  Typography,
+} from '@rango-dev/ui';
+import React from 'react';
+
+import { Layout, PageContainer } from '../components/Layout';
+import { useLanguage } from '../hooks/useLanguage';
+import { useNavigateBack } from '../hooks/useNavigateBack';
+
+export function LanguagePage() {
+  const { activeLanguage, changeLanguage, languages } = useLanguage();
+  const navigateBack = useNavigateBack();
+
+  const languageList = languages.map((languageItem) => {
+    const { local, label, SVGFlag } = languageItem;
+    return {
+      id: `widget-setting-languages-${local}-item-btn`,
+      value: local,
+      title: (
+        <Typography variant="title" size="xmedium">
+          {label}
+        </Typography>
+      ),
+      onClick: () => {
+        changeLanguage(languageItem.local);
+        navigateBack();
+      },
+      end: <Radio value={local} />,
+      start: <SVGFlag />,
+    };
+  });
+
+  return (
+    <Layout
+      header={{
+        title: i18n.t('Language'),
+      }}>
+      <PageContainer>
+        <Alert
+          type="warning"
+          id="widget-language-machine-translation-alarm-alert"
+          variant="alarm"
+          title="Warning: We are using machine translation, so the translations may be inaccurate."
+        />
+        <Divider size={'8'} />
+        <RadioRoot value={activeLanguage}>
+          <List
+            type={
+              <ListItemButton
+                title={i18n.t('language')}
+                className="widget-language-list-item-btn"
+                id="_"
+                onClick={() => console.log()}
+              />
+            }
+            items={languageList}
+          />
+        </RadioRoot>
+      </PageContainer>
+    </Layout>
+  );
+}