From 874e6440df0b7e700450217937b066fcce0827c2 Mon Sep 17 00:00:00 2001 From: Saihajpreet Singh Date: Sat, 23 Oct 2021 18:42:57 -0500 Subject: [PATCH 1/4] fix: infinite loading issue --- framework/hooks/use-fusd.hook.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/framework/hooks/use-fusd.hook.ts b/framework/hooks/use-fusd.hook.ts index e4551ed..8f0586c 100644 --- a/framework/hooks/use-fusd.hook.ts +++ b/framework/hooks/use-fusd.hook.ts @@ -63,7 +63,11 @@ export default function useFUSD(user: any) { authorizations([authz]), limit(9999), ]).then(decode) - return tx(res).onceSealed() + // wait for transaction to be mined + await tx(res).onceSealed() + // this will refetch the balance once transaction is mined + // TODO: Need to improve the UX to show a success toast. + getFUSDBalance() } catch (err) { dispatch({ type: "ERROR" }) console.log(err) From bf1c6f66fbeb021b0334de8df13a406c03f21a16 Mon Sep 17 00:00:00 2001 From: Saihajpreet Singh Date: Sat, 23 Oct 2021 18:43:19 -0500 Subject: [PATCH 2/4] fix: should be able to buy if i have the exact amount --- components/ui/PackStore/PackStore.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/ui/PackStore/PackStore.tsx b/components/ui/PackStore/PackStore.tsx index 3524b84..6641ab6 100644 --- a/components/ui/PackStore/PackStore.tsx +++ b/components/ui/PackStore/PackStore.tsx @@ -432,7 +432,7 @@ const Purchase: FC = ({ ) : ( <> - {balance > calculateTotalPrice() ? ( + {balance >= calculateTotalPrice() ? ( <> {checkboxValue ? ( Date: Sat, 23 Oct 2021 21:48:56 -0500 Subject: [PATCH 3/4] feat: return transaction info back --- framework/hooks/use-fusd.hook.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/framework/hooks/use-fusd.hook.ts b/framework/hooks/use-fusd.hook.ts index 8f0586c..b8067c3 100644 --- a/framework/hooks/use-fusd.hook.ts +++ b/framework/hooks/use-fusd.hook.ts @@ -64,10 +64,12 @@ export default function useFUSD(user: any) { limit(9999), ]).then(decode) // wait for transaction to be mined - await tx(res).onceSealed() + const trx = await tx(res).onceSealed() // this will refetch the balance once transaction is mined - // TODO: Need to improve the UX to show a success toast. + // 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) From 587a10c67e3bb37c1417c00e2aa30aa961e04c34 Mon Sep 17 00:00:00 2001 From: Saihajpreet Singh Date: Sat, 23 Oct 2021 22:14:44 -0500 Subject: [PATCH 4/4] feat: show a success toast --- components/ui/PackStore/PackStore.tsx | 44 +++++++++++++++------------ package.json | 1 + yarn.lock | 12 ++++++++ 3 files changed, 37 insertions(+), 20 deletions(-) diff --git a/components/ui/PackStore/PackStore.tsx b/components/ui/PackStore/PackStore.tsx index 6641ab6..72a7fe2 100644 --- a/components/ui/PackStore/PackStore.tsx +++ b/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" @@ -433,25 +435,21 @@ const Purchase: FC = ({ ) : ( <> {balance >= calculateTotalPrice() ? ( - <> - {checkboxValue ? ( - - purchase(totalPrice, addressReservable) - } - > - Submit - - ) : ( - - purchase(totalPrice, addressRefundable) - } - > - Submit - - )} - + { + 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 + ) : ( <> Submit @@ -521,6 +519,12 @@ const PackStore: FC = () => { return ( + {loading ? : <>} diff --git a/package.json b/package.json index 91fa9be..e1e6528 100644 --- a/package.json +++ b/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": { diff --git a/yarn.lock b/yarn.lock index 22a3e40..8d2ed61 100644 --- a/yarn.lock +++ b/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"