add wallet connect

.changeset/famous-deers-sell.md

@@ -0,0 +1,6 @@
+---
+"@status-im/status-network": patch
+"hub": patch
+---
+
+add wallet connect

apps/hub/package.json

@@ -15,24 +15,30 @@
   },
   "dependencies": {
     "@status-im/colors": "workspace:*",
-    "@status-im/icons": "workspace:*",
     "@status-im/components": "workspace:*",
+    "@status-im/icons": "workspace:*",
     "@status-im/status-network": "workspace:*",
+    "@status-im/wallet": "workspace:*",
+    "@tanstack/react-query": "5.66.0",
     "@vercel/analytics": "^1.5.0",
+    "connectkit": "^1.9.0",
     "cva": "1.0.0-beta.1",
     "framer-motion": "^12.0.6",
-    "next": "15.1.6",
+    "next": "15.3.0",
     "next-mdx-remote": "^5.0.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "pino-pretty": "^13.1.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "rehype-slug": "^6.0.0",
     "ts-pattern": "^5.6.2",
+    "viem": "2.x",
+    "wagmi": "2.15.2",
     "zod": "^3.24.1"
   },
   "devDependencies": {
+    "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
     "@next/eslint-plugin-next": "15.3.0",
     "@status-im/eslint-config": "workspace:*",
-    "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",

apps/hub/postcss.config.mjs

@@ -3,6 +3,6 @@ const config = {
   plugins: {
     tailwindcss: {},
   },
-};
+}
 
-export default config;
+export default config

apps/hub/src/app/_components/connect-button.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+import { Button, ShortenAddress } from '@status-im/status-network/components'
+import { ConnectKitButton } from 'connectkit'
+import { useAccount } from 'wagmi'
+
+import type { ComponentProps } from 'react'
+
+type Props = {
+  size?: ComponentProps<typeof Button>['size']
+  label?: string
+}
+
+const ConnectButton = (props: Props) => {
+  const { size = '32', label = 'Connect wallet' } = props
+
+  const { address, isConnected } = useAccount()
+
+  return (
+    <ConnectKitButton.Custom>
+      {({ show }) => {
+        return (
+          <Button
+            onClick={show}
+            variant={isConnected ? 'secondary' : 'primary'}
+            size={size}
+          >
+            {address && isConnected ? (
+              <ShortenAddress address={address} />
+            ) : (
+              label
+            )}
+          </Button>
+        )
+      }}
+    </ConnectKitButton.Custom>
+  )
+}
+
+export { ConnectButton }
+export type { Props as ConnectButtonProps }

apps/hub/src/app/_components/top-bar.tsx

@@ -2,12 +2,11 @@
 
 import { Button, IconButton, Tag } from '@status-im/components'
 import { SettingsIcon } from '@status-im/icons/20'
-import {
-  Button as ButtonPrimary,
-  Link,
-} from '@status-im/status-network/components'
+import { Link } from '@status-im/status-network/components'
 import Image from 'next/image'
 
+import { ConnectButton } from './connect-button'
+
 interface TopBarProps {
   onMenuToggle: () => void
 }
@@ -64,7 +63,7 @@ export function TopBar({ onMenuToggle }: TopBarProps) {
           </div>
 
           {/* Connect Wallet Button */}
-          <ButtonPrimary size="32">Connect Wallet</ButtonPrimary>
+          <ConnectButton />
 
           {/* Settings Button */}
           <IconButton variant="ghost" icon={<SettingsIcon />} />

apps/hub/src/app/_providers/connectkit-provider.tsx

@@ -0,0 +1,15 @@
+'use client'
+
+import { ConnectKitProvider as ConnectKit } from 'connectkit'
+
+type ConnectKitProviderProps = {
+  children: React.ReactNode
+}
+
+export function ConnectKitProvider({ children }: ConnectKitProviderProps) {
+  return (
+    <ConnectKit theme="auto" mode="light">
+      {children}
+    </ConnectKit>
+  )
+}

apps/hub/src/app/_providers/index.tsx

@@ -0,0 +1,19 @@
+'use client'
+
+import { ConnectKitProvider } from './connectkit-provider'
+import { QueryClientProvider } from './query-client-provider'
+import { WagmiProvider } from './wagmi-provider'
+
+interface ProvidersProps {
+  children: React.ReactNode
+}
+
+export function Providers({ children }: ProvidersProps) {
+  return (
+    <WagmiProvider>
+      <QueryClientProvider>
+        <ConnectKitProvider>{children}</ConnectKitProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
+  )
+}

apps/hub/src/app/_providers/query-client-provider.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+import type React from 'react'
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+      retryOnMount: false,
+      refetchOnMount: false,
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+    },
+  },
+})
+
+type Props = {
+  children: React.ReactNode
+}
+
+function _QueryClientProvider(props: Props) {
+  const { children } = props
+
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  )
+}
+
+export { _QueryClientProvider as QueryClientProvider }

apps/hub/src/app/_providers/wagmi-provider.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import { createConfig, http, WagmiProvider as WagmiProviderBase } from 'wagmi'
+import { mainnet } from 'wagmi/chains'
+import { injected } from 'wagmi/connectors'
+
+import type React from 'react'
+
+export const config = createConfig({
+  chains: [mainnet],
+  ssr: false,
+  connectors: [injected()],
+  transports: {
+    // todo: replace public clients
+    [mainnet.id]: http(),
+  },
+})
+
+declare module 'wagmi' {
+  interface Register {
+    config: typeof config
+  }
+}
+
+type Props = {
+  children: React.ReactNode
+}
+
+function WagmiProvider(props: Props) {
+  const { children } = props
+
+  return (
+    <WagmiProviderBase
+      config={
+        config as unknown as React.ComponentProps<
+          typeof WagmiProviderBase
+        >['config']
+      }
+    >
+      {children}
+    </WagmiProviderBase>
+  )
+}
+
+export { config as wagmiConfig, WagmiProvider }

apps/hub/src/app/layout.tsx

@@ -2,6 +2,8 @@ import './globals.css'
 
 import { Inter } from 'next/font/google'
 
+import { Providers } from './_providers'
+
 import type { Metadata } from 'next'
 
 const inter = Inter({
@@ -22,7 +24,9 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en" className={inter.variable}>
-      <body className="font-inter antialiased">{children}</body>
+      <body className="font-inter antialiased">
+        <Providers>{children}</Providers>
+      </body>
     </html>
   )
 }

apps/hub/vercel.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://openapi.vercel.sh/vercel.json",
-  "ignoreCommand": "git diff --quiet HEAD^ HEAD ../../{patches,package.json,turbo.json} ../../packages/{colors,icons} ./",
+  "ignoreCommand": "git diff --quiet HEAD^ HEAD ../../{patches,package.json,turbo.json} ../../packages/{colors,icons,components,wallet,status-network} ./",
   "installCommand": "pnpm install --dir ../../ --frozen-lockfile",
   "buildCommand": "turbo run build --cwd ../../ --filter=./apps/hub..."
 }

package.json

@@ -11,8 +11,6 @@
       "packages/wallet",
       "packages/status-network",
       "apps/hub",
-      "apps/status.app",
-      "apps/status.network",
       "apps/connector",
       "apps/portfolio",
       "apps/wallet",
@@ -24,7 +22,7 @@
     "preinstall": "npx only-allow pnpm",
     "prepare": "husky install",
     "test": "turbo run test --filter=@status-im/* --filter=./apps/* -- --run",
-    "dev": "turbo run dev dev:next dev:content --filter=@status-im/* --filter=./apps/*",
+    "dev": "turbo run dev --filter=@status-im/* --filter=./apps/*",
     "build": "turbo run build --filter=@status-im/* --filter=./apps/*",
     "lint": "turbo run lint --filter=@status-im/* --filter=./apps/*",
     "typecheck": "turbo run typecheck",
@@ -35,13 +33,17 @@
   },
   "resolutions": {
     "@types/react": "19.1.0",
-    "@types/react-dom": "19.1.1",
+    "@types/react-dom": "19.1.0",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "viem": "2.29.1",
+    "wagmi": "2.15.2",
     "zod": "3.23.8",
     "vite": "6.3.5",
     "vitest": "3.1.4",
     "vite-node": "3.1.4",
     "protons-runtime": "3.1.0",
-    "it-length-prefixed": "9.0.3",
+    "it-length-prefixed": "9.1.1",
     "remark-lint": "9.1.2"
   },
   "devDependencies": {
@@ -56,9 +58,9 @@
     "lint-staged": "^15.2.10",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.6",
-    "react": "^18.3.1",
+    "react": "^19.1.0",
     "react-devtools": "^6.1.5",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.1.0",
     "rimraf": "^4.4.1",
     "turbo": "^2.5.6",
     "typescript": "^5.6.2",
@@ -74,9 +76,9 @@
   },
   "pnpm": {
     "patchedDependencies": {
-      "@achingbrain/ssdp@4.0.1": "patches/@achingbrain__ssdp@4.0.1.patch",
-      "@libp2p/[email protected].10": "patches/@[email protected].10.patch",
-      "it-length-prefixed@9.0.3": "patches/it-length-prefixed@9.0.3.patch",
+      "@achingbrain/ssdp@4.2.4": "patches/@achingbrain__ssdp@4.2.4.patch",
+      "@libp2p/[email protected].12": "patches/@[email protected].12.patch",
+      "it-length-prefixed@9.1.1": "patches/it-length-prefixed@9.1.1.patch",
       "[email protected]": "patches/[email protected]",
       "[email protected]": "patches/[email protected]",
       "[email protected]": "patches/[email protected]",

packages/status-network/package.json

@@ -61,6 +61,7 @@
     "@status-im/colors": "workspace:*",
     "@status-im/components": "workspace:*",
     "@status-im/icons": "workspace:*",
+    "connectkit": "^1.9.0",
     "cva": "^1.0.0-beta.1",
     "framer-motion": "^12.0.6",
     "next": "15.1.6",

packages/status-network/src/components/index.tsx → packages/status-network/src/components/index.ts

@@ -4,3 +4,4 @@ export { GameCard } from './cards'
 export { Divider } from './divider'
 export { Footer } from './footer'
 export { Link } from './link'
+export { ShortenAddress } from './shorten-address'

packages/status-network/src/components/shorten-address/index.tsx

@@ -0,0 +1,19 @@
+type Props = {
+  address: string
+}
+
+export const shortenAddress = (address: string) => {
+  const prefix = address.slice(0, 5)
+  const suffix = address.slice(-4)
+
+  return `${prefix}...${suffix}`
+}
+
+const ShortenAddress = ({ address }: Props) => {
+  const shortenedAddress = shortenAddress(address)
+
+  return shortenedAddress
+}
+
+export { ShortenAddress }
+export type { Props as ShortenAddressProps }

packages/status-network/vite.config.ts

@@ -16,7 +16,7 @@ export default defineConfig(({ mode }) => {
       target: 'es2020',
       lib: {
         entry: {
-          'components/index': './src/components/index.tsx',
+          'components/index': './src/components/index.ts',
           'config/index': './src/config/index.ts',
           'tailwind.config': './tailwind.config.ts',
           'hooks/index': './src/hooks/index.ts',

patches/@achingbrain__ssdp@4.2.4.patch

@@ -0,0 +1,15 @@
+diff --git a/dist/src/ssdp.js b/dist/src/ssdp.js
+index f186aa77bb50bc85650e220c842238b1b9da16d9..203b1b7142fb4c63983d9f096354b7211e1c810b 100644
+--- a/dist/src/ssdp.js
++++ b/dist/src/ssdp.js
+@@ -10,8 +10,8 @@ import { discover } from './discover/index.js';
+ import { searchResponse } from './discover/search-response.js';
+ import { parseSsdpMessage } from './parse-ssdp-message.js';
+ import { sendSsdpMessage } from './send-ssdp-message.js';
+-const req = createRequire(import.meta.url);
+-const { name, version } = req('../../package.json');
++const name = '@achingbrain/ssdp';
++const version = '4.2.4';
+ const DEFAULT_SSDP_SIGNATURE = `node.js/${process.version.substring(1)} UPnP/1.1 ${name}/${version}`;
+ export class SSDP extends EventEmitter {
+     udn;