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

package/src/containers/ConfirmWallets/ConfirmWallets.tsx

@@ -1,6 +1,5 @@
-import { BestRouteResponse } from 'rango-sdk';
-import React, { PropsWithChildren } from 'react';
-import { Alert } from '../../components';
+import React, { PropsWithChildren, ReactNode } from 'react';
+import { Alert, Spacer } from '../../components';
 import { Button } from '../../components/Button';
 import { SecondaryPage } from '../../components/SecondaryPage/SecondaryPage';
 import { SelectableWalletList } from '../../components/SelectableWalletList';
@@ -8,6 +7,12 @@ import { Typography } from '../../components/Typography';
 import { styled } from '../../theme';
 import { SelectableWallet } from '../../types';
 
+const Section = styled('div', {
+  paddingBottom: '$32',
+  marginBottom: '$32',
+  borderBottom: '1px solid $neutrals400',
+});
+
 const Footer = styled('div', {
   display: 'flex',
   alignItems: 'center',
@@ -21,10 +26,29 @@ const ConfirmButton = styled(Button, {
   marginTop: '$16',
 });
 
+const Container = styled('div', {
+  paddingBottom: '$24',
+
+  '.title': {
+    paddingBottom: '$8',
+    display: 'flex',
+    alignItems: 'center',
+  },
+  '.num': {
+    backgroundColor: '$neutrals300',
+    display: 'inline-flex',
+    width: '24px',
+    height: '24px',
+    color: '$neutrals800',
+    borderRadius: '50%',
+    fontSize: '$14',
+    border: '1px solid $neutrals400',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
 export interface PropTypes {
-  swap: BestRouteResponse | null;
-  fromAmount: string;
-  toAmount: string;
   onBack: () => void;
   onConfirm?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   confirmDisabled?: boolean;
@@ -34,26 +58,22 @@ export interface PropTypes {
   onChange: (w: SelectableWallet) => void;
   isExperimentalChain?: (wallet: string) => boolean;
   handleConnectChain?: (wallet: string) => void;
+  previewInputs?: ReactNode;
+  previewRoutes?: ReactNode;
 }
 export function ConfirmWallets(props: PropsWithChildren<PropTypes>) {
   const {
     onBack,
     loading,
     onConfirm,
-    swap,
     requiredWallets,
     selectableWallets,
     onChange,
     confirmDisabled,
     isExperimentalChain,
     handleConnectChain,
-    fromAmount,
-    toAmount,
   } = props;
 
-  const firstStep = swap?.result?.swaps[0];
-  const lastStep = swap?.result?.swaps[swap.result?.swaps.length - 1];
-
   return (
     <SecondaryPage
       textField={false}
@@ -69,50 +89,55 @@ export function ConfirmWallets(props: PropsWithChildren<PropTypes>) {
             onClick={onConfirm}
             disabled={confirmDisabled}
           >
-            Confirm
+            Confirm Swap
           </ConfirmButton>
         </Footer>
       }
     >
-      <>
-        <Typography variant="h6" mb={12}>
-          Confirm swap {fromAmount} {firstStep?.from.symbol} (
-          {firstStep?.from.blockchain}) to {toAmount} {lastStep?.to.symbol} (on
-          {lastStep?.to.blockchain})
-        </Typography>
-        {requiredWallets.map((wallet, index) => {
-          const list = selectableWallets.filter((w) => wallet === w.chain);
-          return (
-            <div key={index}>
-              <Typography variant="body2" mb={12} mt={12}>
-                {index + 1}) Your {wallet} Wallet
-              </Typography>
-              {list.length === 0 && (
-                <>
-                  <AlertContainer>
-                    <Alert type="error">
-                      <Typography variant="body2">{`You should connect a ${wallet} supported wallet`}</Typography>
-                    </Alert>
-                  </AlertContainer>
-                  {isExperimentalChain?.(wallet) && (
-                    <Button
-                      variant="contained"
-                      type="primary"
-                      align="grow"
-                      onClick={() => handleConnectChain?.(wallet)}
-                    >
-                      {`Add ${wallet} chain to Cosmos wallets`}
-                    </Button>
-                  )}
-                </>
-              )}
-              {list.length != 0 && (
-                <SelectableWalletList list={list} onChange={onChange} />
-              )}
+      {props.previewInputs || props.previewRoutes ? (
+        <Section>
+          {props.previewInputs}
+          {!!props.previewRoutes ? (
+            <Spacer size={16} direction="vertical" />
+          ) : null}
+          {props.previewRoutes}
+        </Section>
+      ) : null}
+
+      {requiredWallets.map((wallet, index) => {
+        const list = selectableWallets.filter((w) => wallet === w.chain);
+        return (
+          <Container key={index}>
+            <div className="title">
+              <div className="num">{index + 1}</div>
+              <Spacer size={8} />
+              <Typography variant="body2">Your {wallet} Wallet</Typography>
             </div>
-          );
-        })}
-      </>
+            {list.length === 0 && (
+              <>
+                <AlertContainer>
+                  <Alert type="error">
+                    You need to connect a compatible wallet with {wallet}
+                  </Alert>
+                </AlertContainer>
+                {isExperimentalChain?.(wallet) && (
+                  <Button
+                    variant="contained"
+                    type="primary"
+                    align="grow"
+                    onClick={() => handleConnectChain?.(wallet)}
+                  >
+                    {`Add ${wallet} chain to Cosmos wallets`}
+                  </Button>
+                )}
+              </>
+            )}
+            {list.length != 0 && (
+              <SelectableWalletList list={list} onChange={onChange} />
+            )}
+          </Container>
+        );
+      })}
     </SecondaryPage>
   );
 }

package/src/theme.ts

@@ -44,6 +44,8 @@ const theme = {
     error300: '#FF3333',
     error500: '#FF0000',
     error700: '#E60000',
+    // Only use this color when you are going to use white for both dark and light theme.
+    white: '#fff',
   },
   space: {
     2: '2px',
@@ -98,8 +100,8 @@ const theme = {
   borderWidths: {},
   borderStyles: {},
   radii: {
-    5: '5px',
-    10: '10px',
+    5: '8px',
+    10: '12px',
   },
   shadows: {
     s: '0px 3px 5px 3px #f0f2f5, 0px 6px 10px 3px #f0f2f5, 0px 1px 18px 3px #f0f2f5',