diff --git a/packages/nextjs/app/v3/_components/ChooseInfo.tsx b/packages/nextjs/app/v3/_components/ChooseInfo.tsx index efd70e0..635c3d4 100644 --- a/packages/nextjs/app/v3/_components/ChooseInfo.tsx +++ b/packages/nextjs/app/v3/_components/ChooseInfo.tsx @@ -3,7 +3,7 @@ import { PoolType } from "@balancer/sdk"; import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline"; import { Alert, TextField } from "~~/components/common"; import { useBoostableWhitelist, useCheckIfV3PoolExists, usePoolCreationStore, useUserDataStore } from "~~/hooks/v3"; -import { MAX_POOL_NAME_LENGTH } from "~~/utils/constants"; +import { MAX_POOL_NAME_LENGTH, MAX_POOL_SYMBOL_LENGTH } from "~~/utils/constants"; /** * @dev Gauge creation reverts if the name is longer than 32 characters @@ -60,6 +60,7 @@ export const ChooseInfo = () => { label="Pool symbol" placeholder="Enter pool symbol" value={symbol} + maxLength={MAX_POOL_SYMBOL_LENGTH} onChange={e => { updatePool({ symbol: e.target.value.trim() }); updateUserData({ hasEditedPoolSymbol: true }); diff --git a/packages/nextjs/components/common/TextField.tsx b/packages/nextjs/components/common/TextField.tsx index c26dee7..557fed9 100644 --- a/packages/nextjs/components/common/TextField.tsx +++ b/packages/nextjs/components/common/TextField.tsx @@ -37,7 +37,7 @@ export const TextField: React.FC = ({ if (!isValidAddress) return "Invalid address"; if (isRateProvider && !isValidRateProvider) return "Invalid rate provider"; if (isPoolHooksContract && !isValidPoolHooksContract) return "Invalid pool hooks contract"; - if (maxLength && !isValidLength) return `Pool name is too long: ${value?.length ?? 0}/${maxLength}`; + if (maxLength && !isValidLength) return `Too many characters: ${value?.length ?? 0}/${maxLength}`; return null; }; diff --git a/packages/nextjs/hooks/v3/useValidatePoolCreationInput.ts b/packages/nextjs/hooks/v3/useValidatePoolCreationInput.ts index 2f2b231..5624f0b 100644 --- a/packages/nextjs/hooks/v3/useValidatePoolCreationInput.ts +++ b/packages/nextjs/hooks/v3/useValidatePoolCreationInput.ts @@ -2,7 +2,7 @@ import { PoolType, TokenType } from "@balancer/sdk"; import { isAddress, parseUnits } from "viem"; import { useWalletClient } from "wagmi"; import { usePoolCreationStore, useUserDataStore, useValidateHooksContract, useValidateNetwork } from "~~/hooks/v3"; -import { MAX_POOL_NAME_LENGTH } from "~~/utils/constants"; +import { MAX_POOL_NAME_LENGTH, MAX_POOL_SYMBOL_LENGTH } from "~~/utils/constants"; export function useValidatePoolCreationInput() { const { isWrongNetwork } = useValidateNetwork(); @@ -76,7 +76,8 @@ export function useValidatePoolCreationInput() { !isUsingHooks || isValidPoolHooksContract, ].every(Boolean); - const isInfoValid = !!name && !!symbol && name.length <= MAX_POOL_NAME_LENGTH; + const isInfoValid = + !!name && !!symbol && name.length <= MAX_POOL_NAME_LENGTH && symbol.length <= MAX_POOL_SYMBOL_LENGTH; const isPoolCreationInputValid = isTypeValid && isTokensValid && isParametersValid && isInfoValid; diff --git a/packages/nextjs/utils/constants.ts b/packages/nextjs/utils/constants.ts index a1c6ee5..7c61b95 100644 --- a/packages/nextjs/utils/constants.ts +++ b/packages/nextjs/utils/constants.ts @@ -2,6 +2,8 @@ export const COW_MIN_AMOUNT = BigInt(1e6); /** * @dev Gauge creation reverts if the name is longer than 32 characters + * @dev Gauge creation reverts if the symbol is longer than 26 characters (Franz said so) * https://github.com/balancer/pool-creator/issues/17#issuecomment-2430158673 */ export const MAX_POOL_NAME_LENGTH = 32; +export const MAX_POOL_SYMBOL_LENGTH = 26;