@rango-dev/widget-embedded 0.10.1-next.0 → 0.11.0

package/dist/pages/ConfirmSwapPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AA0CnD,wBAAgB,eAAe,CAAC,EAC9B,wBAAwB,GACzB,EAAE;IACD,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC,qBA0NA"}
+{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAyCnD,wBAAgB,eAAe,CAAC,EAC9B,wBAAwB,GACzB,EAAE;IACD,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC,qBAgNA"}

package/dist/pages/Home.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AA8BzC,wBAAgB,IAAI,sBAgKnB"}
+{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":"AAWA,OAAO,KAA8B,MAAM,OAAO,CAAC;AA+DnD,wBAAgB,IAAI,sBA+JnB"}

package/dist/pages/SwapDetailsPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SwapDetailsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SwapDetailsPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgC1B,wBAAgB,eAAe,sBAqI9B"}
+{"version":3,"file":"SwapDetailsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SwapDetailsPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA6B1B,wBAAgB,eAAe,sBAqI9B"}

package/dist/utils/numbers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"numbers.d.ts","sourceRoot":"","sources":["../../src/utils/numbers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAE9C,eAAO,MAAM,eAAe,MAAO,MAAM,yBAAkB,MAC7B,CAAC;AAE/B,eAAO,MAAM,eAAe,MAAO,MAAM,KAAG,MAM3C,CAAC;AAEF,eAAO,MAAM,cAAc,WACjB,SAAS,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,gBAChC,MAAM,GAAG,IAAI,gBACb,MAAM,GAAG,IAAI,KACzB,MA6DF,CAAC;AAEF,eAAO,MAAM,qBAAqB,UACzB,SAAS,YACN,MAAM,KACf,MAEF,CAAC;AAEF,eAAO,MAAM,eAAe,WAAY,UAAU,KAAG,MAKpD,CAAC;AAEF,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAQrE;AAED,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,MAAM,CAW5E;AAED,eAAO,MAAM,gBAAgB,SAAU,iBAAiB,GAAG,IAAI,WACc,CAAC;AAE9E,eAAO,MAAM,OAAO,SAAU,iBAAiB,KAAG,MAOnC,CAAC;AAEhB,eAAO,MAAM,YAAY,SAAU,MAAM,cAAc,MAAM,YACF,CAAC;AAE5D,eAAO,MAAM,gBAAgB,UAAW,MAAM,YACd,CAAC"}
+{"version":3,"file":"numbers.d.ts","sourceRoot":"","sources":["../../src/utils/numbers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAE9C,eAAO,MAAM,eAAe,MAAO,MAAM,yBAAkB,MAC7B,CAAC;AAC/B,eAAO,MAAM,eAAe,MAAO,MAAM,KAAG,MAM3C,CAAC;AAEF,eAAO,MAAM,cAAc,WACjB,SAAS,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,gBAChC,MAAM,GAAG,IAAI,gBACb,MAAM,GAAG,IAAI,KACzB,MA6DF,CAAC;AAEF,eAAO,MAAM,qBAAqB,UACzB,SAAS,YACN,MAAM,KACf,MAEF,CAAC;AAEF,eAAO,MAAM,eAAe,WAAY,UAAU,KAAG,MAIpD,CAAC;AAEF,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAQrE;AAED,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,MAAM,CAW5E;AAED,eAAO,MAAM,gBAAgB,SAAU,iBAAiB,GAAG,IAAI,WACc,CAAC;AAE9E,eAAO,MAAM,OAAO,SAAU,iBAAiB,KAAG,MAOnC,CAAC;AAEhB,eAAO,MAAM,YAAY,SAAU,MAAM,cAAc,MAAM,YACF,CAAC;AAE5D,eAAO,MAAM,gBAAgB,UAAW,MAAM,YACd,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.10.1-next.0",
+  "version": "0.11.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.js",
@@ -19,13 +19,13 @@
   "dependencies": {
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
-    "@rango-dev/provider-all": "^0.13.0",
-    "@rango-dev/queue-manager-core": "^0.13.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.13.0",
-    "@rango-dev/queue-manager-react": "^0.13.0",
-    "@rango-dev/ui": "^0.13.1-next.0",
-    "@rango-dev/wallets-core": "^0.13.0",
-    "@rango-dev/wallets-shared": "^0.13.0",
+    "@rango-dev/provider-all": "^0.14.0",
+    "@rango-dev/queue-manager-core": "^0.14.0",
+    "@rango-dev/queue-manager-rango-preset": "^0.14.0",
+    "@rango-dev/queue-manager-react": "^0.14.0",
+    "@rango-dev/ui": "^0.14.0",
+    "@rango-dev/wallets-core": "^0.14.0",
+    "@rango-dev/wallets-shared": "^0.14.0",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",

package/src/components/Layout.tsx

@@ -1,6 +1,13 @@
+import {
+  Button,
+  AddWalletIcon,
+  Typography,
+  styled,
+  Spinner,
+  Image,
+} from '@rango-dev/ui';
 import React, { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { HeaderLayout } from '@rango-dev/ui';
 import { useWallets } from '@rango-dev/wallets-core';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { useUiStore } from '../store/ui';
@@ -13,10 +20,33 @@ import {
 } from '../utils/wallets';
 import { removeDuplicateFrom } from '../utils/common';
 import { WidgetConfig } from '../types';
+import { i18n } from '@lingui/core';
 import { useBestRouteStore } from '../store/bestRoute';
 import { useMetaStore } from '../store/meta';
 import { useSettingsStore } from '../store/settings';
 
+const Header = styled('div', {
+  display: 'flex',
+  width: '100%',
+  justifyContent: 'end',
+  '.balance': {
+    display: 'flex',
+  },
+});
+
+const WalletImages = styled('div', {
+  display: 'flex',
+  paddingLeft: '12px',
+});
+
+const WalletImageContainer = styled('div', {
+  marginLeft: -15,
+  marginRight: '$6',
+  '& img': {
+    borderRadius: '50%',
+  },
+});
+
 export type LayoutProps = {
   config?: WidgetConfig;
 };
@@ -89,17 +119,40 @@ export function Layout({ config }: LayoutProps) {
 
   return (
     <>
-      <HeaderLayout
-        loadingStatus={loadingMetaStatus}
-        connectedWalletsImages={connectedWalletsImages}
-        connectedWallets={connectedWallets}
-        totalBalance={totalBalance}
-        fetchingBalance={fetchingBalance}
-        onClick={() => {
-          if (!connectWalletsButtonDisabled) navigate(navigationRoutes.wallets);
-        }}>
-        <AppRoutes config={config} />
-      </HeaderLayout>
+      <Header>
+        <Button
+          size="small"
+          suffix={<AddWalletIcon size={20} />}
+          variant="ghost"
+          flexContent
+          loading={loadingMetaStatus === 'loading'}
+          disabled={loadingMetaStatus === 'failed'}
+          onClick={() => {
+            if (!connectWalletsButtonDisabled)
+              navigate(navigationRoutes.wallets);
+          }}
+          prefix={
+            connectedWalletsImages?.length ? (
+              <WalletImages>
+                {connectedWalletsImages.map((walletImage, index) => (
+                  <WalletImageContainer key={index}>
+                    <Image src={walletImage} size={24} />
+                  </WalletImageContainer>
+                ))}
+              </WalletImages>
+            ) : null
+          }>
+          <div className="balance">
+            <Typography variant="body2">
+              {!connectedWallets?.length
+                ? i18n.t('Connect Wallet')
+                : `$${totalBalance || 0}`}
+            </Typography>
+            {fetchingBalance && <Spinner />}
+          </div>
+        </Button>
+      </Header>
+      <AppRoutes config={config} />
     </>
   );
 }

package/src/components/PercentageChange.tsx

@@ -0,0 +1,33 @@
+import BigNumber from 'bignumber.js';
+import React from 'react';
+import { getPercentageChange } from '../utils/swap';
+import { Typography } from '@rango-dev/ui';
+import { numberToString } from '../utils/numbers';
+
+interface PropTypes {
+  inputUsdValue: BigNumber | null;
+  outputUsdValue: BigNumber | null;
+}
+
+export function PercentageChange(props: PropTypes) {
+  const { inputUsdValue, outputUsdValue } = props;
+
+  if (!inputUsdValue || !outputUsdValue || !outputUsdValue.gt(0)) return null;
+
+  const percentageChange = getPercentageChange(
+    inputUsdValue.toNumber(),
+    outputUsdValue.toNumber()
+  );
+
+  const showPercentageChange = percentageChange?.lt(0);
+
+  return (
+    <>
+      {showPercentageChange && (
+        <Typography variant="caption" color="$error500">
+          {`(${numberToString(percentageChange, 0, 2)}%)`}
+        </Typography>
+      )}
+    </>
+  );
+}

package/src/components/RoutesOverview.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { styled, ChevronRightIcon, GasIcon, Divider } from '@rango-dev/ui';
+import { BestRouteResponse } from 'rango-sdk';
+
+export const Container = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: '$8',
+  borderRadius: '$5',
+  backgroundColor: '$neutral100',
+  color: '$neutral800',
+  fontSize: '$12',
+
+  '.routes': {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  '.fee': {
+    display: 'flex',
+    alignItems: 'center',
+  },
+});
+
+interface PropTypes {
+  routes: BestRouteResponse | null;
+  totalFee?: string;
+}
+function RoutesOverview(props: PropTypes) {
+  if (!props.routes) return null;
+
+  const swaps = props.routes.result?.swaps;
+  return (
+    <Container>
+      <div className="routes">
+        {swaps?.map((swap, idx) => {
+          const isLast = idx + 1 == swaps.length;
+          return (
+            <React.Fragment key={idx}>
+              <div className="route">{swap.from.symbol}</div>
+              <ChevronRightIcon size={12} />
+              {isLast ? <div className="route">{swap.to.symbol}</div> : null}
+            </React.Fragment>
+          );
+        })}
+      </div>
+      {props.totalFee ? (
+        <div className="fee">
+          <GasIcon size={12} />
+          <Divider size={4} direction="horizontal" />${props.totalFee}
+        </div>
+      ) : null}
+    </Container>
+  );
+}
+
+export default RoutesOverview;

package/src/components/SwapDetailsPlaceholder.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { SecondaryPage, Spinner, Alert, styled } from '@rango-dev/ui';
+import { i18n } from '@lingui/core';
+
+const PlaceholderContainer = styled('div', { height: '450px' });
+
+export const LoaderContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  width: '100%',
+  paddingTop: '33%',
+  flex: 1,
+});
+
+interface PropTypes {
+  requestId: string;
+  loading: boolean;
+  onBack: () => void;
+}
+
+export function SwapDetailsPlaceholder(props: PropTypes) {
+  const { requestId, loading, onBack } = props;
+
+  return (
+    <SecondaryPage
+      title={i18n.t('Swap Details')}
+      textField={false}
+      onBack={onBack}>
+      <PlaceholderContainer>
+        {loading ? (
+          <LoaderContainer>
+            <Spinner size={24} />
+          </LoaderContainer>
+        ) : (
+          <Alert
+            type="secondary"
+            title={i18n.t(
+              'swapNotFound',
+              { requestId },
+              { message: 'Swap with request ID = ${requestId} not found.' }
+            )}
+          />
+        )}
+      </PlaceholderContainer>
+    </SecondaryPage>
+  );
+}

package/src/components/SwitchFromAndTo.tsx

@@ -1,10 +1,9 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { useInRouterContext, useSearchParams } from 'react-router-dom';
-import { styled, Button, VerticalSwapIcon } from '@rango-dev/ui';
+import { useEffect, useRef } from 'react';
+import { useSearchParams } from 'react-router-dom';
 import { SearchParams } from '../constants/searchParams';
 import { useBestRouteStore } from '../store/bestRoute';
 
-function SwithFromAndTo({ count }: { count: number }) {
+export function SwithFromAndTo({ count }: { count: number }) {
   const firstRender = useRef(true);
   const [searchParams, setSearchParams] = useSearchParams();
   const outputAmount = useBestRouteStore.use.outputAmount();
@@ -20,9 +19,7 @@ function SwithFromAndTo({ count }: { count: number }) {
         ...(toTokenString && { [SearchParams.FROM_TOKEN]: toTokenString }),
         ...(fromChainString && { [SearchParams.TO_CHAIN]: fromChainString }),
         ...(fromTokenString && { [SearchParams.TO_TOKEN]: fromTokenString }),
-        ...(outputAmount && {
-          [SearchParams.FROM_AMOUNT]: outputAmount.toString(),
-        }),
+        ...(outputAmount && { [SearchParams.FROM_AMOUNT]: outputAmount.toString() }),
       });
     } else {
       firstRender.current = false;
@@ -31,30 +28,3 @@ function SwithFromAndTo({ count }: { count: number }) {
 
   return null;
 }
-
-const SwitchButtonContainer = styled('div', {
-  position: 'absolute',
-  bottom: '-12px',
-  left: '50%',
-  transform: 'translate(-50%, 10%)',
-});
-
-export function SwithFromAndToButton() {
-  const switchFromAndTo = useBestRouteStore.use.switchFromAndTo();
-  const isRouterInContext = useInRouterContext();
-  const [count, setCount] = useState(0);
-
-  return (
-    <SwitchButtonContainer>
-      <Button
-        variant="ghost"
-        onClick={() => {
-          switchFromAndTo();
-          setCount((prev) => prev + 1);
-        }}>
-        <VerticalSwapIcon size={32} />
-        {isRouterInContext && <SwithFromAndTo count={count} />}
-      </Button>
-    </SwitchButtonContainer>
-  );
-}

package/src/components/TokenInfo.tsx

@@ -0,0 +1,329 @@
+import React from 'react';
+import {
+  AngleDownIcon,
+  Button,
+  InfoCircleIcon,
+  styled,
+  TextField,
+  Typography,
+  Image,
+  Divider,
+} from '@rango-dev/ui';
+import { useMetaStore } from '../store/meta';
+import { BlockchainMeta, Token } from 'rango-sdk';
+import { useNavigate } from 'react-router-dom';
+import { useBestRouteStore } from '../store/bestRoute';
+import { numberToString } from '../utils/numbers';
+import BigNumber from 'bignumber.js';
+import { getBalanceFromWallet } from '../utils/wallets';
+import { useWalletsStore } from '../store/wallets';
+import { Trans } from '@lingui/react';
+import { i18n } from '@lingui/core';
+import { PercentageChange } from './PercentageChange';
+
+type PropTypes = (
+  | {
+      type: 'From';
+      inputAmount: string;
+      onAmountChange: (amount: string) => void;
+    }
+  | {
+      type: 'To';
+      outputAmount: BigNumber | null;
+      outputUsdValue: BigNumber | null;
+    }
+) & { chain: BlockchainMeta | null; token: Token | null };
+
+const Box = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+  overflow: 'hidden',
+});
+
+const Container = styled('div', {
+  boxSizing: 'border-box',
+  borderRadius: '$5',
+  padding: '$8 $16 $16 $16',
+
+  variants: {
+    type: {
+      filled: {
+        backgroundColor: '$neutral100',
+      },
+      outlined: {
+        border: '1px solid $neutral100',
+        backgroundColor: '$surface',
+      },
+    },
+  },
+
+  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%',
+    },
+  },
+  '.output-usd': {
+    display: 'flex',
+    div: {
+      display: 'flex',
+      paddingLeft: '$8',
+    },
+  },
+});
+
+const Options = styled('div', {
+  display: 'flex',
+  justifyContent: 'flex-end',
+
+  '.balance': {
+    display: 'flex',
+    alignItems: 'center',
+  },
+});
+
+const ImagePlaceholder = styled('span', {
+  width: '24px',
+  height: '24px',
+  backgroundColor: '$neutral100',
+  borderRadius: '99999px',
+});
+
+const OutputContainer = styled('div', {
+  windth: '100%',
+  height: '$48',
+  borderRadius: '$5',
+  backgroundColor: '$surface',
+  border: '1px solid transparent',
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  paddingLeft: '$8',
+  paddingRight: '$8',
+});
+
+export function TokenInfo(props: PropTypes) {
+  const { type, chain, token } = props;
+  const loadingStatus = useMetaStore.use.loadingStatus();
+  const fromChain = useBestRouteStore.use.fromChain();
+  const toChain = useBestRouteStore.use.toChain();
+  const inputUsdValue = useBestRouteStore.use.inputUsdValue();
+  const fromToken = useBestRouteStore.use.fromToken();
+  const setInputAmount = useBestRouteStore.use.setInputAmount();
+  const bestRoute = useBestRouteStore.use.bestRoute();
+  const inputAmount = useBestRouteStore.use.inputAmount();
+  const connectedWallets = useWalletsStore.use.connectedWallets();
+  const fetchingBestRoute = useBestRouteStore.use.loading();
+  const navigate = useNavigate();
+
+  const tokenBalance =
+    !!fromChain && !!fromToken
+      ? numberToString(
+          getBalanceFromWallet(
+            connectedWallets,
+            fromChain?.name,
+            fromToken?.symbol,
+            fromToken?.address
+          )?.amount || '0',
+          8
+        )
+      : '0';
+
+  const tokenBalanceReal =
+    !!fromChain && !!fromToken
+      ? numberToString(
+          getBalanceFromWallet(
+            connectedWallets,
+            fromChain?.name,
+            fromToken?.symbol,
+            fromToken?.address
+          )?.amount || '0',
+          getBalanceFromWallet(
+            connectedWallets,
+            fromChain?.name,
+            fromToken?.symbol,
+            fromToken?.address
+          )?.decimal
+        )
+      : '0';
+
+  const ItemSuffix = (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}>
+      {loadingStatus === 'failed' && <InfoCircleIcon color="error" size={24} />}
+      <AngleDownIcon />
+    </div>
+  );
+
+  return (
+    <Box>
+      <Container type={props.type === 'From' ? 'filled' : 'outlined'}>
+        <div className="head">
+          <Typography variant="body2" color="neutral800">
+            {type === 'From' ? (
+              <Trans id="swap from" message="From" />
+            ) : (
+              <Trans id="swap to" message="To" />
+            )}
+          </Typography>
+          {props.type === 'From' ? (
+            <Options>
+              <div
+                className="balance"
+                onClick={() => {
+                  if (tokenBalance !== '0')
+                    setInputAmount(tokenBalanceReal.split(',').join(''));
+                }}>
+                <Typography variant="body3" color="neutral600">
+                  {i18n.t('Balance')}: {tokenBalance} {fromToken?.symbol || ''}
+                </Typography>
+                <Divider size={4} />
+                <Button type="primary" variant="ghost" size="compact">
+                  <Trans id="maximum amount of asset" message="Max" />
+                </Button>
+              </div>
+            </Options>
+          ) : (
+            <div className="output-usd">
+              <PercentageChange
+                inputUsdValue={inputUsdValue}
+                outputUsdValue={props.outputUsdValue}
+              />
+              <div>
+                <Typography
+                  variant="caption"
+                  color="neutral600">{`$${numberToString(
+                  props.outputUsdValue
+                )}`}</Typography>
+              </div>
+            </div>
+          )}
+        </div>
+        <div className="form">
+          <Button
+            className="selectors"
+            onClick={() => {
+              navigate(`${props.type.toLowerCase()}-chain`);
+            }}
+            variant="outlined"
+            disabled={loadingStatus === 'failed'}
+            loading={loadingStatus === 'loading'}
+            prefix={
+              loadingStatus === 'success' && chain ? (
+                <Image src={chain.logo} size={24} />
+              ) : (
+                <ImagePlaceholder />
+              )
+            }
+            suffix={ItemSuffix}
+            align="start"
+            size="large">
+            {loadingStatus === 'success' && chain
+              ? chain.displayName
+              : i18n.t('Chain')}
+          </Button>
+          <Divider size={12} direction="horizontal" />
+          <Button
+            className="selectors"
+            onClick={() => {
+              navigate(`${props.type.toLowerCase()}-token`);
+            }}
+            variant="outlined"
+            disabled={
+              loadingStatus === 'failed' ||
+              (type === 'From' && !fromChain) ||
+              (type === 'To' && !toChain)
+            }
+            loading={loadingStatus === 'loading'}
+            prefix={
+              loadingStatus === 'success' && token ? (
+                <Image src={token.image} size={24} />
+              ) : (
+                <ImagePlaceholder />
+              )
+            }
+            suffix={ItemSuffix}
+            size="large"
+            align="start">
+            {loadingStatus === 'success' && token
+              ? token.symbol
+              : i18n.t('Token')}
+          </Button>
+          <Divider size={12} direction="horizontal" />
+          <div className="amount">
+            {props.type === 'From' ? (
+              <TextField
+                type="number"
+                size="large"
+                autoFocus
+                placeholder="0"
+                style={{
+                  position: 'relative',
+                  backgroundColor: '$background !important',
+                }}
+                suffix={
+                  <span
+                    style={{
+                      position: 'absolute',
+                      right: '4px',
+                      bottom: '2px',
+                    }}>
+                    <Typography
+                      variant="caption"
+                      color="neutral800">{`$${numberToString(
+                      inputUsdValue
+                    )}`}</Typography>
+                  </span>
+                }
+                value={props.inputAmount || ''}
+                min={0}
+                onChange={
+                  props.type === 'From'
+                    ? (event) => {
+                        props.onAmountChange(event.target.value);
+                      }
+                    : undefined
+                }
+              />
+            ) : (
+              <OutputContainer>
+                <Typography variant="h4">
+                  {fetchingBestRoute && '?'}
+                  {!!bestRoute?.result &&
+                    `≈ ${numberToString(props.outputAmount)}`}
+                  {(!inputAmount || inputAmount === '0') && '0'}
+                </Typography>
+              </OutputContainer>
+            )}
+          </div>
+        </div>
+      </Container>
+    </Box>
+  );
+}