Add StateManager browser example

ethereumjs · acolytec3 · Jun 28, 2023 · Jun 28, 2023 · Jun 28, 2023 · Jun 28, 2023
commit 12afe507cf46b153cee8df0c5d158f076a5a667a
diff --git a/packages/statemanager/examples/browser.html b/packages/statemanager/examples/browser.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<html>
+
+<head>
+    <title>EthereumJS Browser Examples</title>
+    <script type="module">
+        import { Account, Address } from '@ethereumjs/util'
+        import { DefaultStateManager } from '@ethereumjs/statemanager'
+        import { hexStringToBytes } from '@ethereumjs/util'
+
+        const run = async () => {
+            const stateManager = new DefaultStateManager()
+            const address = new Address(hexStringToBytes('a94f5374fce5edbc8e2a8697c15331677e6ebf0b'))
+            const account = new Account(BigInt(0), BigInt(1000))
+            await stateManager.checkpoint()
+            await stateManager.putAccount(address, account)
+            await stateManager.commit()
+            await stateManager.flush()
+
+            const accountFromSM = await stateManager.getAccount(address)
+            console.log(accountFromSM.balance)
+        }
+
+        run()
+    </script>
+
+</head>
+
+<body style="padding:50px; font-family: Arial, Helvetica, sans-serif;">
+    <h1>StateManager | @ethereumjs/statemanager</h1>
+    Basic usage of this library in the browser (using <a href="https://github.com/vitejs/vite" target="_blank">Vite</a>)
+
+    <h3>Run the Example</h3>
+    <ol>
+        <li>
+            Go to the library root directory (packages/[LIBRARY_NAME]/)
+        </li>
+        <li>
+            Build "dist" folder with: npm run build
+        </li>
+        <li>
+            Start Vite development server with: npx vite
+        </li>
+        <li>
+            Open the example URL in the browser (http://localhost:5173/examples/browser.html)
+        </li>
+        <li>
+            Open the development console (e.g. Chrome Developer Tools)
+        </li>
+        <li>
+            See example results and play with the code
+        </li>
+    </ol>
+
+    <h3>Interactive CLI</h3>
+    <ol>
+        <li>Open the "Sources -> Page" tab in the Chrome Developer Tools</li>
+        <li>Set a breakpoint within the original "browser.html" file (so not the one generated by Vite)</li>
+        <li>Now you can use and play with the imports dynamically</li>
+    </ol>
+
+</body>
+
+</html>