@rango-dev/ui 0.15.1-next.0 → 0.15.1-next.10

package/src/containers/SwapHistory/SwapMessages.tsx

@@ -1,10 +1,14 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
 import React, { useState } from 'react';
+
 import { Alert, Button, Typography } from '../../components';
 import { styled } from '../../theme';
 
 const getAlertType = (messageType: PropTypes['type']) => {
-  if (!messageType || messageType === 'info') return 'secondary';
-  else return messageType;
+  if (!messageType || messageType === 'info') {
+    return 'info';
+  }
+  return messageType;
 };
 
 const DetailedMessage = styled('div', {
@@ -55,8 +59,7 @@ export const SwapMessages: React.FC<PropTypes> = (props) => {
           <Button
             variant="outlined"
             type="primary"
-            onClick={setExpandedMessage.bind(null, (prevState) => !prevState)}
-          >
+            onClick={setExpandedMessage.bind(null, (prevState) => !prevState)}>
             Show more details
           </Button>
         ),
@@ -67,17 +70,18 @@ export const SwapMessages: React.FC<PropTypes> = (props) => {
             variant={'outlined'}
             type="primary"
             onClick={() => {
-              props?.switchNetwork && props.switchNetwork().catch(() => {})
-            }}
-          >
+              props?.switchNetwork &&
+                props.switchNetwork().catch((e) => {
+                  console.log(e);
+                });
+            }}>
             Change network to {currentStepBlockchain}
           </Button>
         ),
-      })}
-    >
+      })}>
       {!!detailedMessage.content ? (
         <DetailedMessage>
-          <Typography variant="body2">
+          <Typography variant="body" size="small">
             {shouldShowMoreDetailsButton && !expandedMessage
               ? detailedMessage.content.substring(0, allowedNumberOfChars) +
                 (allowedNumberOfChars > 0 ? '...' : '')
@@ -88,28 +92,32 @@ export const SwapMessages: React.FC<PropTypes> = (props) => {
       {!!lastConvertedTokenInFailedSwap && (
         <>
           <p>
-            <Typography variant="body2">
-              Don't worry, your fund is&nbsp;
+            <Typography variant="body" size="small">
+              Do not worry, your fund is&nbsp;
             </Typography>
-            <SuccessText variant="body2">
+            <SuccessText variant="body" size="small">
               <b>Safe</b>
             </SuccessText>
           </p>
 
           <p>
-            <Typography variant="body2">
+            <Typography variant="body" size="small">
               It is converted to &nbsp;
               <u>{lastConvertedTokenInFailedSwap.outputAmount}</u>
               &nbsp;
             </Typography>
-            <SuccessText variant="body2">
+            <SuccessText variant="body" size="small">
               <b>{lastConvertedTokenInFailedSwap.symbol}&nbsp;</b>
             </SuccessText>
-            <Typography variant="body2">on your&nbsp;</Typography>
-            <SuccessText variant="body2">
+            <Typography variant="body" size="small">
+              on your&nbsp;
+            </Typography>
+            <SuccessText variant="body" size="small">
               <b>{lastConvertedTokenInFailedSwap.blockchain}&nbsp;</b>
             </SuccessText>
-            <Typography variant="body2">wallet</Typography>
+            <Typography variant="body" size="small">
+              wallet
+            </Typography>
           </p>
         </>
       )}

package/src/containers/SwapInput/SwapInput.stories.tsx

@@ -0,0 +1,39 @@
+import type { SwapInputProps } from './SwapInput.types';
+import type { Meta } from '@storybook/react';
+
+import React from 'react';
+
+import { SwapInput } from './SwapInput';
+
+const meta: Meta<typeof SwapInput> = {
+  title: 'Containers/Swap Input',
+  component: SwapInput,
+  args: {
+    chain: {
+      image: 'https://api.rango.exchange/blockchains/bsc.svg',
+      displayName: 'BSC',
+    },
+    token: {
+      displayName: 'BNB',
+      image: 'https://api.rango.exchange/tokens/ETH/BNB.png',
+    },
+    label: 'From',
+    price: { value: '0.5', usdValue: '151.2' },
+  },
+};
+
+export default meta;
+
+export const SwapFrom = (args: SwapInputProps) => (
+  <SwapInput {...args} label="From" />
+);
+
+export const SwapTo = (args: SwapInputProps) => (
+  <SwapInput
+    {...args}
+    label="To"
+    price={{ value: '2.5', usdValue: '610' }}
+    percentageChange="6.4"
+    warningLevel="high"
+  />
+);

package/src/containers/SwapInput/SwapInput.styles.ts

@@ -0,0 +1,60 @@
+import { Button, TextField } from '../../components';
+import { darkTheme, styled } from '../../theme';
+
+export const Container = styled('div', {
+  backgroundColor: '$neutral100',
+  borderRadius: '$xm',
+  padding: '$15',
+  variants: {
+    sharpBottomStyle: {
+      true: {
+        borderBottomLeftRadius: '$0',
+        borderBottomRightRadius: '$0',
+      },
+    },
+  },
+  '& .label__container': {
+    paddingBottom: '$5',
+  },
+  '& .label': {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  '& .balance': {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  '& .form': {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  '& .amount': {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'end',
+    flexGrow: 1,
+  },
+});
+
+export const InputAmount = styled(TextField, {
+  padding: '0',
+  fontSize: '$18',
+  lineHeight: '$26',
+  fontWeight: '$medium',
+  textAlign: 'right',
+  width: 140,
+  '&:disabled': {
+    cursor: 'unset',
+  },
+});
+export const MaxButton = styled(Button, {
+  $$color: '$colors$info300',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$secondary800',
+  },
+  backgroundColor: '$$color',
+});

package/src/containers/SwapInput/SwapInput.tsx

@@ -0,0 +1,106 @@
+import type { SwapInputProps } from './SwapInput.types';
+
+import React from 'react';
+
+import { Divider, PriceImpact, Skeleton, Typography } from '../../components';
+
+import { Container, InputAmount, MaxButton } from './SwapInput.styles';
+import { TokenSection } from './TokenSection';
+
+export function SwapInput(props: SwapInputProps) {
+  return (
+    <Container sharpBottomStyle={props.sharpBottomStyle}>
+      <div className="label__container">
+        <div className="label">
+          <Typography variant="body" size="small" color="$neutral800">
+            {props.label}
+          </Typography>
+          {'balance' in props && !props.loading && (
+            <div className="balance">
+              <Typography
+                color="$neutral800"
+                mr={4}
+                variant="body"
+                size="xsmall">
+                Balance: {props.balance}
+              </Typography>
+              <MaxButton
+                variant="default"
+                size="xsmall"
+                onClick={props.onSelectMaxBalance}>
+                <Typography variant="body" size="xsmall" color="secondary500">
+                  Max
+                </Typography>
+              </MaxButton>
+            </div>
+          )}
+          {props.loading && (
+            <div className="balance">
+              <Skeleton variant="text" size="large" width={105} />
+            </div>
+          )}
+        </div>
+      </div>
+      <div className="form">
+        <TokenSection
+          chain={props.chain.displayName}
+          tokenSymbol={props.token.displayName}
+          error={props.error}
+          chainImage={props.chain.image}
+          tokenImage={props.token.image}
+          onClick={props.onClickToken}
+          loading={props.loading}
+        />
+        <div className="amount">
+          {props.loading ? (
+            <>
+              <Skeleton variant="text" size="large" width={92} />
+              <Divider size={8} />
+              <Skeleton variant="text" size="medium" width={92} />
+            </>
+          ) : (
+            <>
+              <InputAmount
+                disabled={props.disabled || props.label === 'To'}
+                style={{ padding: 0 }}
+                value={props.price.value}
+                type={'onInputChange' in props ? 'number' : 'text'}
+                size="large"
+                placeholder="0"
+                variant="ghost"
+                min={0}
+                {...('onInputChange' in props && {
+                  onChange: (event: React.ChangeEvent<HTMLInputElement>) =>
+                    props.onInputChange(event.target.value),
+                })}
+              />
+              {'percentageChange' in props ? (
+                <PriceImpact
+                  size="large"
+                  outputUsdValue={props.price.usdValue}
+                  error={props.price.error}
+                  percentageChange={props.percentageChange}
+                  warningLevel={props.warningLevel}
+                />
+              ) : (
+                <Typography
+                  variant="body"
+                  size="medium"
+                  color={!props.price.error ? '$neutral800' : '$warning500'}
+                  style={{
+                    width: 140,
+                    textAlign: 'right',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                  }}>
+                  {props.price.usdValue || props.price.error}
+                </Typography>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+    </Container>
+  );
+}

package/src/containers/SwapInput/SwapInput.types.ts

@@ -0,0 +1,41 @@
+import type { PriceImpactWarningLevel } from '../../components/PriceImpact/PriceImpact.types';
+
+export type BaseProps = {
+  chain: {
+    displayName: string;
+    image: string;
+  };
+  token: {
+    displayName: string;
+    image: string;
+  };
+  price: {
+    value: string;
+    usdValue?: string;
+    error?: string;
+  };
+  loading?: boolean;
+  error?: boolean;
+  disabled?: boolean;
+  sharpBottomStyle?: boolean;
+  onClickToken: () => void;
+};
+
+type FromProps = {
+  label: 'From';
+  balance?: string;
+  onSelectMaxBalance: () => void;
+  onInputChange: (inputAmount: string) => void;
+};
+
+type ToProps = {
+  label: 'To';
+  percentageChange: string | null;
+  warningLevel: PriceImpactWarningLevel;
+};
+
+type Common = {
+  label: string;
+};
+
+export type SwapInputProps = BaseProps & (FromProps | ToProps | Common);

package/src/containers/SwapInput/TokenSection.styles.ts

@@ -0,0 +1,45 @@
+import { Button } from '../../components';
+import { darkTheme, styled } from '../../theme';
+
+export const Container = styled(Button, {
+  variants: {
+    loading: {
+      true: {
+        '&:hover': {
+          background: 'none',
+        },
+      },
+      false: {
+        '&:hover': {
+          borderRadius: '$xs',
+          $$color: '$colors$info100',
+          [`.${darkTheme} &`]: {
+            $$color: '$colors$neutral400',
+          },
+          backgroundColor: '$$color',
+        },
+      },
+    },
+  },
+});
+
+export const TokenSectionContainer = styled('div', {
+  width: '10.625rem',
+  padding: '$2 $5',
+  display: 'flex',
+  borderRadius: '$xs',
+  justifyContent: 'start',
+  boxSizing: 'border-box',
+  alignItems: 'center',
+
+  '& .token-chain-name': {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'start',
+    paddingLeft: '$10',
+  },
+  '& .token-chain-name__skeleton': {
+    padding: '$5 $0',
+  },
+});

package/src/containers/SwapInput/TokenSection.tsx

@@ -0,0 +1,53 @@
+import type { TokenSectionProps } from './TokenSection.types';
+
+import { i18n } from '@lingui/core';
+import React from 'react';
+
+import { ChainToken, Divider, Skeleton, Typography } from '../../components';
+
+import { Container, TokenSectionContainer } from './TokenSection.styles';
+
+export function TokenSection(props: TokenSectionProps) {
+  const {
+    error,
+    chainImage,
+    tokenImage,
+    tokenSymbol,
+    chain,
+    onClick,
+    loading,
+  } = props;
+  return (
+    <Container variant="ghost" disabled={error || loading} onClick={onClick}>
+      <TokenSectionContainer>
+        <ChainToken
+          size="large"
+          useAsPlaceholder={error || (!loading && (!chainImage || !tokenImage))}
+          chainImage={chainImage}
+          tokenImage={tokenImage}
+          loading={loading}
+        />
+        <div className="token-chain-name">
+          {loading ? (
+            <div className="token-chain-name__skeleton">
+              <Skeleton variant="text" size="large" width={92} />
+              <Divider size={8} />
+              <Skeleton variant="text" size="medium" width={92} />
+            </div>
+          ) : (
+            <>
+              <Typography variant="title" size="medium">
+                {error || (!loading && !tokenSymbol)
+                  ? i18n.t('Token')
+                  : tokenSymbol}
+              </Typography>
+              <Typography variant="body" size="medium" color="$neutral800">
+                {error || (!loading && !chain) ? i18n.t('Chain') : chain}
+              </Typography>
+            </>
+          )}
+        </div>
+      </TokenSectionContainer>
+    </Container>
+  );
+}

package/src/containers/SwapInput/TokenSection.types.ts

@@ -0,0 +1,9 @@
+export type TokenSectionProps = {
+  chainImage: string;
+  tokenImage: string;
+  tokenSymbol: string;
+  chain: string;
+  error?: boolean;
+  onClick: () => void;
+  loading?: boolean;
+};

package/src/containers/SwapInput/index.ts

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

package/src/containers/TokenInfo/TokenInfo.tsx

@@ -1,20 +1,21 @@
+import type { ConnectedWallet } from '../..';
+import type { TokenWithBalance } from '../../types/meta';
+import type { BestRouteResponse, BlockchainMeta, Token } from 'rango-sdk';
+
+import { i18n } from '@lingui/core';
+import { Trans } from '@lingui/react';
 import React from 'react';
+
 import {
-  AngleDownIcon,
   Button,
-  InfoCircleIcon,
-  styled,
-  TextField,
-  Typography,
-  Image,
   Divider,
+  Image,
   PercentageChange,
-  ConnectedWallet,
+  TextField,
+  Typography,
 } from '../..';
-import { BestRouteResponse, BlockchainMeta, Token } from 'rango-sdk';
-import { Trans } from '@lingui/react';
-import { i18n } from '@lingui/core';
-import { TokenWithBalance } from '../../types/meta';
+import { AngleDownIcon, InfoCircleIcon } from '../../components/Icon';
+import { styled } from '../../theme';
 
 type PropTypes = (
   | {
@@ -32,8 +33,8 @@ type PropTypes = (
   chain: BlockchainMeta | null;
   token: Token | null;
   loadingStatus: 'loading' | 'success' | 'failed';
-  fromChain: BlockchainMeta | null;
-  toChain: BlockchainMeta | null;
+  fromBlockchain: BlockchainMeta | null;
+  toBlockchain: BlockchainMeta | null;
   inputUsdValue: string;
   fromToken: TokenWithBalance | null;
   setInputAmount: (amount: string) => void;
@@ -56,16 +57,16 @@ const Box = styled('div', {
 
 const Container = styled('div', {
   boxSizing: 'border-box',
-  borderRadius: '$5',
+  borderRadius: '$xs',
   padding: '$8 $16 $16 $16',
 
   variants: {
     type: {
       filled: {
-        backgroundColor: '$neutral100',
+        backgroundColor: '$background',
       },
       outlined: {
-        border: '1px solid $neutral100',
+        border: '1px solid $background',
         backgroundColor: '$surface',
       },
     },
@@ -120,14 +121,14 @@ const Options = styled('div', {
 const ImagePlaceholder = styled('span', {
   width: '24px',
   height: '24px',
-  backgroundColor: '$neutral100',
+  backgroundColor: '$background',
   borderRadius: '99999px',
 });
 
 const OutputContainer = styled('div', {
   windth: '100%',
   height: '$48',
-  borderRadius: '$5',
+  borderRadius: '$xs',
   backgroundColor: '$surface',
   border: '1px solid transparent',
   position: 'relative',
@@ -143,8 +144,8 @@ export function TokenInfo(props: PropTypes) {
     chain,
     token,
     loadingStatus,
-    fromChain,
-    toChain,
+    fromBlockchain,
+    toBlockchain,
     fromToken,
     setInputAmount,
     inputUsdValue,
@@ -173,7 +174,7 @@ export function TokenInfo(props: PropTypes) {
     <Box>
       <Container type={type === 'From' ? 'filled' : 'outlined'}>
         <div className="head">
-          <Typography variant="body2" color="neutral800">
+          <Typography variant="body" size="small" color="neutral800">
             {type === 'From' ? (
               <Trans id="swap from" message="From" />
             ) : (
@@ -185,14 +186,15 @@ export function TokenInfo(props: PropTypes) {
               <div
                 className="balance"
                 onClick={() => {
-                  if (tokenBalance !== '0')
+                  if (tokenBalance !== '0') {
                     setInputAmount(tokenBalanceReal.split(',').join(''));
+                  }
                 }}>
-                <Typography variant="body3" color="neutral600">
+                <Typography variant="body" size="small" color="neutral600">
                   {i18n.t('Balance')}: {tokenBalance} {fromToken?.symbol || ''}
                 </Typography>
                 <Divider size={4} />
-                <Button type="primary" variant="ghost" size="compact">
+                <Button type="primary" variant="ghost" size="small">
                   <Trans id="maximum amount of asset" message="Max" />
                 </Button>
               </div>
@@ -205,7 +207,8 @@ export function TokenInfo(props: PropTypes) {
               />
               <div>
                 <Typography
-                  variant="caption"
+                  variant="body"
+                  size="xsmall"
                   color="neutral600">{`$${props.outputUsdValue}`}</Typography>
               </div>
             </div>
@@ -226,7 +229,6 @@ export function TokenInfo(props: PropTypes) {
               )
             }
             suffix={ItemSuffix}
-            align="start"
             size="large">
             {loadingStatus === 'success' && chain
               ? chain.displayName
@@ -239,8 +241,8 @@ export function TokenInfo(props: PropTypes) {
             variant="outlined"
             disabled={
               loadingStatus === 'failed' ||
-              (type === 'From' && !fromChain) ||
-              (type === 'To' && !toChain)
+              (type === 'From' && !fromBlockchain) ||
+              (type === 'To' && !toBlockchain)
             }
             loading={loadingStatus === 'loading'}
             prefix={
@@ -251,8 +253,7 @@ export function TokenInfo(props: PropTypes) {
               )
             }
             suffix={ItemSuffix}
-            size="large"
-            align="start">
+            size="large">
             {loadingStatus === 'success' && token
               ? token.symbol
               : i18n.t('Token')}
@@ -277,7 +278,8 @@ export function TokenInfo(props: PropTypes) {
                       bottom: '2px',
                     }}>
                     <Typography
-                      variant="caption"
+                      variant="body"
+                      size="xsmall"
                       color="neutral800">{`$${inputUsdValue}`}</Typography>
                   </span>
                 }
@@ -285,7 +287,7 @@ export function TokenInfo(props: PropTypes) {
                 min={0}
                 onChange={
                   type === 'From'
-                    ? (event) => {
+                    ? (event: React.ChangeEvent<HTMLInputElement>) => {
                         props.onAmountChange(event.target.value);
                       }
                     : undefined
@@ -293,7 +295,7 @@ export function TokenInfo(props: PropTypes) {
               />
             ) : (
               <OutputContainer>
-                <Typography variant="h4">
+                <Typography variant="title" size="medium">
                   {fetchingBestRoute && '?'}
                   {!!bestRoute?.result && `≈ ${props.outputAmount}`}
                   {(!inputAmount || inputAmount === '0') && '0'}