fix: Update max bond (#119)

Co-authored-by: Frank Li <frank.li@gluwa.com>
gluwa · Apr 4, 2024 · 709a565 · 709a565
1 parent fe36f09
commit 709a565
Show file tree

Hide file tree

Showing 11 changed files with 127 additions and 119 deletions.
diff --git a/index.html b/index.html
@@ -47,7 +47,10 @@
       property="og:description"
       content="Creditcoin Staking Dashboard is the easiest way to stake CTC, check validator stats, and manage your nominations. Stake on Creditcoin (CTC)."
     />
-    <meta property="og:image" content="https://files.gluwa.com/media/meta/cc3-staking-creditcoin-org/20240213/og-image.png" />
+    <meta
+      property="og:image"
+      content="https://files.gluwa.com/media/meta/cc3-staking-creditcoin-org/20240213/og-image.png"
+    />
 
     <!-- Twitter -->
     <meta property="twitter:card" content="summary_large_image" />
@@ -60,7 +63,10 @@
       property="twitter:description"
       content="Creditcoin Staking Dashboard is the easiest way to stake CTC, check validator stats, and manage your nominations. Stake on Creditcoin (CTC)."
     />
-    <meta property="twitter:image" content="https://files.gluwa.com/media/meta/cc3-staking-creditcoin-org/20240213/og-image.png" />
+    <meta
+      property="twitter:image"
+      content="https://files.gluwa.com/media/meta/cc3-staking-creditcoin-org/20240213/og-image.png"
+    />
     <link
       rel="manifest"
       href="/favicons/creditcoin/site.webmanifest"

diff --git a/src/library/Form/Bond/BondFeedback.tsx b/src/library/Form/Bond/BondFeedback.tsx
@@ -65,9 +65,8 @@ export const BondFeedback = ({
 
   // current bond value BigNumber
   const bondBn = unitToPlanck(bond.bond, units);
-
   // whether bond is disabled
-  const [bondDisabled, setBondDisabled] = useState(false);
+  const [bondDisabled, setBondDisabled] = useState<boolean>(false);
 
   // bond minus tx fees if too much
   const enoughToCoverTxFees = freeToBond.minus(bondBn).isGreaterThan(txFees);
@@ -76,32 +75,13 @@ export const BondFeedback = ({
     ? bondBn
     : BigNumber.max(bondBn.minus(txFees), 0);
 
-  // update bond on account change
-  useEffect(() => {
-    setBond({
-      bond: defaultBondStr,
-    });
-  }, [activeAccount]);
-
-  // handle errors on input change
-  useEffect(() => {
-    handleErrors();
-  }, [bond, txFees]);
-
-  // update max bond after txFee sync
-  useEffect(() => {
-    if (!disableTxFeeUpdate) {
-      if (bondBn.isGreaterThan(freeToBond)) {
-        setBond({ bond: String(freeToBond) });
-      }
-    }
-  }, [txFees]);
+  // handler to set bond as a string
+  const handleSetBond = (newBond: { bond: BigNumber }) => {
+    setBond({ bond: newBond.bond.toString() });
+  };
 
   // add this component's setBond to setters
-  setters.push({
-    set: setBond,
-    current: bond,
-  });
+  setters.push(handleSetBond);
 
   // bond amount to minimum threshold.
   const minBondBn =
@@ -161,6 +141,27 @@ export const BondFeedback = ({
     setErrors(newErrors);
   };
 
+  // update bond on account change
+  useEffect(() => {
+    setBond({
+      bond: defaultBondStr,
+    });
+  }, [activeAccount]);
+
+  // handle errors on input change
+  useEffect(() => {
+    handleErrors();
+  }, [bond, txFees]);
+
+  // update max bond after txFee sync
+  useEffect(() => {
+    if (!disableTxFeeUpdate) {
+      if (bondBn.isGreaterThan(freeToBond)) {
+        setBond({ bond: String(planckToUnit(freeToBond, units)) });
+      }
+    }
+  }, [txFees]);
+
   return (
     <>
       {errors.map((err, i) => (

diff --git a/src/library/Form/Bond/BondInput.tsx b/src/library/Form/Bond/BondInput.tsx
@@ -46,14 +46,16 @@ export const BondInput = ({
       return;
     }
     setLocalBond(val);
-    updateParentState(val);
+    updateParentState(new BigNumber(val));
   };
 
   // apply bond to parent setters.
-  const updateParentState = (val: string) => {
-    for (const s of setters) {
-      s.set({
-        ...s.current,
+  const updateParentState = (val: BigNumber) => {
+    if (new BigNumber(val).isNaN()) {
+      return;
+    }
+    for (const setter of setters) {
+      setter({
         bond: val,
       });
     }
@@ -91,7 +93,7 @@ export const BondInput = ({
             disabled={disabled || syncing || freeToBond.isZero()}
             onClick={() => {
               setLocalBond(freeToBond.toString());
-              updateParentState(freeToBond.toString());
+              updateParentState(freeToBond);
             }}
           />
         </section>

diff --git a/src/library/Form/Unbond/UnbondFeedback.tsx b/src/library/Form/Unbond/UnbondFeedback.tsx
@@ -54,31 +54,16 @@ export const UnbondFeedback = ({
     bond: defaultValue,
   });
 
+  // handler to set bond as a string
+  const handleSetBond = (newBond: { bond: BigNumber }) => {
+    setBond({ bond: newBond.bond.toString() });
+  };
+
   // current bond value BigNumber
   const bondBn = unitToPlanck(String(bond.bond), units);
 
-  // update bond on account change
-  useEffect(() => {
-    setBond({
-      bond: defaultValue,
-    });
-  }, [activeAccount]);
-
-  // handle errors on input change
-  useEffect(() => {
-    handleErrors();
-  }, [bond, txFees]);
-
-  // if resize is present, handle on error change
-  useEffect(() => {
-    if (setLocalResize) setLocalResize();
-  }, [errors]);
-
   // add this component's setBond to setters
-  setters.push({
-    set: setBond,
-    current: bond,
-  });
+  setters.push(handleSetBond);
 
   // bond amount to minimum threshold
   const minBondBn =
@@ -144,6 +129,23 @@ export const UnbondFeedback = ({
     setErrors(newErrors);
   };
 
+  // update bond on account change
+  useEffect(() => {
+    setBond({ bond: defaultValue });
+  }, [activeAccount]);
+
+  // handle errors on input change
+  useEffect(() => {
+    handleErrors();
+  }, [bond, txFees]);
+
+  // if resize is present, handle on error change
+  useEffect(() => {
+    if (setLocalResize) {
+      setLocalResize();
+    }
+  }, [errors]);
+
   return (
     <>
       {errors.map((err, i) => (

diff --git a/src/library/Form/Unbond/UnbondInput.tsx b/src/library/Form/Unbond/UnbondInput.tsx
@@ -16,7 +16,7 @@ export const UnbondInput = ({
   disabled,
   unbondToMin,
   setters = [],
-  value = 0,
+  value = '0',
   active,
 }: UnbondInputProps) => {
   const { t } = useTranslation('library');
@@ -27,11 +27,11 @@ export const UnbondInput = ({
   const activeUnit = planckToUnit(active, networkData.units);
 
   // the current local bond value.
-  const [localBond, setLocalBond] = useState(value);
+  const [localBond, setLocalBond] = useState<string>(value);
 
   // reset value to default when changing account.
   useEffect(() => {
-    setLocalBond(defaultValue ?? 0);
+    setLocalBond(defaultValue ?? '0');
   }, [activeAccount]);
 
   // handle change for unbonding.
@@ -41,14 +41,13 @@ export const UnbondInput = ({
       return;
     }
     setLocalBond(val);
-    updateParentState(val);
+    updateParentState(new BigNumber(val));
   };
 
   // apply bond to parent setters.
-  const updateParentState = (val: any) => {
-    for (const s of setters) {
-      s.set({
-        ...s.current,
+  const updateParentState = (val: BigNumber) => {
+    for (const setter of setters) {
+      setter({
         bond: val,
       });
     }
@@ -88,7 +87,7 @@ export const UnbondInput = ({
             text={t('max')}
             disabled={disabled}
             onClick={() => {
-              setLocalBond(unbondToMinUnit);
+              setLocalBond(unbondToMinUnit.toString());
               updateParentState(unbondToMinUnit);
             }}
           />

diff --git a/src/library/Form/types.ts b/src/library/Form/types.ts
@@ -72,10 +72,10 @@ export interface UnbondFeedbackProps {
 export interface UnbondInputProps {
   active: BigNumber;
   unbondToMin: BigNumber;
-  defaultValue: number | string;
+  defaultValue: string;
   disabled: boolean;
   setters: any;
-  value: any;
+  value: string;
 }
 
 export interface NominateStatusBarProps {

diff --git a/src/modals/Bond/index.tsx b/src/modals/Bond/index.tsx
@@ -69,6 +69,11 @@ export const Bond = () => {
   // feedback errors to trigger modal resize
   const [feedbackErrors, setFeedbackErrors] = useState<string[]>([]);
 
+  // handler to set bond as a string
+  const handleSetBond = (newBond: { bond: BigNumber }) => {
+    setBond({ bond: newBond.bond.toString() });
+  };
+
   // bond minus tx fees.
   const enoughToCoverTxFees: boolean = freeToBond
     .minus(bond.bond)
@@ -86,11 +91,6 @@ export const Bond = () => {
     );
   }
 
-  // update bond value on task change.
-  useEffect(() => {
-    setBond({ bond: freeToBond.toFixed() });
-  }, [freeToBond.toFixed()]);
-
   // determine whether this is a pool or staking transaction.
   const determineTx = (bondToSubmit: BigNumber) => {
     let tx = null;
@@ -138,6 +138,11 @@ export const Bond = () => {
     submitExtrinsic.proxySupported
   );
 
+  // update bond value on task change.
+  useEffect(() => {
+    handleSetBond({ bond: freeToBond });
+  }, [freeToBond.toString()]);
+
   // modal resize on form update
   useEffect(
     () => setModalResize(),
@@ -164,12 +169,7 @@ export const Bond = () => {
             setFeedbackErrors(errors);
           }}
           defaultBond={null}
-          setters={[
-            {
-              set: setBond,
-              current: bond,
-            },
-          ]}
+          setters={[handleSetBond]}
           parentErrors={warnings}
           txFees={largestTxFee}
         />

diff --git a/src/modals/JoinPool/index.tsx b/src/modals/JoinPool/index.tsx
@@ -61,6 +61,11 @@ export const JoinPool = () => {
     bond: planckToUnit(totalPossibleBond, units).toFixed(),
   });
 
+  // handler to set bond as a string
+  const handleSetBond = (newBond: { bond: BigNumber }) => {
+    setBond({ bond: newBond.bond.toString() });
+  };
+
   // Updated claim permission value
   const [claimPermission, setClaimPermission] = useState<
     ClaimPermission | undefined
@@ -138,12 +143,7 @@ export const JoinPool = () => {
             setFeedbackErrors(errors);
           }}
           defaultBond={null}
-          setters={[
-            {
-              set: setBond,
-              current: bond,
-            },
-          ]}
+          setters={[handleSetBond]}
           parentErrors={warnings}
           txFees={largestTxFee}
         />

diff --git a/src/modals/Unbond/index.tsx b/src/modals/Unbond/index.tsx
@@ -88,6 +88,11 @@ export const Unbond = () => {
   // bond valid
   const [bondValid, setBondValid] = useState<boolean>(false);
 
+  // handler to set bond as a string
+  const handleSetBond = (newBond: { bond: BigNumber }) => {
+    setBond({ bond: newBond.bond.toString() });
+  };
+
   // feedback errors to trigger modal resize
   const [feedbackErrors, setFeedbackErrors] = useState<string[]>([]);
 
@@ -98,11 +103,6 @@ export const Unbond = () => {
       : BigNumber.max(freeToUnbond.minus(minJoinBond), 0)
     : BigNumber.max(freeToUnbond.minus(minNominatorBond), 0);
 
-  // update bond value on task change
-  useEffect(() => {
-    setBond({ bond: unbondToMin.toFixed() });
-  }, [freeToUnbond.toFixed()]);
-
   // tx to submit
   const getTx = () => {
     let tx = null;
@@ -173,7 +173,12 @@ export const Unbond = () => {
     warnings.push(t('unbondErrorNoFunds', { unit }));
   }
 
-  // modal resize on form update
+  // Update bond value on task change.
+  useEffect(() => {
+    handleSetBond({ bond: unbondToMin });
+  }, [freeToUnbond.toString()]);
+
+  // Modal resize on form update.
   useEffect(
     () => setModalResize(),
     [bond, notEnoughFunds, feedbackErrors.length, warnings.length]
@@ -197,12 +202,7 @@ export const Unbond = () => {
             setBondValid(valid);
             setFeedbackErrors(errors);
           }}
-          setters={[
-            {
-              set: setBond,
-              current: bond,
-            },
-          ]}
+          setters={[handleSetBond]}
           txFees={txFees}
         />
         <ModalNotes withPadding>