[ENG-5456] Restyle batch sign psbt (to RC) (#678)

* Restyle batch sign psbt * Improve container styling * Bypass custom arrow icon styles
secretkeylabs · Oct 17, 2024 · 82daf26 · 82daf26
1 parent e36f456
commit 82daf26
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 56 deletions.
diff --git a/src/app/components/batchPsbtSigning/index.styled.ts b/src/app/components/batchPsbtSigning/index.styled.ts
@@ -1,5 +1,5 @@
 import BottomModal from '@components/bottomModal';
-import { StickyHorizontalSplitButtonContainer } from '@ui-library/common.styled';
+import Button from '@ui-library/button';
 import styled from 'styled-components';
 
 export const OuterContainer = styled.div`
@@ -25,6 +25,14 @@ export const ModalContainer = styled(Container)({
   marginTop: 0,
 });
 
+export const HeaderContainer = styled.div((props) => ({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  marginBottom: props.theme.space.l,
+  alignItems: 'center',
+}));
+
 export const LoaderContainer = styled.div((props) => ({
   display: 'flex',
   flex: 1,
@@ -33,15 +41,9 @@ export const LoaderContainer = styled.div((props) => ({
   marginTop: props.theme.space.l,
 }));
 
-export const TransparentButtonContainer = styled.div((props) => ({
-  marginRight: props.theme.space.s,
-  width: '100%',
-}));
-
 export const ReviewTransactionText = styled.h1((props) => ({
   ...props.theme.headline_s,
   color: props.theme.colors.white_0,
-  marginBottom: props.theme.space.l,
   textAlign: 'left',
 }));
 
@@ -70,13 +72,18 @@ export const StyledSheet = styled(BottomModal)`
   background-color: #181818 !important;
 `;
 
-export const TxReviewModalControls = styled.div((props) => ({
+export const ButtonsContainer = styled.div((props) => ({
   display: 'flex',
   columnGap: props.theme.space.s,
   padding: `${props.theme.space.l} ${props.theme.space.m}`,
 }));
 
-export const ButtonsContainer = styled(StickyHorizontalSplitButtonContainer)`
-  padding-left: ${(props) => props.theme.space.m};
-  padding-right: ${(props) => props.theme.space.m};
-`;
+export const InlineButtonsContainer = styled(ButtonsContainer)((props) => ({
+  columnGap: props.theme.space.xs,
+  padding: 'inherit',
+}));
+
+export const SmallButton = styled(Button)(() => ({
+  minWidth: 44,
+  padding: 'initial',
+}));
diff --git a/src/app/components/batchPsbtSigning/index.tsx b/src/app/components/batchPsbtSigning/index.tsx
@@ -32,13 +32,14 @@ import {
   BundleLinkText,
   ButtonsContainer,
   Container,
+  HeaderContainer,
+  InlineButtonsContainer,
   LoaderContainer,
   ModalContainer,
   OuterContainer,
   ReviewTransactionText,
+  SmallButton,
   StyledSheet,
-  TransparentButtonContainer,
-  TxReviewModalControls,
 } from './index.styled';
 
 type ParsedPsbt = {
@@ -223,9 +224,7 @@ function BatchPsbtSigning({ onSigned, psbts, onCancel, onPostSignDone }: BatchPs
             </Container>
           </OuterContainer>
           <ButtonsContainer>
-            <TransparentButtonContainer>
-              <Button title={t('CANCEL')} variant="secondary" onClick={onCancel} />
-            </TransparentButtonContainer>
+            <Button title={t('CANCEL')} variant="secondary" onClick={onCancel} />
             <Button
               title={t('CONFIRM_ALL')}
               onClick={() => onSignPsbtConfirmed()}
@@ -236,56 +235,92 @@ function BatchPsbtSigning({ onSigned, psbts, onCancel, onPostSignDone }: BatchPs
       );
     };
 
-    const reviewDoneText = hasDuplicateInputs ? t('CONFIRM_ALL') : t('DONE');
-    const onReviewDone = hasDuplicateInputs
-      ? () => onSignPsbtConfirmed()
-      : () => {
-          setReviewTransaction(false);
-          setCurrentPsbtIndex(0);
-        };
+    const onReviewDone = () => {
+      setReviewTransaction(false);
+      setCurrentPsbtIndex(0);
+    };
 
     return (
       <>
         <AccountHeaderComponent disableMenuOption disableAccountSwitch />
         {renderBody()}
-        <StyledSheet header="" visible={reviewTransaction || hasDuplicateInputs} onClose={onCancel}>
+        <StyledSheet
+          header=""
+          visible={reviewTransaction || hasDuplicateInputs}
+          onClose={hasDuplicateInputs ? undefined : onReviewDone}
+        >
           <OuterContainer>
             <ModalContainer>
-              <ReviewTransactionText>
-                {t('TRANSACTION')} {currentPsbtIndex + 1}/{parsedPsbts.length}
-              </ReviewTransactionText>
+              <HeaderContainer>
+                <ReviewTransactionText>
+                  {t('TRANSACTION')} {currentPsbtIndex + 1}/{parsedPsbts.length}
+                </ReviewTransactionText>
+                {hasDuplicateInputs && (
+                  <InlineButtonsContainer>
+                    <SmallButton
+                      title=""
+                      variant="secondary"
+                      onClick={() => {
+                        setCurrentPsbtIndex((prevIndex) => prevIndex - 1);
+                      }}
+                      icon={<ArrowLeft size={16} weight="bold" />}
+                      disabled={currentPsbtIndex === 0}
+                    />
+                    <SmallButton
+                      title=""
+                      variant="secondary"
+                      onClick={() => {
+                        setCurrentPsbtIndex((prevIndex) => prevIndex + 1);
+                      }}
+                      icon={<ArrowRight size={16} weight="bold" />}
+                      iconPosition="right"
+                      disabled={currentPsbtIndex === parsedPsbts.length - 1}
+                    />
+                  </InlineButtonsContainer>
+                )}
+              </HeaderContainer>
               {!!parsedPsbts[currentPsbtIndex] && (
                 <TxSummaryContext.Provider value={individualTxSummaryContext}>
                   <TransactionSummary />
                 </TxSummaryContext.Provider>
               )}
             </ModalContainer>
           </OuterContainer>
-          <TxReviewModalControls>
-            <Button
-              title={t('PREVIOUS')}
-              variant="secondary"
-              onClick={() => {
-                setCurrentPsbtIndex((prevIndex) => prevIndex - 1);
-              }}
-              icon={<ArrowLeft color="white" size={16} weight="bold" />}
-              disabled={currentPsbtIndex === 0}
-            />
-            {currentPsbtIndex < parsedPsbts.length - 1 && (
-              <Button
-                title={t('NEXT')}
-                variant="secondary"
-                onClick={() => {
-                  setCurrentPsbtIndex((prevIndex) => prevIndex + 1);
-                }}
-                icon={<ArrowRight color="white" size={16} weight="bold" />}
-                iconPosition="right"
-              />
+          <ButtonsContainer>
+            {hasDuplicateInputs && (
+              <>
+                <Button title={t('CANCEL')} variant="secondary" onClick={onCancel} />
+                <Button
+                  title={t('CONFIRM_ALL')}
+                  onClick={() => onSignPsbtConfirmed()}
+                  loading={isSigning}
+                />
+              </>
             )}
-            {currentPsbtIndex === parsedPsbts.length - 1 && (
-              <Button title={reviewDoneText} onClick={onReviewDone} />
+            {!hasDuplicateInputs && (
+              <>
+                <Button
+                  title={t('PREVIOUS')}
+                  variant="secondary"
+                  onClick={() => {
+                    setCurrentPsbtIndex((prevIndex) => prevIndex - 1);
+                  }}
+                  icon={<ArrowLeft size={16} weight="bold" />}
+                  disabled={currentPsbtIndex === 0}
+                />
+                <Button
+                  title={t('NEXT')}
+                  variant="secondary"
+                  onClick={() => {
+                    setCurrentPsbtIndex((prevIndex) => prevIndex + 1);
+                  }}
+                  icon={<ArrowRight size={16} weight="bold" />}
+                  iconPosition="right"
+                  disabled={currentPsbtIndex === parsedPsbts.length - 1}
+                />
+              </>
             )}
-          </TxReviewModalControls>
+          </ButtonsContainer>
         </StyledSheet>
       </>
     );

diff --git a/src/app/components/bottomModal/index.tsx b/src/app/components/bottomModal/index.tsx
@@ -32,7 +32,7 @@ type Props = {
   header: string;
   visible: boolean;
   children: React.ReactNode;
-  onClose: () => void;
+  onClose?: () => void;
   overlayStylesOverriding?: {};
   contentStylesOverriding?: {};
   className?: string;
@@ -86,9 +86,11 @@ function BottomModal({
     >
       <RowContainer>
         <BottomModalHeaderText>{header}</BottomModalHeaderText>
-        <ButtonImage onClick={onClose}>
-          <XCircle color={theme.colors.white_200} weight="fill" size="28" />
-        </ButtonImage>
+        {onClose && (
+          <ButtonImage onClick={onClose}>
+            <XCircle color={theme.colors.white_200} weight="fill" size="28" />
+          </ButtonImage>
+        )}
       </RowContainer>
       {children}
     </CustomisedModal>

diff --git a/src/app/ui-library/button.tsx b/src/app/ui-library/button.tsx
@@ -147,7 +147,7 @@ function Button({
       ) : (
         <>
           {icon && iconPosition === 'left' && <CenterDiv>{icon}</CenterDiv>}
-          <div>{title}</div>
+          {title && <div>{title}</div>}
           {icon && iconPosition === 'right' && <CenterDiv>{icon}</CenterDiv>}
         </>
       )}