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

package/src/pages/HistoryPage.tsx

@@ -1,32 +1,121 @@
-import { History } from '@rango-dev/ui';
+import type { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
+import type { PendingSwapStep } from 'rango-types';
+
+import { i18n } from '@lingui/core';
 import { useManager } from '@rango-dev/queue-manager-react';
-import React from 'react';
+import { Divider, NotFound, styled } from '@rango-dev/ui';
+import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+
+import { Layout } from '../components/Layout';
+import { SearchInput } from '../components/SearchInput';
+import { SwapsGroup } from '../components/SwapsGroup';
+import { NotFoundContainer } from '../components/SwapsGroup/SwapsGroup.styles';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { useNavigateBack } from '../hooks/useNavigateBack';
-import { getPendingSwaps } from '../utils/queue';
 import { useUiStore } from '../store/ui';
 import { groupSwapsByDate } from '../utils/date';
+import { containsText } from '../utils/numbers';
+import { getPendingSwaps } from '../utils/queue';
+
+const Container = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  height: '100%',
+  gap: 15,
+});
+
+const SwapsGroupContainer = styled('div', {
+  overflowY: 'visible',
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 15,
+  height: '100%',
+});
+
+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 setSelectedSwap = useUiStore.use.setSelectedSwap();
   const navigate = useNavigate();
   const { navigateBackFrom } = useNavigateBack();
   const { manager, state } = useManager();
-  const pendingSwaps = getPendingSwaps(manager).map(({ swap }) => swap);
-
+  const list: PendingSwap[] = getPendingSwaps(manager).map(({ swap }) => swap);
+  const [searchedFor, setSearchedFor] = useState<string>('');
   const loading = !state.loadedFromPersistor;
 
+  const searchHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value;
+    setSearchedFor(value);
+  };
+
+  let filteredList = list;
+  if (searchedFor) {
+    filteredList = list.filter(
+      (swap) =>
+        containsText(swap.inputAmount, searchedFor) ||
+        containsText(swap.status, searchedFor) ||
+        isStepContainsText(swap.steps, searchedFor) ||
+        containsText(swap.requestId, searchedFor)
+    );
+  }
+
+  const isEmpty = !filteredList?.length && !loading;
+
   return (
-    <History
-      list={pendingSwaps}
-      groupBy={groupSwapsByDate}
-      loading={loading}
-      onSwapClick={(requestId) => {
-        setSelectedSwap(requestId);
-        navigate(`${requestId}`, { replace: true });
-      }}
-      onBack={navigateBackFrom.bind(null, navigationRoutes.swaps)}
-    />
+    <Layout
+      header={{
+        onBack: navigateBackFrom.bind(null, '/' + navigationRoutes.swaps),
+        title: i18n.t('History'),
+      }}>
+      <Container>
+        <SearchInput
+          setValue={setSearchedFor}
+          fullWidth
+          variant="contained"
+          placeholder="Search Transaction"
+          autoFocus
+          onChange={searchHandler}
+          value={searchedFor}
+        />
+        <SwapsGroupContainer>
+          {isEmpty && (
+            <NotFoundContainer>
+              <Divider size={32} />
+              <NotFound
+                title={i18n.t('No results found')}
+                description={
+                  searchedFor ? i18n.t('Try using different keywords') : ''
+                }
+              />
+            </NotFoundContainer>
+          )}
+          {!isEmpty && (
+            <SwapsGroup
+              list={filteredList}
+              onSwapClick={(requestId) => {
+                setSelectedSwap(requestId);
+                navigate(`${requestId}`, { replace: true });
+              }}
+              groupBy={groupSwapsByDate}
+              isLoading={loading}
+            />
+          )}
+        </SwapsGroupContainer>
+      </Container>
+    </Layout>
   );
 }

package/src/pages/Home.tsx

@@ -1,76 +1,144 @@
-import React, { useEffect } from 'react';
+import type { SwapResult } from 'rango-sdk';
+
+import { i18n } from '@lingui/core';
+import {
+  Alert,
+  BestRoute,
+  BestRouteSkeleton,
+  Button,
+  Divider,
+  styled,
+  SwapInput,
+  Typography,
+  WarningIcon,
+} from '@rango-dev/ui';
+import React, { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { HomePanel } from '@rango-dev/ui';
-import { fetchBestRoute, useBestRouteStore } from '../store/bestRoute';
-import { SwithFromAndToButton } from '../components/SwitchFromAndTo';
+
+import { HomeButtons } from '../components/HeaderButtons';
+import { Layout } from '../components/Layout';
+import { NoRoutes } from '../components/NoRoutes';
+import { RouteErrors } from '../components/RouteErrors';
+import { SwitchFromAndToButton } from '../components/SwitchFromAndTo';
+import { errorMessages } from '../constants/errors';
 import { navigationRoutes } from '../constants/navigationRoutes';
+import { useSwapInput } from '../hooks/useSwapInput';
+import { useBestRouteStore } from '../store/bestRoute';
 import { useMetaStore } from '../store/meta';
-import { useWalletsStore } from '../store/wallets';
-import { errorMessages } from '../constants/errors';
-import {
-  getSwapButtonState,
-  getOutputRatio,
-  hasLimitError,
-  outputRatioHasWarning,
-  canComputePriceImpact,
-  LimitErrorMessage,
-  getTotalFeeInUsd,
-  hasHighFee,
-  getPercentageChange,
-} from '../utils/swap';
 import { useUiStore } from '../store/ui';
+import { useWalletsStore } from '../store/wallets';
+import { ButtonState } from '../types';
 import {
   numberToString,
   secondsToString,
   totalArrivalTime,
 } from '../utils/numbers';
-import { getBalanceFromWallet } from '../utils/wallets';
 import { getFormatedBestRoute } from '../utils/routing';
-import BigNumber from 'bignumber.js';
+import {
+  canComputePriceImpact,
+  getOutputRatio,
+  getPercentageChange,
+  getSwapButtonState,
+  getTotalFeeInUsd,
+  hasLimitError,
+  LimitErrorMessage,
+  outputRatioHasWarning,
+} from '../utils/swap';
+import { getBalanceFromWallet } from '../utils/wallets';
+
+const Container = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  overflowY: 'visible',
+});
+
+const FromContainer = styled('div', {
+  position: 'relative',
+});
+
+const InputsContainer = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 5,
+  alignSelf: 'stretch',
+});
+
+const BestRouteContainer = styled('div', {
+  width: '100%',
+  paddingTop: '$2',
+});
+
+const FooterStepAlarm = styled('div', {
+  paddingBottom: '$15',
+});
+
+const FooterAlert = styled('div', {
+  width: '100%',
+  display: 'flex',
+});
+
+const BALANCE_PRECISION = 8;
+const TWO_DECIMAL = 2;
+const MAX_DECIMAL = 6;
+const MIN_DECIMAL = 0;
+const WARNING_LEVEL_LIMIT = -10;
 
 export function Home() {
   const navigate = useNavigate();
-  const fromChain = useBestRouteStore.use.fromChain();
-  const fromToken = useBestRouteStore.use.fromToken();
-  const toChain = useBestRouteStore.use.toChain();
-  const toToken = useBestRouteStore.use.toToken();
-  const setInputAmount = useBestRouteStore.use.setInputAmount();
-  const inputUsdValue = useBestRouteStore.use.inputUsdValue();
-  const inputAmount = useBestRouteStore.use.inputAmount();
-  const outputAmount = useBestRouteStore.use.outputAmount();
-  const outputUsdValue = useBestRouteStore.use.outputUsdValue();
-  const bestRoute = useBestRouteStore.use.bestRoute();
-  const tokens = useMetaStore.use.meta().tokens;
-  const fetchingBestRoute = useBestRouteStore.use.loading();
-  const bestRouteError = useBestRouteStore.use.error();
-  const loadingMetaStatus = useMetaStore.use.loadingStatus();
+  const {
+    fetch: refetchBestRoute,
+    loading: fetchingBestRoute,
+    error: bestRouteError,
+  } = useSwapInput();
+  const {
+    fromToken,
+    fromBlockchain,
+    toToken,
+    toBlockchain,
+    setInputAmount,
+    inputAmount,
+    inputUsdValue,
+    outputAmount,
+    outputUsdValue,
+    bestRoute,
+    resetRouteWallets,
+  } = useBestRouteStore();
+
+  const {
+    meta: { tokens },
+    loadingStatus: loadingMetaStatus,
+  } = useMetaStore();
+
   const connectedWallets = useWalletsStore.use.connectedWallets();
   const setCurrentPage = useUiStore.use.setCurrentPage();
+  const [openWarningModal, setOpenWarningModal] = useState(false);
+  const {
+    fromAmountRangeError,
+    swap: swapHasError,
+    recommendation,
+  } = LimitErrorMessage(bestRoute);
+  const layoutRef = useRef<HTMLDivElement>(null);
 
-  const errorMessage =
-    loadingMetaStatus === 'failed'
-      ? errorMessages.genericServerError
-      : bestRouteError;
+  const showBestRoute =
+    !!Number(inputAmount) &&
+    (!!bestRoute || fetchingBestRoute || !!bestRouteError);
 
   const needsToWarnEthOnPath = false;
 
-  const showBestRoute =
-    !!inputAmount && (!!bestRoute || fetchingBestRoute || !!bestRouteError);
-
   const outToInRatio = getOutputRatio(inputUsdValue, outputUsdValue);
-
   const highValueLoss = outputRatioHasWarning(inputUsdValue, outToInRatio);
 
-  const { fromAmountRangeError, recommendation, swap } =
-    LimitErrorMessage(bestRoute);
+  const priceImpactInputCanNotBeComputed = !canComputePriceImpact(
+    bestRoute,
+    inputAmount,
+    inputUsdValue
+  );
 
-  const priceImpactCanNotBeComputed = !canComputePriceImpact(
+  const priceImpactOutputCanNotBeComputed = !canComputePriceImpact(
     bestRoute,
     inputAmount,
-    inputUsdValue,
     outputUsdValue
   );
-
   const swapButtonState = getSwapButtonState(
     loadingMetaStatus,
     connectedWallets,
@@ -78,40 +146,36 @@ export function Home() {
     bestRoute,
     hasLimitError(bestRoute),
     highValueLoss,
-    priceImpactCanNotBeComputed,
+    priceImpactInputCanNotBeComputed || priceImpactOutputCanNotBeComputed,
     needsToWarnEthOnPath,
     inputAmount
   );
 
-  const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
-
-  const highFee = hasHighFee(totalFeeInUsd);
-
   const tokenBalance =
-    !!fromChain && !!fromToken
+    !!fromBlockchain && !!fromToken
       ? numberToString(
           getBalanceFromWallet(
             connectedWallets,
-            fromChain?.name,
+            fromBlockchain?.name,
             fromToken?.symbol,
             fromToken?.address
           )?.amount || '0',
-          8
+          BALANCE_PRECISION
         )
       : '0';
 
   const tokenBalanceReal =
-    !!fromChain && !!fromToken
+    !!fromBlockchain && !!fromToken
       ? numberToString(
           getBalanceFromWallet(
             connectedWallets,
-            fromChain?.name,
+            fromBlockchain?.name,
             fromToken?.symbol,
             fromToken?.address
           )?.amount || '0',
           getBalanceFromWallet(
             connectedWallets,
-            fromChain?.name,
+            fromBlockchain?.name,
             fromToken?.symbol,
             fromToken?.address
           )?.decimal
@@ -120,7 +184,7 @@ export function Home() {
 
   useEffect(() => {
     setCurrentPage(navigationRoutes.home);
-
+    resetRouteWallets();
     return setCurrentPage.bind(null, '');
   }, []);
 
@@ -132,60 +196,230 @@ export function Home() {
           outputUsdValue.toNumber()
         );
 
+  const getBestRouteSteps = (swaps: SwapResult[]) => {
+    return swaps.map((swap, index) => ({
+      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:
+            index === 0
+              ? numberToString(inputAmount, MIN_DECIMAL, TWO_DECIMAL)
+              : swap.fromAmount,
+        },
+      },
+      to: {
+        token: { displayName: swap.to.symbol, image: swap.to.logo },
+        chain: {
+          displayName: swap.to.blockchain,
+          image: swap.to.blockchainLogo,
+        },
+        price: {
+          value: swap.toAmount,
+        },
+      },
+      alerts:
+        swap.swapperId === swapHasError?.swapperId ? (
+          <FooterStepAlarm>
+            <Alert
+              type="error"
+              title={recommendation}
+              footer={
+                <FooterAlert>
+                  <Typography size="xsmall" variant="body" color="neutral900">
+                    {fromAmountRangeError}
+                  </Typography>
+                  <Divider direction="horizontal" size={8} />
+                  <Typography size="xsmall" variant="body" color="neutral900">
+                    |
+                  </Typography>
+                  <Divider direction="horizontal" size={8} />
+                  <Typography size="xsmall" variant="body" color="neutral900">
+                    {`Yours: ${numberToString(
+                      swapHasError?.fromAmount || null
+                    )} ${swap?.from.symbol}`}
+                  </Typography>
+                </FooterAlert>
+              }
+            />
+          </FooterStepAlarm>
+        ) : undefined,
+    }));
+  };
+
+  const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
+
+  const bestRouteData = getFormatedBestRoute(bestRoute);
+
   return (
-    <HomePanel
-      bestRoute={bestRoute}
-      bestRouteError={bestRouteError}
-      fetchBestRoute={fetchBestRoute}
-      onClickHistory={() => navigate(navigationRoutes.swaps)}
-      onClickSettings={() => navigate(navigationRoutes.settings)}
-      setInputAmount={setInputAmount}
-      fromChain={fromChain}
-      toChain={toChain}
-      fromToken={fromToken}
-      toToken={toToken}
-      outputAmount={
-        outputAmount
-          ? numberToString(new BigNumber(outputAmount))
-          : numberToString(new BigNumber(0))
+    <Layout
+      ref={layoutRef}
+      fixedHeight={false}
+      hasLogo
+      footer={
+        <Button
+          type="primary"
+          size="large"
+          disabled={swapButtonState.disabled}
+          prefix={
+            !swapButtonState.disabled &&
+            swapButtonState.hasWarning && <WarningIcon />
+          }
+          fullWidth
+          onClick={() => {
+            if (swapButtonState.state === ButtonState.WAITFORCONNECTING) {
+              navigate(navigationRoutes.wallets);
+            } else if (swapButtonState.state === ButtonState.NEEDTOCONFIRM) {
+              setOpenWarningModal(true);
+            } else {
+              navigate(navigationRoutes.confirmSwap);
+            }
+          }}>
+          {swapButtonState.title}
+        </Button>
       }
-      inputAmount={inputAmount}
-      loadingStatus={loadingMetaStatus}
-      showBestRoute={showBestRoute}
-      fetchingBestRoute={fetchingBestRoute}
-      outputUsdValue={numberToString(outputUsdValue)}
-      inputUsdValue={numberToString(inputUsdValue)}
-      swapButtonTitle={swapButtonState.title}
-      swapButtonDisabled={swapButtonState.disabled}
-      swapButtonClick={() => {
-        if (swapButtonState.title === 'Connect Wallet')
-          navigate(navigationRoutes.wallets);
-        else {
-          navigate(navigationRoutes.confirmSwap, { replace: true });
-        }
-      }}
-      onChainClick={(route) => {
-        navigate(route);
-      }}
-      onTokenClick={(route) => {
-        navigate(route);
-      }}
-      highFee={highFee}
-      errorMessage={errorMessage}
-      hasLimitError={hasLimitError}
-      swap={swap}
-      fromAmountRangeError={fromAmountRangeError}
-      recommendation={recommendation}
-      totalFeeInUsd={numberToString(totalFeeInUsd, 0, 2)}
-      swithFromAndToComponent={<SwithFromAndToButton />}
-      connectedWallets={connectedWallets}
-      percentageChange={numberToString(percentageChange, 0, 2)}
-      showPercentageChange={!!percentageChange?.lt(0)}
-      tokenBalanceReal={tokenBalanceReal}
-      tokenBalance={tokenBalance}
-      totalTime={secondsToString(totalArrivalTime(bestRoute))}
-      bestRouteData={getFormatedBestRoute(bestRoute)}
-      swapFromAmount={numberToString(swap?.fromAmount || null)}
-    />
+      header={{
+        hasConnectWallet: true,
+        title: i18n.t('Swap'),
+        suffix: (
+          <HomeButtons
+            layoutRef={layoutRef.current}
+            onClickRefresh={
+              !!bestRoute || bestRouteError ? refetchBestRoute : undefined
+            }
+            onClickHistory={() => navigate(navigationRoutes.swaps)}
+            onClickSettings={() => navigate(navigationRoutes.settings)}
+          />
+        ),
+      }}>
+      <Container>
+        <InputsContainer>
+          <FromContainer>
+            <SwapInput
+              label="From"
+              onInputChange={setInputAmount}
+              balance={tokenBalance}
+              chain={{
+                displayName: fromBlockchain?.displayName || '',
+                image: fromBlockchain?.logo || '',
+              }}
+              token={{
+                displayName: fromToken?.symbol || '',
+                image: fromToken?.image || '',
+              }}
+              onClickToken={() => navigate('from-swap')}
+              price={{
+                value: inputAmount,
+                usdValue: priceImpactInputCanNotBeComputed
+                  ? undefined
+                  : numberToString(inputUsdValue),
+                error: priceImpactInputCanNotBeComputed
+                  ? errorMessages.unknownPriceError.impacTitle
+                  : undefined,
+              }}
+              disabled={loadingMetaStatus === 'failed'}
+              loading={loadingMetaStatus === 'loading'}
+              onSelectMaxBalance={() => {
+                if (tokenBalance !== '0') {
+                  setInputAmount(tokenBalanceReal.split(',').join(''));
+                }
+              }}
+            />
+            <SwitchFromAndToButton />
+          </FromContainer>
+          <SwapInput
+            sharpBottomStyle={!!bestRoute?.result || fetchingBestRoute}
+            label="To"
+            chain={{
+              displayName: toBlockchain?.displayName || '',
+              image: toBlockchain?.logo || '',
+            }}
+            token={{
+              displayName: toToken?.symbol || '',
+              image: toToken?.image || '',
+            }}
+            percentageChange={
+              !!percentageChange?.lt(0)
+                ? numberToString(percentageChange, MIN_DECIMAL, TWO_DECIMAL)
+                : null
+            }
+            warningLevel={
+              !!percentageChange?.lt(WARNING_LEVEL_LIMIT) ? 'high' : 'low'
+            }
+            price={{
+              value: numberToString(outputAmount),
+              usdValue: priceImpactOutputCanNotBeComputed
+                ? undefined
+                : numberToString(outputUsdValue),
+              error: priceImpactOutputCanNotBeComputed
+                ? errorMessages.unknownPriceError.impacTitle
+                : undefined,
+            }}
+            onClickToken={() => navigate('to-swap')}
+            disabled={loadingMetaStatus === 'failed'}
+            loading={loadingMetaStatus === 'loading'}
+          />
+        </InputsContainer>
+        {fetchingBestRoute && (
+          <BestRouteContainer>
+            <BestRouteSkeleton type="basic" />
+          </BestRouteContainer>
+        )}
+        {showBestRoute &&
+        !fetchingBestRoute &&
+        bestRouteData?.result?.swaps?.length ? (
+          <BestRouteContainer>
+            <BestRoute
+              type="basic"
+              recommended={true}
+              input={{
+                value: numberToString(inputAmount, MIN_DECIMAL, MAX_DECIMAL),
+                usdValue: numberToString(inputUsdValue),
+              }}
+              output={{
+                value: numberToString(outputAmount),
+                usdValue: numberToString(outputUsdValue),
+              }}
+              steps={getBestRouteSteps(bestRouteData.result.swaps)}
+              percentageChange={numberToString(
+                percentageChange,
+                MIN_DECIMAL,
+                TWO_DECIMAL
+              )}
+              totalFee={numberToString(totalFeeInUsd, MIN_DECIMAL, TWO_DECIMAL)}
+              totalTime={secondsToString(totalArrivalTime(bestRoute))}
+            />
+          </BestRouteContainer>
+        ) : showBestRoute && !fetchingBestRoute ? (
+          <>
+            <Divider size={20} />
+            <NoRoutes
+              diagnosisMessage={bestRouteData?.diagnosisMessages?.[0]}
+              fetch={refetchBestRoute}
+              error={!!bestRouteError}
+            />
+          </>
+        ) : null}
+      </Container>
+      {!fetchingBestRoute && (
+        <RouteErrors
+          openModal={openWarningModal}
+          onToggle={setOpenWarningModal}
+          totalFeeInUsd={totalFeeInUsd}
+          outputUsdValue={outputUsdValue}
+          inputUsdValue={inputUsdValue}
+          percentageChange={percentageChange}
+          highValueLoss={highValueLoss}
+          priceImpactCanNotBeComputed={
+            priceImpactInputCanNotBeComputed ||
+            priceImpactOutputCanNotBeComputed
+          }
+        />
+      )}
+    </Layout>
   );
 }