add warning for weighted pool amounts

balancer · Dec 9, 2024 · c5681f3 · c5681f3
1 parent bf49b00
commit c5681f3
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 5 deletions.
diff --git a/packages/nextjs/app/v3/_components/ChooseTokens.tsx b/packages/nextjs/app/v3/_components/ChooseTokens.tsx
@@ -3,7 +3,7 @@ import { ChooseToken } from "./ChooseToken";
 import { PoolType } from "@balancer/sdk";
 import { PlusIcon } from "@heroicons/react/24/outline";
 import { Alert } from "~~/components/common";
-import { initialTokenConfig, usePoolCreationStore, useVerifyProportionalInit } from "~~/hooks/v3";
+import { initialTokenConfig, usePoolCreationStore, useUserDataStore } from "~~/hooks/v3";
 
 const MAX_TOKENS = {
   [PoolType.Weighted]: 8,
@@ -12,7 +12,8 @@ const MAX_TOKENS = {
 
 export function ChooseTokens() {
   const { tokenConfigs, poolType, updatePool } = usePoolCreationStore();
-  const isProportional = useVerifyProportionalInit();
+  const { hasAgreedToWarning, updateUserData } = useUserDataStore();
+  // const isProportional = useVerifyProportionalInit();
 
   // Beware of javascript floating point precision issues if 100 % number of tokens is not equal to zero
   function handleAddToken() {
@@ -60,7 +61,27 @@ export function ChooseTokens() {
         ))}
       </div>
 
-      {!isProportional && <Alert type="warning">Token USD values are not proportional to selected weights</Alert>}
+      {poolType === PoolType.Weighted && (
+        <Alert type="warning" showIcon={false}>
+          <div className="form-control">
+            <label className="label cursor-pointer flex gap-4 m-0 p-0">
+              <input
+                type="checkbox"
+                className="checkbox rounded-lg border-neutral-700"
+                onChange={() => {
+                  updateUserData({ hasAgreedToWarning: !hasAgreedToWarning });
+                }}
+                checked={hasAgreedToWarning}
+              />
+              <span className="">
+                I understand that assets should be added proportional to the chosen token weights
+              </span>
+            </label>
+          </div>
+        </Alert>
+      )}
+
+      {/* {!isProportional && <Alert type="warning">Token USD values are not proportional to selected weights</Alert>} */}
     </div>
   );
 }
diff --git a/packages/nextjs/hooks/v3/useUserDataStore.ts b/packages/nextjs/hooks/v3/useUserDataStore.ts
@@ -6,13 +6,15 @@ import { persist } from "zustand/middleware";
 export type UserDataStore = {
   userTokenBalances: Record<Address, string>;
   hasEditedPoolInformation: boolean;
+  hasAgreedToWarning: boolean;
   updateUserData: (updates: Partial<UserDataStore>) => void;
   clearUserData: () => void;
 };
 
 export const initialUserDataStore = {
   userTokenBalances: {},
   hasEditedPoolInformation: false,
+  hasAgreedToWarning: false,
 };
 
 // Stores all the data that will be used for pool creation

diff --git a/packages/nextjs/hooks/v3/useValidatePoolCreationInput.ts b/packages/nextjs/hooks/v3/useValidatePoolCreationInput.ts
@@ -7,7 +7,7 @@ import { MAX_POOL_NAME_LENGTH } from "~~/utils/constants";
 export function useValidatePoolCreationInput() {
   const { isWrongNetwork } = useValidateNetwork();
   const { data: walletClient } = useWalletClient();
-  const { userTokenBalances } = useUserDataStore();
+  const { userTokenBalances, hasAgreedToWarning } = useUserDataStore();
 
   const {
     poolType,
@@ -59,7 +59,9 @@ export function useValidatePoolCreationInput() {
         if (!token.isValidRateProvider) return false;
       }
       return true;
-    }) && isValidTokenWeights;
+    }) &&
+    isValidTokenWeights &&
+    (poolType !== PoolType.Weighted || hasAgreedToWarning);
 
   // Check tanstack query cache for pool hooks contract validity
   const { data: isValidPoolHooksContract } = useValidateHooksContract(isUsingHooks, poolHooksContract);