chore: add log event example

iosh · Oct 9, 2024 · a97c602 · a97c602
1 parent 07bee7f
commit a97c602
Show file tree

Hide file tree

Showing 9 changed files with 264 additions and 5 deletions.
diff --git a/examples/README.md b/examples/README.md
@@ -22,7 +22,7 @@ The `examples/` directory is a growing & living folder, and open for contributio
 - Filters & Logs
   - [ ] Blocks
   - [ ] Pending Transactions
-  - [ ] Events
+  - [x] Events
 - Signatures
   - [ ] Sign typed data
     - [ ] + verify/recover address

diff --git a/examples/logs_block_event_logs/README.md b/examples/logs_block_event_logs/README.md
@@ -0,0 +1,3 @@
+# _REPLACE ME_ Example
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github.com/iosh/cive/tree/main/examples/logs_block_event_logs)
diff --git a/examples/logs_block_event_logs/index.html b/examples/logs_block_event_logs/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <h1 class="title has-text-centered">Block event logs Example</h1>
+    <div class="container" id="app">Loading...</div>
+    <script type="module">
+      import './index.tsx';
+    </script>
+  </body>
+</html>
diff --git a/examples/logs_block_event_logs/index.tsx b/examples/logs_block_event_logs/index.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './src/App'
+import 'bulma/css/bulma.css'
+ReactDOM.createRoot(document.getElementById('app') as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
diff --git a/examples/logs_block_event_logs/package.json b/examples/logs_block_event_logs/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "logs_block_event_logs",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite"
+  },
+  "dependencies": {
+    "bulma": "^1.0.2",
+    "cive": "latest",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.8",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "typescript": "^5.6.2",
+    "vite": "^5.4.4"
+  }
+}
diff --git a/examples/logs_block_event_logs/src/App.tsx b/examples/logs_block_event_logs/src/App.tsx
@@ -0,0 +1,83 @@
+import { http, createPublicClient } from 'cive'
+import { mainnet } from 'cive/chains'
+import { useCallback, useState } from 'react'
+
+const client = createPublicClient({
+  chain: mainnet,
+  transport: http(),
+})
+export default function App() {
+  const [logs, setLogs] = useState('')
+
+  const handleClick = useCallback(async () => {
+    const epochNumber = await client.getEpochNumber()
+    const logs = await client.getLogs({
+      fromEpoch: epochNumber - 10n,
+      toEpoch: epochNumber,
+    })
+    setLogs(
+      JSON.stringify(
+        logs,
+        (_, value) => (typeof value === 'bigint' ? value.toString() : value),
+        2,
+      ),
+    )
+  }, [])
+
+  const handleGetLogsWithEvent = useCallback(async () => {
+    const epochNumber = await client.getEpochNumber()
+    const logs = await client.getLogs({
+      fromEpoch: epochNumber - 50n,
+      toEpoch: epochNumber,
+      events: [
+        {
+          inputs: [
+            {
+              indexed: true,
+              name: 'from',
+              type: 'address',
+            },
+            {
+              indexed: true,
+              name: 'to',
+              type: 'address',
+            },
+            {
+              indexed: false,
+              name: 'value',
+              type: 'uint256',
+            },
+          ],
+          name: 'Transfer',
+          type: 'event',
+        },
+      ] as const,
+    })
+    setLogs(
+      JSON.stringify(
+        logs,
+        (_, value) => (typeof value === 'bigint' ? value.toString() : value),
+        2,
+      ),
+    )
+  }, [])
+
+  return (
+    <div className="box">
+      <div className="columns is-3 ">
+        <div className="column">
+          <button className="button" onClick={handleClick}>
+            Get 10 epoch logs
+          </button>
+
+          <button className="button" onClick={handleGetLogsWithEvent}>
+            Get Transfer event logs by 50 epoch
+          </button>
+          <pre className="is-size-5">
+            <code>{logs}</code>
+          </pre>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/examples/logs_block_event_logs/tsconfig.json b/examples/logs_block_event_logs/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/examples/logs_block_event_logs/vite.config.ts b/examples/logs_block_event_logs/vite.config.ts
@@ -0,0 +1,7 @@
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# _REPLACE ME_ Example

		[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github.com/iosh/cive/tree/main/examples/logs_block_event_logs)