@rango-dev/widget-embedded 0.11.1-next.3 → 0.12.0

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,17 +3,13 @@ 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,
   PendingSwapNetworkStatus,
 } from '@rango-dev/queue-manager-rango-preset';
-import { useWallets } from '@rango-dev/wallets-react';
+import { useWallets } from '@rango-dev/wallets-core';
 import {
   getCurrentBlockchainOfOrNull,
   getCurrentStep,
@@ -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/pages/WalletsPage.tsx

@@ -13,7 +13,7 @@ import {
   WalletTypes,
   detectMobileScreens,
 } from '@rango-dev/wallets-shared';
-import { useWallets } from '@rango-dev/wallets-react';
+import { useWallets } from '@rango-dev/wallets-core';
 
 import { useUiStore } from '../store/ui';
 import { useNavigateBack } from '../hooks/useNavigateBack';

package/src/types/config.ts

@@ -1,6 +1,6 @@
 import { Asset } from 'rango-sdk';
 import { WalletType } from '@rango-dev/wallets-shared';
-import { ProviderInterface } from '@rango-dev/wallets-react';
+import { ProviderInterface } from '@rango-dev/wallets-core';
 import { Language } from '@rango-dev/ui';
 
 /**

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('');
 };

package/src/utils/providers.ts

@@ -1,5 +1,5 @@
 import { allProviders } from '@rango-dev/provider-all';
-import { ProviderInterface } from '@rango-dev/wallets-react';
+import { ProviderInterface } from '@rango-dev/wallets-core';
 import { WidgetConfig } from '../types';
 
 export interface ProvidersOptions {

package/src/utils/wallets.ts

@@ -23,7 +23,7 @@ import {
   WalletDetail,
 } from 'rango-sdk';
 import { isCosmosBlockchain } from 'rango-types';
-import { readAccountAddress } from '@rango-dev/wallets-react';
+import { readAccountAddress } from '@rango-dev/wallets-core';
 import { ConnectedWallet, TokenBalance } from '../store/wallets';
 import { numberToString } from './numbers';
 import BigNumber from 'bignumber.js';