Fix/401 double claiming (#402)

* Disable Claim CSOV option when none available. Closes #392 (#393) * Fixes #401 - prevents multiple txs being sent when claiming tokens Co-authored-by: soulBit <[email protected]>
DistributedCollective · Feb 18, 2021 · 4efc123 · 4efc123 · vercel · Feb 18, 2021
1 parent 0c621e9
commit 4efc123
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 14 deletions.
diff --git a/src/app/containers/WalletPage/components/CSovActions.tsx b/src/app/containers/WalletPage/components/CSovActions.tsx
@@ -30,7 +30,7 @@ export function CSovActions(props: Props) {
 
   return (
     <>
-      {processed ? (
+      {!processed ? (
         <p className="text-gold my-0" style={{ opacity: 0.3 }}>
           Already Claimed.
         </p>
@@ -41,7 +41,7 @@ export function CSovActions(props: Props) {
             text={t(translations.userAssets.actions.claimSov)}
             className="text-gold button-round"
             onClick={() => setDialog(DialogType.CLAIM)}
-            disabled={processed}
+            disabled={processed || parseInt(props.amount) === 0}
             loading={loading}
           />
           {/*<Button*/}

diff --git a/src/app/containers/WalletPage/components/ClaimDialiog.tsx b/src/app/containers/WalletPage/components/ClaimDialiog.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { Classes, Overlay } from '@blueprintjs/core';
 import classNames from 'classnames';
 import styles from './dialog.module.css';
@@ -10,7 +10,10 @@ import { Button } from '../../../components/Button';
 import { useAccount } from '../../../hooks/useAccount';
 import { useCacheCallWithValue } from '../../../hooks/useCacheCallWithValue';
 import { useSendContractTx } from '../../../hooks/useSendContractTx';
-import { TxType } from '../../../../store/global/transactions-store/types';
+import {
+  TxStatus,
+  TxType,
+} from '../../../../store/global/transactions-store/types';
 import { SendTxProgress } from '../../../components/SendTxProgress';
 import { gasLimit } from '../../../../utils/classifiers';
 
@@ -32,12 +35,13 @@ export function ClaimDialog(props: Props) {
     'vestingRegistry',
     'exchangeAllCSOV',
   );
-  const handleSubmit = () =>
+  const handleSubmit = useCallback(() => {
     send(
       [],
       { from: account, gas: gasLimit[TxType.SOV_CONVERT] },
       { type: TxType.SOV_CONVERT },
     );
+  }, [account, send]);
   return (
     <>
       <Overlay
@@ -95,7 +99,7 @@ export function ClaimDialog(props: Props) {
                   </DummyField>
                 </FieldGroup>
 
-                <div className={styles.txFee}>Tx Fee: 0.000004 (r)BTC</div>
+                <div className={styles.txFee}>Tx Fee: 0.00016 (r)BTC</div>
                 {processed && (
                   <p className={styles.txFee}>Already processed!</p>
                 )}
@@ -110,10 +114,17 @@ export function ClaimDialog(props: Props) {
               <div className="d-flex flex-row justify-content-between align-items-center">
                 <Button
                   text="Confirm"
-                  onClick={handleSubmit}
+                  onClick={() => handleSubmit()}
                   className="mr-3 w-100"
                   loading={tx.loading || loading}
-                  // disabled={tx.loading || loading || processed}
+                  disabled={
+                    tx.loading ||
+                    [TxStatus.PENDING_FOR_USER, TxStatus.PENDING].includes(
+                      tx.status,
+                    ) ||
+                    loading ||
+                    processed
+                  }
                 />
                 <Button
                   text="Cancel"

diff --git a/src/app/containers/WalletPage/components/RedeemDialiog.tsx b/src/app/containers/WalletPage/components/RedeemDialiog.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { Classes, Overlay } from '@blueprintjs/core';
 import classNames from 'classnames';
 import { bignumber } from 'mathjs';
@@ -9,7 +9,10 @@ import { DummyField } from '../../../components/DummyField';
 import { weiToNumberFormat } from '../../../../utils/display-text/format';
 import { Button } from '../../../components/Button';
 import { useSendContractTx } from '../../../hooks/useSendContractTx';
-import { TxType } from '../../../../store/global/transactions-store/types';
+import {
+  TxStatus,
+  TxType,
+} from '../../../../store/global/transactions-store/types';
 import { SendTxProgress } from '../../../components/SendTxProgress';
 import { useAccount } from '../../../hooks/useAccount';
 import { useCacheCallWithValue } from '../../../hooks/useCacheCallWithValue';
@@ -33,13 +36,13 @@ export function RedeemDialog(props: Props) {
     account,
   );
   const { send, ...tx } = useSendContractTx('vestingRegistry', 'reImburse');
-  const handleSubmit = () =>
+  const handleSubmit = useCallback(() => {
     send(
       [],
       { from: account, gas: gasLimit[TxType.SOV_REIMBURSE] },
       { type: TxType.SOV_REIMBURSE },
     );
-
+  }, [account, send]);
   return (
     <>
       <Overlay
@@ -112,10 +115,17 @@ export function RedeemDialog(props: Props) {
               <div className="d-flex flex-row justify-content-between align-items-center">
                 <Button
                   text="Confirm"
-                  onClick={handleSubmit}
+                  onClick={() => handleSubmit()}
                   className="mr-3 w-100"
                   loading={tx.loading || loading}
-                  disabled={tx.loading || loading || processed}
+                  disabled={
+                    tx.loading ||
+                    [TxStatus.PENDING_FOR_USER, TxStatus.PENDING].includes(
+                      tx.status,
+                    ) ||
+                    loading ||
+                    processed
+                  }
                 />
                 <Button
                   text="Cancel"