chore: add connect kit

package.json

@@ -10,8 +10,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@rainbow-me/rainbowkit": "^2.0.5",
+    "@tanstack/react-query": "^5.29.2",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "viem": "2.x",
+    "wagmi": "^2.5.20"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",

src/App.jsx

@@ -1,3 +1,4 @@
+import { ConnectButton } from '@rainbow-me/rainbowkit';
 import walletLogo from './assets/wallet.id.png';
 import searchIcon from './assets/search.png';
 import hnsLogo from './assets/hns.id.png';
@@ -10,11 +11,7 @@ function App() {
           <div className="h-20 p-4 justify-between items-center inline-flex w-full ">
             <img className="w-36" src={walletLogo} />
             <div className="justify-start items-center gap-6 flex ">
-              <div className="px-4 py-2 bg-blue-600 rounded-2xl justify-center items-center gap-2 flex">
+              <ConnectButton />
-                <div className="text-white text-sm font-medium leading-normal">
-                  Connect Wallet
-                </div>
-              </div>
             </div>
           </div>
           <div className="flex-col justify-start items-center gap-16 flex px-4 lg:px-0">

src/main.jsx

@@ -1,10 +1,31 @@
-import React from 'react'
+import { getDefaultConfig, RainbowKitProvider } from '@rainbow-me/rainbowkit';
-import ReactDOM from 'react-dom/client'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import App from './App.jsx'
+import React from 'react';
-import './index.css'
+import ReactDOM from 'react-dom/client';
+import { WagmiProvider } from 'wagmi';
+import { optimism } from 'wagmi/chains';
+import App from './App.jsx';
+
+import '@rainbow-me/rainbowkit/styles.css';
+import './index.css';
+
+const queryClient = new QueryClient();
+
+const config = getDefaultConfig({
+  appName: 'Wallet.id',
+  projectId: 'YOUR_PROJECT_ID',
+  chains: [optimism],
+  ssr: true, // If your dApp uses server side rendering (SSR)
+});
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <App />
+    <WagmiProvider config={config}>
-  </React.StrictMode>,
+      <QueryClientProvider client={queryClient}>
-)
+        <RainbowKitProvider>
+          <App />
+        </RainbowKitProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
+  </React.StrictMode>
+);