Confirm awaits (#108)

packages/DApp/src/components/card/ProposeModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import styled from 'styled-components'
 import { ButtonPrimary } from '../Button'
 import { CardCommunity } from './CardCommunity'
@@ -50,7 +50,12 @@ export function ProposeModal({
   const [publicKey, setPublicKey] = useState('')
   const loading = useCommunityDetails(publicKey, setCommunityFound)
   const { votingContract } = useContracts()
-  const { send } = useContractFunction(votingContract, 'initializeVotingRoom')
+  const { send, state } = useContractFunction(votingContract, 'initializeVotingRoom')
+  useEffect(() => {
+    if (state.status === 'Mining' || state.status === 'Success') {
+      setShowConfirmModal(true)
+    }
+  }, [state])
 
   return (
     <ColumnFlexDiv>
@@ -88,13 +93,7 @@ export function ProposeModal({
           OK, let’s move on! <span>🤙</span>
         </ConfirmBtn>
       ) : (
-        <ProposingBtn
-          disabled={!communityFound || !proposingAmount}
-          onClick={() => {
-            send(1, publicKey)
-            setShowConfirmModal(true)
-          }}
-        >
+        <ProposingBtn disabled={!communityFound || !proposingAmount} onClick={() => send(1, publicKey)}>
           Confirm vote to add community
         </ProposingBtn>
       )}

packages/DApp/src/components/card/RemoveAmountPicker.tsx

@@ -1,5 +1,5 @@
 import { useContractFunction } from '@usedapp/core'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import styled from 'styled-components'
 import { timespan } from '../../helpers/timespan'
 import { useContracts } from '../../hooks/useContracts'
@@ -19,7 +19,13 @@ export function RemoveAmountPicker({ community, availableAmount, setShowConfirmM
   const [proposingAmount, setProposingAmount] = useState(0)
   const disabled = proposingAmount === 0
   const { votingContract } = useContracts()
-  const { send } = useContractFunction(votingContract, 'initializeVotingRoom')
+  const { send, state } = useContractFunction(votingContract, 'initializeVotingRoom')
+
+  useEffect(() => {
+    if (state.status === 'Mining' || state.status === 'Success') {
+      setShowConfirmModal(true)
+    }
+  }, [state])
 
   if (community.votingHistory && community.votingHistory.length > 0) {
     const lastVote = community.votingHistory[community.votingHistory.length - 1]
@@ -68,13 +74,7 @@ export function RemoveAmountPicker({ community, availableAmount, setShowConfirmM
         setProposingAmount={setProposingAmount}
         proposingAmount={proposingAmount}
       />
-      <VoteConfirmBtn
-        disabled={disabled}
-        onClick={async () => {
-          await send(0, community.publicKey)
-          setShowConfirmModal(true)
-        }}
-      >
+      <VoteConfirmBtn disabled={disabled} onClick={() => send(0, community.publicKey)}>
         Confirm vote to remove community
       </VoteConfirmBtn>
     </VoteProposeWrap>