packages/vm/examples/browser.html

<!doctype html>
<html>

<head>
    <title>EthereumJS Browser Examples</title>
    <script type="module">
        import { Address } from '@ethereumjs/util'
        import { Chain, Common, Hardfork } from '@ethereumjs/common'
        import { LegacyTransaction } from '@ethereumjs/tx'
        import { VM } from '@ethereumjs/vm'

        const common = new Common({ chain: Chain.Mainnet, hardfork: Hardfork.Berlin })
        const vm = await VM.create({ common })

        const tx = LegacyTransaction.fromTxData({
            gasLimit: BigInt(21000),
            value: BigInt(1),
            to: Address.zero(),
            v: BigInt(37),
            r: BigInt('62886504200765677832366398998081608852310526822767264927793100349258111544447'),
            s: BigInt('21948396863567062449199529794141973192314514851405455194940751428901681436138'),
        })
        const res = await vm.runTx({ tx, skipBalance: true })
        console.log(res)
    </script>

</head>

<body style="padding:50px; font-family: Arial, Helvetica, sans-serif;">
    <h1>VM | @ethereumjs/vm</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>