add safe wallet warning to v3

balancer · Jan 7, 2025 · 716d986 · 716d986
1 parent d78b2bf
commit 716d986
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 18 deletions.
diff --git a/packages/nextjs/app/cow/page.tsx b/packages/nextjs/app/cow/page.tsx
@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
 import { PoolConfiguration, PoolCreation } from "./_components";
 import type { NextPage } from "next";
 import { CowAMM } from "~~/components/assets/CowAMM";
-import { Alert } from "~~/components/common/Alert";
+import { SafeWalletAlert } from "~~/components/common";
 import { usePoolCreationStore } from "~~/hooks/cow/usePoolCreationStore";
 import { useIsSafeWallet } from "~~/hooks/safe";
 
@@ -28,10 +28,7 @@ const CowAmm: NextPage = () => {
             {!isMounted ? (
               <CowLoadingSkeleton />
             ) : isSafeWallet ? (
-              <Alert type="warning">
-                Safe wallets are not yet supported for CoW AMM pool creation. Please create the pool with an externally
-                owned account, and then add liquidity on balancer.fi with your Safe wallet.
-              </Alert>
+              <SafeWalletAlert />
             ) : !poolCreation ? (
               <PoolConfiguration />
             ) : (

diff --git a/packages/nextjs/app/v3/page.tsx b/packages/nextjs/app/v3/page.tsx
@@ -6,15 +6,10 @@ import { PoolConfiguration, PoolDetails } from "./_components";
 import type { NextPage } from "next";
 import { ArrowUpRightIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { BalancerLogo } from "~~/components/assets/BalancerLogo";
-import { Alert, ContactSupportModal, PoolStateResetModal } from "~~/components/common";
+import { Alert, ContactSupportModal, PoolStateResetModal, SafeWalletAlert } from "~~/components/common";
+import { useIsSafeWallet } from "~~/hooks/safe";
 import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
-import {
-  usePoolCreationStore,
-  usePoolStoreDebug,
-  useUserDataStore,
-  useUserDataStoreDebug,
-  useValidateNetwork,
-} from "~~/hooks/v3";
+import { usePoolCreationStore, useUserDataStore, useValidateNetwork } from "~~/hooks/v3";
 
 const BalancerV3: NextPage = () => {
   const { isWrongNetwork, isWalletConnected } = useValidateNetwork();
@@ -23,14 +18,13 @@ const BalancerV3: NextPage = () => {
   const { targetNetwork: selectedNetwork } = useTargetNetwork();
   const [isInfoAlertVisible, setIsInfoAlertVisible] = useState(true);
 
-  usePoolStoreDebug();
-  useUserDataStoreDebug();
+  const isSafeWallet = useIsSafeWallet();
 
   return (
     <div className="flex justify-center">
       <div className="flex justify-center py-10 px-5 lg:px-10 w-full max-w-screen-2xl">
         <div className="flex flex-col justify-center gap-5 w-full">
-          <div className="flex gap-4 justify-center mb-5">
+          <div className="flex gap-4 justify-center">
             <BalancerLogo width="55px" />
             <h1 className="text-3xl md:text-5xl font-bold text-center mb-0">Balancer v3</h1>
           </div>
@@ -46,6 +40,10 @@ const BalancerV3: NextPage = () => {
                 </Alert>
               </div>
             </div>
+          ) : isSafeWallet ? (
+            <div>
+              <SafeWalletAlert />
+            </div>
           ) : isWrongNetwork ? (
             <div className="flex justify-center w-full">
               <div>

diff --git a/packages/nextjs/components/common/Alert.tsx b/packages/nextjs/components/common/Alert.tsx
@@ -1,3 +1,4 @@
+import Link from "next/link";
 import {
   CheckCircleIcon,
   ExclamationCircleIcon,
@@ -9,6 +10,7 @@ interface AlertProps {
   type: "error" | "warning" | "success" | "info"; // `type` is required
   showIcon?: boolean;
   children?: React.ReactNode; // `children` can be optional
+  classNames?: string;
 }
 
 const alertTypeMap = {
@@ -21,12 +23,28 @@ const alertTypeMap = {
   info: { styles: "bg-[#93c6ff]", icon: <InformationCircleIcon className="w-6 h-6" /> },
 };
 
-export const Alert: React.FC<AlertProps> = ({ children, type, showIcon = true }) => {
+export const Alert: React.FC<AlertProps> = ({ children, type, classNames, showIcon = true }) => {
   const { styles, icon } = alertTypeMap[type];
   return (
-    <div className={`${styles} text-neutral-800 flex items-center gap-2 rounded-lg p-3 overflow-auto w-full`}>
+    <div
+      className={`${styles} ${classNames} text-neutral-800 flex items-start gap-2 rounded-lg p-3 overflow-auto w-full`}
+    >
       {showIcon && <div>{icon}</div>}
       <div>{children}</div>
     </div>
   );
 };
+
+export const SafeWalletAlert: React.FC = () => {
+  return (
+    <div className="flex justify-center">
+      <Alert type="warning" classNames="max-w-[550px]">
+        Safe wallets are not yet supported for pool creation. However, you can create a pool using an externally owned
+        account, and then use a safe wallet to add more liquidity on{" "}
+        <Link className="link" href="https://balancer.fi">
+          balancer.fi
+        </Link>
+      </Alert>
+    </div>
+  );
+};