Merge pull request #51 from bleu/jean/create-vesting-external-review

Create vesting external review pt2
bleu · Oct 28, 2024 · 3aba0fa · 3aba0fa
2 parents 8e81816 + e55e2d5
commit 3aba0fa
Show file tree

Hide file tree

Showing 9 changed files with 48 additions and 16 deletions.
diff --git a/apps/create-vesting/package.json b/apps/create-vesting/package.json
@@ -14,7 +14,7 @@
     "@bleu/ui": "0.1.131",
     "@bleu/utils": "workspace:*",
     "@cowprotocol/cow-sdk": "^5.5.1",
-    "@cowprotocol/hook-dapp-lib": "1.1.0-RC0",
+    "@cowprotocol/hook-dapp-lib": "1.2.0",
     "@hookform/resolvers": "3.9.0",
     "@radix-ui/react-icons": "1.3.0",
     "@uniswap/sdk-core": "5.4.0",

diff --git a/apps/create-vesting/src/app/page.tsx b/apps/create-vesting/src/app/page.tsx
@@ -151,7 +151,7 @@ export default function Page() {
           amountPreviewFullDecimals={amountPreviewFullDecimals}
           formattedUserBalance={formattedUserBalance}
           userBalanceFloat={userBalanceFloat}
-          shouldEnableMaxSelector={vestUserInput}
+          shouldEnableMaxSelector={vestUserInput && amount !== userBalanceFloat}
         />
         <div className="w-full flex flex-col gap-y-2">
           <VestAllFromSwapCheckbox />

diff --git a/apps/create-vesting/src/components/AmountInput.tsx b/apps/create-vesting/src/components/AmountInput.tsx
@@ -1,4 +1,4 @@
-import { TokenAmountInput } from "@bleu/cow-hooks-ui";
+import { TokenAmountInput, useIFrameContext } from "@bleu/cow-hooks-ui";
 import type { Token } from "@uniswap/sdk-core";
 
 export const AmountInput = ({
@@ -20,6 +20,8 @@ export const AmountInput = ({
   userBalanceFloat: number | undefined;
   shouldEnableMaxSelector: boolean;
 }) => {
+  const { context } = useIFrameContext();
+
   return (
     <TokenAmountInput
       name="amount"
@@ -37,6 +39,10 @@ export const AmountInput = ({
       userBalance={formattedUserBalance}
       userBalanceFullDecimals={String(userBalanceFloat)}
       shouldEnableMaxSelector={shouldEnableMaxSelector}
+      shouldDisplayApprox={
+        //@ts-ignore
+        context?.orderParams.kind === "sell"
+      }
       validation={{
         setValueAs: (v) => (v === "" ? undefined : Number(v)),
         required: !(vestAllFromAccount || vestAllFromSwap),

diff --git a/apps/create-vesting/src/components/VestAllFromAccountCheckbox.tsx b/apps/create-vesting/src/components/VestAllFromAccountCheckbox.tsx
@@ -1,14 +1,20 @@
-import { Checkbox } from "@bleu/cow-hooks-ui";
+import { Checkbox, useIFrameContext } from "@bleu/cow-hooks-ui";
 import { useFormContext } from "react-hook-form";
 
 export const VestAllFromAccountCheckbox = () => {
   const { setValue } = useFormContext();
+  const { context } = useIFrameContext();
 
   return (
     <Checkbox
       name="vestAllFromAccount"
       label="Use all your tokens after swap"
-      isSelectedMessage="The token buy amount may vary due to price changes."
+      isSelectedMessage={
+        //@ts-ignore
+        context?.orderParams?.kind === "sell"
+          ? "The token buy amount may vary due to price changes."
+          : undefined
+      }
       onSelectSideEffect={() => {
         setValue("amount", undefined);
         setValue("vestUserInput", false);

diff --git a/apps/create-vesting/src/components/VestAllFromSwapCheckbox.tsx b/apps/create-vesting/src/components/VestAllFromSwapCheckbox.tsx
@@ -1,14 +1,20 @@
-import { Checkbox } from "@bleu/cow-hooks-ui";
+import { Checkbox, useIFrameContext } from "@bleu/cow-hooks-ui";
 import { useFormContext } from "react-hook-form";
 
 export const VestAllFromSwapCheckbox = () => {
   const { setValue } = useFormContext();
+  const { context } = useIFrameContext();
 
   return (
     <Checkbox
       name="vestAllFromSwap"
       label="Use all tokens from swap"
-      isSelectedMessage="The token buy amount may vary due to price changes."
+      isSelectedMessage={
+        //@ts-ignore
+        context?.orderParams?.kind === "sell"
+          ? "The token buy amount may vary due to price changes."
+          : undefined
+      }
       onSelectSideEffect={() => {
         setValue("amount", undefined);
         setValue("vestUserInput", false);

diff --git a/packages/cow-hooks-ui/src/ui/Checkbox.tsx b/packages/cow-hooks-ui/src/ui/Checkbox.tsx
@@ -78,7 +78,7 @@ export const Checkbox = ({
         <span className="cursor-pointer">{label}</span>
       </Label>
       {isSelected && isSelectedMessage && (
-        <span className="w-full text-center mt-1 py-1 rounded-xl font-normal text-xs bg-color-warning/15 text-color-warning-text">
+        <span className="w-full text-center mt-1 py-1 rounded-xl font-normal text-xs bg-color-alert-bg/15 text-color-alert-text">
           <ExclamationTriangleIcon className="w-4 h-4 mr-1 inline" />
           {isSelectedMessage}
         </span>

diff --git a/packages/cow-hooks-ui/src/ui/SignaturesSteps.tsx b/packages/cow-hooks-ui/src/ui/SignaturesSteps.tsx
@@ -37,14 +37,18 @@ function SignatureStep({
 }) {
   return (
     <div className="flex flex-col items-center h-full">
-      <div className="flex flex-row items-center gap-2 py-2">
+      <div className="flex flex-row items-center gap-2 py-2 w-52">
         <div className="inline-flex items-center justify-center w-6 h-6 border-1 border-primary rounded-full">
           <span className="text-xs w-full text-center">{stepIndex + 1}</span>
         </div>
-        <span className="text-sm">{step.label}</span>
-        {stepIndex < currentStepIndex && (
-          <CheckIcon className="size-5 text-primary-foreground bg-primary rounded-full" />
-        )}
+        <div className="w-40 flex items-center justify-center">
+          <span className="text-sm">{step.label}</span>
+        </div>
+        <div className="w-5 flex items-center justify-center">
+          {stepIndex < currentStepIndex && (
+            <CheckIcon className="size-5 text-primary-foreground bg-primary rounded-full" />
+          )}
+        </div>
       </div>
       {stepIndex !== lastIndex && <div className="h-full w-[1px] bg-primary" />}
     </div>

diff --git a/packages/cow-hooks-ui/src/ui/TokenAmountInput.tsx b/packages/cow-hooks-ui/src/ui/TokenAmountInput.tsx
@@ -25,6 +25,7 @@ export interface ITokenAmountInput
   userBalance?: string | undefined;
   userBalanceFullDecimals?: string | undefined;
   shouldEnableMaxSelector?: boolean;
+  shouldDisplayApprox?: boolean;
 }
 
 export function TokenAmountInput({
@@ -42,6 +43,7 @@ export function TokenAmountInput({
   userBalance,
   userBalanceFullDecimals,
   shouldEnableMaxSelector,
+  shouldDisplayApprox,
   ...props
 }: ITokenAmountInput) {
   const { register, control, setValue } = useFormContext();
@@ -77,7 +79,8 @@ export function TokenAmountInput({
               title={disabledValueFullDecimals}
               className="outline-none text-right p-0 m-0 border-none text-xl text-color-text-paper bg-inherit placeholder:opacity-70 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none cursor-default"
             >
-              ≈ {disabledValue}
+              {shouldDisplayApprox && "≈ "}
+              {disabledValue}
             </span>
           ) : (
             <Input

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml