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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.1.10-next.80",
+  "version": "0.1.10-next.82",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/AppRouter.tsx

@@ -1,10 +1,45 @@
-import React, { Fragment, PropsWithChildren } from 'react';
-import { MemoryRouter, useInRouterContext } from 'react-router';
+import React, { PropsWithChildren, useEffect, useRef } from 'react';
+import {
+  MemoryRouter,
+  useInRouterContext,
+  useLocation,
+  useNavigate,
+} from 'react-router';
+import { navigationRoutes } from '../constants/navigationRoutes';
 import { UpdateUrl } from './UpdateUrl';
+import { Home } from '../pages/Home';
+
+const Route: React.FC = (props: PropsWithChildren) => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const ref = useRef(true);
+
+  useEffect(() => {
+    if (
+      [navigationRoutes.confirmWallets, navigationRoutes.confirmSwap].includes(
+        location.pathname
+      ) &&
+      ref.current
+    )
+      navigate(navigationRoutes.home + location.search, { state: 'redirect' });
+
+    ref.current = false;
+  }, []);
+
+  if (
+    [navigationRoutes.confirmWallets, navigationRoutes.confirmSwap].includes(
+      location.pathname
+    ) &&
+    ref.current
+  )
+    return <Home />;
+
+  return <> {props.children}</>;
+};
 
 export function AppRouter({ children }: PropsWithChildren) {
   const isRouterInContext = useInRouterContext();
-  const Router = isRouterInContext ? Fragment : MemoryRouter;
+  const Router = isRouterInContext ? Route : MemoryRouter;
 
   return (
     <>

package/src/components/AppRoutes.tsx

@@ -15,9 +15,15 @@ import { SwapDetailsPage } from '../pages/SwapDetailsPage';
 export const AppRoutes = () =>
   useRoutes([
     { path: navigationRoutes.home, element: <Home /> },
-    { path: navigationRoutes.fromChain, element: <SelectChainPage type="from" /> },
+    {
+      path: navigationRoutes.fromChain,
+      element: <SelectChainPage type="from" />,
+    },
     { path: navigationRoutes.toChain, element: <SelectChainPage type="to" /> },
-    { path: navigationRoutes.fromToken + '/*', element: <SelectTokenPage type="from" /> },
+    {
+      path: navigationRoutes.fromToken + '/*',
+      element: <SelectTokenPage type="from" />,
+    },
     { path: navigationRoutes.toToken, element: <SelectTokenPage type="to" /> },
     { path: navigationRoutes.settings, element: <SettingsPage /> },
     {

package/src/components/ChangeSlippageButton.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Button, styled } from '@rango-dev/ui';
+import { useNavigate } from 'react-router-dom';
+import { navigationRoutes } from '../constants/navigationRoutes';
+
+const StyledButton = styled(Button, {
+  marginTop: '$8',
+});
+
+export function ChangeSlippageButton() {
+  const navigate = useNavigate();
+
+  return (
+    <StyledButton
+      type="primary"
+      variant="contained"
+      size="small"
+      onClick={navigate.bind(null, navigationRoutes.settings)}
+    >
+      Change Slippage
+    </StyledButton>
+  );
+}

package/src/components/ConfirmSwapErrors.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Typography } from '@rango-dev/ui';
+import { ConfirmSwapError, ConfirmSwapErrorTypes } from '../store/confirmSwap';
+import { MinRequiredSlippage } from './warnings/MinRequiredSlippage';
+
+export function ConfirmSwapErrors(errors: ConfirmSwapError[]) {
+  return errors.flatMap((error) => {
+    switch (error.type) {
+      case ConfirmSwapErrorTypes.NO_ROUTE:
+        return (
+          <Typography variant="body2">
+            No routes found. Please try again later.
+          </Typography>
+        );
+      case ConfirmSwapErrorTypes.REQUEST_FAILED:
+        return (
+          <Typography variant="body2">{`Failed to confirm swap ${
+            error.status ? `'status': ${error.status})` : ''
+          }, please try again.`}</Typography>
+        );
+
+      case ConfirmSwapErrorTypes.ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS:
+        return (
+          <Typography variant="body2">
+            Route updated and price impact is too high, try again later!
+          </Typography>
+        );
+      case ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE:
+        return (
+          <MinRequiredSlippage
+            minRequiredSlippage={error.minRequiredSlippage}
+          />
+        );
+      default:
+        return [];
+    }
+  });
+}

package/src/components/ConfirmSwapWarnings.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Typography } from '@rango-dev/ui';
+import {
+  ConfirmSwapWarnings,
+  ConfirmSwapWarningTypes,
+} from '../store/confirmSwap';
+import { BalanceWarnings } from './warnings/BalanceWarnings';
+
+export function ConfirmSwapWarnings(warnings: ConfirmSwapWarnings[]) {
+  return warnings.flatMap((warning) => {
+    switch (warning.type) {
+      case ConfirmSwapWarningTypes.ROUTE_UPDATED:
+        return <Typography variant="body2">Route has been updated.</Typography>;
+      case ConfirmSwapWarningTypes.ROUTE_AND_OUTPUT_AMOUNT_UPDATED:
+        return (
+          <Typography variant="body2">{`Output amount changed to ${warning.newOutputAmount} 
+      (${warning.percentageChange}% change).`}</Typography>
+        );
+
+      case ConfirmSwapWarningTypes.ROUTE_SWAPPERS_UPDATED:
+        return (
+          <Typography variant="body2">
+            Route swappers has been updated.
+          </Typography>
+        );
+      case ConfirmSwapWarningTypes.ROUTE_COINS_UPDATED:
+        return (
+          <Typography variant="body2">
+            Route internal coins has been updated.
+          </Typography>
+        );
+      case ConfirmSwapWarningTypes.INSUFFICIENT_BALANCE:
+        return <BalanceWarnings messages={warning.messages} />;
+      default:
+        return [];
+    }
+  });
+}

package/src/components/Layout.tsx

@@ -3,9 +3,14 @@ import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useWallets } from '@rango-dev/wallets-core';
 import { navigationRoutes } from '../constants/navigationRoutes';
+import { useUiStore } from '../store/ui';
 import { AppRoutes } from './AppRoutes';
 import { useWalletsStore } from '../store/wallets';
-import { calculateWalletUsdValue, getSelectableWallets } from '../utils/wallets';
+import {
+  calculateWalletUsdValue,
+  getSelectableWallets,
+} from '../utils/wallets';
+import { removeDuplicateFrom } from '../utils/common';
 
 const Header = styled('div', {
   display: 'flex',
@@ -25,8 +30,15 @@ export function Layout() {
   const navigate = useNavigate();
   const { balances, accounts, selectedWallets } = useWalletsStore();
   const { getWalletInfo } = useWallets();
-  const filterSelelectedWallets = getSelectableWallets(accounts, selectedWallets, getWalletInfo);
+  const connectedWalletsImages = removeDuplicateFrom(
+    getSelectableWallets(accounts, selectedWallets, getWalletInfo).map(
+      (w) => w.image
+    )
+  );
+
   const totalBalance = calculateWalletUsdValue(balances);
+  const connectWalletsButtonDisabled =
+    useUiStore.use.connectWalletsButtonDisabled();
 
   return (
     <>
@@ -36,10 +48,14 @@ export function Layout() {
           suffix={<AddWalletIcon size={20} />}
           variant="ghost"
           flexContent
-          onClick={() => navigate(navigationRoutes.wallets)}>
-          {accounts?.length ? (
-            filterSelelectedWallets.map((selectedWallet, index) => (
-              <WalletImage key={index} src={selectedWallet.image} />
+          onClick={() => {
+            if (!connectWalletsButtonDisabled)
+              navigate(navigationRoutes.wallets);
+          }}
+        >
+          {connectedWalletsImages?.length ? (
+            connectedWalletsImages.map((walletImage, index) => (
+              <WalletImage key={index} src={walletImage} />
             ))
           ) : (
             <></>

package/src/components/UpdateUrl.tsx

@@ -1,17 +1,28 @@
 import { Token } from 'rango-sdk';
 import { useEffect, useRef } from 'react';
-import { useLocation, useSearchParams } from 'react-router-dom';
+import {
+  createSearchParams,
+  useLocation,
+  useSearchParams,
+} from 'react-router-dom';
 import { useBestRouteStore } from '../store/bestRoute';
 import { useMetaStore } from '../store/meta';
 import { SearchParams } from '../constants/searchParams';
+import { navigationRoutes } from '../constants/navigationRoutes';
 
-function searchParamsToToken(tokens: Token[], searchParams: string | null): Token | null {
+function searchParamsToToken(
+  tokens: Token[],
+  searchParams: string | null
+): Token | null {
   return (
     tokens.find((token) => {
       const symbolAndAddress = searchParams?.split('--');
       if (symbolAndAddress?.length === 1)
         return token.symbol === symbolAndAddress[0] && token.address === null;
-      return token.symbol === symbolAndAddress?.[0] && token.address === symbolAndAddress?.[1];
+      return (
+        token.symbol === symbolAndAddress?.[0] &&
+        token.address === symbolAndAddress?.[1]
+      );
     }) || null
   );
 }
@@ -20,6 +31,18 @@ export function UpdateUrl() {
   const firstRender = useRef(true);
   const [searchParams, setSearchParams] = useSearchParams();
   const location = useLocation();
+  const firstRenderSearchParams = useRef(location.search);
+  const searchParamsRef = useRef<Record<string, string>>({});
+
+  useEffect(() => {
+    const params: Record<string, string> = {};
+    createSearchParams(firstRenderSearchParams.current).forEach(
+      (value, key) => {
+        params[key] = value;
+      }
+    );
+    searchParamsRef.current = params;
+  }, []);
 
   const fromChain = useBestRouteStore.use.fromChain();
   const toChain = useBestRouteStore.use.toChain();
@@ -35,26 +58,81 @@ export function UpdateUrl() {
   const { blockchains, tokens } = useMetaStore.use.meta();
 
   useEffect(() => {
-    if (!firstRender.current) {
-      const fromChainString = fromChain?.name || '';
-      const fromTokenString =
-        (fromToken?.symbol || '') + (fromToken?.address ? `--${fromToken?.address}` : '');
-      const toChainString = toChain?.name || '';
-      const toTokenString =
-        (toToken?.symbol || '') + (toToken?.address ? `--${toToken?.address}` : '');
-      const fromAmount = inputAmount;
-
+    let fromChainString = '',
+      fromTokenString = '',
+      toChainString = '',
+      toTokenString = '',
+      fromAmount = '';
+    if (
+      loadingStatus !== 'success' &&
+      ![navigationRoutes.confirmWallets, navigationRoutes.confirmSwap].includes(
+        location.pathname
+      )
+    ) {
+      fromChainString = searchParamsRef.current[SearchParams.FROM_CHAIN];
+      fromTokenString = searchParamsRef.current[SearchParams.FROM_TOKEN];
+      toChainString = searchParamsRef.current[SearchParams.TO_CHAIN];
+      toTokenString = searchParamsRef.current[SearchParams.TO_TOKEN];
+      fromAmount = searchParamsRef.current[SearchParams.FROM_AMOUNT];
       setSearchParams(
         {
-          ...(fromChainString && { [SearchParams.FROM_CHAIN]: fromChainString }),
-          ...(fromTokenString && { [SearchParams.FROM_TOKEN]: fromTokenString }),
+          ...(fromChainString && {
+            [SearchParams.FROM_CHAIN]: fromChainString,
+          }),
+          ...(fromTokenString && {
+            [SearchParams.FROM_TOKEN]: fromTokenString,
+          }),
           ...(toChainString && { [SearchParams.TO_CHAIN]: toChainString }),
           ...(toTokenString && { [SearchParams.TO_TOKEN]: toTokenString }),
-          ...(fromAmount && { [SearchParams.FROM_AMOUNT]: fromAmount.toString() }),
+          ...(fromAmount && {
+            [SearchParams.FROM_AMOUNT]: fromAmount.toString(),
+          }),
         },
-        { replace: true },
+        { replace: true }
       );
     }
+    if (!firstRender.current) {
+      let fromChainString = '',
+        fromTokenString = '',
+        toChainString = '',
+        toTokenString = '',
+        fromAmount = '';
+      if (loadingStatus !== 'success') {
+        fromChainString = searchParamsRef.current[SearchParams.FROM_CHAIN];
+        fromTokenString = searchParamsRef.current[SearchParams.FROM_TOKEN];
+        toChainString = searchParamsRef.current[SearchParams.TO_CHAIN];
+        toTokenString = searchParamsRef.current[SearchParams.TO_TOKEN];
+        fromAmount = searchParamsRef.current[SearchParams.FROM_AMOUNT];
+      } else {
+        if (location.state === 'redirect') return;
+        fromChainString = fromChain?.name || '';
+        fromTokenString =
+          (fromToken?.symbol || '') +
+          (fromToken?.address ? `--${fromToken?.address}` : '');
+        toChainString = toChain?.name || '';
+        toTokenString =
+          (toToken?.symbol || '') +
+          (toToken?.address ? `--${toToken?.address}` : '');
+        fromAmount = inputAmount;
+
+        setSearchParams(
+          {
+            ...(fromChainString && {
+              [SearchParams.FROM_CHAIN]: fromChainString,
+            }),
+            ...(fromTokenString && {
+              [SearchParams.FROM_TOKEN]: fromTokenString,
+            }),
+            ...(toChainString && { [SearchParams.TO_CHAIN]: toChainString }),
+            ...(toTokenString && { [SearchParams.TO_TOKEN]: toTokenString }),
+            ...(fromAmount && {
+              [SearchParams.FROM_AMOUNT]: fromAmount.toString(),
+            }),
+          },
+          { replace: true }
+        );
+      }
+    }
     firstRender.current = false;
   }, [location.pathname, inputAmount]);
 
@@ -65,9 +143,13 @@ export function UpdateUrl() {
       const toChainString = searchParams.get(SearchParams.TO_CHAIN);
       const toTokenString = searchParams.get(SearchParams.TO_TOKEN);
       const fromAmount = searchParams.get(SearchParams.FROM_AMOUNT);
-      const fromChain = blockchains.find((blockchain) => blockchain.name === fronChainString);
+      const fromChain = blockchains.find(
+        (blockchain) => blockchain.name === fronChainString
+      );
       const fromToken = searchParamsToToken(tokens, fromTokenString);
-      const toChain = blockchains.find((blockchain) => blockchain.name === toChainString);
+      const toChain = blockchains.find(
+        (blockchain) => blockchain.name === toChainString
+      );
       const toToken = searchParamsToToken(tokens, toTokenString);
       if (!!fromChain) {
         setFromChain(fromChain);

package/src/components/warnings/BalanceWarnings.tsx

@@ -0,0 +1,16 @@
+import { Typography } from '@rango-dev/ui';
+import React from 'react';
+
+interface PropTypes {
+  messages: string[];
+}
+
+export function BalanceWarnings({ messages }: PropTypes) {
+  return (
+    <div>
+      {messages.map((warning) => (
+        <Typography variant="body2">{warning}</Typography>
+      ))}
+    </div>
+  );
+}

package/src/components/warnings/ConfirmSwapExtraMessages.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { HIGH_SLIPPAGE } from '../../constants/swapSettings';
+import { HighSlippageWarning } from './HighSlippageWarning';
+
+interface PropTypes {
+  selectedSlippage: number;
+}
+
+export function ConfirmSwapExtraMessages(props: PropTypes) {
+  const { selectedSlippage } = props;
+  const highSlippage = selectedSlippage >= HIGH_SLIPPAGE;
+
+  return <>{highSlippage && <HighSlippageWarning selectedSlippage={selectedSlippage} />}</>;
+}

package/src/components/warnings/HighSlippageWarning.tsx

@@ -0,0 +1,21 @@
+import { Alert, Typography } from '@rango-dev/ui';
+import React from 'react';
+import { ChangeSlippageButton } from '../ChangeSlippageButton';
+
+interface PropTypes {
+  selectedSlippage: number;
+}
+
+export function HighSlippageWarning(props: PropTypes) {
+  const { selectedSlippage } = props;
+
+  return (
+    <Alert type="warning">
+      <Typography variant="body2">
+        slippage is high=&gt; Caution, your slippage is high (=
+        {selectedSlippage}). Your trade may be front run.
+        <ChangeSlippageButton />
+      </Typography>
+    </Alert>
+  );
+}

package/src/components/warnings/MinRequiredSlippage.tsx

@@ -0,0 +1,18 @@
+import { Typography } from '@rango-dev/ui';
+import React from 'react';
+import { ChangeSlippageButton } from '../ChangeSlippageButton';
+
+interface PropTypes {
+  minRequiredSlippage: number | null;
+}
+
+export function MinRequiredSlippage({ minRequiredSlippage }: PropTypes) {
+  return (
+    <Typography variant="body2">
+      slippage is low =&gt; We recommend you to increase slippage to at least
+      {minRequiredSlippage}
+      for this route.
+      <ChangeSlippageButton />
+    </Typography>
+  );
+}

package/src/constants/navigationRoutes.ts

@@ -5,10 +5,10 @@ export const navigationRoutes = {
   toChain: '/to-chain',
   toToken: '/to-token',
   settings: '/settings',
-  liquiditySources: '/liquidity-sources',
+  liquiditySources: '/settings/liquidity-sources',
   history: '/history',
   wallets: '/wallets',
   confirmSwap: '/confirm-swap',
   confirmWallets: '/confirm-wallets',
-  swapDetails: '/swap-details',
+  swapDetails: '/history/swap-details',
 };

package/src/constants/swapSettings.ts

@@ -0,0 +1,9 @@
+export const SLIPPAGES = [0.5, 1, 3, 5, 8, 13, 20];
+
+export const DEFAULT_SLIPPAGE = 1;
+
+export const HIGH_SLIPPAGE = 5;
+
+export const MAX_SLIPPAGE = 100;
+
+export const MIN_SLIPPGAE = 0;

package/src/hooks/useNavigateBack.ts

@@ -0,0 +1,37 @@
+import { useInRouterContext, useNavigate } from 'react-router-dom';
+import { navigationRoutes } from '../constants/navigationRoutes';
+
+export function useNavigateBack() {
+  const isRouterInContext = useInRouterContext();
+  const navigate = useNavigate();
+
+  navigationRoutes;
+
+  const navigateBackFrom = (currentRoute: string) => {
+    if (
+      !isRouterInContext ||
+      (window.history.state && window.history.state.idx > 0)
+    )
+      navigate(-1);
+    else {
+      if (
+        [
+          navigationRoutes.fromChain,
+          navigationRoutes.fromToken,
+          navigationRoutes.toChain,
+          navigationRoutes.toToken,
+          navigationRoutes.settings,
+          navigationRoutes.wallets,
+          navigationRoutes.history,
+        ].includes(currentRoute)
+      )
+        navigate(navigationRoutes.home, { replace: true });
+      else if (currentRoute === navigationRoutes.liquiditySources) {
+        navigate(navigationRoutes.settings, { replace: true });
+      } else if (currentRoute === navigationRoutes.swapDetails)
+        navigate(navigationRoutes.history, { replace: true });
+    }
+  };
+
+  return { navigateBackFrom };
+}

package/src/pages/ConfirmSwapPage.tsx

@@ -1,24 +1,46 @@
 import React from 'react';
 import { ConfirmSwap } from '@rango-dev/ui';
-import { useNavigate } from 'react-router-dom';
 import { useBestRouteStore } from '../store/bestRoute';
-import { useConfirmSwap } from '../hooks/useConfirmSwap';
+import { useSettingsStore } from '../store/settings';
+import { ConfirmSwapExtraMessages } from '../components/warnings/ConfirmSwapExtraMessages';
+import { useNavigateBack } from '../hooks/useNavigateBack';
+import { navigationRoutes } from '../constants/navigationRoutes';
+import { confirmSwap, useConfirmSwapStore } from '../store/confirmSwap';
+import { ConfirmSwapErrors } from '../components/ConfirmSwapErrors';
+import { ConfirmSwapWarnings } from '../components/ConfirmSwapWarnings';
 
 export function ConfirmSwapPage() {
-  const navigate = useNavigate();
+  const { navigateBackFrom } = useNavigateBack();
 
   const bestRoute = useBestRouteStore.use.bestRoute();
 
-  const { error, loading, warning, swap } = useConfirmSwap();
+  const loading = useConfirmSwapStore.use.loading();
+  const warnings = useConfirmSwapStore.use.warnings();
+  const errors = useConfirmSwapStore.use.errors();
+
+  console.log('loading:', loading, 'warnings:', warnings, 'errors:', errors);
+
+  const slippage = useSettingsStore.use.slippage();
+  const customSlippage = useSettingsStore.use.customSlippage();
+  const selectedSlippage = customSlippage || slippage;
 
   return (
     <ConfirmSwap
-      onConfirm={swap.bind(null)}
-      onBack={navigate.bind(null, -1)}
+      onConfirm={confirmSwap.bind(null)}
+      onBack={navigateBackFrom.bind(null, navigationRoutes.confirmSwap)}
       bestRoute={bestRoute}
       loading={loading}
-      error={error}
-      warning={warning}
+      errors={ConfirmSwapErrors(errors)}
+      warnings={ConfirmSwapWarnings(warnings)}
+      extraMessages={
+        <ConfirmSwapExtraMessages selectedSlippage={selectedSlippage} />
+      }
+      confirmButtonTitle={
+        warnings.length > 0 || errors.length > 0
+          ? 'Proceed anyway!'
+          : 'Confirm swap!'
+      }
+      confirmButtonDisabled={errors.length > 0}
     />
   );
 }

package/src/pages/ConfirmWalletsPage.tsx

@@ -5,18 +5,21 @@ import { useBestRouteStore } from '../store/bestRoute';
 import { useWalletsStore } from '../store/wallets';
 import { useWallets } from '@rango-dev/wallets-core';
 import { navigationRoutes } from '../constants/navigationRoutes';
-import { getKeplrCompatibleConnectedWallets, getRequiredChains, getSelectableWallets, isExperimentalChain, SelectedWallet } from '../utils/wallets';
+import {
+  getKeplrCompatibleConnectedWallets,
+  getRequiredChains,
+  getSelectableWallets,
+  isExperimentalChain,
+} from '../utils/wallets';
 import { requiredWallets } from '../utils/swap';
+import { decimalNumber } from '../utils/numbers';
 import { useMetaStore } from '../store/meta';
 import { Network, WalletType } from '@rango-dev/wallets-shared';
-
-export interface SelectableWallet extends SelectedWallet {
-  image: string;
-  selected: boolean;
-}
+import { useNavigateBack } from '../hooks/useNavigateBack';
 
 export function ConfirmWalletsPage() {
   const navigate = useNavigate();
+  const { navigateBackFrom } = useNavigateBack();
   const bestRoute = useBestRouteStore.use.bestRoute();
 
   const { blockchains } = useMetaStore.use.meta();
@@ -27,9 +30,15 @@ export function ConfirmWalletsPage() {
 
   const { getWalletInfo, connect } = useWallets();
   const confirmDisabled = !requiredWallets(bestRoute).every((chain) =>
-    selectedWallets.map((wallet) => wallet.chain).includes(chain),
+    selectedWallets.map((wallet) => wallet.chain).includes(chain)
   );
 
+  const firstStep = bestRoute?.result?.swaps[0];
+  const lastStep =
+    bestRoute?.result?.swaps[bestRoute?.result?.swaps.length - 1];
+
+  const fromAmount = decimalNumber(firstStep?.fromAmount, 3);
+  const toAmount = decimalNumber(lastStep?.toAmount, 3);
   useEffect(() => {
     initSelectedWallets();
   }, []);
@@ -37,29 +46,33 @@ export function ConfirmWalletsPage() {
   const selectableWallets = getSelectableWallets(
     accounts,
     selectedWallets,
-    getWalletInfo,
-    getRequiredChains(bestRoute),
+    getWalletInfo
   );
 
   const handleConnectChain = (wallet: string) => {
     const network = wallet as Network;
     getKeplrCompatibleConnectedWallets(selectableWallets).forEach(
-      (compatibleWallet: WalletType) =>
-        connect?.(compatibleWallet, network)
+      (compatibleWallet: WalletType) => connect?.(compatibleWallet, network)
     );
-  }
-    
+  };
+
   return (
     <ConfirmWallets
       requiredWallets={getRequiredChains(bestRoute)}
       selectableWallets={selectableWallets}
-      onBack={() => navigate(-1)}
+      onBack={navigateBackFrom.bind(null, navigationRoutes.confirmWallets)}
       swap={bestRoute!}
-      onConfirm={() => navigate(navigationRoutes.confirmSwap)}
+      fromAmount={fromAmount}
+      toAmount={toAmount}
+      onConfirm={navigate.bind(null, navigationRoutes.confirmSwap)}
       onChange={(wallet) => setSelectedWallet(wallet)}
       confirmDisabled={confirmDisabled}
       handleConnectChain={(wallet) => handleConnectChain(wallet)}
-      isExperimentalChain={(wallet) => getKeplrCompatibleConnectedWallets(selectableWallets).length > 0 ? isExperimentalChain(blockchains , wallet) : false}
+      isExperimentalChain={(wallet) =>
+        getKeplrCompatibleConnectedWallets(selectableWallets).length > 0
+          ? isExperimentalChain(blockchains, wallet)
+          : false
+      }
     />
   );
-}
+}