wip

PotLock · Jun 18, 2024 · f7984a9 · f7984a9
1 parent 1a58110
commit f7984a9
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 48 deletions.
diff --git a/src/modules/core/components/RuntimeErrorAlert.tsx b/src/modules/core/components/RuntimeErrorAlert.tsx
@@ -0,0 +1,19 @@
+import { Alert, AlertDescription, AlertTitle } from "@/common/ui/components";
+
+export type RuntimeErrorAlertProps = {
+  customMessage?: string;
+};
+
+export const RuntimeErrorAlert: React.FC<RuntimeErrorAlertProps> = ({
+  customMessage,
+}) => (
+  <Alert variant="destructive" className="flex flex-col gap-4 bg-white">
+    <AlertTitle>Runtime error!</AlertTitle>
+
+    <AlertDescription className="flex flex-col gap-4">
+      {customMessage}
+
+      <span>Please contact PotLock team for help.</span>
+    </AlertDescription>
+  </Alert>
+);
diff --git a/src/modules/core/index.ts b/src/modules/core/index.ts
@@ -1 +1,2 @@
 export * from "./utils";
+export * from "./components/RuntimeErrorAlert";
diff --git a/src/modules/donation/components/DonationFlow.tsx b/src/modules/donation/components/DonationFlow.tsx
@@ -1,7 +1,13 @@
 import { useMemo } from "react";
 
 import { dispatch } from "@/app/_store";
-import { Button, DialogFooter, Form } from "@/common/ui/components";
+import {
+  Button,
+  DialogFooter,
+  DialogHeader,
+  Form,
+} from "@/common/ui/components";
+import { RuntimeErrorAlert } from "@/modules/core";
 
 import { DonationConfirmation } from "./DonationConfirmation";
 import { DonationPotAllocation } from "./DonationPotAllocation";
@@ -41,7 +47,11 @@ export const DonationFlow: React.FC<DonationFlowProps> = ({
         return <DonationSuccess {...{ closeModal }} />;
 
       default:
-        return "Error: Unable to proceed with the next step";
+        return (
+          <DialogHeader className="w-full rounded-lg">
+            <RuntimeErrorAlert customMessage="Unable to proceed with the next step." />
+          </DialogHeader>
+        );
     }
   }, [closeModal, currentStep, form, props]);
 

diff --git a/src/modules/donation/components/DonationModal.tsx b/src/modules/donation/components/DonationModal.tsx
@@ -3,14 +3,8 @@ import { useCallback } from "react";
 import { create, useModal } from "@ebay/nice-modal-react";
 
 import { dispatch, useTypedSelector } from "@/app/_store";
-import {
-  Alert,
-  AlertDescription,
-  AlertTitle,
-  Dialog,
-  DialogContent,
-  DialogHeader,
-} from "@/common/ui/components";
+import { Dialog, DialogContent, DialogHeader } from "@/common/ui/components";
+import { RuntimeErrorAlert } from "@/modules/core";
 
 import { DonationFlow } from "./DonationFlow";
 import { DonationParameters } from "../models";
@@ -40,13 +34,7 @@ export const DonationModal = create((props: DonationModalProps) => {
       >
         {!("accountId" in props) && !("potId" in props) ? (
           <DialogHeader className="w-full rounded-lg">
-            <Alert variant="destructive" className="bg-white">
-              <AlertTitle>Runtime error!</AlertTitle>
-
-              <AlertDescription>
-                Please contact PotLock team for help.
-              </AlertDescription>
-            </Alert>
+            <RuntimeErrorAlert />
           </DialogHeader>
         ) : (
           <DonationFlow closeModal={close} {...props} {...state} />

diff --git a/src/modules/donation/components/DonationProjectAllocation.tsx b/src/modules/donation/components/DonationProjectAllocation.tsx
@@ -21,9 +21,10 @@ import {
   SelectValue,
   TextField,
 } from "@/common/ui/components";
+import { RuntimeErrorAlert } from "@/modules/core";
 
 import { DONATION_MIN_NEAR_AMOUNT } from "../constants";
-import { DonationInputs } from "../models";
+import { DonationInputs, tokenIdSchema } from "../models";
 
 export type DonationProjectAllocationProps = ByAccountId & {
   form: UseFormReturn<DonationInputs>;
@@ -43,15 +44,23 @@ export const DonationProjectAllocation: React.FC<
     error: accountError,
   } = potlock.useAccount({ accountId });
 
-  const { data: { balance: availableNearBalance = null } = {} } =
-    pagoda.useNearAccountBalance({
-      accountId: walletApi.accountId ?? "unknown",
-    });
+  const {
+    isLoading: isNearBalanceLoading,
+    data: { balance: availableNearBalance = null } = {},
+    error: nearBalanceError,
+  } = pagoda.useNearAccountBalance({
+    accountId: walletApi.accountId ?? "unknown",
+  });
+
+  const {
+    isLoading: isFtBalanceLoading,
+    data: { balances: availableFtBalances = null } = {},
+    error: ftBalancesError,
+  } = pagoda.useFtAccountBalances({
+    accountId: walletApi.accountId ?? "unknown",
+  });
 
-  const { data: { balances: availableFtBalances = null } = {} } =
-    pagoda.useFtAccountBalances({
-      accountId: walletApi.accountId ?? "unknown",
-    });
+  const dataFetchError = accountError ?? nearBalanceError ?? ftBalancesError;
 
   const availableBalance = useMemo(
     () =>
@@ -64,7 +73,7 @@ export const DonationProjectAllocation: React.FC<
     [availableFtBalances, availableNearBalance, isFtDonation, tokenId],
   );
 
-  return isAccountLoading || availableBalance === null ? (
+  return isAccountLoading || isNearBalanceLoading || isFtBalanceLoading ? (
     <span
       un-flex="~"
       un-justify="center"
@@ -77,7 +86,11 @@ export const DonationProjectAllocation: React.FC<
     </span>
   ) : (
     <>
-      {accountError && accountError.message}
+      {dataFetchError && (
+        <DialogHeader className="w-full rounded-lg">
+          <RuntimeErrorAlert customMessage={dataFetchError} />
+        </DialogHeader>
+      )}
 
       {account !== undefined && (
         <>
@@ -114,22 +127,28 @@ export const DonationProjectAllocation: React.FC<
             <TextField
               label="Amount"
               labelExtension={
-                <div un-flex="~" un-gap="1">
-                  <span
-                    className="prose"
-                    un-text="sm neutral-950"
-                    un-font="600"
-                  >
-                    {`${availableBalance.amount} ${availableBalance.metadata.symbol}`}
-                  </span>
-
-                  <span className="prose" un-text="sm neutral-600">
-                    available
+                availableBalance === null ? (
+                  <span className="prose" un-text="sm destructive">
+                    Unable to load available balance!
                   </span>
-                </div>
+                ) : (
+                  <div un-flex="~" un-gap="1">
+                    <span
+                      className="prose"
+                      un-text="sm neutral-950"
+                      un-font="600"
+                    >
+                      {`${availableBalance.amount} ${availableBalance.metadata.symbol}`}
+                    </span>
+
+                    <span className="prose" un-text="sm neutral-600">
+                      available
+                    </span>
+                  </div>
+                )
               }
               fieldExtension={
-                <Select defaultValue={tokenId}>
+                <Select defaultValue={tokenIdSchema.parse(tokenId)}>
                   <SelectTrigger className="h-full w-min rounded-r-none shadow-none">
                     <SelectValue />
                   </SelectTrigger>

diff --git a/src/modules/donation/hooks/forms.ts b/src/modules/donation/hooks/forms.ts
@@ -11,18 +11,17 @@ import {
   DonationInputs,
   DonationSubmissionInputs,
   donationSchema,
+  tokenIdSchema,
 } from "../models";
 
 export const useDonationForm = (params: DonationSubmissionInputs) => {
   const form = useForm<DonationInputs>({
     resolver: zodResolver(donationSchema),
+    defaultValues: { tokenId: tokenIdSchema.parse(undefined) },
   });
 
-  const tokenId = form.watch("tokenId");
   const isSenderHumanVerified = useIsHuman(walletApi.accountId ?? "unknown");
 
-  console.log(tokenId);
-
   const onSubmit: SubmitHandler<DonationInputs> = useCallback(
     (values) => dispatch.donation.submit({ ...values, ...params }),
     [params],

diff --git a/src/modules/donation/models.ts b/src/modules/donation/models.ts
@@ -63,6 +63,11 @@ export const donationAllocationStrategies: Record<
 
 export type DonationStep = "allocation" | "confirmation" | "success";
 
+export const tokenIdSchema = literal(NEAR_TOKEN_DENOM)
+  .or(string().min(6))
+  .default(NEAR_TOKEN_DENOM)
+  .describe('Either "NEAR" or FT contract account id.');
+
 export const donationSchema = object({
   allocationStrategy: nativeEnum(DonationAllocationStrategyEnum, {
     message: "Incorrect allocation strategy.",
@@ -72,10 +77,7 @@ export const donationSchema = object({
     message: "Incorrect donation distribution strategy.",
   }).default(DonationPotDistributionStrategyEnum.evenly),
 
-  tokenId: literal(NEAR_TOKEN_DENOM)
-    .or(string().min(6))
-    .default(NEAR_TOKEN_DENOM)
-    .describe('Either "NEAR" or FT contract account id.'),
+  tokenId: tokenIdSchema,
 
   amount: number()
     .positive()