@rango-dev/ui 0.1.10-next.91 → 0.1.10

package/src/containers/SwapHistory/SwapHistory.tsx

@@ -6,24 +6,73 @@ import {
   Typography,
   CheckCircleIcon,
   InfoCircleIcon,
-  CopyIcon,
   Spacer,
-  CheckSquareIcon,
   Button,
   Alert,
   Drawer,
+  Spinner,
+  Divider,
 } from '../../components';
 import { styled } from '../../theme';
-import {
-  RelativeContainer,
-  Dot,
-  SwapperContainer,
-  SwapperLogo,
-  ArrowDown,
-  Fee,
-} from '../ConfirmSwap/ConfirmSwap';
 import { PendingSwap } from '../History/types';
 import { pulse } from '../../components/BestRoute/BestRoute';
+import {
+  SwapMessages,
+  PropTypes as SwapMessagesPropTypes,
+} from './SwapMessages';
+
+export const SwapperContainer = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  marginLeft: '6px',
+});
+
+export const BodyError = styled('div', {
+  height: '100%',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const ErrorMsg = styled(Typography, {
+  color: '$error',
+});
+
+export const Fee = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+});
+
+export const SwapperLogo = styled('img', {
+  width: '$16',
+  height: '$16',
+});
+
+export const RelativeContainer = styled('div', {
+  position: 'relative',
+});
+
+export const Footer = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+});
+
+export const Dot = styled('div', {
+  width: '$8',
+  height: '$8',
+  backgroundColor: '$foreground',
+  borderRadius: '4px',
+  marginLeft: '$8',
+});
+
+export const ArrowDown = styled('div', {
+  width: '0px',
+  height: '0px',
+  borderLeft: '5px solid transparent',
+  borderRight: '5px solid transparent',
+  borderTop: '5px solid $foreground',
+  marginLeft: '$8',
+});
 
 const StyledAnchor = styled('a', {
   color: '$primary',
@@ -31,6 +80,13 @@ const StyledAnchor = styled('a', {
   marginLeft: '$12',
 });
 
+const SwapInfoContainer = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  paddingBottom: '$16',
+  borderBottom: '1px solid $neutrals300',
+});
+
 const InternalDetailsContainer = styled('div', {
   display: 'flex',
 });
@@ -62,25 +118,47 @@ export const Line = styled('div', {
   borderRadius: 'inherit',
 });
 
-const RequestIdContainer = styled('div', {
-  cursor: 'pointer',
-  backgroundColor: '$neutrals200',
-  padding: '$4',
+const Row = styled('div', {
   display: 'flex',
-  justifyContent: 'center',
+  justifyContent: 'space-between',
   alignItems: 'center',
-  borderRadius: '$5',
-  marginBottom: '$16',
+  fontSize: '$14',
+  padding: '$8 0',
+
+  '.name': {
+    color: '$neutrals600',
+  },
+  '.value': {
+    display: 'flex',
+    alignItems: 'center',
+    color: '$neutrals800',
+  },
+  '.status': {
+    fontWeight: 'bold',
+    textTransform: 'uppercase',
+  },
+  '.status.failed': {
+    color: '$error',
+  },
+  '.status.success': {
+    color: '$success',
+  },
 });
 
-const RequestId = styled(Typography, {
-  color: '$warning500',
+const RequestId = styled('div', {
+  width: '150px',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  '@md': {
+    width: 'auto',
+  },
 });
 
-const CancelButtonContainer = styled('div', {
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
+const ExtraDetails = styled('div', {
+  padding: '$8 0',
+  color: '$neutrals600',
+  fontSize: '$12',
 });
 
 const StepContainer = styled('div', {
@@ -98,145 +176,216 @@ const StepContainer = styled('div', {
   },
 });
 
-export interface PropTypes {
+const SwapFlowContainer = styled('div', {
+  overflowY: 'auto',
+});
+
+export type PropTypes = {
   pendingSwap: PendingSwap;
   onCopy: (requestId: string) => void;
   onBack: () => void;
   isCopied: boolean;
   onCancel: (requestId: string) => void;
-}
+  onRetry?: () => void;
+  date: string;
+  previewInputs?: React.ReactNode;
+} & SwapMessagesPropTypes;
 
 export function SwapHistory(props: PropTypes) {
-  const { pendingSwap, onBack, onCopy, isCopied, onCancel } = props;
+  const {
+    pendingSwap,
+    onBack,
+    onCopy,
+    isCopied,
+    onCancel,
+    date,
+    onRetry,
+    previewInputs,
+    ...extraMessageProps
+  } = props;
   const [showDrawer, setShowDrawer] = useState(false);
 
   return (
-    <SecondaryPage title="Swap Details" textField={false} onBack={onBack}>
-      <div style={{ overflow: 'hidden' }}>
-        <div>
-          <Typography variant="body1"> request ID :</Typography>
-          <RequestIdContainer
-            onClick={onCopy.bind(null, pendingSwap?.requestId)}
-          >
-            <RequestId variant="body1">{pendingSwap?.requestId}</RequestId>
-            <Spacer size={12} />
-            {isCopied ? (
-              <CheckSquareIcon color="success" size={18} />
-            ) : (
-              <CopyIcon color="warning" size={18} />
-            )}
-          </RequestIdContainer>
-        </div>
-        <div style={{ overflow: 'auto', position: 'relative' }}>
-          {pendingSwap?.steps.map((step, index) => (
-            <StepContainer
-              key={index}
-              hasNotStarted={step.status === 'created'}
-              isRunning={
-                step.status != 'failed' &&
-                step.status != 'success' &&
-                step.status != 'created'
-              }
+    <SecondaryPage
+      title="Swap Details"
+      textField={false}
+      onBack={onBack}
+      Footer={
+        <>
+          {pendingSwap?.status === 'running' && (
+            <Button
+              variant="outlined"
+              fullWidth
+              type="error"
+              onClick={setShowDrawer.bind(null, true)}
+            >
+              Cancel
+            </Button>
+          )}
+          {!!onRetry && (
+            <Button
+              variant="contained"
+              fullWidth
+              type="primary"
+              onClick={onRetry}
             >
-              {index === 0 && (
-                <RelativeContainer>
-                  <StepDetail
-                    logo={step.fromLogo}
-                    symbol={step.fromSymbol}
-                    chainLogo={step.fromBlockchainLogo}
-                    blockchain={step.fromBlockchain}
-                    amount={pendingSwap.inputAmount}
-                  />
-                  <Dot />
-                </RelativeContainer>
+              Try again
+            </Button>
+          )}
+        </>
+      }
+    >
+      <div>
+        <SwapInfoContainer>
+          <Row>
+            <div className="name">Request ID:</div>
+            <div
+              className="value requestId"
+              onClick={onCopy.bind(null, pendingSwap?.requestId)}
+            >
+              <RequestId>{pendingSwap?.requestId}</RequestId>
+              <Spacer size={4} />
+              <Button type="primary" variant="ghost" size="compact">
+                {isCopied ? 'Copied!' : 'Copy'}
+              </Button>
+            </div>
+          </Row>
+          <Row>
+            <div className="name">Status:</div>
+            <div className={`value status ${pendingSwap?.status || ''}`}>
+              {pendingSwap?.status}
+              {pendingSwap?.status === 'running' && (
+                <Spinner size={16} color="primary" />
               )}
-              <Line />
-              <SwapperContainer>
-                <SwapperLogo src={step.swapperLogo} alt={step.swapperId} />
-                <div>
+            </div>
+          </Row>
+          <ExtraDetails>{date}</ExtraDetails>
+        </SwapInfoContainer>
+        {/* TODO: It was temporarily removed to find a better solution. 
+
+              <Divider size={16} />*/}
+      </div>
+      <SwapFlowContainer>
+        {/*{previewInputs} */}
+
+        {extraMessageProps.shortMessage && (
+          <SwapMessages {...extraMessageProps} />
+        )}
+
+        <Divider size={32} />
+
+        {pendingSwap?.steps.map((step, index) => (
+          <StepContainer
+            key={index}
+            hasNotStarted={step.status === 'created'}
+            isRunning={
+              step.status != 'failed' &&
+              step.status != 'success' &&
+              step.status != 'created'
+            }
+          >
+            {index === 0 && (
+              <RelativeContainer>
+                <StepDetail
+                  logo={step.fromLogo}
+                  symbol={step.fromSymbol}
+                  // @ts-ignore
+                  chainLogo={step.fromBlockchainLogo}
+                  blockchain={step.fromBlockchain}
+                  amount={pendingSwap.inputAmount}
+                />
+                <Dot />
+              </RelativeContainer>
+            )}
+            <Line />
+            <SwapperContainer>
+              <SwapperLogo
+                // @ts-ignore
+                src={step.swapperLogo}
+                alt={step.swapperId}
+              />
+              <div>
+                <Typography ml={4} variant="caption">
+                  {
+                    // @ts-ignore
+                    step.swapperType
+                  }{' '}
+                  from {step.fromSymbol} to {step.toSymbol}
+                  via {step.swapperId}
+                </Typography>
+                <Fee>
+                  <GasIcon />
                   <Typography ml={4} variant="caption">
-                    {step.swapperType} from {step.fromSymbol} to {step.toSymbol}
-                    via {step.swapperId}
+                    $
+                    {
+                      // @ts-ignore
+                      step.feeInUsd
+                    }{' '}
+                    estimated gas fee
                   </Typography>
-                  <Fee>
-                    <GasIcon />
-                    <Typography ml={4} variant="caption">
-                      ${step.feeInUsd} estimated gas fee
-                    </Typography>
-                  </Fee>
-                </div>
-              </SwapperContainer>
-              <div
-                style={{
-                  display: 'flex',
-                }}
-              >
-                <InternalDetailsContainer>
-                  <Line />
-                  {!!step.explorerUrl && (
-                    <div>
-                      {step.explorerUrl.map((item, index) => (
-                        <InternalDetail key={index}>
-                          <DescriptionContainer>
-                            <CheckCircleIcon color="success" />
-                            <Description variant="body2">
-                              {!item.description ? (
-                                <b>View transaction</b>
-                              ) : (
-                                <b>
-                                  {item.description
-                                    .substring(0, 1)
-                                    .toUpperCase()}
-                                  {item.description.substring(1)}
-                                </b>
-                              )}
-                            </Description>
-                          </DescriptionContainer>
-                          <StyledAnchor
-                            href={item.url}
-                            target="_blank"
-                            rel="noreferrer"
-                            key={index}
-                          >
-                            TX-Link
-                          </StyledAnchor>
-                        </InternalDetail>
-                      ))}
-                      {step.status === 'failed' && (
-                        <InternalDetail>
-                          <DescriptionContainer>
-                            <InfoCircleIcon color="error" />
-                            <Error variant="body2">Step failed</Error>
-                          </DescriptionContainer>
-                        </InternalDetail>
-                      )}
-                    </div>
-                  )}
-                </InternalDetailsContainer>
+                </Fee>
               </div>
-              {index + 1 === pendingSwap.steps.length && <ArrowDown />}
-              <StepDetail
-                logo={step.toLogo}
-                symbol={step.toSymbol}
-                chainLogo={step.toBlockchainLogo}
-                blockchain={step.toBlockchain}
-                amount={step.outputAmount}
-              />
-            </StepContainer>
-          ))}
-          {pendingSwap?.status === 'running' && (
-            <CancelButtonContainer>
-              <Button
-                variant="contained"
-                type="error"
-                onClick={setShowDrawer.bind(null, true)}
-              >
-                Cancel
-              </Button>
-            </CancelButtonContainer>
-          )}
-        </div>
-      </div>
+            </SwapperContainer>
+            <div
+              style={{
+                display: 'flex',
+              }}
+            >
+              <InternalDetailsContainer>
+                <Line />
+                {!!step.explorerUrl && (
+                  <div>
+                    {step.explorerUrl.map((item, index) => (
+                      <InternalDetail key={index}>
+                        <DescriptionContainer>
+                          <CheckCircleIcon color="success" />
+                          <Description variant="body2">
+                            {!item.description ? (
+                              <b>View transaction</b>
+                            ) : (
+                              <b>
+                                {item.description.substring(0, 1).toUpperCase()}
+                                {item.description.substring(1)}
+                              </b>
+                            )}
+                          </Description>
+                        </DescriptionContainer>
+                        <StyledAnchor
+                          href={item.url}
+                          target="_blank"
+                          rel="noreferrer"
+                          key={index}
+                        >
+                          TX-Link
+                        </StyledAnchor>
+                      </InternalDetail>
+                    ))}
+                    {step.status === 'failed' && (
+                      <InternalDetail>
+                        <DescriptionContainer>
+                          <InfoCircleIcon color="error" />
+                          <Error variant="body2">Step failed</Error>
+                        </DescriptionContainer>
+                      </InternalDetail>
+                    )}
+                  </div>
+                )}
+              </InternalDetailsContainer>
+            </div>
+            {index + 1 === pendingSwap.steps.length && <ArrowDown />}
+            <StepDetail
+              logo={step.toLogo}
+              symbol={step.toSymbol}
+              // @ts-ignore
+              chainLogo={step.toBlockchainLogo}
+              blockchain={step.toBlockchain}
+              amount={step.outputAmount || ''}
+            />
+          </StepContainer>
+        ))}
+
+        <Divider size={32} />
+      </SwapFlowContainer>
       <Drawer
         onClose={setShowDrawer.bind(null, false)}
         open={showDrawer}
@@ -244,24 +393,19 @@ export function SwapHistory(props: PropTypes) {
         anchor="bottom"
         title="Cancel Progress"
         content={
-          <>
-            <Alert type="warning">
-              <Typography variant="body2">
-                <p>
-                  Warning: Rango <u>neither reverts</u> your transaction
-                  <u>nor refunds</u> you if you've already signed and sent a
-                  transaction to the blockchain since it's out of Rango's
-                  control. Beware that "Cancel" only stops next steps from being
-                  executed.
-                </p>
-                <Spacer size={12} direction="vertical" />
-                <p>
-                  If you have already signed your transaction to blockchain, you
-                  should wait for that to complete or rollback
-                </p>
-              </Typography>
-            </Alert>
-          </>
+          <Alert type="warning">
+            <p>
+              Warning: Rango <u>neither reverts</u> your transaction&nbsp;
+              <u>nor refunds</u> you if you've already signed and sent a
+              transaction to the blockchain since it's out of Rango's control.
+              Beware that "Cancel" only stops next steps from being executed.
+            </p>
+            <Spacer size={12} direction="vertical" />
+            <p>
+              If you have already signed your transaction to blockchain, you
+              should wait for that to complete or rollback
+            </p>
+          </Alert>
         }
         footer={
           <div

package/src/containers/SwapHistory/SwapMessages.tsx

@@ -0,0 +1,116 @@
+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;
+};
+
+const DetailedMessage = styled('div', {
+  width: '90%',
+  overflowWrap: 'break-word',
+  color: '$error500 !important',
+});
+
+export type PropTypes = {
+  currentStepBlockchain: string;
+  switchNetwork?: () => Promise<any>;
+  shortMessage: string;
+  detailedMessage: { content: string; long: boolean };
+  type?: 'success' | 'error' | 'warning' | 'info';
+  lastConvertedTokenInFailedSwap?: {
+    symbol: string;
+    blockchain: string;
+    outputAmount: string;
+  };
+};
+
+const SuccessText = styled(Typography, {
+  color: '$success500 !important',
+});
+
+export const SwapMessages: React.FC<PropTypes> = (props) => {
+  const {
+    shortMessage,
+    detailedMessage,
+    currentStepBlockchain,
+    type,
+    lastConvertedTokenInFailedSwap,
+  } = props;
+
+  const [expandedMessage, setExpandedMessage] = useState(false);
+
+  const allowedNumberOfChars = detailedMessage.long ? 0 : 150;
+
+  const shouldShowMoreDetailsButton =
+    !expandedMessage && detailedMessage.content.length > allowedNumberOfChars;
+
+  return (
+    <Alert
+      type={getAlertType(type)}
+      title={shortMessage}
+      {...(shouldShowMoreDetailsButton && {
+        footer: (
+          <Button
+            variant="outlined"
+            type="primary"
+            onClick={setExpandedMessage.bind(null, (prevState) => !prevState)}
+          >
+            Show more details
+          </Button>
+        ),
+      })}
+      {...(!!props.switchNetwork && {
+        footer: (
+          <Button
+            variant={'outlined'}
+            type="primary"
+            onClick={props.switchNetwork}
+          >
+            Change network to {currentStepBlockchain}
+          </Button>
+        ),
+      })}
+    >
+      {!!detailedMessage.content ? (
+        <DetailedMessage>
+          <Typography variant="body2">
+            {shouldShowMoreDetailsButton && !expandedMessage
+              ? detailedMessage.content.substring(0, allowedNumberOfChars) +
+                (allowedNumberOfChars > 0 ? '...' : '')
+              : detailedMessage.content}
+          </Typography>
+        </DetailedMessage>
+      ) : null}
+      {!!lastConvertedTokenInFailedSwap && (
+        <>
+          <p>
+            <Typography variant="body2">
+              Don't worry, your fund is&nbsp;
+            </Typography>
+            <SuccessText variant="body2">
+              <b>Safe</b>
+            </SuccessText>
+          </p>
+
+          <p>
+            <Typography variant="body2">
+              It is converted to &nbsp;
+              <u>{lastConvertedTokenInFailedSwap.outputAmount}</u>
+              &nbsp;
+            </Typography>
+            <SuccessText variant="body2">
+              <b>{lastConvertedTokenInFailedSwap.symbol}&nbsp;</b>
+            </SuccessText>
+            <Typography variant="body2">on your&nbsp;</Typography>
+            <SuccessText variant="body2">
+              <b>{lastConvertedTokenInFailedSwap.blockchain}&nbsp;</b>
+            </SuccessText>
+            <Typography variant="body2">wallet</Typography>
+          </p>
+        </>
+      )}
+    </Alert>
+  );
+};

package/src/containers/SwapHistory/mock.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { RoutingResultType, TransactionType } from 'rango-sdk';
 import { PendingSwap } from '../History/types';
 

package/src/containers/index.ts

@@ -1,4 +1,3 @@
 export * from './ConfirmSwap';
-export * from './ConfirmWallets';
 export * from './History';
 export * from './SwapHistory';

package/src/helper/index.ts

@@ -1,2 +1,16 @@
 export const containsText = (text: string, searchText: string) =>
   text.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
+
+export const getConciseAddress = (
+  address: string | null,
+  maxChars = 8,
+  ellipsisLength = 3
+): string | null => {
+  if (!address) return null;
+  if (address.length < 2 * maxChars + ellipsisLength) return address;
+  const start = Math.ceil((address.length - maxChars) / 2);
+  const end = address.length - maxChars;
+  return `${address.substr(start, maxChars)}${'.'.repeat(
+    ellipsisLength
+  )}${address.substr(end)}`;
+};