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

package/src/components/TokenPreview.tsx

@@ -0,0 +1,187 @@
+import React, { ReactNode } from 'react';
+import {
+  Button,
+  InfoCircleIcon,
+  styled,
+  Typography,
+  Divider,
+  Image,
+} from '@rango-dev/ui';
+import { LoadingStatus } from '../store/meta';
+import { i18n } from '@lingui/core';
+import BigNumber from 'bignumber.js';
+import { numberToString } from '../utils/numbers';
+
+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',
+      },
+    },
+  },
+
+  defaultVariants: {
+    type: 'filled',
+  },
+
+  '.head': {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    minHeight: '32px',
+    '.usd-value': {
+      paddingLeft: '$8',
+    },
+  },
+  '.form': {
+    display: 'flex',
+    width: '100%',
+    padding: '$2 0',
+    '.selectors': {
+      width: '35%',
+
+      '._text': {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+      },
+    },
+    '.amount': {
+      width: '30%',
+    },
+  },
+});
+
+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',
+});
+
+interface PropTypes {
+  label: string;
+  amount: string;
+  usdValue: BigNumber | null;
+  loadingStatus: LoadingStatus;
+  chain: {
+    displayName: string;
+    logo: string;
+  };
+  token: {
+    symbol: string;
+    image: string;
+  };
+  percentageChange?: ReactNode;
+}
+
+export function TokenPreview(props: PropTypes) {
+  const { chain, token, loadingStatus, percentageChange } = props;
+
+  const ItemSuffix = (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}>
+      {loadingStatus === 'failed' && <InfoCircleIcon color="error" size={24} />}
+    </div>
+  );
+
+  return (
+    <Box>
+      <Container type={'outlined'}>
+        <div className="head">
+          <Typography variant="body2" color="neutral800">
+            {props.label}
+          </Typography>
+          <div>
+            {percentageChange}
+            {props.usdValue && (
+              <Typography
+                variant="caption"
+                color="neutral600"
+                className="usd-value">{`$${numberToString(
+                props.usdValue
+              )}`}</Typography>
+            )}
+          </div>
+        </div>
+        <div className="form">
+          <Button
+            className="selectors"
+            variant="outlined"
+            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"
+            variant="outlined"
+            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">
+            <OutputContainer>
+              <Typography variant="h4">{props.amount}</Typography>
+            </OutputContainer>
+          </div>
+        </div>
+      </Container>
+    </Box>
+  );
+}

package/src/languages/en.json

@@ -0,0 +1,14 @@
+{
+  "swap": "SWAP",
+  "Connect Wallet": "Connect Wallet",
+  "Powered By": "Powered By",
+  "From": "You sell",
+  "To": "You receive",
+  "Balance": "Balance",
+  "Max": "Max",
+  "Chain": "Chain",
+  "Token": "Token",
+  "Source": "Source",
+  "Destination": "Destination",
+  "Select Wallet": "Connect Your Wallet"
+}

package/src/languages/tr.json

@@ -0,0 +1,11 @@
+{
+    "swap": "TAKAS",
+    "Select Wallet":"Cüzdan Seç",
+    "Powered By" :"Tarafından desteklenmektedir",
+    "Connect Wallet":"Cüzdanı Bağla",
+    "From":"İtibaren",
+    "To":"İle",
+    "Max":"maks.",
+    "Chain": "Zincir",
+    "Token": "Jeton"
+}

package/src/pages/ConfirmSwapPage.tsx

@@ -13,7 +13,6 @@ import {
 } from '../utils/wallets';
 import {
   confirmSwapDisabled,
-  getPercentageChange,
   getTotalFeeInUsd,
   isValidCustomDestination,
 } from '../utils/swap';
@@ -21,15 +20,14 @@ import { numberToString } from '../utils/numbers';
 import { useMetaStore } from '../store/meta';
 import { WalletType } from '@rango-dev/wallets-shared';
 import { useNavigateBack } from '../hooks/useNavigateBack';
+import { TokenPreview } from '../components/TokenPreview';
 import {
   Divider,
   ConfirmSwap,
   LoadingFailedAlert,
   HighSlippageWarning,
-  PercentageChange,
-  RoutesOverview,
-  TokenPreview,
 } from '@rango-dev/ui';
+import RoutesOverview from '../components/RoutesOverview';
 import { useManager } from '@rango-dev/queue-manager-react';
 import { useConfirmSwap } from '../hooks/useConfirmSwap';
 import { useSettingsStore } from '../store/settings';
@@ -39,6 +37,7 @@ import { ConfirmSwapErrors } from '../components/ConfirmSwapErrors';
 import { ConfirmSwapWarnings } from '../components/ConfirmSwapWarnings';
 import { HIGH_SLIPPAGE } from '../constants/swapSettings';
 import { getBestRouteStatus } from '../utils/routing';
+import { PercentageChange } from '../components/PercentageChange';
 
 export function ConfirmSwapPage({
   customDestinationEnabled,
@@ -121,14 +120,6 @@ export function ConfirmSwapPage({
 
   const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
 
-  const percentageChange =
-    !inputUsdValue || !outputUsdValue || !outputUsdValue.gt(0)
-      ? null
-      : getPercentageChange(
-          inputUsdValue.toNumber(),
-          outputUsdValue.toNumber()
-        );
-
   return (
     <ConfirmSwap
       requiredWallets={getRequiredChains(bestRoute)}
@@ -191,7 +182,7 @@ export function ConfirmSwapPage({
               symbol: firstStep?.from.symbol || '',
               image: firstStep?.from.logo || '',
             }}
-            usdValue={inputUsdValue ? numberToString(inputUsdValue) : null}
+            usdValue={inputUsdValue}
             amount={fromAmount}
             label={i18n.t('From')}
             loadingStatus={
@@ -210,7 +201,7 @@ export function ConfirmSwapPage({
               symbol: lastStep?.to.symbol || '',
               image: lastStep?.to.logo || '',
             }}
-            usdValue={outputUsdValue ? numberToString(outputUsdValue) : null}
+            usdValue={outputUsdValue}
             amount={toAmount}
             label={i18n.t('To')}
             loadingStatus={
@@ -219,12 +210,10 @@ export function ConfirmSwapPage({
                 : bestRouteloadingStatus
             }
             percentageChange={
-              !percentageChange ? null : (
-                <PercentageChange
-                  percentageChange={numberToString(percentageChange, 0, 2)}
-                  showPercentageChange={!!percentageChange?.lt(0)}
-                />
-              )
+              <PercentageChange
+                inputUsdValue={inputUsdValue}
+                outputUsdValue={outputUsdValue}
+              />
             }
           />
         </>

package/src/pages/Home.tsx

@@ -1,8 +1,20 @@
-import React, { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { HomePanel } from '@rango-dev/ui';
+import {
+  Alert,
+  BestRoute,
+  BottomLogo,
+  Button,
+  styled,
+  Typography,
+  VerticalSwapIcon,
+  Header,
+  HeaderButtons,
+} from '@rango-dev/ui';
+import React, { useEffect, useState } from 'react';
+import { i18n } from '@lingui/core';
+import { useInRouterContext, useNavigate } from 'react-router-dom';
+import { TokenInfo } from '../components/TokenInfo';
 import { fetchBestRoute, useBestRouteStore } from '../store/bestRoute';
-import { SwithFromAndToButton } from '../components/SwitchFromAndTo';
+import { SwithFromAndTo } from '../components/SwitchFromAndTo';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { useMetaStore } from '../store/meta';
 import { useWalletsStore } from '../store/wallets';
@@ -16,20 +28,54 @@ import {
   LimitErrorMessage,
   getTotalFeeInUsd,
   hasHighFee,
-  getPercentageChange,
 } from '../utils/swap';
-import { useUiStore } from '../store/ui';
 import {
   numberToString,
   secondsToString,
   totalArrivalTime,
 } from '../utils/numbers';
-import { getBalanceFromWallet } from '../utils/wallets';
-import { getFormatedBestRoute } from '../utils/routing';
 import BigNumber from 'bignumber.js';
+import { useUiStore } from '../store/ui';
+import { getFormatedBestRoute } from '../utils/routing';
+
+const Container = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+const FromContainer = styled('div', {
+  position: 'relative',
+  paddingBottom: '$12',
+});
+
+const SwitchButtonContainer = styled('div', {
+  position: 'absolute',
+  bottom: '-12px',
+  left: '50%',
+  transform: 'translate(-50%, 10%)',
+});
+
+const BestRouteContainer = styled('div', {
+  width: '100%',
+  paddingTop: '$16',
+});
+
+const Alerts = styled('div', {
+  width: '100%',
+  paddingTop: '$16',
+});
+
+const Footer = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+  paddingTop: '$16',
+});
 
 export function Home() {
+  const isRouterInContext = useInRouterContext();
   const navigate = useNavigate();
+  const [count, setCount] = useState(0);
   const fromChain = useBestRouteStore.use.fromChain();
   const fromToken = useBestRouteStore.use.fromToken();
   const toChain = useBestRouteStore.use.toChain();
@@ -46,6 +92,7 @@ export function Home() {
   const loadingMetaStatus = useMetaStore.use.loadingStatus();
   const connectedWallets = useWalletsStore.use.connectedWallets();
   const setCurrentPage = useUiStore.use.setCurrentPage();
+  const switchFromAndTo = useBestRouteStore.use.switchFromAndTo();
 
   const errorMessage =
     loadingMetaStatus === 'failed'
@@ -55,7 +102,7 @@ export function Home() {
   const needsToWarnEthOnPath = false;
 
   const showBestRoute =
-    !!inputAmount && (!!bestRoute || fetchingBestRoute || !!bestRouteError);
+    inputAmount && (!!bestRoute || fetchingBestRoute || bestRouteError);
 
   const outToInRatio = getOutputRatio(inputUsdValue, outputUsdValue);
 
@@ -87,105 +134,101 @@ export function Home() {
 
   const highFee = hasHighFee(totalFeeInUsd);
 
-  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';
-
   useEffect(() => {
     setCurrentPage(navigationRoutes.home);
 
     return setCurrentPage.bind(null, '');
   }, []);
 
-  const percentageChange =
-    !inputUsdValue || !outputUsdValue || !outputUsdValue.gt(0)
-      ? null
-      : getPercentageChange(
-          inputUsdValue.toNumber(),
-          outputUsdValue.toNumber()
-        );
-
   return (
-    <HomePanel
-      bestRoute={bestRoute}
-      bestRouteError={bestRouteError}
-      fetchBestRoute={fetchBestRoute}
-      onClickHistory={() => navigate(navigationRoutes.swaps)}
-      onClickSettings={() => navigate(navigationRoutes.settings)}
-      setInputAmount={setInputAmount}
-      fromChain={fromChain}
-      toChain={toChain}
-      fromToken={fromToken}
-      toToken={toToken}
-      outputAmount={
-        outputAmount
-          ? numberToString(new BigNumber(outputAmount))
-          : numberToString(new BigNumber(0))
-      }
-      inputAmount={inputAmount}
-      loadingStatus={loadingMetaStatus}
-      showBestRoute={showBestRoute}
-      fetchingBestRoute={fetchingBestRoute}
-      outputUsdValue={numberToString(outputUsdValue)}
-      inputUsdValue={numberToString(inputUsdValue)}
-      swapButtonTitle={swapButtonState.title}
-      swapButtonDisabled={swapButtonState.disabled}
-      swapButtonClick={() => {
-        if (swapButtonState.title === 'Connect Wallet')
-          navigate(navigationRoutes.wallets);
-        else {
-          navigate(navigationRoutes.confirmSwap, { replace: true });
+    <Container>
+      <Header
+        title={i18n.t('SWAP')}
+        suffix={
+          <HeaderButtons
+            onClickRefresh={
+              !!bestRoute || bestRouteError ? fetchBestRoute : undefined
+            }
+            onClickHistory={() => navigate(navigationRoutes.swaps)}
+            onClickSettings={() => navigate(navigationRoutes.settings)}
+          />
+        }
+      />
+      <FromContainer>
+        <TokenInfo
+          type="From"
+          chain={fromChain}
+          token={fromToken}
+          onAmountChange={setInputAmount}
+          inputAmount={inputAmount}
+        />
+        <SwitchButtonContainer>
+          <Button
+            variant="ghost"
+            onClick={() => {
+              switchFromAndTo();
+              setCount((prev) => prev + 1);
+            }}>
+            <VerticalSwapIcon size={32} />
+            {isRouterInContext && <SwithFromAndTo count={count} />}
+          </Button>
+        </SwitchButtonContainer>
+      </FromContainer>
+      <TokenInfo
+        type="To"
+        chain={toChain}
+        token={toToken}
+        outputAmount={
+          outputAmount ? new BigNumber(outputAmount) : new BigNumber(0)
         }
-      }}
-      onChainClick={(route) => {
-        navigate(route);
-      }}
-      onTokenClick={(route) => {
-        navigate(route);
-      }}
-      highFee={highFee}
-      errorMessage={errorMessage}
-      hasLimitError={hasLimitError}
-      swap={swap}
-      fromAmountRangeError={fromAmountRangeError}
-      recommendation={recommendation}
-      totalFeeInUsd={numberToString(totalFeeInUsd, 0, 2)}
-      swithFromAndToComponent={<SwithFromAndToButton />}
-      connectedWallets={connectedWallets}
-      percentageChange={numberToString(percentageChange, 0, 2)}
-      showPercentageChange={!!percentageChange?.lt(0)}
-      tokenBalanceReal={tokenBalanceReal}
-      tokenBalance={tokenBalance}
-      totalTime={secondsToString(totalArrivalTime(bestRoute))}
-      bestRouteData={getFormatedBestRoute(bestRoute)}
-      swapFromAmount={numberToString(swap?.fromAmount || null)}
-    />
+        outputUsdValue={outputUsdValue}
+      />
+      {showBestRoute && (
+        <BestRouteContainer>
+          <BestRoute
+            error={bestRouteError}
+            loading={fetchingBestRoute}
+            data={getFormatedBestRoute(bestRoute)}
+            totalFee={numberToString(totalFeeInUsd, 0, 2)}
+            feeWarning={highFee}
+            totalTime={secondsToString(totalArrivalTime(bestRoute))}
+          />
+        </BestRouteContainer>
+      )}
+      {(errorMessage || hasLimitError(bestRoute)) && (
+        <Alerts>
+          {errorMessage && <Alert type="error">{errorMessage}</Alert>}
+          {hasLimitError(bestRoute) && (
+            <Alert type="error" title={`${swap?.swapperId} Limit`}>
+              <>
+                <Typography variant="body2">
+                  {`${fromAmountRangeError}, Yours: ${numberToString(
+                    swap?.fromAmount || null
+                  )} ${swap?.from.symbol}`}
+                </Typography>
+                <Typography variant="body2">{recommendation}</Typography>
+              </>
+            </Alert>
+          )}
+        </Alerts>
+      )}
+      <Footer>
+        <Button
+          type="primary"
+          align="grow"
+          size="large"
+          disabled={swapButtonState.disabled}
+          onClick={() => {
+            if (swapButtonState.title === 'Connect Wallet')
+              navigate(navigationRoutes.wallets);
+            else {
+              navigate(navigationRoutes.confirmSwap, { replace: true });
+            }
+          }}>
+          {swapButtonState.title}
+        </Button>
+        <BottomLogo />
+      </Footer>
+    </Container>
   );
 }

package/src/pages/SwapDetailsPage.tsx

@@ -3,11 +3,7 @@ import { navigationRoutes } from '../constants/navigationRoutes';
 import { useManager } from '@rango-dev/queue-manager-react';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { getPendingSwaps } from '../utils/queue';
-import {
-  SwapHistory,
-  useCopyToClipboard,
-  SwapDetailsPlaceholder,
-} from '@rango-dev/ui';
+import { SwapHistory, useCopyToClipboard } from '@rango-dev/ui';
 import { useUiStore } from '../store/ui';
 import {
   cancelSwap,
@@ -28,6 +24,7 @@ import {
   isNetworkStatusInWarningState,
   shouldRetrySwap,
 } from '../utils/swap';
+import { SwapDetailsPlaceholder } from '../components/SwapDetailsPlaceholder';
 import { getFormatedPendingSwap } from '../utils/routing';
 
 export function SwapDetailsPage() {

package/src/utils/numbers.ts

@@ -3,7 +3,6 @@ import { BestRouteResponse } from 'rango-sdk';
 
 export const percentToString = (p: number, fractions = 0): string =>
   (p * 100).toFixed(fractions);
-
 export const secondsToString = (s: number): string => {
   const seconds = (s % 60).toString().padStart(2, '0');
   const minutes = parseInt((s / 60).toString())
@@ -88,7 +87,6 @@ export const convertBigNumberToHex = (
 
 export const uint8ArrayToHex = (buffer: Uint8Array): string => {
   // buffer is an ArrayBuffer
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   return [...buffer].map((x) => x.toString(16).padStart(2, '0')).join('');
 };