add connect button

src/components/Demo.tsx

@@ -6,8 +6,11 @@ import {
   useSignMessage,
   useSignTypedData,
   useWaitForTransactionReceipt,
+  useDisconnect,
+  useConnect,
 } from "wagmi";
 
+import { config } from "~/components/WagmiProvider";
 import { Button } from "~/components/ui/Button";
 import { truncateAddress } from "~/lib/truncateAddress";
 
@@ -17,7 +20,8 @@ export default function Demo() {
   const [isContextOpen, setIsContextOpen] = useState(false);
   const [txHash, setTxHash] = useState<string | null>(null);
 
-  const { address, isConnected } = useAccount();
+  const { address, addresses, isConnected } = useAccount();
+
   const {
     sendTransaction,
     error: sendTxError,
@@ -44,6 +48,10 @@ export default function Demo() {
       hash: txHash as `0x${string}`,
     });
 
+  const { disconnect } = useDisconnect();
+
+  const { connect } = useConnect();
+
   useEffect(() => {
     const load = async () => {
       setContext(await sdk.context);
@@ -171,6 +179,24 @@ export default function Demo() {
           </div>
         )}
 
+        {addresses && (
+          <div className="my-2 text-xs">
+            Addresses: <pre className="inline">{JSON.stringify(addresses.length)}</pre>
+          </div>
+        )}
+
+        <div className="mb-4">
+          <Button
+            onClick={() =>
+              isConnected
+                ? disconnect()
+                : connect({ connector: config.connectors[0] })
+            }
+          >
+            {isConnected ? "Disconnect" : "Connect"}
+          </Button>
+        </div>
+
         {isConnected && (
           <>
             <div className="mb-4">

src/lib/connector.ts

@@ -41,7 +41,9 @@ export function frameConnector() {
     async getAccounts() {
       if (!connected) throw new Error("Not connected");
       const provider = await this.getProvider();
-      const accounts = await provider.request({ method: "eth_accounts" });
+      const accounts = await provider.request({
+        method: "eth_requestAccounts",
+      });
       return accounts.map((x) => getAddress(x));
     },
     async getChainId() {