refactor: move create vesting amount type logic from context to form

bleu · Oct 15, 2024 · 6c090d7 · 6c090d7
1 parent 1e3c442
commit 6c090d7
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 121 deletions.
diff --git a/apps/create-vesting/src/app/layout.tsx b/apps/create-vesting/src/app/layout.tsx
@@ -4,7 +4,6 @@ import "@bleu/cow-hooks-ui/global.css";
 import { IFrameContextProvider } from "@bleu/cow-hooks-ui";
 import Head from "next/head";
 import type * as React from "react";
-import { TokenAmountTypeProvider } from "#/context/TokenAmountType";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
@@ -13,11 +12,9 @@ export default function Layout({ children }: { children: React.ReactNode }) {
         <link rel="manifest" href="/manifest.json" />
       </Head>
       <IFrameContextProvider>
-        <TokenAmountTypeProvider>
-          <body className="flex flex-col h-full font-sans font-normal">
-            {children}
-          </body>
-        </TokenAmountTypeProvider>
+        <body className="flex flex-col h-full font-sans font-normal">
+          {children}
+        </body>
       </IFrameContextProvider>
     </html>
   );

diff --git a/apps/create-vesting/src/app/page.tsx b/apps/create-vesting/src/app/page.tsx
@@ -16,8 +16,7 @@ import { Token } from "@uniswap/sdk-core";
 import { Form } from "@bleu/ui";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useCallback, useMemo } from "react";
-import { useForm } from "react-hook-form";
-
+import { useForm, useWatch } from "react-hook-form";
 import {
   type CreateVestingFormData,
   createVestingSchema,
@@ -30,12 +29,10 @@ import {
   VestAllFromAccountCheckbox,
   VestAllFromSwapCheckbox,
 } from "#/components/Checkboxes";
-import { useTokenAmountTypeContext } from "#/context/TokenAmountType";
 import { useGetHooksTransactions } from "#/hooks/useGetHooksTransactions";
 import { vestingFactoriesMapping } from "#/utils/vestingFactoriesMapping";
 
 export default function Page() {
-  const { vestAllFromSwap, vestAllFromAccount } = useTokenAmountTypeContext();
   const { context, setHookInfo } = useIFrameContext();
   const router = useRouter();
 
@@ -48,6 +45,9 @@ export default function Page() {
     },
   });
 
+  const { control } = form;
+  const { vestAllFromAccount, vestAllFromSwap } = useWatch({ control });
+
   const getHooksTransactions = useGetHooksTransactions();
   const tokenAddress = context?.orderParams?.buyTokenAddress as
     | `0x${string}`
@@ -60,7 +60,7 @@ export default function Page() {
       context?.chainId && tokenAddress && tokenDecimals
         ? new Token(context.chainId, tokenAddress, tokenDecimals, tokenSymbol)
         : undefined,
-    [context?.chainId, tokenAddress, tokenDecimals, tokenSymbol],
+    [context?.chainId, tokenAddress, tokenDecimals, tokenSymbol]
   );
 
   const vestingEscrowFactoryAddress = useMemo(() => {
@@ -88,12 +88,12 @@ export default function Page() {
       router.push,
       setHookInfo,
       getHooksTransactions,
-    ],
+    ]
   );
 
   const onSubmit = useMemo(
     () => form.handleSubmit(onSubmitCallback),
-    [form, onSubmitCallback],
+    [form, onSubmitCallback]
   );
 
   if (!context)
@@ -156,7 +156,6 @@ export default function Page() {
           <br />
           <VestAllFromSwapCheckbox />
           <VestAllFromAccountCheckbox />
-          <br />
         </ContentWrapper>
         <ButtonPrimary type="submit">
           <ButtonText context={context} />

diff --git a/apps/create-vesting/src/app/signing/page.tsx b/apps/create-vesting/src/app/signing/page.tsx
@@ -12,7 +12,7 @@ import {
 import { BigNumber, type BigNumberish } from "ethers";
 import { useCallback, useMemo, useState } from "react";
 import type { Address } from "viem";
-import { useTokenAmountTypeContext } from "#/context/TokenAmountType";
+// import { useTokenAmountTypeContext } from "#/context/TokenAmountType";
 
 export default function Page() {
   const [currentStepIndex, setCurrentStepIndex] = useState(0);
@@ -28,13 +28,11 @@ export default function Page() {
     cowShedProxy,
   } = useIFrameContext();
 
-  const { vestAllFromSwap } = useTokenAmountTypeContext();
-
   const submitHook = useSubmitHook({
     actions,
     context,
     publicClient,
-    recipientOverride: vestAllFromSwap ? cowShedProxy : undefined,
+    recipientOverride: hookInfo?.recipientOverride,
   });
   const cowShedSignature = useCowShedSignature({
     cowShed,
@@ -70,7 +68,7 @@ export default function Page() {
     }) => {
       const permitData = await handleTokenAllowance(
         BigNumber.from(permit.amount),
-        permit.tokenAddress as Address,
+        permit.tokenAddress as Address
       );
 
       if (permitData) {
@@ -85,7 +83,7 @@ export default function Page() {
       }
       setCurrentStepIndex((prev) => prev + 1);
     },
-    [handleTokenAllowance],
+    [handleTokenAllowance]
   );
 
   const steps = useMemo(() => {

diff --git a/apps/create-vesting/src/components/Checkboxes.tsx b/apps/create-vesting/src/components/Checkboxes.tsx
@@ -1,67 +1,68 @@
 import { Input, Label } from "@bleu/ui";
-import React, { useEffect } from "react";
-import { useFormContext } from "react-hook-form";
-import { useTokenAmountTypeContext } from "#/context/TokenAmountType";
+import { ReactNode, useEffect } from "react";
+import { useFormContext, useWatch } from "react-hook-form";
 
-export const FormCheckbox = ({
+export const Checkbox = ({
   name,
-  state,
-  setState,
   label,
+  isSelectedMessage,
+  unselectTrigger,
 }: {
   name: string;
-  state: boolean;
-  setState: (state: boolean) => void;
   label?: string;
+  isSelectedMessage?: string | ReactNode;
+  unselectTrigger?: boolean;
 }) => {
-  const { setValue } = useFormContext();
+  const { register, watch, setValue } = useFormContext();
+  const isSelected = watch(name);
 
   useEffect(() => {
-    setValue("amount", "");
-    setValue(name, state);
-  }, [name, state, setValue]);
+    if (unselectTrigger === true) setValue(name, false);
+  }, [unselectTrigger]);
 
   return (
-    <div className="flex items-center space-x-2">
-      <Input
-        type="checkbox"
-        id={name}
-        name={name}
-        checked={state}
-        onChange={() => setState(!state)}
-        className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
-      />
-      <Label
-        htmlFor={name}
-        className="text-sm font-medium text-gray-900 dark:text-gray-300"
-      >
-        {label}
-      </Label>
+    <div className="flex flex-col items-start justify-start">
+      <div className="flex items-center space-x-2">
+        <Input
+          type="checkbox"
+          id={name}
+          {...register(name)}
+          className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+        />
+        <Label
+          htmlFor={name}
+          className="text-sm font-medium text-gray-900 dark:text-gray-300"
+        >
+          {label}
+        </Label>
+      </div>
+      {isSelected && isSelectedMessage}
     </div>
   );
 };
 
 export const VestAllFromSwapCheckbox = () => {
-  const { vestAllFromSwap, setVestAllFromSwap } = useTokenAmountTypeContext();
+  const { control } = useFormContext();
+  const { vestAllFromAccount } = useWatch({ control });
+
   return (
-    <FormCheckbox
+    <Checkbox
       name="vestAllFromSwap"
-      state={vestAllFromSwap}
-      setState={setVestAllFromSwap}
       label="Use all tokens from swap"
+      unselectTrigger={vestAllFromAccount}
     />
   );
 };
 
 export const VestAllFromAccountCheckbox = () => {
-  const { vestAllFromAccount, setVestAllFromAccount } =
-    useTokenAmountTypeContext();
+  const { control } = useFormContext();
+  const { vestAllFromSwap } = useWatch({ control });
+
   return (
-    <FormCheckbox
+    <Checkbox
       name="vestAllFromAccount"
-      state={vestAllFromAccount}
-      setState={setVestAllFromAccount}
       label="Use all your tokens after swap"
+      unselectTrigger={vestAllFromSwap}
     />
   );
 };
diff --git a/apps/create-vesting/src/context/TokenAmountType.tsx b/apps/create-vesting/src/context/TokenAmountType.tsx
diff --git a/apps/create-vesting/src/hooks/useGetHooksInfoVestAllFromSwap.ts b/apps/create-vesting/src/hooks/useGetHooksInfoVestAllFromSwap.ts
@@ -1,14 +1,10 @@
-import {
-  BaseTransaction,
-  type IHooksInfo,
-  useIFrameContext,
-} from "@bleu/cow-hooks-ui";
+import { type IHooksInfo, useIFrameContext } from "@bleu/cow-hooks-ui";
 import {
   TRANSACTION_TYPES,
   TransactionFactory,
 } from "@bleu/utils/transactionFactory";
 import { useCallback } from "react";
-import { type Address, maxUint256, parseUnits } from "viem";
+import { type Address, maxUint256 } from "viem";
 import { scaleToSecondsMapping } from "#/utils/scaleToSecondsMapping";
 import type { GetHooksTransactionsParams } from "./useGetHooksTransactions";
 
@@ -17,7 +13,7 @@ export const useGetHooksInfoVestAllFromSwap = () => {
 
   return useCallback(
     async (
-      params: GetHooksTransactionsParams,
+      params: GetHooksTransactionsParams
     ): Promise<IHooksInfo | undefined> => {
       const {
         token,
@@ -48,12 +44,12 @@ export const useGetHooksInfoVestAllFromSwap = () => {
             cowShedProxy,
             vestingDuration: BigInt(periodInSeconds),
             vestingEscrowFactoryAddress: vestingEscrowFactoryAddress,
-          },
+          }
         ),
       ]);
 
-      return { txs };
+      return { txs, recipientOverride: cowShedProxy };
     },
-    [context?.account, cowShedProxy],
+    [context?.account, cowShedProxy]
   );
 };
diff --git a/apps/create-vesting/src/hooks/useGetHooksTransactions.ts b/apps/create-vesting/src/hooks/useGetHooksTransactions.ts
@@ -18,7 +18,7 @@ export function useGetHooksTransactions() {
   const getHooksInfoVestUserAmount = useGetHooksInfoVestUserAmount();
 
   return async (
-    params: GetHooksTransactionsParams,
+    params: GetHooksTransactionsParams
   ): Promise<IHooksInfo | undefined> => {
     const {
       formData: { vestAllFromAccount, vestAllFromSwap },

diff --git a/apps/create-vesting/src/utils/schema.ts b/apps/create-vesting/src/utils/schema.ts
@@ -3,10 +3,6 @@ import { z } from "zod";
 
 export const periodScaleOptions = ["Day", "Week", "Month"];
 
-const refinePeriodScale = (value: string) => {
-  return periodScaleOptions.includes(value);
-};
-
 export const createVestingSchema = z
   .object({
     recipient: z
@@ -32,7 +28,7 @@ export const createVestingSchema = z
         !schema.vestAllFromAccount
       );
     },
-    { message: "Amount is required", path: ["amount"] },
+    { message: "Amount is required", path: ["amount"] }
   );
 
 export type CreateVestingFormData = typeof createVestingSchema._type;
diff --git a/packages/cow-hooks-ui/src/types.ts b/packages/cow-hooks-ui/src/types.ts
@@ -18,6 +18,7 @@ export interface IHooksInfo {
     amount: BigNumberish;
     tokenSymbol: string;
   }[];
+  recipientOverride?: string | undefined;
 }
 
 export interface HookDappContextAdjusted extends HookDappContext {