@rango-dev/ui 0.1.11-next.6 → 0.1.11

package/src/containers/SwapHistory/SwapHistory.tsx

@@ -52,7 +52,8 @@ export const ErrorMsg = styled(Typography, {
 });
 
 export const FeeContainer = styled('div', {
-  paddingLeft: '$4',
+  paddingLeft: '$16',
+  color: '$neutrals800'
 });
 
 export const Fee = styled('div', {
@@ -89,7 +90,6 @@ export const ArrowDown = styled('div', {
 const StyledAnchor = styled('a', {
   color: '$primary',
   fontWeight: '$600',
-  marginLeft: '$12',
 });
 
 const SwapInfoContainer = styled('div', {
@@ -101,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', {
@@ -115,7 +118,7 @@ const DescriptionContainer = styled('div', {
 
 const Description = styled(Typography, {
   color: '$success',
-  marginLeft: '$8',
+  paddingLeft: '$4',
 });
 
 export const Line = styled('div', {
@@ -140,6 +143,7 @@ const Row = styled('div', {
     display: 'flex',
     alignItems: 'center',
     color: '$neutrals800',
+    justifyContent: 'flex-end',
   },
   '.status': {
     fontWeight: 'bold',
@@ -164,14 +168,14 @@ const RequestId = styled('div', {
 });
 
 const ExtraDetails = styled('div', {
-  padding: '$8 0',
+  padding: '0',
   color: '$neutrals600',
-  fontSize: '$12',
+  fontSize: '$10',
 });
 
 const SwapFlowContainer = styled('div', {
   overflowY: 'auto',
-  paddingTop: '$8',
+  padding: '$8 $4 $2 $4',
 });
 
 export type PropTypes = {
@@ -232,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. 
 
@@ -266,7 +271,7 @@ export function SwapHistory(props: PropTypes) {
           <SwapMessages {...extraMessageProps} />
         )}
 
-        <Divider size={32} />
+        <Divider size={16} />
 
         {pendingSwap?.steps.map((step, index) => (
           <div key={index}>
@@ -294,13 +299,13 @@ export function SwapHistory(props: PropTypes) {
               />
 
               <FeeContainer>
-                <Typography variant="caption">
-                  {step.swapperType} from {step.fromSymbol} to {step.toSymbol}
-                  &nbsp; via {step.swapperId}
+                <Typography variant="body2">
+                  {step.swapperType === 'DEX' ? 'Swap' : 'Bridge'} via{' '}
+                  {step.swapperId}
                 </Typography>
                 <Fee>
                   <GasIcon />
-                  <Typography variant="caption">
+                  <Typography variant="body2">
                     &nbsp; ${step.feeInUsd} estimated gas fee
                   </Typography>
                 </Fee>
@@ -313,34 +318,34 @@ export function SwapHistory(props: PropTypes) {
             >
               <InternalDetailsContainer>
                 <Line />
-                <div>
+                <div className="details">
                   {!!step.explorerUrl && (
                     <div>
                       {step.explorerUrl.map((item, index) => (
                         <InternalDetail key={index}>
                           <DescriptionContainer>
-                            <CheckCircleIcon color="success" />
+                            <Divider size={4} />
+                            <CheckCircleIcon color="primary" />
                             <Description variant="body2">
-                              {!item.description ? (
-                                <b>View transaction</b>
-                              ) : (
-                                <b>
-                                  {item.description
-                                    .substring(0, 1)
-                                    .toUpperCase()}
-                                  {item.description.substring(1)}
-                                </b>
-                              )}
+                              <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>
-                          <StyledAnchor
-                            href={item.url}
-                            target="_blank"
-                            rel="noreferrer"
-                            key={index}
-                          >
-                            TX-Link
-                          </StyledAnchor>
                         </InternalDetail>
                       ))}
                     </div>
@@ -381,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={