feat: improve privy's connect wallet btn UI

app/(general)/integration/disco/page.tsx

@@ -10,7 +10,6 @@ import { buttonVariants } from "@/components/ui/button"
 import { Card, CardContent, CardHeader } from "@/components/ui/card"
 import { Separator } from "@/components/ui/separator"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { WalletConnect } from "@/integrations/rainbow-kit/wallet-connect"
 import {
   PageHeader,
   PageHeaderCTA,
@@ -24,6 +23,7 @@ import { LightDarkImage } from "@/components/shared/light-dark-image"
 import { DiscoProfileBasic } from "@/integrations/disco/components/disco-profile-basic"
 import { DiscoProfileCredentials } from "@/integrations/disco/components/disco-profile-credentials"
 import { FormCredentialIssuanceProofOfHack } from "@/integrations/disco/components/form-issue-proof-of-hack"
+import { WalletConnect } from "@/integrations/rainbow-kit/wallet-connect"
 import { ButtonSIWELogin } from "@/integrations/siwe/components/button-siwe-login"
 import { IsSignedIn } from "@/integrations/siwe/components/is-signed-in"
 import { IsSignedOut } from "@/integrations/siwe/components/is-signed-out"

app/(general)/integration/erc1155/page.tsx

@@ -6,7 +6,6 @@ import { LuBook } from "react-icons/lu"
 
 import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
-import { WalletConnect } from "@/integrations/rainbow-kit/wallet-connect"
 import {
   PageHeader,
   PageHeaderCTA,
@@ -28,6 +27,7 @@ import {
 } from "@/integrations/erc1155"
 import { Erc1155SetTokenStorage } from "@/integrations/erc1155/components/erc1155-set-token-storage"
 import { useErc1155TokenStorage } from "@/integrations/erc1155/hooks/use-erc1155-token-storage"
+import { WalletConnect } from "@/integrations/rainbow-kit/wallet-connect"
 
 const integrationData = turboIntegrations.erc1155
 

app/(general)/integration/erc20/page.tsx

@@ -7,7 +7,6 @@ import { LuBook } from "react-icons/lu"
 import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
 import { Card, CardContent } from "@/components/ui/card"
-import { WalletConnect } from "@/integrations/rainbow-kit/wallet-connect"
 import {
   PageHeader,
   PageHeaderCTA,
@@ -24,6 +23,7 @@ import { Erc20SetTokenStorage } from "@/integrations/erc20/components/erc20-set-
 import { ERC20WriteMint } from "@/integrations/erc20/components/erc20-write-mint"
 import { ERC20WriteTransfer } from "@/integrations/erc20/components/erc20-write-transfer"
 import { useERC20TokenStorage } from "@/integrations/erc20/hooks/use-erc20-token-storage"
+import { WalletConnect } from "@/integrations/rainbow-kit/wallet-connect"
 
 export default function Erc20Page() {
   const [token] = useERC20TokenStorage()

app/(general)/integration/erc721/page.tsx

@@ -6,7 +6,6 @@ import { LuBook } from "react-icons/lu"
 
 import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
-import { WalletConnect } from "@/integrations/rainbow-kit/wallet-connect"
 import {
   PageHeader,
   PageHeaderCTA,
@@ -26,6 +25,7 @@ import {
 } from "@/integrations/erc721"
 import { Erc721SetTokenStorage } from "@/integrations/erc721/components/erc721-set-token-storage"
 import { useErc721TokenStorage } from "@/integrations/erc721/hooks/use-erc721-token-storage"
+import { WalletConnect } from "@/integrations/rainbow-kit/wallet-connect"
 
 export default function ERC721Page() {
   const [token] = useErc721TokenStorage()

app/(general)/integration/etherscan/page.tsx

@@ -8,7 +8,6 @@ import { useNetwork } from "wagmi"
 import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
 import { Card, CardContent } from "@/components/ui/card"
-import { WalletConnect } from "@/integrations/rainbow-kit/wallet-connect"
 import {
   PageHeader,
   PageHeaderCTA,
@@ -21,6 +20,7 @@ import { IsWalletDisconnected } from "@/components/shared/is-wallet-disconnected
 import { LightDarkImage } from "@/components/shared/light-dark-image"
 import TransactionsTable from "@/integrations/etherscan/components/transactions-table"
 import { useEtherscanAccountTransactions } from "@/integrations/etherscan/hooks/use-etherscan-account-transactions"
+import { WalletConnect } from "@/integrations/rainbow-kit/wallet-connect"
 import { ButtonSIWELogin } from "@/integrations/siwe/components/button-siwe-login"
 import { IsSignedIn } from "@/integrations/siwe/components/is-signed-in"
 import { IsSignedOut } from "@/integrations/siwe/components/is-signed-out"

app/(general)/integration/gelato/page.tsx

@@ -7,7 +7,6 @@ import { LuBook } from "react-icons/lu"
 
 import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
-import { WalletConnect } from "@/integrations/rainbow-kit/wallet-connect"
 import {
   PageHeader,
   PageHeaderCTA,
@@ -19,6 +18,7 @@ import { IsWalletConnected } from "@/components/shared/is-wallet-connected"
 import { IsWalletDisconnected } from "@/components/shared/is-wallet-disconnected"
 import { LightDarkImage } from "@/components/shared/light-dark-image"
 import { ActiveTasks, useIsAutomateSupported } from "@/integrations/gelato"
+import { WalletConnect } from "@/integrations/rainbow-kit/wallet-connect"
 
 export default function GelatoPage() {
   const isAutomateSupported = useIsAutomateSupported()

app/(general)/integration/gitcoin-passport/page.tsx

@@ -1,9 +1,9 @@
 "use client"
 
-import { WalletConnect } from "@/integrations/rainbow-kit/wallet-connect"
 import { IsWalletConnected } from "@/components/shared/is-wallet-connected"
 import { IsWalletDisconnected } from "@/components/shared/is-wallet-disconnected"
 import { ListStamps } from "@/integrations/gitcoin-passport/components/list-stamps"
+import { WalletConnect } from "@/integrations/rainbow-kit/wallet-connect"
 
 export default function PageIntegration() {
   return (

app/(general)/integration/gitcoin-passport/score-gated/page.tsx

@@ -1,10 +1,10 @@
 "use client"
 
 import { Card, CardContent, CardTitle } from "@/components/ui/card"
-import { WalletConnect } from "@/integrations/rainbow-kit/wallet-connect"
 import { IsWalletConnected } from "@/components/shared/is-wallet-connected"
 import { IsWalletDisconnected } from "@/components/shared/is-wallet-disconnected"
 import { ScoreGate } from "@/integrations/gitcoin-passport/components/score-gate"
+import { WalletConnect } from "@/integrations/rainbow-kit/wallet-connect"
 
 export default function PageIntegration() {
   return (

app/(general)/integration/gitcoin-passport/stamp-gated/page.tsx

@@ -1,10 +1,10 @@
 "use client"
 
 import { Card, CardContent, CardTitle } from "@/components/ui/card"
-import { WalletConnect } from "@/integrations/rainbow-kit/wallet-connect"
 import { IsWalletConnected } from "@/components/shared/is-wallet-connected"
 import { IsWalletDisconnected } from "@/components/shared/is-wallet-disconnected"
 import { StampGate } from "@/integrations/gitcoin-passport/components/stamp-gate"
+import { WalletConnect } from "@/integrations/rainbow-kit/wallet-connect"
 
 export default function PageIntegration() {
   return (

app/(general)/integration/lens-protocol/layout.tsx

@@ -8,7 +8,6 @@ import { LuBook } from "react-icons/lu"
 
 import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
-import { WalletConnect } from "@/integrations/rainbow-kit/wallet-connect"
 import {
   PageHeader,
   PageHeaderCTA,
@@ -21,6 +20,7 @@ import { IsWalletDisconnected } from "@/components/shared/is-wallet-disconnected
 import { LightDarkImage } from "@/components/shared/light-dark-image"
 import { Navbar } from "@/integrations/lens-protocol/components/navbar"
 import { lensProviderConfig } from "@/integrations/lens-protocol/lens-provider"
+import { WalletConnect } from "@/integrations/rainbow-kit/wallet-connect"
 
 export default function LayoutIntegration({
   children,

app/(general)/integration/lit-protocol/page.tsx

@@ -8,7 +8,6 @@ import { LuBook } from "react-icons/lu"
 import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { WalletConnect } from "@/integrations/rainbow-kit/wallet-connect"
 import {
   PageHeader,
   PageHeaderCTA,
@@ -21,6 +20,7 @@ import { IsWalletDisconnected } from "@/components/shared/is-wallet-disconnected
 import { LightDarkImage } from "@/components/shared/light-dark-image"
 import { FormLitDecryptMessage } from "@/integrations/lit-protocol/components/form-lit-decrypt-message"
 import { FormLitEncryptMessage } from "@/integrations/lit-protocol/components/form-lit-encrypt-message"
+import { WalletConnect } from "@/integrations/rainbow-kit/wallet-connect"
 
 export default function LitProtocolPage() {
   const searchParams = useSearchParams()

app/(general)/integration/pooltogether-v4/page.tsx

@@ -5,7 +5,6 @@ import { LuBook } from "react-icons/lu"
 import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { WalletConnect } from "@/integrations/rainbow-kit/wallet-connect"
 import {
   PageHeader,
   PageHeaderCTA,
@@ -18,6 +17,7 @@ import { IsWalletDisconnected } from "@/components/shared/is-wallet-disconnected
 import { LightDarkImage } from "@/components/shared/light-dark-image"
 import { PoolTogetherFormDeposit } from "@/integrations/pooltogether-v4/components/form-yield-source-prize-pool-deposit"
 import { PoolTogetherFormWithdraw } from "@/integrations/pooltogether-v4/components/form-yield-source-prize-pool-withdraw"
+import { WalletConnect } from "@/integrations/rainbow-kit/wallet-connect"
 
 export default function PoolTogetherPage() {
   return (

app/(general)/integration/push-protocol/page.tsx

@@ -18,7 +18,6 @@ import {
   SelectValue,
 } from "@/components/ui/select"
 import { Separator } from "@/components/ui/separator"
-import { WalletConnect } from "@/integrations/rainbow-kit/wallet-connect"
 import {
   PageHeader,
   PageHeaderCTA,
@@ -37,6 +36,7 @@ import {
   NotificationBell,
 } from "@/integrations/push-protocol"
 import { PUSH_CHANNEL_ADDRESS } from "@/integrations/push-protocol/utils/constants"
+import { WalletConnect } from "@/integrations/rainbow-kit/wallet-connect"
 
 export default function PushProtocolPage() {
   const [mockedNotifications, setMockedNotifications] = useState<

app/(general)/integration/sign-in-with-ethereum/page.tsx

@@ -4,7 +4,6 @@ import { LuBook } from "react-icons/lu"
 
 import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
-import { WalletConnect } from "@/integrations/rainbow-kit/wallet-connect"
 import {
   PageHeader,
   PageHeaderCTA,
@@ -15,6 +14,7 @@ import { PageSection } from "@/components/layout/page-section"
 import { IsWalletConnected } from "@/components/shared/is-wallet-connected"
 import { IsWalletDisconnected } from "@/components/shared/is-wallet-disconnected"
 import { LightDarkImage } from "@/components/shared/light-dark-image"
+import { WalletConnect } from "@/integrations/rainbow-kit/wallet-connect"
 import { ButtonSIWELogin } from "@/integrations/siwe/components/button-siwe-login"
 import { ButtonSIWELogout } from "@/integrations/siwe/components/button-siwe-logout"
 import { IsSignedIn } from "@/integrations/siwe/components/is-signed-in"

app/(general)/layout.tsx

@@ -3,7 +3,7 @@ import { ReactNode } from "react"
 import { NetworkStatus } from "@/components/blockchain/network-status"
 import { Footer } from "@/components/layout/footer"
 import { SiteHeader } from "@/components/layout/site-header"
-import { WalletConnect } from '@/integrations/rainbow-kit/wallet-connect'
+import { WalletConnect } from "@/integrations/rainbow-kit/wallet-connect"
 
 interface RootLayoutProps {
   children: ReactNode

app/admin/layout.tsx

@@ -1,20 +1,23 @@
-'use client'
+"use client"
 
-import classNames from 'clsx'
-import Image from 'next/image'
+import Image from "next/image"
+import classNames from "clsx"
 
-import { DashboardFooter } from '@/components/layout/dashboard-footer'
-import { DashboardHeader } from '@/components/layout/dashboard-header'
-import { MenuAdminSidebar } from '@/components/layout/menu-admin-sidebar'
-import { UserDropdown } from '@/components/layout/user-dropdown'
-import { BranchColorMode } from '@/components/shared/branch-color-mode'
-import { LinkComponent } from '@/components/shared/link-component'
-import { ResponsiveMobileAndDesktop } from '@/components/shared/responsive-mobile-and-desktop'
-import { siteConfig } from '@/config/site'
-import { WalletConnect } from '@/integrations/rainbow-kit/wallet-connect'
+import { siteConfig } from "@/config/site"
+import { DashboardFooter } from "@/components/layout/dashboard-footer"
+import { DashboardHeader } from "@/components/layout/dashboard-header"
+import { MenuAdminSidebar } from "@/components/layout/menu-admin-sidebar"
+import { UserDropdown } from "@/components/layout/user-dropdown"
+import { BranchColorMode } from "@/components/shared/branch-color-mode"
+import { LinkComponent } from "@/components/shared/link-component"
+import { ResponsiveMobileAndDesktop } from "@/components/shared/responsive-mobile-and-desktop"
+import { WalletConnect } from "@/integrations/rainbow-kit/wallet-connect"
 
 export default function AdminLayout({ children }: any) {
-  const classes = classNames('AdminLayout', 'bg-gradient-dark h-screen lg:grid lg:grid-cols-12')
+  const classes = classNames(
+    "AdminLayout",
+    "bg-gradient-dark h-screen lg:grid lg:grid-cols-12"
+  )
   return (
     <>
       <div className={classes}>
@@ -24,8 +27,18 @@ export default function AdminLayout({ children }: any) {
               <div className="flex p-4">
                 <LinkComponent href="/" className="flex flex-1 items-center ">
                   <BranchColorMode>
-                    <Image alt="Logo" src="/logo-dark.png" width={32} height={32} />
-                    <Image alt="Logo" src="/logo-white.png" width={32} height={32} />
+                    <Image
+                      alt="Logo"
+                      src="/logo-dark.png"
+                      width={32}
+                      height={32}
+                    />
+                    <Image
+                      alt="Logo"
+                      src="/logo-white.png"
+                      width={32}
+                      height={32}
+                    />
                   </BranchColorMode>
                 </LinkComponent>
                 <div className="">
@@ -37,18 +50,33 @@ export default function AdminLayout({ children }: any) {
               <div className="flex p-4 py-6">
                 <LinkComponent className="flex items-center" href="/">
                   <BranchColorMode>
-                    <Image alt="Logo" src="/logo-dark.png" width={32} height={32} />
-                    <Image alt="Logo" src="/logo-white.png" width={32} height={32} />
+                    <Image
+                      alt="Logo"
+                      src="/logo-dark.png"
+                      width={32}
+                      height={32}
+                    />
+                    <Image
+                      alt="Logo"
+                      src="/logo-white.png"
+                      width={32}
+                      height={32}
+                    />
                   </BranchColorMode>
-                  <h1 className="text-gradient-sand ml-2 text-2xl font-bold">{siteConfig.name}</h1>
+                  <h1 className="text-gradient-sand ml-2 text-2xl font-bold">
+                    {siteConfig.name}
+                  </h1>
                 </LinkComponent>
               </div>
               <div className="flex-1 px-8 py-5">
                 <MenuAdminSidebar className="mt-4 flex-1" />
               </div>
               <div className="px-8">
                 <WalletConnect />
-                <LinkComponent href="/dashboard" className="link my-2 mt-8 inline-block text-xs">
+                <LinkComponent
+                  href="/dashboard"
+                  className="link my-2 mt-8 inline-block text-xs"
+                >
                   Dashboard
                 </LinkComponent>
               </div>

app/dashboard/layout.tsx

@@ -7,13 +7,12 @@ import { siteConfig } from "@/config/site"
 import { ScrollArea } from "@/components/ui/scroll-area"
 import { SidebarNav } from "@/components/layout/sidebar-nav"
 import { SiteHeader } from "@/components/layout/site-header"
+import { WalletConnect } from "@/integrations/rainbow-kit/wallet-connect"
 
 interface DashboardLayoutProps {
   children: React.ReactNode
 }
 
-import { WalletConnect } from '@/integrations/rainbow-kit/wallet-connect'
-
 export default function DashboardLayout({ children }: DashboardLayoutProps) {
   return (
     <div className="relative flex min-h-screen flex-col">

app/layout.tsx

@@ -3,12 +3,12 @@ import "@/styles/globals.css"
 
 import { ReactNode } from "react"
 import { env } from "@/env.mjs"
-import RootProvider from '@/integrations/rainbow-kit/root-provider'
-import { cn } from '@/lib/utils'
 
 import { siteConfig } from "@/config/site"
 import { fontSans } from "@/lib/fonts"
+import { cn } from "@/lib/utils"
 import { Toaster } from "@/components/ui/toaster"
+import RootProvider from "@/integrations/rainbow-kit/root-provider"
 
 const url = env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000"