@rango-dev/ui 0.1.10-next.84 → 0.1.10-next.87

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.1.10-next.84",
+  "version": "0.1.10-next.87",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -72,10 +72,10 @@
     "@radix-ui/react-radio-group": "^1.1.1",
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tooltip": "^1.0.2",
-    "@rango-dev/wallets-shared": "^0.1.11-next.77",
+    "@rango-dev/wallets-shared": "^0.1.11-next.78",
     "@stitches/react": "^1.2.8",
     "@types/react-color": "^3.0.6",
-    "rango-sdk": "^0.1.16",
+    "rango-sdk": "^0.1.18",
     "react-color": "^2.19.3",
     "react-virtualized-auto-sizer": "^1.0.7",
     "react-window": "^1.8.8",

package/src/components/BestRoute/BestRoute.tsx

@@ -76,7 +76,7 @@ const ArrowRight = styled('div', {
   borderLeft: '5px solid $foreground',
 });
 
-const pulse = keyframes({
+export const pulse = keyframes({
   '0%': {
     opacity: 1,
   },

package/src/components/Drawer/Drawer.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { createPortal } from 'react-dom';
 import { styled } from '../../theme';
 import { CloseIcon } from '../Icon';
 import { Typography } from '../Typography';
+import { createPortal } from 'react-dom';
 
 export interface PropTypes {
   title?: string;
@@ -13,6 +13,7 @@ export interface PropTypes {
   anchor?: 'bottom' | 'left' | 'right' | 'top';
   showClose?: boolean;
   footer?: React.ReactNode;
+  container: Element | null;
 }
 
 const BackDrop = styled('div', {
@@ -21,18 +22,21 @@ const BackDrop = styled('div', {
   left: '0',
   width: '100%',
   height: '100%',
-
+  zIndex: 9999999,
   backgroundColor: 'rgba(0,0,0,.1)',
+  borderRadius: '$10',
 });
 
 const DrawerContainer = styled('div', {
-  position: 'fixed',
+  position: 'absolute',
   boxShadow: '$s',
   background: '$background',
   padding: '$20',
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'space-between',
+  zIndex: 9999999,
+  borderRadius: '$10',
 
   variants: {
     anchor: {
@@ -42,8 +46,6 @@ const DrawerContainer = styled('div', {
         height: '100%',
         minWidth: '300px',
         maxWidth: '90%',
-        borderTopRightRadius: '$10',
-        borderBottomRightRadius: '$10',
       },
       right: {
         top: 0,
@@ -51,24 +53,16 @@ const DrawerContainer = styled('div', {
         height: '100%',
         minWidth: '300px',
         maxWidth: '90%',
-        borderTopLeftRadius: '$10',
-        borderBottomLeftRadius: '$10',
       },
       bottom: {
         bottom: 0,
         width: '100%',
         maxHeight: '90%',
-        borderTopRightRadius: '$10',
-        borderTopLeftRadius: '$10',
-        
       },
       top: {
         top: 0,
         width: '100%',
         maxHeight: '90%',
-        borderBottomRightRadius: '$10',
-        borderBottomLeftRadius: '$10',
-        
       },
     },
   },
@@ -88,7 +82,7 @@ const Body = styled('div', {
 });
 const Footer = styled('footer', {
   width: '100%',
-  marginTop:'$28'
+  marginTop: '$28',
 });
 
 export function Drawer(props: PropTypes) {
@@ -101,6 +95,7 @@ export function Drawer(props: PropTypes) {
     anchor = 'bottom',
     showClose = false,
     footer,
+    container,
   } = props;
 
   const handleBackDropClick = (event: React.MouseEvent<HTMLDivElement>) => {
@@ -110,6 +105,7 @@ export function Drawer(props: PropTypes) {
   return (
     <>
       {open &&
+        container &&
         createPortal(
           <BackDrop onClick={handleBackDropClick}>
             <DrawerContainer anchor={anchor} style={containerStyle}>
@@ -121,7 +117,7 @@ export function Drawer(props: PropTypes) {
               <Footer>{footer}</Footer>
             </DrawerContainer>
           </BackDrop>,
-          document.body
+          container
         )}
     </>
   );

package/src/components/Icon/CopyIcon.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { SvgWithFillColor } from './common';
+import { IconProps } from './types';
+
+export const CopyIcon: React.FC<IconProps> = ({
+  size = 16,
+  color,
+  ...props
+}) => {
+  return (
+    <SvgWithFillColor
+      width={size}
+      height={size}
+      viewBox="0 0 64 64"
+      color={color}
+      xmlns="http://www.w3.org/2000/svg"
+      className="_icon"
+      {...props}
+    >
+      <g id="Text-files">
+        <path
+          d="M53.9791489,9.1429005H50.010849c-0.0826988,0-0.1562004,0.0283995-0.2331009,0.0469999V5.0228
+		C49.7777481,2.253,47.4731483,0,44.6398468,0h-34.422596C7.3839517,0,5.0793519,2.253,5.0793519,5.0228v46.8432999
+		c0,2.7697983,2.3045998,5.0228004,5.1378999,5.0228004h6.0367002v2.2678986C16.253952,61.8274002,18.4702511,64,21.1954517,64
+		h32.783699c2.7252007,0,4.9414978-2.1725998,4.9414978-4.8432007V13.9861002
+		C58.9206467,11.3155003,56.7043495,9.1429005,53.9791489,9.1429005z M7.1110516,51.8661003V5.0228
+		c0-1.6487999,1.3938999-2.9909999,3.1062002-2.9909999h34.422596c1.7123032,0,3.1062012,1.3422,3.1062012,2.9909999v46.8432999
+		c0,1.6487999-1.393898,2.9911003-3.1062012,2.9911003h-34.422596C8.5049515,54.8572006,7.1110516,53.5149002,7.1110516,51.8661003z
+		 M56.8888474,59.1567993c0,1.550602-1.3055,2.8115005-2.9096985,2.8115005h-32.783699
+		c-1.6042004,0-2.9097996-1.2608986-2.9097996-2.8115005v-2.2678986h26.3541946
+		c2.8333015,0,5.1379013-2.2530022,5.1379013-5.0228004V11.1275997c0.0769005,0.0186005,0.1504021,0.0469999,0.2331009,0.0469999
+		h3.9682999c1.6041985,0,2.9096985,1.2609005,2.9096985,2.8115005V59.1567993z"
+        />
+        <path
+          d="M38.6031494,13.2063999H16.253952c-0.5615005,0-1.0159006,0.4542999-1.0159006,1.0158005
+		c0,0.5615997,0.4544001,1.0158997,1.0159006,1.0158997h22.3491974c0.5615005,0,1.0158997-0.4542999,1.0158997-1.0158997
+		C39.6190491,13.6606998,39.16465,13.2063999,38.6031494,13.2063999z"
+        />
+        <path
+          d="M38.6031494,21.3334007H16.253952c-0.5615005,0-1.0159006,0.4542999-1.0159006,1.0157986
+		c0,0.5615005,0.4544001,1.0159016,1.0159006,1.0159016h22.3491974c0.5615005,0,1.0158997-0.454401,1.0158997-1.0159016
+		C39.6190491,21.7877007,39.16465,21.3334007,38.6031494,21.3334007z"
+        />
+        <path
+          d="M38.6031494,29.4603004H16.253952c-0.5615005,0-1.0159006,0.4543991-1.0159006,1.0158997
+		s0.4544001,1.0158997,1.0159006,1.0158997h22.3491974c0.5615005,0,1.0158997-0.4543991,1.0158997-1.0158997
+		S39.16465,29.4603004,38.6031494,29.4603004z"
+        />
+        <path
+          d="M28.4444485,37.5872993H16.253952c-0.5615005,0-1.0159006,0.4543991-1.0159006,1.0158997
+		s0.4544001,1.0158997,1.0159006,1.0158997h12.1904964c0.5615025,0,1.0158005-0.4543991,1.0158005-1.0158997
+		S29.0059509,37.5872993,28.4444485,37.5872993z"
+        />
+      </g>
+    </SvgWithFillColor>
+  );
+};
+
+CopyIcon.toString = () => '._icon';

package/src/components/Icon/index.ts

@@ -42,3 +42,4 @@ export { BagIcon } from './BagIcon';
 export { TimeIcon } from './TimeIcon';
 export { CloseIcon } from './CloseIcon';
 export { SignatureIcon } from './SignatureIcon';
+export { CopyIcon } from './CopyIcon';

package/src/components/Icon/types.tsx

@@ -41,4 +41,5 @@ export type Icon =
   | 'BagIcon'
   | 'TimeIcon'
   | 'CloseIcon'
-  | 'SignatureIcon';
+  | 'SignatureIcon'
+  | 'CopyIcon';

package/src/components/SecondaryPage/SecondaryPage.tsx

@@ -28,6 +28,7 @@ const Container = styled('div', {
   height: '100%',
   width: '100%',
   padding: '$12 0',
+  position: 'relative',
 
   '@lg': {
     padding: '$16 0',

package/src/components/StepDetail/StepDetail.tsx

@@ -86,7 +86,7 @@ export function StepDetail({
       </StepLogoContainer>
       <Detail pl={direction === 'horizontal'}>
         <Typography noWrap variant={direction === 'vertical' ? 'body2' : 'h6'}>
-          {parseFloat(amount).toFixed(2)} {symbol}
+          {amount ? parseFloat(amount).toFixed(2) : '?'} {symbol}
         </Typography>
         <SubTitle noWrap variant="caption">
           on {blockchain}

package/src/components/SwapContainer/SwapContainer.tsx

@@ -15,6 +15,7 @@ const MainContainer = styled('div', {
   alignItems: 'end',
   padding: '$16 $24',
   boxSizing: 'border-box',
+  position: 'relative',
 });
 
 const ContentContainer = styled('div', {
@@ -30,7 +31,7 @@ export function SwapContainer(props: PropsWithChildren<PropTypes>) {
   const { children, style } = props;
 
   return (
-    <MainContainer style={style}>
+    <MainContainer style={style} id="swap-box">
       <ContentContainer>{children}</ContentContainer>
     </MainContainer>
   );

package/src/components/SwapDetail/SwapDetail.tsx

@@ -127,10 +127,10 @@ export function SwapDetail({
               <ArrowRight />
             </Arrow>
             <StepDetail
-              logo={lastStep.fromLogo}
-              symbol={lastStep.fromSymbol}
-              chainLogo={lastStep.fromBlockchainLogo}
-              blockchain={lastStep.fromBlockchain}
+              logo={lastStep.toLogo}
+              symbol={lastStep.toSymbol}
+              chainLogo={lastStep.toBlockchainLogo}
+              blockchain={lastStep.toBlockchain}
               amount={lastStep.outputAmount}
             />
           </SwapContainer>

package/src/components/VirtualizedList/VirtualizedList.tsx

@@ -43,8 +43,8 @@ export function VirtualizedList(props: PropsWithChildren<PropTypes>) {
                 ref={ref}
                 itemSize={() => size}
                 itemCount={itemCount}
-                height={height}
-                width={width}
+                height={height || 0}
+                width={width || 0}
                 onItemsRendered={onItemsRendered}
               >
                 {({ index, style }) =>

package/src/components/index.ts

@@ -26,3 +26,4 @@ export * from './ColorPicker';
 export * from './Radio';
 export * from './TokenList';
 export * from './common';
+export * from './Drawer';

package/src/containers/History/History.tsx

@@ -35,6 +35,7 @@ const filteredHistory = (
 const Group = styled('div', {
   marginBottom: '$24',
   paddingRight: '$8',
+  maxHeight: '600px',
 });
 const GroupTitle = styled(Typography, {
   color: '$neutrals500',
@@ -78,7 +79,7 @@ export function History({
       onBack={onBack}
       textField={true}
       textFieldPlaceholder="Search By Blockchain Or Token"
-      title="History"
+      title="Swaps"
     >
       {(searchedFor) => {
         const filterSwaps = filteredHistory(list, searchedFor);

package/src/containers/SwapHistory/SwapHistory.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, { useState } from 'react';
 import {
   StepDetail,
   SecondaryPage,
@@ -6,6 +6,12 @@ import {
   Typography,
   CheckCircleIcon,
   InfoCircleIcon,
+  CopyIcon,
+  Spacer,
+  CheckSquareIcon,
+  Button,
+  Alert,
+  Drawer,
 } from '../../components';
 import { styled } from '../../theme';
 import {
@@ -17,6 +23,7 @@ import {
   Fee,
 } from '../ConfirmSwap/ConfirmSwap';
 import { PendingSwap } from '../History/types';
+import { pulse } from '../../components/BestRoute/BestRoute';
 
 const StyledAnchor = styled('a', {
   color: '$primary',
@@ -49,109 +56,243 @@ const Error = styled(Description, {
 
 export const Line = styled('div', {
   width: '0',
+  minHeight: '$16',
   marginLeft: '$12',
   border: '1px dashed $foreground',
   borderRadius: 'inherit',
 });
 
+const RequestIdContainer = styled('div', {
+  cursor: 'pointer',
+  backgroundColor: '$neutrals200',
+  padding: '$4',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderRadius: '$5',
+  marginBottom: '$16',
+});
+
+const RequestId = styled(Typography, {
+  color: '$warning500',
+});
+
+const CancelButtonContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+const StepContainer = styled('div', {
+  variants: {
+    hasNotStarted: {
+      true: {
+        filter: 'grayscale(100%)',
+      },
+    },
+    isRunning: {
+      true: {
+        animation: `${pulse} 2s ease-in-out infinite`,
+      },
+    },
+  },
+});
+
 export interface PropTypes {
   pendingSwap: PendingSwap;
+  onCopy: (requestId: string) => void;
   onBack: () => void;
+  isCopied: boolean;
+  onCancel: (requestId: string) => void;
 }
 
 export function SwapHistory(props: PropTypes) {
-  const { pendingSwap, onBack } = props;
+  const { pendingSwap, onBack, onCopy, isCopied, onCancel } = props;
+  const [showDrawer, setShowDrawer] = useState(false);
 
   return (
-    <SecondaryPage title="History" textField={false} onBack={onBack}>
-      <>
-        {pendingSwap?.steps.map((step, index) => (
-          <Fragment key={index}>
-            {index === 0 && (
-              <RelativeContainer>
-                <StepDetail
-                  logo={step.fromLogo}
-                  symbol={step.fromSymbol}
-                  chainLogo={step.fromBlockchainLogo}
-                  blockchain={step.fromBlockchain}
-                  amount={pendingSwap.inputAmount}
-                />
-                <Dot />
-              </RelativeContainer>
+    <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} />
             )}
-            <Line />
-            <SwapperContainer>
-              <SwapperLogo src={step.swapperLogo} alt={step.swapperId} />
-              <div>
-                <Typography ml={4} variant="caption">
-                  {step.swapperType} from {step.fromSymbol} to {step.toSymbol}
-                  via {step.swapperId}
-                </Typography>
-                <Fee>
-                  <GasIcon />
+          </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'
+              }
+            >
+              {index === 0 && (
+                <RelativeContainer>
+                  <StepDetail
+                    logo={step.fromLogo}
+                    symbol={step.fromSymbol}
+                    chainLogo={step.fromBlockchainLogo}
+                    blockchain={step.fromBlockchain}
+                    amount={pendingSwap.inputAmount}
+                  />
+                  <Dot />
+                </RelativeContainer>
+              )}
+              <Line />
+              <SwapperContainer>
+                <SwapperLogo src={step.swapperLogo} alt={step.swapperId} />
+                <div>
                   <Typography ml={4} variant="caption">
-                    {step.feeInUsd} estimated gas fee
+                    {step.swapperType} from {step.fromSymbol} to {step.toSymbol}
+                    via {step.swapperId}
                   </Typography>
-                </Fee>
+                  <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>
               </div>
-            </SwapperContainer>
-            <div
-              style={{
-                display: 'flex',
+              {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>
+      <Drawer
+        onClose={setShowDrawer.bind(null, false)}
+        open={showDrawer}
+        showClose={true}
+        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>
+          </>
+        }
+        footer={
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            <Button
+              variant="contained"
+              type="success"
+              onClick={setShowDrawer.bind(null, false)}
+            >
+              Skip
+            </Button>
+            <Spacer size={16} />
+            <Button
+              variant="contained"
+              type="error"
+              onClick={() => {
+                onCancel(pendingSwap.requestId);
+                setShowDrawer(false);
               }}
             >
-              <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}
-              chainLogo={step.toBlockchainLogo}
-              blockchain={step.toBlockchain}
-              amount={step.outputAmount}
-            />
-          </Fragment>
-        ))}
-      </>
+              Cancel progress
+            </Button>
+          </div>
+        }
+        container={document.getElementById('swap-box')!}
+      />
     </SecondaryPage>
   );
 }