From 4f0e8c8fda09170cdc65ee9d54425e9a7328017f Mon Sep 17 00:00:00 2001
From: Izumi Hoshino <admin@chiamine.jp>
Date: Thu, 10 Aug 2023 00:48:09 +0900
Subject: [PATCH] Fixed inconsistent step count (#1986)

---
 packages/gui/src/components/plot/add/PlotAddForm.tsx | 12 ++++++++++--
 packages/gui/src/components/plot/add/PlotAddNFT.tsx  | 10 +++++++++-
 .../components/plotNFT/select/PlotNFTSelectBase.tsx  |  9 ++++++++-
 .../components/plotNFT/select/PlotNFTSelectPool.tsx  |  3 +++
 4 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/packages/gui/src/components/plot/add/PlotAddForm.tsx b/packages/gui/src/components/plot/add/PlotAddForm.tsx
index e7ee49228f..c7aa9b0792 100644
--- a/packages/gui/src/components/plot/add/PlotAddForm.tsx
+++ b/packages/gui/src/components/plot/add/PlotAddForm.tsx
@@ -57,6 +57,7 @@ export default function PlotAddForm(props: Props) {
   const [createNewPoolWallet] = useCreateNewPoolWalletMutation();
   const addNFTref = useRef();
   const { state } = useLocation();
+  const [showingPoolDetails, setShowingPoolDetails] = useState<boolean>(false);
 
   const otherDefaults = {
     plotCount: 1,
@@ -214,14 +215,21 @@ export default function PlotAddForm(props: Props) {
     }
   };
 
+  function adjustStepCount() {
+    if (showingPoolDetails) {
+      step++;
+    }
+    return step++;
+  }
+
   return (
     <Form methods={methods} onSubmit={handleSubmit}>
       <Flex flexDirection="column" gap={3}>
         <Back variant="h5" form>
           <Trans>Add a Plot</Trans>
         </Back>
-        <PlotAddNFT ref={addNFTref} step={step++} />
-        <PlotAddChoosePlotter step={step++} onChange={handlePlotterChanged} />
+        <PlotAddNFT ref={addNFTref} step={step++} setShowingPoolDetails={setShowingPoolDetails} />
+        <PlotAddChoosePlotter step={adjustStepCount()} onChange={handlePlotterChanged} />
         <PlotAddChooseKeys step={step++} currencyCode={currencyCode} fingerprint={fingerprint} />
         <PlotAddChooseSize step={step++} plotter={plotter} />
         <PlotAddSelectFinalDirectory step={step++} plotter={plotter} />
diff --git a/packages/gui/src/components/plot/add/PlotAddNFT.tsx b/packages/gui/src/components/plot/add/PlotAddNFT.tsx
index bfb5d460af..ed1880936a 100644
--- a/packages/gui/src/components/plot/add/PlotAddNFT.tsx
+++ b/packages/gui/src/components/plot/add/PlotAddNFT.tsx
@@ -10,16 +10,23 @@ import PlotNFTSelectPool from '../../plotNFT/select/PlotNFTSelectPool';
 
 type Props = {
   step: number;
+  setShowingPoolDetails?: (showing: boolean) => void;
 };
 
 const PlotAddNFT = forwardRef((props: Props, ref) => {
-  const { step } = props;
+  const { step, setShowingPoolDetails } = props;
   const { nfts, external, loading } = usePlotNFTs();
   const [showCreatePlotNFT, setShowCreatePlotNFT] = useState<boolean>(false);
   const { setValue } = useFormContext();
 
   const hasNFTs = !!nfts?.length || !!external?.length;
 
+  React.useEffect(() => {
+    if (!showCreatePlotNFT && setShowingPoolDetails) {
+      setShowingPoolDetails(false);
+    }
+  }, [showCreatePlotNFT, setShowingPoolDetails]);
+
   function handleJoinPool() {
     setShowCreatePlotNFT(true);
     setValue('createNFT', true);
@@ -37,6 +44,7 @@ const PlotAddNFT = forwardRef((props: Props, ref) => {
         onCancel={handleCancelPlotNFT}
         ref={ref}
         title={<Trans>Create a Plot NFT</Trans>}
+        setShowingPoolDetails={setShowingPoolDetails}
         description={
           <Trans>
             Join a pool and get consistent XCH farming rewards. The average returns are the same, but it is much less
diff --git a/packages/gui/src/components/plotNFT/select/PlotNFTSelectBase.tsx b/packages/gui/src/components/plotNFT/select/PlotNFTSelectBase.tsx
index 36efa8beac..51aeec9df3 100644
--- a/packages/gui/src/components/plotNFT/select/PlotNFTSelectBase.tsx
+++ b/packages/gui/src/components/plotNFT/select/PlotNFTSelectBase.tsx
@@ -21,10 +21,11 @@ type Props = {
   description?: ReactNode;
   hideFee?: boolean;
   feeDescription?: ReactNode;
+  setShowingPoolDetails?: (showing: boolean) => void;
 };
 
 export default function PlotNFTSelectBase(props: Props) {
-  const { step, onCancel, title, description, hideFee = false, feeDescription } = props;
+  const { step, onCancel, title, description, hideFee = false, feeDescription, setShowingPoolDetails } = props;
   // const { nfts } = usePlotNFTs();
   const { setValue } = useFormContext();
   const self = useWatch<boolean>({
@@ -59,6 +60,12 @@ export default function PlotNFTSelectBase(props: Props) {
 
   const showPoolInfo = !self && !!poolUrl;
 
+  React.useEffect(() => {
+    if (setShowingPoolDetails) {
+      setShowingPoolDetails(showPoolInfo);
+    }
+  }, [showPoolInfo, setShowingPoolDetails]);
+
   return (
     <>
       <CardStep
diff --git a/packages/gui/src/components/plotNFT/select/PlotNFTSelectPool.tsx b/packages/gui/src/components/plotNFT/select/PlotNFTSelectPool.tsx
index a5cb7e34a4..a354486679 100644
--- a/packages/gui/src/components/plotNFT/select/PlotNFTSelectPool.tsx
+++ b/packages/gui/src/components/plotNFT/select/PlotNFTSelectPool.tsx
@@ -66,6 +66,7 @@ type Props = {
     poolUrl?: string;
   };
   feeDescription?: ReactNode;
+  setShowingPoolDetails?: (showing: boolean) => void;
 };
 
 const PlotNFTSelectPool = forwardRef((props: Props, ref) => {
@@ -79,6 +80,7 @@ const PlotNFTSelectPool = forwardRef((props: Props, ref) => {
     submitTitle = <Trans>Create</Trans>,
     hideFee = false,
     feeDescription,
+    setShowingPoolDetails,
   } = props;
   const [loading, setLoading] = useState<boolean>(false);
   const { balance, loading: walletLoading } = useStandardWallet();
@@ -161,6 +163,7 @@ const PlotNFTSelectPool = forwardRef((props: Props, ref) => {
           description={description}
           hideFee={hideFee}
           feeDescription={feeDescription}
+          setShowingPoolDetails={setShowingPoolDetails}
         />
         {exceededNFTLimit && (
           <Alert severity="error">