[MNY-270] Remove in-app wallet options from bridge page connect modal (#8270)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces a centralized `appMetadata` constant for consistent branding across various components and refactors the code to utilize this constant, reducing redundancy and improving maintainability.

### Detailed summary
- Added `appMetadata` constant in `connect.ts`.
- Refactored `NebulaConnectButton` to use `appMetadata`.
- Updated `PageHeader` to include `wallets` prop in `PublicPageConnectButton`.
- Created `bridgeWallets` array in `UniversalBridgeEmbed` using `createWallet` with `appMetadata`.
- Modified multiple components to utilize `appMetadata` instead of hardcoded values.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

* **New Features**
  * Wallet selection is now customizable for Buy, Swap, and Bridge flows.
  * App branding metadata centralized for consistent presentation across all wallet connection points.
  * Bridge now includes preset wallet options to streamline onboarding and autoconnect behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: MananTank

apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx

@@ -4,6 +4,7 @@ import { useTheme } from "next-themes";
 import { useEffect, useMemo, useRef, useState } from "react";
 import type { Chain } from "thirdweb";
 import { BuyWidget, SwapWidget } from "thirdweb/react";
+import type { Wallet } from "thirdweb/wallets";
 import {
   reportAssetBuyCancelled,
   reportAssetBuyFailed,
@@ -25,6 +26,7 @@ import {
 import { cn } from "@/lib/utils";
 import { parseError } from "@/utils/errorParser";
 import { getSDKTheme } from "@/utils/sdk-component-theme";
+import { appMetadata } from "../../constants/connect";
 import { getConfiguredThirdwebClient } from "../../constants/thirdweb.server";
 
 type PageType = "asset" | "bridge" | "chain";
@@ -35,6 +37,7 @@ export function BuyAndSwapEmbed(props: {
   buyAmount: string | undefined;
   pageType: PageType;
   isTestnet: boolean | undefined;
+  wallets?: Wallet[];
 }) {
   const { theme } = useTheme();
   const [tab, setTab] = useState<"buy" | "swap">("swap");
@@ -91,6 +94,8 @@ export function BuyAndSwapEmbed(props: {
           client={client}
           connectOptions={{
             autoConnect: false,
+            wallets: props.wallets,
+            appMetadata: appMetadata,
           }}
           onError={(e, quote) => {
             const errorMessage = parseError(e);
@@ -184,6 +189,11 @@ export function BuyAndSwapEmbed(props: {
           client={client}
           theme={themeObj}
           className="!rounded-2xl !border-none"
+          connectOptions={{
+            autoConnect: false,
+            wallets: props.wallets,
+            appMetadata: appMetadata,
+          }}
           prefill={{
             // buy this token by default
             buyToken: {

apps/dashboard/src/@/components/connect-wallet/index.tsx

@@ -17,6 +17,7 @@ import { resetAnalytics } from "@/analytics/reset";
 import { CustomChainRenderer } from "@/components/misc/CustomChainRenderer";
 import { LazyConfigureNetworkModal } from "@/components/misc/configure-networks/LazyConfigureNetworkModal";
 import { Button } from "@/components/ui/button";
+import { appMetadata } from "@/constants/connect";
 import { popularChains } from "@/constants/popularChains";
 import { useAllChainsData } from "@/hooks/chains/allChains";
 import { useFavoriteChainIds } from "@/hooks/favorite-chains";
@@ -138,11 +139,7 @@ export const CustomConnectWallet = (props: {
   return (
     <>
       <ConnectButton
-        appMetadata={{
-          logoUrl: "https://thirdweb.com/favicon.ico",
-          name: "thirdweb",
-          url: "https://thirdweb.com",
-        }}
+        appMetadata={appMetadata}
         chain={props.chain}
         chains={allChainsV5}
         client={client}
@@ -280,11 +277,7 @@ export function useCustomConnectModal() {
   return useCallback(
     (options: { chain?: Chain; client: ThirdwebClient }) => {
       return connect({
-        appMetadata: {
-          logoUrl: "https://thirdweb.com/favicon.ico",
-          name: "thirdweb",
-          url: "https://thirdweb.com",
-        },
+        appMetadata,
         chain: options?.chain,
         client: options.client,
         privacyPolicyUrl: "/privacy-policy",

apps/dashboard/src/@/constants/connect.ts

@@ -0,0 +1,5 @@
+export const appMetadata = {
+  logoUrl: "https://thirdweb.com/favicon.ico",
+  name: "thirdweb",
+  url: "https://thirdweb.com",
+};

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/PublicPageConnectButton.tsx

@@ -2,6 +2,8 @@
 
 import { useTheme } from "next-themes";
 import { ConnectButton } from "thirdweb/react";
+import type { Wallet } from "thirdweb/wallets";
+import { appMetadata } from "@/constants/connect";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import { useAllChainsData } from "@/hooks/chains/allChains";
 import { getSDKTheme } from "@/utils/sdk-component-theme";
@@ -10,18 +12,15 @@ const client = getClientThirdwebClient();
 
 export function PublicPageConnectButton(props: {
   connectButtonClassName?: string;
+  wallets?: Wallet[];
 }) {
   const { theme } = useTheme();
   const t = theme === "light" ? "light" : "dark";
   const { allChainsV5 } = useAllChainsData();
 
   return (
     <ConnectButton
-      appMetadata={{
-        logoUrl: "https://thirdweb.com/favicon.ico",
-        name: "thirdweb",
-        url: "https://thirdweb.com",
-      }}
+      appMetadata={appMetadata}
       autoConnect={false}
       chains={allChainsV5}
       client={client}
@@ -38,6 +37,7 @@ export function PublicPageConnectButton(props: {
       }}
       // we have an AutoConnect already added in root layout with AA configuration
       theme={getSDKTheme(t)}
+      wallets={props.wallets}
     />
   );
 }

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/components/NebulaConnectButton.tsx

@@ -11,6 +11,7 @@ import {
   useActiveWalletConnectionStatus,
 } from "thirdweb/react";
 import { Button } from "@/components/ui/button";
+import { appMetadata } from "@/constants/connect";
 import { useAllChainsData } from "@/hooks/chains/allChains";
 import { cn } from "@/lib/utils";
 import { getSDKTheme } from "@/utils/sdk-component-theme";
@@ -65,11 +66,7 @@ export const NebulaConnectWallet = (props: {
   const { customDetailsButton } = props;
   return (
     <ConnectButton
-      appMetadata={{
-        logoUrl: "https://thirdweb.com/favicon.ico",
-        name: "thirdweb",
-        url: "https://thirdweb.com",
-      }}
+      appMetadata={appMetadata}
       autoConnect={false}
       chains={allChainsV5}
       client={props.client}

apps/dashboard/src/app/bridge/components/client/UniversalBridgeEmbed.tsx

@@ -1,9 +1,21 @@
 "use client";
 
 import type { TokenInfo } from "thirdweb/react";
+import { createWallet } from "thirdweb/wallets";
 import { BuyAndSwapEmbed } from "@/components/blocks/BuyAndSwapEmbed";
+import { appMetadata } from "@/constants/connect";
 import { useV5DashboardChain } from "@/hooks/chains/v5-adapter";
 
+export const bridgeWallets = [
+  createWallet("io.metamask"),
+  createWallet("com.coinbase.wallet", {
+    appMetadata,
+  }),
+  createWallet("me.rainbow"),
+  createWallet("io.rabby"),
+  createWallet("io.zerion.wallet"),
+];
+
 export function UniversalBridgeEmbed({
   chainId,
   token,
@@ -18,6 +30,7 @@ export function UniversalBridgeEmbed({
   return (
     <BuyAndSwapEmbed
       chain={chain}
+      wallets={bridgeWallets}
       buyAmount={amount}
       tokenAddress={token?.address}
       pageType="bridge"

apps/dashboard/src/app/bridge/components/header.tsx

@@ -3,6 +3,7 @@ import { ToggleThemeButton } from "@/components/blocks/color-mode-toggle";
 import { cn } from "@/lib/utils";
 import { PublicPageConnectButton } from "../../(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/PublicPageConnectButton";
 import { ThirdwebMiniLogo } from "../../(app)/components/ThirdwebMiniLogo";
+import { bridgeWallets } from "./client/UniversalBridgeEmbed";
 
 export function PageHeader(props: { containerClassName?: string }) {
   return (
@@ -31,7 +32,10 @@ export function PageHeader(props: { containerClassName?: string }) {
             Docs
           </Link>
           <ToggleThemeButton className="bg-transparent" />
-          <PublicPageConnectButton connectButtonClassName="!rounded-full" />
+          <PublicPageConnectButton
+            connectButtonClassName="!rounded-full"
+            wallets={bridgeWallets}
+          />
         </div>
       </header>
     </div>