NEAR testnet support

src/commands/dev.ts

@@ -19,6 +19,7 @@ export interface ApiConfig {
   url: string;
   localAgentUrl?: string;
   serverPort: number;
+  network: string;
 }
 
 interface ValidationResult {
@@ -41,6 +42,7 @@ const API_CONFIG: ApiConfig = {
     process.env.BITTE_API_URL ||
     "https://ai-runtime-446257178793.europe-west1.run.app",
   serverPort: DEFAULT_PORT,
+  network: "mainnet",
 };
 
 async function fetchAndValidateSpec(url: string): Promise<ValidationResult> {
@@ -120,10 +122,14 @@ export const devCommand = new Command()
   .option("-t, --testnet", "Use Testnet instead of Mainnet", false)
   .action(async (options) => {
     try {
+      // Set the network environment variable
+      process.env.NEXT_PUBLIC_NETWORK = options.testnet ? "testnet" : "mainnet";
+
       const { port, serverPort } = await setupPorts(options);
 
       API_CONFIG.serverPort = serverPort;
       API_CONFIG.localAgentUrl = `http://localhost:${port}`;
+      API_CONFIG.network = options.testnet ? "testnet" : "mainnet";
 
       const deployedUrl = getDeployedUrl(port);
       if (!deployedUrl) {

src/playground/src/App.tsx

@@ -1,12 +1,11 @@
 "use client";
 
-import { BitteAiChat, type BitteOpenAPISpec } from "@bitte-ai/chat";
-import "@bitte-ai/chat/style.css";
-import { type Wallet, useBitteWallet } from "@bitte-ai/react";
+import { type BitteOpenAPISpec } from "@bitte-ai/chat";
+import { BitteWalletContextProvider } from "@bitte-ai/react";
 import { useEffect, useState } from "react";
 import { useAccount, useSendTransaction, useSwitchChain } from "wagmi";
 
-import { Header } from "./components/Header";
+import { ChatContent } from "./components/ChatContent";
 import "./shims";
 
 type AppConfig = {
@@ -19,16 +18,14 @@ type AppConfig = {
   environment: string;
   bitteApiKey: string;
   bitteApiUrl: string;
+  network: string;
 };
 
 const Main: React.FC = (): JSX.Element => {
-  const { selector } = useBitteWallet();
-  const [wallet, setWallet] = useState<Wallet>();
   const [config, setConfig] = useState<AppConfig>();
-
   const { address } = useAccount();
   const { data: hash, sendTransaction } = useSendTransaction();
-  const { switchChain } = useSwitchChain();
+  const { switchChainAsync } = useSwitchChain();
 
   useEffect(() => {
     const fetchConfig = async (): Promise<void> => {
@@ -43,51 +40,26 @@ const Main: React.FC = (): JSX.Element => {
     fetchConfig();
   }, []);
 
-  useEffect(() => {
-    const fetchWallet = async (): Promise<void> => {
-      const walletInstance = await selector.wallet();
-      setWallet(walletInstance);
-    };
-    if (selector) fetchWallet();
-  }, [selector]);
-
   if (!config) {
     return <div>Loading...</div>;
   }
 
+  const BitteWalletSetup = {
+    network: config.network,
+    callbackUrl: typeof window !== "undefined" ? window.location.origin : "",
+    contractAddress: "",
+  };
+
   return (
-    <main>
-      <Header />
-      <div id="ai-chat">
-        <BitteAiChat
-          options={{
-            agentImage: "/bitte.svg",
-            agentName: config.localAgent.spec["x-mb"]?.assistant?.name,
-            localAgent: config.localAgent,
-          }}
-          agentId={config.localAgent.pluginId}
-          wallet={{
-            near: { wallet },
-            evm: {
-              sendTransaction,
-              switchChain,
-              address,
-              hash,
-            },
-          }}
-          apiUrl={config.bitteApiUrl}
-          historyApiUrl="/api/history"
-          apiKey={config.bitteApiKey}
-          colors={{
-            generalBackground: "#18181A",
-            messageBackground: "#0A0A0A",
-            textColor: "#FAFAFA",
-            buttonColor: "#000000",
-            borderColor: "#334155",
-          }}
-        />
-      </div>
-    </main>
+    <BitteWalletContextProvider {...BitteWalletSetup}>
+      <ChatContent
+        config={config}
+        address={address}
+        sendTransaction={sendTransaction}
+        switchChain={switchChainAsync}
+        hash={hash}
+      />
+    </BitteWalletContextProvider>
   );
 };
 

src/playground/src/components/ChatContent.tsx

@@ -0,0 +1,87 @@
+import { BitteAiChat, type BitteOpenAPISpec } from "@bitte-ai/chat";
+import "@bitte-ai/chat/style.css";
+import { type Wallet, useBitteWallet } from "@bitte-ai/react";
+import React, { useEffect, useState } from "react";
+import { UseSendTransactionReturnType, UseSwitchChainReturnType } from "wagmi";
+
+import { Header } from "./Header";
+
+type AppConfig = {
+  localAgent: {
+    pluginId: string;
+    accountId: string;
+    spec: BitteOpenAPISpec;
+  };
+  serverStartTime: string;
+  environment: string;
+  bitteApiKey: string;
+  bitteApiUrl: string;
+  network: string;
+};
+
+interface ChatContentProps {
+  config: AppConfig;
+  address?: string;
+  sendTransaction?: UseSendTransactionReturnType["sendTransaction"];
+  switchChain?: UseSwitchChainReturnType["switchChain"];
+  hash?: string;
+}
+
+export const ChatContent: React.FC<ChatContentProps> = ({
+  config,
+  address,
+  sendTransaction,
+  switchChain,
+  hash,
+}) => {
+  const [wallet, setWallet] = useState<Wallet | undefined>(undefined);
+  const { selector } = useBitteWallet();
+
+  useEffect(() => {
+    const fetchWallet = async (): Promise<void> => {
+      if (selector) {
+        const walletInstance = await selector.wallet();
+        setWallet(walletInstance);
+      }
+    };
+    fetchWallet();
+  }, [selector]);
+
+  return (
+    <main>
+      <Header />
+      <div id="ai-chat">
+        <BitteAiChat
+          options={{
+            agentImage: "/bitte.svg",
+            agentName: config.localAgent.spec["x-mb"]?.assistant?.name,
+            localAgent: config.localAgent,
+          }}
+          agentId={config.localAgent.pluginId}
+          wallet={{
+            near: { wallet },
+            evm:
+              address && sendTransaction && switchChain
+                ? {
+                    address,
+                    sendTransaction,
+                    switchChain,
+                    hash,
+                  }
+                : undefined,
+          }}
+          apiUrl={config.bitteApiUrl}
+          historyApiUrl="/api/history"
+          apiKey={config.bitteApiKey}
+          colors={{
+            generalBackground: "#18181A",
+            messageBackground: "#0A0A0A",
+            textColor: "#FAFAFA",
+            buttonColor: "#000000",
+            borderColor: "#334155",
+          }}
+        />
+      </div>
+    </main>
+  );
+};

src/playground/src/main.tsx

@@ -1,4 +1,3 @@
-import { BitteWalletContextProvider } from "@bitte-ai/react";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 
@@ -7,18 +6,10 @@ import App from "./App.tsx";
 import ContextProvider from "./context/index.tsx";
 import "./index.css";
 
-const BitteWalletSetup = {
-  network: "mainnet",
-  callbackUrl: typeof window !== "undefined" ? window.location.origin : "",
-  contractAddress: "",
-};
-
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <BitteWalletContextProvider {...BitteWalletSetup}>
-      <ContextProvider>
-        <App />
-      </ContextProvider>
-    </BitteWalletContextProvider>
+    <ContextProvider>
+      <App />
+    </ContextProvider>
   </StrictMode>
 );

src/services/server.ts

@@ -80,6 +80,7 @@ export async function startUIServer(
         },
         bitteApiKey: apiConfig.key,
         bitteApiUrl: `${apiConfig.url}/chat`,
+        network: apiConfig.network,
       };
       res.json(serverConfig);
     } catch (error) {