feat: add loading toast when creating offers (#708)

src/components/toasts/common/LoadingToast.tsx

@@ -0,0 +1,44 @@
+import { X } from "phosphor-react";
+import { ReactNode } from "react";
+import toast, { Toast } from "react-hot-toast";
+import styled from "styled-components";
+
+import { colors } from "../../../lib/styles/colors";
+import Button from "../../ui/Button";
+import Grid from "../../ui/Grid";
+import Loading from "../../ui/Loading";
+
+const Close = styled(X)`
+  line {
+    stroke: ${colors.darkGrey};
+  }
+`;
+const StyledButton = styled(Button)`
+  padding: 0 !important;
+`;
+interface Props {
+  t: Toast;
+  children: ReactNode;
+}
+
+export function LoadingToast({ t, children }: Props) {
+  return (
+    <Grid gap="1rem">
+      <Grid flexBasis="0">
+        <Loading size={3} wrapperStyle={{ padding: 0 }} />
+      </Grid>
+      {children}
+      <Grid alignSelf="flex-start" justifyContent="flex-end" flexBasis="0">
+        <StyledButton
+          data-close
+          theme="blank"
+          onClick={() => toast.dismiss(t.id)}
+        >
+          <Close size={20} />
+        </StyledButton>
+      </Grid>
+    </Grid>
+  );
+}
+
+export default LoadingToast;

src/lib/utils/hooks/offer/useCreateOffers.tsx

@@ -1,9 +1,11 @@
 import { accounts, offers, subgraph } from "@bosonprotocol/react-kit";
+import toast from "react-hot-toast";
 import { useMutation } from "react-query";
 import { useAccount } from "wagmi";
 
 import { useModal } from "../../../../components/modal/useModal";
 import { TOKEN_TYPES } from "../../../../components/product/utils";
+import LoadingToast from "../../../../components/toasts/common/LoadingToast";
 import { poll } from "../../../../pages/create-product/utils";
 import {
   buildCondition,
@@ -12,6 +14,14 @@ import {
 import { useCoreSDK } from "../../useCoreSdk";
 import { useAddPendingTransaction } from "../transactions/usePendingTransactions";
 
+const getOfferCreationToast = () => {
+  const toastId = toast((t) => {
+    t.duration = Infinity;
+    return <LoadingToast t={t}>Offer creation in progress</LoadingToast>;
+  });
+  return toastId;
+};
+
 type OfferFieldsFragment = subgraph.OfferFieldsFragment;
 
 type UseCreateOffersProps = {
@@ -209,6 +219,7 @@ export function useCreateOffers() {
           );
           await txResponse.wait();
         }
+        const toastId = getOfferCreationToast();
         let createdOffers: OfferFieldsFragment[] | null = null;
         await poll(
           async () => {
@@ -226,6 +237,7 @@ export function useCreateOffers() {
           },
           500
         );
+        toast.dismiss(toastId);
         const allCreatedOffers =
           createdOffers as unknown as OfferFieldsFragment[];
         const [firstOffer] = allCreatedOffers;
@@ -369,6 +381,7 @@ export function useCreateOffers() {
         const txReceipt = await txResponse.wait();
         const offerId = coreSDK.getCreatedOfferIdFromLogs(txReceipt.logs);
         let createdOffer: OfferFieldsFragment | null = null;
+        const toastId = getOfferCreationToast();
         await poll(
           async () => {
             createdOffer = await coreSDK.getOfferById(offerId as string);
@@ -379,6 +392,7 @@ export function useCreateOffers() {
           },
           500
         );
+        toast.dismiss(toastId);
         if (!createdOffer) {
           return;
         }