Updated Create Pool Flow with Presets

apps/hub/src/app/pools/components/amplification-parameter.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import React, { useState } from "react";
+import { cn } from "@bera/ui";
+import { Alert, AlertDescription, AlertTitle } from "@bera/ui/alert";
+import { InputWithLabel } from "@bera/ui/input";
+
+import BeraTooltip from "~/components/bera-tooltip";
+
+interface AmplificationInputProps {
+  initialAmplification: number;
+  onAmplificationChange: (value: number) => void;
+  onInvalidAmplification: (isInvalid: boolean) => void;
+  minAmplification?: number;
+  maxAmplification?: number;
+}
+
+/**
+ * A component that allows the user to input an amplification parameter within a valid range.
+ */
+export const AmplificationInput: React.FC<AmplificationInputProps> = ({
+  initialAmplification,
+  onAmplificationChange,
+  onInvalidAmplification,
+  minAmplification = 1,
+  maxAmplification = 5000,
+}) => {
+  const [rawAmplification, setRawAmplification] = useState<string>(
+    `${initialAmplification}`,
+  );
+  const [isInvalid, setIsInvalid] = useState<boolean>(false); // Invalid state
+
+  const validateAmplification = (
+    value: string,
+  ): { valid: boolean; parsedValue?: number } => {
+    const parsedValue = Number(value);
+    if (
+      !Number.isNaN(parsedValue) &&
+      parsedValue >= minAmplification &&
+      parsedValue <= maxAmplification
+    ) {
+      return { valid: true, parsedValue };
+    }
+    return { valid: false };
+  };
+
+  const handleAmplificationChange = (value: string) => {
+    setRawAmplification(value); // Always update raw input
+    const { valid, parsedValue } = validateAmplification(value);
+
+    if (valid && parsedValue !== undefined) {
+      onAmplificationChange(parsedValue);
+      onInvalidAmplification(false);
+      setIsInvalid(false);
+    } else {
+      setIsInvalid(true);
+      onInvalidAmplification(true);
+    }
+  };
+
+  const handleBlur = () => {
+    const { valid, parsedValue } = validateAmplification(rawAmplification);
+    if (!valid) {
+      onInvalidAmplification(true);
+    } else {
+      setRawAmplification(`${parsedValue}`);
+    }
+  };
+
+  return (
+    <>
+      <div className="flex flex-col gap-4">
+        <InputWithLabel
+          label="Amplification Factor"
+          id="amplification-factor"
+          className={cn({
+            "border-destructive-foreground text-destructive-foreground":
+              isInvalid,
+          })}
+          variant="black"
+          value={rawAmplification}
+          onChange={(e) => handleAmplificationChange(e.target.value)}
+          onBlur={handleBlur}
+          maxLength={5}
+          tooltip={
+            <BeraTooltip
+              size="lg"
+              wrap
+              text={`
+                The Amplification Factor (A) controls how aggressively the pool reacts to price fluctuations. Higher A values 
+                maintain tighter spreads for small imbalances but increase slippage during large deviations like depegs. 
+                Conversely, lower A values permit price changes for smaller deviations, but lower efficiency. `}
+            />
+          }
+        />
+      </div>
+
+      {isInvalid && (
+        <Alert variant="destructive" className="mt-2">
+          <AlertTitle>Error</AlertTitle>
+          <AlertDescription>
+            Invalid amplification factor. Ensure it is between{" "}
+            {minAmplification} and {maxAmplification}.
+          </AlertDescription>
+        </Alert>
+      )}
+    </>
+  );
+};

apps/hub/src/app/pools/components/create-pool-input.tsx

@@ -1,13 +1,22 @@
 import React, { useEffect, useState } from "react";
-import { type Token } from "@bera/berajs";
+import { Oracle, OracleMode, truncateDecimal, type Token } from "@bera/berajs";
 import {
   beraTokenAddress,
   bgtTokenAddress,
   nativeTokenAddress,
 } from "@bera/config";
 import { SelectToken } from "@bera/shared-ui";
+import { Button } from "@bera/ui/button";
 import { Icons } from "@bera/ui/icons";
 import { InputWithLabel } from "@bera/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@bera/ui/select";
+import { PoolType } from "@berachain-foundation/berancer-sdk";
 import { formatUnits, parseUnits } from "viem";
 
 type Props = {
@@ -19,10 +28,13 @@ type Props = {
   locked: boolean;
   index: number;
   selectable?: boolean;
+  poolType: PoolType;
+  oracle: Oracle;
   onTokenSelection: (token: Token | undefined) => void;
   onWeightChange: (index: number, newWeight: bigint) => void;
   onLockToggle: (index: number) => void;
   onRemoveToken: (index: number) => void;
+  onOracleChange: (index: number, updates: Partial<Oracle>) => void;
 };
 
 export default function CreatePoolInput({
@@ -34,10 +46,13 @@ export default function CreatePoolInput({
   locked,
   index,
   selectable = true,
+  poolType,
+  oracle,
   onTokenSelection,
   onWeightChange,
   onLockToggle,
   onRemoveToken,
+  onOracleChange,
 }: Props) {
   const [rawInput, setRawInput] = useState(
     weight ? formatUnits(weight < 0n ? 0n : weight, 16) : "0",
@@ -85,26 +100,27 @@ export default function CreatePoolInput({
           onTokenSelection(selectedToken)
         }
         selectedTokens={selectedTokens}
-        btnClassName="border-none"
+        btnClassName="border-none overflow-clip"
       />
 
       {/* Weight Input */}
-      <div className="ml-auto flex items-center">
+      <div className="ml-auto flex items-center gap-2">
         {displayWeight && (
-          <div className="ml-auto flex items-center gap-1">
+          <div className="flex items-center gap-2">
             <span className="text-sm text-gray-400">%</span>
             <InputWithLabel
               variant="black"
               type="text"
-              value={rawInput}
+              title={rawInput}
+              value={truncateDecimal(rawInput, 3)}
               onChange={handleWeightChange}
-              className="w-52 rounded-md border bg-transparent text-center text-white"
+              className="w-24 rounded-md border bg-transparent text-center text-white"
             />
 
             <button
               type="button"
               onClick={() => onLockToggle(index)}
-              className="ml-2 mr-6"
+              className="ml-2"
             >
               {locked ? (
                 <Icons.lock className="h-4 w-4" />
@@ -114,6 +130,37 @@ export default function CreatePoolInput({
             </button>
           </div>
         )}
+        {poolType === PoolType.ComposableStable && oracle && (
+          <div className="w-full max-w-xs">
+            <Select
+              value={oracle.mode}
+              onValueChange={(value) =>
+                onOracleChange(index, {
+                  mode: value as OracleMode,
+                  tokenAddress: token?.address,
+                })
+              }
+            >
+              <SelectTrigger className="w-full cursor-pointer border-border bg-background text-base font-medium text-secondary-foreground">
+                <SelectValue placeholder="Select mode" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem
+                  className="cursor-pointer border-border text-base font-medium hover:bg-muted"
+                  value={OracleMode.None}
+                >
+                  Standard
+                </SelectItem>
+                <SelectItem
+                  className="cursor-pointer border-border text-base font-medium hover:bg-muted"
+                  value={OracleMode.Custom}
+                >
+                  Oracle
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        )}
 
         {/* Remove Button */}
         {displayRemove && (

apps/hub/src/app/pools/components/dynamic-pool-create-preview.tsx

@@ -7,6 +7,7 @@ import {
   balancerVaultAbi,
   formatUsd,
   getSafeNumber,
+  truncateHash,
   useBeraJs,
   wrapNativeToken,
   type Token,
@@ -37,7 +38,7 @@ import { formatUnits, parseUnits } from "viem";
 
 import { usePollPoolCreationRelayerApproval } from "~/hooks/usePollPoolCreationRelayerApproval";
 import { getPoolUrl } from "../fetchPools";
-import { OwnershipType } from "./ownership-input";
+import { OwnershipType } from "./parameters-input";
 
 type Props = {
   open: boolean;
@@ -141,18 +142,16 @@ export default function DynamicPoolCreationPreview({
     }
   }, [isRelayerApprovalError]);
 
-  const formattedOwnerAddress = `${ownerAddress.slice(
-    0,
-    6,
-  )}...${ownerAddress.slice(-4)} (${ownershipType})`;
+  const formattedOwnerAddress = `${ownershipType} (${
+    ownerAddress && truncateHash(ownerAddress, undefined, undefined, true)
+  })`;
 
   const poolDetails = [
     { label: "Pool Name", value: poolName },
     { label: "Pool Symbol", value: poolSymbol },
     { label: "Pool Type", value: poolType },
     { label: "Swap Fee", value: `${swapFee}%` },
     { label: "Owner Address", value: formattedOwnerAddress },
-    // TODO (#): we will want to display rate providers here
   ];
 
   if (

apps/hub/src/app/pools/components/oracle-input.tsx

@@ -0,0 +1,97 @@
+import React, { useState } from "react";
+import { ADDRESS_ZERO, Oracle, Token } from "@bera/berajs";
+import { Alert, AlertDescription, AlertTitle } from "@bera/ui/alert";
+import { InputWithLabel } from "@bera/ui/input";
+import { ZERO_ADDRESS } from "@berachain-foundation/berancer-sdk";
+
+import BeraTooltip from "~/components/bera-tooltip";
+
+interface OracleInputProps {
+  oracle: Oracle;
+  token: Token;
+  onOracleChange: (index: number, updates: Partial<Oracle>) => void;
+  index: number;
+}
+
+const MAXIMUM_CACHE_DURATION = 100000000;
+
+const OracleInput: React.FC<OracleInputProps> = ({
+  oracle,
+  token,
+  onOracleChange,
+  index,
+}) => {
+  const [rawAddress, setRawAddress] = useState(
+    oracle.address === ZERO_ADDRESS ? "" : oracle.address,
+  ); // NOTE: this works well since the default is 0x0, but if you set the value to 0x0 (a strange choice for custom) it will appear empty
+  const [addressError, setAddressError] = useState<string | null>(
+    oracle.address === ZERO_ADDRESS
+      ? "Please define a rate provider address."
+      : null,
+  );
+
+  const validateAddress = (value: string): boolean =>
+    /^0x[a-fA-F0-9]{40}$/.test(value);
+
+  const handleAddressChange = (value: string) => {
+    setRawAddress(value);
+
+    if (validateAddress(value)) {
+      setAddressError(null);
+      onOracleChange(index, { address: value });
+    } else {
+      setAddressError("Invalid address");
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-4 p-4">
+      <h3 className="font-bold">{token.symbol}</h3>
+
+      <InputWithLabel
+        label="Rate Provider Address"
+        variant="black"
+        value={rawAddress}
+        onChange={(e) => handleAddressChange(e.target.value)}
+        className="bg-transparent"
+        tooltip={
+          <BeraTooltip
+            size="md"
+            wrap={true}
+            // FIXME: this is an info-dump, do we want a full modal/Dialog for this?
+            text={`Address must point to a rate provider deployment implementing the function getRate() which returns an 
+                   exchange rate. You will want to use rateProviders for all assets in your pool when each asset has its own 
+                   price that is independent of all the other assets' prices.\nIf we have tokens A, B, and C and only have price 
+                   feeds with respect to USD, then we would want all assets to have price feeds. When internally calculating 
+                   relative prices, the USD would cancel out, giving us prices for A:B, A:C, B:C, and their inverses.\nIf we have
+                   tokens A and B and a rate provider that gives the price of A with respect to B, 
+                   then the rateProvider corresponding to token A would get the A:B price feed, and the rateProvider 
+                   corresponding to token B would be the zero address.`}
+          />
+        }
+      />
+      {addressError && (
+        <Alert variant="destructive">
+          <AlertTitle>Error</AlertTitle>
+          <AlertDescription>{addressError}</AlertDescription>
+        </Alert>
+      )}
+
+      <InputWithLabel
+        label="Cache Duration (seconds)"
+        variant="black"
+        type="number"
+        value={oracle.cacheDuration.toString()}
+        onChange={(e) => {
+          const duration = parseInt(e.target.value, 10);
+          if (duration >= 1 && duration <= MAXIMUM_CACHE_DURATION) {
+            onOracleChange(index, { cacheDuration: duration });
+          }
+        }}
+        className="bg-transparent"
+      />
+    </div>
+  );
+};
+
+export default OracleInput;