Arbi UI

.gas-snapshot

@@ -3,11 +3,11 @@ IETest:testBalanceInETH() (gas: 40280)
 IETest:testCommandSendERC0() (gas: 102922)
 IETest:testCommandSendETH() (gas: 69404)
 IETest:testCommandSendUSDC() (gas: 118552)
-IETest:testCommandSwapDAI() (gas: 105520)
-IETest:testCommandSwapETH() (gas: 119728)
-IETest:testCommandSwapForETH() (gas: 123983)
-IETest:testCommandSwapUSDC() (gas: 164744)
-IETest:testCommandSwapUSDCForWBTC() (gas: 166495)
+IETest:testCommandSwapDAI() (gas: 105526)
+IETest:testCommandSwapETH() (gas: 119716)
+IETest:testCommandSwapForETH() (gas: 123988)
+IETest:testCommandSwapUSDC() (gas: 165762)
+IETest:testCommandSwapUSDCForWBTC() (gas: 166485)
 IETest:testDeploy() (gas: 2831664)
 IETest:testENSNameOwnership() (gas: 83841)
 IETest:testIENameSetting() (gas: 8142)

.gitignore

@@ -3,4 +3,6 @@ cache
 
 ui/node_modules
 ui/.next
-ui/.env
+ui/.env
+
+.env

ui/components/account.tsx

@@ -26,7 +26,7 @@ export const Account = () => {
       Connected to{" "}
       <select
         defaultValue={chain?.id}
-        className="text-black"
+        className="text-black bg-white rounded-none"
         onChange={(e) => switchChain({ chainId: Number(e.target.value) })}
       >
         {chains.map((chain) => (

ui/components/header.tsx

@@ -1,9 +1,12 @@
 import { Account } from "./account";
+import { Version } from "./version";
 
 export const Header = () => {
   return (
     <div className="mb-3">
-      <p>Nani Intents Shell {"[ Version 1.0.0 ]"}</p>
+      <p>
+        Nani Intents Shell <Version />
+      </p>
       <p className="mb-2">(c) 2024 Nani Kotoba DAO LLC. All rights reserved.</p>
       <Account />
     </div>

ui/components/providers.tsx

@@ -2,18 +2,55 @@
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { WagmiProvider } from "wagmi";
-import { mainnet, sepolia } from "wagmi/chains";
-import { getDefaultConfig, RainbowKitProvider } from "@rainbow-me/rainbowkit";
+import { arbitrum, mainnet, sepolia } from "wagmi/chains";
+import {
+  Chain,
+  getDefaultConfig,
+  RainbowKitProvider,
+} from "@rainbow-me/rainbowkit";
 import { siteConfig } from "@/lib/site";
 
+const ANKR_API_KEY = process.env.NEXT_PUBLIC_ANKR_KEY;
+
+if (!ANKR_API_KEY) {
+  throw new Error("Missing ANKR_API_KEY");
+}
+
+const chains = [
+  {
+    ...mainnet,
+    rpcUrls: {
+      default: {
+        http: ["https://rpc.ankr.com/eth/" + ANKR_API_KEY],
+        webSocket: ["wss://rpc.ankr.com/eth/ws/" + ANKR_API_KEY],
+      },
+    },
+  },
+  {
+    ...arbitrum,
+    rpcUrls: {
+      default: {
+        http: ["https://rpc.ankr.com/arbitrum/" + ANKR_API_KEY],
+        webSocket: ["wss://rpc.ankr.com/arbitrum/ws/" + ANKR_API_KEY],
+      },
+    },
+  },
+  {
+    ...sepolia,
+    rpcUrls: {
+      default: {
+        http: ["https://rpc.ankr.com/eth_sepolia/" + ANKR_API_KEY],
+        webSocket: ["wss://rpc.ankr.com/eth_sepolia/ws/" + ANKR_API_KEY],
+      },
+    },
+  },
+] as const satisfies Chain[];
+
 const config = getDefaultConfig({
   appName: siteConfig.name,
   appDescription: siteConfig.description,
   projectId: process.env.NEXT_PUBLIC_WC_ID!,
-  chains: [
-    mainnet,
-    sepolia
-  ],
+  chains,
   ssr: true,
 });