feat(dev-tools): add balance top up button when running on anvil (#2656)

latticexyz · Apr 14, 2024 · 875abd5 · 875abd5
1 parent cd37f73
commit 875abd5
Showing 1 changed file with 18 additions and 6 deletions.
diff --git a/packages/dev-tools/src/summary/AccountSummary.tsx b/packages/dev-tools/src/summary/AccountSummary.tsx
@@ -1,12 +1,15 @@
 import { useEffect, useState } from "react";
-import { formatUnits } from "viem";
+import { formatUnits, parseEther, testActions } from "viem";
 import { useDevToolsContext } from "../DevToolsContext";
 
 export function AccountSummary() {
   const { publicClient, walletClient } = useDevToolsContext();
+  const walletAddress = walletClient?.account?.address;
+  const testClient = publicClient.chain.id === 31337 ? publicClient.extend(testActions({ mode: "anvil" })) : null;
 
   const [balance, setBalance] = useState<bigint | null>(null);
 
+  // TODO: switch to wagmi hooks
   useEffect(() => {
     if (!publicClient || !walletClient) return setBalance(null);
     const account = walletClient.account;
@@ -18,21 +21,30 @@ export function AccountSummary() {
     };
 
     updateBalance();
-    const interval = setInterval(updateBalance, 5000);
+    const interval = setInterval(updateBalance, publicClient.pollingInterval);
     return () => clearInterval(interval);
   }, [publicClient, walletClient]);
 
   return (
     <dl className="grid grid-cols-[max-content,1fr] gap-x-4">
       <dt className="text-amber-200/80">Address</dt>
-      <dd className="text-sm">{walletClient?.account?.address}</dd>
+      <dd className="text-sm">{walletAddress}</dd>
       <dt className="text-amber-200/80">Balance</dt>
-      <dd className="text-sm" title={balance ? balance.toString() : undefined}>
+      <dd className="text-sm flex items-center gap-2" title={balance ? balance.toString() : undefined}>
         {publicClient && balance != null ? (
-          <>
+          <span>
             {formatUnits(balance, publicClient.chain.nativeCurrency.decimals).replace(/(\.\d{4})\d+$/, "$1")}{" "}
             {publicClient.chain.nativeCurrency.symbol}
-          </>
+          </span>
+        ) : null}
+        {walletAddress && testClient ? (
+          <button
+            type="button"
+            className="text-xs px-1.5 py-0.5 bg-slate-700 hover:bg-blue-700 hover:text-white rounded"
+            onClick={() => testClient.setBalance({ address: walletAddress, value: parseEther("1") + (balance ?? 0n) })}
+          >
+            top up
+          </button>
         ) : null}
       </dd>
     </dl>