@rango-dev/widget-embedded 0.1.10-next.80 → 0.1.10-next.82

package/src/pages/HistoryPage.tsx

@@ -4,6 +4,7 @@ import { TransactionType } from 'rango-sdk';
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { navigationRoutes } from '../constants/navigationRoutes';
+import { useNavigateBack } from '../hooks/useNavigateBack';
 
 export const pendingSwap: PendingSwap[] = [
   {
@@ -824,13 +825,12 @@ export const pendingSwap: PendingSwap[] = [
 
 export function HistoryPage() {
   const navigate = useNavigate();
+  const { navigateBackFrom } = useNavigateBack();
   return (
     <History
       list={pendingSwap}
-      onSwapClick={() => navigate(navigationRoutes.swapDetails)}
-      onBack={() => {
-        navigate(-1);
-      }}
+      onSwapClick={navigate.bind(null, navigationRoutes.swapDetails)}
+      onBack={navigateBackFrom.bind(null, navigationRoutes.history)}
     />
   );
 }

package/src/pages/Home.tsx

@@ -1,24 +1,38 @@
-import { Alert, BestRoute, Button, styled, VerticalSwapIcon } from '@rango-dev/ui';
-import React, { useEffect, useState } from 'react';
+import {
+  Alert,
+  BestRoute,
+  Button,
+  styled,
+  Typography,
+  VerticalSwapIcon,
+} from '@rango-dev/ui';
+import React, { useState } from 'react';
 import { useInRouterContext, useNavigate } from 'react-router-dom';
 import { Header } from '../components/Header';
 import { TokenInfo } from '../components/TokenInfo';
-import { useBestRouteStore } from '../store/bestRoute';
+import { fetchBestRoute, useBestRouteStore } from '../store/bestRoute';
 import { BottomLogo } from '../components/BottomLogo';
 import { SwithFromAndTo } from '../components/SwitchFromAndTo';
 import { Footer } from '../components/Footer';
 import { navigationRoutes } from '../constants/navigationRoutes';
-import { useBestRoute } from '../hooks/useBestRoute';
 import { useMetaStore } from '../store/meta';
 import { useWalletsStore } from '../store/wallets';
 import { errorMessages } from '../constants/errors';
 import {
-  getSwapButtonTitle,
+  getSwapButtonState,
   getOutputRatio,
   hasLimitError,
   outputRatioHasWarning,
   canComputePriceImpact,
+  LimitErrorMessage,
+  getTotalFeeInUsd,
+  hasHighFee,
 } from '../utils/swap';
+import {
+  numberToString,
+  secondsToString,
+  totalArrivalTime,
+} from '../utils/numbers';
 
 const Container = styled('div', {
   display: 'flex',
@@ -41,6 +55,7 @@ const BestRouteContainer = styled('div', {
 });
 
 const Alerts = styled('div', {
+  width: '100%',
   paddingTop: '$16',
 });
 
@@ -57,13 +72,15 @@ export function Home() {
   const setFromToken = useBestRouteStore.use.setFromToken();
   const setToChain = useBestRouteStore.use.setToChain();
   const setToToken = useBestRouteStore.use.setToToken();
-  const setBestRoute = useBestRouteStore.use.setBestRoute();
   const inputUsdValue = useBestRouteStore.use.inputUsdValue();
   const inputAmount = useBestRouteStore.use.inputAmount();
   const setInputAmount = useBestRouteStore.use.setInputAmount();
   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 accounts = useWalletsStore.use.accounts();
@@ -77,53 +94,48 @@ export function Home() {
     setCount((prev) => prev + 1);
   };
 
-  const { data, loading: fetchingBestRoute, error: bestRouteError, retry } = useBestRoute();
-
-  const noConnectedWallet = accounts.length > 0;
-
-  const noRoutesFound = !bestRoute?.result;
-
   const errorMessage =
-    loadingMetaStatus === 'failed' ? errorMessages.genericServerError : bestRouteError;
+    loadingMetaStatus === 'failed'
+      ? errorMessages.genericServerError
+      : bestRouteError;
 
   const needsToWarnEthOnPath = false;
 
-  const showBestRoute = inputAmount && (!!data || fetchingBestRoute || bestRouteError);
+  const showBestRoute =
+    inputAmount && (!!bestRoute || fetchingBestRoute || bestRouteError);
 
   const outToInRatio = getOutputRatio(inputUsdValue, outputUsdValue);
 
   const highValueLoss = outputRatioHasWarning(inputUsdValue, outToInRatio);
 
+  const { fromAmountRangeError, recommendation, swap } =
+    LimitErrorMessage(bestRoute);
+
   const priceImpactCanNotBeComputed = !canComputePriceImpact(
     bestRoute,
     inputAmount,
     inputUsdValue,
-    outputUsdValue,
+    outputUsdValue
   );
 
-  const buttonTitle = getSwapButtonTitle(
+  const swapButtonState = getSwapButtonState(
+    loadingMetaStatus,
     accounts,
     fetchingBestRoute,
+    bestRoute,
     hasLimitError(bestRoute),
     highValueLoss,
     priceImpactCanNotBeComputed,
-    needsToWarnEthOnPath,
+    needsToWarnEthOnPath
   );
 
-  const buttonDisabled =
-    loadingMetaStatus != 'success' ||
-    fetchingBestRoute ||
-    highValueLoss ||
-    (noConnectedWallet && noRoutesFound) ||
-    hasLimitError(bestRoute);
+  const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
 
-  useEffect(() => {
-    setBestRoute(data);
-  }, [data]);
+  const highFee = hasHighFee(totalFeeInUsd);
 
   return (
     <Container>
-      <Header onClickRefresh={retry} />
+      <Header onClickRefresh={fetchBestRoute} />
       <TokenInfo
         type="From"
         chain={fromChain}
@@ -146,13 +158,42 @@ export function Home() {
       />
       {showBestRoute && (
         <BestRouteContainer>
-          <BestRoute error={bestRouteError} loading={fetchingBestRoute} data={data} />
+          <BestRoute
+            error={bestRouteError}
+            loading={fetchingBestRoute}
+            data={bestRoute}
+            totalFee={numberToString(totalFeeInUsd, 0, 2)}
+            feeWarning={highFee}
+            totalTime={secondsToString(totalArrivalTime(bestRoute))}
+          />
         </BestRouteContainer>
       )}
-      {(errorMessage || waningMessage) && (
+      {(errorMessage || waningMessage || hasLimitError(bestRoute)) && (
         <Alerts>
-          {errorMessage && <Alert description={errorMessage} type="error" />}
-          {waningMessage && <Alert description={waningMessage} type="warning" />}
+          {errorMessage && (
+            <Alert type="error">
+              {<Typography variant="body2">{errorMessage}</Typography>}
+            </Alert>
+          )}
+          {hasLimitError(bestRoute) && (
+            <Alert type="error" title={`${swap?.swapperId} Limit`}>
+              <>
+                <Typography variant="body2">{fromAmountRangeError}</Typography>
+                <br />
+                <Typography variant="body2">
+                  Yours: {numberToString(swap?.fromAmount || null)}
+                  {swap?.from.symbol}
+                </Typography>
+                <br />
+                <Typography variant="body2">{recommendation}</Typography>
+              </>
+            </Alert>
+          )}
+          {waningMessage && (
+            <Alert type="warning">
+              <Typography variant="body2">{waningMessage}</Typography>
+            </Alert>
+          )}
         </Alerts>
       )}
       <Footer>
@@ -160,17 +201,19 @@ export function Home() {
           type="primary"
           align="grow"
           size="large"
-          disabled={buttonDisabled}
+          disabled={swapButtonState.disabled}
           onClick={() => {
-            if (buttonTitle === 'Connect Wallet') navigate(navigationRoutes.wallets);
+            if (swapButtonState.title === 'Connect Wallet')
+              navigate(navigationRoutes.wallets);
             else {
               navigate(navigationRoutes.confirmWallets);
             }
-          }}>
-          {buttonTitle}
+          }}
+        >
+          {swapButtonState.title}
         </Button>
         <BottomLogo />
       </Footer>
     </Container>
   );
-}
+}

package/src/pages/LiquiditySourcesPage.tsx

@@ -1,6 +1,7 @@
 import { LiquiditySourcesSelector } from '@rango-dev/ui';
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
+import { navigationRoutes } from '../constants/navigationRoutes';
+import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useMetaStore } from '../store/meta';
 import { useSettingsStore } from '../store/settings';
 import { removeDuplicateFrom } from '../utils/common';
@@ -8,10 +9,12 @@ import { removeDuplicateFrom } from '../utils/common';
 export function LiquiditySourcePage() {
   const { swappers } = useMetaStore.use.meta();
   const toggleLiquiditySource = useSettingsStore.use.toggleLiquiditySource();
-  const disabledLiquiditySources = useSettingsStore.use.disabledLiquiditySources();
-  const toggleAllLiquiditySources = useSettingsStore.use.toggleAllLiquiditySources();
+  const disabledLiquiditySources =
+    useSettingsStore.use.disabledLiquiditySources();
+  const toggleAllLiquiditySources =
+    useSettingsStore.use.toggleAllLiquiditySources();
 
-  const navigate = useNavigate();
+  const { navigateBackFrom } = useNavigateBack();
 
   const uniqueSwappersGroups: Array<{
     title: string;
@@ -40,10 +43,10 @@ export function LiquiditySourcePage() {
     <LiquiditySourcesSelector
       toggleAll={toggleAllLiquiditySources}
       list={uniqueSwappersGroups}
-      onChange={(liquiditySource) => toggleLiquiditySource(liquiditySource.title)}
-      onBack={() => {
-        navigate(-1);
-      }}
+      onChange={(liquiditySource) =>
+        toggleLiquiditySource(liquiditySource.title)
+      }
+      onBack={navigateBackFrom.bind(null, navigationRoutes.liquiditySources)}
     />
   );
 }

package/src/pages/SelectChainPage.tsx

@@ -1,11 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { BlockchainSelector } from '@rango-dev/ui';
 import { useBestRouteStore } from '../store/bestRoute';
 import { useMetaStore } from '../store/meta';
-import { useNavigate } from 'react-router-dom';
-import { useWalletsStore } from '../store/wallets';
-import { BlockchainMeta } from 'rango-sdk';
-import { removeDuplicateFrom } from '../utils/common';
+import { useNavigateBack } from '../hooks/useNavigateBack';
+import { navigationRoutes } from '../constants/navigationRoutes';
 
 interface PropTypes {
   type: 'from' | 'to';
@@ -13,7 +11,6 @@ interface PropTypes {
 
 export function SelectChainPage(props: PropTypes) {
   const { type } = props;
-  const accounts = useWalletsStore.use.accounts();
 
   const { blockchains } = useMetaStore.use.meta();
   const loadingStatus = useMetaStore.use.loadingStatus();
@@ -24,39 +21,23 @@ export function SelectChainPage(props: PropTypes) {
   const setFromToken = useBestRouteStore.use.setFromToken();
   const setToToken = useBestRouteStore.use.setToToken();
 
-  const navigate = useNavigate();
-
-  const [list, setList] = useState(blockchains);
-
-  useEffect(() => {
-    let chainSortedByConnectedWallets: BlockchainMeta[] = [];
-    if (accounts.length !== 0) {
-      const connectedChains = removeDuplicateFrom(accounts.map((account) => account.chain));
-      chainSortedByConnectedWallets = blockchains.sort(
-        (blockchainA, blockchainB) =>
-          connectedChains.lastIndexOf(blockchainA.name) -
-          connectedChains.lastIndexOf(blockchainB.name),
-      );
-    } else {
-      chainSortedByConnectedWallets = blockchains;
-    }
-    setList(chainSortedByConnectedWallets);
-  }, [blockchains.length, accounts.length]);
+  const { navigateBackFrom } = useNavigateBack();
 
   return (
     <BlockchainSelector
       type={type === 'from' ? 'Source' : 'Destination'}
-      list={list}
+      list={blockchains}
       selected={type === 'from' ? fromChain : toChain}
       loadingStatus={loadingStatus}
       onChange={(chain) => {
         if (type === 'from') setFromChain(chain);
         else setToChain(chain);
-        if (type === 'from' && fromChain?.name != chain.name) setFromToken(null);
+        if (type === 'from' && fromChain?.name != chain.name)
+          setFromToken(null);
         if (type === 'to' && toChain?.name != chain.name) setToToken(null);
-        navigate(-1);
+        navigateBackFrom(navigationRoutes.fromChain);
       }}
-      onBack={navigate.bind(null, -1)}
+      onBack={navigateBackFrom.bind(null, navigationRoutes.fromChain)}
     />
   );
 }

package/src/pages/SelectTokenPage.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { TokenSelector } from '@rango-dev/ui';
 import { useBestRouteStore } from '../store/bestRoute';
 import { useMetaStore } from '../store/meta';
-import { useNavigate } from 'react-router-dom';
 import { Token } from 'rango-sdk';
 import { numberToString } from '../utils/numbers';
 import BigNumber from 'bignumber.js';
@@ -10,6 +9,8 @@ import { getBalanceFromWallet } from '../utils/wallets';
 import { useWalletsStore } from '../store/wallets';
 import { sortedTokens } from '../utils/wallets';
 import { ZERO } from '../constants/numbers';
+import { useNavigateBack } from '../hooks/useNavigateBack';
+import { navigationRoutes } from '../constants/navigationRoutes';
 
 interface PropTypes {
   type: 'from' | 'to';
@@ -24,7 +25,7 @@ export interface TokenWithBalance extends Token {
 
 export function SelectTokenPage(props: PropTypes) {
   const { type } = props;
-  const navigate = useNavigate();
+  const { navigateBackFrom } = useNavigateBack();
 
   const { tokens } = useMetaStore.use.meta();
   const fromChain = useBestRouteStore.use.fromChain();
@@ -41,30 +42,40 @@ export function SelectTokenPage(props: PropTypes) {
     return token.blockchain === toChain?.name;
   });
 
-  const TokensWithBalance: TokenWithBalance[] = tokenWithSelectedChain.map((token) => {
-    const tokenAmount = numberToString(
-      new BigNumber(
-        getBalanceFromWallet(balance, token.blockchain, token.symbol, token.address)?.amount ||
-          ZERO,
-      ),
-    );
-
-    let tokenUsdValue = '';
-    if (token.usdPrice)
-      tokenUsdValue = numberToString(
+  const TokensWithBalance: TokenWithBalance[] = tokenWithSelectedChain.map(
+    (token) => {
+      const tokenAmount = numberToString(
         new BigNumber(
-          getBalanceFromWallet(balance, token.blockchain, token.symbol, token.address)?.amount ||
-            ZERO,
-        ).multipliedBy(token.usdPrice),
+          getBalanceFromWallet(
+            balance,
+            token.blockchain,
+            token.symbol,
+            token.address
+          )?.amount || ZERO
+        )
       );
-    return {
-      ...token,
-      balance: {
-        amount: tokenAmount !== '0' ? tokenAmount : '',
-        usdValue: tokenUsdValue !== '0' ? tokenUsdValue : '',
-      },
-    };
-  });
+
+      let tokenUsdValue = '';
+      if (token.usdPrice)
+        tokenUsdValue = numberToString(
+          new BigNumber(
+            getBalanceFromWallet(
+              balance,
+              token.blockchain,
+              token.symbol,
+              token.address
+            )?.amount || ZERO
+          ).multipliedBy(token.usdPrice)
+        );
+      return {
+        ...token,
+        balance: {
+          amount: tokenAmount !== '0' ? tokenAmount : '',
+          usdValue: tokenUsdValue !== '0' ? tokenUsdValue : '',
+        },
+      };
+    }
+  );
 
   const sortedTokenList = sortedTokens(TokensWithBalance, type, balance);
 
@@ -76,9 +87,9 @@ export function SelectTokenPage(props: PropTypes) {
       onChange={(token) => {
         if (type === 'from') setFromToken(token);
         else setToToken(token);
-        navigate(-1);
+        navigateBackFrom(navigationRoutes.fromToken);
       }}
-      onBack={navigate.bind(null, -1)}
+      onBack={navigateBackFrom.bind(null, navigationRoutes.fromToken)}
     />
   );
-}
+}

package/src/pages/SettingsPage.tsx

@@ -5,29 +5,39 @@ import { useMetaStore } from '../store/meta';
 import { useNavigate } from 'react-router-dom';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { removeDuplicateFrom } from '../utils/common';
+import {
+  MAX_SLIPPAGE,
+  MIN_SLIPPGAE,
+  SLIPPAGES,
+} from '../constants/swapSettings';
+import { useNavigateBack } from '../hooks/useNavigateBack';
 
 export function SettingsPage() {
   const slippage = useSettingsStore.use.slippage();
   const setSlippage = useSettingsStore.use.setSlippage();
-  const disabledLiquiditySources = useSettingsStore.use.disabledLiquiditySources();
+  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();
   const navigate = useNavigate();
+  const { navigateBackFrom } = useNavigateBack();
 
+  const infiniteApprove = useSettingsStore.use.infiniteApprove();
+  const toggleInfiniteApprove = useSettingsStore.use.toggleInfiniteApprove();
   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);
+  removeDuplicateFrom(swappers.map(s => s.swapperGroup))
+    .map(swapperGroup => {
+      return swappers.find(s => s.swapperGroup === swapperGroup);
     })
-    .find((s) => {
+    .find(s => {
       if (s) {
         for (const type of s.types) {
           uniqueSwappersGroups.push({
@@ -42,19 +52,24 @@ export function SettingsPage() {
 
   return (
     <Settings
-      slippages={[1, 2, 3, 4]}
+      slippages={SLIPPAGES}
       selectedSlippage={slippage}
-      onSlippageChange={(slippage) => setSlippage(slippage)}
+      onSlippageChange={slippage => setSlippage(slippage)}
       liquiditySources={uniqueSwappersGroups}
       selectedLiquiditySources={uniqueSwappersGroups.filter((s) => s.selected)}
-      onLiquiditySourcesClick={() => navigate(navigationRoutes.liquiditySources)}
-      onBack={navigate.bind(null, -1)}
+      onLiquiditySourcesClick={navigate.bind(
+        null,
+        navigationRoutes.liquiditySources
+      )}
+      onBack={navigateBackFrom.bind(null, navigationRoutes.settings)}
       customSlippage={customSlippage || NaN}
       onCustomSlippageChange={setCustomSlippage}
-      minSlippage={1}
-      maxSlippage={10}
+      minSlippage={MIN_SLIPPGAE}
+      maxSlippage={MAX_SLIPPAGE}
       selectedTheme={theme}
       onThemeChange={setTheme}
+      infiniteApprove={infiniteApprove}
+      toggleInfiniteApprove={toggleInfiniteApprove}
     />
   );
 }

package/src/pages/SwapDetailsPage.tsx

@@ -1,9 +1,15 @@
 import { SwapHistory } from '@rango-dev/ui';
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
+import { navigationRoutes } from '../constants/navigationRoutes';
+import { useNavigateBack } from '../hooks/useNavigateBack';
 import { pendingSwap } from '../mockData/pendingSwap';
 
 export function SwapDetailsPage() {
-  const navigate = useNavigate();
-  return <SwapHistory onBack={navigate.bind(null, -1)} pendingSwap={pendingSwap} />;
+  const { navigateBackFrom } = useNavigateBack();
+  return (
+    <SwapHistory
+      onBack={navigateBackFrom.bind(null, navigationRoutes.swapDetails)}
+      pendingSwap={pendingSwap}
+    />
+  );
 }

package/src/pages/WalletsPage.tsx

@@ -1,9 +1,17 @@
-import { useNavigate } from 'react-router-dom';
-import { Alert, SecondaryPage, styled, Wallet } from '@rango-dev/ui';
-import React, { useState } from 'react';
+import {
+  Alert,
+  SecondaryPage,
+  styled,
+  Wallet,
+  Typography,
+} from '@rango-dev/ui';
+import React, { useEffect, useState } from 'react';
 import { getlistWallet } from '../utils/wallets';
 import { WalletType } from '@rango-dev/wallets-shared';
 import { useWallets } from '@rango-dev/wallets-core';
+import { useUiStore } from '../store/ui';
+import { useNavigateBack } from '../hooks/useNavigateBack';
+import { navigationRoutes } from '../constants/navigationRoutes';
 
 const ListContainer = styled('div', {
   display: 'grid',
@@ -18,7 +26,7 @@ const AlertContainer = styled('div', {
   paddingBottom: '$16',
 });
 export function WalletsPage() {
-  const navigate = useNavigate();
+  const { navigateBackFrom } = useNavigateBack();
   const { state, disconnect, getWalletInfo, connect } = useWallets();
   const wallets = getlistWallet(
     state,
@@ -26,6 +34,8 @@ export function WalletsPage() {
     Object.values(WalletType)
   );
   const [walletErrorMessage, setWalletErrorMessage] = useState('');
+  const toggleConnectWalletsButton =
+    useUiStore.use.toggleConnectWalletsButton();
 
   const onSelectWallet = async (type: WalletType) => {
     const wallet = state(type);
@@ -40,27 +50,32 @@ export function WalletsPage() {
       setWalletErrorMessage('Error: ' + e.message);
     }
   };
+
+  useEffect(() => {
+    toggleConnectWalletsButton();
+    return () => toggleConnectWalletsButton();
+  }, []);
+
   return (
     <SecondaryPage
       title="Select Wallet"
       textField={false}
-      onBack={() => {
-        navigate(-1);
-      }}
-      Content={
-        <>
-          {walletErrorMessage && (
-            <AlertContainer>
-              <Alert type="error" description={walletErrorMessage} />
-            </AlertContainer>
-          )}
-          <ListContainer>
-            {wallets.map((info, index) => (
-              <Wallet {...info} key={index} onClick={onSelectWallet} />
-            ))}
-          </ListContainer>
-        </>
-      }
-    />
+      onBack={navigateBackFrom.bind(null, navigationRoutes.wallets)}
+    >
+      <>
+        {walletErrorMessage && (
+          <AlertContainer>
+            <Alert type="error">
+              <Typography variant="body2">{walletErrorMessage}</Typography>
+            </Alert>
+          </AlertContainer>
+        )}
+        <ListContainer>
+          {wallets.map((info, index) => (
+            <Wallet {...info} key={index} onClick={onSelectWallet} />
+          ))}
+        </ListContainer>
+      </>
+    </SecondaryPage>
   );
 }