add unichain

src/components/Demo.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import { useEffect, useCallback, useState, useMemo } from "react";
-import { Input } from "../components/ui/input"
+import { Input } from "../components/ui/input";
 import { signIn, signOut, getCsrfToken } from "next-auth/react";
 import sdk, {
-    AddFrame,
+  AddFrame,
   FrameNotificationDetails,
   SignIn as SignInCore,
   type Context,
@@ -24,13 +24,12 @@ import {
 import { config } from "~/components/providers/WagmiProvider";
 import { Button } from "~/components/ui/Button";
 import { truncateAddress } from "~/lib/truncateAddress";
-import { base, degen, mainnet, optimism } from "wagmi/chains";
+import { base, degen, mainnet, optimism, unichain } from "wagmi/chains";
 import { BaseError, UserRejectedRequestError } from "viem";
-import { useSession } from "next-auth/react"
-import { createStore } from 'mipd'
+import { useSession } from "next-auth/react";
+import { createStore } from "mipd";
 import { Label } from "~/components/ui/label";
 
-
 export default function Demo(
   { title }: { title?: string } = { title: "Frames v2 Demo" }
 ) {
@@ -91,6 +90,8 @@ export default function Demo(
       return degen;
     } else if (chainId === degen.id) {
       return mainnet;
+    } else if (chainId === mainnet.id) {
+      return unichain;
     } else {
       return base;
     }
@@ -98,7 +99,7 @@ export default function Demo(
 
   const handleSwitchChain = useCallback(() => {
     switchChain({ chainId: nextChain.id });
-  }, [switchChain, chainId]);
+  }, [switchChain, nextChain.id]);
 
   useEffect(() => {
     const load = async () => {
@@ -143,15 +144,14 @@ export default function Demo(
       console.log("Calling ready");
       sdk.actions.ready({});
 
-// Set up a MIPD Store, and request Providers.
-const store = createStore()
-
-// Subscribe to the MIPD Store.
-store.subscribe(providerDetails => {
-  console.log("PROVIDER DETAILS", providerDetails)
-  // => [EIP6963ProviderDetail, EIP6963ProviderDetail, ...]
-})
+      // Set up a MIPD Store, and request Providers.
+      const store = createStore();
 
+      // Subscribe to the MIPD Store.
+      store.subscribe((providerDetails) => {
+        console.log("PROVIDER DETAILS", providerDetails);
+        // => [EIP6963ProviderDetail, EIP6963ProviderDetail, ...]
+      });
     };
     if (sdk && !isSDKLoaded) {
       console.log("Calling load");
@@ -193,7 +193,7 @@ store.subscribe(providerDetails => {
       if (error instanceof AddFrame.RejectedByUser) {
         setAddFrameResult(`Not added: ${error.message}`);
       }
-      
+
       if (error instanceof AddFrame.InvalidDomainManifest) {
         setAddFrameResult(`Not added: ${error.message}`);
       }
@@ -275,12 +275,14 @@ store.subscribe(providerDetails => {
   }
 
   return (
-    <div style={{ 
-      paddingTop: context?.client.safeAreaInsets?.top ?? 0, 
-      paddingBottom: context?.client.safeAreaInsets?.bottom ?? 0,
-      paddingLeft: context?.client.safeAreaInsets?.left ?? 0,
-      paddingRight: context?.client.safeAreaInsets?.right ?? 0 ,
-    }}>
+    <div
+      style={{
+        paddingTop: context?.client.safeAreaInsets?.top ?? 0,
+        paddingBottom: context?.client.safeAreaInsets?.bottom ?? 0,
+        paddingLeft: context?.client.safeAreaInsets?.left ?? 0,
+        paddingRight: context?.client.safeAreaInsets?.right ?? 0,
+      }}
+    >
       <div className="w-[300px] mx-auto py-2 px-2">
         <h1 className="text-2xl font-bold text-center mb-4">{title}</h1>
 
@@ -596,7 +598,7 @@ function SignIn() {
   const [signingOut, setSigningOut] = useState(false);
   const [signInResult, setSignInResult] = useState<SignInCore.SignInResult>();
   const [signInFailure, setSignInFailure] = useState<string>();
-  const { data: session, status } = useSession()
+  const { data: session, status } = useSession();
 
   const getNonce = useCallback(async () => {
     const nonce = await getCsrfToken();
@@ -632,7 +634,7 @@ function SignIn() {
   const handleSignOut = useCallback(async () => {
     try {
       setSigningOut(true);
-      await signOut({ redirect: false }) 
+      await signOut({ redirect: false });
       setSignInResult(undefined);
     } finally {
       setSigningOut(false);
@@ -641,28 +643,24 @@ function SignIn() {
 
   return (
     <>
-      {status !== "authenticated" &&
-        <Button
-          onClick={handleSignIn}
-          disabled={signingIn}
-        >
+      {status !== "authenticated" && (
+        <Button onClick={handleSignIn} disabled={signingIn}>
           Sign In with Farcaster
         </Button>
-      }
-      {status === "authenticated" &&
-        <Button
-          onClick={handleSignOut}
-          disabled={signingOut}
-        >
+      )}
+      {status === "authenticated" && (
+        <Button onClick={handleSignOut} disabled={signingOut}>
           Sign out
         </Button>
-      }
-      {session &&
+      )}
+      {session && (
         <div className="my-2 p-2 text-xs overflow-x-scroll bg-gray-100 rounded-lg font-mono">
           <div className="font-semibold text-gray-500 mb-1">Session</div>
-          <div className="whitespace-pre">{JSON.stringify(session, null, 2)}</div>
+          <div className="whitespace-pre">
+            {JSON.stringify(session, null, 2)}
+          </div>
         </div>
-      }
+      )}
       {signInFailure && !signingIn && (
         <div className="my-2 p-2 text-xs overflow-x-scroll bg-gray-100 rounded-lg font-mono">
           <div className="font-semibold text-gray-500 mb-1">SIWF Result</div>
@@ -672,7 +670,9 @@ function SignIn() {
       {signInResult && !signingIn && (
         <div className="my-2 p-2 text-xs overflow-x-scroll bg-gray-100 rounded-lg font-mono">
           <div className="font-semibold text-gray-500 mb-1">SIWF Result</div>
-          <div className="whitespace-pre">{JSON.stringify(signInResult, null, 2)}</div>
+          <div className="whitespace-pre">
+            {JSON.stringify(signInResult, null, 2)}
+          </div>
         </div>
       )}
     </>
@@ -680,26 +680,33 @@ function SignIn() {
 }
 
 function ViewProfile() {
-  const [fid, setFid] = useState('3');
+  const [fid, setFid] = useState("3");
 
   return (
     <>
       <div>
-        <Label className="text-xs font-semibold text-gray-500 mb-1" htmlFor="view-profile-fid">Fid</Label>
+        <Label
+          className="text-xs font-semibold text-gray-500 mb-1"
+          htmlFor="view-profile-fid"
+        >
+          Fid
+        </Label>
         <Input
           id="view-profile-fid"
           type="number"
           value={fid}
           className="mb-2"
-          onChange={(e) => { 
-            setFid(e.target.value)
+          onChange={(e) => {
+            setFid(e.target.value);
           }}
           step="1"
           min="1"
         />
       </div>
       <Button
-        onClick={() => { sdk.actions.viewProfile({ fid: parseInt(fid) }) }}
+        onClick={() => {
+          sdk.actions.viewProfile({ fid: parseInt(fid) });
+        }}
       >
         View Profile
       </Button>

src/components/providers/WagmiProvider.tsx

@@ -1,15 +1,16 @@
 import { createConfig, http, WagmiProvider } from "wagmi";
-import { base, degen, mainnet, optimism } from "wagmi/chains";
+import { base, degen, mainnet, optimism, unichain } from "wagmi/chains";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { farcasterFrame } from "@farcaster/frame-wagmi-connector";
 
 export const config = createConfig({
-  chains: [base, optimism, mainnet, degen],
+  chains: [base, optimism, mainnet, degen, unichain],
   transports: {
     [base.id]: http(),
     [optimism.id]: http(),
     [mainnet.id]: http(),
     [degen.id]: http(),
+    [unichain.id]: http(),
   },
   connectors: [farcasterFrame()],
 });