feat(bex): handle properly user inputs for naming their pool & pool s…

…ymbol & prepare to move approvals / submission into a preview page + improved default names
berachain · Nov 5, 2024 · 88fb5fe · 88fb5fe
1 parent 0a51f5c
commit 88fb5fe
Show file tree

Hide file tree

Showing 2 changed files with 109 additions and 72 deletions.
diff --git a/apps/hub/src/app/pools/create/CreatePageContent.tsx b/apps/hub/src/app/pools/create/CreatePageContent.tsx
@@ -113,8 +113,8 @@ export default function CreatePageContent() {
   }, [poolType]);
 
   const {
-    poolName,
-    poolSymbol,
+    poolName: generatedPoolName,
+    poolSymbol: generatedPoolSymbol,
     isDupePool,
     dupePool,
     createPool,
@@ -138,6 +138,13 @@ export default function CreatePageContent() {
     },
   });
 
+  const [poolName, setPoolName] = useState<string>(generatedPoolName);
+  const [poolSymbol, setPoolSymbol] = useState<string>(generatedPoolSymbol);
+  useEffect(() => {
+    setPoolName(generatedPoolName);
+    setPoolSymbol(generatedPoolSymbol);
+  }, [generatedPoolName, generatedPoolSymbol]);
+
   // Determine if liquidity input should be enabled (i.e. we have selected enough tokens)
   useEffect(() => {
     if (
@@ -355,70 +362,81 @@ export default function CreatePageContent() {
             </div>
           </section>
 
-          {/* FIXME: pool name and pool symbol input */}
-          <section className="flex w-full flex-col gap-10 pb-16">
-            <p className="self-start text-3xl font-semibold">Pool Name</p>
+          <section className="flex w-full flex-col gap-10 py-12">
             <div className="flex flex-col gap-4">
               <Card className="flex w-full cursor-pointer flex-col gap-0 border-2 p-4">
-                {/* <span className="text-lg font-semibold">Pool Name</span>
-                <span className="mt-[-4px] text-sm text-muted-foreground">
-                  {poolName}
-                </span> */}
-                <InputWithLabel label="Pool Name" value={poolName} />
+                <InputWithLabel
+                  label="Pool Name"
+                  value={poolName}
+                  maxLength={85}
+                  onChange={(e) => {
+                    setPoolName(e.target.value);
+                  }}
+                />
               </Card>
               <Card className="flex w-full cursor-pointer flex-col gap-0 border-2 p-4">
-                <span className="text-lg font-semibold">Pool Symbol</span>
-                <span className="mt-[-4px] text-sm text-muted-foreground">
-                  {poolSymbol}
-                </span>
+                <InputWithLabel
+                  label="Pool Symbol"
+                  value={poolSymbol}
+                  maxLength={85}
+                  onChange={(e) => {
+                    setPoolSymbol(e.target.value.replace(" ", "-"));
+                  }}
+                />
               </Card>
             </div>
           </section>
 
-          {/* Approvals */}
-          {!isRelayerApproved && (
-            <Button
-              disabled={isRelayerApprovalLoading}
-              onClick={approveRelayer}
-              className="mt-4 w-full"
-            >
-              {isRelayerApprovalLoading || isLoadingRelayerStatus
-                ? "Approving..."
-                : "Approve Pool Creation Helper"}
-            </Button>
-          )}
+          <section className="flex w-full flex-col gap-10">
+            <h1 className="self-start text-3xl font-semibold">
+              Approve & Submit
+            </h1>
 
-          {tokensNeedApproval.length > 0 &&
-            (() => {
-              const approvalTokenIndex = tokens.findIndex(
-                (t) => t.address === tokensNeedApproval[0]?.address,
-              );
-              const approvalToken = tokens[approvalTokenIndex];
-              const approvalAmount = parseUnits(
-                approvalToken.amount,
-                approvalToken?.decimals ?? 18,
-              );
+            {/* Approvals FIXME this and below belong inside a preview page*/}
+            {!isRelayerApproved && (
+              <Button
+                disabled={isRelayerApprovalLoading}
+                onClick={approveRelayer}
+                className="mt-4 w-full"
+              >
+                {isRelayerApprovalLoading || isLoadingRelayerStatus
+                  ? "Approving..."
+                  : "Approve Pool Creation Helper"}
+              </Button>
+            )}
 
-              return (
-                <ApproveButton
-                  amount={approvalAmount}
-                  token={approvalToken}
-                  spender={balancerVaultAddress}
-                  onApproval={() => refreshAllowances()}
-                />
-              );
-            })()}
+            {tokensNeedApproval.length > 0 &&
+              (() => {
+                const approvalTokenIndex = tokens.findIndex(
+                  (t) => t.address === tokensNeedApproval[0]?.address,
+                );
+                const approvalToken = tokens[approvalTokenIndex];
+                const approvalAmount = parseUnits(
+                  approvalToken.amount,
+                  approvalToken?.decimals ?? 18,
+                );
 
-          {/* Pool creation button itself */}
-          <ActionButton>
-            <Button
-              disabled={tokensNeedApproval.length > 0 || !isRelayerApproved}
-              className="w-full"
-              onClick={createPool}
-            >
-              Create Pool
-            </Button>
-          </ActionButton>
+                return (
+                  <ApproveButton
+                    amount={approvalAmount}
+                    token={approvalToken}
+                    spender={balancerVaultAddress}
+                    onApproval={() => refreshAllowances()}
+                  />
+                );
+              })()}
+
+            {/* Pool creation button itself FIXME: move into a preview page*/}
+            <ActionButton>
+              <Button
+                disabled={tokensNeedApproval.length > 0 || !isRelayerApproved}
+                className="w-full"
+                onClick={createPool}
+              >
+                Create Pool
+              </Button>
+            </ActionButton>
+          </section>
         </section>
       </div>
     </div>

diff --git a/apps/hub/src/hooks/useCreatePool.ts b/apps/hub/src/hooks/useCreatePool.ts
@@ -47,23 +47,6 @@ export const useCreatePool = ({
   const [isDupePool, setIsDupePool] = useState<boolean>(false);
   const [dupePool, setDupePool] = useState<PoolWithMethods | null>(null);
 
-  const generatePoolName = (tokens: Token[], poolType: PoolType): string => {
-    const tokenSymbols = tokens.map((token) => token.symbol).join(" | ");
-    return `${tokenSymbols} ${poolType}`;
-  };
-
-  const generatePoolSymbol = (tokens: Token[], poolType: PoolType): string => {
-    const tokenSymbols = tokens.map((token) => token.symbol).join("-");
-    return `${tokenSymbols}-${poolType.toUpperCase()}`;
-  };
-
-  const [poolName, poolSymbol] = useMemo(() => {
-    return [
-      generatePoolName(tokens, poolType),
-      generatePoolSymbol(tokens, poolType),
-    ];
-  }, [tokens, poolType]);
-
   // pull down the pools we have to check for duplicates
   const {
     data: pools,
@@ -132,6 +115,42 @@ export const useCreatePool = ({
     return { normalizedWeights, formattedNormalizedWeights };
   }, [weights]);
 
+  const generatePoolName = (tokens: Token[], poolType: PoolType): string => {
+    if (tokens.length === 0) {
+      return "";
+    }
+    const tokenSymbols = tokens.map((token) => token.symbol).join(" | ");
+    return `${tokenSymbols} ${poolType}`;
+  };
+
+  const generatePoolSymbol = (
+    tokens: Token[],
+    weights: bigint[],
+    poolType: PoolType,
+  ): string => {
+    const poolTypeString = poolType.toString().toUpperCase();
+    if (poolType === PoolType.Weighted) {
+      if (weights.length === 0) {
+        return "";
+      }
+      return `${tokens
+        .map((token, index) => {
+          const weight = weights[index];
+          const weightPercentage = parseFloat(formatUnits(weight, 18)) * 100;
+          return `${weightPercentage.toFixed(0)}${token.symbol}`;
+        })
+        .join("-")}-${poolTypeString}`;
+    }
+    return `${tokens.map((token) => token.symbol).join("-")}-${poolTypeString}`;
+  };
+
+  const [poolName, poolSymbol] = useMemo(() => {
+    return [
+      generatePoolName(tokens, poolType),
+      generatePoolSymbol(tokens, normalizedWeights, poolType),
+    ];
+  }, [tokens, poolType, normalizedWeights]);
+
   const createPool = () => {
     if (!account) return;