flashbots · zeroXbrock · Dec 8, 2023 · Dec 5, 2023 · Dec 5, 2023 · Dec 5, 2023
diff --git a/biome.json b/biome.json
@@ -36,8 +36,7 @@
         "noUnusedVariables": "error"
       },
       "complexity": {
-        "noForEach": "off",
-        "noBannedTypes": "off"
+        "noForEach": "off"
       },
       "performance": {
         "noDelete": "off"
@@ -51,7 +50,6 @@
         "noArrayIndexKey": "off",
         "noAssignInExpressions": "off",
         "noExplicitAny": "off",
-        "noConfusingVoidType": "off",
         "noRedeclare": "off"
       }
     }

diff --git a/bun.lockb b/bun.lockb
diff --git a/examples/suave-web-demo/.gitignore b/examples/suave-web-demo/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/suave-web-demo/bun.lockb b/examples/suave-web-demo/bun.lockb
diff --git a/examples/suave-web-demo/index.html b/examples/suave-web-demo/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/flashbots_icon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SUAVE Web Demo</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <div id="footer"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/suave-web-demo/package.json b/examples/suave-web-demo/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "vite-project",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "viem": "workspace:*"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.2",
+    "vite": "^5.0.0"
+  }
+}
diff --git a/examples/suave-web-demo/public/vite.svg b/examples/suave-web-demo/public/vite.svg
diff --git a/examples/suave-web-demo/src/components/index.ts b/examples/suave-web-demo/src/components/index.ts
@@ -0,0 +1,5 @@
+export function Logo(href: string, src: string, alt: string, className: string = "logo") {
+    return `<a href="${href}" target="_blank">
+        <img src="${src}" class="${className}" alt="${alt}" />
+    </a>`
+}
diff --git a/examples/suave-web-demo/src/flashbots_icon.svg b/examples/suave-web-demo/src/flashbots_icon.svg
diff --git a/examples/suave-web-demo/src/main.ts b/examples/suave-web-demo/src/main.ts
@@ -0,0 +1,89 @@
+import './style.css'
+import viteLogo from '/vite.svg'
+import typescriptLogo from './typescript.svg'
+import flashbotsLogo from './flashbots_icon.svg'
+import { setupConnectButton, setupDripFaucetButton, setupSendBidButton } from './suave'
+import { Logo } from './components'
+import { custom, formatEther } from 'viem'
+import { suaveRigil } from 'viem/chains'
+
+document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
+  <div>
+    ${Logo('https://suave.flashbots.net', flashbotsLogo, 'Flashbots logo')}
+    <h1><em>MEV-Share on SUAVE</em></h1>
+    <div class="card">
+      <button id="connect" type="button"></button>
+      <div id="status-content"></div>
+      <button id="dripFaucet" type="button"></button>
+      <button id="sendBid" type="button" ></button>
+    </div>
+  </div>
+`
+
+document.querySelector<HTMLDivElement>('#footer')!.innerHTML = `
+  <div>
+    built with
+      ${Logo('https://vite.org', viteLogo, 'Vite logo', "logo logo-tiny")}
+      +${Logo('https://www.typescriptlang.org', typescriptLogo, 'Typescript logo', "logo logo-tiny")}
+      +${Logo('https://flashbots.net', flashbotsLogo, 'Flashbots logo', "logo logo-tiny")}
+  </div>
+`
+
+setupConnectButton(document.querySelector<HTMLButtonElement>('#connect')!, 
+(account, ethereum, err) => {
+  if (err) {
+    console.error(err)
+    alert(err.message)
+  }
+  const suaveWallet = suaveRigil.newWallet({jsonRpcAccount: account, transport: custom(ethereum)})
+  console.log(suaveWallet)
+  const suaveProvider = suaveRigil.newPublicClient(custom(ethereum))
+  suaveProvider.getBalance({ address: account }).then((balance) => {
+    document.querySelector<HTMLDivElement>('#status-content')!.innerHTML = `
+      <div>
+        <p>SUAVE-ETH balance: ${formatEther(balance)}</p>
+      </div>
+    `
+  })
+
+  // setup other buttons once we've connected
+  setupSendBidButton(document.querySelector<HTMLButtonElement>('#sendBid')!, suaveWallet, (txHash, err) => {
+    if (err) {
+      console.error("error in setupSendBidButton", err)
+      alert(err.message + (err as any).data)
+    }
+    const suaveProvider = suaveRigil.newPublicClient(custom(ethereum))
+    suaveProvider.getTransactionReceipt({hash: txHash}).then((receipt) => {
+      console.log("receipt", receipt)
+      document.querySelector<HTMLDivElement>('#status-content')!.innerHTML = `
+        <div>
+          <p>bid sent. tx hash: <code>${txHash}</code></p>
+          <label for="receipt">receipt</label>
+          <textarea id="receipt" wrap="hard">
+${JSON.stringify(receipt, (_, value) =>
+            (typeof value === 'bigint'
+              ? value.toString()
+              : value // return everything else unchanged
+            ), 2)}
+          </textarea>
+        </div>
+      `
+    })
+    console.log("sent bid.", txHash)
+    document.querySelector<HTMLDivElement>('#status-content')!.innerHTML = `
+      <div>
+        <p>bid sent. tx hash: <code>${txHash}</code></p>
+      </div>
+    `
+  })
+  setupDripFaucetButton(
+    document.querySelector<HTMLButtonElement>('#dripFaucet')!,
+    account,
+    (txHash, err) => {
+      if (err) {
+        console.error("error in setupDripFaucetButton", err)
+        alert(err.message + (err as any).data)
+      }
+      console.log("funded account", txHash)
+  })
+})
diff --git a/examples/suave-web-demo/src/style.css b/examples/suave-web-demo/src/style.css
@@ -0,0 +1,119 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #dead;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+
+.logo.vanilla:hover {
+  filter: drop-shadow(0 0 2em #3178c6aa);
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+
+button:hover {
+  border-color: #646cff;
+}
+
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+
+  a:hover {
+    color: #747bff;
+  }
+
+  button {
+    background-color: #f9f9f9;
+  }
+}
+
+#footer {
+  position: fixed;
+  width: 100%;
+  bottom: 0px;
+  background-color: #9a7d;
+  padding: 4px;
+  color: #fffefeaa;
+}
+
+.logo-tiny {
+  height: 1.3em;
+  padding: 0em;
+  bottom: -4px;
+  position: relative;
+}