fix: stake sheet amount error validation after submission (#1188)

* fix: dappStaking error, do not display when submitting extrinsic * fix: nominationPoolsStakeSideSheet error, do not display when submitting extrinsic * fix: subtensorStakeSideSheet, do not display error when submitting extrinsic * fix: slpxStakeSideSheet, do not display error when submitting extrinsic * fix: dapp staking error message handling * fix: storybook types
TalismanSociety · Oct 11, 2024 · 6c2227a · 6c2227a
1 parent 24054fa
commit 6c2227a
Show file tree

Hide file tree

Showing 9 changed files with 20 additions and 4 deletions.
diff --git a/apps/portal/src/components/recipes/AddStakeDialog/AddStakeDialog.tsx b/apps/portal/src/components/recipes/AddStakeDialog/AddStakeDialog.tsx
@@ -37,7 +37,7 @@ const AddStakeForm = (props: AddStakeFormProps) => (
       leadingLabel="Available to stake"
       trailingLabel={props.availableToStake}
       leadingSupportingText={props.fiatAmount}
-      trailingSupportingText={props.inputSupportingText}
+      trailingSupportingText={props.confirmState !== 'pending' && props.inputSupportingText}
       trailingIcon={<TextInput.LabelButton onClick={props.onRequestMaxAmount}>Max</TextInput.LabelButton>}
       value={props.amount}
       onChange={event => props.onChangeAmount(event.target.value)}

diff --git a/apps/portal/src/components/recipes/DappStakingForm/DappStakingForm.stories.tsx b/apps/portal/src/components/recipes/DappStakingForm/DappStakingForm.stories.tsx
@@ -19,6 +19,7 @@ export const Default: Story = {
     amountInput: (
       <DappStakingForm.AmountInput
         amount="2 ASTAR"
+        isLoading={false}
         fiatAmount="$1.00"
         availableToStake="1 ASTAR"
         onChangeAmount={() => {}}

diff --git a/apps/portal/src/components/recipes/DappStakingForm/DappStakingForm.tsx b/apps/portal/src/components/recipes/DappStakingForm/DappStakingForm.tsx
@@ -28,6 +28,7 @@ type AmountInputProps =
       fiatAmount: ReactNode
       availableToStake: ReactNode
       error?: string
+      isLoading: boolean
     }
   | {
       disabled: true
@@ -50,7 +51,9 @@ const AmountInput = (props: AmountInputProps) => {
       leadingSupportingText={
         props.disabled
           ? ''
-          : Maybe.of(props.error).mapOr(props.fiatAmount, x => <TextInput.ErrorLabel>{x}</TextInput.ErrorLabel>)
+          : Maybe.of(props.isLoading ? undefined : props.error).mapOr(props.fiatAmount, x => (
+              <TextInput.ErrorLabel>{x}</TextInput.ErrorLabel>
+            ))
       }
       trailingSupportingText={
         <Button

diff --git a/apps/portal/src/components/recipes/StakeForm/StakeForm.stories.tsx b/apps/portal/src/components/recipes/StakeForm/StakeForm.stories.tsx
@@ -30,6 +30,7 @@ Default.args = {
   amountInput: (
     <StakeForm.AmountInput
       amount="1000"
+      isLoading={false}
       onChangeAmount={() => {}}
       onRequestMaxAmount={() => {}}
       fiatAmount="$0.00"

diff --git a/apps/portal/src/components/recipes/StakeForm/StakeForm.tsx b/apps/portal/src/components/recipes/StakeForm/StakeForm.tsx
@@ -29,6 +29,7 @@ type AmountInputProps = {
   fiatAmount: ReactNode
   availableToStake: ReactNode
   error?: string
+  isLoading: boolean
 }
 
 const AmountInput = (props: AmountInputProps) => (
@@ -42,7 +43,11 @@ const AmountInput = (props: AmountInputProps) => (
     leadingLabel="Available to stake"
     trailingLabel={props.availableToStake}
     leadingSupportingText={
-      isNilOrWhitespace(props.error) ? props.fiatAmount : <TextInput.ErrorLabel>{props.error}</TextInput.ErrorLabel>
+      isNilOrWhitespace(props.error) || props.isLoading ? (
+        props.fiatAmount
+      ) : (
+        <TextInput.ErrorLabel>{props.error}</TextInput.ErrorLabel>
+      )
     }
     trailingSupportingText={<SurfaceChip onClick={props.onRequestMaxAmount}>Max</SurfaceChip>}
     css={{ fontSize: '3rem' }}

diff --git a/apps/portal/src/components/widgets/staking/dappStaking/StakeSideSheet.tsx b/apps/portal/src/components/widgets/staking/dappStaking/StakeSideSheet.tsx
@@ -160,6 +160,7 @@ const StakeForm = (props: StakeFormProps) => {
           availableToStake={available.decimalAmount.toLocaleString()}
           assetSelector={props.assetSelector}
           error={error?.message}
+          isLoading={extrinsic.state === 'loading'}
         />
       }
       dappSelectionInProgress={props.dappSelectionInProgress}

diff --git a/apps/portal/src/components/widgets/staking/substrate/StakeForm.tsx b/apps/portal/src/components/widgets/staking/substrate/StakeForm.tsx
@@ -491,6 +491,7 @@ export const ControlledStakeForm = (props: { assetSelector: ReactNode; account?:
             fiatAmount={localizedFiatAmount}
             availableToStake={availableBalance.decimalAmount?.toLocaleString() ?? '...'}
             error={inputError?.message}
+            isLoading={joinPoolExtrinsic.state === 'loading'}
           />
         }
         poolInfo={

diff --git a/apps/portal/src/components/widgets/staking/subtensor/StakeForm.tsx b/apps/portal/src/components/widgets/staking/subtensor/StakeForm.tsx
@@ -36,6 +36,7 @@ export const StakeForm = (props: StakeFormProps) => {
           availableToStake={transferable.decimalAmount.toLocaleString()}
           assetSelector={props.assetSelector}
           error={error?.message}
+          isLoading={extrinsic.state === 'loading'}
         />
       }
       selectionInProgress={props.selectionInProgress}

diff --git a/apps/portal/src/components/widgets/staking/subtensor/SubtensorStakingForm.tsx b/apps/portal/src/components/widgets/staking/subtensor/SubtensorStakingForm.tsx
@@ -28,6 +28,7 @@ type AmountInputProps =
       fiatAmount: ReactNode
       availableToStake: ReactNode
       error?: string
+      isLoading: boolean
     }
   | {
       disabled: true
@@ -50,7 +51,9 @@ const AmountInput = (props: AmountInputProps) => {
       leadingSupportingText={
         props.disabled
           ? ''
-          : Maybe.of(props.error).mapOr(props.fiatAmount, x => <TextInput.ErrorLabel>{x}</TextInput.ErrorLabel>)
+          : Maybe.of(props.isLoading ? undefined : props.error).mapOr(props.fiatAmount, x => (
+              <TextInput.ErrorLabel>{x}</TextInput.ErrorLabel>
+            ))
       }
       trailingSupportingText={
         <Button