fix: resolve issue with closing button on the Referanda unlock modal (#1547)

Co-authored-by: Amir Ekbatanifard <[email protected]>

Author: Nick-1979

packages/extension-polkagate/src/fullscreen/accountDetails/unlock/Review.tsx

@@ -58,7 +58,7 @@ export default function Review ({ address, api, classToUnlock, setDisplayPopup,
   const [txInfo, setTxInfo] = useState<TxInfo | undefined>();
   const [estimatedFee, setEstimatedFee] = useState<Balance>();
   const [params, setParams] = useState<SubmittableExtrinsic<'promise', ISubmittableResult>[]>();
-  const [step, setStep] = useState<number>(STEPS.REVIEW);
+  const [step, setStep] = useState<number>(STEPS.INDEX);
 
   const selectedProxyAddress = selectedProxy?.delegate as unknown as string;
 
@@ -113,12 +113,13 @@ export default function Review ({ address, api, classToUnlock, setDisplayPopup,
     setDisplayPopup(undefined);
   }, [setDisplayPopup]);
 
-  const closeProxy = useCallback(() => setStep(STEPS.REVIEW), []);
+  const closeProxy = useCallback(() => setStep(STEPS.INDEX), []);
 
   return (
     <DraggableModal onClose={onClose} open={show}>
       <Grid alignItems='center' container justifyContent='center' maxHeight='650px' overflow='hidden'>
         <ModalTitle
+          closeProxy={closeProxy}
           icon={step === STEPS.PROXY ? faUserAstronaut : faLockOpen}
           onCancel={step === STEPS.PROXY ? closeProxy : onClose}
           setStep={setStep}
@@ -128,7 +129,7 @@ export default function Review ({ address, api, classToUnlock, setDisplayPopup,
         {isPasswordError &&
           <WrongPasswordAlert />
         }
-        {[STEPS.REVIEW, STEPS.SIGN_QR].includes(step) &&
+        {[STEPS.INDEX, STEPS.REVIEW, STEPS.SIGN_QR].includes(step) &&
           <>
             <SubTitle label={t('Review')} style={{ paddingTop: isPasswordError ? '10px' : '25px' }} />
             <Container disableGutters sx={{ px: '30px' }}>

packages/extension-polkagate/src/fullscreen/stake/solo/commonTasks/configurePayee/index.tsx

@@ -31,13 +31,17 @@ interface Props {
   setRefresh: React.Dispatch<React.SetStateAction<boolean>>
 }
 
-export const ModalTitle = ({ icon, onCancel, setStep, step, text }: { text: string, onCancel: () => void, setStep?: React.Dispatch<React.SetStateAction<number>>, icon: IconDefinition, step: number }): React.ReactElement<Props> => {
+export const ModalTitle = ({ closeProxy, icon, onCancel, setStep, step, text }: { closeProxy?: () => void, text: string, onCancel: () => void, setStep?: React.Dispatch<React.SetStateAction<number>>, icon: IconDefinition, step: number }): React.ReactElement<Props> => {
   const theme = useTheme();
   const { t } = useTranslation();
 
-  const closeProxy = useCallback(
-    () => setStep && setStep(STEPS.REVIEW)
-    , [setStep]);
+  const _closeProxy = useCallback(() => {
+    if (closeProxy) {
+      return closeProxy();
+    }
+
+    setStep && setStep(STEPS.REVIEW);
+  }, [closeProxy, setStep]);
 
   const onClose = useCallback(() => {
     setStep && setStep(STEPS.INDEX);
@@ -65,7 +69,7 @@ export const ModalTitle = ({ icon, onCancel, setStep, step, text }: { text: stri
             step === STEPS.INDEX
               ? onCancel
               : step === STEPS.PROXY
-                ? closeProxy
+                ? _closeProxy
                 : onClose
           }
         >