@rango-dev/ui 0.15.1-next.2 → 0.15.1-next.21

package/src/containers/SwapHistory/SwapHistory.tsx

@@ -1,25 +1,39 @@
+import type { PropTypes as SwapMessagesPropTypes } from './SwapMessages';
+import type { PendingSwap } from '../History/types';
+
 import React, { useState } from 'react';
+
 import {
-  StepDetail,
-  SecondaryPage,
-  GasIcon,
-  Typography,
-  CheckCircleIcon,
-  InfoCircleIcon,
-  Divider,
-  Button,
   Alert,
+  Button,
+  Divider,
   Drawer,
-  Spinner,
   Image,
+  SecondaryPage,
+  Spinner,
+  StepDetail,
+  Typography,
 } from '../../components';
-import { styled } from '../../theme';
-import { PendingSwap } from '../History/types';
-import { pulse } from '../../components/BestRoute/BestRoute';
 import {
-  SwapMessages,
-  PropTypes as SwapMessagesPropTypes,
-} from './SwapMessages';
+  CheckCircleIcon,
+  GasIcon,
+  InfoCircleIcon,
+} from '../../components/Icon';
+import { keyframes, styled } from '../../theme';
+
+import { SwapMessages } from './SwapMessages';
+
+export const pulse = keyframes({
+  '0%': {
+    opacity: 1,
+  },
+  '50%': {
+    opacity: 0.3,
+  },
+  '100%': {
+    opacity: 1,
+  },
+});
 
 export const SwapperContainer = styled('div', {
   display: 'flex',
@@ -47,7 +61,7 @@ export const BodyError = styled('div', {
 });
 
 export const ErrorMsg = styled(Typography, {
-  color: '$error',
+  color: '$error500',
 });
 
 export const FeeContainer = styled('div', {
@@ -87,7 +101,7 @@ export const ArrowDown = styled('div', {
 });
 
 const StyledAnchor = styled('a', {
-  color: '$primary',
+  color: '$primary500',
   fontWeight: '$600',
 });
 
@@ -95,7 +109,7 @@ const SwapInfoContainer = styled('div', {
   display: 'flex',
   flexDirection: 'column',
   paddingBottom: '$16',
-  borderBottom: '1px solid $neutral100',
+  borderBottom: '1px solid $background',
 });
 
 const InternalDetailsContainer = styled('div', {
@@ -116,7 +130,7 @@ const DescriptionContainer = styled('div', {
 });
 
 const Description = styled(Typography, {
-  color: '$success',
+  color: '$success500',
   paddingLeft: '$4',
 });
 
@@ -149,10 +163,10 @@ const Row = styled('div', {
     textTransform: 'uppercase',
   },
   '.status.failed': {
-    color: '$error',
+    color: '$error500',
   },
   '.status.success': {
-    color: '$success',
+    color: '$success500',
   },
 });
 
@@ -197,7 +211,6 @@ export function SwapHistory(props: PropTypes) {
     onCancel,
     date,
     onRetry,
-    previewInputs,
     ...extraMessageProps
   } = props;
   const [showDrawer, setShowDrawer] = useState(false);
@@ -214,8 +227,7 @@ export function SwapHistory(props: PropTypes) {
               variant="outlined"
               fullWidth
               type="error"
-              onClick={setShowDrawer.bind(null, true)}
-            >
+              onClick={setShowDrawer.bind(null, true)}>
               Cancel
             </Button>
           )}
@@ -224,14 +236,12 @@ export function SwapHistory(props: PropTypes) {
               variant="contained"
               fullWidth
               type="primary"
-              onClick={onRetry}
-            >
+              onClick={onRetry}>
               Try again
             </Button>
           )}
         </>
-      }
-    >
+      }>
       <div>
         <SwapInfoContainer>
           <Row>
@@ -239,11 +249,10 @@ export function SwapHistory(props: PropTypes) {
               Request Id:
               <span
                 className="value requestId"
-                onClick={onCopy.bind(null, pendingSwap?.requestId)}
-              >
+                onClick={onCopy.bind(null, pendingSwap?.requestId)}>
                 <RequestId>{pendingSwap?.requestId}</RequestId>
                 <Divider size={4} direction="horizontal" />
-                <Button type="primary" variant="ghost" size="compact">
+                <Button type="primary" variant="ghost" size="small">
                   {isCopied ? 'Copied!' : 'Copy'}
                 </Button>
               </span>
@@ -264,147 +273,143 @@ export function SwapHistory(props: PropTypes) {
               <Divider size={16} />*/}
       </div>
       <SwapFlowContainer>
-        {/*{previewInputs} */}
-
         {extraMessageProps.shortMessage && (
           <SwapMessages {...extraMessageProps} />
         )}
 
         <Divider size={16} />
 
-        {pendingSwap?.steps.map((step, index) => (
-          <div key={index}>
-            {index === 0 && (
-              <RelativeContainer>
-                <StepDetail
-                  logo={step.fromLogo}
-                  symbol={step.fromSymbol}
-                  chainLogo={step.fromBlockchainLogo || ''}
-                  blockchain={step.fromBlockchain}
-                  amount={pendingSwap.inputAmount}
+        {pendingSwap?.steps.map((step, index) => {
+          const key = `step-${index}`;
+          return (
+            <div key={key}>
+              {index === 0 && (
+                <RelativeContainer>
+                  <StepDetail
+                    logo={step.fromLogo}
+                    symbol={step.fromSymbol}
+                    chainLogo={step.fromBlockchainLogo || ''}
+                    blockchain={step.fromBlockchain}
+                    amount={pendingSwap.inputAmount}
+                  />
+                  <Dot />
+                </RelativeContainer>
+              )}
+              <Line />
+              <SwapperContainer
+                created={step.status === 'created'}
+                running={
+                  !['created', 'success', 'failed'].includes(step.status)
+                }>
+                <Image
+                  src={step.swapperLogo || ''}
+                  alt={step.swapperId}
+                  size={20}
                 />
-                <Dot />
-              </RelativeContainer>
-            )}
-            <Line />
-            <SwapperContainer
-              created={step.status === 'created'}
-              running={!['created', 'success', 'failed'].includes(step.status)}
-            >
-              <Image
-                src={step.swapperLogo || ''}
-                alt={step.swapperId}
-                size={20}
-              />
 
-              <FeeContainer>
-                <Typography variant="body2">
-                  {step.swapperType === 'DEX' ? 'Swap' : 'Bridge'} via{' '}
-                  {step.swapperId}
-                </Typography>
-                <Fee>
-                  <GasIcon />
-                  <Typography variant="body2">
-                    &nbsp; ${step.feeInUsd} estimated gas fee
+                <FeeContainer>
+                  <Typography variant="body" size="small">
+                    {step.swapperType === 'DEX' ? 'Swap' : 'Bridge'} via{' '}
+                    {step.swapperId}
                   </Typography>
-                </Fee>
-              </FeeContainer>
-            </SwapperContainer>
-            <div
-              style={{
-                display: 'flex',
-              }}
-            >
-              <InternalDetailsContainer>
-                <Line />
-                <div className="details">
-                  {!!step.explorerUrl && (
-                    <div>
-                      {step.explorerUrl.map((item, index) => (
-                        <InternalDetail key={index}>
-                          <DescriptionContainer>
-                            <Divider size={4} />
-                            <CheckCircleIcon color="primary" />
-                            <Description variant="body2">
-                              <StyledAnchor
-                                href={item.url}
-                                target="_blank"
-                                rel="noreferrer"
-                                key={index}
-                              >
-                                {!item.description ? (
-                                  <b>View transaction</b>
-                                ) : (
-                                  <b>
-                                    {item.description
-                                      .substring(0, 1)
-                                      .toUpperCase()}
-                                    {item.description.substring(1)} Tx
-                                  </b>
-                                )}
-                              </StyledAnchor>
-                            </Description>
-                          </DescriptionContainer>
-                        </InternalDetail>
-                      ))}
-                    </div>
-                  )}
-                  {step.status === 'failed' && (
-                    <InternalDetail>
-                      <DescriptionContainer>
-                        <InfoCircleIcon color="error" />
-                        <Description variant="body2" color="$error500">
-                          Step failed
-                        </Description>
-                      </DescriptionContainer>
-                    </InternalDetail>
-                  )}
-                </div>
-              </InternalDetailsContainer>
+                  <Fee>
+                    <GasIcon />
+                    <Typography variant="body" size="small">
+                      &nbsp; ${step.feeInUsd} estimated gas fee
+                    </Typography>
+                  </Fee>
+                </FeeContainer>
+              </SwapperContainer>
+              <div
+                style={{
+                  display: 'flex',
+                }}>
+                <InternalDetailsContainer>
+                  <Line />
+                  <div className="details">
+                    {!!step.explorerUrl && (
+                      <div>
+                        {step.explorerUrl.map((item, index) => {
+                          const internalKey = `internal-${index}`;
+                          const anchorKey = `anchor-${index}`;
+
+                          return (
+                            <InternalDetail key={internalKey}>
+                              <DescriptionContainer>
+                                <Divider size={4} />
+                                <CheckCircleIcon color="primary" />
+                                <Description variant="body" size="small">
+                                  <StyledAnchor
+                                    href={item.url}
+                                    target="_blank"
+                                    rel="noreferrer"
+                                    key={anchorKey}>
+                                    {!item.description ? (
+                                      <b>View transaction</b>
+                                    ) : (
+                                      <b>
+                                        {item.description
+                                          .substring(0, 1)
+                                          .toUpperCase()}
+                                        {item.description.substring(1)} Tx
+                                      </b>
+                                    )}
+                                  </StyledAnchor>
+                                </Description>
+                              </DescriptionContainer>
+                            </InternalDetail>
+                          );
+                        })}
+                      </div>
+                    )}
+                    {step.status === 'failed' && (
+                      <InternalDetail>
+                        <DescriptionContainer>
+                          <InfoCircleIcon color="error" />
+                          <Description
+                            variant="body"
+                            size="small"
+                            color="$error500">
+                            Step failed
+                          </Description>
+                        </DescriptionContainer>
+                      </InternalDetail>
+                    )}
+                  </div>
+                </InternalDetailsContainer>
+              </div>
+              {index + 1 === pendingSwap.steps.length && <ArrowDown />}
+              <StepDetail
+                logo={step.toLogo}
+                symbol={step.toSymbol}
+                chainLogo={step.toBlockchainLogo || ''}
+                blockchain={step.toBlockchain}
+                amount={step.outputAmount || ''}
+                estimatedAmount={step.expectedOutputAmountHumanReadable || ''}
+                success={step.status === 'success'}
+              />
             </div>
-            {index + 1 === pendingSwap.steps.length && <ArrowDown />}
-            <StepDetail
-              logo={step.toLogo}
-              symbol={step.toSymbol}
-              chainLogo={step.toBlockchainLogo || ''}
-              blockchain={step.toBlockchain}
-              amount={step.outputAmount || ''}
-              estimatedAmount={step.expectedOutputAmountHumanReadable || ''}
-              success={step.status === 'success'}
-            />
-          </div>
-        ))}
+          );
+        })}
 
         <Divider size={32} />
       </SwapFlowContainer>
       <Drawer
         onClose={setShowDrawer.bind(null, false)}
         open={showDrawer}
-        showClose={true}
         anchor="bottom"
         title="Cancel Progress"
-        content={
-          <Alert type="warning">
-            <Typography variant="body2">
-              Warning: Cancel <u>doesn't revert</u> your transaction if you've
-              already signed and sent a transaction to the blockchain. It only
-              stops next steps from being executed.
-            </Typography>
-          </Alert>
-        }
         footer={
           <div
             style={{
               display: 'flex',
               justifyContent: 'center',
               alignItems: 'center',
-            }}
-          >
+            }}>
             <Button
               variant="contained"
               type="success"
-              onClick={setShowDrawer.bind(null, false)}
-            >
+              onClick={setShowDrawer.bind(null, false)}>
               Skip
             </Button>
             <Divider size={16} direction="horizontal" />
@@ -414,14 +419,20 @@ export function SwapHistory(props: PropTypes) {
               onClick={() => {
                 onCancel(pendingSwap.requestId);
                 setShowDrawer(false);
-              }}
-            >
+              }}>
               Cancel progress
             </Button>
           </div>
         }
-        container={document.getElementById('swap-box')!}
-      />
+        container={document.getElementById('swap-box')}>
+        <Alert type="warning">
+          <Typography variant="body" size="small">
+            Warning: Cancel <u>doesn't revert</u> your transaction if you've
+            already signed and sent a transaction to the blockchain. It only
+            stops next steps from being executed.
+          </Typography>
+        </Alert>
+      </Drawer>
     </SecondaryPage>
   );
 }

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,40 @@
+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"
+    mode="To"
+    price={{ value: '2.5', usdValue: '610' }}
+    percentageChange="6.4"
+    warningLevel="high"
+  />
+);

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

@@ -0,0 +1,64 @@
+import { Button, TextField } from '../../components';
+import { darkTheme, styled } from '../../theme';
+
+export const Container = styled('div', {
+  $$color: '$colors$neutral100',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral300',
+  },
+  backgroundColor: '$$color',
+  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',
+});