feat: offer stable surge pool type on all available networks

balancer · Feb 10, 2025 · d4b278c · d4b278c
1 parent 62f59c8
commit d4b278c
Show file tree

Hide file tree

Showing 14 changed files with 103 additions and 69 deletions.
diff --git a/packages/nextjs/app/cow/_components/PoolCreation.tsx b/packages/nextjs/app/cow/_components/PoolCreation.tsx
@@ -284,6 +284,7 @@ export const PoolCreation = ({ poolCreation, updatePoolCreation, clearPoolCreati
                 clearState={() => {
                   clearPoolCreation();
                 }}
+                trigger={<span className="hover:underline">Reset Progress</span>}
               />
             </div>
           )}

diff --git a/packages/nextjs/app/v3/_components/ChooseParameters.tsx b/packages/nextjs/app/v3/_components/ChooseParameters.tsx
@@ -251,7 +251,17 @@ export const ChooseParameters = () => {
         </label>
 
         {poolType === PoolType.StableSurge ? (
-          <div className="text-lg">The Stable Surge pool type uses a core hooks contract</div>
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center gap-1 text-lg">
+              The Stable Surge pool type uses a core hooks contract
+              <input type="checkbox" disabled={true} checked={true} className="checkbox ml-2 rounded-md" />
+            </div>
+            <Checkbox
+              label="Should this pool accept donations?"
+              checked={enableDonation}
+              onChange={() => updatePool({ enableDonation: !enableDonation })}
+            />
+          </div>
         ) : (
           <>
             <RadioInput

diff --git a/packages/nextjs/app/v3/_components/ChooseToken.tsx b/packages/nextjs/app/v3/_components/ChooseToken.tsx
@@ -154,15 +154,19 @@ export function ChooseToken({ index }: { index: number }) {
   // show rate provider modal when appropriate
   const token = tokenConfigs[index];
   useEffect(() => {
-    let rateProviderAddress = token.tokenInfo?.priceRateProviderData?.address;
+    let rateProviderData = token.tokenInfo?.priceRateProviderData;
     // if user opted to use boosted variant of underlying token, offer the rate provider from the boosted variant
     if (token.useBoostedVariant) {
       const boostedVariant = boostableWhitelist?.[token.address];
-      rateProviderAddress = boostedVariant?.priceRateProviderData?.address;
+      rateProviderData = boostedVariant?.priceRateProviderData;
     }
+
     // if rate provider data exists for the token and user is not currently seeing the boost opportunity modal, show rate provider modal
-    if (rateProviderAddress && !showBoostOpportunityModal) {
-      setShowRateProviderModal(true);
+    if (rateProviderData && !showBoostOpportunityModal) {
+      // Constant rate providers are special case only used for gyro pools
+      if (rateProviderData.name !== "ConstantRateProvider") {
+        setShowRateProviderModal(true);
+      }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [token.tokenInfo?.priceRateProviderData, token.useBoostedVariant, token.address, showBoostOpportunityModal]);
@@ -430,7 +434,7 @@ const RateProviderModal = ({
 
         <div className="flex flex-col gap-5">
           <div className="text-xl">
-            Consider using the following rate provider for <b>{tokenSymbol}</b>
+            The following rate provider for <b>{tokenSymbol} </b> has already been whitelisted by Balancer
           </div>
           {rateProviderData ? (
             <div className="overflow-x-auto px-5">
@@ -479,22 +483,20 @@ const RateProviderModal = ({
           <div className="text-xl">
             {token.useBoostedVariant ? (
               <>
-                Since you opted to boost <b>{token.tokenInfo?.symbol}</b> into <b>{tokenSymbol}</b>, you must accept the
-                default rate provder from the balancer white list
+                Since you opted to boost <b>{token.tokenInfo?.symbol}</b> into <b>{tokenSymbol}</b> as part of pool
+                creation, you should use the default rate provider
               </>
             ) : (
               "If you wish to use this rate provider, click confirm. Otherwise, choose deny and paste in a rate provider address"
             )}
           </div>
         </div>
         <div className="w-full flex gap-4 justify-end mt-3">
-          <button
-            disabled={token.useBoostedVariant}
-            className={`btn btn-error rounded-xl text-lg w-28`}
-            onClick={() => handleDenyRateProvider()}
-          >
-            Deny
-          </button>
+          {!token.useBoostedVariant && (
+            <button className={`btn btn-error rounded-xl text-lg w-28`} onClick={() => handleDenyRateProvider()}>
+              Deny
+            </button>
+          )}
           <button
             className={`btn btn-success rounded-xl text-lg w-28`}
             disabled={!rateProviderData?.address}

diff --git a/packages/nextjs/app/v3/_components/ChooseType.tsx b/packages/nextjs/app/v3/_components/ChooseType.tsx
@@ -1,8 +1,6 @@
 import React from "react";
 import { PoolType } from "@balancer/sdk";
-import { sepolia } from "viem/chains";
 import { ArrowUpRightIcon } from "@heroicons/react/24/solid";
-import { useTargetNetwork } from "~~/hooks/scaffold-eth";
 import { usePoolCreationStore } from "~~/hooks/v3";
 import { AllowedPoolTypes } from "~~/hooks/v3/usePoolCreationStore";
 
@@ -34,35 +32,17 @@ const INITIAL_DESCRIPTION = (
 
 export function ChooseType() {
   const { poolType, updatePool, tokenConfigs } = usePoolCreationStore();
-  const { targetNetwork } = useTargetNetwork();
-
-  const isSepolia = targetNetwork.id === sepolia.id;
-
-  // Filter pool types based on network
-  const availablePoolTypes = POOL_TYPES.filter(type => {
-    if (type === PoolType.StableSurge) return isSepolia;
-    return true;
-  });
 
   return (
     <>
       <div className="flex flex-col justify-center h-full gap-10 px-7 py-5">
-        {!poolType && (
-          <div className="text-xl bg-base-100 rounded-xl p-5 border border-neutral">
-            <div className="text-xl font-bold mb-2">{poolType ? "Description" : "Instructions"}:</div>
-            {poolType ? POOL_TYPE_DESCRIPTIONS[poolType] : INITIAL_DESCRIPTION}
-          </div>
-        )}
-
         <div className="flex gap-4 justify-around">
-          {availablePoolTypes.map(type => (
+          {POOL_TYPES.map(type => (
             <button
               key={type}
               className={`${
-                type === poolType
-                  ? `bg-primary text-primary-content`
-                  : `bg-base-100 hover:bg-primary hover:text-primary-content hover:opacity-50 shadow-lg`
-              } p-7 w-full rounded-xl text-lg text`}
+                type === poolType ? `bg-accent text-white` : `bg-primary hover:bg-primary hover:opacity-80 shadow-lg`
+              } p-7 w-full rounded-xl text-lg text-accent-content`}
               onClick={() => updatePool({ poolType: type, tokenConfigs: tokenConfigs.slice(0, 4) })}
             >
               <div className="flex flex-col text-center">
@@ -72,11 +52,16 @@ export function ChooseType() {
           ))}
         </div>
 
-        {poolType && (
+        {poolType ? (
           <div className="text-xl bg-base-100 rounded-xl p-5 border border-neutral">
             <div className="text-xl font-bold mb-2">Description:</div>
             {POOL_TYPE_DESCRIPTIONS[poolType]}
           </div>
+        ) : (
+          <div className="text-xl bg-base-100 rounded-xl p-5 border border-neutral">
+            <div className="text-xl font-bold mb-2">{poolType ? "Description" : "Instructions"}:</div>
+            {poolType ? POOL_TYPE_DESCRIPTIONS[poolType] : INITIAL_DESCRIPTION}
+          </div>
         )}
       </div>
     </>

diff --git a/packages/nextjs/app/v3/_components/PoolCreationManager.tsx b/packages/nextjs/app/v3/_components/PoolCreationManager.tsx
@@ -153,6 +153,7 @@ export function PoolCreationManager({ setIsModalOpen }: { setIsModalOpen: (isOpe
                     clearUserData();
                     setIsModalOpen(false);
                   }}
+                  trigger={<span className="hover:underline">Reset Progress</span>}
                 />
               </div>
             </div>

diff --git a/packages/nextjs/app/v3/_components/PoolDetails.tsx b/packages/nextjs/app/v3/_components/PoolDetails.tsx
@@ -120,6 +120,19 @@ export function PoolDetails({ isPreview }: { isPreview?: boolean }) {
               </div>
             </div>
 
+            {poolType === PoolType.StableSurge && (
+              <>
+                <div className="flex justify-between">
+                  <div className="">Disable Unbalanced Liquidity</div>
+                  <div>{disableUnbalancedLiquidity ? "true" : "false"}</div>
+                </div>
+                <div className="flex justify-between">
+                  <div className="">Donations Enabled</div>
+                  <div>{enableDonation ? "true" : "false"}</div>
+                </div>
+              </>
+            )}
+
             {isUsingHooks && (
               <>
                 <div className="flex justify-between">

diff --git a/packages/nextjs/app/v3/_components/UserExperienceAlerts.tsx b/packages/nextjs/app/v3/_components/UserExperienceAlerts.tsx
@@ -2,7 +2,8 @@ import { useState } from "react";
 import Link from "next/link";
 import { ArrowUpRightIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { Alert } from "~~/components/common";
-import { usePoolCreationStore } from "~~/hooks/v3";
+import { PoolStateResetModal } from "~~/components/common";
+import { usePoolCreationStore, useUserDataStore } from "~~/hooks/v3";
 
 export function UserExperienceAlerts() {
   const [isInfoAlertVisible, setIsInfoAlertVisible] = useState(true);
@@ -68,18 +69,37 @@ export function ConnectWalletAlert() {
 }
 
 export function StartedOnDifferentNetworkAlert() {
-  const { chain } = usePoolCreationStore();
+  const { chain, clearPoolStore } = usePoolCreationStore();
+  const { clearUserData } = useUserDataStore();
 
   return (
-    <div className="flex justify-center w-full">
-      <div className="w-[1110px]">
-        <Alert type="warning">
-          <div className="flex items-center gap-2">
-            You have already begun the pool configuration process on {chain?.name}. If you wish to start creating a pool
-            on a different network, choose reset progress after switching back to {chain?.name}.
-            <ArrowUpRightIcon className="w-4 h-4" />
-          </div>
-        </Alert>
+    <div>
+      <div className="flex justify-center w-full">
+        <div className="w-[1110px] flex flex-col gap-3">
+          <Alert type="warning">
+            <div className="flex items-center gap-2">
+              You have already begun the pool configuration process on {chain?.name}. To start over on a new network,
+              reset progress
+            </div>
+          </Alert>
+          <Alert type="info">
+            <div className="flex items-center gap-2">
+              To continue progress, switch back to the {chain?.name} network
+            </div>
+          </Alert>
+          <Alert type="error">
+            <div className="flex items-center gap-2">
+              To start over on a new network, reset progress by clicking
+              <PoolStateResetModal
+                trigger={<span className="underline">here</span>}
+                clearState={() => {
+                  clearPoolStore();
+                  clearUserData();
+                }}
+              />
+            </div>
+          </Alert>
+        </div>
       </div>
     </div>
   );

diff --git a/packages/nextjs/app/v3/page.tsx b/packages/nextjs/app/v3/page.tsx
@@ -61,6 +61,7 @@ const BalancerV3: NextPage = () => {
                         clearPoolStore();
                         clearUserData();
                       }}
+                      trigger={<span className="hover:underline">Reset Progress</span>}
                     />
                   </div>
                 </div>

diff --git a/packages/nextjs/components/common/ContactSupportModal.tsx b/packages/nextjs/components/common/ContactSupportModal.tsx
@@ -6,7 +6,7 @@ export const ContactSupportModal = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   return (
     <>
-      <div onClick={() => setIsModalOpen(true)} className="text-center hover:underline cursor-pointer text-lg">
+      <div onClick={() => setIsModalOpen(true)} className="text-center hover:underline cursor-pointer">
         Contact Support
       </div>
       {isModalOpen && (

diff --git a/packages/nextjs/components/common/PoolStateResetModal.tsx b/packages/nextjs/components/common/PoolStateResetModal.tsx
@@ -3,28 +3,29 @@ import { XMarkIcon } from "@heroicons/react/24/outline";
 
 interface PoolStateResetModalProps {
   clearState: () => void;
+  trigger: React.ReactNode;
 }
 
-export const PoolStateResetModal = ({ clearState }: PoolStateResetModalProps) => {
+export const PoolStateResetModal = ({ clearState, trigger }: PoolStateResetModalProps) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
 
   return (
     <>
-      <div onClick={() => setIsModalOpen(true)} className="text-center hover:underline cursor-pointer text-lg">
-        Reset Progress
+      <div onClick={() => setIsModalOpen(true)} className="text-center hover:underline cursor-pointer">
+        {trigger}
       </div>
       {isModalOpen && (
         <div className="fixed inset-0 bg-black bg-opacity-75 flex justify-center items-center z-20">
           <div className="absolute w-full h-full" onClick={() => setIsModalOpen(false)} />
-          <div className="w-[550px] relative bg-base-100 border border-base-200 rounded-lg p-6">
+          <div className="w-[550px] relative bg-base-100 border border-base-200 rounded-lg p-6 text-base-content">
             <div className="flex items-center justify-between mb-7">
               <h5 className="font-bold text-3xl mb-0">Reset Progress</h5>
               <XMarkIcon className="w-6 h-6 hover:cursor-pointer " onClick={() => setIsModalOpen(false)} />
             </div>
 
             <div className="text-lg mb-10">
               To start over from the beginning of the pool configuration and creation process, which is the only way to
-              switch the network, click the red button below
+              switch the network after progress has begun, click the red button below
             </div>
 
             <div className="flex gap-3 justify-end">

diff --git a/packages/nextjs/hooks/v3/useCheckIfV3PoolExists.ts b/packages/nextjs/hooks/v3/useCheckIfV3PoolExists.ts
@@ -1,4 +1,5 @@
 import { AllowedPoolTypes } from "./usePoolCreationStore";
+import { PoolType } from "@balancer/sdk";
 import { useQuery } from "@tanstack/react-query";
 import { type Address } from "viem";
 import { useApiConfig } from "~~/hooks/balancer";
@@ -25,9 +26,12 @@ export type ExistingPool = {
 export const useCheckIfV3PoolExists = (type: AllowedPoolTypes | undefined, tokenAddresses: Address[]) => {
   const { url, chainName } = useApiConfig();
 
+  // API does not recognize stable surge as pool type like the SDK does
+  const poolType = type === PoolType.StableSurge ? PoolType.Stable : type;
+
   const query = `
   {
-    poolGetPools (where: {chainIn:[${chainName}], poolTypeIn:[${type?.toUpperCase()}], tokensIn:[${tokenAddresses
+    poolGetPools (where: {chainIn:[${chainName}], poolTypeIn:[${poolType?.toUpperCase()}], tokensIn:[${tokenAddresses
     .map(address => `"${address}"`)
     .join(",")}], protocolVersionIn:[3], tagNotIn: ["BLACK_LISTED"]}) {
         chain
@@ -48,9 +52,9 @@ export const useCheckIfV3PoolExists = (type: AllowedPoolTypes | undefined, token
   `;
 
   const { data: existingPools } = useQuery<ExistingPool[]>({
-    queryKey: ["existingPools", type, chainName, tokenAddresses],
+    queryKey: ["existingPools", poolType, chainName, tokenAddresses],
     queryFn: async () => {
-      if (!type || !tokenAddresses) return {};
+      if (!poolType || !tokenAddresses) return {};
 
       const response = await fetch(url, {
         method: "POST",

diff --git a/packages/nextjs/hooks/v3/useCreatePool.ts b/packages/nextjs/hooks/v3/useCreatePool.ts
@@ -83,8 +83,6 @@ export const useCreatePool = () => {
       },
     );
 
-    console.log("amplificationParameter", amplificationParameter);
-
     return {
       ...baseInput,
       poolType,
@@ -104,8 +102,6 @@ export const useCreatePool = () => {
     const input = createPoolInput(poolType);
     const call = createPool.buildCall(input);
 
-    console.log("input", input);
-
     const hash = await writeTx(
       () =>
         walletClient.sendTransaction({

diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json
@@ -14,7 +14,7 @@
     "vercel:yolo": "vercel --build-env NEXT_PUBLIC_IGNORE_BUILD_ERROR=true"
   },
   "dependencies": {
-    "@balancer/sdk": "^2.1.0",
+    "@balancer/sdk": "^2.1.1",
     "@heroicons/react": "^2.0.11",
     "@rainbow-me/rainbowkit": "2.1.2",
     "@safe-global/safe-apps-provider": "^0.18.5",

diff --git a/yarn.lock b/yarn.lock
@@ -286,14 +286,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@balancer/sdk@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "@balancer/sdk@npm:2.1.0"
+"@balancer/sdk@npm:^2.1.1":
+  version: 2.1.1
+  resolution: "@balancer/sdk@npm:2.1.1"
   dependencies:
     decimal.js-light: ^2.5.1
     lodash.clonedeep: ^4.5.0
     viem: ^2.22.3
-  checksum: 14ccf757222b768f5a02bec9fc615cdfc4037041ba58a4bb5528481ebd5696006c0efde424d5fab268ebe94d7d1d080b8b64c3ce5ed2c3c9c158a8e06658ab8e
+  checksum: 4c1788af0e3c130249534d79337aed7841d1bb2330aa20287b9b48c28dd0c5db5877a1d0ee6f7ebdedfd06019c722b10b4b04018750a3dec2492000b9d1aa18e
   languageName: node
   linkType: hard
 
@@ -1659,7 +1659,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@se-2/nextjs@workspace:packages/nextjs"
   dependencies:
-    "@balancer/sdk": ^2.1.0
+    "@balancer/sdk": ^2.1.1
     "@heroicons/react": ^2.0.11
     "@rainbow-me/rainbowkit": 2.1.2
     "@safe-global/safe-apps-provider": ^0.18.5
-Original file line number
+Diff line change
@@ Expand Up @@
                     clearState={() => {
                       clearPoolCreation();
                     }}
+                    trigger={<span className="hover:underline">Reset Progress</span>}
                   />
                 </div>
               )}
@@ Expand Down @@