add multiple changes (#67)

Author: joaocosta9

frontend/package.json

@@ -13,15 +13,15 @@
   "dependencies": {
     "@aptabase/web": "^0.4.3",
     "@ethui/ui": "^0.0.141",
+    "@fontsource/source-code-pro": "^5.2.7",
     "@hookform/resolvers": "^5.2.1",
     "@tailwindcss/typography": "^0.5.16",
-    "@tanstack/react-query": "^5.66.0",
     "@tanstack/nitro-v2-vite-plugin": "^1.133.3",
+    "@tanstack/react-query": "^5.90.12",
     "@tanstack/react-query-devtools": "^5.66.0",
     "@tanstack/react-router": "^1.139.14",
     "@tanstack/react-router-devtools": "^1.139.14",
     "@tanstack/react-router-ssr-query": "^1.139.14",
-    "@fontsource/source-code-pro": "^5.2.7",
     "@tanstack/react-start": "^1.139.14",
     "axios": "^1.13.2",
     "clsx": "^2.1.1",
@@ -35,6 +35,8 @@
     "tailwind-merge": "^3.0.2",
     "tailwindcss": "^4.1.5",
     "tailwindcss-animate": "^1.0.7",
+    "viem": "^2.43.5",
+    "wagmi": "^3.2.0",
     "zod": "^4.1.5",
     "zustand": "^5.0.4"
   },

frontend/src/api/anvil.ts

@@ -0,0 +1,64 @@
+import axios from "axios";
+import * as chains from "viem/chains";
+import { z } from "zod";
+
+export const anvilNodeInfoSchema = z.object({
+  currentBlockNumber: z.string(),
+  currentBlockTimestamp: z.number(),
+  currentBlockHash: z.string(),
+  hardFork: z.string(),
+  transactionOrder: z.string(),
+  environment: z.object({
+    baseFee: z.string(),
+    chainId: z.number(),
+    gasLimit: z.string(),
+    gasPrice: z.string(),
+  }),
+  forkConfig: z
+    .object({
+      forkUrl: z.string(),
+      forkBlockNumber: z.number(),
+      forkRetryBackoff: z.number(),
+    })
+    .nullable(),
+});
+
+export type AnvilNodeInfo = z.infer<typeof anvilNodeInfoSchema>;
+
+async function jsonRpcCall<T>(
+  rpcUrl: string,
+  method: string,
+  params: unknown[] = [],
+): Promise<T> {
+  const { data } = await axios.post(rpcUrl, {
+    jsonrpc: "2.0",
+    method,
+    params,
+    id: 1,
+  });
+
+  if (data.error) {
+    throw new Error(data.error.message);
+  }
+
+  return data.result;
+}
+
+export const anvil = {
+  getNodeInfo: async (rpcUrl: string): Promise<AnvilNodeInfo> => {
+    const result = await jsonRpcCall<unknown>(rpcUrl, "anvil_nodeInfo");
+    return anvilNodeInfoSchema.parse(result);
+  },
+
+  getChainId: async (rpcUrl: string): Promise<number> => {
+    const result = await jsonRpcCall<string>(rpcUrl, "eth_chainId");
+    return Number.parseInt(result, 16);
+  },
+};
+
+const allChains = Object.values(chains);
+
+export function getChainName(chainId: number): string {
+  const chain = allChains.find((c) => c.id === chainId);
+  return chain?.name ?? `Chain ${chainId}`;
+}

frontend/src/components/ExternalLink.tsx

@@ -0,0 +1,45 @@
+import { cn } from "@ethui/ui/lib/utils";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@ethui/ui/components/shadcn/tooltip";
+
+interface ExternalLinkProps {
+  href: string;
+  children: React.ReactNode;
+  className?: string;
+  tooltip?: string;
+}
+
+export function ExternalLink({
+  href,
+  children,
+  className,
+  tooltip,
+}: ExternalLinkProps) {
+  const link = (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={cn(
+        "text-xs text-solidity-value hover:text-sky-700",
+        className,
+      )}
+    >
+      {children}
+    </a>
+  );
+
+  if (!tooltip) return link;
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{link}</TooltipTrigger>
+      <TooltipContent>
+        <p>{tooltip}</p>
+      </TooltipContent>
+    </Tooltip>
+  );
+}

frontend/src/components/Topbar.tsx

@@ -33,7 +33,7 @@ export function Topbar() {
       >
         <EthuiLogo size={28} />
         <span className="font-semibold text-foreground text-lg">
-          ethui <span className="text-primary">Stacks</span>
+          ethui <span className="text-primary">stacks</span>
         </span>
       </button>
 

frontend/src/hooks/useAnvil.ts

@@ -0,0 +1,21 @@
+import { useQuery } from "@tanstack/react-query";
+import { anvil } from "~/api/anvil";
+
+export function useAnvilNodeInfo(
+  stackSlug: string,
+  rpcUrl: string | undefined,
+) {
+  return useQuery({
+    queryKey: ["anvilNodeInfo", stackSlug],
+    queryFn: () => anvil.getNodeInfo(rpcUrl!),
+    enabled: !!rpcUrl,
+  });
+}
+
+export function useForkChainId(stackSlug: string, forkUrl: string | undefined) {
+  return useQuery({
+    queryKey: ["forkChainId", stackSlug],
+    queryFn: () => anvil.getChainId(forkUrl!),
+    enabled: !!forkUrl,
+  });
+}

frontend/src/hooks/useStackInfo.ts

@@ -0,0 +1,84 @@
+import { useMemo, useState } from "react";
+import type { Address, Hash } from "viem";
+import {
+  createConfig,
+  http,
+  useTransactionReceipt,
+  useWatchBlocks,
+} from "wagmi";
+import { Stack } from "~/api/stacks";
+import { useAnvilNodeInfo, useForkChainId } from "./useAnvil";
+
+export interface LatestTransaction {
+  hash: Hash;
+  success: boolean;
+  timestamp: number;
+}
+
+export function useStackInfo(stack: Stack) {
+  const config = useMemo(
+    () =>
+      createConfig({
+        chains: [
+          {
+            id: stack.chain_id,
+            name: stack.slug,
+            nativeCurrency: { name: "Ether", symbol: "ETH", decimals: 18 },
+            rpcUrls: {
+              default: { http: [stack.rpc_url] },
+            },
+          },
+        ],
+        transports: {
+          [stack.chain_id]: http(stack.rpc_url),
+        },
+      }),
+    [stack.chain_id, stack.rpc_url, stack.slug],
+  );
+
+  const [latestStackInfo, setLatestStackInfo] = useState<
+    | {
+        latestBlockNumber: number;
+        latestBlockTimestamp: number;
+        latestTxHash: Hash;
+      }
+    | undefined
+  >();
+
+  const { data: anvilInfo } = useAnvilNodeInfo(stack.slug, stack.rpc_url);
+  const { data: forkChainId } = useForkChainId(
+    stack.slug,
+    stack.anvil_opts?.fork_url,
+  );
+
+  useWatchBlocks({
+    config,
+    includeTransactions: true,
+    emitOnBegin: true,
+    onBlock(block) {
+      if (latestStackInfo?.latestBlockNumber === Number(block.number)) return;
+      const tx = block.transactions[block.transactions.length - 1];
+      setLatestStackInfo((prev) => ({
+        latestTxHash: tx?.hash ?? prev?.latestTxHash,
+        latestBlockNumber: Number(block.number),
+        latestBlockTimestamp: Number(block.timestamp),
+      }));
+    },
+  });
+
+  const { data: receipt } = useTransactionReceipt({
+    config,
+    hash: latestStackInfo?.latestTxHash,
+  });
+
+  return {
+    data: {
+      liveInfo: {
+        ...latestStackInfo,
+        txStatusSuccess: receipt?.status === "success",
+      },
+      anvilInfo,
+      forkChainId,
+    },
+  };
+}