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

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>
+  );
+}

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/hooks/useWalletProviders.ts

@@ -1,4 +1,4 @@
-import { ProviderInterface } from '@rango-dev/wallets-react';
+import { ProviderInterface } from '@rango-dev/wallets-core';
 import { useEffect } from 'react';
 import { useWalletsStore } from '../store/wallets';
 import { WidgetConfig } from '../types';

package/src/index.ts

@@ -11,7 +11,7 @@ import {
   useWallets,
   ProviderInterface,
   EventHandler as HandleWalletsUpdate,
-} from '@rango-dev/wallets-react';
+} from '@rango-dev/wallets-core';
 import {
   useEvents as useWidgetEvents,
   MainEvents,

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

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useBestRouteStore } from '../store/bestRoute';
 import { useWalletsStore } from '../store/wallets';
-import { useWallets } from '@rango-dev/wallets-react';
+import { useWallets } from '@rango-dev/wallets-core';
 import { i18n } from '@lingui/core';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import {
@@ -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}
+              />
             }
           />
         </>