wip

PotLock · Jun 23, 2024 · ef476ed · ef476ed
1 parent ded14f7
commit ef476ed
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 23 deletions.
diff --git a/src/common/ui/form-fields/text.tsx b/src/common/ui/form-fields/text.tsx
@@ -1,5 +1,12 @@
 import { forwardRef } from "react";
 
+import {
+  FormControl,
+  FormDescription,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "../components";
 import { cn } from "../utils";
 
 export interface TextFieldProps
@@ -9,6 +16,8 @@ export interface TextFieldProps
   labelExtension?: React.ReactNode;
   fieldExtension?: React.ReactNode;
   appendix?: string | null;
+  description?: string;
+  customErrorMessage?: string;
 }
 
 export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
@@ -20,8 +29,11 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       labelExtension,
       fieldExtension = null,
       appendix,
+      description,
+      customErrorMessage,
       ...props
     },
+
     ref,
   ) => {
     const appendixElement = appendix ? (
@@ -45,11 +57,11 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
     ) : null;
 
     return (
-      <div un-flex="~ col" un-gap="2" className="w-full">
+      <FormItem className="flex flex-col gap-2">
         <div un-flex="~" un-justify="between" un-items="center" un-gap="2">
-          <span className="prose" un-text="sm neutral-950" un-font="500">
+          <FormLabel className="font-500 text-sm text-neutral-950">
             {label}
-          </span>
+          </FormLabel>
 
           {labelExtension}
         </div>
@@ -70,27 +82,32 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
         >
           {fieldExtensionElement}
 
-          <input
-            className={cn({
-              "rounded-l-lg": fieldExtensionElement === null,
-              "mr-1 rounded-r-lg": appendixElement === null,
-            })}
-            un-focus-visible={
-              fieldExtensionElement !== null && appendixElement !== null
-                ? "border-inset pl-1.5 border-l-2 border-input outline-none"
-                : undefined
-            }
-            un-pl={fieldExtensionElement === null ? "3" : "1.5"}
-            un-pr="1.5"
-            un-w="full"
-            un-h="9"
-            un-placeholder="text-muted-foreground"
-            {...fieldProps}
-          />
+          <FormControl>
+            <input
+              {...fieldProps}
+              className={cn({
+                "rounded-l-lg": fieldExtensionElement === null,
+                "mr-1 rounded-r-lg": appendixElement === null,
+              })}
+              un-focus-visible={
+                fieldExtensionElement !== null && appendixElement !== null
+                  ? "border-inset pl-1.5 border-l-2 border-input outline-none"
+                  : undefined
+              }
+              un-pl={fieldExtensionElement === null ? "3" : "1.5"}
+              un-pr="1.5"
+              un-w="full"
+              un-h="9"
+              un-placeholder="text-muted-foreground"
+            />
+          </FormControl>
 
           {appendixElement}
         </div>
-      </div>
+
+        {description && <FormDescription>{description}</FormDescription>}
+        <FormMessage>{customErrorMessage}</FormMessage>
+      </FormItem>
     );
   },
 );

diff --git a/src/modules/donation/components/DonationProjectAllocation.tsx b/src/modules/donation/components/DonationProjectAllocation.tsx
@@ -48,6 +48,7 @@ export const DonationProjectAllocation: React.FC<
   ]);
 
   const { data: activePots } = potlock.useAccountActivePots({ accountId });
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const hasMatchingPots = (activePots?.results.length ?? 0) > 0;
   const isFtDonation = tokenId !== NEAR_TOKEN_DENOM;
 
@@ -134,6 +135,7 @@ export const DonationProjectAllocation: React.FC<
                   name="tokenId"
                   render={({ field: fieldExtension }) => (
                     <Select
+                      disabled // TODO: FT donation is not yet finished
                       value={fieldExtension.value}
                       onValueChange={fieldExtension.onChange}
                     >
@@ -172,6 +174,11 @@ export const DonationProjectAllocation: React.FC<
               max={balanceFloat ?? undefined}
               step={0.01}
               appendix={isFtDonation ? null : nearAmountUsdDisplayValue}
+              customErrorMessage={
+                isBalanceSufficient
+                  ? undefined
+                  : "You don’t have enough balance to complete this transaction."
+              }
             />
           )}
         />

diff --git a/src/modules/donation/models.ts b/src/modules/donation/models.ts
@@ -60,7 +60,7 @@ export const donationAllocationStrategies: Record<
 
   pot: {
     label: "Quadratically matched donation",
-    hintIfDisabled: "(no pots available)",
+    hintIfDisabled: "(WIP)", // "(no pots available)",
     value: DonationAllocationStrategyEnum.pot,
   },
 };
@@ -75,7 +75,7 @@ export const donationTokenSchema = literal(NEAR_TOKEN_DENOM)
 export const donationAmountSchema = number()
   .positive()
   .finite()
-  .lt(0.0, "Cannot be zero.")
+  .gt(0.0, "Cannot be zero.")
   .default(0.1)
   .refine(
     (n) => !number().int().safeParse(n).success,