elm-web3/examples/basic/index.html at master · IntrepidShape/elm-web3 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>elm-web3 basic example</title>
    <style>
      body { background: #1a1a1a; color: #e0e0e0; }
      button { background: #333; color: #e0e0e0; border: 1px solid #555; padding: 6px 14px; cursor: pointer; font-family: monospace; }
      button:hover:not(:disabled) { background: #444; }
      button:disabled { opacity: 0.5; cursor: default; }
      input { background: #222; color: #e0e0e0; border: 1px solid #555; padding: 4px 8px; font-family: monospace; }
    </style>
  </head>
  <body>
    <div id="app"></div>

    <!--
      Build the Elm side first:   elm make src/Main.elm --output=elm.js
      Then serve this directory over http (ES modules do not load from file://):
                                  bunx serve .

      The shim is the canonical one shipped in the package -- js/elm-web3-ports.js.
      It is an ES module bundle, so it MUST be loaded with type="module" and an
      `import`; a classic <script src> throws SyntaxError: Unexpected token 'export'.
      In a real app, copy that file next to your bundle instead of reaching up
      two directories.
    -->
    <script src="elm.js"></script>
    <script type="module">
      import { setupPorts } from '../../js/elm-web3-ports.js'

      const app = Elm.Main.init({ node: document.getElementById('app') })

      setupPorts(app, {
        // Public read fallback used when no wallet is injected. The wallet
        // provider is canonical for reads whenever one is connected.
        rpcUrls: ['https://eth.llamarpc.com', 'https://rpc.ankr.com/eth'],
      })
    </script>
  </body>
</html>