Merge branch 'feat/wallet-connect' of github.com-ift:status-im/status-web into chore/update-wallet-connect-impl

Author: iamonuwa

.changeset/famous-deers-sell.md

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

apps/api/package.json

@@ -17,22 +17,23 @@
   "dependencies": {
     "@status-im/wallet": "workspace:*",
     "@trpc/client": "10.45.2",
-    "@trpc/server": "10.45.2",
     "@trpc/next": "10.45.2",
+    "@trpc/server": "10.45.2",
+    "next": "15.3.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "next": "15.3.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@eslint/eslintrc": "^3.1.0",
+    "@next/eslint-plugin-next": "15.3.0",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "eslint": "^9",
     "eslint-config-next": "15.3.0",
-    "@eslint/eslintrc": "^3",
-    "globals": "^15.12.0"
+    "globals": "^15.12.0",
+    "typescript": "^5.6.2"
   },
   "engines": {
     "node": "20.x"

apps/hub/package.json

@@ -21,27 +21,32 @@
     "@status-im/icons": "workspace:*",
     "@status-im/status-network": "workspace:*",
     "@tanstack/react-table": "^8.21.3",
+    "@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",
     "react-hook-form": "^7.45.1",
+    "pino-pretty": "^13.1.1",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
     "rehype-slug": "^6.0.0",
     "siwe": "^2.3.2",
     "ts-pattern": "^5.6.2",
     "viem": "^2.21.1",
-    "zod": "^3.21.4"
+    "zod": "^3.21.4",
+    "wagmi": "2.15.2"
   },
   "devDependencies": {
     "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
     "@next/eslint-plugin-next": "15.3.0",
     "@status-im/eslint-config": "workspace:*",
     "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
+    "@types/react": "19.1.0",
+    "@types/react-dom": "19.1.0",
     "eslint-config-next": "15.1.6",
     "eslint-plugin-tailwindcss": "^3.17.4",
     "lint-staged": "^15.4.3",

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 }