feat: Add manual address option to pool voucher form

src/components/pools/forms/pool-voucher-form.tsx

@@ -12,6 +12,7 @@ import { toast } from "sonner";
 import { isAddress, parseUnits } from "viem";
 import { z } from "zod";
 import AreYouSureDialog from "~/components/dialogs/are-you-sure";
+import { CheckBoxField } from "~/components/forms/fields/checkbox-field";
 import { InputField } from "~/components/forms/fields/input-field";
 import { SelectVoucherField } from "~/components/forms/fields/select-voucher-field";
 import { Loading } from "~/components/loading";
@@ -36,7 +37,9 @@ const schema = z.object({
   }),
   exchange_rate: z.coerce.number(), // Exchange rate of the voucher
   limit: z.coerce.number(), // Maximum number of vouchers that are allowd in the pool
+  manual_address: z.boolean(),
 });
+
 type PoolVoucherFormType = z.infer<typeof schema>;
 export function PoolVoucherForm({
   pool,
@@ -56,6 +59,7 @@ export function PoolVoucherForm({
         ? Number(voucher.priceIndex) / 10000
         : undefined,
       limit: voucher?.limitOf?.formattedNumber,
+      manual_address: false,
     },
   });
   const queryClient = useQueryClient();
@@ -122,26 +126,43 @@ export function PoolVoucherForm({
         onSubmit={form.handleSubmit(onSubmit)}
         className="flex flex-col gap-4"
       >
-        <SelectVoucherField
+        <CheckBoxField
           form={form}
-          name="voucher_address"
-          label="Voucher"
-          placeholder="Select voucher"
-          className="flex-grow"
-          getFormValue={(v) => v.voucher_address}
-          disabled={!!voucher}
-          searchableValue={(x) => `${x.voucher_name} ${x.symbol}`}
-          renderItem={(x) => (
-            <div className="flex justify-between w-full flex-wrap items-center">
-              {x.voucher_name}
-              <div className="ml-2 bg-gray-100 rounded-md px-2 py-1">
-                <strong>{x.symbol}</strong>
-              </div>
-            </div>
-          )}
-          renderSelectedItem={(x) => `${x.voucher_name} (${x.symbol})`}
-          items={vouchers ?? []}
+          name="manual_address"
+          label="Enter address manually"
         />
+
+        {form.watch("manual_address") ? (
+          <InputField
+            form={form}
+            name="voucher_address"
+            label="Voucher Address"
+            placeholder="Enter voucher address"
+            description="Enter the Address of the Voucher"
+          />
+        ) : (
+          <SelectVoucherField
+            form={form}
+            name="voucher_address"
+            label="Voucher"
+            placeholder="Select voucher"
+            className="flex-grow"
+            getFormValue={(v) => v.voucher_address}
+            disabled={!!voucher}
+            searchableValue={(x) => `${x.voucher_name} ${x.symbol}`}
+            renderItem={(x) => (
+              <div className="flex justify-between w-full flex-wrap items-center">
+                {x.voucher_name}
+                <div className="ml-2 bg-gray-100 rounded-md px-2 py-1">
+                  <strong>{x.symbol}</strong>
+                </div>
+              </div>
+            )}
+            renderSelectedItem={(x) => `${x.voucher_name} (${x.symbol})`}
+            items={vouchers ?? []}
+          />
+        )}
+
         <InputField
           form={form}
           name="limit"