From ff6c07d3aacc6649803f175eea4ec2e1d0f9d724 Mon Sep 17 00:00:00 2001
From: Matt Pereira <mattpereira.dev@gmail.com>
Date: Mon, 26 May 2025 19:39:34 -0700
Subject: [PATCH 01/18] enable create reclamm preview

---
 .../app/v3/_components/PoolConfiguration/ChooseType/index.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseType/index.tsx b/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseType/index.tsx
index c719e78..ee16f74 100644
--- a/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseType/index.tsx
+++ b/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseType/index.tsx
@@ -7,7 +7,7 @@ import { type SupportedPoolTypes, poolTypeMap } from "~~/utils/constants";
 export function ChooseType() {
   // const { poolType } = usePoolCreationStore();
 
-  const poolTypes = Object.keys(poolTypeMap).slice(0, 4) as SupportedPoolTypes[];
+  const poolTypes = Object.keys(poolTypeMap) as SupportedPoolTypes[];
 
   return (
     <>

From 6c793cf0b823b995d4f70ac09805e310e1399f26 Mon Sep 17 00:00:00 2001
From: Matt Pereira <mattpereira.dev@gmail.com>
Date: Mon, 26 May 2025 19:42:27 -0700
Subject: [PATCH 02/18] clean up alerts

---
 .../ChooseParameters/ReClammParams.tsx                | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/ReClammParams.tsx b/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/ReClammParams.tsx
index 4716782..6cec508 100644
--- a/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/ReClammParams.tsx
+++ b/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/ReClammParams.tsx
@@ -42,12 +42,15 @@ export const ReClammParams = () => {
         </a>
       </div>
 
-      <div className="bg-base-200 w-full h-96 rounded-xl mb-3">
+      <div className="bg-base-200 w-full h-96 rounded-xl mb-4">
         <ReClammChart />
       </div>
 
       <div className="flex flex-col gap-4">
-        <Alert type="info">USD per token inputs are used to calculate the initial prices</Alert>
+        <Alert type="info">
+          Initial prices represent the value of {sortedTokenConfigs[0].tokenInfo?.symbol} denominated in{" "}
+          {sortedTokenConfigs[1].tokenInfo?.symbol}
+        </Alert>
 
         <div className="grid grid-cols-2 gap-4">
           <TextField
@@ -67,10 +70,6 @@ export const ReClammParams = () => {
             }}
           />
         </div>
-        <Alert type="info">
-          Initial prices represent the value of {sortedTokenConfigs[0].tokenInfo?.symbol} denominated in{" "}
-          {sortedTokenConfigs[1].tokenInfo?.symbol}
-        </Alert>
 
         <div className="grid grid-cols-3 gap-4">
           <TextField

From 8ad815208ad4111e0e367a1eeb2d988163e0910d Mon Sep 17 00:00:00 2001
From: Matt Pereira <mattpereira.dev@gmail.com>
Date: Sat, 12 Jul 2025 18:12:58 -0700
Subject: [PATCH 03/18] update to new reclamm chart

---
 .../ChooseParameters/ReClammParams.tsx        |  71 ++-
 .../ChooseType/PoolTypeButton.tsx             |   2 +-
 .../PoolConfiguration/ChooseType/index.tsx    |  11 +-
 .../_components/PoolConfiguration/index.tsx   |  14 +-
 .../nextjs/app/v3/_components/PoolDetails.tsx |   4 +-
 packages/nextjs/hooks/balancer/index.ts       |   1 -
 .../hooks/balancer/useSortedTokenConfigs.ts   |   1 +
 packages/nextjs/hooks/reclamm/reClammMath.ts  |   4 +-
 .../hooks/reclamm/useInitialPricingParams.ts  |   8 +-
 .../nextjs/hooks/reclamm/useReclammChart.ts   | 572 +++++++++---------
 packages/nextjs/hooks/v3/useCreatePool.ts     |  15 +-
 packages/nextjs/hooks/v3/useFetchTokenRate.ts |   4 +
 .../nextjs/hooks/v3/usePoolCreationStore.ts   |  14 +-
 .../hooks/v3/useValidateCreationInputs.ts     |   8 -
 packages/nextjs/utils/numbers.ts              |  12 +-
 15 files changed, 382 insertions(+), 359 deletions(-)

diff --git a/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/ReClammParams.tsx b/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/ReClammParams.tsx
index 6cec508..1830629 100644
--- a/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/ReClammParams.tsx
+++ b/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/ReClammParams.tsx
@@ -1,21 +1,19 @@
 import ReactECharts from "echarts-for-react";
-import { ArrowTopRightOnSquareIcon } from "@heroicons/react/20/solid";
-import { Alert, NumberInput, TextField } from "~~/components/common";
-import { useSortedTokenConfigs } from "~~/hooks/balancer";
+import { ArrowTopRightOnSquareIcon, ArrowsRightLeftIcon } from "@heroicons/react/20/solid";
+import { NumberInput, TextField } from "~~/components/common";
 import { useReclAmmChart } from "~~/hooks/reclamm/useReclammChart";
 import { usePoolCreationStore } from "~~/hooks/v3";
 
 export const ReClammParams = () => {
-  const { reClammParams, updateReClammParam } = usePoolCreationStore();
-  const sortedTokenConfigs = useSortedTokenConfigs();
+  const { reClammParams, updateReClammParam, tokenConfigs } = usePoolCreationStore();
 
   const {
     initialTargetPrice,
     initialMinPrice,
     initialMaxPrice,
-    priceShiftDailyRate,
+    dailyPriceShiftExponent,
     centerednessMargin,
-    initialBalanceA,
+    // initialBalanceA,
     usdPerTokenInputA,
     usdPerTokenInputB,
   } = reClammParams;
@@ -42,19 +40,12 @@ export const ReClammParams = () => {
         </a>
       </div>
 
-      <div className="bg-base-200 w-full h-96 rounded-xl mb-4">
-        <ReClammChart />
-      </div>
+      <ReClammChart />
 
       <div className="flex flex-col gap-4">
-        <Alert type="info">
-          Initial prices represent the value of {sortedTokenConfigs[0].tokenInfo?.symbol} denominated in{" "}
-          {sortedTokenConfigs[1].tokenInfo?.symbol}
-        </Alert>
-
         <div className="grid grid-cols-2 gap-4">
           <TextField
-            label={`${sortedTokenConfigs[0].tokenInfo?.symbol} / USD`}
+            label={`${tokenConfigs[0].tokenInfo?.symbol} / USD`}
             value={usdPerTokenInputA}
             isDollarValue={true}
             onChange={e => {
@@ -62,7 +53,7 @@ export const ReClammParams = () => {
             }}
           />
           <TextField
-            label={`${sortedTokenConfigs[1].tokenInfo?.symbol} / USD`}
+            label={`${tokenConfigs[1].tokenInfo?.symbol} / USD`}
             value={usdPerTokenInputB}
             isDollarValue={true}
             onChange={e => {
@@ -88,7 +79,7 @@ export const ReClammParams = () => {
             onChange={e => updateReClammParam({ initialMaxPrice: sanitizeNumberInput(e.target.value) })}
           />
         </div>
-        <div className="grid grid-cols-3 gap-4">
+        <div className="grid grid-cols-2 gap-4">
           <NumberInput
             label="Centeredness Margin"
             min={0}
@@ -99,19 +90,19 @@ export const ReClammParams = () => {
             onChange={e => updateReClammParam({ centerednessMargin: sanitizeNumberInput(e.target.value) })}
           />
           <NumberInput
-            label="Price Shift Daily Rate"
+            label="Daily Price Shift Exponent"
             min={0}
             max={300}
             isPercentage={true}
-            value={priceShiftDailyRate}
+            value={dailyPriceShiftExponent}
             placeholder="0 - 300"
-            onChange={e => updateReClammParam({ priceShiftDailyRate: sanitizeNumberInput(e.target.value) })}
+            onChange={e => updateReClammParam({ dailyPriceShiftExponent: sanitizeNumberInput(e.target.value) })}
           />
-          <TextField
-            label={`Initial Balance of ${sortedTokenConfigs[0].tokenInfo?.symbol}`}
+          {/* <TextField
+            label={`Initial Balance of ${tokenConfigs[0].tokenInfo?.symbol}`}
             value={initialBalanceA}
             onChange={e => updateReClammParam({ initialBalanceA: sanitizeNumberInput(e.target.value) })}
-          />
+          /> */}
         </div>
       </div>
     </div>
@@ -119,7 +110,35 @@ export const ReClammParams = () => {
 };
 
 function ReClammChart() {
-  const { option } = useReclAmmChart();
+  const { options } = useReclAmmChart();
+
+  const { tokenConfigs, updatePool, updateReClammParam, reClammParams } = usePoolCreationStore();
+
+  const handleInvertReClammParams = () => {
+    const { initialTargetPrice, initialMinPrice, initialMaxPrice, usdPerTokenInputA, usdPerTokenInputB } =
+      reClammParams;
 
-  return <ReactECharts option={option} style={{ height: "100%", width: "100%" }} />;
+    updateReClammParam({
+      initialTargetPrice: (1 / Number(initialTargetPrice)).toString(),
+      initialMinPrice: (1 / Number(initialMaxPrice)).toString(),
+      initialMaxPrice: (1 / Number(initialMinPrice)).toString(),
+      usdPerTokenInputA: usdPerTokenInputB,
+      usdPerTokenInputB: usdPerTokenInputA,
+    });
+    updatePool({ tokenConfigs: [...tokenConfigs].reverse() });
+  };
+
+  return (
+    <div className="bg-base-300 rounded-lg relative">
+      <div className="bg-base-200 w-full h-72 rounded-xl mb-4">
+        <ReactECharts option={options} style={{ height: "100%", width: "100%" }} />
+        <div
+          className="btn btn-sm rounded-lg absolute bottom-3 right-3 btn-primary px-2 py-0.5 text-neutral-700 bg-gradient-to-r from-violet-300 via-violet-200 to-orange-300  [box-shadow:0_0_10px_5px_rgba(139,92,246,0.5)] border-none"
+          onClick={handleInvertReClammParams}
+        >
+          <ArrowsRightLeftIcon className="w-[15px] h-[15px]" />
+        </div>
+      </div>
+    </div>
+  );
 }
diff --git a/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseType/PoolTypeButton.tsx b/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseType/PoolTypeButton.tsx
index cd9e072..b236043 100644
--- a/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseType/PoolTypeButton.tsx
+++ b/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseType/PoolTypeButton.tsx
@@ -15,7 +15,7 @@ export function PoolTypeButton({ selectedPoolType }: { selectedPoolType: Support
     <button
       className={`${
         selectedPoolType === poolType ? `${selectedPoolStyles}` : `bg-base-100 ${hoverPoolStyles} shadow-lg`
-      } p-2 w-full rounded-xl h-[58px]`}
+      } p-2 w-full rounded-xl h-20`}
       onClick={handlePoolTypeSelection}
     >
       <div className="flex flex-col text-center">
diff --git a/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseType/index.tsx b/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseType/index.tsx
index c295043..eedd95b 100644
--- a/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseType/index.tsx
+++ b/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseType/index.tsx
@@ -11,9 +11,14 @@ export function ChooseType() {
     <>
       <div className="flex flex-col justify-center h-full gap-10">
         <div className="flex flex-col gap-5">
-          <div className="text-xl">Choose a pool type:</div>
-          <div className="flex flex-col gap-4 px-24">
-            {poolTypes.map((type: SupportedPoolTypes) => (
+          <div className="text-xl mt-10">Choose a pool type:</div>
+          <div className="grid grid-cols-3 gap-4">
+            {poolTypes.slice(0, 3).map((type: SupportedPoolTypes) => (
+              <PoolTypeButton key={type} selectedPoolType={type} />
+            ))}
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            {poolTypes.slice(3, 5).map((type: SupportedPoolTypes) => (
               <PoolTypeButton key={type} selectedPoolType={type} />
             ))}
           </div>
diff --git a/packages/nextjs/app/v3/_components/PoolConfiguration/index.tsx b/packages/nextjs/app/v3/_components/PoolConfiguration/index.tsx
index 403992c..346ef08 100644
--- a/packages/nextjs/app/v3/_components/PoolConfiguration/index.tsx
+++ b/packages/nextjs/app/v3/_components/PoolConfiguration/index.tsx
@@ -7,6 +7,8 @@ import { ChooseParameters } from "./ChooseParameters";
 import { ChooseTokens } from "./ChooseTokens";
 import { ChooseType } from "./ChooseType";
 import { ExistingPoolsWarning } from "./ExistingPoolsWarning";
+import { TokenType } from "@balancer/sdk";
+import { useQueryClient } from "@tanstack/react-query";
 import { ArrowLeftIcon, ArrowRightIcon } from "@heroicons/react/24/outline";
 import { TransactionButton } from "~~/components/common";
 import { useTargetNetwork } from "~~/hooks/scaffold-eth";
@@ -24,6 +26,7 @@ export function PoolConfiguration() {
   const { prev, next } = getAdjacentTabs(selectedTab);
   const { isParametersValid, isTypeValid, isTokensValid, isPoolCreationInputValid } = useValidateCreationInputs();
 
+  const queryClient = useQueryClient();
   const { existingPools } = useCheckIfV3PoolExists(
     poolType,
     tokenConfigs.map(token => token.address),
@@ -36,9 +39,18 @@ export function PoolConfiguration() {
     Information: <ChooseInfo />,
   };
 
+  const isRateProvidersValid = tokenConfigs.every(token => {
+    // Check tanstack query cache for rate provider validity
+    if (token.tokenType === TokenType.TOKEN_WITH_RATE) {
+      const cachedRate = queryClient.getQueryData(["fetchTokenRate", token.rateProvider]);
+      if (!cachedRate) return false;
+    }
+    return true;
+  });
+
   function isNextDisabled() {
     if (selectedTab === "Type") return !isTypeValid;
-    if (selectedTab === "Tokens") return !isTokensValid;
+    if (selectedTab === "Tokens") return !isTokensValid || !isRateProvidersValid;
     if (selectedTab === "Parameters") return !isParametersValid;
     return false;
   }
diff --git a/packages/nextjs/app/v3/_components/PoolDetails.tsx b/packages/nextjs/app/v3/_components/PoolDetails.tsx
index 8b75623..1df8561 100644
--- a/packages/nextjs/app/v3/_components/PoolDetails.tsx
+++ b/packages/nextjs/app/v3/_components/PoolDetails.tsx
@@ -49,7 +49,7 @@ export function PoolDetails({ isPreview }: { isPreview?: boolean }) {
   const { isOnlyInitializingPool } = useUserDataStore();
 
   const { isParametersValid, isTypeValid, isInfoValid, isTokensValid } = useValidateCreationInputs();
-  const { initialTargetPrice, initialMinPrice, initialMaxPrice, priceShiftDailyRate, centerednessMargin } =
+  const { initialTargetPrice, initialMinPrice, initialMaxPrice, dailyPriceShiftExponent, centerednessMargin } =
     reClammParams;
 
   const poolDeploymentUrl = poolAddress ? getBlockExplorerAddressLink(targetNetwork, poolAddress) : undefined;
@@ -145,7 +145,7 @@ export function PoolDetails({ isPreview }: { isPreview?: boolean }) {
                   </div>
                   <div className="flex justify-between">
                     <div className="">Price Shift Daily Rate</div>
-                    <div>{priceShiftDailyRate ? priceShiftDailyRate : "-"}</div>
+                    <div>{dailyPriceShiftExponent ? dailyPriceShiftExponent : "-"}</div>
                   </div>
                   <div className="flex justify-between">
                     <div className="">Centeredness Margin</div>
diff --git a/packages/nextjs/hooks/balancer/index.ts b/packages/nextjs/hooks/balancer/index.ts
index 015f27a..f8faf09 100644
--- a/packages/nextjs/hooks/balancer/index.ts
+++ b/packages/nextjs/hooks/balancer/index.ts
@@ -1,4 +1,3 @@
 export * from "./useApiConfig";
 export * from "./useUninitializedPool";
 export * from "./useReadPool";
-export * from "./useSortedTokenConfigs";
diff --git a/packages/nextjs/hooks/balancer/useSortedTokenConfigs.ts b/packages/nextjs/hooks/balancer/useSortedTokenConfigs.ts
index 5f51ed9..260d29c 100644
--- a/packages/nextjs/hooks/balancer/useSortedTokenConfigs.ts
+++ b/packages/nextjs/hooks/balancer/useSortedTokenConfigs.ts
@@ -1,6 +1,7 @@
 import { usePoolCreationStore } from "~~/hooks/v3";
 import { useBoostableWhitelist } from "~~/hooks/v3/";
 
+// TODO: figure out this logic for boosted variant for reclamm pool creation
 export function useSortedTokenConfigs() {
   const { data: boostableWhitelist } = useBoostableWhitelist();
 
diff --git a/packages/nextjs/hooks/reclamm/reClammMath.ts b/packages/nextjs/hooks/reclamm/reClammMath.ts
index a802b95..7f13fa8 100644
--- a/packages/nextjs/hooks/reclamm/reClammMath.ts
+++ b/packages/nextjs/hooks/reclamm/reClammMath.ts
@@ -150,7 +150,7 @@ export const recalculateVirtualBalances = (params: {
   currentPriceRatio: number;
   poolParams: {
     margin: number;
-    priceShiftDailyRate: number;
+    dailyPriceShiftExponent: number;
   };
   updateQ0Params: {
     startTime: number;
@@ -239,7 +239,7 @@ export const recalculateVirtualBalances = (params: {
   }
 
   if (poolCenteredness <= params.poolParams.margin / 100) {
-    const tau = params.poolParams.priceShiftDailyRate / timeFix;
+    const tau = params.poolParams.dailyPriceShiftExponent / timeFix;
 
     if (isPoolAboveCenter) {
       newVirtualBalanceB = newVirtualBalanceB * Math.pow(1 - tau, fixedSecondsSinceLastInteraction);
diff --git a/packages/nextjs/hooks/reclamm/useInitialPricingParams.ts b/packages/nextjs/hooks/reclamm/useInitialPricingParams.ts
index 6a77c38..12b367f 100644
--- a/packages/nextjs/hooks/reclamm/useInitialPricingParams.ts
+++ b/packages/nextjs/hooks/reclamm/useInitialPricingParams.ts
@@ -1,5 +1,4 @@
 import { useEffect } from "react";
-import { useSortedTokenConfigs } from "~~/hooks/balancer";
 import { useTokenUsdValue } from "~~/hooks/token";
 import { usePoolCreationStore } from "~~/hooks/v3";
 
@@ -9,13 +8,12 @@ import { usePoolCreationStore } from "~~/hooks/v3";
  * 3. Figure out how much higher and lower to set min and max price relative to target price
  */
 export function useInitialPricingParams() {
-  const sortedTokenConfigs = useSortedTokenConfigs();
-  const { updateReClammParam, reClammParams } = usePoolCreationStore();
+  const { updateReClammParam, reClammParams, tokenConfigs } = usePoolCreationStore();
 
   const { initialTargetPrice, usdPerTokenInputA, usdPerTokenInputB } = reClammParams;
 
-  const { tokenUsdValue: usdPerTokenA } = useTokenUsdValue(sortedTokenConfigs[0].address, "1");
-  const { tokenUsdValue: usdPerTokenB } = useTokenUsdValue(sortedTokenConfigs[1].address, "1");
+  const { tokenUsdValue: usdPerTokenA } = useTokenUsdValue(tokenConfigs[0].address, "1");
+  const { tokenUsdValue: usdPerTokenB } = useTokenUsdValue(tokenConfigs[1].address, "1");
 
   // update usd per token inputs if API data available and user has not already set them
   useEffect(() => {
diff --git a/packages/nextjs/hooks/reclamm/useReclammChart.ts b/packages/nextjs/hooks/reclamm/useReclammChart.ts
index 8a163cc..d6007ea 100644
--- a/packages/nextjs/hooks/reclamm/useReclammChart.ts
+++ b/packages/nextjs/hooks/reclamm/useReclammChart.ts
@@ -1,10 +1,22 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { useMemo } from "react";
-import { useSortedTokenConfigs } from "../balancer";
 import { usePoolCreationStore } from "../v3";
 import { calculateInitialBalances, calculateLowerMargin, calculateUpperMargin } from "./reClammMath";
 import { useInitialPricingParams } from "./useInitialPricingParams";
-import { bn } from "~~/utils/numbers";
+import { bn, fNum } from "~~/utils/numbers";
+
+function getGradientColor(colorStops: string[]) {
+  return {
+    type: "linear",
+    x: 0,
+    y: 0,
+    x2: 0,
+    y2: 1,
+    colorStops: colorStops.map((color, index) => ({ offset: index, color })),
+  };
+}
+
+const isMobile = false;
 
 /**
  * Using math from reclamm simulator and chart from frontend monorepo
@@ -12,10 +24,28 @@ import { bn } from "~~/utils/numbers";
 export function useReclAmmChart() {
   useInitialPricingParams();
 
-  const sortedTokenConfigs = useSortedTokenConfigs();
+  const { tokenConfigs } = usePoolCreationStore();
+
+  const dynamicXAxisNamePadding = isMobile
+    ? [0, 30, -128, 0] // mobile
+    : [0, 55, -75, 0]; // desktop
+
+  const tokens = useMemo(() => {
+    const tokenSymbols = tokenConfigs.map(token => token.tokenInfo?.symbol);
+
+    return tokenSymbols.join(" / ");
+  }, [tokenConfigs]);
 
   const { reClammParams } = usePoolCreationStore();
-  const { centerednessMargin, initialBalanceA, initialMinPrice, initialMaxPrice, initialTargetPrice } = reClammParams;
+  const {
+    centerednessMargin,
+    initialBalanceA,
+    initialMinPrice,
+    initialMaxPrice,
+    initialTargetPrice,
+    usdPerTokenInputA,
+    usdPerTokenInputB,
+  } = reClammParams;
 
   const currentChartData = useMemo(() => {
     // TODO: review validation logic for reclamm params
@@ -29,7 +59,7 @@ export function useReclAmmChart() {
       Number(initialMinPrice) > Number(initialTargetPrice) ||
       Number(initialTargetPrice) > Number(initialMaxPrice)
     )
-      return null;
+      return {};
 
     const { balanceA, balanceB, virtualBalanceA, virtualBalanceB } = calculateInitialBalances({
       minPrice: Number(initialMinPrice),
@@ -40,29 +70,8 @@ export function useReclAmmChart() {
     const margin = centerednessMargin;
     const invariant = bn(bn(balanceA).plus(virtualBalanceA)).times(bn(balanceB).plus(virtualBalanceB));
 
-    // Mathematical function for the curve: y = invariant / x
-    const curveFunction = (x: number): number => {
-      return invariant.div(bn(x)).toNumber();
-    };
-
-    const xForPointB = bn(invariant).div(virtualBalanceB);
-
-    const curvePoints = Array.from({ length: 100 }, (_, i) => {
-      const x = bn(0.7)
-        .times(virtualBalanceA)
-        .plus(
-          bn(i)
-            .times(bn(1.3).times(xForPointB).minus(bn(0.7).times(virtualBalanceA)))
-            .div(bn(100)),
-        );
-      const y = curveFunction(x.toNumber());
-
-      return [x.toNumber(), y];
-    });
-
     const vBalanceA = Number(virtualBalanceA);
     const vBalanceB = Number(virtualBalanceB);
-    const xForMinPrice = bn(invariant).div(virtualBalanceB).toNumber();
 
     const lowerMargin = calculateLowerMargin({
       margin: Number(margin),
@@ -78,7 +87,7 @@ export function useReclAmmChart() {
       virtualBalanceB: vBalanceB,
     });
 
-    const currentBalance = bn(balanceA).plus(virtualBalanceA).toNumber();
+    // const currentBalance = bn(balanceA).plus(virtualBalanceA).toNumber();
 
     const minPriceValue = bn(virtualBalanceB).pow(2).div(invariant).toNumber();
     const maxPriceValue = bn(invariant).div(bn(virtualBalanceA).pow(2)).toNumber();
@@ -86,313 +95,278 @@ export function useReclAmmChart() {
     const lowerMarginValue = bn(invariant).div(bn(lowerMargin).pow(2)).toNumber();
     const upperMarginValue = bn(invariant).div(bn(upperMargin).pow(2)).toNumber();
 
-    const currentPriceValue = bn(bn(balanceB).plus(virtualBalanceB)).div(bn(balanceA).plus(virtualBalanceA)).toNumber();
-
-    const markPoints = [
-      { name: "upper limit", x: vBalanceA, color: "#FF4560", priceValue: maxPriceValue.toFixed(3) },
-      { name: "lower limit", x: xForMinPrice, color: "#FF4560", priceValue: minPriceValue.toFixed(3) },
-      {
-        name: "higher target",
-        x: lowerMargin,
-        color: "#E67E22",
-        priceValue: lowerMarginValue.toFixed(3),
-      },
-      {
-        name: "lower target",
-        x: upperMargin,
-        color: "#E67E22",
-        priceValue: upperMarginValue.toFixed(3),
-      },
-      {
-        name: "current",
-        x: currentBalance,
-        priceValue: currentPriceValue.toFixed(3),
+    const currentPriceValue = Number(usdPerTokenInputA) / Number(usdPerTokenInputB);
 
-        color: "#00E396",
-      },
-    ].map(point => {
-      return {
-        name: point.name,
-        coord: [point.x, curveFunction(point.x)],
-        itemStyle: {
-          color: point.color,
-        },
-        emphasis: {
-          disabled: true,
-        },
-        silent: true,
-        priceValue: point.priceValue,
-      };
-    });
+    const isPoolWithinRange =
+      (currentPriceValue > minPriceValue && currentPriceValue < lowerMarginValue) ||
+      (currentPriceValue > upperMarginValue && currentPriceValue < maxPriceValue);
 
     return {
-      series: curvePoints,
-      markPoints,
-      min: xForMinPrice,
-      max: vBalanceA,
-      lowerMargin,
-      upperMargin,
+      maxPriceValue,
+      minPriceValue,
+      lowerMarginValue,
+      upperMarginValue,
+      currentPriceValue,
+      isPoolWithinRange,
+    };
+  }, [centerednessMargin, initialBalanceA, initialMinPrice, initialMaxPrice, initialTargetPrice, tokenConfigs]);
+
+  const options = useMemo(() => {
+    const { maxPriceValue, minPriceValue, lowerMarginValue, upperMarginValue, currentPriceValue } = currentChartData;
+
+    const baseGreyBarConfig = {
+      count: 10,
+      value: 3,
+      gradientColors: ["rgba(160, 174, 192, 0.5)", "rgba(160, 174, 192, 0.1)"],
+      borderRadius: 20,
+    };
+
+    const baseOrangeBarConfig = {
+      count: 8,
+      value: 100,
+      gradientColors: ["rgb(253, 186, 116)", "rgba(151, 111, 69, 0.5)"],
+      borderRadius: 20,
+    };
+
+    const greenBarConfig = {
+      name: "Green",
+      count: 42,
+      value: 100,
+      gradientColors: ["rgb(99, 242, 190)", "rgba(57, 140, 110, 0.5)"],
+      borderRadius: 20,
     };
-  }, [centerednessMargin, initialBalanceA, initialMinPrice, initialMaxPrice, initialTargetPrice]);
-
-  const option = useMemo(() => {
-    if (!currentChartData?.series?.length || !currentChartData?.markPoints?.length) {
-      return {
-        grid: {
-          left: "3%",
-          right: "18%",
-          bottom: "5%",
-          top: "10%",
-          containLabel: true,
-        },
-        xAxis: {
-          type: "value",
-          axisLabel: { show: true },
-        },
-        yAxis: {
-          type: "value",
-          axisLabel: { show: true },
-        },
-        series: [
-          {
-            type: "line",
-            data: [],
-          },
-        ],
-      };
-    }
 
-    const series = currentChartData.series;
-    if (!series) return {};
+    const barSegmentsConfig = [
+      { ...baseGreyBarConfig, name: "Left Grey" },
+      { ...baseOrangeBarConfig, name: "Left Orange" },
+      greenBarConfig,
+      { ...baseOrangeBarConfig, name: "Right Orange" },
+      { ...baseGreyBarConfig, name: "Right Grey" },
+    ];
 
-    const xValues = series.map(point => point[0]);
-    const yValues = series.map(point => point[1]);
+    const allCategories: string[] = [];
+    const seriesData: any[] = [];
+    let categoryNumber = 1;
 
-    const maxPricePoint = currentChartData.markPoints?.find(p => p.name === "upper limit");
-    const minPricePoint = currentChartData.markPoints?.find(p => p.name === "lower limit");
+    // Calculate which bar the current price corresponds to
+    const getCurrentPriceBarIndex = () => {
+      const { minPriceValue, maxPriceValue, currentPriceValue } = currentChartData;
 
-    const xMin = maxPricePoint?.coord[0] || Math.min(...xValues);
-    const yMax = maxPricePoint?.coord[1] || Math.max(...yValues);
-    const xMax = minPricePoint?.coord[0] || Math.max(...xValues);
-    const yMin = minPricePoint?.coord[1] || Math.min(...yValues);
+      if (minPriceValue === undefined || maxPriceValue === undefined || currentPriceValue === undefined) {
+        return 50; // Default to middle if values are not available
+      }
 
-    const xPadding = (xMax - xMin) * 0.3;
-    const yPadding = (yMax - yMin) * 0.3;
+      const priceRange = maxPriceValue - minPriceValue;
+      const pricePerBar = priceRange / 58; // 58 bars in the colored section (8 orange + 42 green + 8 orange)
+      const barsFromMin = (currentPriceValue - minPriceValue) / pricePerBar;
+
+      // Add the initial 10 grey bars and round to nearest bar
+      const barIndex = Math.min(Math.max(0, Math.round(barsFromMin)), 57) + 10;
+
+      return barIndex;
+    };
+
+    const currentPriceBarIndex = getCurrentPriceBarIndex();
+
+    barSegmentsConfig.forEach(segment => {
+      const segmentCategories: string[] = [];
+      const segmentStartIndex = allCategories.length;
+
+      for (let i = 0; i < segment.count; i++) {
+        segmentCategories.push(String(categoryNumber++));
+      }
+
+      allCategories.push(...segmentCategories);
+
+      const segmentSeriesData = Array(segment.count)
+        .fill(null)
+        .map((_, i) => {
+          const isCurrentPriceBar = segmentStartIndex + i === currentPriceBarIndex;
+
+          return {
+            value: segment.value,
+            itemStyle: {
+              color: isCurrentPriceBar
+                ? "#93F6D2" // Solid color for current price bar
+                : getGradientColor(segment.gradientColors),
+              borderRadius: segment.borderRadius,
+            },
+          };
+        });
+
+      seriesData.push(...segmentSeriesData);
+    });
+
+    const baseRichProps = {
+      fontSize: 12,
+      lineHeight: 13,
+      color: "#A0AEC0",
+      align: "center",
+    };
+
+    const paddingRight = isMobile ? 5 : 10;
+
+    const richStyles = {
+      base: baseRichProps,
+      triangle: {
+        ...baseRichProps,
+        fontSize: 10,
+        lineHeight: 12,
+        color: "#718096",
+      },
+      current: {
+        ...baseRichProps,
+        color: "#63F2BE",
+      },
+      currentTriangle: {
+        ...baseRichProps,
+        fontSize: 10,
+        lineHeight: 12,
+        color: "#63F2BE",
+      },
+      withRightPadding: {
+        ...baseRichProps,
+        padding: [0, paddingRight, 0, 0],
+      },
+      withRightBottomPadding: {
+        ...baseRichProps,
+        padding: [0, paddingRight, 10, 0],
+      },
+      withTopRightPadding: {
+        ...baseRichProps,
+        padding: [100, paddingRight, 0, 0],
+      },
+    };
 
     return {
+      tooltip: { show: false },
       grid: {
-        left: "3%",
-        right: "18%",
-        bottom: "5%",
-        top: "10%",
+        left: isMobile ? "-7%" : "-3%",
+        right: "1%",
+        top: isMobile ? "50px" : "20%",
+        bottom: isMobile ? "-20px" : "15%",
         containLabel: true,
       },
-      visualMap: {
-        show: false,
-        dimension: 0,
-        min: currentChartData.max,
-        max: currentChartData.min,
-        inRange: {
-          color: ["#FF4560", "#FC7D02", "#93CE07", "#FC7D02", "#FF4560"],
-        },
-        controller: {
-          inRange: {
-            color: ["#FF4560", "#FC7D02", "#93CE07", "#FC7D02", "#FF4560"],
-          },
-        },
-        pieces: [
-          {
-            lte: currentChartData.max,
-            color: "#FF4560",
-          },
-          {
-            gt: currentChartData.max,
-            lte: currentChartData.lowerMargin,
-            color: "#FC7D02",
-          },
-          {
-            gt: currentChartData.lowerMargin,
-            lte: currentChartData.upperMargin,
-            color: "#93CE07",
-          },
-          {
-            gt: currentChartData.upperMargin,
-            lte: currentChartData.min,
-            color: "#FC7D02",
-          },
-          {
-            gt: currentChartData.min,
-            color: "#FF4560",
-          },
-        ],
-      },
       xAxis: {
-        type: "value",
-        min: xMin - xPadding,
-        max: xMax + xPadding,
+        show: true,
+        type: "category",
+        data: allCategories,
+        position: "bottom",
+        axisLine: { show: false },
+        axisTick: { show: false },
         axisLabel: {
           show: true,
-          showMinLabel: false,
-          showMaxLabel: false,
-        },
-        axisLine: {
-          show: true,
-          lineStyle: {
-            color: "#666",
+          interval: 0,
+          formatter: (value: string, index: number) => {
+            if (index === 10) {
+              return `{${isMobile ? "triangleMobile" : "triangle"}|▲}\n{${
+                isMobile ? "labelTextMobile" : "labelText"
+              }|Min price}\n{${isMobile ? "priceValueMobile" : "priceValue"}|${
+                minPriceValue !== undefined ? fNum("clpPrice", minPriceValue) : "N/A"
+              }}`;
+            }
+
+            if (index === 18) {
+              return `{triangle|▲}\n{labelText|Low target}\n{priceValue|${
+                upperMarginValue !== undefined ? fNum("clpPrice", upperMarginValue) : "N/A"
+              }}`;
+            }
+
+            if (index === 60) {
+              return `{triangle|▲}\n{labelText|High target}\n{priceValue|${
+                lowerMarginValue !== undefined ? fNum("clpPrice", lowerMarginValue) : "N/A"
+              }}`;
+            }
+
+            if (index === 68) {
+              return `{${isMobile ? "triangleMobile" : "triangle"}|▲}\n{${
+                isMobile ? "labelTextMobile" : "labelText"
+              }|Max price}\n{${isMobile ? "priceValueMobile" : "priceValue"}|${
+                maxPriceValue !== undefined ? fNum("clpPrice", maxPriceValue) : "N/A"
+              }}`;
+            }
+
+            return "";
           },
-        },
-        splitLine: {
-          show: true,
-          lineStyle: {
-            color: "#666",
-            opacity: 0.3,
+          rich: {
+            triangle: {
+              ...richStyles.triangle,
+              ...richStyles.withRightBottomPadding,
+            },
+            labelText: {
+              ...richStyles.base,
+              ...richStyles.withRightBottomPadding,
+            },
+            priceValue: {
+              ...richStyles.base,
+              ...richStyles.withRightPadding,
+            },
+            triangleMobile: {
+              ...richStyles.triangle,
+              ...richStyles.withTopRightPadding,
+            },
+            labelTextMobile: {
+              ...richStyles.base,
+              ...richStyles.withTopRightPadding,
+            },
+            priceValueMobile: {
+              ...richStyles.base,
+              padding: [110, 10, 0, 0],
+            },
           },
         },
-        axisTick: {
-          show: true,
-        },
-        name: sortedTokenConfigs[0].tokenInfo?.symbol,
+        name: `Price: ${tokens}`,
         nameLocation: "end",
+        nameGap: 5,
         nameTextStyle: {
           align: "right",
           verticalAlign: "bottom",
-          padding: [0, -30, -20, 0],
-          fontSize: 12,
-          color: "#999",
+          padding: dynamicXAxisNamePadding,
+          color: baseRichProps.color,
         },
       },
       yAxis: {
+        show: false,
         type: "value",
-        min: yMin - yPadding,
-        max: yMax + yPadding,
-        axisLabel: {
-          show: true,
-          // remove min and max labels instead of hiding them
-          formatter: function (value: number) {
-            if (value === yMin - yPadding || value === yMax + yPadding) {
-              return "";
-            }
-            return value;
-          },
-        },
-        axisLine: {
-          show: true,
-          lineStyle: {
-            color: "#666",
-          },
-        },
-        splitLine: {
-          show: true,
-          lineStyle: {
-            color: "#666",
-            opacity: 0.3,
-          },
-        },
-        axisTick: {
-          show: true,
-        },
-        name: sortedTokenConfigs[1].tokenInfo?.symbol,
-        nameLocation: "end",
-        nameTextStyle: {
-          align: "left",
-          verticalAlign: "top",
-          padding: [-10, 0, 0, -40],
-          fontSize: 12,
-          color: "#999",
-        },
       },
       series: [
         {
-          data: series,
-          type: "line",
-          smooth: true,
-          lineStyle: {
-            width: 3,
-          },
-          symbol: "none",
-          silent: true,
-          tooltip: {
-            show: false,
-          },
-          emphasis: {
-            disabled: true,
-          },
-          markPoint: {
-            symbol: "circle",
-            symbolSize: 10,
-            label: {
-              show: false,
-            },
-            data: currentChartData.markPoints,
-          },
-          markLine: {
-            silent: true,
-            symbol: "none",
-            label: {
-              show: true,
-              position: "end",
-              distance: 10,
-              formatter: function (params: any) {
-                const pointName = params.name;
-
-                const point = currentChartData.markPoints?.find(p => p.name === pointName);
-                if (point) {
-                  return ["{value|" + point.priceValue + "}", "{name|" + `(${pointName})` + "}"].join("\n");
-                }
-
-                return "";
-              },
-              rich: {
-                value: {
-                  color: "#333333",
-                  fontWeight: "bold",
-                  fontSize: 12,
-                  padding: [2, 0, 1, 0],
-                  align: "center",
-                  width: 70,
-                  textShadow: "none",
-                },
-                name: {
-                  color: "#333333",
-                  fontSize: 12,
-                  padding: [1, 0, 2, 0],
-                  align: "center",
-                  width: 70,
-                  textShadow: "none",
-                },
-              },
-              backgroundColor: function (params: any) {
-                const point = currentChartData.markPoints?.find(p => p.name === params.name);
-                const color = point?.itemStyle?.color || "rgba(0, 0, 0, 0.75)";
-                return color;
-              },
-              borderColor: "rgba(255, 255, 255, 0.3)",
-              borderWidth: 1,
-              borderRadius: 4,
-              padding: [4, 8],
-              shadowBlur: 3,
-              shadowColor: "rgba(0, 0, 0, 0.3)",
-              shadowOffsetX: 1,
-              shadowOffsetY: 1,
-            },
-            data: [
-              ...(currentChartData.markPoints || []).map(point => ({
-                name: point.name,
-                yAxis: point.coord[1],
-
-                lineStyle: {
-                  color: point.itemStyle.color,
-                },
+          data: seriesData.map((value, index) => {
+            if (index === currentPriceBarIndex) {
+              return {
+                ...value,
                 label: {
-                  backgroundColor: point.itemStyle.color,
+                  show: true,
+                  position: "top",
+                  formatter: `{labelText|Current price}\n{priceValue|${
+                    currentPriceValue !== undefined ? fNum("clpPrice", currentPriceValue) : "N/A"
+                  }}\n{triangle|▼}`,
+                  rich: {
+                    triangle: {
+                      ...richStyles.currentTriangle,
+                    },
+                    labelText: {
+                      ...richStyles.current,
+                      padding: [0, 0, 5, 0],
+                    },
+                    priceValue: {
+                      ...richStyles.current,
+                    },
+                  },
                 },
-              })),
-            ],
-          },
+              };
+            }
+
+            return value;
+          }),
+          type: "bar",
+          barWidth: "90%",
+          barCategoryGap: "25%",
+          silent: true,
         },
       ],
     };
-  }, [currentChartData]);
+  }, [currentChartData, tokens, isMobile]);
 
-  return { option };
+  return { options };
 }
diff --git a/packages/nextjs/hooks/v3/useCreatePool.ts b/packages/nextjs/hooks/v3/useCreatePool.ts
index 197ff60..efa7cc7 100644
--- a/packages/nextjs/hooks/v3/useCreatePool.ts
+++ b/packages/nextjs/hooks/v3/useCreatePool.ts
@@ -168,14 +168,19 @@ function usePoolTypeSpecificParams() {
     };
   }
 
-  if (isReClamm)
+  if (isReClamm) {
     return {
-      initialTargetPrice: parseUnits(reClammParams.initialTargetPrice, 18),
-      initialMinPrice: parseUnits(reClammParams.initialMinPrice, 18),
-      initialMaxPrice: parseUnits(reClammParams.initialMaxPrice, 18),
-      priceShiftDailyRate: parseUnits(reClammParams.priceShiftDailyRate, 16),
+      priceParams: {
+        initialMinPrice: parseUnits(reClammParams.initialMinPrice, 18),
+        initialMaxPrice: parseUnits(reClammParams.initialMaxPrice, 18),
+        initialTargetPrice: parseUnits(reClammParams.initialTargetPrice, 18),
+        tokenAPriceIncludesRate: reClammParams.tokenAPriceIncludesRate,
+        tokenBPriceIncludesRate: reClammParams.tokenBPriceIncludesRate,
+      },
+      priceShiftDailyRate: parseUnits(reClammParams.dailyPriceShiftExponent, 16), // SDK kept OG var name but on chain is same as creation ui
       centerednessMargin: parseUnits((Number(reClammParams.centerednessMargin) / 2).toString(), 16), // Charting UX based on pool math simulator setup allows 0 - 100% but on chain is 0 - 50%
     };
+  }
 
   return {};
 }
diff --git a/packages/nextjs/hooks/v3/useFetchTokenRate.ts b/packages/nextjs/hooks/v3/useFetchTokenRate.ts
index fe30c21..9bddc03 100644
--- a/packages/nextjs/hooks/v3/useFetchTokenRate.ts
+++ b/packages/nextjs/hooks/v3/useFetchTokenRate.ts
@@ -24,5 +24,9 @@ export const useFetchTokenRate = (address: Address | undefined) => {
       }
     },
     enabled: !!address && isValidAddress,
+    // staleTime: 0, // Always consider data stale
+    refetchOnMount: true, // Refetch when component mounts
+    refetchOnWindowFocus: true, // Refetch when window regains focus
+    refetchOnReconnect: true, // Refetch when network reconnects
   });
 };
diff --git a/packages/nextjs/hooks/v3/usePoolCreationStore.ts b/packages/nextjs/hooks/v3/usePoolCreationStore.ts
index 4fc92ca..c0a3f94 100644
--- a/packages/nextjs/hooks/v3/usePoolCreationStore.ts
+++ b/packages/nextjs/hooks/v3/usePoolCreationStore.ts
@@ -35,11 +35,13 @@ export type ReClammParams = {
   initialTargetPrice: string;
   initialMinPrice: string;
   initialMaxPrice: string;
-  priceShiftDailyRate: string;
-  centerednessMargin: string;
-  initialBalanceA: string;
+  tokenAPriceIncludesRate: boolean;
+  tokenBPriceIncludesRate: boolean;
   usdPerTokenInputA: string;
   usdPerTokenInputB: string;
+  dailyPriceShiftExponent: string;
+  centerednessMargin: string;
+  initialBalanceA: string;
 };
 
 export interface TransactionDetails {
@@ -108,9 +110,11 @@ export const initialReClammParams: ReClammParams = {
   initialTargetPrice: "",
   initialMinPrice: "",
   initialMaxPrice: "",
-  priceShiftDailyRate: "150",
+  tokenAPriceIncludesRate: false,
+  tokenBPriceIncludesRate: false,
+  dailyPriceShiftExponent: "150",
   centerednessMargin: "25",
-  initialBalanceA: "100",
+  initialBalanceA: "100", // TODO: removed input. could this be hard coded?
   usdPerTokenInputA: "",
   usdPerTokenInputB: "",
 };
diff --git a/packages/nextjs/hooks/v3/useValidateCreationInputs.ts b/packages/nextjs/hooks/v3/useValidateCreationInputs.ts
index e89e56a..c239c72 100644
--- a/packages/nextjs/hooks/v3/useValidateCreationInputs.ts
+++ b/packages/nextjs/hooks/v3/useValidateCreationInputs.ts
@@ -1,13 +1,10 @@
 import { PoolType, STABLE_POOL_CONSTRAINTS, TokenType } from "@balancer/sdk";
-import { useQueryClient } from "@tanstack/react-query";
 import { isAddress } from "viem";
 import { useEclpParamValidations } from "~~/hooks/gyro";
 import { usePoolCreationStore, useValidateHooksContract } from "~~/hooks/v3";
 import { MAX_POOL_NAME_LENGTH, MAX_POOL_SYMBOL_LENGTH } from "~~/utils/constants";
 
 export function useValidateCreationInputs() {
-  const queryClient = useQueryClient();
-
   const {
     poolType,
     tokenConfigs,
@@ -41,11 +38,6 @@ export function useValidateCreationInputs() {
       // Must have rate provider if token type is TOKEN_WITH_RATE
       if (token.tokenType === TokenType.TOKEN_WITH_RATE && !isAddress(token.rateProvider)) return false;
 
-      // Check tanstack query cache for rate provider validity
-      if (token.tokenType === TokenType.TOKEN_WITH_RATE) {
-        const cachedRate = queryClient.getQueryData(["fetchTokenRate", token.rateProvider]);
-        if (!cachedRate) return false;
-      }
       return true;
     }) && isValidTokenWeights;
 
diff --git a/packages/nextjs/utils/numbers.ts b/packages/nextjs/utils/numbers.ts
index ff1fcab..3a9b3aa 100644
--- a/packages/nextjs/utils/numbers.ts
+++ b/packages/nextjs/utils/numbers.ts
@@ -157,6 +157,13 @@ function gyroPriceFormat(val: Numberish): string {
   return numeral(val.toString()).format("0");
 }
 
+function clpPriceFormat(val: Numberish): string {
+  if (bn(val).lt(0.001)) return numeral(val.toString()).format("0.00000");
+  if (bn(val).lt(10)) return numeral(val.toString()).format("0.0000");
+  if (bn(val).lt(100)) return numeral(val.toString()).format("0.00");
+
+  return numeral(val.toString()).format("0");
+}
 // Sums an array of numbers safely using bignumber.js.
 export function safeSum(amounts: Numberish[]): string {
   return amounts.reduce((a, b) => bn(a).plus(b.toString()), bn(0)).toString();
@@ -180,7 +187,8 @@ type NumberFormat =
   | "sharePercent"
   | "stakedPercentage"
   | "boost"
-  | "gyroPrice";
+  | "gyroPrice"
+  | "clpPrice";
 
 // General number formatting function.
 export function fNum(format: NumberFormat, val: Numberish, opts?: FormatOpts): string {
@@ -209,6 +217,8 @@ export function fNum(format: NumberFormat, val: Numberish, opts?: FormatOpts): s
       return boostFormat(val);
     case "gyroPrice":
       return gyroPriceFormat(val);
+    case "clpPrice":
+      return clpPriceFormat(val);
     default:
       throw new Error(`Number format not implemented: ${format}`);
   }

From bd27b33fb3ca69aaa7439b8abaecf926e990afa1 Mon Sep 17 00:00:00 2001
From: Matt Pereira <mattpereira.dev@gmail.com>
Date: Sun, 13 Jul 2025 14:02:48 -0700
Subject: [PATCH 04/18] fix chart for dynamic centeredness margin

---
 .../ChooseParameters/ReClammParams.tsx        |  15 +-
 .../ChooseParameters/index.tsx                |   8 +-
 .../ChooseParameters/types.ts                 |   2 +-
 packages/nextjs/hooks/reclamm/reClammMath.ts  |  43 ++---
 .../nextjs/hooks/reclamm/useReclammChart.ts   | 150 ++++++++++++------
 .../nextjs/hooks/v3/usePoolCreationStore.ts   |   4 +-
 6 files changed, 139 insertions(+), 83 deletions(-)

diff --git a/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/ReClammParams.tsx b/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/ReClammParams.tsx
index 1830629..399701d 100644
--- a/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/ReClammParams.tsx
+++ b/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/ReClammParams.tsx
@@ -1,10 +1,11 @@
+import { type HandleNumberInputChange } from "./types";
 import ReactECharts from "echarts-for-react";
 import { ArrowTopRightOnSquareIcon, ArrowsRightLeftIcon } from "@heroicons/react/20/solid";
 import { NumberInput, TextField } from "~~/components/common";
 import { useReclAmmChart } from "~~/hooks/reclamm/useReclammChart";
 import { usePoolCreationStore } from "~~/hooks/v3";
 
-export const ReClammParams = () => {
+export const ReClammParams = ({ handleNumberInputChange }: { handleNumberInputChange: HandleNumberInputChange }) => {
   const { reClammParams, updateReClammParam, tokenConfigs } = usePoolCreationStore();
 
   const {
@@ -83,20 +84,20 @@ export const ReClammParams = () => {
           <NumberInput
             label="Centeredness Margin"
             min={0}
-            max={100}
+            max={90}
             isPercentage={true}
             value={centerednessMargin}
-            placeholder="0 - 100"
-            onChange={e => updateReClammParam({ centerednessMargin: sanitizeNumberInput(e.target.value) })}
+            placeholder="0 - 90"
+            onChange={e => handleNumberInputChange(e, "centerednessMargin", 0, 90)}
           />
           <NumberInput
             label="Daily Price Shift Exponent"
             min={0}
-            max={300}
+            max={100}
             isPercentage={true}
             value={dailyPriceShiftExponent}
-            placeholder="0 - 300"
-            onChange={e => updateReClammParam({ dailyPriceShiftExponent: sanitizeNumberInput(e.target.value) })}
+            placeholder="0 - 100"
+            onChange={e => handleNumberInputChange(e, "dailyPriceShiftExponent", 0, 100)}
           />
           {/* <TextField
             label={`Initial Balance of ${tokenConfigs[0].tokenInfo?.symbol}`}
diff --git a/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/index.tsx b/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/index.tsx
index 9ad5558..8c07d6b 100644
--- a/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/index.tsx
+++ b/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/index.tsx
@@ -12,7 +12,7 @@ import { PoolType } from "@balancer/sdk";
 import { usePoolCreationStore } from "~~/hooks/v3";
 
 export const ChooseParameters = () => {
-  const { poolType, updatePool } = usePoolCreationStore();
+  const { poolType, updatePool, reClammParams } = usePoolCreationStore();
 
   const handleNumberInputChange: HandleNumberInputChange = (e, field, min, max) => {
     const value = e.target.value;
@@ -31,6 +31,10 @@ export const ChooseParameters = () => {
     } else {
       if (field === "amplificationParameter") {
         updatePool({ [field]: Math.round(numberValue).toString() });
+      } else if (field === "dailyPriceShiftExponent" || field === "centerednessMargin") {
+        updatePool({
+          reClammParams: { ...reClammParams, [field]: Math.round(numberValue).toString() },
+        });
       } else {
         updatePool({ [field]: value.toString() });
       }
@@ -42,7 +46,7 @@ export const ChooseParameters = () => {
       <div className="text-xl">Choose pool parameters:</div>
 
       {poolType === PoolType.GyroE && <EclpParams />}
-      {poolType === PoolType.ReClamm && <ReClammParams />}
+      {poolType === PoolType.ReClamm && <ReClammParams handleNumberInputChange={handleNumberInputChange} />}
       {(poolType === PoolType.Stable || poolType === PoolType.StableSurge) && (
         <AmplificationParameter handleNumberInputChange={handleNumberInputChange} />
       )}
diff --git a/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/types.ts b/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/types.ts
index 8b471fb..05b85d2 100644
--- a/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/types.ts
+++ b/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/types.ts
@@ -1,6 +1,6 @@
 export type HandleNumberInputChange = (
   e: React.ChangeEvent<HTMLInputElement>,
-  field: "swapFeePercentage" | "amplificationParameter",
+  field: "swapFeePercentage" | "amplificationParameter" | "centerednessMargin" | "dailyPriceShiftExponent",
   min: number,
   max: number,
 ) => void;
diff --git a/packages/nextjs/hooks/reclamm/reClammMath.ts b/packages/nextjs/hooks/reclamm/reClammMath.ts
index 7f13fa8..d585081 100644
--- a/packages/nextjs/hooks/reclamm/reClammMath.ts
+++ b/packages/nextjs/hooks/reclamm/reClammMath.ts
@@ -2,27 +2,25 @@ import * as WeightedMath from "./weightedMath";
 
 const timeFix = 12464900; // Using the same constant as the Contract. The full value is 12464935.015039.
 
-export function calculatePoolCenteredness(params: {
+export function computeCenteredness(params: {
   balanceA: number;
   balanceB: number;
   virtualBalanceA: number;
   virtualBalanceB: number;
-}) {
-  if (params.balanceA === 0 || params.balanceB === 0) return 0;
-  if (isAboveCenter(params)) {
-    return (params.balanceB * params.virtualBalanceA) / (params.balanceA * params.virtualBalanceB);
-  }
-  return (params.balanceA * params.virtualBalanceB) / (params.balanceB * params.virtualBalanceA);
-}
+}): { poolCenteredness: number; isPoolAboveCenter: boolean } {
+  if (params.balanceA === 0) return { poolCenteredness: 0, isPoolAboveCenter: false };
+  if (params.balanceB === 0) return { poolCenteredness: 0, isPoolAboveCenter: true };
 
-export function isAboveCenter(params: {
-  balanceA: number;
-  balanceB: number;
-  virtualBalanceA: number;
-  virtualBalanceB: number;
-}) {
-  if (params.balanceB === 0) return true;
-  return params.balanceA / params.balanceB > params.virtualBalanceA / params.virtualBalanceB;
+  const numerator = params.balanceA * params.virtualBalanceB;
+  const denominator = params.balanceB * params.virtualBalanceA;
+
+  if (numerator < denominator) {
+    return {
+      poolCenteredness: numerator / denominator,
+      isPoolAboveCenter: false,
+    };
+  }
+  return { poolCenteredness: denominator / numerator, isPoolAboveCenter: true };
 }
 
 export function calculateLowerMargin(params: {
@@ -150,7 +148,7 @@ export const recalculateVirtualBalances = (params: {
   currentPriceRatio: number;
   poolParams: {
     margin: number;
-    dailyPriceShiftExponent: number;
+    priceShiftDailyRate: number;
   };
   updateQ0Params: {
     startTime: number;
@@ -184,7 +182,7 @@ export const recalculateVirtualBalances = (params: {
     };
   }
 
-  const poolCenteredness = calculatePoolCenteredness({
+  const { poolCenteredness, isPoolAboveCenter } = computeCenteredness({
     balanceA: params.balanceA,
     balanceB: params.balanceB,
     virtualBalanceA: params.oldVirtualBalanceA,
@@ -195,13 +193,6 @@ export const recalculateVirtualBalances = (params: {
   let newVirtualBalanceB = params.oldVirtualBalanceB;
   let newPriceRatio = params.currentPriceRatio;
 
-  const isPoolAboveCenter = isAboveCenter({
-    balanceA: params.balanceA,
-    balanceB: params.balanceB,
-    virtualBalanceA: params.oldVirtualBalanceA,
-    virtualBalanceB: params.oldVirtualBalanceB,
-  });
-
   const isPriceRatioUpdating =
     params.simulationParams.simulationSeconds >= params.updateQ0Params.startTime &&
     (params.simulationParams.simulationSeconds <= params.updateQ0Params.endTime ||
@@ -239,7 +230,7 @@ export const recalculateVirtualBalances = (params: {
   }
 
   if (poolCenteredness <= params.poolParams.margin / 100) {
-    const tau = params.poolParams.dailyPriceShiftExponent / timeFix;
+    const tau = params.poolParams.priceShiftDailyRate / timeFix;
 
     if (isPoolAboveCenter) {
       newVirtualBalanceB = newVirtualBalanceB * Math.pow(1 - tau, fixedSecondsSinceLastInteraction);
diff --git a/packages/nextjs/hooks/reclamm/useReclammChart.ts b/packages/nextjs/hooks/reclamm/useReclammChart.ts
index d6007ea..2be405d 100644
--- a/packages/nextjs/hooks/reclamm/useReclammChart.ts
+++ b/packages/nextjs/hooks/reclamm/useReclammChart.ts
@@ -1,7 +1,11 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 import { useMemo } from "react";
 import { usePoolCreationStore } from "../v3";
-import { calculateInitialBalances, calculateLowerMargin, calculateUpperMargin } from "./reClammMath";
+import {
+  calculateInitialBalances,
+  calculateLowerMargin,
+  calculateUpperMargin,
+  computeCenteredness,
+} from "./reClammMath";
 import { useInitialPricingParams } from "./useInitialPricingParams";
 import { bn, fNum } from "~~/utils/numbers";
 
@@ -17,6 +21,8 @@ function getGradientColor(colorStops: string[]) {
 }
 
 const isMobile = false;
+const GREEN = "#93F6D2";
+const ORANGE = "rgb(253, 186, 116)";
 
 /**
  * Using math from reclamm simulator and chart from frontend monorepo
@@ -26,10 +32,6 @@ export function useReclAmmChart() {
 
   const { tokenConfigs } = usePoolCreationStore();
 
-  const dynamicXAxisNamePadding = isMobile
-    ? [0, 30, -128, 0] // mobile
-    : [0, 55, -75, 0]; // desktop
-
   const tokens = useMemo(() => {
     const tokenSymbols = tokenConfigs.map(token => token.tokenInfo?.symbol);
 
@@ -67,28 +69,28 @@ export function useReclAmmChart() {
       targetPrice: Number(initialTargetPrice),
       initialBalanceA: Number(initialBalanceA),
     });
-    const margin = centerednessMargin;
     const invariant = bn(bn(balanceA).plus(virtualBalanceA)).times(bn(balanceB).plus(virtualBalanceB));
 
-    const vBalanceA = Number(virtualBalanceA);
-    const vBalanceB = Number(virtualBalanceB);
+    const rBalanceA = balanceA;
+    const rBalanceB = balanceB;
+    const vBalanceA = virtualBalanceA;
+    const vBalanceB = virtualBalanceB;
+    const marginValue = Number(centerednessMargin);
 
     const lowerMargin = calculateLowerMargin({
-      margin: Number(margin),
+      margin: marginValue,
       invariant: invariant.toNumber(),
       virtualBalanceA: vBalanceA,
       virtualBalanceB: vBalanceB,
     });
 
     const upperMargin = calculateUpperMargin({
-      margin: Number(margin),
+      margin: marginValue,
       invariant: invariant.toNumber(),
       virtualBalanceA: vBalanceA,
       virtualBalanceB: vBalanceB,
     });
 
-    // const currentBalance = bn(balanceA).plus(virtualBalanceA).toNumber();
-
     const minPriceValue = bn(virtualBalanceB).pow(2).div(invariant).toNumber();
     const maxPriceValue = bn(invariant).div(bn(virtualBalanceA).pow(2)).toNumber();
 
@@ -101,6 +103,13 @@ export function useReclAmmChart() {
       (currentPriceValue > minPriceValue && currentPriceValue < lowerMarginValue) ||
       (currentPriceValue > upperMarginValue && currentPriceValue < maxPriceValue);
 
+    const { poolCenteredness, isPoolAboveCenter } = computeCenteredness({
+      balanceA: rBalanceA,
+      balanceB: rBalanceB,
+      virtualBalanceA: vBalanceA,
+      virtualBalanceB: vBalanceB,
+    });
+
     return {
       maxPriceValue,
       minPriceValue,
@@ -108,21 +117,72 @@ export function useReclAmmChart() {
       upperMarginValue,
       currentPriceValue,
       isPoolWithinRange,
+      usdPerTokenInputA,
+      usdPerTokenInputB,
+      poolCenteredness,
+      isPoolAboveCenter,
+      marginValue,
     };
-  }, [centerednessMargin, initialBalanceA, initialMinPrice, initialMaxPrice, initialTargetPrice, tokenConfigs]);
+  }, [
+    centerednessMargin,
+    initialBalanceA,
+    initialMinPrice,
+    initialMaxPrice,
+    initialTargetPrice,
+    usdPerTokenInputA,
+    usdPerTokenInputB,
+  ]);
 
   const options = useMemo(() => {
-    const { maxPriceValue, minPriceValue, lowerMarginValue, upperMarginValue, currentPriceValue } = currentChartData;
+    const {
+      maxPriceValue,
+      minPriceValue,
+      lowerMarginValue,
+      upperMarginValue,
+      currentPriceValue,
+      marginValue, // is a true percentage
+      isPoolWithinRange,
+    } = currentChartData;
+
+    let showTargetValues = true;
+    let showMinMaxValues = true;
+    const totalGreenAndOrangeBars = 52;
+
+    // always have a minimum of 1 orange bar
+    const baseOrangeBarCount =
+      marginValue && marginValue < 4 ? 1 : Math.floor((totalGreenAndOrangeBars * (marginValue || 0)) / 100 / 2);
+
+    // if the margin is very small or very big, show only the target values or min/max values depending on the pool state
+    if (marginValue && marginValue < 4) {
+      if (isPoolWithinRange) {
+        showTargetValues = true;
+        showMinMaxValues = false;
+      } else if (isPoolWithinRange) {
+        showTargetValues = false;
+        showMinMaxValues = true;
+      }
+    } else if (marginValue && marginValue > 92) {
+      showTargetValues = false;
+      showMinMaxValues = true;
+    }
+
+    const baseGreenBarCount = totalGreenAndOrangeBars - 2 * baseOrangeBarCount;
+    const baseGreyBarCount = 9;
+    const totalBars = 2 * baseGreyBarCount + 2 * baseOrangeBarCount + baseGreenBarCount;
+
+    // for some reason the number of orange (or green) bars matters to echarts in the grid
+    const gridBottomDesktop = baseOrangeBarCount % 2 === 0 ? "32%" : "15%";
+    const gridBottomMobile = baseOrangeBarCount % 2 === 0 && !(showMinMaxValues && !showTargetValues) ? "30%" : "22%";
 
     const baseGreyBarConfig = {
-      count: 10,
-      value: 3,
+      count: baseGreyBarCount,
+      value: isMobile ? 1 : 3,
       gradientColors: ["rgba(160, 174, 192, 0.5)", "rgba(160, 174, 192, 0.1)"],
       borderRadius: 20,
     };
 
     const baseOrangeBarConfig = {
-      count: 8,
+      count: baseOrangeBarCount,
       value: 100,
       gradientColors: ["rgb(253, 186, 116)", "rgba(151, 111, 69, 0.5)"],
       borderRadius: 20,
@@ -130,7 +190,7 @@ export function useReclAmmChart() {
 
     const greenBarConfig = {
       name: "Green",
-      count: 42,
+      count: baseGreenBarCount,
       value: 100,
       gradientColors: ["rgb(99, 242, 190)", "rgba(57, 140, 110, 0.5)"],
       borderRadius: 20,
@@ -150,20 +210,18 @@ export function useReclAmmChart() {
 
     // Calculate which bar the current price corresponds to
     const getCurrentPriceBarIndex = () => {
-      const { minPriceValue, maxPriceValue, currentPriceValue } = currentChartData;
+      const { poolCenteredness = 0, isPoolAboveCenter = false } = currentChartData || {};
 
-      if (minPriceValue === undefined || maxPriceValue === undefined || currentPriceValue === undefined) {
-        return 50; // Default to middle if values are not available
-      }
-
-      const priceRange = maxPriceValue - minPriceValue;
-      const pricePerBar = priceRange / 58; // 58 bars in the colored section (8 orange + 42 green + 8 orange)
-      const barsFromMin = (currentPriceValue - minPriceValue) / pricePerBar;
+      const totalGreenAndOrangeBars = 2 * baseOrangeBarCount + baseGreenBarCount;
+      let barIndex = 0;
 
-      // Add the initial 10 grey bars and round to nearest bar
-      const barIndex = Math.min(Math.max(0, Math.round(barsFromMin)), 57) + 10;
+      if (isPoolAboveCenter) {
+        barIndex = Math.floor((poolCenteredness / 2) * totalGreenAndOrangeBars);
+      } else {
+        barIndex = Math.floor(((2 - poolCenteredness) / 2) * totalGreenAndOrangeBars);
+      }
 
-      return barIndex;
+      return barIndex + baseGreyBarCount;
     };
 
     const currentPriceBarIndex = getCurrentPriceBarIndex();
@@ -186,8 +244,10 @@ export function useReclAmmChart() {
           return {
             value: segment.value,
             itemStyle: {
-              color: isCurrentPriceBar
-                ? "#93F6D2" // Solid color for current price bar
+              color: isCurrentPriceBar // Solid color for current price bar
+                ? isPoolWithinRange
+                  ? GREEN
+                  : ORANGE
                 : getGradientColor(segment.gradientColors),
               borderRadius: segment.borderRadius,
             },
@@ -216,13 +276,13 @@ export function useReclAmmChart() {
       },
       current: {
         ...baseRichProps,
-        color: "#63F2BE",
+        color: isPoolWithinRange ? GREEN : ORANGE,
       },
       currentTriangle: {
         ...baseRichProps,
         fontSize: 10,
         lineHeight: 12,
-        color: "#63F2BE",
+        color: isPoolWithinRange ? GREEN : ORANGE,
       },
       withRightPadding: {
         ...baseRichProps,
@@ -234,7 +294,7 @@ export function useReclAmmChart() {
       },
       withTopRightPadding: {
         ...baseRichProps,
-        padding: [100, paddingRight, 0, 0],
+        padding: [showMinMaxValues && !showTargetValues ? 0 : 100, paddingRight, 0, 0],
       },
     };
 
@@ -243,8 +303,8 @@ export function useReclAmmChart() {
       grid: {
         left: isMobile ? "-7%" : "-3%",
         right: "1%",
-        top: isMobile ? "50px" : "20%",
-        bottom: isMobile ? "-20px" : "15%",
+        top: isMobile ? "80px" : "25%",
+        bottom: isMobile ? gridBottomMobile : gridBottomDesktop,
         containLabel: true,
       },
       xAxis: {
@@ -258,7 +318,7 @@ export function useReclAmmChart() {
           show: true,
           interval: 0,
           formatter: (value: string, index: number) => {
-            if (index === 10) {
+            if (showMinMaxValues && index === baseGreyBarCount) {
               return `{${isMobile ? "triangleMobile" : "triangle"}|▲}\n{${
                 isMobile ? "labelTextMobile" : "labelText"
               }|Min price}\n{${isMobile ? "priceValueMobile" : "priceValue"}|${
@@ -266,19 +326,19 @@ export function useReclAmmChart() {
               }}`;
             }
 
-            if (index === 18) {
+            if (showTargetValues && index === baseGreyBarCount + baseOrangeBarCount) {
               return `{triangle|▲}\n{labelText|Low target}\n{priceValue|${
                 upperMarginValue !== undefined ? fNum("clpPrice", upperMarginValue) : "N/A"
               }}`;
             }
 
-            if (index === 60) {
+            if (showTargetValues && index === totalBars - baseGreyBarCount - baseOrangeBarCount) {
               return `{triangle|▲}\n{labelText|High target}\n{priceValue|${
                 lowerMarginValue !== undefined ? fNum("clpPrice", lowerMarginValue) : "N/A"
               }}`;
             }
 
-            if (index === 68) {
+            if (showMinMaxValues && index === totalBars - baseGreyBarCount) {
               return `{${isMobile ? "triangleMobile" : "triangle"}|▲}\n{${
                 isMobile ? "labelTextMobile" : "labelText"
               }|Max price}\n{${isMobile ? "priceValueMobile" : "priceValue"}|${
@@ -311,7 +371,7 @@ export function useReclAmmChart() {
             },
             priceValueMobile: {
               ...richStyles.base,
-              padding: [110, 10, 0, 0],
+              padding: [showMinMaxValues && !showTargetValues ? 0 : 110, 10, 0, 0],
             },
           },
         },
@@ -321,8 +381,8 @@ export function useReclAmmChart() {
         nameTextStyle: {
           align: "right",
           verticalAlign: "bottom",
-          padding: dynamicXAxisNamePadding,
-          color: baseRichProps.color,
+          padding: showMinMaxValues && !showTargetValues ? [0, 50, -85, 0] : [0, 50, -80, 0],
+          color: "#A0AEC0",
         },
       },
       yAxis: {
@@ -366,7 +426,7 @@ export function useReclAmmChart() {
         },
       ],
     };
-  }, [currentChartData, tokens, isMobile]);
+  }, [currentChartData, tokens]);
 
   return { options };
 }
diff --git a/packages/nextjs/hooks/v3/usePoolCreationStore.ts b/packages/nextjs/hooks/v3/usePoolCreationStore.ts
index c0a3f94..a8fe3ef 100644
--- a/packages/nextjs/hooks/v3/usePoolCreationStore.ts
+++ b/packages/nextjs/hooks/v3/usePoolCreationStore.ts
@@ -112,8 +112,8 @@ export const initialReClammParams: ReClammParams = {
   initialMaxPrice: "",
   tokenAPriceIncludesRate: false,
   tokenBPriceIncludesRate: false,
-  dailyPriceShiftExponent: "150",
-  centerednessMargin: "25",
+  dailyPriceShiftExponent: "25",
+  centerednessMargin: "50",
   initialBalanceA: "100", // TODO: removed input. could this be hard coded?
   usdPerTokenInputA: "",
   usdPerTokenInputB: "",

From 29c2fc382d814c732ca011a9abd7889e19199f7e Mon Sep 17 00:00:00 2001
From: Matt Pereira <mattpereira.dev@gmail.com>
Date: Sun, 13 Jul 2025 17:54:36 -0700
Subject: [PATCH 05/18] fetch computed reclamm init amounts

---
 .../ChooseTokenAmounts/ChooseTokenAmount.tsx  | 41 +++++++++++++++----
 packages/nextjs/hooks/reclamm/index.ts        |  1 +
 .../reclamm/useComputeInitialBalances.ts      | 38 +++++++++++++++++
 .../nextjs/hooks/reclamm/useReclammChart.ts   | 22 ++++++----
 packages/nextjs/hooks/v3/useCreatePool.ts     | 29 ++++++++++---
 5 files changed, 110 insertions(+), 21 deletions(-)
 create mode 100644 packages/nextjs/hooks/reclamm/useComputeInitialBalances.ts

diff --git a/packages/nextjs/app/v3/_components/PoolCreation/ChooseTokenAmounts/ChooseTokenAmount.tsx b/packages/nextjs/app/v3/_components/PoolCreation/ChooseTokenAmounts/ChooseTokenAmount.tsx
index 1b997bf..56f534d 100644
--- a/packages/nextjs/app/v3/_components/PoolCreation/ChooseTokenAmounts/ChooseTokenAmount.tsx
+++ b/packages/nextjs/app/v3/_components/PoolCreation/ChooseTokenAmounts/ChooseTokenAmount.tsx
@@ -1,15 +1,16 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { TokenAmountField } from "./TokenAmountField";
 import { PoolType } from "@balancer/sdk";
 import { useQueryClient } from "@tanstack/react-query";
 import { erc20Abi, formatUnits } from "viem";
 import { useAccount, useReadContract } from "wagmi";
+import { useComputeInitialBalances } from "~~/hooks/reclamm";
 import { useTokenUsdValue } from "~~/hooks/token";
 import { type TokenConfig, usePoolCreationStore, useUserDataStore } from "~~/hooks/v3";
 
 export function ChooseTokenAmount({ index, tokenConfig }: { index: number; tokenConfig: TokenConfig }) {
   const { updateUserData, userTokenBalances } = useUserDataStore();
-  const { poolType, updateTokenConfig, eclpParams, tokenConfigs } = usePoolCreationStore();
+  const { poolType, updateTokenConfig, eclpParams, tokenConfigs, poolAddress } = usePoolCreationStore();
   const { tokenInfo, amount, address, weight } = tokenConfig;
   const { usdPerTokenInput0, usdPerTokenInput1 } = eclpParams;
 
@@ -29,11 +30,38 @@ export function ChooseTokenAmount({ index, tokenConfig }: { index: number; token
     args: connectedAddress ? [connectedAddress] : undefined,
   });
 
+  const { data: initAmountsRaw, isLoading: isLoadingReclammInitAmounts } = useComputeInitialBalances(
+    poolAddress,
+    address,
+    amount,
+    tokenInfo?.decimals,
+  );
+  const lastUpdatedAmountByIndex = useRef<number | null>(null);
+
   useEffect(() => {
     updateUserData({ userTokenBalances: { ...userTokenBalances, [address]: userTokenBalance?.toString() ?? "0" } });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [userTokenBalance, address]);
 
+  useEffect(() => {
+    // TODO: fix for if tokenConfigs are "out of order"
+    if (poolType === PoolType.ReClamm && initAmountsRaw && !isLoadingReclammInitAmounts) {
+      console.log("initAmountsRaw", initAmountsRaw);
+      const otherIndex = index === 0 ? 1 : 0;
+      console.log("index", index);
+      const otherTokenAmount = formatUnits(
+        initAmountsRaw[otherIndex],
+        tokenConfigs[otherIndex]?.tokenInfo?.decimals || 0,
+      );
+
+      if (lastUpdatedAmountByIndex.current === index) {
+        updateTokenConfig(otherIndex, { amount: otherTokenAmount });
+        lastUpdatedAmountByIndex.current = null;
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initAmountsRaw, isLoadingReclammInitAmounts, poolType, index, lastUpdatedAmountByIndex]);
+
   // Helper function to get rate-adjusted USD price for a token
   const getRateAdjustedUsdPrice = (tokenIndex: number) => {
     const rateProvider = tokenConfigs[tokenIndex].rateProvider;
@@ -49,17 +77,16 @@ export function ChooseTokenAmount({ index, tokenConfig }: { index: number; token
     if (Number(inputValue) >= 0) {
       if (poolType === PoolType.GyroE) {
         const otherIndex = index === 0 ? 1 : 0;
-
         const referenceTokenPrice = getRateAdjustedUsdPrice(index);
         const otherTokenPrice = getRateAdjustedUsdPrice(otherIndex);
-
         const calculatedAmount = (Number(inputValue) * referenceTokenPrice) / otherTokenPrice;
 
-        updateTokenConfig(index, { amount: inputValue });
         updateTokenConfig(otherIndex, { amount: calculatedAmount.toString() }); // update other token input to be proportional
-      } else {
-        updateTokenConfig(index, { amount: inputValue });
       }
+
+      if (poolType === PoolType.ReClamm) lastUpdatedAmountByIndex.current = index;
+
+      updateTokenConfig(index, { amount: inputValue });
     } else {
       updateTokenConfig(index, { amount: "" });
     }
diff --git a/packages/nextjs/hooks/reclamm/index.ts b/packages/nextjs/hooks/reclamm/index.ts
index 5da94f4..43d2b63 100644
--- a/packages/nextjs/hooks/reclamm/index.ts
+++ b/packages/nextjs/hooks/reclamm/index.ts
@@ -1 +1,2 @@
 export * from "./useReclammChart";
+export * from "./useComputeInitialBalances";
diff --git a/packages/nextjs/hooks/reclamm/useComputeInitialBalances.ts b/packages/nextjs/hooks/reclamm/useComputeInitialBalances.ts
new file mode 100644
index 0000000..9b8d627
--- /dev/null
+++ b/packages/nextjs/hooks/reclamm/useComputeInitialBalances.ts
@@ -0,0 +1,38 @@
+import { usePoolCreationStore } from "../v3";
+import { PoolType } from "@balancer/sdk";
+import { useQuery } from "@tanstack/react-query";
+import { Address, parseAbi, parseUnits } from "viem";
+import { usePublicClient } from "wagmi";
+
+export const useComputeInitialBalances = (
+  poolAddress: Address | undefined,
+  tokenAddress: Address,
+  humanAmount: string,
+  tokenDecimals: number | undefined,
+) => {
+  const client = usePublicClient();
+  const { poolType } = usePoolCreationStore();
+  const isReClamm = poolType === PoolType.ReClamm;
+
+  return useQuery({
+    queryKey: ["computeInitialBalancesRaw", humanAmount, poolAddress, tokenAddress, tokenDecimals],
+    queryFn: async () => {
+      if (!client) throw new Error("client not found for fetching reclamm initial balances");
+      if (!poolAddress) throw new Error("pool address required to fetch reclamm initial balances");
+      if (!tokenDecimals) throw new Error("token decimals required to fetch reclamm initial balances");
+
+      const rawAmount = parseUnits(humanAmount, tokenDecimals);
+
+      console.log("tokenAddress", tokenAddress);
+      console.log("rawAmount", rawAmount);
+
+      return await client.readContract({
+        address: poolAddress,
+        abi: parseAbi(["function computeInitialBalancesRaw(address, uint256) view returns (uint256[])"]),
+        functionName: "computeInitialBalancesRaw",
+        args: [tokenAddress, rawAmount],
+      });
+    },
+    enabled: !!poolAddress && !!tokenAddress && !!humanAmount && !!tokenDecimals && isReClamm,
+  });
+};
diff --git a/packages/nextjs/hooks/reclamm/useReclammChart.ts b/packages/nextjs/hooks/reclamm/useReclammChart.ts
index 2be405d..5e48bc3 100644
--- a/packages/nextjs/hooks/reclamm/useReclammChart.ts
+++ b/packages/nextjs/hooks/reclamm/useReclammChart.ts
@@ -97,6 +97,7 @@ export function useReclAmmChart() {
     const lowerMarginValue = bn(invariant).div(bn(lowerMargin).pow(2)).toNumber();
     const upperMarginValue = bn(invariant).div(bn(upperMargin).pow(2)).toNumber();
 
+    // Using usd per token inputs populated by fetch (or user) to calc current price
     const currentPriceValue = Number(usdPerTokenInputA) / Number(usdPerTokenInputB);
 
     const isPoolWithinRange =
@@ -210,18 +211,21 @@ export function useReclAmmChart() {
 
     // Calculate which bar the current price corresponds to
     const getCurrentPriceBarIndex = () => {
-      const { poolCenteredness = 0, isPoolAboveCenter = false } = currentChartData || {};
+      const { minPriceValue, maxPriceValue, currentPriceValue } = currentChartData || {};
 
-      const totalGreenAndOrangeBars = 2 * baseOrangeBarCount + baseGreenBarCount;
-      let barIndex = 0;
-
-      if (isPoolAboveCenter) {
-        barIndex = Math.floor((poolCenteredness / 2) * totalGreenAndOrangeBars);
-      } else {
-        barIndex = Math.floor(((2 - poolCenteredness) / 2) * totalGreenAndOrangeBars);
+      if (!minPriceValue || !maxPriceValue || !currentPriceValue) {
+        return baseGreyBarCount; // Default to first green bar
       }
 
-      return barIndex + baseGreyBarCount;
+      // Calculate position based on current price relative to min/max
+      const priceRange = maxPriceValue - minPriceValue;
+      const currentPricePosition = (currentPriceValue - minPriceValue) / priceRange;
+
+      // Map to bar index
+      const totalGreenAndOrangeBars = 2 * baseOrangeBarCount + baseGreenBarCount;
+      const barIndex = Math.floor(currentPricePosition * totalGreenAndOrangeBars);
+
+      return Math.max(0, Math.min(barIndex + baseGreyBarCount, totalBars - 1));
     };
 
     const currentPriceBarIndex = getCurrentPriceBarIndex();
diff --git a/packages/nextjs/hooks/v3/useCreatePool.ts b/packages/nextjs/hooks/v3/useCreatePool.ts
index efa7cc7..64783a8 100644
--- a/packages/nextjs/hooks/v3/useCreatePool.ts
+++ b/packages/nextjs/hooks/v3/useCreatePool.ts
@@ -144,7 +144,7 @@ export const useCreatePool = () => {
 
 // Returns pool type specific parameters necesary for the create pool input
 function usePoolTypeSpecificParams() {
-  const { poolType, amplificationParameter, eclpParams, reClammParams } = usePoolCreationStore();
+  const { poolType, amplificationParameter, eclpParams, reClammParams, tokenConfigs } = usePoolCreationStore();
 
   const isGyroEclp = poolType === PoolType.GyroE;
   const isStablePool = poolType === PoolType.Stable || poolType === PoolType.StableSurge;
@@ -169,16 +169,35 @@ function usePoolTypeSpecificParams() {
   }
 
   if (isReClamm) {
+    // if tokenConfigs "out of order", invert the min max and target price
+    // TODO: account for if user is using boosted variant which means address will be underling so gotta look at other addy
+    const isTokenConfigsInOrder = tokenConfigs[0].address.toLowerCase() < tokenConfigs[1].address.toLowerCase();
+    console.log({ isTokenConfigsInOrder });
+
+    const { initialMinPrice, initialMaxPrice, initialTargetPrice } = reClammParams;
+
+    let minPrice = Number(initialMinPrice);
+    let maxPrice = Number(initialMaxPrice);
+    let targetPrice = Number(initialTargetPrice);
+
+    if (!isTokenConfigsInOrder) {
+      minPrice = 1 / Number(initialMaxPrice);
+      maxPrice = 1 / Number(initialMinPrice);
+      targetPrice = 1 / Number(initialTargetPrice);
+    }
+
+    console.log({ minPrice, maxPrice, targetPrice });
+
     return {
       priceParams: {
-        initialMinPrice: parseUnits(reClammParams.initialMinPrice, 18),
-        initialMaxPrice: parseUnits(reClammParams.initialMaxPrice, 18),
-        initialTargetPrice: parseUnits(reClammParams.initialTargetPrice, 18),
+        initialMinPrice: parseUnits(minPrice.toString(), 18),
+        initialMaxPrice: parseUnits(maxPrice.toString(), 18),
+        initialTargetPrice: parseUnits(targetPrice.toString(), 18),
         tokenAPriceIncludesRate: reClammParams.tokenAPriceIncludesRate,
         tokenBPriceIncludesRate: reClammParams.tokenBPriceIncludesRate,
       },
       priceShiftDailyRate: parseUnits(reClammParams.dailyPriceShiftExponent, 16), // SDK kept OG var name but on chain is same as creation ui
-      centerednessMargin: parseUnits((Number(reClammParams.centerednessMargin) / 2).toString(), 16), // Charting UX based on pool math simulator setup allows 0 - 100% but on chain is 0 - 50%
+      centerednessMargin: parseUnits(reClammParams.centerednessMargin, 16), // Charting UX based on pool math simulator setup allows 0 - 100% but on chain is 0 - 50%
     };
   }
 

From 7f826070ddc43dc9c5ebd3b7b2aaf14a38f8b455 Mon Sep 17 00:00:00 2001
From: Matt Pereira <mattpereira.dev@gmail.com>
Date: Mon, 14 Jul 2025 13:33:00 -0700
Subject: [PATCH 06/18] fix proportional init amount updates

---
 .../ChooseTokens/ChooseToken.tsx              |  7 +++++--
 .../ChooseTokenAmounts/ChooseTokenAmount.tsx  | 21 ++++++++++++-------
 .../reclamm/useComputeInitialBalances.ts      |  3 ---
 packages/nextjs/hooks/v3/useCreatePool.ts     |  3 ---
 4 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseTokens/ChooseToken.tsx b/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseTokens/ChooseToken.tsx
index e2f2efd..d000a4b 100644
--- a/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseTokens/ChooseToken.tsx
+++ b/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseTokens/ChooseToken.tsx
@@ -163,10 +163,13 @@ export function ChooseToken({ index }: { index: number }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [token.tokenInfo?.priceRateProviderData, token.useBoostedVariant, token.address, showBoostOpportunityModal]);
 
+  // Prevent user from boosting underlying for gyro and reclamm cus logic too prone to bugs
+  const shouldHideBoostUnderlying = poolType === PoolType.GyroE || poolType === PoolType.ReClamm;
+
   return (
     <>
       <div className="bg-base-100 p-5 rounded-xl flex flex-col gap-3 relative">
-        {boostedVariant && poolType !== PoolType.GyroE && (
+        {boostedVariant && !shouldHideBoostUnderlying && (
           <div
             className={`flex justify-end items-center gap-1 cursor-pointer absolute top-2 right-5 text-lg ${
               useBoostedVariant ? "text-success" : "text-info"
@@ -305,7 +308,7 @@ export function ChooseToken({ index }: { index: number }) {
       {showRateProviderModal && tokenInfo && (
         <RateProviderModal setShowRateProviderModal={setShowRateProviderModal} tokenIndex={index} />
       )}
-      {showBoostOpportunityModal && tokenInfo && boostedVariant && poolType !== PoolType.GyroE && (
+      {showBoostOpportunityModal && tokenInfo && boostedVariant && !shouldHideBoostUnderlying && (
         <BoostOpportunityModal
           tokenIndex={index}
           standardVariant={tokenInfo}
diff --git a/packages/nextjs/app/v3/_components/PoolCreation/ChooseTokenAmounts/ChooseTokenAmount.tsx b/packages/nextjs/app/v3/_components/PoolCreation/ChooseTokenAmounts/ChooseTokenAmount.tsx
index 56f534d..d9de1fc 100644
--- a/packages/nextjs/app/v3/_components/PoolCreation/ChooseTokenAmounts/ChooseTokenAmount.tsx
+++ b/packages/nextjs/app/v3/_components/PoolCreation/ChooseTokenAmounts/ChooseTokenAmount.tsx
@@ -44,18 +44,25 @@ export function ChooseTokenAmount({ index, tokenConfig }: { index: number; token
   }, [userTokenBalance, address]);
 
   useEffect(() => {
-    // TODO: fix for if tokenConfigs are "out of order"
     if (poolType === PoolType.ReClamm && initAmountsRaw && !isLoadingReclammInitAmounts) {
-      console.log("initAmountsRaw", initAmountsRaw);
-      const otherIndex = index === 0 ? 1 : 0;
-      console.log("index", index);
+      const otherTokenIndex = index === 0 ? 1 : 0;
+
+      // create array of ordered token addresses
+      const tokenAddresses = tokenConfigs.map(tokenConfig => tokenConfig.address.toLowerCase());
+      const sortedTokenAddresses = tokenAddresses.sort((a, b) => a.localeCompare(b));
+
+      // find index of other token within sorted token configs
+      const addressOfOtherToken = tokenConfigs[otherTokenIndex].address.toLowerCase();
+      const indexOfOtherTokenAmount = sortedTokenAddresses.indexOf(addressOfOtherToken);
+
+      // use indexOfOtherTokenAmount to access the initAmounts array (which comes sorted from on chain call)
       const otherTokenAmount = formatUnits(
-        initAmountsRaw[otherIndex],
-        tokenConfigs[otherIndex]?.tokenInfo?.decimals || 0,
+        initAmountsRaw[indexOfOtherTokenAmount],
+        tokenConfigs[otherTokenIndex]?.tokenInfo?.decimals || 0,
       );
 
       if (lastUpdatedAmountByIndex.current === index) {
-        updateTokenConfig(otherIndex, { amount: otherTokenAmount });
+        updateTokenConfig(otherTokenIndex, { amount: otherTokenAmount });
         lastUpdatedAmountByIndex.current = null;
       }
     }
diff --git a/packages/nextjs/hooks/reclamm/useComputeInitialBalances.ts b/packages/nextjs/hooks/reclamm/useComputeInitialBalances.ts
index 9b8d627..bcb5c7e 100644
--- a/packages/nextjs/hooks/reclamm/useComputeInitialBalances.ts
+++ b/packages/nextjs/hooks/reclamm/useComputeInitialBalances.ts
@@ -23,9 +23,6 @@ export const useComputeInitialBalances = (
 
       const rawAmount = parseUnits(humanAmount, tokenDecimals);
 
-      console.log("tokenAddress", tokenAddress);
-      console.log("rawAmount", rawAmount);
-
       return await client.readContract({
         address: poolAddress,
         abi: parseAbi(["function computeInitialBalancesRaw(address, uint256) view returns (uint256[])"]),
diff --git a/packages/nextjs/hooks/v3/useCreatePool.ts b/packages/nextjs/hooks/v3/useCreatePool.ts
index 64783a8..e06e6f4 100644
--- a/packages/nextjs/hooks/v3/useCreatePool.ts
+++ b/packages/nextjs/hooks/v3/useCreatePool.ts
@@ -172,7 +172,6 @@ function usePoolTypeSpecificParams() {
     // if tokenConfigs "out of order", invert the min max and target price
     // TODO: account for if user is using boosted variant which means address will be underling so gotta look at other addy
     const isTokenConfigsInOrder = tokenConfigs[0].address.toLowerCase() < tokenConfigs[1].address.toLowerCase();
-    console.log({ isTokenConfigsInOrder });
 
     const { initialMinPrice, initialMaxPrice, initialTargetPrice } = reClammParams;
 
@@ -186,8 +185,6 @@ function usePoolTypeSpecificParams() {
       targetPrice = 1 / Number(initialTargetPrice);
     }
 
-    console.log({ minPrice, maxPrice, targetPrice });
-
     return {
       priceParams: {
         initialMinPrice: parseUnits(minPrice.toString(), 18),

From a7104e506f5ff2124806c0e9ffe880a844700bc6 Mon Sep 17 00:00:00 2001
From: Matt Pereira <mattpereira.dev@gmail.com>
Date: Mon, 14 Jul 2025 14:03:13 -0700
Subject: [PATCH 07/18] round suggested price params to 5 decimals

---
 packages/nextjs/hooks/reclamm/useInitialPricingParams.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/nextjs/hooks/reclamm/useInitialPricingParams.ts b/packages/nextjs/hooks/reclamm/useInitialPricingParams.ts
index 12b367f..3539ffa 100644
--- a/packages/nextjs/hooks/reclamm/useInitialPricingParams.ts
+++ b/packages/nextjs/hooks/reclamm/useInitialPricingParams.ts
@@ -1,6 +1,7 @@
 import { useEffect } from "react";
 import { useTokenUsdValue } from "~~/hooks/token";
 import { usePoolCreationStore } from "~~/hooks/v3";
+import { fNumCustom } from "~~/utils/numbers";
 
 /**
  * 1. fetch usd per token A and B from API
@@ -31,9 +32,9 @@ export function useInitialPricingParams() {
       const newInitialTargetPrice = Number(usdPerTokenInputA) / Number(usdPerTokenInputB);
 
       updateReClammParam({
-        initialTargetPrice: newInitialTargetPrice.toString(),
-        initialMinPrice: (newInitialTargetPrice * 0.9).toString(),
-        initialMaxPrice: (newInitialTargetPrice * 1.1).toString(),
+        initialTargetPrice: fNumCustom(newInitialTargetPrice, "0.[00000]"),
+        initialMinPrice: fNumCustom(newInitialTargetPrice * 0.9, "0.[00000]"),
+        initialMaxPrice: fNumCustom(newInitialTargetPrice * 1.1, "0.[00000]"),
       });
     }
   }, [updateReClammParam, usdPerTokenInputA, usdPerTokenInputB, initialTargetPrice]);

From cd33891599686cf3ceafc54d24726fb50a118f88 Mon Sep 17 00:00:00 2001
From: Matt Pereira <mattpereira.dev@gmail.com>
Date: Thu, 17 Jul 2025 10:59:47 -0700
Subject: [PATCH 08/18] temp fix reclamm v2 factory addy

---
 packages/nextjs/hooks/v3/useCreatePool.ts | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/packages/nextjs/hooks/v3/useCreatePool.ts b/packages/nextjs/hooks/v3/useCreatePool.ts
index e06e6f4..01c2e4e 100644
--- a/packages/nextjs/hooks/v3/useCreatePool.ts
+++ b/packages/nextjs/hooks/v3/useCreatePool.ts
@@ -1,4 +1,5 @@
 import {
+  ChainId,
   CreatePool,
   CreatePoolGyroECLPInput,
   CreatePoolReClammInput,
@@ -109,9 +110,13 @@ export const useCreatePool = () => {
     const input = createPoolInput();
     const call = createPool.buildCall(input);
 
+    // TODO: remove this and use call.to again after SDK update is released
+    const isReClamm = input.poolType === PoolType.ReClamm;
+    const to = isReClamm ? ReClammPoolFactory[input.chainId as keyof typeof ReClammPoolFactory] : call.to;
+
     const estimatedGas = await publicClient.estimateGas({
       account: walletClient.account,
-      to: call.to,
+      to,
       data: call.callData,
     });
 
@@ -120,7 +125,7 @@ export const useCreatePool = () => {
         walletClient.sendTransaction({
           account: walletClient.account,
           data: call.callData,
-          to: call.to,
+          to,
           gas: isHyperEvm ? estimatedGas * 2n : undefined,
           gasPrice: isHyperEvm && bigBlockGasPrice ? BigInt(bigBlockGasPrice) : undefined,
         }),
@@ -200,3 +205,15 @@ function usePoolTypeSpecificParams() {
 
   return {};
 }
+
+const ReClammPoolFactory: Partial<Record<ChainId, `0x${string}`>> = {
+  [ChainId.ARBITRUM_ONE]: "0x355bD33F0033066BB3DE396a6d069be57353AD95",
+  [ChainId.AVALANCHE]: "0x309abcAeFa19CA6d34f0D8ff4a4103317c138657",
+  [ChainId.BASE]: "0x201efd508c8DfE9DE1a13c2452863A78CB2a86Cc",
+  [ChainId.GNOSIS_CHAIN]: "0xc86eF81E57492BE65BFCa9b0Ed53dCBAfDBe6100",
+  [ChainId.HYPER_EVM]: "0x4BB42f71CAB7Bd13e9f958dA4351B9fa2d3A42FF",
+  [ChainId.MAINNET]: "0xDaa273AeEc06e9CCb7428a77E2abb1E4659B16D2",
+  [ChainId.OPTIMISM]: "0x891EC9B34829276a9a8ef2F8A9cEAF2486017e0d",
+  [ChainId.SEPOLIA]: "0xf58A574530Ea5cEB727095e6039170c1e8068fcA",
+  [ChainId.SONIC]: "0x99c13B259138a8ad8badbBfB87A4074591310De0",
+};

From 6ad578023aab2bcf9ed47f8fe481611da5b31ee0 Mon Sep 17 00:00:00 2001
From: Matt Pereira <mattpereira.dev@gmail.com>
Date: Thu, 17 Jul 2025 13:52:10 -0700
Subject: [PATCH 09/18] update suggested reclamm price params on per usd input
 change

---
 .../ChooseParameters/ReClammParams.tsx        | 22 +++++++++++++++----
 .../hooks/reclamm/useInitialPricingParams.ts  |  7 +++---
 packages/nextjs/hooks/v3/useUserDataStore.ts  |  2 ++
 3 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/ReClammParams.tsx b/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/ReClammParams.tsx
index 399701d..476cb88 100644
--- a/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/ReClammParams.tsx
+++ b/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/ReClammParams.tsx
@@ -3,11 +3,12 @@ import ReactECharts from "echarts-for-react";
 import { ArrowTopRightOnSquareIcon, ArrowsRightLeftIcon } from "@heroicons/react/20/solid";
 import { NumberInput, TextField } from "~~/components/common";
 import { useReclAmmChart } from "~~/hooks/reclamm/useReclammChart";
-import { usePoolCreationStore } from "~~/hooks/v3";
+import { usePoolCreationStore, useUserDataStore } from "~~/hooks/v3";
 
 export const ReClammParams = ({ handleNumberInputChange }: { handleNumberInputChange: HandleNumberInputChange }) => {
   const { reClammParams, updateReClammParam, tokenConfigs } = usePoolCreationStore();
 
+  const { updateUserData } = useUserDataStore();
   const {
     initialTargetPrice,
     initialMinPrice,
@@ -51,6 +52,8 @@ export const ReClammParams = ({ handleNumberInputChange }: { handleNumberInputCh
             isDollarValue={true}
             onChange={e => {
               updateReClammParam({ usdPerTokenInputA: sanitizeNumberInput(e.target.value) });
+              // if user changes usd price per token, this triggers useInitialPricingParams hook to move price params to surround new "current price" of pool
+              if (usdPerTokenInputA !== e.target.value) updateUserData({ hasEditedReclammParams: false });
             }}
           />
           <TextField
@@ -59,6 +62,8 @@ export const ReClammParams = ({ handleNumberInputChange }: { handleNumberInputCh
             isDollarValue={true}
             onChange={e => {
               updateReClammParam({ usdPerTokenInputB: sanitizeNumberInput(e.target.value) });
+              // if user changes usd price per token, this triggers useInitialPricingParams hook to move price params to surround new "current price" of pool
+              if (usdPerTokenInputB !== e.target.value) updateUserData({ hasEditedReclammParams: false });
             }}
           />
         </div>
@@ -67,17 +72,26 @@ export const ReClammParams = ({ handleNumberInputChange }: { handleNumberInputCh
           <TextField
             label="Initial Min Price"
             value={initialMinPrice}
-            onChange={e => updateReClammParam({ initialMinPrice: sanitizeNumberInput(e.target.value) })}
+            onChange={e => {
+              updateReClammParam({ initialMinPrice: sanitizeNumberInput(e.target.value) });
+              updateUserData({ hasEditedReclammParams: true });
+            }}
           />
           <TextField
             label="Initial Target Price"
             value={initialTargetPrice}
-            onChange={e => updateReClammParam({ initialTargetPrice: sanitizeNumberInput(e.target.value) })}
+            onChange={e => {
+              updateReClammParam({ initialTargetPrice: sanitizeNumberInput(e.target.value) });
+              updateUserData({ hasEditedReclammParams: true });
+            }}
           />
           <TextField
             label="Initial Max Price"
             value={initialMaxPrice}
-            onChange={e => updateReClammParam({ initialMaxPrice: sanitizeNumberInput(e.target.value) })}
+            onChange={e => {
+              updateReClammParam({ initialMaxPrice: sanitizeNumberInput(e.target.value) });
+              updateUserData({ hasEditedReclammParams: true });
+            }}
           />
         </div>
         <div className="grid grid-cols-2 gap-4">
diff --git a/packages/nextjs/hooks/reclamm/useInitialPricingParams.ts b/packages/nextjs/hooks/reclamm/useInitialPricingParams.ts
index 3539ffa..d75b6fb 100644
--- a/packages/nextjs/hooks/reclamm/useInitialPricingParams.ts
+++ b/packages/nextjs/hooks/reclamm/useInitialPricingParams.ts
@@ -1,6 +1,7 @@
 import { useEffect } from "react";
 import { useTokenUsdValue } from "~~/hooks/token";
 import { usePoolCreationStore } from "~~/hooks/v3";
+import { useUserDataStore } from "~~/hooks/v3";
 import { fNumCustom } from "~~/utils/numbers";
 
 /**
@@ -10,7 +11,7 @@ import { fNumCustom } from "~~/utils/numbers";
  */
 export function useInitialPricingParams() {
   const { updateReClammParam, reClammParams, tokenConfigs } = usePoolCreationStore();
-
+  const { hasEditedReclammParams } = useUserDataStore();
   const { initialTargetPrice, usdPerTokenInputA, usdPerTokenInputB } = reClammParams;
 
   const { tokenUsdValue: usdPerTokenA } = useTokenUsdValue(tokenConfigs[0].address, "1");
@@ -28,7 +29,7 @@ export function useInitialPricingParams() {
 
   // update initial target price if user has not already set it
   useEffect(() => {
-    if (!initialTargetPrice && Number(usdPerTokenInputA) && Number(usdPerTokenInputB)) {
+    if (!hasEditedReclammParams && Number(usdPerTokenInputA) && Number(usdPerTokenInputB)) {
       const newInitialTargetPrice = Number(usdPerTokenInputA) / Number(usdPerTokenInputB);
 
       updateReClammParam({
@@ -37,5 +38,5 @@ export function useInitialPricingParams() {
         initialMaxPrice: fNumCustom(newInitialTargetPrice * 1.1, "0.[00000]"),
       });
     }
-  }, [updateReClammParam, usdPerTokenInputA, usdPerTokenInputB, initialTargetPrice]);
+  }, [updateReClammParam, usdPerTokenInputA, usdPerTokenInputB, initialTargetPrice, hasEditedReclammParams]);
 }
diff --git a/packages/nextjs/hooks/v3/useUserDataStore.ts b/packages/nextjs/hooks/v3/useUserDataStore.ts
index 6397eb2..39d1637 100644
--- a/packages/nextjs/hooks/v3/useUserDataStore.ts
+++ b/packages/nextjs/hooks/v3/useUserDataStore.ts
@@ -8,6 +8,7 @@ export type UserDataStore = {
   hasEditedPoolSymbol: boolean;
   hasAgreedToWarning: boolean;
   hasEditedEclpParams: boolean;
+  hasEditedReclammParams: boolean;
   isOnlyInitializingPool: boolean;
   updateUserData: (updates: Partial<UserDataStore>) => void;
   clearUserData: () => void;
@@ -19,6 +20,7 @@ export const initialUserDataStore = {
   hasEditedPoolName: false,
   hasEditedPoolSymbol: false,
   hasEditedEclpParams: false,
+  hasEditedReclammParams: false,
   isOnlyInitializingPool: false,
 };
 

From 1a2549bc62958f69c5368729a8bd79a859fa742b Mon Sep 17 00:00:00 2001
From: Matt Pereira <mattpereira.dev@gmail.com>
Date: Thu, 17 Jul 2025 15:10:01 -0700
Subject: [PATCH 10/18] UX to price in terms of underlying

---
 .../ChooseParameters/ReClammParams.tsx        | 34 +++++++++++++++--
 .../ChooseParameters/SwapFeePercentage.tsx    |  1 -
 .../hooks/reclamm/useInitialPricingParams.ts  | 37 +++++++++++++++----
 .../nextjs/hooks/reclamm/useReclammChart.ts   | 16 +++++++-
 packages/nextjs/hooks/v3/useCreatePool.ts     | 11 ++++--
 5 files changed, 82 insertions(+), 17 deletions(-)

diff --git a/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/ReClammParams.tsx b/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/ReClammParams.tsx
index 476cb88..ed8dec9 100644
--- a/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/ReClammParams.tsx
+++ b/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/ReClammParams.tsx
@@ -3,6 +3,7 @@ import ReactECharts from "echarts-for-react";
 import { ArrowTopRightOnSquareIcon, ArrowsRightLeftIcon } from "@heroicons/react/20/solid";
 import { NumberInput, TextField } from "~~/components/common";
 import { useReclAmmChart } from "~~/hooks/reclamm/useReclammChart";
+import { useReadToken } from "~~/hooks/token";
 import { usePoolCreationStore, useUserDataStore } from "~~/hooks/v3";
 
 export const ReClammParams = ({ handleNumberInputChange }: { handleNumberInputChange: HandleNumberInputChange }) => {
@@ -28,6 +29,19 @@ export const ReClammParams = ({ handleNumberInputChange }: { handleNumberInputCh
     return parts.length > 2 ? parts[0] + "." + parts.slice(1).join("") : sanitized;
   };
 
+  let tokenASymbol = tokenConfigs[0].tokenInfo?.symbol;
+  let tokenBSymbol = tokenConfigs[1].tokenInfo?.symbol;
+
+  const { symbol: underlyingTokenASymbol } = useReadToken(tokenConfigs[0].tokenInfo?.underlyingTokenAddress);
+  const { symbol: underlyingTokenBSymbol } = useReadToken(tokenConfigs[1].tokenInfo?.underlyingTokenAddress);
+
+  if (underlyingTokenASymbol) {
+    tokenASymbol = underlyingTokenASymbol;
+  }
+  if (underlyingTokenBSymbol) {
+    tokenBSymbol = underlyingTokenBSymbol;
+  }
+
   return (
     <div className="bg-base-100 p-5 rounded-xl">
       <div className="text-lg font-bold mb-3 inline-flex">
@@ -47,7 +61,7 @@ export const ReClammParams = ({ handleNumberInputChange }: { handleNumberInputCh
       <div className="flex flex-col gap-4">
         <div className="grid grid-cols-2 gap-4">
           <TextField
-            label={`${tokenConfigs[0].tokenInfo?.symbol} / USD`}
+            label={`${tokenASymbol} / USD`}
             value={usdPerTokenInputA}
             isDollarValue={true}
             onChange={e => {
@@ -57,7 +71,7 @@ export const ReClammParams = ({ handleNumberInputChange }: { handleNumberInputCh
             }}
           />
           <TextField
-            label={`${tokenConfigs[1].tokenInfo?.symbol} / USD`}
+            label={`${tokenBSymbol} / USD`}
             value={usdPerTokenInputB}
             isDollarValue={true}
             onChange={e => {
@@ -129,9 +143,17 @@ function ReClammChart() {
 
   const { tokenConfigs, updatePool, updateReClammParam, reClammParams } = usePoolCreationStore();
 
+  // TODO: make re-usable invert function to share with usePoolTypeSpecificParams
   const handleInvertReClammParams = () => {
-    const { initialTargetPrice, initialMinPrice, initialMaxPrice, usdPerTokenInputA, usdPerTokenInputB } =
-      reClammParams;
+    const {
+      initialTargetPrice,
+      initialMinPrice,
+      initialMaxPrice,
+      usdPerTokenInputA,
+      usdPerTokenInputB,
+      tokenAPriceIncludesRate,
+      tokenBPriceIncludesRate,
+    } = reClammParams;
 
     updateReClammParam({
       initialTargetPrice: (1 / Number(initialTargetPrice)).toString(),
@@ -139,10 +161,14 @@ function ReClammChart() {
       initialMaxPrice: (1 / Number(initialMinPrice)).toString(),
       usdPerTokenInputA: usdPerTokenInputB,
       usdPerTokenInputB: usdPerTokenInputA,
+      tokenAPriceIncludesRate: tokenBPriceIncludesRate,
+      tokenBPriceIncludesRate: tokenAPriceIncludesRate,
     });
     updatePool({ tokenConfigs: [...tokenConfigs].reverse() });
   };
 
+  console.log("reClammParams", reClammParams);
+
   return (
     <div className="bg-base-300 rounded-lg relative">
       <div className="bg-base-200 w-full h-72 rounded-xl mb-4">
diff --git a/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/SwapFeePercentage.tsx b/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/SwapFeePercentage.tsx
index 5d827f2..ef5db8e 100644
--- a/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/SwapFeePercentage.tsx
+++ b/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/SwapFeePercentage.tsx
@@ -12,7 +12,6 @@ export function SwapFeePercentage({ handleNumberInputChange }: { handleNumberInp
 
   let minSwapFeePercentage = 0.001; // Weighted & GyroECLP
   if (poolType === PoolType.Stable || poolType === PoolType.StableSurge) minSwapFeePercentage = 0.0001;
-  if (poolType === PoolType.ReClamm) minSwapFeePercentage = 0.1;
 
   return (
     <div className="bg-base-100 p-5 rounded-xl">
diff --git a/packages/nextjs/hooks/reclamm/useInitialPricingParams.ts b/packages/nextjs/hooks/reclamm/useInitialPricingParams.ts
index d75b6fb..235baa9 100644
--- a/packages/nextjs/hooks/reclamm/useInitialPricingParams.ts
+++ b/packages/nextjs/hooks/reclamm/useInitialPricingParams.ts
@@ -1,6 +1,7 @@
 import { useEffect } from "react";
+import { formatUnits } from "viem";
 import { useTokenUsdValue } from "~~/hooks/token";
-import { usePoolCreationStore } from "~~/hooks/v3";
+import { useFetchTokenRate, usePoolCreationStore } from "~~/hooks/v3";
 import { useUserDataStore } from "~~/hooks/v3";
 import { fNumCustom } from "~~/utils/numbers";
 
@@ -14,20 +15,42 @@ export function useInitialPricingParams() {
   const { hasEditedReclammParams } = useUserDataStore();
   const { initialTargetPrice, usdPerTokenInputA, usdPerTokenInputB } = reClammParams;
 
+  console.log("tokenConfigs", tokenConfigs);
+
   const { tokenUsdValue: usdPerTokenA } = useTokenUsdValue(tokenConfigs[0].address, "1");
   const { tokenUsdValue: usdPerTokenB } = useTokenUsdValue(tokenConfigs[1].address, "1");
 
+  const { data: currentRateTokenA } = useFetchTokenRate(tokenConfigs[0].rateProvider);
+  const { data: currentRateTokenB } = useFetchTokenRate(tokenConfigs[1].rateProvider);
+
+  useEffect(() => {
+    if (currentRateTokenA) {
+      updateReClammParam({ tokenAPriceIncludesRate: true });
+    }
+    if (currentRateTokenB) {
+      updateReClammParam({ tokenBPriceIncludesRate: true });
+    }
+  }, [currentRateTokenA, currentRateTokenB, updateReClammParam]);
+
+  const valueTokenA = usdPerTokenInputA ? Number(usdPerTokenInputA) : usdPerTokenA ? usdPerTokenA : null;
+  const valueTokenB = usdPerTokenInputB ? Number(usdPerTokenInputB) : usdPerTokenB ? usdPerTokenB : null;
+
+  const adjustedUsdPerTokenA =
+    currentRateTokenA && valueTokenA ? valueTokenA / Number(formatUnits(currentRateTokenA, 18)) : valueTokenA;
+  const adjustedUsdPerTokenB =
+    currentRateTokenB && valueTokenB ? valueTokenB / Number(formatUnits(currentRateTokenB, 18)) : valueTokenB;
+
   // update usd per token inputs if API data available and user has not already set them
   useEffect(() => {
-    if (usdPerTokenA && !usdPerTokenInputA) {
-      updateReClammParam({ usdPerTokenInputA: usdPerTokenA.toString() });
+    if (adjustedUsdPerTokenA && !usdPerTokenInputA) {
+      updateReClammParam({ usdPerTokenInputA: adjustedUsdPerTokenA.toString() });
     }
-    if (usdPerTokenB && !usdPerTokenInputB) {
-      updateReClammParam({ usdPerTokenInputB: usdPerTokenB.toString() });
+    if (adjustedUsdPerTokenB && !usdPerTokenInputB) {
+      updateReClammParam({ usdPerTokenInputB: adjustedUsdPerTokenB.toString() });
     }
-  }, [usdPerTokenA, usdPerTokenB, usdPerTokenInputA, usdPerTokenInputB, updateReClammParam]);
+  }, [adjustedUsdPerTokenA, adjustedUsdPerTokenB, usdPerTokenInputA, usdPerTokenInputB, updateReClammParam]);
 
-  // update initial target price if user has not already set it
+  // update initial price params if user has not dirtied them
   useEffect(() => {
     if (!hasEditedReclammParams && Number(usdPerTokenInputA) && Number(usdPerTokenInputB)) {
       const newInitialTargetPrice = Number(usdPerTokenInputA) / Number(usdPerTokenInputB);
diff --git a/packages/nextjs/hooks/reclamm/useReclammChart.ts b/packages/nextjs/hooks/reclamm/useReclammChart.ts
index 5e48bc3..7c04ca6 100644
--- a/packages/nextjs/hooks/reclamm/useReclammChart.ts
+++ b/packages/nextjs/hooks/reclamm/useReclammChart.ts
@@ -7,6 +7,7 @@ import {
   computeCenteredness,
 } from "./reClammMath";
 import { useInitialPricingParams } from "./useInitialPricingParams";
+import { useReadToken } from "~~/hooks/token";
 import { bn, fNum } from "~~/utils/numbers";
 
 function getGradientColor(colorStops: string[]) {
@@ -32,11 +33,22 @@ export function useReclAmmChart() {
 
   const { tokenConfigs } = usePoolCreationStore();
 
+  const { symbol: underlyingTokenASymbol } = useReadToken(tokenConfigs[0].tokenInfo?.underlyingTokenAddress);
+  const { symbol: underlyingTokenBSymbol } = useReadToken(tokenConfigs[1].tokenInfo?.underlyingTokenAddress);
+
   const tokens = useMemo(() => {
-    const tokenSymbols = tokenConfigs.map(token => token.tokenInfo?.symbol);
+    const tokenSymbols = tokenConfigs.map((token, idx) => {
+      if (idx === 0 && underlyingTokenASymbol) {
+        return underlyingTokenASymbol;
+      }
+      if (idx === 1 && underlyingTokenBSymbol) {
+        return underlyingTokenBSymbol;
+      }
+      return token.tokenInfo?.symbol;
+    });
 
     return tokenSymbols.join(" / ");
-  }, [tokenConfigs]);
+  }, [tokenConfigs, underlyingTokenASymbol, underlyingTokenBSymbol]);
 
   const { reClammParams } = usePoolCreationStore();
   const {
diff --git a/packages/nextjs/hooks/v3/useCreatePool.ts b/packages/nextjs/hooks/v3/useCreatePool.ts
index 01c2e4e..b8eb738 100644
--- a/packages/nextjs/hooks/v3/useCreatePool.ts
+++ b/packages/nextjs/hooks/v3/useCreatePool.ts
@@ -175,19 +175,24 @@ function usePoolTypeSpecificParams() {
 
   if (isReClamm) {
     // if tokenConfigs "out of order", invert the min max and target price
-    // TODO: account for if user is using boosted variant which means address will be underling so gotta look at other addy
+    // TODO: account for if user is using boosted variant which means address will be underling so gotta look at other addy?
     const isTokenConfigsInOrder = tokenConfigs[0].address.toLowerCase() < tokenConfigs[1].address.toLowerCase();
 
     const { initialMinPrice, initialMaxPrice, initialTargetPrice } = reClammParams;
 
+    // TODO: make re-usable invert function to share with handleInvertReClammParams
     let minPrice = Number(initialMinPrice);
     let maxPrice = Number(initialMaxPrice);
     let targetPrice = Number(initialTargetPrice);
+    let tokenAPriceIncludesRate = reClammParams.tokenAPriceIncludesRate;
+    let tokenBPriceIncludesRate = reClammParams.tokenBPriceIncludesRate;
 
     if (!isTokenConfigsInOrder) {
       minPrice = 1 / Number(initialMaxPrice);
       maxPrice = 1 / Number(initialMinPrice);
       targetPrice = 1 / Number(initialTargetPrice);
+      tokenAPriceIncludesRate = reClammParams.tokenBPriceIncludesRate;
+      tokenBPriceIncludesRate = reClammParams.tokenAPriceIncludesRate;
     }
 
     return {
@@ -195,8 +200,8 @@ function usePoolTypeSpecificParams() {
         initialMinPrice: parseUnits(minPrice.toString(), 18),
         initialMaxPrice: parseUnits(maxPrice.toString(), 18),
         initialTargetPrice: parseUnits(targetPrice.toString(), 18),
-        tokenAPriceIncludesRate: reClammParams.tokenAPriceIncludesRate,
-        tokenBPriceIncludesRate: reClammParams.tokenBPriceIncludesRate,
+        tokenAPriceIncludesRate,
+        tokenBPriceIncludesRate,
       },
       priceShiftDailyRate: parseUnits(reClammParams.dailyPriceShiftExponent, 16), // SDK kept OG var name but on chain is same as creation ui
       centerednessMargin: parseUnits(reClammParams.centerednessMargin, 16), // Charting UX based on pool math simulator setup allows 0 - 100% but on chain is 0 - 50%

From b31489e2a76f58c7d44b6193fd056ae18ee596db Mon Sep 17 00:00:00 2001
From: Matt Pereira <mattpereira.dev@gmail.com>
Date: Mon, 21 Jul 2025 15:29:59 -0700
Subject: [PATCH 11/18] update to latest SDK w/ reclamm factory v2 addresses

---
 .../hooks/reclamm/useInitialPricingParams.ts  | 11 +++++--
 packages/nextjs/hooks/v3/useCreatePool.ts     | 29 +++++--------------
 packages/nextjs/package.json                  |  2 +-
 yarn.lock                                     | 10 +++----
 4 files changed, 21 insertions(+), 31 deletions(-)

diff --git a/packages/nextjs/hooks/reclamm/useInitialPricingParams.ts b/packages/nextjs/hooks/reclamm/useInitialPricingParams.ts
index 235baa9..c9215df 100644
--- a/packages/nextjs/hooks/reclamm/useInitialPricingParams.ts
+++ b/packages/nextjs/hooks/reclamm/useInitialPricingParams.ts
@@ -56,10 +56,15 @@ export function useInitialPricingParams() {
       const newInitialTargetPrice = Number(usdPerTokenInputA) / Number(usdPerTokenInputB);
 
       updateReClammParam({
-        initialTargetPrice: fNumCustom(newInitialTargetPrice, "0.[00000]"),
-        initialMinPrice: fNumCustom(newInitialTargetPrice * 0.9, "0.[00000]"),
-        initialMaxPrice: fNumCustom(newInitialTargetPrice * 1.1, "0.[00000]"),
+        initialTargetPrice: formatPriceParam(newInitialTargetPrice),
+        initialMinPrice: formatPriceParam(newInitialTargetPrice * 0.9),
+        initialMaxPrice: formatPriceParam(newInitialTargetPrice * 1.1),
       });
     }
   }, [updateReClammParam, usdPerTokenInputA, usdPerTokenInputB, initialTargetPrice, hasEditedReclammParams]);
 }
+
+function formatPriceParam(price: number) {
+  const decimals = price > 1 ? "0.[00000]" : "0.[0000000000]";
+  return fNumCustom(price, decimals);
+}
diff --git a/packages/nextjs/hooks/v3/useCreatePool.ts b/packages/nextjs/hooks/v3/useCreatePool.ts
index d94b142..e1f55e1 100644
--- a/packages/nextjs/hooks/v3/useCreatePool.ts
+++ b/packages/nextjs/hooks/v3/useCreatePool.ts
@@ -1,5 +1,4 @@
 import {
-  ChainId,
   CreatePool,
   CreatePoolGyroECLPInput,
   CreatePoolReClammInput,
@@ -111,19 +110,17 @@ export const useCreatePool = () => {
     const input = createPoolInput();
     const call = createPool.buildCall(input);
 
-    // TODO: remove this and use call.to again after SDK update is released
-    const isReClamm = input.poolType === PoolType.ReClamm;
-    const to = isReClamm ? ReClammPoolFactory[input.chainId as keyof typeof ReClammPoolFactory] : call.to;
-
-    // why is esimateGas reverting only on hyperliquid?
     const estimatedGas = await publicClient.estimateGas({
       account: walletClient.account,
-      to,
+      to: call.to,
       data: call.callData,
     });
 
-    const gas = isHyperEvm ? BigInt(estimatedGas) * 2n : undefined; // required to double the gas?
-    const gasPrice = isHyperEvm && bigBlockGasPrice ? bigBlockGasPrice : undefined; // big block gas price higher than smol block gas price
+    // hyperEVM big blocks require more gas?
+    // https://github.com/zekraken-bot/HyperEVM/blob/1a1a4468f0029ae9d80f846bf401ef1e219f1b63/stable_deploy_hyper.py#L132-L163
+    const gas = isHyperEvm ? BigInt(estimatedGas) * 2n : undefined;
+    // big block gas price higher than smol block gas price
+    const gasPrice = isHyperEvm && bigBlockGasPrice ? bigBlockGasPrice : undefined;
 
     const hash = await writeTx(
       () =>
@@ -132,7 +129,7 @@ export const useCreatePool = () => {
           data: call.callData,
           gas,
           gasPrice,
-          to,
+          to: call.to,
         }),
       {
         // callbacks to save tx hash's to store
@@ -215,15 +212,3 @@ function usePoolTypeSpecificParams() {
 
   return {};
 }
-
-const ReClammPoolFactory: Partial<Record<ChainId, `0x${string}`>> = {
-  [ChainId.ARBITRUM_ONE]: "0x355bD33F0033066BB3DE396a6d069be57353AD95",
-  [ChainId.AVALANCHE]: "0x309abcAeFa19CA6d34f0D8ff4a4103317c138657",
-  [ChainId.BASE]: "0x201efd508c8DfE9DE1a13c2452863A78CB2a86Cc",
-  [ChainId.GNOSIS_CHAIN]: "0xc86eF81E57492BE65BFCa9b0Ed53dCBAfDBe6100",
-  [ChainId.HYPER_EVM]: "0x4BB42f71CAB7Bd13e9f958dA4351B9fa2d3A42FF",
-  [ChainId.MAINNET]: "0xDaa273AeEc06e9CCb7428a77E2abb1E4659B16D2",
-  [ChainId.OPTIMISM]: "0x891EC9B34829276a9a8ef2F8A9cEAF2486017e0d",
-  [ChainId.SEPOLIA]: "0xf58A574530Ea5cEB727095e6039170c1e8068fcA",
-  [ChainId.SONIC]: "0x99c13B259138a8ad8badbBfB87A4074591310De0",
-};
diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json
index 0840916..cbd5b7b 100644
--- a/packages/nextjs/package.json
+++ b/packages/nextjs/package.json
@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@balancer-labs/balancer-maths": "^0.0.25",
-    "@balancer/sdk": "4.4.0",
+    "@balancer/sdk": "4.5.0",
     "@heroicons/react": "^2.0.11",
     "@nktkas/hyperliquid": "^0.23.1",
     "@rainbow-me/rainbowkit": "2.1.2",
diff --git a/yarn.lock b/yarn.lock
index 84a6515..166ba29 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -300,16 +300,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@balancer/sdk@npm:4.4.0":
-  version: 4.4.0
-  resolution: "@balancer/sdk@npm:4.4.0"
+"@balancer/sdk@npm:4.5.0":
+  version: 4.5.0
+  resolution: "@balancer/sdk@npm:4.5.0"
   dependencies:
     "@balancer-labs/balancer-maths": 0.0.27
     "@types/big.js": 6.2.2
     big.js: 6.2.2
     decimal.js-light: 2.5.1
     viem: 2.27.0
-  checksum: 0cc3d4cd67c225d5f1cbbe72398976d921d59e52462d27933a7eb76c02fbc11f62c8efd17321ce81c0571c880359c6178f4c14b23b6cbd0467ad36b0fd90e639
+  checksum: a21992cf41bc7fb317c608d67c4cbcd5abfaa0f41e77d542fadae27812fd08abfe31705f450ca5fce8d6aa204c887cb8a020d9a3a0423d9fe361f71d486cb2f1
   languageName: node
   linkType: hard
 
@@ -1732,7 +1732,7 @@ __metadata:
   resolution: "@se-2/nextjs@workspace:packages/nextjs"
   dependencies:
     "@balancer-labs/balancer-maths": ^0.0.25
-    "@balancer/sdk": 4.4.0
+    "@balancer/sdk": 4.5.0
     "@heroicons/react": ^2.0.11
     "@nktkas/hyperliquid": ^0.23.1
     "@rainbow-me/rainbowkit": 2.1.2

From b6d9640fa177ac441720dd8f0633a6894a959897 Mon Sep 17 00:00:00 2001
From: Matt Pereira <mattpereira.dev@gmail.com>
Date: Mon, 28 Jul 2025 17:07:20 -0700
Subject: [PATCH 12/18] toggle if token price includes rate

---
 .../ChooseParameters/ReClammParams.tsx        | 137 +++++++++++++-----
 .../app/v3/_components/PoolCreation/index.tsx |   1 -
 .../hooks/reclamm/useInitialPricingParams.ts  |  30 ++--
 .../nextjs/hooks/reclamm/useReclammChart.ts   |  56 +++----
 packages/nextjs/hooks/v3/useCreatePool.ts     |   1 +
 5 files changed, 141 insertions(+), 84 deletions(-)

diff --git a/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/ReClammParams.tsx b/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/ReClammParams.tsx
index ed8dec9..1bd0a09 100644
--- a/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/ReClammParams.tsx
+++ b/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/ReClammParams.tsx
@@ -1,10 +1,11 @@
 import { type HandleNumberInputChange } from "./types";
 import ReactECharts from "echarts-for-react";
+import { formatUnits } from "viem";
 import { ArrowTopRightOnSquareIcon, ArrowsRightLeftIcon } from "@heroicons/react/20/solid";
 import { NumberInput, TextField } from "~~/components/common";
 import { useReclAmmChart } from "~~/hooks/reclamm/useReclammChart";
-import { useReadToken } from "~~/hooks/token";
-import { usePoolCreationStore, useUserDataStore } from "~~/hooks/v3";
+import { useTokenUsdValue } from "~~/hooks/token";
+import { useFetchTokenRate, usePoolCreationStore, useUserDataStore } from "~~/hooks/v3";
 
 export const ReClammParams = ({ handleNumberInputChange }: { handleNumberInputChange: HandleNumberInputChange }) => {
   const { reClammParams, updateReClammParam, tokenConfigs } = usePoolCreationStore();
@@ -19,8 +20,15 @@ export const ReClammParams = ({ handleNumberInputChange }: { handleNumberInputCh
     // initialBalanceA,
     usdPerTokenInputA,
     usdPerTokenInputB,
+    tokenAPriceIncludesRate,
+    tokenBPriceIncludesRate,
   } = reClammParams;
 
+  const { data: currentRateTokenA } = useFetchTokenRate(tokenConfigs[0].rateProvider);
+  const { data: currentRateTokenB } = useFetchTokenRate(tokenConfigs[1].rateProvider);
+  const { tokenUsdValue: usdPerTokenA } = useTokenUsdValue(tokenConfigs[0].address, "1");
+  const { tokenUsdValue: usdPerTokenB } = useTokenUsdValue(tokenConfigs[1].address, "1");
+
   const sanitizeNumberInput = (input: string) => {
     // Remove non-numeric characters except decimal point
     const sanitized = input.replace(/[^0-9.]/g, "");
@@ -29,19 +37,6 @@ export const ReClammParams = ({ handleNumberInputChange }: { handleNumberInputCh
     return parts.length > 2 ? parts[0] + "." + parts.slice(1).join("") : sanitized;
   };
 
-  let tokenASymbol = tokenConfigs[0].tokenInfo?.symbol;
-  let tokenBSymbol = tokenConfigs[1].tokenInfo?.symbol;
-
-  const { symbol: underlyingTokenASymbol } = useReadToken(tokenConfigs[0].tokenInfo?.underlyingTokenAddress);
-  const { symbol: underlyingTokenBSymbol } = useReadToken(tokenConfigs[1].tokenInfo?.underlyingTokenAddress);
-
-  if (underlyingTokenASymbol) {
-    tokenASymbol = underlyingTokenASymbol;
-  }
-  if (underlyingTokenBSymbol) {
-    tokenBSymbol = underlyingTokenBSymbol;
-  }
-
   return (
     <div className="bg-base-100 p-5 rounded-xl">
       <div className="text-lg font-bold mb-3 inline-flex">
@@ -60,26 +55,66 @@ export const ReClammParams = ({ handleNumberInputChange }: { handleNumberInputCh
 
       <div className="flex flex-col gap-4">
         <div className="grid grid-cols-2 gap-4">
-          <TextField
-            label={`${tokenASymbol} / USD`}
-            value={usdPerTokenInputA}
-            isDollarValue={true}
-            onChange={e => {
-              updateReClammParam({ usdPerTokenInputA: sanitizeNumberInput(e.target.value) });
-              // if user changes usd price per token, this triggers useInitialPricingParams hook to move price params to surround new "current price" of pool
-              if (usdPerTokenInputA !== e.target.value) updateUserData({ hasEditedReclammParams: false });
-            }}
-          />
-          <TextField
-            label={`${tokenBSymbol} / USD`}
-            value={usdPerTokenInputB}
-            isDollarValue={true}
-            onChange={e => {
-              updateReClammParam({ usdPerTokenInputB: sanitizeNumberInput(e.target.value) });
-              // if user changes usd price per token, this triggers useInitialPricingParams hook to move price params to surround new "current price" of pool
-              if (usdPerTokenInputB !== e.target.value) updateUserData({ hasEditedReclammParams: false });
-            }}
-          />
+          <div className="relative">
+            <TextField
+              label={`${tokenConfigs[0].tokenInfo?.symbol}`}
+              value={usdPerTokenInputA}
+              isDollarValue={true}
+              onChange={e => {
+                updateReClammParam({ usdPerTokenInputA: sanitizeNumberInput(e.target.value) });
+                // if user changes usd price per token, this triggers useInitialPricingParams hook to move price params to surround new "current price" of pool
+                if (usdPerTokenInputA !== e.target.value) updateUserData({ hasEditedReclammParams: false });
+              }}
+            />
+            {!!currentRateTokenA && (
+              <TogglePriceIncludesRate
+                tokenPriceIncludesRate={tokenAPriceIncludesRate}
+                onChange={() => {
+                  const updatedTokenAPriceIncludesRate = !tokenAPriceIncludesRate;
+                  const updatedUsdPerTokenA = usdPerTokenA
+                    ? updatedTokenAPriceIncludesRate
+                      ? (usdPerTokenA / Number(formatUnits(currentRateTokenA, 18))).toString()
+                      : usdPerTokenA.toString()
+                    : usdPerTokenInputA;
+
+                  updateReClammParam({
+                    tokenAPriceIncludesRate: updatedTokenAPriceIncludesRate,
+                    usdPerTokenInputA: updatedUsdPerTokenA,
+                  });
+                }}
+              />
+            )}
+          </div>
+          <div className="relative">
+            <TextField
+              label={`${tokenConfigs[1].tokenInfo?.symbol}`}
+              value={usdPerTokenInputB}
+              isDollarValue={true}
+              onChange={e => {
+                updateReClammParam({ usdPerTokenInputB: sanitizeNumberInput(e.target.value) });
+                // if user changes usd price per token, this triggers useInitialPricingParams hook to move price params to surround new "current price" of pool
+                if (usdPerTokenInputB !== e.target.value) updateUserData({ hasEditedReclammParams: false });
+              }}
+            />
+            {!!currentRateTokenB && (
+              <TogglePriceIncludesRate
+                tokenPriceIncludesRate={tokenBPriceIncludesRate}
+                onChange={() => {
+                  const updatedTokenBPriceIncludesRate = !tokenBPriceIncludesRate;
+                  const updatedUsdPerTokenB = usdPerTokenB
+                    ? updatedTokenBPriceIncludesRate
+                      ? (usdPerTokenB / Number(formatUnits(currentRateTokenB, 18))).toString()
+                      : usdPerTokenB.toString()
+                    : usdPerTokenInputB;
+
+                  updateReClammParam({
+                    tokenBPriceIncludesRate: updatedTokenBPriceIncludesRate,
+                    usdPerTokenInputB: updatedUsdPerTokenB,
+                  });
+                }}
+              />
+            )}
+          </div>
         </div>
 
         <div className="grid grid-cols-3 gap-4">
@@ -167,14 +202,12 @@ function ReClammChart() {
     updatePool({ tokenConfigs: [...tokenConfigs].reverse() });
   };
 
-  console.log("reClammParams", reClammParams);
-
   return (
-    <div className="bg-base-300 rounded-lg relative">
+    <div className="bg-base-300 rounded-xl relative">
       <div className="bg-base-200 w-full h-72 rounded-xl mb-4">
         <ReactECharts option={options} style={{ height: "100%", width: "100%" }} />
         <div
-          className="btn btn-sm rounded-lg absolute bottom-3 right-3 btn-primary px-2 py-0.5 text-neutral-700 bg-gradient-to-r from-violet-300 via-violet-200 to-orange-300  [box-shadow:0_0_10px_5px_rgba(139,92,246,0.5)] border-none"
+          className="btn btn-sm rounded-lg absolute top-2 right-3 btn-primary px-2 py-0.5 text-neutral-700 bg-gradient-to-r from-violet-300 via-violet-200 to-orange-300  [box-shadow:0_0_10px_5px_rgba(139,92,246,0.5)] border-none"
           onClick={handleInvertReClammParams}
         >
           <ArrowsRightLeftIcon className="w-[15px] h-[15px]" />
@@ -183,3 +216,29 @@ function ReClammChart() {
     </div>
   );
 }
+
+function TogglePriceIncludesRate({
+  tokenPriceIncludesRate,
+  onChange,
+}: {
+  tokenPriceIncludesRate: boolean;
+  onChange: () => void;
+}) {
+  return (
+    <div className="absolute -top-2 right-0">
+      <fieldset className="fieldset ">
+        <label className="label cursor-pointer gap-2">
+          <span className={`label-text ${tokenPriceIncludesRate ? "text-success" : "text-stone-400"}`}>
+            {tokenPriceIncludesRate ? "price includes rate" : "price without rate"}
+          </span>
+          <input
+            type="checkbox"
+            checked={tokenPriceIncludesRate}
+            onChange={onChange}
+            className={`toggle toggle-sm ${tokenPriceIncludesRate ? "toggle-success" : "toggle-error"}`}
+          />
+        </label>
+      </fieldset>
+    </div>
+  );
+}
diff --git a/packages/nextjs/app/v3/_components/PoolCreation/index.tsx b/packages/nextjs/app/v3/_components/PoolCreation/index.tsx
index e04afb6..e762231 100644
--- a/packages/nextjs/app/v3/_components/PoolCreation/index.tsx
+++ b/packages/nextjs/app/v3/_components/PoolCreation/index.tsx
@@ -134,7 +134,6 @@ export function PoolCreation({ setIsModalOpen }: { setIsModalOpen: (isOpen: bool
   const isHyperEvm = useIsHyperEvm();
   const { data: isUsingBigBlocks } = useIsUsingBigBlocks();
 
-  console.log("isUsingBigBlocks", isUsingBigBlocks);
   const useBigBlocksStep = {
     component: (
       <div className="flex flex-col gap-3">
diff --git a/packages/nextjs/hooks/reclamm/useInitialPricingParams.ts b/packages/nextjs/hooks/reclamm/useInitialPricingParams.ts
index c9215df..f26ce4d 100644
--- a/packages/nextjs/hooks/reclamm/useInitialPricingParams.ts
+++ b/packages/nextjs/hooks/reclamm/useInitialPricingParams.ts
@@ -13,9 +13,8 @@ import { fNumCustom } from "~~/utils/numbers";
 export function useInitialPricingParams() {
   const { updateReClammParam, reClammParams, tokenConfigs } = usePoolCreationStore();
   const { hasEditedReclammParams } = useUserDataStore();
-  const { initialTargetPrice, usdPerTokenInputA, usdPerTokenInputB } = reClammParams;
-
-  console.log("tokenConfigs", tokenConfigs);
+  const { initialTargetPrice, usdPerTokenInputA, usdPerTokenInputB, tokenAPriceIncludesRate, tokenBPriceIncludesRate } =
+    reClammParams;
 
   const { tokenUsdValue: usdPerTokenA } = useTokenUsdValue(tokenConfigs[0].address, "1");
   const { tokenUsdValue: usdPerTokenB } = useTokenUsdValue(tokenConfigs[1].address, "1");
@@ -35,20 +34,31 @@ export function useInitialPricingParams() {
   const valueTokenA = usdPerTokenInputA ? Number(usdPerTokenInputA) : usdPerTokenA ? usdPerTokenA : null;
   const valueTokenB = usdPerTokenInputB ? Number(usdPerTokenInputB) : usdPerTokenB ? usdPerTokenB : null;
 
-  const adjustedUsdPerTokenA =
+  const initialUsdPerTokenA =
     currentRateTokenA && valueTokenA ? valueTokenA / Number(formatUnits(currentRateTokenA, 18)) : valueTokenA;
-  const adjustedUsdPerTokenB =
+  const initialUsdPerTokenB =
     currentRateTokenB && valueTokenB ? valueTokenB / Number(formatUnits(currentRateTokenB, 18)) : valueTokenB;
 
   // update usd per token inputs if API data available and user has not already set them
   useEffect(() => {
-    if (adjustedUsdPerTokenA && !usdPerTokenInputA) {
-      updateReClammParam({ usdPerTokenInputA: adjustedUsdPerTokenA.toString() });
+    if (!usdPerTokenInputA && initialUsdPerTokenA) {
+      updateReClammParam({ usdPerTokenInputA: initialUsdPerTokenA.toString() });
     }
-    if (adjustedUsdPerTokenB && !usdPerTokenInputB) {
-      updateReClammParam({ usdPerTokenInputB: adjustedUsdPerTokenB.toString() });
+
+    if (!usdPerTokenInputB && initialUsdPerTokenB) {
+      updateReClammParam({ usdPerTokenInputB: initialUsdPerTokenB.toString() });
     }
-  }, [adjustedUsdPerTokenA, adjustedUsdPerTokenB, usdPerTokenInputA, usdPerTokenInputB, updateReClammParam]);
+  }, [
+    initialUsdPerTokenA,
+    initialUsdPerTokenB,
+    usdPerTokenInputA,
+    usdPerTokenInputB,
+    updateReClammParam,
+    valueTokenA,
+    valueTokenB,
+    tokenAPriceIncludesRate,
+    tokenBPriceIncludesRate,
+  ]);
 
   // update initial price params if user has not dirtied them
   useEffect(() => {
diff --git a/packages/nextjs/hooks/reclamm/useReclammChart.ts b/packages/nextjs/hooks/reclamm/useReclammChart.ts
index 7c04ca6..128b82e 100644
--- a/packages/nextjs/hooks/reclamm/useReclammChart.ts
+++ b/packages/nextjs/hooks/reclamm/useReclammChart.ts
@@ -7,7 +7,6 @@ import {
   computeCenteredness,
 } from "./reClammMath";
 import { useInitialPricingParams } from "./useInitialPricingParams";
-import { useReadToken } from "~~/hooks/token";
 import { bn, fNum } from "~~/utils/numbers";
 
 function getGradientColor(colorStops: string[]) {
@@ -31,26 +30,7 @@ const ORANGE = "rgb(253, 186, 116)";
 export function useReclAmmChart() {
   useInitialPricingParams();
 
-  const { tokenConfigs } = usePoolCreationStore();
-
-  const { symbol: underlyingTokenASymbol } = useReadToken(tokenConfigs[0].tokenInfo?.underlyingTokenAddress);
-  const { symbol: underlyingTokenBSymbol } = useReadToken(tokenConfigs[1].tokenInfo?.underlyingTokenAddress);
-
-  const tokens = useMemo(() => {
-    const tokenSymbols = tokenConfigs.map((token, idx) => {
-      if (idx === 0 && underlyingTokenASymbol) {
-        return underlyingTokenASymbol;
-      }
-      if (idx === 1 && underlyingTokenBSymbol) {
-        return underlyingTokenBSymbol;
-      }
-      return token.tokenInfo?.symbol;
-    });
-
-    return tokenSymbols.join(" / ");
-  }, [tokenConfigs, underlyingTokenASymbol, underlyingTokenBSymbol]);
-
-  const { reClammParams } = usePoolCreationStore();
+  const { tokenConfigs, reClammParams } = usePoolCreationStore();
   const {
     centerednessMargin,
     initialBalanceA,
@@ -61,6 +41,11 @@ export function useReclAmmChart() {
     usdPerTokenInputB,
   } = reClammParams;
 
+  const tokens = useMemo(() => {
+    const tokenSymbols = tokenConfigs.map(token => token.tokenInfo?.symbol);
+    return tokenSymbols.join(" / ");
+  }, [tokenConfigs]);
+
   const currentChartData = useMemo(() => {
     // TODO: review validation logic for reclamm params
     if (
@@ -184,8 +169,8 @@ export function useReclAmmChart() {
     const totalBars = 2 * baseGreyBarCount + 2 * baseOrangeBarCount + baseGreenBarCount;
 
     // for some reason the number of orange (or green) bars matters to echarts in the grid
-    const gridBottomDesktop = baseOrangeBarCount % 2 === 0 ? "32%" : "15%";
-    const gridBottomMobile = baseOrangeBarCount % 2 === 0 && !(showMinMaxValues && !showTargetValues) ? "30%" : "22%";
+    const gridTopDesktop = baseOrangeBarCount % 2 === 0 ? "35%" : "35%";
+    const gridTopMobile = baseOrangeBarCount % 2 === 0 && !(showMinMaxValues && !showTargetValues) ? "30%" : "22%";
 
     const baseGreyBarConfig = {
       count: baseGreyBarCount,
@@ -316,11 +301,23 @@ export function useReclAmmChart() {
 
     return {
       tooltip: { show: false },
+      title: {
+        text: `${tokens}`,
+        textAlign: "left",
+        textVerticalAlign: "top",
+        textStyle: {
+          color: "#A0AEC0",
+          fontSize: 14,
+          fontWeight: "normal",
+        },
+        right: "9%",
+        top: "5%",
+      },
       grid: {
         left: isMobile ? "-7%" : "-3%",
         right: "1%",
-        top: isMobile ? "80px" : "25%",
-        bottom: isMobile ? gridBottomMobile : gridBottomDesktop,
+        top: isMobile ? gridTopMobile : gridTopDesktop,
+        bottom: "5%",
         containLabel: true,
       },
       xAxis: {
@@ -391,15 +388,6 @@ export function useReclAmmChart() {
             },
           },
         },
-        name: `Price: ${tokens}`,
-        nameLocation: "end",
-        nameGap: 5,
-        nameTextStyle: {
-          align: "right",
-          verticalAlign: "bottom",
-          padding: showMinMaxValues && !showTargetValues ? [0, 50, -85, 0] : [0, 50, -80, 0],
-          color: "#A0AEC0",
-        },
       },
       yAxis: {
         show: false,
diff --git a/packages/nextjs/hooks/v3/useCreatePool.ts b/packages/nextjs/hooks/v3/useCreatePool.ts
index e1f55e1..35b86ab 100644
--- a/packages/nextjs/hooks/v3/useCreatePool.ts
+++ b/packages/nextjs/hooks/v3/useCreatePool.ts
@@ -108,6 +108,7 @@ export const useCreatePool = () => {
 
     const createPool = new CreatePool();
     const input = createPoolInput();
+    console.log("create pool input:", input);
     const call = createPool.buildCall(input);
 
     const estimatedGas = await publicClient.estimateGas({

From 36ddaa0d9311c4ec96a5df1d1db5136c6ce6f556 Mon Sep 17 00:00:00 2001
From: Matt Pereira <mattpereira.dev@gmail.com>
Date: Wed, 30 Jul 2025 11:26:08 -0700
Subject: [PATCH 13/18] force tokenPriceIncludesRate to be false

---
 .../ChooseParameters/ReClammParams.tsx        | 118 +++++++++++-------
 .../ChooseParameters/index.tsx                |   2 +-
 .../nextjs/components/common/TextField.tsx    |   7 +-
 .../nextjs/hooks/reclamm/useReclammChart.ts   |   8 +-
 packages/nextjs/hooks/v3/useCreatePool.ts     |   8 +-
 .../hooks/v3/useValidateCreationInputs.ts     |  10 +-
 6 files changed, 96 insertions(+), 57 deletions(-)

diff --git a/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/ReClammParams.tsx b/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/ReClammParams.tsx
index 1bd0a09..75c0dce 100644
--- a/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/ReClammParams.tsx
+++ b/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/ReClammParams.tsx
@@ -1,13 +1,13 @@
-import { type HandleNumberInputChange } from "./types";
 import ReactECharts from "echarts-for-react";
 import { formatUnits } from "viem";
 import { ArrowTopRightOnSquareIcon, ArrowsRightLeftIcon } from "@heroicons/react/20/solid";
+import { InformationCircleIcon } from "@heroicons/react/24/outline";
 import { NumberInput, TextField } from "~~/components/common";
 import { useReclAmmChart } from "~~/hooks/reclamm/useReclammChart";
-import { useTokenUsdValue } from "~~/hooks/token";
+// import { useTokenUsdValue } from "~~/hooks/token";
 import { useFetchTokenRate, usePoolCreationStore, useUserDataStore } from "~~/hooks/v3";
 
-export const ReClammParams = ({ handleNumberInputChange }: { handleNumberInputChange: HandleNumberInputChange }) => {
+export const ReClammParams = () => {
   const { reClammParams, updateReClammParam, tokenConfigs } = usePoolCreationStore();
 
   const { updateUserData } = useUserDataStore();
@@ -20,14 +20,14 @@ export const ReClammParams = ({ handleNumberInputChange }: { handleNumberInputCh
     // initialBalanceA,
     usdPerTokenInputA,
     usdPerTokenInputB,
-    tokenAPriceIncludesRate,
-    tokenBPriceIncludesRate,
+    // tokenAPriceIncludesRate,
+    // tokenBPriceIncludesRate,
   } = reClammParams;
 
   const { data: currentRateTokenA } = useFetchTokenRate(tokenConfigs[0].rateProvider);
   const { data: currentRateTokenB } = useFetchTokenRate(tokenConfigs[1].rateProvider);
-  const { tokenUsdValue: usdPerTokenA } = useTokenUsdValue(tokenConfigs[0].address, "1");
-  const { tokenUsdValue: usdPerTokenB } = useTokenUsdValue(tokenConfigs[1].address, "1");
+  // const { tokenUsdValue: usdPerTokenA } = useTokenUsdValue(tokenConfigs[0].address, "1");
+  // const { tokenUsdValue: usdPerTokenB } = useTokenUsdValue(tokenConfigs[1].address, "1");
 
   const sanitizeNumberInput = (input: string) => {
     // Remove non-numeric characters except decimal point
@@ -37,6 +37,15 @@ export const ReClammParams = ({ handleNumberInputChange }: { handleNumberInputCh
     return parts.length > 2 ? parts[0] + "." + parts.slice(1).join("") : sanitized;
   };
 
+  const humanRateA = currentRateTokenA && Number(formatUnits(currentRateTokenA, 18));
+  const humanRateB = currentRateTokenB && Number(formatUnits(currentRateTokenB, 18));
+
+  const isBoostedA = !!currentRateTokenA;
+  const isBoostedB = !!currentRateTokenB;
+
+  const boostedLabelA = isBoostedA ? `without rate` : "";
+  const boostedLabelB = currentRateTokenB ? `without rate` : "";
+
   return (
     <div className="bg-base-100 p-5 rounded-xl">
       <div className="text-lg font-bold mb-3 inline-flex">
@@ -57,7 +66,17 @@ export const ReClammParams = ({ handleNumberInputChange }: { handleNumberInputCh
         <div className="grid grid-cols-2 gap-4">
           <div className="relative">
             <TextField
-              label={`${tokenConfigs[0].tokenInfo?.symbol}`}
+              label={`${tokenConfigs[0].tokenInfo?.symbol} price ${boostedLabelA}`}
+              tooltip={
+                isBoostedA && (
+                  <div
+                    className="tooltip hover:cursor-pointer tooltip-primary"
+                    data-tip={`${tokenConfigs[0].tokenInfo?.symbol} rate is ${humanRateA}`}
+                  >
+                    <InformationCircleIcon className="w-5 h-5" />
+                  </div>
+                )
+              }
               value={usdPerTokenInputA}
               isDollarValue={true}
               onChange={e => {
@@ -66,7 +85,7 @@ export const ReClammParams = ({ handleNumberInputChange }: { handleNumberInputCh
                 if (usdPerTokenInputA !== e.target.value) updateUserData({ hasEditedReclammParams: false });
               }}
             />
-            {!!currentRateTokenA && (
+            {/* {!!currentRateTokenA && (
               <TogglePriceIncludesRate
                 tokenPriceIncludesRate={tokenAPriceIncludesRate}
                 onChange={() => {
@@ -83,20 +102,30 @@ export const ReClammParams = ({ handleNumberInputChange }: { handleNumberInputCh
                   });
                 }}
               />
-            )}
+            )} */}
           </div>
           <div className="relative">
             <TextField
-              label={`${tokenConfigs[1].tokenInfo?.symbol}`}
+              label={`${tokenConfigs[1].tokenInfo?.symbol} price ${boostedLabelB}`}
               value={usdPerTokenInputB}
               isDollarValue={true}
+              tooltip={
+                isBoostedB && (
+                  <div
+                    className="tooltip hover:cursor-pointer tooltip-primary"
+                    data-tip={`${tokenConfigs[1].tokenInfo?.symbol} rate is ${humanRateB}`}
+                  >
+                    <InformationCircleIcon className="w-5 h-5" />
+                  </div>
+                )
+              }
               onChange={e => {
                 updateReClammParam({ usdPerTokenInputB: sanitizeNumberInput(e.target.value) });
                 // if user changes usd price per token, this triggers useInitialPricingParams hook to move price params to surround new "current price" of pool
                 if (usdPerTokenInputB !== e.target.value) updateUserData({ hasEditedReclammParams: false });
               }}
             />
-            {!!currentRateTokenB && (
+            {/* {!!currentRateTokenB && (
               <TogglePriceIncludesRate
                 tokenPriceIncludesRate={tokenBPriceIncludesRate}
                 onChange={() => {
@@ -113,7 +142,7 @@ export const ReClammParams = ({ handleNumberInputChange }: { handleNumberInputCh
                   });
                 }}
               />
-            )}
+            )} */}
           </div>
         </div>
 
@@ -151,7 +180,9 @@ export const ReClammParams = ({ handleNumberInputChange }: { handleNumberInputCh
             isPercentage={true}
             value={centerednessMargin}
             placeholder="0 - 90"
-            onChange={e => handleNumberInputChange(e, "centerednessMargin", 0, 90)}
+            onChange={e => {
+              updateReClammParam({ centerednessMargin: sanitizeNumberInput(e.target.value) });
+            }}
           />
           <NumberInput
             label="Daily Price Shift Exponent"
@@ -160,13 +191,10 @@ export const ReClammParams = ({ handleNumberInputChange }: { handleNumberInputCh
             isPercentage={true}
             value={dailyPriceShiftExponent}
             placeholder="0 - 100"
-            onChange={e => handleNumberInputChange(e, "dailyPriceShiftExponent", 0, 100)}
+            onChange={e => {
+              updateReClammParam({ dailyPriceShiftExponent: sanitizeNumberInput(e.target.value) });
+            }}
           />
-          {/* <TextField
-            label={`Initial Balance of ${tokenConfigs[0].tokenInfo?.symbol}`}
-            value={initialBalanceA}
-            onChange={e => updateReClammParam({ initialBalanceA: sanitizeNumberInput(e.target.value) })}
-          /> */}
         </div>
       </div>
     </div>
@@ -217,28 +245,28 @@ function ReClammChart() {
   );
 }
 
-function TogglePriceIncludesRate({
-  tokenPriceIncludesRate,
-  onChange,
-}: {
-  tokenPriceIncludesRate: boolean;
-  onChange: () => void;
-}) {
-  return (
-    <div className="absolute -top-2 right-0">
-      <fieldset className="fieldset ">
-        <label className="label cursor-pointer gap-2">
-          <span className={`label-text ${tokenPriceIncludesRate ? "text-success" : "text-stone-400"}`}>
-            {tokenPriceIncludesRate ? "price includes rate" : "price without rate"}
-          </span>
-          <input
-            type="checkbox"
-            checked={tokenPriceIncludesRate}
-            onChange={onChange}
-            className={`toggle toggle-sm ${tokenPriceIncludesRate ? "toggle-success" : "toggle-error"}`}
-          />
-        </label>
-      </fieldset>
-    </div>
-  );
-}
+// function TogglePriceIncludesRate({
+//   tokenPriceIncludesRate,
+//   onChange,
+// }: {
+//   tokenPriceIncludesRate: boolean;
+//   onChange: () => void;
+// }) {
+//   return (
+//     <div className="absolute -top-2 right-0">
+//       <fieldset className="fieldset ">
+//         <label className="label cursor-pointer gap-2">
+//           <span className={`label-text ${tokenPriceIncludesRate ? "text-success" : "text-stone-400"}`}>
+//             {tokenPriceIncludesRate ? "price includes rate" : "price without rate"}
+//           </span>
+//           <input
+//             type="checkbox"
+//             checked={tokenPriceIncludesRate}
+//             onChange={onChange}
+//             className={`toggle toggle-sm ${tokenPriceIncludesRate ? "toggle-success" : "toggle-error"}`}
+//           />
+//         </label>
+//       </fieldset>
+//     </div>
+//   );
+// }
diff --git a/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/index.tsx b/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/index.tsx
index 8c07d6b..4ed38f8 100644
--- a/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/index.tsx
+++ b/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseParameters/index.tsx
@@ -46,7 +46,7 @@ export const ChooseParameters = () => {
       <div className="text-xl">Choose pool parameters:</div>
 
       {poolType === PoolType.GyroE && <EclpParams />}
-      {poolType === PoolType.ReClamm && <ReClammParams handleNumberInputChange={handleNumberInputChange} />}
+      {poolType === PoolType.ReClamm && <ReClammParams />}
       {(poolType === PoolType.Stable || poolType === PoolType.StableSurge) && (
         <AmplificationParameter handleNumberInputChange={handleNumberInputChange} />
       )}
diff --git a/packages/nextjs/components/common/TextField.tsx b/packages/nextjs/components/common/TextField.tsx
index 3866ae0..b919c80 100644
--- a/packages/nextjs/components/common/TextField.tsx
+++ b/packages/nextjs/components/common/TextField.tsx
@@ -5,6 +5,7 @@ import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 import { useValidateHooksContract } from "~~/hooks/v3";
 
 interface TextFieldProps {
+  tooltip?: React.ReactNode;
   label?: string;
   placeholder?: string;
   value: string | undefined;
@@ -22,6 +23,7 @@ interface TextFieldProps {
 
 export const TextField: React.FC<TextFieldProps> = ({
   label,
+  tooltip,
   placeholder,
   value,
   onChange,
@@ -55,7 +57,10 @@ export const TextField: React.FC<TextFieldProps> = ({
 
   return (
     <div className="w-full">
-      <div className="mb-1 flex items-center gap-1 px-2">{label && <label className="font-bold">{label}</label>}</div>
+      <div className="mb-1 flex items-center gap-1 px-2">
+        {label && <label className="font-bold">{label}</label>}
+        {tooltip}
+      </div>
       <div className="relative">
         {isDollarValue && <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400">$</div>}
         {isPercentage && <div className="absolute right-3 top-1/2 transform -translate-y-1/2 text-neutral-400">%</div>}
diff --git a/packages/nextjs/hooks/reclamm/useReclammChart.ts b/packages/nextjs/hooks/reclamm/useReclammChart.ts
index 128b82e..e1e31aa 100644
--- a/packages/nextjs/hooks/reclamm/useReclammChart.ts
+++ b/packages/nextjs/hooks/reclamm/useReclammChart.ts
@@ -169,8 +169,10 @@ export function useReclAmmChart() {
     const totalBars = 2 * baseGreyBarCount + 2 * baseOrangeBarCount + baseGreenBarCount;
 
     // for some reason the number of orange (or green) bars matters to echarts in the grid
-    const gridTopDesktop = baseOrangeBarCount % 2 === 0 ? "35%" : "35%";
-    const gridTopMobile = baseOrangeBarCount % 2 === 0 && !(showMinMaxValues && !showTargetValues) ? "30%" : "22%";
+    const orangeBarCountEven = baseOrangeBarCount % 2 === 0;
+    const gridTopDesktop = orangeBarCountEven ? "40%" : "35%";
+
+    const gridTopMobile = orangeBarCountEven && !(showMinMaxValues && !showTargetValues) ? "30%" : "22%";
 
     const baseGreyBarConfig = {
       count: baseGreyBarCount,
@@ -317,7 +319,7 @@ export function useReclAmmChart() {
         left: isMobile ? "-7%" : "-3%",
         right: "1%",
         top: isMobile ? gridTopMobile : gridTopDesktop,
-        bottom: "5%",
+        bottom: orangeBarCountEven ? "20%" : "8%",
         containLabel: true,
       },
       xAxis: {
diff --git a/packages/nextjs/hooks/v3/useCreatePool.ts b/packages/nextjs/hooks/v3/useCreatePool.ts
index 35b86ab..842bd1d 100644
--- a/packages/nextjs/hooks/v3/useCreatePool.ts
+++ b/packages/nextjs/hooks/v3/useCreatePool.ts
@@ -187,15 +187,11 @@ function usePoolTypeSpecificParams() {
     let minPrice = Number(initialMinPrice);
     let maxPrice = Number(initialMaxPrice);
     let targetPrice = Number(initialTargetPrice);
-    let tokenAPriceIncludesRate = reClammParams.tokenAPriceIncludesRate;
-    let tokenBPriceIncludesRate = reClammParams.tokenBPriceIncludesRate;
 
     if (!isTokenConfigsInOrder) {
       minPrice = 1 / Number(initialMaxPrice);
       maxPrice = 1 / Number(initialMinPrice);
       targetPrice = 1 / Number(initialTargetPrice);
-      tokenAPriceIncludesRate = reClammParams.tokenBPriceIncludesRate;
-      tokenBPriceIncludesRate = reClammParams.tokenAPriceIncludesRate;
     }
 
     return {
@@ -203,8 +199,8 @@ function usePoolTypeSpecificParams() {
         initialMinPrice: parseUnits(minPrice.toString(), 18),
         initialMaxPrice: parseUnits(maxPrice.toString(), 18),
         initialTargetPrice: parseUnits(targetPrice.toString(), 18),
-        tokenAPriceIncludesRate,
-        tokenBPriceIncludesRate,
+        tokenAPriceIncludesRate: false, // hardcoded until reclam v3 deployments. false means price is in terms of underlying
+        tokenBPriceIncludesRate: false, // hardcoded until reclam v3 deployments. false means price is in terms of underlying
       },
       priceShiftDailyRate: parseUnits(reClammParams.dailyPriceShiftExponent, 16), // SDK kept OG var name but on chain is same as creation ui
       centerednessMargin: parseUnits(reClammParams.centerednessMargin, 16), // Charting UX based on pool math simulator setup allows 0 - 100% but on chain is 0 - 50%
diff --git a/packages/nextjs/hooks/v3/useValidateCreationInputs.ts b/packages/nextjs/hooks/v3/useValidateCreationInputs.ts
index c239c72..58b9d6f 100644
--- a/packages/nextjs/hooks/v3/useValidateCreationInputs.ts
+++ b/packages/nextjs/hooks/v3/useValidateCreationInputs.ts
@@ -45,7 +45,15 @@ export function useValidateCreationInputs() {
   const { data: isValidPoolHooksContract } = useValidateHooksContract(isUsingHooks, poolHooksContract);
 
   const isGyroEclpParamsValid = !baseParamsError && !derivedParamsError;
-  const isReClammParamsValid = Object.values(reClammParams).every(value => value !== "");
+
+  const isDailyPriceShiftExponentValid =
+    Number(reClammParams.dailyPriceShiftExponent) >= 0 && Number(reClammParams.dailyPriceShiftExponent) <= 100;
+  const isCenterednessMarginValid =
+    Number(reClammParams.centerednessMargin) >= 0 && Number(reClammParams.centerednessMargin) <= 90;
+  const isReClammParamsValid =
+    Object.values(reClammParams).every(value => value !== "") &&
+    isDailyPriceShiftExponentValid &&
+    isCenterednessMarginValid;
 
   const isParametersValid = [
     // Common param checks for all pool types

From 2d219202584084d461219cd09bdc3df8335b84c8 Mon Sep 17 00:00:00 2001
From: Matt Pereira <mattpereira.dev@gmail.com>
Date: Wed, 30 Jul 2025 12:55:36 -0700
Subject: [PATCH 14/18] clean up comments

---
 packages/nextjs/hooks/v3/useCreatePool.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/nextjs/hooks/v3/useCreatePool.ts b/packages/nextjs/hooks/v3/useCreatePool.ts
index 842bd1d..407a45c 100644
--- a/packages/nextjs/hooks/v3/useCreatePool.ts
+++ b/packages/nextjs/hooks/v3/useCreatePool.ts
@@ -199,11 +199,12 @@ function usePoolTypeSpecificParams() {
         initialMinPrice: parseUnits(minPrice.toString(), 18),
         initialMaxPrice: parseUnits(maxPrice.toString(), 18),
         initialTargetPrice: parseUnits(targetPrice.toString(), 18),
-        tokenAPriceIncludesRate: false, // hardcoded until reclam v3 deployments. false means price is in terms of underlying
-        tokenBPriceIncludesRate: false, // hardcoded until reclam v3 deployments. false means price is in terms of underlying
+        // hardcoded price to not include rate until new reclamm deployments. without rate means boosted must be priced in terms of underlying
+        tokenAPriceIncludesRate: false,
+        tokenBPriceIncludesRate: false,
       },
-      priceShiftDailyRate: parseUnits(reClammParams.dailyPriceShiftExponent, 16), // SDK kept OG var name but on chain is same as creation ui
-      centerednessMargin: parseUnits(reClammParams.centerednessMargin, 16), // Charting UX based on pool math simulator setup allows 0 - 100% but on chain is 0 - 50%
+      priceShiftDailyRate: parseUnits(reClammParams.dailyPriceShiftExponent, 16), // SDK kept OG var name "priceShiftDailyRate" but on chain is same as creation ui
+      centerednessMargin: parseUnits(reClammParams.centerednessMargin, 16),
     };
   }
 

From 7f134f87c2ae3994ade0231fe1f22417980b6847 Mon Sep 17 00:00:00 2001
From: Matt Pereira <mattpereira.dev@gmail.com>
Date: Tue, 9 Sep 2025 16:23:51 -0700
Subject: [PATCH 15/18] remove eclp init amount updates

---
 .../ChooseTokenAmounts/ChooseTokenAmount.tsx             | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/packages/nextjs/app/v3/_components/PoolCreation/ChooseTokenAmounts/ChooseTokenAmount.tsx b/packages/nextjs/app/v3/_components/PoolCreation/ChooseTokenAmounts/ChooseTokenAmount.tsx
index d9de1fc..2b818d8 100644
--- a/packages/nextjs/app/v3/_components/PoolCreation/ChooseTokenAmounts/ChooseTokenAmount.tsx
+++ b/packages/nextjs/app/v3/_components/PoolCreation/ChooseTokenAmounts/ChooseTokenAmount.tsx
@@ -82,15 +82,6 @@ export function ChooseTokenAmount({ index, tokenConfig }: { index: number; token
   const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const inputValue = e.target.value.trim();
     if (Number(inputValue) >= 0) {
-      if (poolType === PoolType.GyroE) {
-        const otherIndex = index === 0 ? 1 : 0;
-        const referenceTokenPrice = getRateAdjustedUsdPrice(index);
-        const otherTokenPrice = getRateAdjustedUsdPrice(otherIndex);
-        const calculatedAmount = (Number(inputValue) * referenceTokenPrice) / otherTokenPrice;
-
-        updateTokenConfig(otherIndex, { amount: calculatedAmount.toString() }); // update other token input to be proportional
-      }
-
       if (poolType === PoolType.ReClamm) lastUpdatedAmountByIndex.current = index;
 
       updateTokenConfig(index, { amount: inputValue });

From 999989180b9697a7bb164b21be57ac14cd1ce5bd Mon Sep 17 00:00:00 2001
From: Matt Pereira <mattpereira.dev@gmail.com>
Date: Thu, 11 Sep 2025 17:08:25 -0700
Subject: [PATCH 16/18] hide deprecated eclp init on re-clamm branch

---
 .../PoolConfiguration/ChooseType/index.tsx      |  9 +--------
 packages/nextjs/utils/constants/poolTypes.ts    | 17 +++++++++--------
 2 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseType/index.tsx b/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseType/index.tsx
index eedd95b..30f0dfc 100644
--- a/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseType/index.tsx
+++ b/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseType/index.tsx
@@ -3,8 +3,6 @@ import { PoolTypeButton } from "./PoolTypeButton";
 import { type SupportedPoolTypes, poolTypeMap } from "~~/utils/constants";
 
 export function ChooseType() {
-  // const { poolType } = usePoolCreationStore();
-
   const poolTypes = Object.keys(poolTypeMap) as SupportedPoolTypes[];
 
   return (
@@ -12,13 +10,8 @@ export function ChooseType() {
       <div className="flex flex-col justify-center h-full gap-10">
         <div className="flex flex-col gap-5">
           <div className="text-xl mt-10">Choose a pool type:</div>
-          <div className="grid grid-cols-3 gap-4">
-            {poolTypes.slice(0, 3).map((type: SupportedPoolTypes) => (
-              <PoolTypeButton key={type} selectedPoolType={type} />
-            ))}
-          </div>
           <div className="grid grid-cols-2 gap-4">
-            {poolTypes.slice(3, 5).map((type: SupportedPoolTypes) => (
+            {poolTypes.slice(0, 4).map((type: SupportedPoolTypes) => (
               <PoolTypeButton key={type} selectedPoolType={type} />
             ))}
           </div>
diff --git a/packages/nextjs/utils/constants/poolTypes.ts b/packages/nextjs/utils/constants/poolTypes.ts
index cb3acea..626195a 100644
--- a/packages/nextjs/utils/constants/poolTypes.ts
+++ b/packages/nextjs/utils/constants/poolTypes.ts
@@ -4,8 +4,8 @@ export type SupportedPoolTypes =
   | PoolType.Stable
   | PoolType.Weighted
   | PoolType.StableSurge
-  | PoolType.GyroE
-  | PoolType.ReClamm;
+  | PoolType.ReClamm
+  | PoolType.GyroE;
 
 export type PoolTypeDetails = {
   label: string;
@@ -31,16 +31,17 @@ export const poolTypeMap: Record<SupportedPoolTypes, PoolTypeDetails> = {
     description:
       "Weighted pools support up to 8 tokens with customizable weightings, allowing for fine-tuned exposure to multiple assets",
   },
-  [PoolType.GyroE]: {
-    label: "Gyro E-CLP",
-    maxTokens: 2,
-    description:
-      "Gyro's elliptic concentrated liquidity pools concentrate liquidity within price bounds with the flexibility to asymmetrically focus liquidity",
-  },
+
   [PoolType.ReClamm]: {
     label: "Readjusting CLAMM",
     maxTokens: 2,
     description:
       "A concentrated liquidity pool that automates adjustments to the range of liquidity provided as price moves",
   },
+  [PoolType.GyroE]: {
+    label: "Gyro E-CLP",
+    maxTokens: 2,
+    description:
+      "Gyro's elliptic concentrated liquidity pools concentrate liquidity within price bounds with the flexibility to asymmetrically focus liquidity",
+  },
 };

From d43e3a29aa35042eb8cc8f96662159c182edd434 Mon Sep 17 00:00:00 2001
From: Matt Pereira <mattpereira.dev@gmail.com>
Date: Thu, 18 Sep 2025 15:14:37 -0700
Subject: [PATCH 17/18] add support for plasma chain

---
 .../PoolConfiguration/ChooseType/index.tsx    |  2 +-
 .../nextjs/hooks/hyperliquid/useIsHyperEvm.ts |  2 +-
 .../hooks/hyperliquid/useIsUsingBigBlocks.ts  |  2 +-
 packages/nextjs/package.json                  |  2 +-
 packages/nextjs/scaffold.config.ts            |  3 +-
 .../nextjs/utils/constants/customChains.ts    | 29 +++++++++++++++++++
 .../nextjs/utils/scaffold-eth/networks.ts     |  6 +++-
 packages/nextjs/utils/supportedNetworks.ts    | 13 +++++++--
 yarn.lock                                     | 10 +++----
 9 files changed, 56 insertions(+), 13 deletions(-)

diff --git a/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseType/index.tsx b/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseType/index.tsx
index 30f0dfc..31c1ace 100644
--- a/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseType/index.tsx
+++ b/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseType/index.tsx
@@ -11,7 +11,7 @@ export function ChooseType() {
         <div className="flex flex-col gap-5">
           <div className="text-xl mt-10">Choose a pool type:</div>
           <div className="grid grid-cols-2 gap-4">
-            {poolTypes.slice(0, 4).map((type: SupportedPoolTypes) => (
+            {poolTypes.slice(3, 4).map((type: SupportedPoolTypes) => (
               <PoolTypeButton key={type} selectedPoolType={type} />
             ))}
           </div>
diff --git a/packages/nextjs/hooks/hyperliquid/useIsHyperEvm.ts b/packages/nextjs/hooks/hyperliquid/useIsHyperEvm.ts
index c428379..f7eacbb 100644
--- a/packages/nextjs/hooks/hyperliquid/useIsHyperEvm.ts
+++ b/packages/nextjs/hooks/hyperliquid/useIsHyperEvm.ts
@@ -4,5 +4,5 @@ import { usePublicClient } from "wagmi";
 export const useIsHyperEvm = () => {
   const publicClient = usePublicClient();
 
-  return publicClient?.chain.id === ChainId.HYPER_EVM;
+  return publicClient?.chain.id === ChainId.HYPEREVM;
 };
diff --git a/packages/nextjs/hooks/hyperliquid/useIsUsingBigBlocks.ts b/packages/nextjs/hooks/hyperliquid/useIsUsingBigBlocks.ts
index 416a9ea..6cc28d7 100644
--- a/packages/nextjs/hooks/hyperliquid/useIsUsingBigBlocks.ts
+++ b/packages/nextjs/hooks/hyperliquid/useIsUsingBigBlocks.ts
@@ -13,7 +13,7 @@ export const useIsUsingBigBlocks = () => {
     queryKey: ["isUsingBigBlocks", publicClient?.chain.id, address],
     queryFn: async () => {
       if (!publicClient || !address) return false;
-      if (publicClient.chain.id !== ChainId.HYPER_EVM) return false;
+      if (publicClient.chain.id !== ChainId.HYPEREVM) return false;
 
       const isUsingBigBlocks: boolean = await publicClient.transport.request({
         method: "eth_usingBigBlocks",
diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json
index 4202319..1db808f 100644
--- a/packages/nextjs/package.json
+++ b/packages/nextjs/package.json
@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@balancer-labs/balancer-maths": "^0.0.25",
-    "@balancer/sdk": "4.5.0",
+    "@balancer/sdk": "4.8.0",
     "@heroicons/react": "^2.0.11",
     "@nktkas/hyperliquid": "^0.23.1",
     "@rainbow-me/rainbowkit": "2.1.2",
diff --git a/packages/nextjs/scaffold.config.ts b/packages/nextjs/scaffold.config.ts
index c18c0dc..2ba0a0f 100644
--- a/packages/nextjs/scaffold.config.ts
+++ b/packages/nextjs/scaffold.config.ts
@@ -1,4 +1,4 @@
-import { hyperEVM } from "./utils/constants";
+import { hyperEVM, plasma } from "./utils/constants";
 import * as chains from "viem/chains";
 
 export type ScaffoldConfig = {
@@ -24,6 +24,7 @@ const scaffoldConfig = {
     chains.optimism,
     chains.sonic,
     hyperEVM,
+    plasma,
   ],
 
   // If using chains.foundry as your targetNetwork, you must specify a network to fork
diff --git a/packages/nextjs/utils/constants/customChains.ts b/packages/nextjs/utils/constants/customChains.ts
index 14d09da..b24a139 100644
--- a/packages/nextjs/utils/constants/customChains.ts
+++ b/packages/nextjs/utils/constants/customChains.ts
@@ -27,3 +27,32 @@ export const hyperEVM = /*#__PURE__*/ defineChain({
   },
   testnet: false,
 });
+
+export const plasma = /*#__PURE__*/ defineChain({
+  id: 9745,
+  name: "Plasma",
+  nativeCurrency: {
+    name: "XPL",
+    symbol: "XPL",
+    decimals: 18,
+  },
+  rpcUrls: {
+    default: {
+      http: ["https://rpc.plasma.to/"],
+      webSocket: ["wss://rpc.plasma.to/"],
+    },
+  },
+  blockExplorers: {
+    default: {
+      name: "Plasma Explorer",
+      url: "https://plasmascan.to/",
+      apiUrl: "https://api.routescan.io/v2/network/mainnet/evm/9745/etherscan/api?",
+    },
+  },
+  contracts: {
+    multicall3: {
+      address: "0xcA11bde05977b3631167028862bE2a173976CA11",
+      blockCreated: 1,
+    },
+  },
+});
diff --git a/packages/nextjs/utils/scaffold-eth/networks.ts b/packages/nextjs/utils/scaffold-eth/networks.ts
index e0dfc14..3ce96b7 100644
--- a/packages/nextjs/utils/scaffold-eth/networks.ts
+++ b/packages/nextjs/utils/scaffold-eth/networks.ts
@@ -1,5 +1,5 @@
 // import { hyperEVM } from "../constants";
-import { hyperEVM } from "../constants";
+import { hyperEVM, plasma } from "../constants";
 import * as chains from "viem/chains";
 import scaffoldConfig from "~~/scaffold.config";
 
@@ -145,6 +145,10 @@ export const NETWORKS_EXTRA_DATA: Record<string, ChainAttributes> = {
 export function getBlockExplorerTxLink(chainId: number | undefined, txnHash: string | undefined) {
   if (!chainId || !txnHash) return undefined;
 
+  if (chainId === plasma.id) {
+    return `https://plasmascan.to/tx/${txnHash}`;
+  }
+
   const chainNames = Object.keys(chains);
 
   const targetChainArr = chainNames.filter(chainName => {
diff --git a/packages/nextjs/utils/supportedNetworks.ts b/packages/nextjs/utils/supportedNetworks.ts
index cade37b..ac78a4f 100644
--- a/packages/nextjs/utils/supportedNetworks.ts
+++ b/packages/nextjs/utils/supportedNetworks.ts
@@ -1,8 +1,17 @@
-import { hyperEVM } from "./constants";
+import { hyperEVM, plasma } from "./constants";
 import * as chains from "viem/chains";
 
 export const supportedNetworks = {
-  balancerV3: [chains.mainnet, chains.arbitrum, chains.base, hyperEVM, chains.gnosis, chains.avalanche, chains.sepolia],
+  balancerV3: [
+    chains.mainnet,
+    chains.arbitrum,
+    chains.base,
+    chains.gnosis,
+    chains.avalanche,
+    hyperEVM,
+    plasma,
+    chains.sepolia,
+  ],
   beets: [chains.sonic, chains.optimism],
   cowAmm: [chains.mainnet, chains.arbitrum, chains.base, chains.gnosis, chains.sepolia],
 };
diff --git a/yarn.lock b/yarn.lock
index 0916bd9..b19f098 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -193,16 +193,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@balancer/sdk@npm:4.5.0":
-  version: 4.5.0
-  resolution: "@balancer/sdk@npm:4.5.0"
+"@balancer/sdk@npm:4.8.0":
+  version: 4.8.0
+  resolution: "@balancer/sdk@npm:4.8.0"
   dependencies:
     "@balancer-labs/balancer-maths": 0.0.27
     "@types/big.js": 6.2.2
     big.js: 6.2.2
     decimal.js-light: 2.5.1
     viem: 2.27.0
-  checksum: a21992cf41bc7fb317c608d67c4cbcd5abfaa0f41e77d542fadae27812fd08abfe31705f450ca5fce8d6aa204c887cb8a020d9a3a0423d9fe361f71d486cb2f1
+  checksum: fa4f4540af1a96f1dd7cb1bd495d3e8980e0f0f3427bcb45801d2700b66600681385fd3653107c6fab193b400d5941ed3b6315f0a478e644d62a217fad222c07
   languageName: node
   linkType: hard
 
@@ -1465,7 +1465,7 @@ __metadata:
   resolution: "@se-2/nextjs@workspace:packages/nextjs"
   dependencies:
     "@balancer-labs/balancer-maths": ^0.0.25
-    "@balancer/sdk": 4.5.0
+    "@balancer/sdk": 4.8.0
     "@heroicons/react": ^2.0.11
     "@nktkas/hyperliquid": ^0.23.1
     "@rainbow-me/rainbowkit": 2.1.2

From dc18a800e6dc93dd3ac42a3cf82178ee137d8d95 Mon Sep 17 00:00:00 2001
From: Matt Pereira <mattpereira.dev@gmail.com>
Date: Thu, 2 Oct 2025 08:50:55 -0700
Subject: [PATCH 18/18] add pool type description

---
 .../v3/_components/PoolConfiguration/ChooseType/index.tsx  | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseType/index.tsx b/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseType/index.tsx
index 31c1ace..1437ca0 100644
--- a/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseType/index.tsx
+++ b/packages/nextjs/app/v3/_components/PoolConfiguration/ChooseType/index.tsx
@@ -1,10 +1,13 @@
 import React from "react";
 import { PoolTypeButton } from "./PoolTypeButton";
+import { usePoolCreationStore } from "~~/hooks/v3";
 import { type SupportedPoolTypes, poolTypeMap } from "~~/utils/constants";
 
 export function ChooseType() {
   const poolTypes = Object.keys(poolTypeMap) as SupportedPoolTypes[];
 
+  const { poolType } = usePoolCreationStore();
+
   return (
     <>
       <div className="flex flex-col justify-center h-full gap-10">
@@ -16,6 +19,10 @@ export function ChooseType() {
             ))}
           </div>
         </div>
+
+        {poolType ? (
+          <div className="text-xl bg-base-100 p-5 rounded-xl">{poolTypeMap[poolType].description}</div>
+        ) : null}
       </div>
     </>
   );