Fix small alert errors

l3wi · Oct 3, 2021 · 8fef2c4 · 8fef2c4
1 parent 479645f
commit 8fef2c4
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 16 deletions.
diff --git a/components/page/alerts.js b/components/page/alerts.js
@@ -6,13 +6,13 @@ import {
   Link,
   Icon,
   useColorModeValue,
-  chakra,
+  chakra
 } from '@chakra-ui/react'
 import {
   CheckCircleIcon,
   WarningTwoIcon,
   TimeIcon,
-  IoMdCheckmarkCircle,
+  IoMdCheckmarkCircle
 } from '@chakra-ui/icons'
 
 import useAlerts from '../../contexts/useAlerts'
@@ -41,6 +41,7 @@ function Alerts() {
                 rounded="lg"
                 overflow="hidden"
                 mt="10px"
+                key={item.text}
               >
                 <Flex
                   justifyContent="center"
@@ -75,6 +76,7 @@ function Alerts() {
                 rounded="lg"
                 overflow="hidden"
                 mt="10px"
+                key={item.text}
               >
                 <Flex
                   justifyContent="center"
@@ -109,6 +111,7 @@ function Alerts() {
                 rounded="lg"
                 overflow="hidden"
                 mt="10px"
+                key={item.text}
               >
                 <Flex
                   justifyContent="center"

diff --git a/contexts/useAlerts.js b/contexts/useAlerts.js
@@ -4,7 +4,7 @@ import React, {
   useContext,
   useMemo,
   useEffect,
-  useCallback,
+  useCallback
 } from 'react'
 
 import { web3 } from '../utils/ethers'
@@ -35,17 +35,19 @@ export const AlertProvider = (props) => {
   // watchTx - listen for success/fail
   const watchTx = (hash, actionName) => {
     const id = addAlert('pending', actionName)
-    web3.once(hash, (transaction) => {
-      console.log(transaction)
-
-      if (transaction.status === 1) {
-        addAlert('success', actionName)
-      } else {
-        addAlert('fail', actionName)
-      }
-      setTimeout(() => {
-        removeAlert(id)
-      }, 3000)
+    return new Promise((resolve, reject) => {
+      web3.once(hash, (transaction) => {
+        setTimeout(() => {
+          removeAlert(id)
+        }, 3000)
+        if (transaction.status === 1) {
+          addAlert('success', actionName)
+          resolve(transaction)
+        } else {
+          addAlert('fail', actionName)
+          reject(transaction)
+        }
+      })
     })
   }
 
@@ -54,7 +56,7 @@ export const AlertProvider = (props) => {
       alerts,
       addAlert,
       removeAlert,
-      watchTx,
+      watchTx
     }),
     [alerts]
   )
@@ -63,7 +65,7 @@ export const AlertProvider = (props) => {
   return (
     <UseAlertContext.Provider
       value={{
-        tools,
+        tools
       }}
     >
       {props.children}