Add support for arb and base

packages/nextjs/app/v3/_components/ChooseToken.tsx

@@ -324,7 +324,6 @@ const BoostOpportunityModal = ({
   const boostedVariantRateProvider = boostedVariant.priceRateProviderData?.address;
 
   const handleBoost = (enableBoost: boolean) => {
-    // TODO: more testing for rate provider UX
     updateTokenConfig(tokenIndex, {
       useBoostedVariant: enableBoost,
       rateProvider:

packages/nextjs/app/v3/_components/ChooseTokens.tsx

@@ -13,7 +13,6 @@ const MAX_TOKENS = {
 export function ChooseTokens() {
   const { tokenConfigs, poolType, updatePool } = usePoolCreationStore();
   const { hasAgreedToWarning, updateUserData } = useUserDataStore();
-  // const isProportional = useVerifyProportionalInit();
 
   // Beware of javascript floating point precision issues if 100 % number of tokens is not equal to zero
   function handleAddToken() {

packages/nextjs/app/v3/_components/PoolDetails.tsx

@@ -258,7 +258,7 @@ function TokenDetails({ token }: { token: TokenConfig }) {
             </div>
           )}
         </div>
-        <div>{token.amount}</div>
+        <div>{token.amount.length > 15 ? `${token.amount.slice(0, 15)}...` : token.amount}</div>
       </div>
       {token.rateProvider && token.rateProvider !== zeroAddress && (
         <>

packages/nextjs/app/v3/_components/UserExperienceAlerts.tsx

@@ -0,0 +1,86 @@
+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";
+
+export function UserExperienceAlerts() {
+  const [isInfoAlertVisible, setIsInfoAlertVisible] = useState(true);
+  const { chain } = usePoolCreationStore();
+
+  return (
+    <>
+      {!chain && (
+        <div className="flex justify-center">
+          <div className="w-[1110px]">
+            <Alert type="warning">
+              <div className="flex items-center gap-2">
+                Make sure you switch to your desired network before beginning pool creation. You cannot switch after
+                selecting pool type unless you reset progress
+                <ArrowUpRightIcon className="w-4 h-4" />
+              </div>
+            </Alert>
+          </div>
+        </div>
+      )}
+      {isInfoAlertVisible && (
+        <div className="flex justify-center">
+          <div className="w-[1110px] relative">
+            <Alert type="info">
+              <div className="flex items-center gap-2">
+                For tips and guidance on pool configuration and creation, check out our
+                <Link
+                  target="_blank"
+                  rel="noreferrer"
+                  href="https://docs-v3.balancer.fi/partner-onboarding/balancer-v3/pool-creation.html"
+                  className="link underline"
+                >
+                  partner onboarding documentation
+                </Link>
+              </div>
+            </Alert>
+            <button
+              onClick={() => setIsInfoAlertVisible(false)}
+              className="absolute top-3 right-3 p-1 rounded-full transition-colors text-neutral-700"
+            >
+              <XMarkIcon className="w-5 h-5" />
+            </button>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+
+export function ConnectWalletAlert() {
+  return (
+    <div className="flex justify-center w-full">
+      <div>
+        <Alert type="warning">
+          <div className="flex items-center gap-2">
+            Please connect a wallet and switch to the network you wish to create a pool
+            <ArrowUpRightIcon className="w-4 h-4" />
+          </div>
+        </Alert>
+      </div>
+    </div>
+  );
+}
+
+export function StartedOnDifferentNetworkAlert() {
+  const { chain } = usePoolCreationStore();
+
+  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>
+  );
+}

packages/nextjs/app/v3/_components/index.tsx

@@ -6,3 +6,4 @@ export * from "./ChooseParameters";
 export * from "./ChooseInfo";
 export * from "./PoolCreationManager";
 export * from "./ApproveOnTokenManager";
+export * from "./UserExperienceAlerts";

packages/nextjs/app/v3/page.tsx

@@ -1,17 +1,23 @@
 "use client";
 
-import { useState } from "react";
-import Link from "next/link";
-import { PoolConfiguration, PoolDetails } from "./_components";
+import {
+  ConnectWalletAlert,
+  PoolConfiguration,
+  PoolDetails,
+  StartedOnDifferentNetworkAlert,
+  UserExperienceAlerts,
+} from "./_components";
 import type { NextPage } from "next";
-import { ArrowUpRightIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { useWalletClient } from "wagmi";
 import { BalancerLogo } from "~~/components/assets/BalancerLogo";
 import { Alert, ContactSupportModal, PoolStateResetModal } from "~~/components/common";
 import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
-import { usePoolCreationStore, useUserDataStore, useValidateNetwork } from "~~/hooks/v3";
+import { usePoolCreationStore, useUserDataStore } from "~~/hooks/v3";
 
 const BalancerV3: NextPage = () => {
   const { clearPoolStore, chain } = usePoolCreationStore();
+  const { targetNetwork: selectedNetwork } = useTargetNetwork();
+  const { data: walletClient } = useWalletClient();
   const { clearUserData } = useUserDataStore();
 
   return (
@@ -23,131 +29,54 @@ const BalancerV3: NextPage = () => {
             <h1 className="text-3xl md:text-5xl font-bold text-center mb-0">Balancer v3</h1>
           </div>
 
-          <UserExperienceAlerts />
+          {!walletClient ? (
+            <ConnectWalletAlert />
+          ) : chain && selectedNetwork.id !== chain.id ? (
+            <StartedOnDifferentNetworkAlert />
+          ) : (
+            <>
+              <UserExperienceAlerts />
 
-          <>
-            <div className="hidden sm:flex flex-wrap gap-5 w-full justify-center">
-              <PoolConfiguration />
+              <div className="hidden sm:flex flex-wrap gap-5 w-full justify-center">
+                <PoolConfiguration />
 
-              <div className="bg-base-200 w-full max-w-[400px] rounded-xl shadow-lg p-5 h-fit">
-                <div className="flex justify-between items-center gap-2 mb-3 mr-2">
-                  <div className="font-bold text-2xl">Pool Preview</div>
-                  {chain && (
-                    <div
-                      className="text-xl font-bold"
-                      style={{ color: typeof chain.color === "string" ? chain.color : "rgb(135, 255, 101)" }}
-                    >
-                      {chain?.name}
-                    </div>
-                  )}
-                </div>
-                <PoolDetails isPreview={true} />
-                <div className="flex justify-center mt-4 gap-2 items-center">
-                  <ContactSupportModal />
-                  <div className="text-xl">·</div>
-                  <PoolStateResetModal
-                    clearState={() => {
-                      clearPoolStore();
-                      clearUserData();
-                    }}
-                  />
+                <div className="bg-base-200 w-full max-w-[400px] rounded-xl shadow-lg p-5 h-fit">
+                  <div className="flex justify-between items-center gap-2 mb-3 mr-2">
+                    <div className="font-bold text-2xl">Pool Preview</div>
+                    {chain && (
+                      <div
+                        className="text-xl font-bold"
+                        style={{ color: typeof chain.color === "string" ? chain.color : "rgb(135, 255, 101)" }}
+                      >
+                        {chain?.name}
+                      </div>
+                    )}
+                  </div>
+                  <PoolDetails isPreview={true} />
+                  <div className="flex justify-center mt-4 gap-2 items-center">
+                    <ContactSupportModal />
+                    <div className="text-xl">·</div>
+                    <PoolStateResetModal
+                      clearState={() => {
+                        clearPoolStore();
+                        clearUserData();
+                      }}
+                    />
+                  </div>
                 </div>
               </div>
-            </div>
 
-            <div className="sm:hidden">
-              <Alert type="warning">
-                <div className="flex items-center gap-2">Pool creation not available on mobile</div>
-              </Alert>
-            </div>
-          </>
+              <div className="sm:hidden">
+                <Alert type="warning">
+                  <div className="flex items-center gap-2">Pool creation not available on mobile</div>
+                </Alert>
+              </div>
+            </>
+          )}
         </div>
       </div>
     </div>
   );
 };
 
 export default BalancerV3;
-
-function UserExperienceAlerts() {
-  const { targetNetwork: selectedNetwork } = useTargetNetwork();
-  const [isInfoAlertVisible, setIsInfoAlertVisible] = useState(true);
-  const { isWrongNetwork, isWalletConnected } = useValidateNetwork();
-  const { chain } = usePoolCreationStore();
-
-  return !isWalletConnected ? (
-    <div className="flex justify-center w-full">
-      <div>
-        <Alert type="warning">
-          <div className="flex items-center gap-2">
-            Please connect a wallet and switch to the network you wish to create a pool
-            <ArrowUpRightIcon className="w-4 h-4" />
-          </div>
-        </Alert>
-      </div>
-    </div>
-  ) : isWrongNetwork ? (
-    <div className="flex justify-center w-full">
-      <div>
-        <Alert type="warning">
-          <div className="flex items-center gap-2">
-            You are connected to an unsupported network. To continue, please switch to Sepolia, Ethereum, or Gnosis
-            <ArrowUpRightIcon className="w-4 h-4" />
-          </div>
-        </Alert>
-      </div>
-    </div>
-  ) : chain && selectedNetwork.id !== chain.id ? (
-    <div className="flex justify-center w-full">
-      <div>
-        <Alert type="warning">
-          <div className="flex items-center gap-2">
-            You have already begun the pool configuration process. Please switch back to {chain.name}
-            <ArrowUpRightIcon className="w-4 h-4" />
-          </div>
-        </Alert>
-      </div>
-    </div>
-  ) : (
-    <>
-      {!chain && (
-        <div className="flex justify-center">
-          <div className="w-[1130px]">
-            <Alert type="warning">
-              <div className="flex items-center gap-2">
-                Make sure you switch to your desired network before beginning pool creation. You cannot switch after
-                selecting pool type unless you reset progress
-                <ArrowUpRightIcon className="w-4 h-4" />
-              </div>
-            </Alert>
-          </div>
-        </div>
-      )}
-      {isInfoAlertVisible && (
-        <div className="flex justify-center">
-          <div className="w-[1110px] relative">
-            <Alert type="info">
-              <div className="flex items-center gap-2">
-                For tips and guidance on pool configuration and creation, check out our
-                <Link
-                  target="_blank"
-                  rel="noreferrer"
-                  href="https://docs-v3.balancer.fi/partner-onboarding/balancer-v3/pool-creation.html"
-                  className="link underline"
-                >
-                  partner onboarding documentation
-                </Link>
-              </div>
-            </Alert>
-            <button
-              onClick={() => setIsInfoAlertVisible(false)}
-              className="absolute top-3 right-3 p-1 rounded-full transition-colors text-neutral-700"
-            >
-              <XMarkIcon className="w-5 h-5" />
-            </button>
-          </div>
-        </div>
-      )}
-    </>
-  );
-}

packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/NetworkOptions.tsx

@@ -1,4 +1,3 @@
-import { usePathname } from "next/navigation";
 import { useTheme } from "next-themes";
 import { useAccount, useSwitchChain } from "wagmi";
 import { ArrowsRightLeftIcon } from "@heroicons/react/24/solid";
@@ -17,17 +16,9 @@ export const NetworkOptions = ({ hidden = false }: NetworkOptionsProps) => {
   const { resolvedTheme } = useTheme();
   const isDarkMode = resolvedTheme === "dark";
 
-  // TODO: Update this as v3 adds more network support
-  const pathname = usePathname();
-  // Filter out base and arbitrum for v3 pool creation page
-  const filteredAllowedNetworks =
-    pathname === "/v3"
-      ? allowedNetworks.filter(network => network.id !== 42161 && network.id !== 8453)
-      : allowedNetworks;
-
   return (
     <>
-      {filteredAllowedNetworks
+      {allowedNetworks
         .filter(allowedNetwork => allowedNetwork.id !== chain?.id)
         .map(allowedNetwork => (
           <li key={allowedNetwork.id} className={hidden ? "hidden" : ""}>

packages/nextjs/hooks/balancer/useApiConfig.ts

@@ -18,6 +18,7 @@ export const useApiConfig = () => {
   return { url, chainName };
 };
 
+// TODO: Will need to update this as v3 is deployed to more chains
 export const CHAIN_NAMES: { [key: number]: string } = {
   1: "MAINNET",
   100: "GNOSIS",

packages/nextjs/hooks/v3/index.ts

@@ -2,9 +2,7 @@ export * from "./usePoolCreationStore";
 export * from "./useCreatePool";
 export * from "./useInitializePool";
 export * from "./useValidatePoolCreationInput";
-export * from "./useValidateNetwork";
 export * from "./useMultiSwap";
-export * from "./useVerifyProportionalInit";
 export * from "./useBoostableWhitelist";
 export * from "./useValidateHooksContract";
 export * from "./useValidateRateProvider";

packages/nextjs/hooks/v3/useCreatePool.ts

@@ -56,9 +56,9 @@ export const useCreatePool = () => {
       name,
       symbol,
       swapFeePercentage: parseUnits(swapFeePercentage, SWAP_FEE_PERCENTAGE_DECIMALS),
-      swapFeeManager: swapFeeManager === "" ? zeroAddress : swapFeeManager,
-      pauseManager: pauseManager === "" ? zeroAddress : pauseManager,
-      poolHooksContract: poolHooksContract === "" ? zeroAddress : poolHooksContract,
+      swapFeeManager: swapFeeManager === "" ? zeroAddress : (swapFeeManager as `0x${string}`),
+      pauseManager: pauseManager === "" ? zeroAddress : (pauseManager as `0x${string}`),
+      poolHooksContract: poolHooksContract === "" ? zeroAddress : (poolHooksContract as `0x${string}`),
       enableDonation,
       disableUnbalancedLiquidity,
     };