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

package/src/pages/ConfirmWalletsPage.tsx

@@ -11,18 +11,27 @@ import {
   getSelectableWallets,
   isExperimentalChain,
 } from '../utils/wallets';
-import { requiredWallets } from '../utils/swap';
-import { decimalNumber } from '../utils/numbers';
+import {
+  calcOutputUsdValue,
+  getTotalFeeInUsd,
+  requiredWallets,
+} from '../utils/swap';
+import { decimalNumber, numberToString } from '../utils/numbers';
 import { useMetaStore } from '../store/meta';
 import { Network, WalletType } from '@rango-dev/wallets-shared';
 import { useNavigateBack } from '../hooks/useNavigateBack';
+import { TokenPreview } from '../components/TokenPreview';
+// @ts-ignore // TODO: fix error in tsc build
+import { t } from 'i18next';
+import { Spacer } from '@rango-dev/ui';
+import RoutesOverview from '../components/RoutesOverview';
 
 export function ConfirmWalletsPage() {
   const navigate = useNavigate();
   const { navigateBackFrom } = useNavigateBack();
   const bestRoute = useBestRouteStore.use.bestRoute();
 
-  const { blockchains } = useMetaStore.use.meta();
+  const { blockchains, tokens } = useMetaStore.use.meta();
   const accounts = useWalletsStore.use.accounts();
   const selectedWallets = useWalletsStore.use.selectedWallets();
   const initSelectedWallets = useWalletsStore.use.initSelectedWallets();
@@ -56,14 +65,13 @@ export function ConfirmWalletsPage() {
     );
   };
 
+  const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
+
   return (
     <ConfirmWallets
       requiredWallets={getRequiredChains(bestRoute)}
       selectableWallets={selectableWallets}
       onBack={navigateBackFrom.bind(null, navigationRoutes.confirmWallets)}
-      swap={bestRoute}
-      fromAmount={fromAmount}
-      toAmount={toAmount}
       onConfirm={() =>
         navigate(navigationRoutes.confirmSwap, { replace: true })
       }
@@ -75,6 +83,45 @@ export function ConfirmWalletsPage() {
           ? isExperimentalChain(blockchains, wallet)
           : false
       }
+      previewInputs={
+        <>
+          <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'}
+          />
+          <Spacer size={12} direction="vertical" />
+          <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={
+        <RoutesOverview
+          routes={bestRoute}
+          totalFee={numberToString(totalFeeInUsd, 0, 2)}
+        />
+      }
     />
   );
 }

package/src/pages/Home.tsx

@@ -33,20 +33,23 @@ import {
   secondsToString,
   totalArrivalTime,
 } from '../utils/numbers';
+import BigNumber from 'bignumber.js';
 
 const Container = styled('div', {
   display: 'flex',
   flexDirection: 'column',
-  justifyContent: 'center',
-  alignItems: 'center',
 });
 
-const SwitchButtonContainer = styled('div', {
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
+const FromContainer = styled('div', {
   position: 'relative',
-  top: '11px',
+  paddingBottom: '$12',
+});
+
+const SwitchButtonContainer = styled('div', {
+  position: 'absolute',
+  bottom: '-12px',
+  left: '50%',
+  transform: 'translate(-50%, 10%)',
 });
 
 const BestRouteContainer = styled('div', {
@@ -66,7 +69,6 @@ interface PropTypes {
 export function Home(props: PropTypes) {
   const { title = 'SWAP', titleSize = 18, titleWeight = 600 } = props;
 
-  const waningMessage = '';
   const isRouterInContext = useInRouterContext();
   const navigate = useNavigate();
   const [count, setCount] = useState(0);
@@ -123,6 +125,7 @@ export function Home(props: PropTypes) {
     outputUsdValue
   );
 
+  const inputIsZero = inputAmount === '0';
   const swapButtonState = getSwapButtonState(
     loadingMetaStatus,
     accounts,
@@ -131,14 +134,14 @@ export function Home(props: PropTypes) {
     hasLimitError(bestRoute),
     highValueLoss,
     priceImpactCanNotBeComputed,
-    needsToWarnEthOnPath
+    needsToWarnEthOnPath,
+    inputIsZero
   );
 
   const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
 
   const highFee = hasHighFee(totalFeeInUsd);
 
- 
   return (
     <Container>
       <Header
@@ -147,24 +150,28 @@ export function Home(props: PropTypes) {
         titleWeight={titleWeight}
         onClickRefresh={fetchBestRoute}
       />
-      <TokenInfo
-        type="From"
-        chain={fromChain}
-        token={fromToken}
-        onAmountChange={setInputAmount}
-        inputAmount={inputAmount}
-      />
-      <SwitchButtonContainer>
-        <Button variant="ghost" onClick={swithFromAndTo}>
-          <VerticalSwapIcon size={36} />
-          {isRouterInContext && <SwithFromAndTo count={count} />}
-        </Button>
-      </SwitchButtonContainer>
+      <FromContainer>
+        <TokenInfo
+          type="From"
+          chain={fromChain}
+          token={fromToken}
+          onAmountChange={setInputAmount}
+          inputAmount={inputAmount}
+        />
+        <SwitchButtonContainer>
+          <Button variant="ghost" onClick={swithFromAndTo}>
+            <VerticalSwapIcon size={24} />
+            {isRouterInContext && <SwithFromAndTo count={count} />}
+          </Button>
+        </SwitchButtonContainer>
+      </FromContainer>
       <TokenInfo
         type="To"
         chain={toChain}
         token={toToken}
-        outputAmount={outputAmount}
+        outputAmount={
+          outputAmount ? new BigNumber(outputAmount) : new BigNumber(0)
+        }
         outputUsdValue={outputUsdValue}
       />
       {showBestRoute && (
@@ -179,13 +186,9 @@ export function Home(props: PropTypes) {
           />
         </BestRouteContainer>
       )}
-      {(errorMessage || waningMessage || hasLimitError(bestRoute)) && (
+      {(errorMessage || hasLimitError(bestRoute)) && (
         <Alerts>
-          {errorMessage && (
-            <Alert type="error">
-              {<Typography variant="body2">{errorMessage}</Typography>}
-            </Alert>
-          )}
+          {errorMessage && <Alert type="error">{errorMessage}</Alert>}
           {hasLimitError(bestRoute) && (
             <Alert type="error" title={`${swap?.swapperId} Limit`}>
               <>
@@ -200,11 +203,6 @@ export function Home(props: PropTypes) {
               </>
             </Alert>
           )}
-          {waningMessage && (
-            <Alert type="warning">
-              <Typography variant="body2">{waningMessage}</Typography>
-            </Alert>
-          )}
         </Alerts>
       )}
       <Footer>

package/src/pages/WalletsPage.tsx

@@ -3,7 +3,6 @@ import {
   SecondaryPage,
   styled,
   Wallet,
-  Typography,
   WalletState,
 } from '@rango-dev/ui';
 import React, { useEffect, useState } from 'react';
@@ -27,7 +26,7 @@ const ListContainer = styled('div', {
   gridTemplateColumns: ' repeat(2, minmax(0, 1fr))',
   height: '450px',
   alignContent: 'baseline',
-  padding: '0 0.5rem',
+  padding: '0.5rem',
 });
 
 const AlertContainer = styled('div', {
@@ -85,9 +84,7 @@ export function WalletsPage({ supportedWallets, multiWallets }: PropTypes) {
       <>
         {walletErrorMessage && (
           <AlertContainer>
-            <Alert type="error">
-              <Typography variant="body2">{walletErrorMessage}</Typography>
-            </Alert>
+            <Alert type="error">{walletErrorMessage}</Alert>
           </AlertContainer>
         )}
         <ListContainer>

package/src/store/bestRoute.ts

@@ -11,7 +11,7 @@ import createSelectors from './selectors';
 import { subscribeWithSelector } from 'zustand/middleware';
 import { httpService } from '../services/httpService';
 import { useSettingsStore } from './settings';
-import { createBestRouteRequestBody } from '../utils/swap';
+import { calcOutputUsdValue, createBestRouteRequestBody } from '../utils/swap';
 import { useMetaStore } from './meta';
 import { getDefaultToken, getSortedTokens } from '../utils/wallets';
 import { useWalletsStore } from './wallets';
@@ -69,10 +69,9 @@ export const useBestRouteStore = createSelectors(
             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 {

package/src/utils/swap.ts

@@ -128,12 +128,14 @@ export function getSwapButtonState(
   hasLimitError: boolean,
   highValueLoss: boolean,
   priceImpactCanNotBeComputed: boolean,
-  needsToWarnEthOnPath: boolean
+  needsToWarnEthOnPath: boolean,
+  inputIsZero: boolean
 ): SwapButtonState {
   if (loadingMetaStatus !== 'success')
     return { title: 'Connect Wallet', disabled: true };
   if (accounts.length == 0) return { title: 'Connect Wallet', disabled: false };
   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 };
   else if (hasLimitError) return { title: 'Limit Error', disabled: true };
   else if (highValueLoss)
@@ -539,3 +541,12 @@ export function getBalanceWarnings(
       return warningMessage;
     });
 }
+
+export function calcOutputUsdValue(
+  outputAmount?: string,
+  tokenPrice?: number | null
+) {
+  const amount = !!outputAmount ? new BigNumber(outputAmount) : ZERO;
+
+  return amount.multipliedBy(tokenPrice || 0);
+}