fix confirm send button for transfer and staking (#1008)

make-software · Jun 13, 2024 · ceb8924 · ceb8924
1 parent bed07d0
commit ceb8924
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 11 deletions.
diff --git a/src/apps/popup/pages/stakes/index.tsx b/src/apps/popup/pages/stakes/index.tsx
@@ -2,6 +2,7 @@ import { DeployUtil } from 'casper-js-sdk';
 import React, { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
+import styled from 'styled-components';
 
 import {
   AuctionManagerEntryPoint,
@@ -42,6 +43,7 @@ import { useSubmitButton } from '@hooks/use-submit-button';
 import { createAsymmetricKey } from '@libs/crypto/create-asymmetric-key';
 import {
   AlignedFlexRow,
+  CenteredFlexRow,
   ErrorPath,
   FooterButtonsContainer,
   HeaderPopup,
@@ -72,6 +74,24 @@ import { calculateSubmitButtonDisabled } from '@libs/ui/forms/get-submit-button-
 import { useStakesForm } from '@libs/ui/forms/stakes-form';
 import { CSPRtoMotes, formatNumber, motesToCSPR } from '@libs/ui/utils';
 
+const ScrollContainer = styled(VerticalSpaceContainer)<{
+  isHidden: boolean;
+}>`
+  opacity: ${({ isHidden }) => (isHidden ? '0' : '1')};
+  height: ${({ isHidden }) => (isHidden ? '0' : '24px')};
+  visibility: ${({ isHidden }) => (isHidden ? 'hidden' : 'visible')};
+  transition:
+    opacity 0.2s ease-in-out,
+    height 0.5s ease-in-out;
+`;
+
+const ConfirmButtonContainer = styled(FooterButtonsContainer)<{
+  isHidden: boolean;
+}>`
+  gap: ${({ isHidden }) => (isHidden ? '0' : '16px')};
+  transition: gap 0.5s ease-in-out;
+`;
+
 export const StakesPage = () => {
   const [stakeStep, setStakeStep] = useState(StakeSteps.Validator);
   const [validatorPublicKey, setValidatorPublicKey] = useState('');
@@ -117,9 +137,11 @@ export const StakesPage = () => {
     getValues: getValuesNewValidatorForm
   } = newValidatorForm;
 
-  const { isSubmitButtonDisable, setIsSubmitButtonDisable } = useSubmitButton(
-    stakeStep === StakeSteps.Confirm
-  );
+  const {
+    isSubmitButtonDisable,
+    setIsSubmitButtonDisable,
+    isAdditionalTextVisible
+  } = useSubmitButton(stakeStep === StakeSteps.Confirm);
 
   const submitStake = async () => {
     setIsSubmitButtonDisable(true);
@@ -428,7 +450,14 @@ export const StakesPage = () => {
       </FooterButtonsContainer>
     ),
     [StakeSteps.Confirm]: (
-      <FooterButtonsContainer>
+      <ConfirmButtonContainer isHidden={!isAdditionalTextVisible}>
+        <ScrollContainer isHidden={!isAdditionalTextVisible}>
+          <CenteredFlexRow>
+            <Typography type="captionRegular">
+              <Trans t={t}>Scroll down to check all details</Trans>
+            </Typography>
+          </CenteredFlexRow>
+        </ScrollContainer>
         <Button
           color={isActiveAccountFromLedger ? 'primaryRed' : 'primaryBlue'}
           type="button"
@@ -450,7 +479,7 @@ export const StakesPage = () => {
             <Trans t={t}>{confirmButtonText}</Trans>
           )}
         </Button>
-      </FooterButtonsContainer>
+      </ConfirmButtonContainer>
     ),
     [StakeSteps.ConfirmWithLedger]: ledgerFooterButton ? (
       ledgerFooterButton()

diff --git a/src/apps/popup/pages/transfer/index.tsx b/src/apps/popup/pages/transfer/index.tsx
@@ -72,6 +72,7 @@ const ScrollContainer = styled(VerticalSpaceContainer)<{
 }>`
   opacity: ${({ isHidden }) => (isHidden ? '0' : '1')};
   height: ${({ isHidden }) => (isHidden ? '0' : '24px')};
+  visibility: ${({ isHidden }) => (isHidden ? 'hidden' : 'visible')};
   transition:
     opacity 0.2s ease-in-out,
     height 0.5s ease-in-out;
@@ -148,9 +149,11 @@ export const TransferPage = () => {
     [contactPublicKeys, recipientPublicKey]
   );
 
-  const { isSubmitButtonDisable, setIsSubmitButtonDisable } = useSubmitButton(
-    transferStep === TransactionSteps.Confirm
-  );
+  const {
+    isSubmitButtonDisable,
+    setIsSubmitButtonDisable,
+    isAdditionalTextVisible
+  } = useSubmitButton(transferStep === TransactionSteps.Confirm);
 
   const sendDeploy = (signDeploy: DeployUtil.Deploy) => {
     sendSignDeploy(signDeploy, nodeUrl)
@@ -427,8 +430,8 @@ export const TransferPage = () => {
       <></>
     ),
     [TransactionSteps.Confirm]: (
-      <ConfirmButtonContainer isHidden={!isSubmitButtonDisable}>
-        <ScrollContainer isHidden={!isSubmitButtonDisable}>
+      <ConfirmButtonContainer isHidden={!isAdditionalTextVisible}>
+        <ScrollContainer isHidden={!isAdditionalTextVisible}>
           <CenteredFlexRow>
             <Typography type="captionRegular">
               <Trans t={t}>Scroll down to check all details</Trans>

diff --git a/src/hooks/use-submit-button.ts b/src/hooks/use-submit-button.ts
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 
 export const useSubmitButton = (isConfirmStep: boolean) => {
   const [isSubmitButtonDisable, setIsSubmitButtonDisable] = useState(true);
+  const [isAdditionalTextVisible, setIsAdditionalTextVisible] = useState(true);
 
   useEffect(() => {
     if (!isConfirmStep) return;
@@ -15,6 +16,7 @@ export const useSubmitButton = (isConfirmStep: boolean) => {
         layoutContentContainer.scrollHeight
     ) {
       setIsSubmitButtonDisable(false);
+      setIsAdditionalTextVisible(false);
     }
 
     const handleScroll = () => {
@@ -27,6 +29,7 @@ export const useSubmitButton = (isConfirmStep: boolean) => {
 
         if (bottom) {
           setIsSubmitButtonDisable(false);
+          setIsAdditionalTextVisible(false);
         }
       }
     };
@@ -42,6 +45,7 @@ export const useSubmitButton = (isConfirmStep: boolean) => {
 
   return {
     isSubmitButtonDisable,
-    setIsSubmitButtonDisable
+    setIsSubmitButtonDisable,
+    isAdditionalTextVisible
   };
 };