@rango-dev/widget-embedded 0.1.10-next.100

package/src/components/Layout.tsx

@@ -0,0 +1,96 @@
+import { Button, AddWalletIcon, Typography, styled } from '@rango-dev/ui';
+import React, { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useWallets } from '@rango-dev/wallets-core';
+import { navigationRoutes } from '../constants/navigationRoutes';
+import { useUiStore } from '../store/ui';
+import { AppRoutes } from './AppRoutes';
+import { useWalletsStore } from '../store/wallets';
+import {
+  calculateWalletUsdValue,
+  getSelectableWallets,
+} from '../utils/wallets';
+import { removeDuplicateFrom } from '../utils/common';
+import { Configs } from '../types';
+import { useTranslation } from 'react-i18next';
+import { useBestRouteStore } from '../store/bestRoute';
+
+const Header = styled('div', {
+  display: 'flex',
+  width: '100%',
+  justifyContent: 'end',
+});
+
+const WalletImage = styled('img', {
+  width: '$24',
+  height: '$24',
+  marginLeft: -15,
+  marginRight: '$6',
+  borderRadius: '99999px',
+});
+
+export type LayoutProps = {
+  configs?: Configs;
+};
+
+export function Layout({ configs }: LayoutProps) {
+  const navigate = useNavigate();
+  const { balances, accounts, selectedWallets } = useWalletsStore();
+  const { getWalletInfo } = useWallets();
+  const connectedWalletsImages = removeDuplicateFrom(
+    getSelectableWallets(accounts, selectedWallets, getWalletInfo).map(
+      (w) => w.image
+    )
+  );
+
+  const setFromChain = useBestRouteStore.use.setFromChain();
+  const setFromToken = useBestRouteStore.use.setFromToken();
+  const setToChain = useBestRouteStore.use.setToChain();
+  const setToToken = useBestRouteStore.use.setToToken();
+  const setInputAmount = useBestRouteStore.use.setInputAmount();
+
+  const totalBalance = calculateWalletUsdValue(balances);
+  const connectWalletsButtonDisabled =
+    useUiStore.use.connectWalletsButtonDisabled();
+  const { t } = useTranslation();
+  useEffect(() => {
+    setToChain(configs?.toChain || null);
+    setToToken(configs?.toToken || null);
+  }, [configs?.toChain, configs?.toToken]);
+  useEffect(() => {
+    setInputAmount(configs?.fromAmount?.toString() || '');
+  }, [configs?.fromAmount]);
+
+  useEffect(() => {
+    setFromToken(configs?.fromToken || null);
+    setFromChain(configs?.fromChain || null);
+  }, [configs?.fromToken, configs?.fromChain]);
+  return (
+    <>
+      <Header>
+        <Button
+          size="small"
+          suffix={<AddWalletIcon size={20} />}
+          variant="ghost"
+          flexContent
+          onClick={() => {
+            if (!connectWalletsButtonDisabled)
+              navigate(navigationRoutes.wallets);
+          }}
+        >
+          {connectedWalletsImages?.length ? (
+            connectedWalletsImages.map((walletImage, index) => (
+              <WalletImage key={index} src={walletImage} />
+            ))
+          ) : (
+            <></>
+          )}
+          <Typography variant="body2">
+            {!accounts?.length ? t('Connect Wallet') : `$${totalBalance || 0}`}
+          </Typography>
+        </Button>
+      </Header>
+      <AppRoutes configs={configs} />
+    </>
+  );
+}

package/src/components/RoutesOverview.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { styled } from '@rango-dev/ui';
+import { BestRouteResponse } from 'rango-sdk';
+import { ChevronRightIcon } from '@rango-dev/ui';
+import { GasIcon } from '@rango-dev/ui';
+import { Spacer } from '@rango-dev/ui';
+
+export const Container = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: '$8',
+  borderRadius: '$5',
+  backgroundColor: '$neutrals300',
+  color: '$neutrals800',
+  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 (
+            <>
+              <div className="route">{swap.from.symbol}</div>
+              <ChevronRightIcon size={12} />
+              {isLast ? <div className="route">{swap.to.symbol}</div> : null}
+            </>
+          );
+        })}
+      </div>
+      {props.totalFee ? (
+        <div className="fee">
+          <GasIcon size={12} />
+          <Spacer size={4} />${props.totalFee}
+        </div>
+      ) : null}
+    </Container>
+  );
+}
+
+export default RoutesOverview;

package/src/components/SwitchFromAndTo.tsx

@@ -0,0 +1,30 @@
+import { useEffect, useRef } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { SearchParams } from '../constants/searchParams';
+import { useBestRouteStore } from '../store/bestRoute';
+
+export function SwithFromAndTo({ count }: { count: number }) {
+  const firstRender = useRef(true);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const outputAmount = useBestRouteStore.use.outputAmount();
+
+  useEffect(() => {
+    if (!firstRender.current) {
+      const fromChainString = searchParams.get(SearchParams.FROM_CHAIN);
+      const fromTokenString = searchParams.get(SearchParams.FROM_TOKEN);
+      const toChainString = searchParams.get(SearchParams.TO_CHAIN);
+      const toTokenString = searchParams.get(SearchParams.TO_TOKEN);
+      setSearchParams({
+        ...(toChainString && { [SearchParams.FROM_CHAIN]: toChainString }),
+        ...(toTokenString && { [SearchParams.FROM_TOKEN]: toTokenString }),
+        ...(fromChainString && { [SearchParams.TO_CHAIN]: fromChainString }),
+        ...(fromTokenString && { [SearchParams.TO_TOKEN]: fromTokenString }),
+        ...(outputAmount && { [SearchParams.FROM_AMOUNT]: outputAmount.toString() }),
+      });
+    } else {
+      firstRender.current = false;
+    }
+  }, [count]);
+
+  return null;
+}

package/src/components/TokenInfo.tsx

@@ -0,0 +1,311 @@
+import React from 'react';
+import {
+  AngleDownIcon,
+  Button,
+  InfoCircleIcon,
+  styled,
+  TextField,
+  Typography,
+} 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 { useTranslation } from 'react-i18next';
+import { Spacer } from '@rango-dev/ui';
+
+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%',
+});
+
+const Container = styled('div', {
+  boxSizing: 'border-box',
+  borderRadius: '$5',
+  padding: '$8 $16 $16 $16',
+
+  variants: {
+    type: {
+      filled: {
+        backgroundColor: '$neutrals300',
+      },
+      outlined: {
+        border: '1px solid $neutrals300',
+      },
+    },
+  },
+
+  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%',
+    },
+  },
+});
+
+const StyledImage = styled('img', {
+  width: '$24',
+  maxHeight: '$24',
+});
+
+const Options = styled('div', {
+  display: 'flex',
+  justifyContent: 'flex-end',
+
+  '.balance': {
+    display: 'flex',
+    alignItems: 'center',
+  },
+});
+
+const ImagePlaceholder = styled('span', {
+  width: '24px',
+  height: '24px',
+  backgroundColor: '$neutrals300',
+  borderRadius: '99999px',
+});
+
+const OutputContainer = styled('div', {
+  windth: '100%',
+  height: '$48',
+  borderRadius: '$5',
+  backgroundColor: '$background',
+  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 balances = useWalletsStore.use.balances();
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+
+  const tokenBalance =
+    !!fromChain && !!fromToken
+      ? numberToString(
+          getBalanceFromWallet(
+            balances,
+            fromChain?.name,
+            fromToken?.symbol,
+            fromToken?.address
+          )?.amount || '0',
+          8
+        )
+      : '0';
+
+  const tokenBalanceReal =
+    !!fromChain && !!fromToken
+      ? numberToString(
+          getBalanceFromWallet(
+            balances,
+            fromChain?.name,
+            fromToken?.symbol,
+            fromToken?.address
+          )?.amount || '0',
+          getBalanceFromWallet(
+            balances,
+            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="neutrals800">
+            {t(type)}
+          </Typography>
+          {props.type === 'From' ? (
+            <Options>
+              <div
+                className="balance"
+                onClick={() => {
+                  if (tokenBalance !== '0')
+                    setInputAmount(tokenBalanceReal.split(',').join(''));
+                }}
+              >
+                <Typography variant="body3" color="neutrals600">{`${t(
+                  'Balance'
+                )}: ${tokenBalance} ${fromToken?.symbol || ''}`}</Typography>
+                <Spacer size={4} />
+                <Button type="primary" variant="ghost" size="compact">
+                  {t('Max')}
+                </Button>
+              </div>
+            </Options>
+          ) : (
+            <Typography
+              variant="caption"
+              color="neutrals600"
+            >{`$${numberToString(props.outputUsdValue)}`}</Typography>
+          )}
+        </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 ? (
+                <StyledImage src={chain.logo} />
+              ) : (
+                <ImagePlaceholder />
+              )
+            }
+            suffix={ItemSuffix}
+            align="start"
+            size="large"
+          >
+            {loadingStatus === 'success' && chain
+              ? chain.displayName
+              : t('Chain')}
+          </Button>
+          <Spacer size={12} />
+          <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 ? (
+                <StyledImage src={token.image} />
+              ) : (
+                <ImagePlaceholder />
+              )
+            }
+            suffix={ItemSuffix}
+            size="large"
+            align="start"
+          >
+            {loadingStatus === 'success' && token ? token.symbol : t('Token')}
+          </Button>
+          <Spacer size={12} />
+          <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="neutrals800"
+                    >{`$${numberToString(inputUsdValue)}`}</Typography>
+                  </span>
+                }
+                value={props.inputAmount || ''}
+                onChange={
+                  props.type === 'From'
+                    ? (event) => {
+                        props.onAmountChange(event.target.value);
+                      }
+                    : undefined
+                }
+              />
+            ) : (
+              <OutputContainer>
+                <Typography variant="h4">
+                  {bestRoute
+                    ? `≈ ${numberToString(props.outputAmount)}`
+                    : inputAmount
+                    ? '?'
+                    : '0'}
+                </Typography>
+              </OutputContainer>
+            )}
+          </div>
+        </div>
+      </Container>
+    </Box>
+  );
+}

package/src/components/TokenPreview.tsx

@@ -0,0 +1,175 @@
+import React from 'react';
+import { Button, InfoCircleIcon, styled, Typography } from '@rango-dev/ui';
+import { LoadingStatus } from '../store/meta';
+import { useTranslation } from 'react-i18next';
+import { Spacer } from '@rango-dev/ui';
+import BigNumber from 'bignumber.js';
+import { numberToString } from '../utils/numbers';
+
+const Box = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+});
+
+const Container = styled('div', {
+  boxSizing: 'border-box',
+  borderRadius: '$5',
+  padding: '$8 $16 $16 $16',
+
+  variants: {
+    type: {
+      filled: {
+        backgroundColor: '$neutrals300',
+      },
+      outlined: {
+        border: '1px solid $neutrals300',
+      },
+    },
+  },
+
+  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%',
+    },
+  },
+});
+
+const StyledImage = styled('img', {
+  width: '$24',
+  maxHeight: '$24',
+});
+
+const ImagePlaceholder = styled('span', {
+  width: '24px',
+  height: '24px',
+  backgroundColor: '$neutrals300',
+  borderRadius: '99999px',
+});
+
+const OutputContainer = styled('div', {
+  windth: '100%',
+  height: '$48',
+  borderRadius: '$5',
+  backgroundColor: '$background',
+  border: '1px solid transparent',
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  paddingLeft: '$8',
+  paddingRight: '$8',
+});
+
+interface PropTypes {
+  label: string;
+  amount: string;
+  usdValue: BigNumber;
+  loadingStatus: LoadingStatus;
+  chain: {
+    displayName: string;
+    logo: string;
+  };
+  token: {
+    symbol: string;
+    image: string;
+  };
+}
+
+export function TokenPreview(props: PropTypes) {
+  const { chain, token, loadingStatus } = props;
+  const { t } = useTranslation();
+
+  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="neutrals800">
+            {props.label}
+          </Typography>
+          <Typography variant="caption" color="neutrals600">{`$${numberToString(
+            props.usdValue
+          )}`}</Typography>
+        </div>
+        <div className="form">
+          <Button
+            className="selectors"
+            variant="outlined"
+            loading={loadingStatus === 'loading'}
+            prefix={
+              loadingStatus === 'success' && chain ? (
+                <StyledImage src={chain.logo} />
+              ) : (
+                <ImagePlaceholder />
+              )
+            }
+            suffix={ItemSuffix}
+            align="start"
+            size="large"
+          >
+            {loadingStatus === 'success' && chain
+              ? chain.displayName
+              : t('Chain')}
+          </Button>
+          <Spacer size={12} />
+          <Button
+            className="selectors"
+            variant="outlined"
+            loading={loadingStatus === 'loading'}
+            prefix={
+              loadingStatus === 'success' && token ? (
+                <StyledImage src={token.image} />
+              ) : (
+                <ImagePlaceholder />
+              )
+            }
+            suffix={ItemSuffix}
+            size="large"
+            align="start"
+          >
+            {loadingStatus === 'success' && token ? token.symbol : t('Token')}
+          </Button>
+          <Spacer size={12} />
+          <div className="amount">
+            <OutputContainer>
+              <Typography variant="h4">{props.amount}</Typography>
+            </OutputContainer>
+          </div>
+        </div>
+      </Container>
+    </Box>
+  );
+}