Merge pull request #33 from bleu/jean/cow-407-add-vest-all-available-…

…option-on-vesting-hook Add vest all option in create vesting
bleu · Oct 14, 2024 · fb6e358 · fb6e358
2 parents 22bab17 + 6b5bcc0
commit fb6e358
Show file tree

Hide file tree

Showing 58 changed files with 570 additions and 332 deletions.
diff --git a/apps/claim-vesting/next.config.js b/apps/claim-vesting/next.config.js
@@ -10,16 +10,16 @@ const moduleExports = {
   async headers() {
     return [
       {
-        source: '/manifest.json',
+        source: "/manifest.json",
         headers: [
           {
-            key: 'Access-Control-Allow-Origin',
-            value: '*',
+            key: "Access-Control-Allow-Origin",
+            value: "*",
           },
         ],
       },
     ];
   },
 };
 
-module.exports = moduleExports;
+module.exports = moduleExports;
diff --git a/apps/claim-vesting/src/app/page.tsx b/apps/claim-vesting/src/app/page.tsx
@@ -28,7 +28,7 @@ export default function Page() {
   const { account, chainId } = context || {};
 
   const [typedAddress, setTypedAddress] = useState<string>(
-    context?.hookToEdit?.hook.target || ""
+    context?.hookToEdit?.hook.target || "",
   );
 
   const [debouncedAddress] = useDebounceValue(typedAddress, 300, {

diff --git a/apps/claim-vesting/src/hooks/useClaimVestingData.ts b/apps/claim-vesting/src/hooks/useClaimVestingData.ts
@@ -43,7 +43,7 @@ export const useClaimVestingData = ({
         chain: chainMapping[chainId],
         transport: http(),
       }),
-    [chainId]
+    [chainId],
   );
   const {
     claimableAmountWei,
@@ -96,7 +96,7 @@ export const useClaimVestingData = ({
           6,
           "decimal",
           "standard",
-          0.000001
+          0.000001,
         )
       : "0.0";
   const formattedClaimableAmountFullDecimals =
@@ -106,7 +106,7 @@ export const useClaimVestingData = ({
           Number(decimals),
           "decimal",
           "standard",
-          Number(`0.${"0".repeat(Number(decimals) - 1)}1`)
+          Number(`0.${"0".repeat(Number(decimals) - 1)}1`),
         )
       : "0.0";
   const loading = isLoadingToken || isLoadingVesting || isLoadingGasLimit;

diff --git a/apps/create-vesting/src/app/layout.tsx b/apps/create-vesting/src/app/layout.tsx
@@ -1,9 +1,9 @@
 "use client";
 
 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 { IFrameContextProvider } from "@bleu/cow-hooks-ui";
 import { TokenAmountTypeProvider } from "#/context/TokenAmountType";
 
 export default function Layout({ children }: { children: React.ReactNode }) {

diff --git a/apps/create-vesting/src/app/page.tsx b/apps/create-vesting/src/app/page.tsx
@@ -1,37 +1,41 @@
 "use client";
 
 import {
-  Input,
-  PeriodWithScaleInput,
   ButtonPrimary,
   ContentWrapper,
+  type HookDappContextAdjusted,
+  Input,
+  PeriodWithScaleInput,
+  Spinner,
   TokenAmountInput,
   Wrapper,
-  HookDappContextAdjusted,
   useIFrameContext,
 } from "@bleu/cow-hooks-ui";
 import { Token } from "@uniswap/sdk-core";
 
-import { useCallback, useMemo } from "react";
 import { Form } from "@bleu/ui";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useCallback, useMemo } from "react";
 import { useForm } from "react-hook-form";
 
 import {
-  CreateVestingFormData,
+  type CreateVestingFormData,
   createVestingSchema,
   periodScaleOptions,
 } from "#/utils/schema";
 
-import { useGetHooksTransactions } from "#/hooks/useGetHooksTransactions";
-import { useRouter } from "next/navigation";
 import { useReadTokenContract } from "@bleu/cow-hooks-ui";
-import { vestingFactoriesMapping } from "#/utils/vestingFactoriesMapping";
-import { VestAllFromSwapCheckbox } from "#/components/VestAllFromSwapCheckbox";
+import { useRouter } from "next/navigation";
+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 } = useTokenAmountTypeContext();
+  const { vestAllFromSwap, vestAllFromAccount } = useTokenAmountTypeContext();
   const { context, setHookInfo } = useIFrameContext();
   const router = useRouter();
 
@@ -56,7 +60,7 @@ export default function Page() {
       context?.chainId && tokenAddress && tokenDecimals
         ? new Token(context.chainId, tokenAddress, tokenDecimals, tokenSymbol)
         : undefined,
-    [context?.chainId, tokenAddress, tokenDecimals]
+    [context?.chainId, tokenAddress, tokenDecimals, tokenSymbol],
   );
 
   const vestingEscrowFactoryAddress = useMemo(() => {
@@ -67,7 +71,7 @@ export default function Page() {
 
   const onSubmitCallback = useCallback(
     async (data: CreateVestingFormData) => {
-      if (!context || !token || !vestingEscrowFactoryAddress) return;
+      if (!context?.account || !token || !vestingEscrowFactoryAddress) return;
       const hookInfo = await getHooksTransactions({
         token,
         vestingEscrowFactoryAddress,
@@ -77,12 +81,19 @@ export default function Page() {
       setHookInfo(hookInfo);
       router.push("/signing");
     },
-    [context?.account, token, vestingEscrowFactoryAddress, vestAllFromSwap]
+    [
+      context?.account,
+      token,
+      vestingEscrowFactoryAddress,
+      router.push,
+      setHookInfo,
+      getHooksTransactions,
+    ],
   );
 
   const onSubmit = useMemo(
     () => form.handleSubmit(onSubmitCallback),
-    [form, onSubmitCallback]
+    [form, onSubmitCallback],
   );
 
   if (!context)
@@ -131,15 +142,20 @@ export default function Page() {
               label="Amount"
               placeholder="0.0"
               autoComplete="off"
-              disabled={vestAllFromSwap}
-              validation={{ valueAsNumber: true, required: true }}
+              disabled={vestAllFromSwap || vestAllFromAccount}
+              validation={{
+                setValueAs: (v) =>
+                  v === "" ? undefined : Number.parseInt(v, 10),
+                required: !(vestAllFromAccount || vestAllFromSwap),
+              }}
               onKeyDown={(e) =>
                 ["e", "E", "+", "-"].includes(e.key) && e.preventDefault()
               }
             />
           </div>
           <br />
           <VestAllFromSwapCheckbox />
+          <VestAllFromAccountCheckbox />
           <br />
         </ContentWrapper>
         <ButtonPrimary type="submit">

diff --git a/apps/create-vesting/src/app/signing/page.tsx b/apps/create-vesting/src/app/signing/page.tsx
@@ -1,17 +1,17 @@
 "use client";
 
 import {
-  useIFrameContext,
+  type BaseTransaction,
   SignatureSteps,
   WaitingSignature,
-  BaseTransaction,
   useCowShedSignature,
   useHandleTokenAllowance,
+  useIFrameContext,
   useSubmitHook,
 } from "@bleu/cow-hooks-ui";
-import { BigNumber, BigNumberish } from "ethers";
+import { BigNumber, type BigNumberish } from "ethers";
 import { useCallback, useMemo, useState } from "react";
-import { Address } from "viem";
+import type { Address } from "viem";
 import { useTokenAmountTypeContext } from "#/context/TokenAmountType";
 
 export default function Page() {
@@ -60,7 +60,7 @@ export default function Page() {
       target: cowShed.getFactoryAddress(),
       callData: cowShedCall,
     });
-  }, [cowShedSignature, hookInfo, permitTxs, cowShed]);
+  }, [cowShedSignature, submitHook, hookInfo, permitTxs, cowShed]);
 
   const permitCallback = useCallback(
     async (permit: {
@@ -70,7 +70,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 +85,7 @@ export default function Page() {
       }
       setCurrentStepIndex((prev) => prev + 1);
     },
-    [handleTokenAllowance]
+    [handleTokenAllowance],
   );
 
   const steps = useMemo(() => {
@@ -109,7 +109,7 @@ export default function Page() {
         callback: cowShedCallback,
       },
     ];
-  }, [hookInfo, permitTxs, permitCallback]);
+  }, [hookInfo, permitCallback, cowShedCallback]);
 
   return (
     <div className="flex flex-col gap-2 p-2 text-center h-full justify-between items-center">

diff --git a/apps/create-vesting/src/components/Checkboxes.tsx b/apps/create-vesting/src/components/Checkboxes.tsx
@@ -0,0 +1,67 @@
+import { Input, Label } from "@bleu/ui";
+import React, { useEffect } from "react";
+import { useFormContext } from "react-hook-form";
+import { useTokenAmountTypeContext } from "#/context/TokenAmountType";
+
+export const FormCheckbox = ({
+  name,
+  state,
+  setState,
+  label,
+}: {
+  name: string;
+  state: boolean;
+  setState: (state: boolean) => void;
+  label?: string;
+}) => {
+  const { setValue } = useFormContext();
+
+  useEffect(() => {
+    setValue("amount", "");
+    setValue(name, state);
+  }, [name, state, setValue]);
+
+  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>
+  );
+};
+
+export const VestAllFromSwapCheckbox = () => {
+  const { vestAllFromSwap, setVestAllFromSwap } = useTokenAmountTypeContext();
+  return (
+    <FormCheckbox
+      name="vestAllFromSwap"
+      state={vestAllFromSwap}
+      setState={setVestAllFromSwap}
+      label="Use all tokens from swap"
+    />
+  );
+};
+
+export const VestAllFromAccountCheckbox = () => {
+  const { vestAllFromAccount, setVestAllFromAccount } =
+    useTokenAmountTypeContext();
+  return (
+    <FormCheckbox
+      name="vestAllFromAccount"
+      state={vestAllFromAccount}
+      setState={setVestAllFromAccount}
+      label="Use all your tokens after swap"
+    />
+  );
+};
diff --git a/apps/create-vesting/src/components/VestAllFromSwapCheckbox.tsx b/apps/create-vesting/src/components/VestAllFromSwapCheckbox.tsx
diff --git a/apps/create-vesting/src/context/TokenAmountType.tsx b/apps/create-vesting/src/context/TokenAmountType.tsx
@@ -1,22 +1,40 @@
 "use client";
 
-import { createContext, PropsWithChildren, useContext, useState } from "react";
+import {
+  type PropsWithChildren,
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
 
 type TokenAmountType = {
   vestAllFromSwap: boolean;
   setVestAllFromSwap: (vestAllFromSwap: boolean) => void;
+  vestAllFromAccount: boolean;
+  setVestAllFromAccount: (vestAllFromAccount: boolean) => void;
 };
 
 export const TokenAmountTypeContext = createContext({} as TokenAmountType);
 
 export function TokenAmountTypeProvider({ children }: PropsWithChildren) {
   const [vestAllFromSwap, setVestAllFromSwap] = useState<boolean>(false);
+  const [vestAllFromAccount, setVestAllFromAccount] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (vestAllFromSwap) setVestAllFromAccount(false);
+  }, [vestAllFromSwap]);
+  useEffect(() => {
+    if (vestAllFromAccount) setVestAllFromSwap(false);
+  }, [vestAllFromAccount]);
 
   return (
     <TokenAmountTypeContext.Provider
       value={{
         vestAllFromSwap,
         setVestAllFromSwap,
+        vestAllFromAccount,
+        setVestAllFromAccount,
       }}
     >
       {children}