feat: change copy multisig message

apps/bridge/src/components/ConnectWallet.tsx

@@ -10,7 +10,7 @@ import { useAccount, useConnect, useDisconnect, useNetwork } from "wagmi";
 import { CHAINS, L1_CHAIN_ID, L2_CHAIN_ID } from "@config/constants";
 
 import Avatar from "@mantle/ui/src/presentational/Avatar";
-import { ArrowDownIcon, Button } from "@mantle/ui";
+import { Button } from "@mantle/ui";
 import { truncateAddress } from "@mantle/utils";
 
 import { BiError } from "react-icons/bi";
@@ -191,7 +191,6 @@ function ConnectWallet() {
           <Avatar walletAddress="address" />
           <div className="flex items-center justify-center gap-2">
             {truncateAddress(getAddress(client.address))}
-            <ArrowDownIcon className="w-3.5 h-3.5" />
           </div>
         </Button>
       ) : (

apps/bridge/src/components/Nav.tsx

@@ -5,24 +5,86 @@ import { Header } from "@mantle/ui/src/navigation/Header";
 import ConnectWallet from "@components/ConnectWallet";
 import { L1_CHAIN_ID, L2_CHAIN_ID } from "@config/constants";
 import StateContext from "@providers/stateContext";
+import { usePathname } from "next/navigation";
+import { NavItem } from "@mantle/ui/src/navigation/NavigationLite";
 
 type NavProps = {
   // eslint-disable-next-line react/require-default-props
   className?: string | undefined;
 };
 
+const NAV_ITEMS: NavItem[] = [
+  {
+    name: "Docs",
+    href: "https://docs.mantle.xyz",
+    internal: true,
+    key: "docs",
+  },
+  {
+    name: "Migrate",
+    href: "https://migratebit.mantle.xyz",
+    internal: true,
+    key: "migrate",
+  },
+  {
+    name: "Bridge",
+    href: "https://bridge.mantle.xyz",
+    internal: true,
+    key: "bridge",
+  },
+  {
+    name: "Account",
+    href: "/account/withdraw",
+    internal: true,
+    key: "account",
+  },
+];
+
+const NAV_ITEMS_TESTNET: NavItem[] = [
+  {
+    name: "Docs",
+    href: "https://docs.mantle.xyz",
+    internal: true,
+    key: "docs",
+  },
+  {
+    name: "Faucet",
+    href: "https://faucet.testnet.mantle.xyz",
+    internal: true,
+    key: "faucet",
+  },
+  {
+    name: "Bridge",
+    href: "https://bridge.testnet.mantle.xyz",
+    internal: true,
+    key: "bridge",
+  },
+  {
+    name: "Account",
+    href: "/account/withdraw",
+    internal: true,
+    key: "account",
+  },
+];
+
 function Nav({ className = "" }: NavProps) {
   const { mobileMenuOpen, setMobileMenuOpen } = useContext(StateContext);
+  const pathName = usePathname();
+
+  const activeKey = pathName.includes("account") ? "account" : "bridge";
+
+  const isTestnet = L1_CHAIN_ID === 5 || L2_CHAIN_ID === 5001;
+  const navItems = isTestnet ? NAV_ITEMS_TESTNET : NAV_ITEMS;
 
   return (
     <Header
       navLite
       walletConnect={<ConnectWallet />}
       className={className}
-      activeKey="bridge"
-      isTestnet={L1_CHAIN_ID === 5 || L2_CHAIN_ID === 5001}
+      activeKey={activeKey}
       mobileMenuOpen={mobileMenuOpen}
       setMobileMenuOpen={setMobileMenuOpen}
+      navItems={navItems}
     />
   );
 }

apps/bridge/src/components/Toast.tsx

@@ -83,6 +83,7 @@ export function Toast({
   type,
   onClose,
   id,
+  title,
 }: ToastProps) {
   const handleClose = (e: React.MouseEvent<HTMLElement>) => {
     e.stopPropagation();
@@ -99,7 +100,10 @@ export function Toast({
       borderLeft={borderLeft}
       onClick={(e) => handleClose(e)}
     >
-      <span className="truncate">{content}</span>
+      <div className="flex flex-col items-start justify-center">
+        {title && <span>{title}</span>}
+        <span className="truncate">{content}</span>
+      </div>
       {typeof ButtonText === "function" ? (
         <ButtonText />
       ) : (

apps/bridge/src/components/bridge/TokenSelect.tsx

@@ -18,6 +18,7 @@ import {
 } from "@config/constants";
 import { formatUnits, parseUnits } from "ethers/lib/utils.js";
 import { formatBigNumberString, localeZero } from "@mantle/utils";
+import { Button } from "@mantle/ui";
 import DirectionLabel from "@components/bridge/utils/DirectionLabel";
 import { MantleLogo } from "@components/bridge/utils/MantleLogo";
 import KindReminder from "@components/bridge/utils/KindReminder";
@@ -42,6 +43,7 @@ export default function TokenSelect({
     setSelectedToken,
     setSelectedTokenAmount,
     setDestinationTokenAmount,
+    client,
   } = useContext(StateContext);
 
   const hasBalance = useMemo(() => {
@@ -191,6 +193,28 @@ export default function TokenSelect({
                 placeholder="0"
                 className="grow border-0 focus:outline-none rounded-tl-lg rounded-bl-lg bg-black py-1.5 px-3 focus:ring-0 focus:ring-white/70 appearance-none"
               />
+              <div className="bg-black flex items-center">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  className={`border ${
+                    client?.isConnected
+                      ? "border-stroke-ghost"
+                      : "border-stroke-disabled"
+                  }`}
+                  disabled={!client?.isConnected}
+                  onClick={() => {
+                    setSelectedTokenAmount(
+                      balances?.[selected?.address || ""] || "0"
+                    );
+                    setDestinationTokenAmount(
+                      balances?.[selected?.address || ""] || "0"
+                    );
+                  }}
+                >
+                  Max
+                </Button>
+              </div>
               <Listbox.Button className="h-12 relative cursor-default rounded-br-lg rounded-tr-lg bg-black py-1.5 pl-5 pr-10 text-left text-white shadow-sm focus:outline-none focus:ring-0 focus:ring-white/70">
                 <span className="flex items-center">
                   {selected?.logoURI && (
@@ -297,41 +321,29 @@ export default function TokenSelect({
             </svg>
           </span>
           <span className="text-[#E22F3D]">Insufficient balance.</span>
-          <button
-            type="button"
-            className="text-[#0A8FF6]"
-            onClick={() => {
-              setSelectedTokenAmount(
-                balances?.[selected?.address || ""] || "0"
-              );
-              setDestinationTokenAmount(
-                balances?.[selected?.address || ""] || "0"
-              );
-            }}
-          >
-            Max
-          </button>
         </div>
       ) : (
         <DirectionLabel
           className="pt-4"
           direction={(selected?.address && "Your balance") || ""}
-          logo={<span />}
+          logo={null}
           chain={
-            (selected?.address &&
-              `${
-                Number.isNaN(
-                  parseFloat(balances?.[selected?.address || ""] || "")
-                )
-                  ? localeZero
-                  : formatBigNumberString(
-                      balances?.[selected?.address || ""] || "",
-                      3,
-                      true,
-                      false
-                    ) || localeZero
-              }${" "}${selected?.symbol}`) ||
-            ""
+            !client?.isConnected
+              ? "Unknown. Connect Wallet."
+              : (selected?.address &&
+                  `${
+                    Number.isNaN(
+                      parseFloat(balances?.[selected?.address || ""] || "")
+                    )
+                      ? localeZero
+                      : formatBigNumberString(
+                          balances?.[selected?.address || ""] || "",
+                          3,
+                          true,
+                          false
+                        ) || localeZero
+                  }${" "}${selected?.symbol}`) ||
+                ""
           }
         />
       )}

apps/bridge/src/components/bridge/dialogue/index.tsx

@@ -44,6 +44,7 @@ export default function Dialogue({
     setTx2Hash,
     setSafeChains,
     isCTAPageOpenRef: isOpenRef,
+    setSelectedTokenAmount,
   } = useContext(StateContext);
 
   const reset = () => {
@@ -56,6 +57,10 @@ export default function Dialogue({
     setCTAPage(CTAPages.Default);
     // restore safeChains to selected chain
     setSafeChains([chainId]);
+    // reset selected token amount
+    if (ctaPage !== CTAPages.Default) {
+      setSelectedTokenAmount("");
+    }
   };
 
   const closeModalAndReset = () => {

apps/bridge/src/components/bridge/utils/DirectionLabel.tsx

@@ -14,15 +14,13 @@ export default function DirectionLabel({
 }) {
   return (
     <div
-      className={`flex space-x-2.5 pb-4 items-center${
-        className ? ` ${className}` : ""
-      }`}
+      className={`flex pb-4 items-center${className ? ` ${className}` : ""}`}
     >
       <Typography variant="body">
         {direction}
         {direction && ":"}
       </Typography>
-      <div className="flex space-x-2 items-center">
+      <div className="flex ml-1 space-x-2 items-center">
         {logo}
         <Typography variant="body"> {chain}</Typography>
       </div>

apps/bridge/src/hooks/useToast.ts

@@ -7,6 +7,7 @@ type Toast = Omit<ToastProps, "onClose">;
 
 export type ToastProps = {
   id: string;
+  title?: string;
   content: ReactNode;
   onClose: (id: string) => void;
   type?: "success" | "error" | "onGoing";

apps/bridge/src/hooks/web3/write/useSwitchToNetwork.ts

@@ -49,7 +49,8 @@ export function useSwitchToNetwork() {
       } else if (switchError.code !== -32000) {
         updateToast({
           id: "switch-error",
-          content: "Error: Unable to switch chains",
+          title: "Error: Disconnect to switch chains.",
+          content: "Please ensure the network is supported by your wallet.",
           type: "error",
           borderLeft: "red-600",
         });
@@ -69,7 +70,8 @@ export function useSwitchToNetwork() {
       if (displayError) {
         updateToast({
           id: "switch-error",
-          content: "Error: Unable to switch chains",
+          title: "Error: Disconnect to switch chains.",
+          content: "Please ensure the network is supported by your wallet.",
           type: "error",
           borderLeft: "red-600",
           buttonText: "Close",

apps/converter/src/components/ConnectWallet.tsx

@@ -13,7 +13,7 @@ import { InjectedConnector } from "wagmi/connectors/injected";
 import { CHAINS, L1_CHAIN_ID } from "@config/constants";
 
 import Avatar from "@mantle/ui/src/presentational/Avatar";
-import { ArrowDownIcon, Button } from "@mantle/ui";
+import { Button } from "@mantle/ui";
 import { truncateAddress } from "@mantle/utils";
 
 import { BiError } from "react-icons/bi";
@@ -183,7 +183,6 @@ function ConnectWallet() {
             <Avatar walletAddress="address" />
             <div className="flex items-center justify-center gap-2">
               {truncateAddress(getAddress(client.address) as `0x${string}`)}
-              <ArrowDownIcon className="w-3.5 h-3.5" />
             </div>
           </Button>
         </Link>