fix: infinte loading issue when reserving a pack

components/ui/PackStore/PackStore.tsx

@@ -1,5 +1,7 @@
-import React, { FC, useState, useEffect } from "react"
+import React, { FC, useState } from "react"
 import styled from "styled-components"
+import { toast, ToastContainer } from "react-toastify"
+import "react-toastify/dist/ReactToastify.css"
 import { useUser } from "@components/user/UserProvider"
 import { useAuth } from "@components/auth/AuthProvider"
 import Spinner from "../Spinner"
@@ -432,26 +434,22 @@ const Purchase: FC<BuyProps> = ({
                   </ConnectWallet>
                 ) : (
                   <>
-                    {balance > calculateTotalPrice() ? (
-                      <>
-                        {checkboxValue ? (
-                          <SubmitButton
-                            onClick={() =>
-                              purchase(totalPrice, addressReservable)
-                            }
-                          >
-                            Submit
-                          </SubmitButton>
-                        ) : (
-                          <SubmitButton
-                            onClick={() =>
-                              purchase(totalPrice, addressRefundable)
-                            }
-                          >
-                            Submit
-                          </SubmitButton>
-                        )}
-                      </>
+                    {balance >= calculateTotalPrice() ? (
+                      <SubmitButton
+                        onClick={async () => {
+                          const address = checkboxValue
+                            ? addressReservable
+                            : addressRefundable
+                          const tx = await purchase(totalPrice, address)
+                          if (tx) {
+                            toast.success(
+                              "Congratulations! Your journey to becoming a Beast Hunter has begun!",
+                            )
+                          }
+                        }}
+                      >
+                        Submit
+                      </SubmitButton>
                     ) : (
                       <>
                         <SubmitButtonDisabled>Submit</SubmitButtonDisabled>
@@ -521,6 +519,12 @@ const PackStore: FC = () => {
 
   return (
     <Container>
+      <ToastContainer
+        autoClose={4000}
+        hideProgressBar
+        position="top-center"
+        theme="dark"
+      />
       {loading ? <Spinner /> : <></>}
       <Content>
         <StarterCardContainer>

framework/hooks/use-fusd.hook.ts

@@ -63,7 +63,13 @@ export default function useFUSD(user: any) {
         authorizations([authz]),
         limit(9999),
       ]).then(decode)
-      return tx(res).onceSealed()
+      // wait for transaction to be mined
+      const trx = await tx(res).onceSealed()
+      // this will refetch the balance once transaction is mined
+      // basically acts as a dispatcher allowing to update balance once transaction is mined
+      getFUSDBalance()
+      // we return the transaction body and can handle it in the component
+      return trx
     } catch (err) {
       dispatch({ type: "ERROR" })
       console.log(err)

package.json

@@ -20,6 +20,7 @@
     "next": "11.1.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-toastify": "^8.0.3",
     "styled-components": "^5.3.1"
   },
   "devDependencies": {

yarn.lock

@@ -981,6 +981,11 @@ classnames@2.2.6:
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
   integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
 
+clsx@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
+  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -2922,6 +2927,13 @@ react-refresh@0.8.3:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
   integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
 
+react-toastify@^8.0.3:
+  version "8.0.3"
+  resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-8.0.3.tgz#7fbf65f69ec357aab8dd03c1496f9177aa92409a"
+  integrity sha512-rv3koC7f9lKKSkdpYgo/TGzgWlrB/aaiUInF1DyV7BpiM4kyTs+uhu6/r8XDMtBY2FOIHK+FlK3Iv7OzpA/tCA==
+  dependencies:
+    clsx "^1.1.1"
+
 react@17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"