@rango-dev/ui 0.13.0 → 0.13.1-next.0

package/src/containers/HomePanel/HomePanel.tsx

@@ -0,0 +1,228 @@
+import {
+  Alert,
+  BestRoute,
+  BottomLogo,
+  Button,
+  styled,
+  Typography,
+  Header,
+  HeaderButtons,
+  TokenInfo,
+  ConnectedWallet,
+} from '../..';
+import React from 'react';
+import { i18n } from '@lingui/core';
+import { BestRouteResponse, BlockchainMeta, SwapResult } from 'rango-sdk';
+import { LoadingStatus, TokenWithBalance } from '../../types/meta';
+
+const Container = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+const FromContainer = styled('div', {
+  position: 'relative',
+  paddingBottom: '$12',
+});
+
+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',
+});
+
+interface HomePanelProps {
+  bestRoute: BestRouteResponse | null;
+  bestRouteError: string;
+  fetchBestRoute: () => void;
+  onClickHistory: () => void;
+  onClickSettings: () => void;
+  fromChain: BlockchainMeta | null;
+  toChain: BlockchainMeta | null;
+  fromToken: TokenWithBalance | null;
+  toToken: TokenWithBalance | null;
+  setInputAmount: (amount: string) => void;
+  outputAmount: string;
+  outputUsdValue: string;
+  inputUsdValue: string;
+  inputAmount: string;
+  loadingStatus: LoadingStatus;
+  showBestRoute: boolean;
+  fetchingBestRoute: boolean;
+  swapButtonTitle: string;
+  swapButtonDisabled: boolean;
+  swapButtonClick: () => void;
+  onChainClick: (route: 'from-chain' | 'to-chain') => void;
+  onTokenClick: (route: 'from-token' | 'to-token') => void;
+  connectedWallets: ConnectedWallet[];
+  highFee: boolean;
+  errorMessage: string;
+  hasLimitError: (bestRoute: BestRouteResponse | null) => boolean;
+  swap: SwapResult | null;
+  swapFromAmount: string | null;
+  fromAmountRangeError: string;
+  recommendation: string;
+  totalFeeInUsd: string;
+  swithFromAndToComponent: React.ReactNode;
+  percentageChange: string;
+  tokenBalanceReal: string;
+  tokenBalance: string;
+  totalTime: string;
+  bestRouteData: BestRouteResponse | null;
+  showPercentageChange: boolean;
+}
+
+export function HomePanel({
+  bestRoute,
+  bestRouteError,
+  fetchBestRoute,
+  onClickHistory,
+  onClickSettings,
+  fromChain,
+  toChain,
+  fromToken,
+  toToken,
+  setInputAmount,
+  outputAmount,
+  inputAmount,
+  loadingStatus,
+  showBestRoute,
+  fetchingBestRoute,
+  outputUsdValue,
+  inputUsdValue,
+  swapButtonTitle,
+  swapButtonDisabled,
+  swapButtonClick,
+  onChainClick,
+  onTokenClick,
+  connectedWallets,
+  highFee,
+  errorMessage,
+  hasLimitError,
+  swap,
+  fromAmountRangeError,
+  recommendation,
+  totalFeeInUsd,
+  swithFromAndToComponent,
+  percentageChange,
+  tokenBalanceReal,
+  tokenBalance,
+  totalTime,
+  bestRouteData,
+  swapFromAmount,
+  showPercentageChange,
+}: HomePanelProps) {
+  return (
+    <Container>
+      <Header
+        title={i18n.t('SWAP')}
+        suffix={
+          <HeaderButtons
+            onClickRefresh={
+              !!bestRoute || bestRouteError ? fetchBestRoute : undefined
+            }
+            onClickHistory={onClickHistory}
+            onClickSettings={onClickSettings}
+          />
+        }
+      />
+      <FromContainer>
+        <>
+          <TokenInfo
+            type="From"
+            chain={fromChain}
+            token={fromToken}
+            onAmountChange={setInputAmount}
+            inputAmount={inputAmount}
+            fromChain={fromChain}
+            toChain={toChain}
+            loadingStatus={loadingStatus}
+            inputUsdValue={inputUsdValue}
+            fromToken={fromToken}
+            setInputAmount={setInputAmount}
+            connectedWallets={connectedWallets}
+            bestRoute={bestRoute}
+            fetchingBestRoute={fetchingBestRoute}
+            onChainClick={() => onChainClick('from-chain')}
+            onTokenClick={() => onTokenClick('from-token')}
+            tokenBalanceReal={tokenBalanceReal}
+            tokenBalance={tokenBalance}
+          />
+          {swithFromAndToComponent}
+        </>
+      </FromContainer>
+      <TokenInfo
+        type="To"
+        chain={toChain}
+        token={toToken}
+        outputAmount={outputAmount}
+        percentageChange={percentageChange}
+        outputUsdValue={outputUsdValue}
+        fromChain={fromChain}
+        toChain={toChain}
+        loadingStatus={loadingStatus}
+        inputUsdValue={inputUsdValue}
+        fromToken={fromToken}
+        setInputAmount={setInputAmount}
+        connectedWallets={connectedWallets}
+        inputAmount={inputAmount}
+        bestRoute={bestRoute}
+        fetchingBestRoute={fetchingBestRoute}
+        onChainClick={() => onChainClick('to-chain')}
+        onTokenClick={() => onTokenClick('to-token')}
+        tokenBalanceReal={tokenBalanceReal}
+        tokenBalance={tokenBalance}
+        showPercentageChange={showPercentageChange}
+      />
+      {showBestRoute && (
+        <BestRouteContainer>
+          <BestRoute
+            error={bestRouteError}
+            loading={fetchingBestRoute}
+            data={bestRouteData}
+            totalFee={totalFeeInUsd}
+            feeWarning={highFee}
+            totalTime={totalTime}
+          />
+        </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: ${swapFromAmount} ${swap?.from.symbol}`}
+                </Typography>
+                <Typography variant="body2">{recommendation}</Typography>
+              </>
+            </Alert>
+          )}
+        </Alerts>
+      )}
+      <Footer>
+        <Button
+          type="primary"
+          align="grow"
+          size="large"
+          disabled={swapButtonDisabled}
+          onClick={swapButtonClick}>
+          {swapButtonTitle}
+        </Button>
+        <BottomLogo />
+      </Footer>
+    </Container>
+  );
+}

package/src/containers/HomePanel/index.ts

@@ -0,0 +1 @@
+export { HomePanel } from './HomePanel';

package/src/containers/TokenInfo/TokenInfo.tsx

@@ -0,0 +1,308 @@
+import React from 'react';
+import {
+  AngleDownIcon,
+  Button,
+  InfoCircleIcon,
+  styled,
+  TextField,
+  Typography,
+  Image,
+  Divider,
+  PercentageChange,
+  ConnectedWallet,
+} from '../..';
+import { BestRouteResponse, BlockchainMeta, Token } from 'rango-sdk';
+import { Trans } from '@lingui/react';
+import { i18n } from '@lingui/core';
+import { TokenWithBalance } from '../../types/meta';
+
+type PropTypes = (
+  | {
+      type: 'From';
+      onAmountChange: (amount: string) => void;
+    }
+  | {
+      type: 'To';
+      outputAmount: string;
+      outputUsdValue: string;
+      percentageChange: string;
+      showPercentageChange: boolean;
+    }
+) & {
+  chain: BlockchainMeta | null;
+  token: Token | null;
+  loadingStatus: 'loading' | 'success' | 'failed';
+  fromChain: BlockchainMeta | null;
+  toChain: BlockchainMeta | null;
+  inputUsdValue: string;
+  fromToken: TokenWithBalance | null;
+  setInputAmount: (amount: string) => void;
+  connectedWallets: ConnectedWallet[];
+  inputAmount: string;
+  bestRoute: BestRouteResponse | null;
+  fetchingBestRoute: boolean;
+  onChainClick: () => void;
+  onTokenClick: () => void;
+  tokenBalanceReal: string;
+  tokenBalance: string;
+};
+
+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,
+    loadingStatus,
+    fromChain,
+    toChain,
+    fromToken,
+    setInputAmount,
+    inputUsdValue,
+    inputAmount,
+    bestRoute,
+    fetchingBestRoute,
+    onChainClick,
+    onTokenClick,
+    tokenBalanceReal,
+    tokenBalance,
+  } = props;
+
+  const ItemSuffix = (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}>
+      {loadingStatus === 'failed' && <InfoCircleIcon color="error" size={24} />}
+      <AngleDownIcon />
+    </div>
+  );
+
+  return (
+    <Box>
+      <Container type={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>
+          {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
+                percentageChange={props.percentageChange}
+                showPercentageChange={props.showPercentageChange}
+              />
+              <div>
+                <Typography
+                  variant="caption"
+                  color="neutral600">{`$${props.outputUsdValue}`}</Typography>
+              </div>
+            </div>
+          )}
+        </div>
+        <div className="form">
+          <Button
+            className="selectors"
+            onClick={onChainClick}
+            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={onTokenClick}
+            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">
+            {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">{`$${inputUsdValue}`}</Typography>
+                  </span>
+                }
+                value={inputAmount || ''}
+                min={0}
+                onChange={
+                  type === 'From'
+                    ? (event) => {
+                        props.onAmountChange(event.target.value);
+                      }
+                    : undefined
+                }
+              />
+            ) : (
+              <OutputContainer>
+                <Typography variant="h4">
+                  {fetchingBestRoute && '?'}
+                  {!!bestRoute?.result && `≈ ${props.outputAmount}`}
+                  {(!inputAmount || inputAmount === '0') && '0'}
+                </Typography>
+              </OutputContainer>
+            )}
+          </div>
+        </div>
+      </Container>
+    </Box>
+  );
+}

package/src/containers/TokenInfo/index.ts

@@ -0,0 +1 @@
+export { TokenInfo } from './TokenInfo';

package/src/containers/index.ts

@@ -1,9 +1,11 @@
 export * from './ConfirmSwap';
 export * from './History';
+export * from './HomePanel';
 export * from './SwapHistory';
 export * from './BlockchainSelector';
 export * from './ConnectWalletsModal';
 export * from './LiquiditySourcesSelector';
+export * from './TokenInfo';
 export * from './TokenSelector';
 export * from './Settings';
 export * from './Warnings';

package/src/helper/index.ts

@@ -73,7 +73,7 @@ const colorShade = (col: string, amt: number) => {
 export const generateRangeColors = (
   name: string,
   mode: 'light' | 'dark',
-  color?: string,
+  color?: string
 ) => {
   let colors = { [name]: color };
   if (color) {

package/src/types/meta.ts

@@ -1,3 +1,5 @@
+import { Token } from 'rango-sdk';
+
 export type TokenMeta = {
   blockchain: string;
   symbol: string;
@@ -20,3 +22,10 @@ export interface LiquiditySource {
 }
 
 export type LoadingStatus = 'loading' | 'success' | 'failed';
+
+export interface TokenWithBalance extends Token {
+  balance?: {
+    amount: string;
+    usdValue: string;
+  };
+}

package/src/types/wallet.ts

@@ -28,3 +28,28 @@ export interface SelectableWallet {
   selected: boolean;
   name: string;
 }
+
+interface Wallet {
+  chain: string;
+  address: string;
+  walletType: WalletType;
+}
+
+export type TokenBalance = {
+  chain: string;
+  symbol: string;
+  ticker: string;
+  address: string | null;
+  rawAmount: string;
+  decimal: number | null;
+  amount: string;
+  logo: string | null;
+  usdPrice: number | null;
+};
+
+export interface ConnectedWallet extends Wallet {
+  balances: TokenBalance[] | null;
+  loading: boolean;
+  error: boolean;
+  explorerUrl: string | null;
+}