@rango-dev/ui 0.1.10 → 0.1.11-next.11

package/src/containers/SwapHistory/SwapHistory.tsx

@@ -12,6 +12,7 @@ import {
   Drawer,
   Spinner,
   Divider,
+  Image,
 } from '../../components';
 import { styled } from '../../theme';
 import { PendingSwap } from '../History/types';
@@ -24,7 +25,19 @@ import {
 export const SwapperContainer = styled('div', {
   display: 'flex',
   alignItems: 'center',
-  marginLeft: '6px',
+  paddingLeft: '$4',
+  variants: {
+    created: {
+      true: {
+        filter: 'grayscale(100%)',
+      },
+    },
+    running: {
+      true: {
+        animation: `${pulse} 2s ease-in-out infinite`,
+      },
+    },
+  },
 });
 
 export const BodyError = styled('div', {
@@ -38,16 +51,16 @@ export const ErrorMsg = styled(Typography, {
   color: '$error',
 });
 
+export const FeeContainer = styled('div', {
+  paddingLeft: '$16',
+  color: '$neutrals800'
+});
+
 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',
 });
@@ -62,7 +75,7 @@ export const Dot = styled('div', {
   height: '$8',
   backgroundColor: '$foreground',
   borderRadius: '4px',
-  marginLeft: '$8',
+  marginLeft: '11px',
 });
 
 export const ArrowDown = styled('div', {
@@ -71,13 +84,12 @@ export const ArrowDown = styled('div', {
   borderLeft: '5px solid transparent',
   borderRight: '5px solid transparent',
   borderTop: '5px solid $foreground',
-  marginLeft: '$8',
+  marginLeft: '$10',
 });
 
 const StyledAnchor = styled('a', {
   color: '$primary',
   fontWeight: '$600',
-  marginLeft: '$12',
 });
 
 const SwapInfoContainer = styled('div', {
@@ -89,11 +101,14 @@ const SwapInfoContainer = styled('div', {
 
 const InternalDetailsContainer = styled('div', {
   display: 'flex',
+  '.details': {
+    padding: '$8 0',
+  },
 });
 
 const InternalDetail = styled('div', {
   display: 'flex',
-  padding: '$10',
+  margin: '$12 0 $12 $20',
 });
 
 const DescriptionContainer = styled('div', {
@@ -103,17 +118,13 @@ const DescriptionContainer = styled('div', {
 
 const Description = styled(Typography, {
   color: '$success',
-  marginLeft: '$8',
-});
-
-const Error = styled(Description, {
-  color: '$error',
+  paddingLeft: '$4',
 });
 
 export const Line = styled('div', {
   width: '0',
   minHeight: '$16',
-  marginLeft: '$12',
+  marginLeft: '14px',
   border: '1px dashed $foreground',
   borderRadius: 'inherit',
 });
@@ -132,6 +143,7 @@ const Row = styled('div', {
     display: 'flex',
     alignItems: 'center',
     color: '$neutrals800',
+    justifyContent: 'flex-end',
   },
   '.status': {
     fontWeight: 'bold',
@@ -156,28 +168,14 @@ const RequestId = styled('div', {
 });
 
 const ExtraDetails = styled('div', {
-  padding: '$8 0',
+  padding: '0',
   color: '$neutrals600',
-  fontSize: '$12',
-});
-
-const StepContainer = styled('div', {
-  variants: {
-    hasNotStarted: {
-      true: {
-        filter: 'grayscale(100%)',
-      },
-    },
-    isRunning: {
-      true: {
-        animation: `${pulse} 2s ease-in-out infinite`,
-      },
-    },
-  },
+  fontSize: '$10',
 });
 
 const SwapFlowContainer = styled('div', {
   overflowY: 'auto',
+  padding: '$8 $4 $2 $4',
 });
 
 export type PropTypes = {
@@ -238,28 +236,29 @@ export function SwapHistory(props: PropTypes) {
       <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 className="name">
+              Request Id:
+              <span
+                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>
+              </span>
             </div>
-          </Row>
-          <Row>
-            <div className="name">Status:</div>
-            <div className={`value status ${pendingSwap?.status || ''}`}>
-              {pendingSwap?.status}
-              {pendingSwap?.status === 'running' && (
-                <Spinner size={16} color="primary" />
-              )}
+            <div className="name">
+              <span className={`value status ${pendingSwap?.status || ''}`}>
+                {pendingSwap?.status}
+                {pendingSwap?.status === 'running' && (
+                  <Spinner size={16} color="primary" />
+                )}
+              </span>
+              <ExtraDetails>{date}</ExtraDetails>
             </div>
           </Row>
-          <ExtraDetails>{date}</ExtraDetails>
         </SwapInfoContainer>
         {/* TODO: It was temporarily removed to find a better solution. 
 
@@ -272,25 +271,16 @@ export function SwapHistory(props: PropTypes) {
           <SwapMessages {...extraMessageProps} />
         )}
 
-        <Divider size={32} />
+        <Divider size={16} />
 
         {pendingSwap?.steps.map((step, index) => (
-          <StepContainer
-            key={index}
-            hasNotStarted={step.status === 'created'}
-            isRunning={
-              step.status != 'failed' &&
-              step.status != 'success' &&
-              step.status != 'created'
-            }
-          >
+          <div key={index}>
             {index === 0 && (
               <RelativeContainer>
                 <StepDetail
                   logo={step.fromLogo}
                   symbol={step.fromSymbol}
-                  // @ts-ignore
-                  chainLogo={step.fromBlockchainLogo}
+                  chainLogo={step.fromBlockchainLogo || ''}
                   blockchain={step.fromBlockchain}
                   amount={pendingSwap.inputAmount}
                 />
@@ -298,33 +288,28 @@ export function SwapHistory(props: PropTypes) {
               </RelativeContainer>
             )}
             <Line />
-            <SwapperContainer>
-              <SwapperLogo
-                // @ts-ignore
-                src={step.swapperLogo}
+            <SwapperContainer
+              created={step.status === 'created'}
+              running={!['created', 'success', 'failed'].includes(step.status)}
+            >
+              <Image
+                src={step.swapperLogo || ''}
                 alt={step.swapperId}
+                size={20}
               />
-              <div>
-                <Typography ml={4} variant="caption">
-                  {
-                    // @ts-ignore
-                    step.swapperType
-                  }{' '}
-                  from {step.fromSymbol} to {step.toSymbol}
-                  via {step.swapperId}
+
+              <FeeContainer>
+                <Typography variant="body2">
+                  {step.swapperType === 'DEX' ? 'Swap' : 'Bridge'} via{' '}
+                  {step.swapperId}
                 </Typography>
                 <Fee>
                   <GasIcon />
-                  <Typography ml={4} variant="caption">
-                    $
-                    {
-                      // @ts-ignore
-                      step.feeInUsd
-                    }{' '}
-                    estimated gas fee
+                  <Typography variant="body2">
+                    &nbsp; ${step.feeInUsd} estimated gas fee
                   </Typography>
                 </Fee>
-              </div>
+              </FeeContainer>
             </SwapperContainer>
             <div
               style={{
@@ -333,55 +318,62 @@ export function SwapHistory(props: PropTypes) {
             >
               <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>
-                )}
+                <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>
             </div>
             {index + 1 === pendingSwap.steps.length && <ArrowDown />}
             <StepDetail
               logo={step.toLogo}
               symbol={step.toSymbol}
-              // @ts-ignore
-              chainLogo={step.toBlockchainLogo}
+              chainLogo={step.toBlockchainLogo || ''}
               blockchain={step.toBlockchain}
               amount={step.outputAmount || ''}
+              estimatedAmount={step.expectedOutputAmountHumanReadable || ''}
+              success={step.status === 'success'}
             />
-          </StepContainer>
+          </div>
         ))}
 
         <Divider size={32} />
@@ -394,17 +386,11 @@ export function SwapHistory(props: PropTypes) {
         title="Cancel Progress"
         content={
           <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>
+            <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={

package/src/helper/index.ts

@@ -1,11 +1,12 @@
-export const containsText = (text: string, searchText: string) =>
-  text.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
+export function containsText(text: string, searchText: string): boolean {
+  return text.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
+}
 
-export const getConciseAddress = (
+export function getConciseAddress(
   address: string | null,
   maxChars = 8,
   ellipsisLength = 3
-): string | null => {
+): string | null {
   if (!address) return null;
   if (address.length < 2 * maxChars + ellipsisLength) return address;
   const start = Math.ceil((address.length - maxChars) / 2);
@@ -13,4 +14,18 @@ export const getConciseAddress = (
   return `${address.substr(start, maxChars)}${'.'.repeat(
     ellipsisLength
   )}${address.substr(end)}`;
-};
+}
+
+export function limitDecimalPlaces(
+  numberString: string,
+  maxDecimalPlaces = 4
+): string {
+  const number = parseFloat(numberString);
+  if (isNaN(number))
+    return numberString; // Return the original string if it's not a valid number
+  else {
+    const multiplier = Math.pow(10, maxDecimalPlaces);
+    const roundedNumber = Math.round(number * multiplier) / multiplier;
+    return roundedNumber.toString();
+  }
+}