Merge pull request #29 from balancer/safe-support-for-v3

Safe wallet support for v3 pool creation

README.md

@@ -28,6 +28,8 @@ yarn start
 
 ## Run on Fork
 
+> ⚠️ **Note:** Fork development is only supported for CoW AMMs
+
 1. Add the following ENV vars to a `.env` file located in the root directory
 
 ```

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

@@ -341,8 +341,8 @@ const BoostOpportunityModal = ({
         <h3 className="font-bold text-3xl mb-5">{boostedVariant.name}</h3>
         <div className="text-xl mb-7 px-5">
           Boosted tokens provide your liquidity pool with a layer of sustainable yield. If you select{" "}
-          <b>{boostedVariant.symbol}</b>, all <b>{standardVariant.symbol}</b> in this pool will be supplied to
-          Aave&apos;s lending market to earn additional yield.
+          <b>{boostedVariant.symbol}</b>, all <b>{standardVariant.symbol}</b> in this pool will be supplied to earn
+          additional yield.
           <div className="mt-5">
             Note that if you choose the boosted variant, the necessary rate provider address will be auto-filled for you
           </div>

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

@@ -9,7 +9,7 @@ import { TABS, type TabType, usePoolCreationStore, useValidatePoolCreationInput
 import { bgBeigeGradient } from "~~/utils";
 
 export function PoolConfiguration() {
-  const { selectedTab, updatePool, createPoolTxHash } = usePoolCreationStore();
+  const { selectedTab, updatePool, createPoolTx } = usePoolCreationStore();
   const { targetNetwork } = useTargetNetwork();
   const [isPoolCreationModalOpen, setIsPoolCreationModalOpen] = useState(false);
   const { prev, next } = getAdjacentTabs(selectedTab);
@@ -44,10 +44,10 @@ export function PoolConfiguration() {
     };
   }
 
-  // Force modal to open if user has already sent "Deploy Pool" transaction (always step 1)
+  // Force modal to open if user has already sent "Deploy Pool" transaction (which is step 1)
   useEffect(() => {
-    if (createPoolTxHash) setIsPoolCreationModalOpen(true);
-  }, [createPoolTxHash]);
+    if (createPoolTx.wagmiHash || createPoolTx.safeHash) setIsPoolCreationModalOpen(true);
+  }, [createPoolTx.wagmiHash, createPoolTx.safeHash]);
 
   return (
     <>

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

@@ -11,11 +11,13 @@ import {
 import {
   useBoostableWhitelist,
   useCreatePool,
+  useCreatePoolTxHash,
   useInitializePool,
+  useInitializePoolTxHash,
   useMultiSwap,
+  useMultiSwapTxHash,
   usePoolCreationStore,
   useUserDataStore,
-  useWaitForTransactionReceipt,
 } from "~~/hooks/v3/";
 import { bgBeigeGradient, bgBeigeGradientHover, bgPrimaryGradient } from "~~/utils";
 import { getBlockExplorerTxLink } from "~~/utils/scaffold-eth";
@@ -24,30 +26,36 @@ import { getBlockExplorerTxLink } from "~~/utils/scaffold-eth";
  * Manages the pool creation process using a modal that cannot be closed after execution of the first step
  */
 export function PoolCreationManager({ setIsModalOpen }: { setIsModalOpen: (isOpen: boolean) => void }) {
-  const { step, tokenConfigs, clearPoolStore, createPoolTxHash, swapTxHash, initPoolTxHash, chain } =
+  const { step, tokenConfigs, clearPoolStore, createPoolTx, swapToBoostedTx, initPoolTx, chain } =
     usePoolCreationStore();
   const { clearUserData } = useUserDataStore();
   const { data: boostableWhitelist } = useBoostableWhitelist();
 
   const { mutate: createPool, isPending: isCreatePoolPending, error: createPoolError } = useCreatePool();
+  const { isFetching: isFetchPoolAddressPending, error: fetchPoolAddressError } = useCreatePoolTxHash();
+
   const { mutate: multiSwap, isPending: isMultiSwapPending, error: multiSwapError } = useMultiSwap();
-  const {
-    mutate: initializePool,
-    isPending: isInitializePoolPending,
-    error: initializePoolError,
-  } = useInitializePool();
-  const { isLoadingTxReceipt } = useWaitForTransactionReceipt(); // Fetches tx from tx hash if user disconnects during pending tx state
+  const { isFetching: isMultiSwapTxHashPending, error: multiSwapTxHashError } = useMultiSwapTxHash();
+
+  const { mutate: initPool, isPending: isInitPoolPending, error: initPoolError } = useInitializePool();
+  const { isFetching: isInitPoolTxHashPending, error: initPoolTxHashError } = useInitializePoolTxHash();
 
-  const poolDeploymentUrl = createPoolTxHash ? getBlockExplorerTxLink(chain?.id, createPoolTxHash) : undefined;
-  const poolInitializationUrl = initPoolTxHash ? getBlockExplorerTxLink(chain?.id, initPoolTxHash) : undefined;
-  const multiSwapUrl = swapTxHash ? getBlockExplorerTxLink(chain?.id, swapTxHash) : undefined;
+  const poolDeploymentUrl = createPoolTx.wagmiHash
+    ? getBlockExplorerTxLink(chain?.id, createPoolTx.wagmiHash)
+    : undefined;
+  const multiSwapUrl = swapToBoostedTx.wagmiHash
+    ? getBlockExplorerTxLink(chain?.id, swapToBoostedTx.wagmiHash)
+    : undefined;
+  const poolInitializationUrl = initPoolTx.wagmiHash
+    ? getBlockExplorerTxLink(chain?.id, initPoolTx.wagmiHash)
+    : undefined;
 
   const deployStep = createTransactionStep({
     label: "Deploy Pool",
     blockExplorerUrl: poolDeploymentUrl,
     onSubmit: createPool,
-    isPending: isCreatePoolPending || isLoadingTxReceipt,
-    error: createPoolError,
+    isPending: isCreatePoolPending || isFetchPoolAddressPending,
+    error: createPoolError || fetchPoolAddressError,
   });
 
   const approveOnTokenSteps = tokenConfigs.map((token, idx) => {
@@ -56,7 +64,7 @@ export function PoolCreationManager({ setIsModalOpen }: { setIsModalOpen: (isOpe
     if (!symbol || !decimals)
       return {
         label: "Token Approval",
-        component: <Alert type="error">Invalid token configuration. Missing symbol or decimals.</Alert>,
+        component: <Alert type="error">Missing token info!</Alert>,
       };
 
     return {
@@ -71,8 +79,8 @@ export function PoolCreationManager({ setIsModalOpen }: { setIsModalOpen: (isOpe
       createTransactionStep({
         label: "Swap to Boosted",
         onSubmit: multiSwap,
-        isPending: isMultiSwapPending,
-        error: multiSwapError,
+        isPending: isMultiSwapPending || isMultiSwapTxHashPending,
+        error: multiSwapError || multiSwapTxHashError,
         blockExplorerUrl: multiSwapUrl,
       }),
     );
@@ -102,9 +110,9 @@ export function PoolCreationManager({ setIsModalOpen }: { setIsModalOpen: (isOpe
 
   const initializeStep = createTransactionStep({
     label: "Initialize Pool",
-    onSubmit: initializePool,
-    isPending: isInitializePoolPending || isLoadingTxReceipt,
-    error: initializePoolError,
+    onSubmit: initPool,
+    isPending: isInitPoolPending || isInitPoolTxHashPending,
+    error: initPoolError || initPoolTxHashError,
     blockExplorerUrl: poolInitializationUrl,
   });