@rango-dev/widget-embedded 0.1.10-next.96 → 0.1.10-next.99

package/dist/widget-embedded.esm.js

@@ -1,4 +1,4 @@
-import { WalletState, Tooltip, Button, RetryIcon, HistoryIcon, SettingsIcon, styled, css, Typography, InfoCircleIcon, AngleDownIcon, TextField, VerticalSwapIcon, BestRoute, Alert, ConfirmSwap, History, LiquiditySourcesSelector, BlockchainSelector, TokenSelector, Settings, SecondaryPage, Wallet, ConfirmWallets, SwapHistory, AddWalletIcon, globalCss, createTheme, SwapContainer } from '@rango-dev/ui';
+import { WalletState, Tooltip, Button, RetryIcon, HistoryIcon, SettingsIcon, styled, css, Typography, InfoCircleIcon, AngleDownIcon, Spacer, TextField, VerticalSwapIcon, BestRoute, Alert, ConfirmSwap, History, LiquiditySourcesSelector, BlockchainSelector, TokenSelector, Settings, SecondaryPage, Wallet, ChevronRightIcon, GasIcon, ConfirmWallets, SwapHistory, AddWalletIcon, globalCss, createTheme, SwapContainer } from '@rango-dev/ui';
 import React, { useRef, useEffect, useState, useLayoutEffect } from 'react';
 import { useInRouterContext as useInRouterContext$1, MemoryRouter, useLocation as useLocation$1, useNavigate as useNavigate$1 } from 'react-router';
 import { useSearchParams, useLocation, createSearchParams, useNavigate, useInRouterContext, useRoutes } from 'react-router-dom';
@@ -14,11 +14,11 @@ import { useTranslation, initReactI18next } from 'react-i18next';
 import { styled as styled$1 } from '@rango-dev/ui/src/theme';
 import { allProviders } from '@rango-dev/provider-all';
 import { useManager, Provider } from '@rango-dev/queue-manager-react';
+import i18n, { t } from 'i18next';
 import copy from 'copy-to-clipboard';
-import i18n from 'i18next';
+import { cancelSwap, swapQueueDef } from '@rango-dev/queue-manager-rango-preset';
 import Backend from 'i18next-http-backend';
 import LanguageDetector from 'i18next-browser-languagedetector';
-import { swapQueueDef } from '@rango-dev/queue-manager-rango-preset';
 
 const navigationRoutes = {
   home: '/',
@@ -405,7 +405,7 @@ function LimitErrorMessage(bestRoute) {
     recommendation
   };
 }
-function getSwapButtonState(loadingMetaStatus, accounts, loading, bestRoute, hasLimitError, highValueLoss, priceImpactCanNotBeComputed, needsToWarnEthOnPath) {
+function getSwapButtonState(loadingMetaStatus, accounts, loading, bestRoute, hasLimitError, highValueLoss, priceImpactCanNotBeComputed, needsToWarnEthOnPath, inputIsZero) {
   if (loadingMetaStatus !== 'success') return {
     title: 'Connect Wallet',
     disabled: true
@@ -417,6 +417,9 @@ function getSwapButtonState(loadingMetaStatus, accounts, loading, bestRoute, has
   if (loading) return {
     title: 'Finding Best Route...',
     disabled: true
+  };else if (inputIsZero) return {
+    title: 'Enter an amount',
+    disabled: true
   };else if (!bestRoute) return {
     title: 'Swap',
     disabled: true
@@ -626,6 +629,10 @@ function getBalanceWarnings(route, selectedWallets) {
     return warningMessage;
   });
 }
+function calcOutputUsdValue(outputAmount, tokenPrice) {
+  const amount = !!outputAmount ? new BigNumber(outputAmount) : ZERO;
+  return amount.multipliedBy(tokenPrice || 0);
+}
 
 function searchParamsToToken(tokens, searchParams, chain) {
   if (!chain) return null;
@@ -882,7 +889,7 @@ const useBestRouteStore = /*#__PURE__*/createSelectors( /*#__PURE__*/create()( /
     let outputUsdValue = ZERO;
     if (!!bestRoute) {
       outputAmount = !!bestRoute.result?.outputAmount ? new BigNumber(bestRoute.result?.outputAmount) : null;
-      outputUsdValue = new BigNumber(outputAmount || ZERO).multipliedBy(getBestRouteToTokenUsdPrice(bestRoute) || state.toToken?.usdPrice || 0);
+      outputUsdValue = calcOutputUsdValue(bestRoute.result?.outputAmount, getBestRouteToTokenUsdPrice(bestRoute) || state.toToken?.usdPrice);
     }
     return {
       bestRoute,
@@ -1179,12 +1186,12 @@ function HeaderButtons(props) {
   } = props;
   const navigate = useNavigate();
   return React.createElement(ButtonsContainer, null, React.createElement(Tooltip, {
-    content: "Retry"
+    content: "Refresh"
   }, React.createElement(Button, {
     variant: "ghost",
     onClick: onClickRefresh
   }, React.createElement(RetryIcon, {
-    size: 28
+    size: 24
   }))), React.createElement(Tooltip, {
     content: "Transactions History"
   }, React.createElement(Button, {
@@ -1238,13 +1245,42 @@ const Box = /*#__PURE__*/styled('div', {
 });
 const Container = /*#__PURE__*/styled('div', {
   boxSizing: 'border-box',
-  backgroundColor: '$neutrals300',
   borderRadius: '$5',
-  padding: '$8 0',
+  padding: '$8 $16 $16 $16',
+  variants: {
+    type: {
+      filled: {
+        backgroundColor: '$neutrals300'
+      },
+      outlined: {
+        border: '1px solid $neutrals300'
+      }
+    }
+  },
+  defaultVariants: {
+    type: 'filled'
+  },
+  '.head': {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    minHeight: '32px'
+  },
   '.form': {
     display: 'flex',
     width: '100%',
-    padding: '$8 $16'
+    padding: '$2 0',
+    '.selectors': {
+      width: '35%',
+      '._text': {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
+      }
+    },
+    '.amount': {
+      width: '30%'
+    }
   }
 });
 const StyledImage = /*#__PURE__*/styled('img', {
@@ -1254,7 +1290,10 @@ const StyledImage = /*#__PURE__*/styled('img', {
 const Options = /*#__PURE__*/styled('div', {
   display: 'flex',
   justifyContent: 'flex-end',
-  padding: '0 $8'
+  '.balance': {
+    display: 'flex',
+    alignItems: 'center'
+  }
 });
 const ImagePlaceholder = /*#__PURE__*/styled('span', {
   width: '24px',
@@ -1263,10 +1302,9 @@ const ImagePlaceholder = /*#__PURE__*/styled('span', {
   borderRadius: '99999px'
 });
 const OutputContainer = /*#__PURE__*/styled('div', {
+  windth: '100%',
   height: '$48',
   borderRadius: '$5',
-  flexGrow: 1,
-  width: '70%',
   backgroundColor: '$background',
   border: '1px solid transparent',
   position: 'relative',
@@ -1306,21 +1344,34 @@ function TokenInfo(props) {
     color: "error",
     size: 24
   }), React.createElement(AngleDownIcon, null));
-  return React.createElement(Box, null, React.createElement("div", null, React.createElement(Typography, {
-    variant: "body2"
-  }, t(type))), React.createElement(Container, null, props.type === 'From' && React.createElement(Options, null, React.createElement("div", {
+  return React.createElement(Box, null, React.createElement(Container, {
+    type: props.type === 'From' ? 'filled' : 'outlined'
+  }, React.createElement("div", {
+    className: "head"
+  }, React.createElement(Typography, {
+    variant: "body2",
+    color: "neutrals800"
+  }, t(type)), props.type === 'From' ? React.createElement(Options, null, React.createElement("div", {
     className: "balance",
     onClick: () => {
       if (tokenBalance !== '0') setInputAmount(tokenBalanceReal.split(',').join(''));
     }
-  }, React.createElement(Button, {
-    variant: "ghost",
-    size: "small"
   }, React.createElement(Typography, {
-    variant: "body2"
-  }, `${t('Max')}: ${tokenBalance} ${fromToken?.symbol || ''}`)))), React.createElement("div", {
+    variant: "body3",
+    color: "neutrals600"
+  }, `${t('Balance')}: ${tokenBalance} ${fromToken?.symbol || ''}`), React.createElement(Spacer, {
+    size: 4
+  }), React.createElement(Button, {
+    type: "primary",
+    variant: "ghost",
+    size: "compact"
+  }, t('Max')))) : React.createElement(Typography, {
+    variant: "caption",
+    color: "neutrals600"
+  }, `$${numberToString(props.outputUsdValue)}`)), React.createElement("div", {
     className: "form"
   }, React.createElement(Button, {
+    className: "selectors",
     onClick: () => {
       navigate(`/${props.type.toLowerCase()}-chain`);
     },
@@ -1332,11 +1383,11 @@ function TokenInfo(props) {
     }) : React.createElement(ImagePlaceholder, null),
     suffix: ItemSuffix,
     align: "start",
-    size: "large",
-    style: {
-      marginRight: '.5rem'
-    }
-  }, loadingStatus === 'success' && chain ? chain.displayName : t('Chain')), React.createElement(Button, {
+    size: "large"
+  }, loadingStatus === 'success' && chain ? chain.displayName : t('Chain')), React.createElement(Spacer, {
+    size: 12
+  }), React.createElement(Button, {
+    className: "selectors",
     onClick: () => {
       navigate(`/${props.type.toLowerCase()}-token`);
     },
@@ -1348,17 +1399,17 @@ function TokenInfo(props) {
     }) : React.createElement(ImagePlaceholder, null),
     suffix: ItemSuffix,
     size: "large",
-    align: "start",
-    style: {
-      marginRight: '.5rem'
-    }
-  }, loadingStatus === 'success' && token ? token.symbol : t('Token')), props.type === 'From' ? React.createElement(TextField, {
+    align: "start"
+  }, loadingStatus === 'success' && token ? token.symbol : t('Token')), React.createElement(Spacer, {
+    size: 12
+  }), React.createElement("div", {
+    className: "amount"
+  }, props.type === 'From' ? React.createElement(TextField, {
     type: "number",
     size: "large",
     autoFocus: true,
     placeholder: "0",
     style: {
-      width: '70%',
       position: 'relative',
       backgroundColor: '$background !important'
     },
@@ -1369,23 +1420,16 @@ function TokenInfo(props) {
         bottom: '2px'
       }
     }, React.createElement(Typography, {
-      variant: "caption"
+      variant: "caption",
+      color: "neutrals800"
     }, `$${numberToString(inputUsdValue)}`)),
     value: props.inputAmount || '',
     onChange: props.type === 'From' ? event => {
       props.onAmountChange(event.target.value);
     } : undefined
   }) : React.createElement(OutputContainer, null, React.createElement(Typography, {
-    variant: "body1"
-  }, bestRoute ? `≈ ${numberToString(props.outputAmount)}` : inputAmount ? '?' : '0'), React.createElement("span", {
-    style: {
-      position: 'absolute',
-      right: '4px',
-      bottom: '2px'
-    }
-  }, React.createElement(Typography, {
-    variant: "caption"
-  }, `$${numberToString(props.outputUsdValue)}`))))));
+    variant: "h4"
+  }, bestRoute ? `≈ ${numberToString(props.outputAmount)}` : inputAmount ? '?' : '0'))))));
 }
 
 const Container$1 = /*#__PURE__*/styled$1('div', {
@@ -1483,16 +1527,17 @@ const errorMessages = {
 
 const Container$2 = /*#__PURE__*/styled('div', {
   display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  alignItems: 'center'
+  flexDirection: 'column'
 });
-const SwitchButtonContainer = /*#__PURE__*/styled('div', {
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
+const FromContainer = /*#__PURE__*/styled('div', {
   position: 'relative',
-  top: '11px'
+  paddingBottom: '$12'
+});
+const SwitchButtonContainer = /*#__PURE__*/styled('div', {
+  position: 'absolute',
+  bottom: '-12px',
+  left: '50%',
+  transform: 'translate(-50%, 10%)'
 });
 const BestRouteContainer = /*#__PURE__*/styled('div', {
   width: '100%',
@@ -1508,7 +1553,6 @@ function Home(props) {
     titleSize = 18,
     titleWeight = 600
   } = props;
-  const waningMessage = '';
   const isRouterInContext = useInRouterContext();
   const navigate = useNavigate();
   const [count, setCount] = useState(0);
@@ -1550,7 +1594,8 @@ function Home(props) {
     swap
   } = LimitErrorMessage(bestRoute);
   const priceImpactCanNotBeComputed = !canComputePriceImpact(bestRoute, inputAmount, inputUsdValue, outputUsdValue);
-  const swapButtonState = getSwapButtonState(loadingMetaStatus, accounts, fetchingBestRoute, bestRoute, hasLimitError(bestRoute), highValueLoss, priceImpactCanNotBeComputed, needsToWarnEthOnPath);
+  const inputIsZero = inputAmount === '0';
+  const swapButtonState = getSwapButtonState(loadingMetaStatus, accounts, fetchingBestRoute, bestRoute, hasLimitError(bestRoute), highValueLoss, priceImpactCanNotBeComputed, needsToWarnEthOnPath, inputIsZero);
   const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
   const highFee = hasHighFee(totalFeeInUsd);
   return React.createElement(Container$2, null, React.createElement(Header, {
@@ -1558,7 +1603,7 @@ function Home(props) {
     titleSize: titleSize,
     titleWeight: titleWeight,
     onClickRefresh: fetchBestRoute
-  }), React.createElement(TokenInfo, {
+  }), React.createElement(FromContainer, null, React.createElement(TokenInfo, {
     type: "From",
     chain: fromChain,
     token: fromToken,
@@ -1568,14 +1613,14 @@ function Home(props) {
     variant: "ghost",
     onClick: swithFromAndTo
   }, React.createElement(VerticalSwapIcon, {
-    size: 36
+    size: 24
   }), isRouterInContext && React.createElement(SwithFromAndTo, {
     count: count
-  }))), React.createElement(TokenInfo, {
+  })))), React.createElement(TokenInfo, {
     type: "To",
     chain: toChain,
     token: toToken,
-    outputAmount: outputAmount,
+    outputAmount: outputAmount ? new BigNumber(outputAmount) : new BigNumber(0),
     outputUsdValue: outputUsdValue
   }), showBestRoute && React.createElement(BestRouteContainer, null, React.createElement(BestRoute, {
     error: bestRouteError,
@@ -1584,11 +1629,9 @@ function Home(props) {
     totalFee: numberToString(totalFeeInUsd, 0, 2),
     feeWarning: highFee,
     totalTime: secondsToString(totalArrivalTime(bestRoute))
-  })), (errorMessage || waningMessage || hasLimitError(bestRoute)) && React.createElement(Alerts, null, errorMessage && React.createElement(Alert, {
+  })), (errorMessage || hasLimitError(bestRoute)) && React.createElement(Alerts, null, errorMessage && React.createElement(Alert, {
     type: "error"
-  }, React.createElement(Typography, {
-    variant: "body2"
-  }, errorMessage)), hasLimitError(bestRoute) && React.createElement(Alert, {
+  }, errorMessage), hasLimitError(bestRoute) && React.createElement(Alert, {
     type: "error",
     title: `${swap?.swapperId} Limit`
   }, React.createElement(React.Fragment, null, React.createElement(Typography, {
@@ -1597,7 +1640,7 @@ function Home(props) {
     variant: "body2"
   }, "Yours: ", numberToString(swap?.fromAmount || null), swap?.from.symbol), React.createElement("br", null), React.createElement(Typography, {
     variant: "body2"
-  }, recommendation))), waningMessage ), React.createElement(Footer, null, React.createElement(Button, {
+  }, recommendation)))), React.createElement(Footer, null, React.createElement(Button, {
     type: "primary",
     align: "grow",
     size: "large",
@@ -1639,14 +1682,11 @@ function AppRouter(_ref2) {
   return React.createElement(React.Fragment, null, React.createElement(Router, Object.assign({}, props), children), isRouterInContext && React.createElement(UpdateUrl, null));
 }
 
-const StyledButton = /*#__PURE__*/styled(Button, {
-  marginTop: '$8'
-});
 function ChangeSlippageButton() {
   const navigate = useNavigate();
-  return React.createElement(StyledButton, {
+  return React.createElement(Button, {
     type: "primary",
-    variant: "contained",
+    variant: "outlined",
     size: "small",
     onClick: () => navigate(navigationRoutes.settings)
   }, "Change Slippage");
@@ -1657,10 +1697,9 @@ function HighSlippageWarning(props) {
     selectedSlippage
   } = props;
   return React.createElement(Alert, {
-    type: "warning"
-  }, React.createElement(Typography, {
-    variant: "body2"
-  }, "Caution, your slippage is high (=", selectedSlippage, "). Your trade may be front run.", React.createElement(ChangeSlippageButton, null)));
+    type: "warning",
+    footer: React.createElement(ChangeSlippageButton, null)
+  }, "Caution, your slippage is high (=", selectedSlippage, "). Your trade may be front run.");
 }
 
 function ConfirmSwapExtraMessages(props) {
@@ -2188,7 +2227,7 @@ const ListContainer = /*#__PURE__*/styled('div', {
   gridTemplateColumns: ' repeat(2, minmax(0, 1fr))',
   height: '450px',
   alignContent: 'baseline',
-  padding: '0 0.5rem'
+  padding: '0.5rem'
 });
 const AlertContainer = /*#__PURE__*/styled('div', {
   paddingBottom: '$16'
@@ -2241,14 +2280,182 @@ function WalletsPage(_ref) {
     onBack: navigateBackFrom.bind(null, navigationRoutes.wallets)
   }, React.createElement(React.Fragment, null, walletErrorMessage && React.createElement(AlertContainer, null, React.createElement(Alert, {
     type: "error"
-  }, React.createElement(Typography, {
-    variant: "body2"
-  }, walletErrorMessage))), React.createElement(ListContainer, null, sortedWallets.map((wallet, index) => React.createElement(Wallet, Object.assign({}, wallet, {
+  }, walletErrorMessage)), React.createElement(ListContainer, null, sortedWallets.map((wallet, index) => React.createElement(Wallet, Object.assign({}, wallet, {
     key: `${index}-${wallet.type}`,
     onClick: onSelectWallet
   }))))));
 }
 
+const Box$1 = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%'
+});
+const Container$3 = /*#__PURE__*/styled('div', {
+  boxSizing: 'border-box',
+  borderRadius: '$5',
+  padding: '$8 $16 $16 $16',
+  variants: {
+    type: {
+      filled: {
+        backgroundColor: '$neutrals300'
+      },
+      outlined: {
+        border: '1px solid $neutrals300'
+      }
+    }
+  },
+  defaultVariants: {
+    type: 'filled'
+  },
+  '.head': {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    minHeight: '32px'
+  },
+  '.form': {
+    display: 'flex',
+    width: '100%',
+    padding: '$2 0',
+    '.selectors': {
+      width: '35%',
+      '._text': {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
+      }
+    },
+    '.amount': {
+      width: '30%'
+    }
+  }
+});
+const StyledImage$1 = /*#__PURE__*/styled('img', {
+  width: '$24',
+  maxHeight: '$24'
+});
+const ImagePlaceholder$1 = /*#__PURE__*/styled('span', {
+  width: '24px',
+  height: '24px',
+  backgroundColor: '$neutrals300',
+  borderRadius: '99999px'
+});
+const OutputContainer$1 = /*#__PURE__*/styled('div', {
+  windth: '100%',
+  height: '$48',
+  borderRadius: '$5',
+  backgroundColor: '$background',
+  border: '1px solid transparent',
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  paddingLeft: '$8',
+  paddingRight: '$8'
+});
+function TokenPreview(props) {
+  const {
+    chain,
+    token,
+    loadingStatus
+  } = props;
+  const {
+    t
+  } = useTranslation();
+  const ItemSuffix = React.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, loadingStatus === 'failed' && React.createElement(InfoCircleIcon, {
+    color: "error",
+    size: 24
+  }));
+  return React.createElement(Box$1, null, React.createElement(Container$3, {
+    type: 'outlined'
+  }, React.createElement("div", {
+    className: "head"
+  }, React.createElement(Typography, {
+    variant: "body2",
+    color: "neutrals800"
+  }, props.label), React.createElement(Typography, {
+    variant: "caption",
+    color: "neutrals600"
+  }, `$${numberToString(props.usdValue)}`)), React.createElement("div", {
+    className: "form"
+  }, React.createElement(Button, {
+    className: "selectors",
+    variant: "outlined",
+    loading: loadingStatus === 'loading',
+    prefix: loadingStatus === 'success' && chain ? React.createElement(StyledImage$1, {
+      src: chain.logo
+    }) : React.createElement(ImagePlaceholder$1, null),
+    suffix: ItemSuffix,
+    align: "start",
+    size: "large"
+  }, loadingStatus === 'success' && chain ? chain.displayName : t('Chain')), React.createElement(Spacer, {
+    size: 12
+  }), React.createElement(Button, {
+    className: "selectors",
+    variant: "outlined",
+    loading: loadingStatus === 'loading',
+    prefix: loadingStatus === 'success' && token ? React.createElement(StyledImage$1, {
+      src: token.image
+    }) : React.createElement(ImagePlaceholder$1, null),
+    suffix: ItemSuffix,
+    size: "large",
+    align: "start"
+  }, loadingStatus === 'success' && token ? token.symbol : t('Token')), React.createElement(Spacer, {
+    size: 12
+  }), React.createElement("div", {
+    className: "amount"
+  }, React.createElement(OutputContainer$1, null, React.createElement(Typography, {
+    variant: "h4"
+  }, props.amount))))));
+}
+
+const Container$4 = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: '$8',
+  borderRadius: '$5',
+  backgroundColor: '$neutrals300',
+  color: '$neutrals800',
+  fontSize: '$12',
+  '.routes': {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  '.fee': {
+    display: 'flex',
+    alignItems: 'center'
+  }
+});
+function RoutesOverview(props) {
+  if (!props.routes) return null;
+  const swaps = props.routes.result?.swaps;
+  return React.createElement(Container$4, null, React.createElement("div", {
+    className: "routes"
+  }, swaps?.map((swap, idx) => {
+    const isLast = idx + 1 == swaps.length;
+    return React.createElement(React.Fragment, null, React.createElement("div", {
+      className: "route"
+    }, swap.from.symbol), React.createElement(ChevronRightIcon, {
+      size: 12
+    }), isLast ? React.createElement("div", {
+      className: "route"
+    }, swap.to.symbol) : null);
+  })), props.totalFee ? React.createElement("div", {
+    className: "fee"
+  }, React.createElement(GasIcon, {
+    size: 12
+  }), React.createElement(Spacer, {
+    size: 4
+  }), "$", props.totalFee) : null);
+}
+
 function ConfirmWalletsPage() {
   const navigate = useNavigate();
   const {
@@ -2256,7 +2463,8 @@ function ConfirmWalletsPage() {
   } = useNavigateBack();
   const bestRoute = useBestRouteStore.use.bestRoute();
   const {
-    blockchains
+    blockchains,
+    tokens
   } = useMetaStore.use.meta();
   const accounts = useWalletsStore.use.accounts();
   const selectedWallets = useWalletsStore.use.selectedWallets();
@@ -2279,20 +2487,52 @@ function ConfirmWalletsPage() {
     const network = wallet;
     getKeplrCompatibleConnectedWallets(selectableWallets).forEach(compatibleWallet => connect?.(compatibleWallet, network));
   };
+  const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
   return React.createElement(ConfirmWallets, {
     requiredWallets: getRequiredChains(bestRoute),
     selectableWallets: selectableWallets,
     onBack: navigateBackFrom.bind(null, navigationRoutes.confirmWallets),
-    swap: bestRoute,
-    fromAmount: fromAmount,
-    toAmount: toAmount,
     onConfirm: () => navigate(navigationRoutes.confirmSwap, {
       replace: true
     }),
     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,
+    previewInputs: React.createElement(React.Fragment, null, React.createElement(TokenPreview, {
+      chain: {
+        displayName: firstStep?.from.blockchain || '',
+        logo: firstStep?.from.blockchainLogo || ''
+      },
+      token: {
+        symbol: firstStep?.from.symbol || '',
+        image: firstStep?.from.logo || ''
+      },
+      usdValue: calcOutputUsdValue(fromAmount, firstStep?.from.usdPrice),
+      amount: fromAmount,
+      label: t('From'),
+      loadingStatus: 'success'
+    }), React.createElement(Spacer, {
+      size: 12,
+      direction: "vertical"
+    }), React.createElement(TokenPreview, {
+      chain: {
+        displayName: lastStep?.to.blockchain || '',
+        logo: lastStep?.to.blockchainLogo || ''
+      },
+      token: {
+        symbol: lastStep?.to.symbol || '',
+        image: lastStep?.to.logo || ''
+      },
+      usdValue: calcOutputUsdValue(toAmount, lastStep?.to.usdPrice),
+      amount: toAmount,
+      label: t('To'),
+      loadingStatus: 'success'
+    })),
+    previewRoutes: React.createElement(RoutesOverview, {
+      routes: bestRoute,
+      totalFee: numberToString(totalFeeInUsd, 0, 2)
+    })
   });
 }
 
@@ -2329,16 +2569,20 @@ function SwapDetailsPage() {
       swap
     } = _ref;
     return swap.requestId === selectedSwapRequestId;
-  })?.swap;
+  });
+  //TODO: implement swap cancellation (move queueManager logic to queueManager/rango-preset)
+  const onCancel = () => {
+    const swap = selectedSwap ? manager?.get(selectedSwap.id) : undefined;
+    if (swap) cancelSwap(swap);
+  };
   return React.createElement(SwapHistory, {
     onBack: navigateBackFrom.bind(null, navigationRoutes.swapDetails),
     //todo: move PendingSwap type to rango-types
     //@ts-ignore
-    pendingSwap: selectedSwap,
+    pendingSwap: selectedSwap?.swap,
     onCopy: handleCopy,
     isCopied: isCopied,
-    //todo: implement swap cancellation (move queueManager logic to queueManager/rango-preset)
-    onCancel: requestId => console.log(requestId)
+    onCancel: onCancel
   });
 }
 
@@ -2493,7 +2737,7 @@ const globalStyles = /*#__PURE__*/globalCss({
 });
 const globalFont = fontFamily => globalCss({
   '@import': ["url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap')", "url('https://fonts.cdnfonts.com/css/times-new-roman')"],
-  [`.font_${fontFamily.replace(/ /g, '')} ._text`]: {
+  body: {
     fontFamily
   }
 })();
@@ -2519,16 +2763,16 @@ function useTheme(_ref) {
     warning = '#F5A623',
     success = '#0070F3',
     fontFamily = 'Robot',
-    borderRadius = 5
+    borderRadius = 8
   } = _ref;
   const theme = useSettingsStore.use.theme();
   const fetchMeta = useMetaStore.use.fetchMeta();
   const colors = {
     neutrals200: '#FAFAFA',
-    neutrals300: '#EAEAEA',
-    neutrals400: '#999999',
-    neutrals500: '#888888',
-    neutrals600: '#666666',
+    neutrals300: '#f2f2f2',
+    neutrals400: '#dedede',
+    neutrals500: '#cccccc',
+    neutrals600: '#acacac',
     neutrals700: '#444444',
     neutrals800: '#333333',
     neutrals900: '#111111',
@@ -2572,10 +2816,10 @@ function useTheme(_ref) {
       neutrals200: '#111111',
       neutrals300: '#333333',
       neutrals400: '#444444',
-      neutrals500: '#666666',
-      neutrals600: '#888888',
-      neutrals700: '#999999',
-      neutrals800: '#EAEAEA',
+      neutrals500: '#acacac',
+      neutrals600: '#cccccc',
+      neutrals700: '#dedede',
+      neutrals800: '#f2f2f2',
       neutrals900: '#FAFAFA',
       foreground: background,
       background: foreground
@@ -2635,8 +2879,9 @@ function useSelectLanguage() {
 }
 
 var swap = "SWAP";
-var From = "From";
-var To = "To";
+var From = "You sell";
+var To = "You receive";
+var Balance = "Balance";
 var Max = "Max";
 var Chain = "Chain";
 var Token = "Token";
@@ -2648,12 +2893,13 @@ var en = {
 	"Powered By": "Powered By",
 	From: From,
 	To: To,
+	Balance: Balance,
 	Max: Max,
 	Chain: Chain,
 	Token: Token,
 	Source: Source,
 	Destination: Destination,
-	"Select Wallet": "Select Wallet"
+	"Select Wallet": "Connect Your Wallet"
 };
 
 var swap$1 = "TAKAS";