example: add Filters & Logs Pending transactions example (#1773)

wevm · Feb 4, 2024 · bc3b77a · bc3b77a
1 parent 444f61d
commit bc3b77a
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 2 deletions.
diff --git a/examples/README.md b/examples/README.md
@@ -29,8 +29,8 @@ The below list is not exhaustive, and is a work in progress. If you have an idea
   - [x] ENS Name from Address
   - [ ] Fetch ENS Resolver
 - Filters & Logs
-  - [ ] Blocks
-  - [ ] Pending Transactions
+  - [x] Blocks
+  - [x] Pending Transactions
   - [x] Events
 - Anvil/Hardhat
   - [ ] Impersonating Accounts

diff --git a/examples/logs_pending-transactions-logs/index.html b/examples/logs_pending-transactions-logs/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <h1>Pending Transactions Example</h1>
+    <div id="app">Loading...</div>
+    <script type="module" src="./index.ts"></script>
+  </body>
+</html>
diff --git a/examples/logs_pending-transactions-logs/index.ts b/examples/logs_pending-transactions-logs/index.ts
@@ -0,0 +1,24 @@
+import { http, createPublicClient } from "viem";
+import { sepolia } from "viem/chains";
+
+const client = createPublicClient({
+  chain: sepolia,
+  transport: http(),
+});
+
+const el = document.getElementById("app");
+
+// Polling frequency (in ms)
+const pollingInterval = 1000;
+
+client.watchPendingTransactions({
+  poll: true,
+  pollingInterval,
+  onTransactions: (hashes) => {
+    for (let i = 0; i < hashes.length; i++) {
+      let newElement = document.createElement("p");
+      newElement.textContent = hashes[i];
+      el!.appendChild(newElement);
+    }
+  },
+});
diff --git a/examples/logs_pending-transactions-logs/package.json b/examples/logs_pending-transactions-logs/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "example-pending-transactions-logs",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite"
+  },
+  "dependencies": {
+    "viem": "latest"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.3",
+    "vite": "^4.4.2"
+  }
+}
diff --git a/examples/logs_pending-transactions-logs/tsconfig.json b/examples/logs_pending-transactions-logs/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "moduleResolution": "Node",
+    "strict": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "noEmit": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"]
+}