trying new wallet button

Author: patnir

components/Providers.tsx

@@ -3,7 +3,7 @@
 import { AppConfig, OnchainKitProvider } from "@coinbase/onchainkit";
 import { base } from "wagmi/chains";
 import { PropsWithChildren } from "react";
-import { createConfig, http, WagmiProvider } from "wagmi";
+import { createConfig, http, injected, WagmiProvider } from "wagmi";
 import { baseAccount } from 'wagmi/connectors';
 import { farcasterMiniApp as miniAppConnector } from '@farcaster/miniapp-wagmi-connector'
 
@@ -19,7 +19,8 @@ const onchainKitConfig: AppConfig = {
 
 export const config = createConfig({
   chains: [base],
-  connectors: [miniAppConnector(), baseAccount()],
+  // connectors: [miniAppConnector(), baseAccount()],
+  connectors: [injected()],
   transports: {
     [base.id]: http(),
   },

components/Wallet.tsx

@@ -1,36 +1,64 @@
 'use client'
 
-import {
-  Address,
-  Avatar,
-  Identity,
-  Name,
-} from '@coinbase/onchainkit/identity'
-import {
-  ConnectWallet,
-  Wallet,
-  WalletDropdown,
-  WalletDropdownBasename,
-  WalletDropdownDisconnect,
-} from '@coinbase/onchainkit/wallet'
+import { useAccount, useConnect } from 'wagmi'
+import { sdk } from '@farcaster/miniapp-sdk';
+import { useEffect } from 'react';
 
 export function WalletComponent() {
+  const { isConnected, address } = useAccount()
+  const { connect, connectors } = useConnect()
+
+  useEffect(() => {
+    const checkContext = async () => {
+      console.log('isConnected:', isConnected)
+      console.log('address:', address)
+      console.log("asking for context")
+      const context = await sdk.context
+      console.log('context:', context)
+      if (context) {
+        console.log('client:', context.client)
+      }
+    }
+    void checkContext()
+  }, [isConnected, address])
+ 
+  if (isConnected && address) {
+    return (
+      <div style={{
+        padding: '0.5rem 1rem',
+        border: '1px solid #d1d5db',
+        borderRadius: '8px',
+        background: 'white',
+        color: '#374151',
+        fontSize: '0.875rem',
+        fontWeight: '500',
+        fontFamily: 'monospace'
+      }}>
+        {address.slice(0, 6)}...{address.slice(-4)}
+      </div>
+    )
+  }
+ 
   return (
-    <div style={{ display: 'flex', justifyContent: 'flex-end'}}>
-      <Wallet>
-        <ConnectWallet>
-          <Name />
-        </ConnectWallet>
-        <WalletDropdown>
-          <Identity>
-            <Avatar />
-            <Name />
-            <Address />
-          </Identity>
-          <WalletDropdownBasename />
-          <WalletDropdownDisconnect />
-        </WalletDropdown>
-      </Wallet>
-    </div>
+    <button
+      type="button"
+      onClick={() => {
+        console.log('Connecting to wallet...')
+        console.log('Connectors:', connectors)
+        connect({ connector: connectors[0] })
+      }}
+      style={{
+        padding: '0.75rem 1.5rem',
+        border: '1px solid #d1d5db',
+        borderRadius: '8px',
+        background: 'white',
+        color: '#374151',
+        fontSize: '1rem',
+        fontWeight: '500',
+        cursor: 'pointer'
+      }}
+    >
+      Connect
+    </button>
   )
 }