From 84a9e041a89fba39766b561d803c2c2921db3353 Mon Sep 17 00:00:00 2001
From: Daniel Norman <1992255+2color@users.noreply.github.com>
Date: Thu, 28 Mar 2024 13:49:56 +0100
Subject: [PATCH] feat: add helia/verified-fetch browser example (#285)

* feat: add helia/verified-fetch browser example

* feat(verified-fetch): improve UX (#286)

* Update examples/helia-browser-react-verified-fetch/package.json

Co-authored-by: Alex Potsides <alex@achingbrain.net>

* refactor: clean up code and reduce deps

* chore: rename folder

* chore: add test

* chore: fix linting

* chore: add test to verified fetch example  (#290)

* chore: add test to verified fetch example

Adds a test for JSON-codec data

* chore: test verified fetch during ci

* chore: add tests for other types

* fix: improve rendering of cids on narrow viewports

* fix: improve auto content detection

* chore: fix tests

* chore: upgrade verified-fetch

* feat: add link to the repo

* chore: bump verified fetch version

* fix: add aborting functionality

* fix: handle abort error

* feat: add ability to fetch as dag-json

* chore: update deps

* chore: remove comment

* chore: address feedback and simplify code

* chore: reduce code duplication and add docs

* feat: add links to api docs and source

* fix: linting error

---------

Co-authored-by: Daniel N <2color@users.noreply.github.com>
Co-authored-by: Russell Dempsey <1173416+SgtPooki@users.noreply.github.com>
Co-authored-by: Alex Potsides <alex@achingbrain.net>
---
 .github/workflows/ci.yml                      |   2 +
 .../helia-browser-verified-fetch/.gitignore   |  24 ++
 .../helia-browser-verified-fetch/README.md    |  34 +++
 .../helia-browser-verified-fetch/index.html   |  13 +
 .../helia-browser-verified-fetch/package.json |  29 ++
 .../helia-browser-verified-fetch/src/App.tsx  | 273 ++++++++++++++++++
 .../src/Output.tsx                            |  63 ++++
 .../src/constants.ts                          |  26 ++
 .../helia-browser-verified-fetch/src/main.tsx |   9 +
 .../test/blockstore.js                        |  16 +
 .../test/fixtures.js                          |  16 +
 .../test/index.spec.js                        |  64 ++++
 .../test/vite.config.js                       |  11 +
 .../tsconfig.json                             |  24 ++
 .../vite.config.js                            |   7 +
 .../helia-nestjs/tsconfig-check.aegir.json    |   1 +
 16 files changed, 612 insertions(+)
 create mode 100644 examples/helia-browser-verified-fetch/.gitignore
 create mode 100644 examples/helia-browser-verified-fetch/README.md
 create mode 100644 examples/helia-browser-verified-fetch/index.html
 create mode 100644 examples/helia-browser-verified-fetch/package.json
 create mode 100644 examples/helia-browser-verified-fetch/src/App.tsx
 create mode 100644 examples/helia-browser-verified-fetch/src/Output.tsx
 create mode 100644 examples/helia-browser-verified-fetch/src/constants.ts
 create mode 100644 examples/helia-browser-verified-fetch/src/main.tsx
 create mode 100644 examples/helia-browser-verified-fetch/test/blockstore.js
 create mode 100644 examples/helia-browser-verified-fetch/test/fixtures.js
 create mode 100644 examples/helia-browser-verified-fetch/test/index.spec.js
 create mode 100644 examples/helia-browser-verified-fetch/test/vite.config.js
 create mode 100644 examples/helia-browser-verified-fetch/tsconfig.json
 create mode 100644 examples/helia-browser-verified-fetch/vite.config.js
 create mode 100644 examples/helia-nestjs/tsconfig-check.aegir.json

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index dc63a6a2..c3000c36 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -21,6 +21,7 @@ jobs:
       matrix:
         project:
           - helia-101
+          - helia-browser-verified-fetch
           - helia-cjs
           - helia-electron
           - helia-esbuild
@@ -86,6 +87,7 @@ jobs:
         project:
           - helia-101
           - helia-cjs
+          - helia-browser-verified-fetch
           - helia-electron
           - helia-esbuild
           - helia-jest
diff --git a/examples/helia-browser-verified-fetch/.gitignore b/examples/helia-browser-verified-fetch/.gitignore
new file mode 100644
index 00000000..a547bf36
--- /dev/null
+++ b/examples/helia-browser-verified-fetch/.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/helia-browser-verified-fetch/README.md b/examples/helia-browser-verified-fetch/README.md
new file mode 100644
index 00000000..3a117ea4
--- /dev/null
+++ b/examples/helia-browser-verified-fetch/README.md
@@ -0,0 +1,34 @@
+<p align="center">
+  <a href="https://github.com/ipfs/helia" title="Helia">
+    <img src="https://raw.githubusercontent.com/ipfs/helia/main/assets/helia.png" alt="Helia logo" width="300" />
+  </a>
+</p>
+
+<h3 align="center"><b>Browser Verified Retrieval with @helia/verified-fetch</b></h3>
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/jlord/forkngo/gh-pages/badges/cobalt.png" width="200">
+  <br>
+  <a href="https://helia.io/modules/helia.html">Explore the docs</a>
+  ·
+  <!-- <a href="https://codesandbox.io/">View Demo</a> -->
+  ·
+  <a href="https://github.com/ipfs-examples/helia-examples/issues">Report Bug</a>
+  ·
+  <a href="https://github.com/ipfs-examples/helia-examples/issues">Request Feature/Example</a>
+</p>
+
+<!-- omit from toc -->
+## Table of Contents
+
+- [Getting Started](#getting-started)
+  - [Installation and Running example](#installation-and-running-example)
+
+## Getting Started
+
+### Installation and Running example
+
+```console
+npm install
+npm run dev
+```
diff --git a/examples/helia-browser-verified-fetch/index.html b/examples/helia-browser-verified-fetch/index.html
new file mode 100644
index 00000000..314ad51a
--- /dev/null
+++ b/examples/helia-browser-verified-fetch/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="https://cdn.tailwindcss.com"></script>
+    <title>Verified Retrieval with @helia/verified-fetch</title>
+  </head>
+  <body>
+    <div class="" id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/helia-browser-verified-fetch/package.json b/examples/helia-browser-verified-fetch/package.json
new file mode 100644
index 00000000..4c319c1a
--- /dev/null
+++ b/examples/helia-browser-verified-fetch/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "helia-browser-verified-fetch",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "clean": "rimraf ./dist",
+    "start": "vite",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "test": "vite build -c ./test/vite.config.js && test-browser-example test"
+  },
+  "dependencies": {
+    "@helia/verified-fetch": "^1.3.2",
+    "@sgtpooki/file-type": "^1.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.42.1",
+    "@types/react": "^18.2.72",
+    "@types/react-dom": "^18.2.22",
+    "@vitejs/plugin-react": "^4.2.1",
+    "test-ipfs-example": "^1.0.0",
+    "typescript": "^5.4.3",
+    "vite": "^5.2.6"
+  }
+}
diff --git a/examples/helia-browser-verified-fetch/src/App.tsx b/examples/helia-browser-verified-fetch/src/App.tsx
new file mode 100644
index 00000000..4854bf3c
--- /dev/null
+++ b/examples/helia-browser-verified-fetch/src/App.tsx
@@ -0,0 +1,273 @@
+import { verifiedFetch } from '@helia/verified-fetch'
+import { fileTypeFromBuffer } from '@sgtpooki/file-type'
+import { useCallback, useState } from 'react'
+import { Output } from './Output'
+import { helpText } from './constants'
+
+function App (): JSX.Element {
+  const [path, setPath] = useState<string>('')
+  const [output, setOutput] = useState<string | JSX.Element>('')
+  const [err, setErr] = useState<string>('')
+  const [loading, setLoadingTo] = useState<string>('')
+  const [controller, setController] = useState<AbortController | null>(null)
+
+  const setSuccess = useCallback((message: string | JSX.Element) => {
+    setOutput(message)
+    setLoadingTo('')
+    setErr('')
+  }, [])
+  const setError = useCallback((message: string) => {
+    setOutput('')
+    setLoadingTo('')
+    setErr(message)
+  }, [])
+  const setLoading = useCallback((message: string) => {
+    setErr('')
+    setLoadingTo(message)
+  }, [])
+
+  const handleImageType = useCallback(async (resp: Response) => {
+    try {
+      setLoading('Waiting for full image data...')
+      const blob = await resp.blob()
+      const url = URL.createObjectURL(blob)
+      setSuccess(<img src={url} alt="fetched image content" />)
+    } catch (err) {
+      setError((err as Error).message)
+    }
+  }, [])
+
+  const handleJsonType = useCallback(async (resp: Response) => {
+    try {
+      setLoading('Waiting for full JSON data...')
+      const json = await resp.json()
+      setSuccess(JSON.stringify(json, null, 2))
+    } catch (err) {
+      setError((err as Error).message)
+    }
+  }, [])
+
+  const handleVideoType = useCallback(async (resp: Response) => {
+    try {
+      controller?.abort() // abort any ongoing requests
+      setLoading('Waiting for full video data...')
+      const blob = await resp.blob()
+      const url = URL.createObjectURL(blob)
+      setSuccess(<video controls src={url} />)
+    } catch (err) {
+      setError((err as Error).message)
+    }
+  }, [])
+
+  const onFetchJson = useCallback(async (jsonType: 'json' | 'dag-json' = 'json') => {
+    try {
+      controller?.abort() // abort any ongoing requests
+      setLoading(`Fetching ${jsonType} response...`)
+      const ctl = new AbortController()
+      setController(ctl)
+      const resp = await verifiedFetch(path, {
+        signal: ctl.signal,
+        headers: {
+          accept: jsonType === 'json' ? 'application/json' : 'application/vnd.ipld.dag-json'
+        }
+      })
+      await handleJsonType(resp)
+    } catch (err: any) {
+      // TODO: simplify AbortErr handling to use err.name once https://github.com/libp2p/js-libp2p/pull/2446 is merged
+      if (err?.code === 'ABORT_ERR') {
+        return
+      }
+      if (err instanceof Error) {
+        setError(err.message)
+      }
+    }
+  }, [path, handleJsonType])
+
+  const onFetchImage = useCallback(async () => {
+    try {
+      controller?.abort() // abort any ongoing requests
+      setLoading('Fetching image response...')
+      const ctl = new AbortController()
+      setController(ctl)
+      const resp = await verifiedFetch(path, { signal: ctl.signal })
+      await handleImageType(resp)
+    } catch (err: any) {
+      if (err?.code === 'ABORT_ERR') {
+        return
+      }
+      // Don't render AbortErrors since they are user intiated
+      if (err instanceof Error) {
+        setError(err.message)
+      }
+    }
+  }, [path, handleImageType])
+
+  const onFetchFile = useCallback(async () => {
+    try {
+      controller?.abort() // abort any ongoing requests
+      setLoading('Fetching content to download...')
+      const ctl = new AbortController()
+      setController(ctl)
+      const resp = await verifiedFetch(path, { signal: ctl.signal })
+      const blob = await resp.blob()
+      const url = URL.createObjectURL(blob)
+      const downloadLink = document.createElement('a')
+      downloadLink.href = url
+      downloadLink.download = 'download'
+      setSuccess('') // clear output
+      downloadLink.click()
+    } catch (err: any) {
+      if (err?.code === 'ABORT_ERR') {
+        return
+      }
+      // Don't render AbortErrors since they are user intiated
+      if (err instanceof Error) {
+        setError(err.message)
+      }
+    }
+  }, [path])
+
+  const onAbort = useCallback(async () => {
+    if (controller != null) {
+      controller.abort('Rqeuest aborted')
+      setLoadingTo('')
+    }
+  }, [controller])
+
+  const onPathChange = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
+    setPath(e.target.value)
+  }, [])
+
+  const onFetchAuto = useCallback(async () => {
+    if (path == null) {
+      setError('Invalid path')
+      return
+    }
+    try {
+      controller?.abort() // abort any ongoing requests
+      setLoading('Fetching with automatic content detection...')
+      const ctl = new AbortController()
+      setController(ctl)
+      const resp = await verifiedFetch(path, { signal: ctl.signal })
+      const buffer = await resp.clone().arrayBuffer()
+      let contentType = (await fileTypeFromBuffer(new Uint8Array(buffer)))?.mime
+      if (!contentType) {
+        try {
+          // see if we can parse as json
+          await resp.clone().json()
+          contentType = 'application/json'
+        } catch (err) {
+          // ignore
+        }
+      }
+      switch (true) {
+        case contentType?.includes('image'):
+          await handleImageType(resp)
+          break
+        case contentType?.includes('json'):
+          await handleJsonType(resp)
+          break
+        case contentType?.includes('video'):
+          await handleVideoType(resp)
+          break
+        default:
+          setError(`Unknown content-type: ${contentType}`)
+      }
+    } catch (err: any) {
+      if (err?.code === 'ABORT_ERR') {
+        return
+      }
+      // Don't render AbortErrors since they are user intiated
+      if (err instanceof Error) {
+        setError(err.message)
+      }
+    }
+  }, [path, handleImageType, handleJsonType, handleVideoType])
+
+  return (
+    <div className="">
+      <section>
+        <div className="grid h-screen grid-cols-2">
+          {/* Left 👇 */}
+          <div className="bg-teal-200 p-4">
+            <div className="flex items-center space-x-4">
+              <a className="" href="https://github.com/ipfs/helia">
+                <img
+                  className="h-20"
+                  alt="Helia logo"
+                  src="https://unpkg.com/@helia/css@1.0.1/logos/helia-logo.svg"
+                />
+              </a>
+              <h1 className="text-2xl">
+                Verified Retrieval with <a href="https://github.com/ipfs/helia-verified-fetch/tree/main/packages/verified-fetch"><strong className='underline'>@helia/verified-fetch</strong></a>
+              </h1>
+            </div>
+            <label className="block mt-4 mb-2 font-medium text-gray-900">
+              IPFS path to fetch
+            </label>
+            <input
+              type="text"
+              id="ipfs-path"
+              className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+              placeholder="ipfs://... or ipns://"
+              onChange={onPathChange}
+              value={path}
+            />
+            <button
+              className="my-2 mr-2 btn btn-blue bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+              id="button-fetch-json"
+              onClick={async () => onFetchJson('json')}
+            >
+              🔑 Fetch as JSON
+            </button>
+            <button
+              className="my-2 mr-2 btn btn-blue bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+              id="button-fetch-dag-json"
+              onClick={async () => onFetchJson('dag-json')}
+            >
+              🔑 Fetch as dag-json
+            </button>
+            <button
+              className="my-2 mr-2 btn btn-blue bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+              id="button-fetch-image"
+              onClick={onFetchImage}
+            >
+              🔑 Fetch as image
+            </button>
+            <button
+              className="my-2 mr-2 btn btn-blue bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+              id="button-fetch-file"
+              onClick={onFetchFile}
+            >
+              🔑 Fetch & Download
+            </button>
+            <button
+              className="my-2 mr-2 btn btn-blue bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+              id="button-fetch-auto"
+              onClick={onFetchAuto}
+            >
+              🔑 Fetch auto
+            </button>
+            <button
+              className="my-2 mr-2 btn btn-blue bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+              id="button-fetch-auto"
+              onClick={onAbort}
+            >
+              ❌ Abort request
+            </button>
+
+            <pre className="bg-black text-teal-300 rounded p-4 whitespace-pre-wrap break-words">{helpText}</pre>
+            <a href="https://github.com/ipfs-examples/helia-examples/tree/main/examples/helia-browser-verified-fetch" className="text-2xl block mt-2 underline">Source for example</a>
+            <a href="https://github.com/ipfs/helia-verified-fetch/tree/main/packages/verified-fetch" className="text-2xl block mt-2 underline"><code>@helia/verified-fetch</code> API Docs</a>
+
+          </div>
+
+          {/* Right 👇 */}
+          <Output loading={loading} output={output} err={err} />
+        </div>
+      </section>
+    </div>
+  )
+}
+
+export default App
diff --git a/examples/helia-browser-verified-fetch/src/Output.tsx b/examples/helia-browser-verified-fetch/src/Output.tsx
new file mode 100644
index 00000000..3898b816
--- /dev/null
+++ b/examples/helia-browser-verified-fetch/src/Output.tsx
@@ -0,0 +1,63 @@
+interface OutputProps {
+  output: string | JSX.Element
+  loading?: string
+  err: string
+}
+
+export function Output ({ output, loading, err }: OutputProps): JSX.Element {
+  if (err.length > 0) {
+    return (
+      <div className="bg-red-300">
+        <pre className="bg-black text-red-300 rounded p-4 whitespace-pre-wrap break-words">{err}</pre>
+      </div>
+    )
+  }
+
+  if(loading) {
+    return <Loading message={loading} />
+  }
+
+  if (typeof output === 'string') {
+    return (
+      <div className="bg-violet-300">
+        {output.length > 0 && (
+          <pre className="bg-black text-teal-300 rounded p-4 whitespace-pre-wrap break-words">
+            <code id="output" className="language-json">{`${output}`}</code>
+          </pre>
+        )}
+      </div>
+    )
+  }
+
+  return output
+}
+
+export function Loading ({ message }: { message: string }): JSX.Element {
+  return (
+    <div className="bg-yellow-300">
+      <pre className="bg-black text-yellow-300 rounded p-4 flex flex-row items-center gap-x-2">
+        <Spinner />
+        {message}
+      </pre>
+    </div>
+  )
+}
+
+const Spinner = (): JSX.Element => (
+  <svg
+    aria-hidden="true"
+    className="w-8 h-8 animate-spin dark:text-gray-600 fill-red-600"
+    viewBox="0 0 100 101"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+      fill="currentColor"
+    />
+    <path
+      d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+      fill="currentFill"
+    />
+  </svg>
+)
diff --git a/examples/helia-browser-verified-fetch/src/constants.ts b/examples/helia-browser-verified-fetch/src/constants.ts
new file mode 100644
index 00000000..798cf322
--- /dev/null
+++ b/examples/helia-browser-verified-fetch/src/constants.ts
@@ -0,0 +1,26 @@
+export const helpText = `Example Paths
+=========
+IPNS name 👇
+ipns://k51qzi5uqu5dhp48cti0590jyvwgxssrii0zdf19pyfsxwoqomqvfg6bg8qj3s
+
+DNSLink 👇
+ipns://tokens.uniswap.org
+
+JSON 👇
+ipfs://bagaaieracglt4ey6qsxtvzqsgwnsw3b6p2tb7nmx5wdgxur2zia7q6nnzh7q
+
+DAG-CBOR 👇
+ipfs://bafyreicnokmhmrnlp2wjhyk2haep4tqxiptwfrp2rrs7rzq7uk766chqvq
+
+UnixFS JSON 👇
+ipfs://bafybeia5ci747h54m2ybc4rf6yqdtm6nzdisxv57pk66fgubjsnnja6wq4
+
+dag-json 👇
+ipfs://baguqeerasords4njcts6vs7qvdjfcvgnume4hqohf65zsfguprqphs3icwea
+
+UnixFS image 👇
+ipfs://bafybeicklkqcnlvtiscr2hzkubjwnwjinvskffn4xorqeduft3wq7vm5u4
+
+UnixFS video 👇
+ipfs://bafybeicq6y27fphdisjtxaybzxold7dczhvxiiyn3bvkyht7b36lveerrm
+`
diff --git a/examples/helia-browser-verified-fetch/src/main.tsx b/examples/helia-browser-verified-fetch/src/main.tsx
new file mode 100644
index 00000000..e63eef4a
--- /dev/null
+++ b/examples/helia-browser-verified-fetch/src/main.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
diff --git a/examples/helia-browser-verified-fetch/test/blockstore.js b/examples/helia-browser-verified-fetch/test/blockstore.js
new file mode 100644
index 00000000..863afdbe
--- /dev/null
+++ b/examples/helia-browser-verified-fetch/test/blockstore.js
@@ -0,0 +1,16 @@
+import { MemoryBlockstore as OriginalMemoryBlockstore } from 'blockstore-core'
+import fixtures from './fixtures.js'
+
+/**
+ * Custom memory blockstore module which we pre-load with fixture blocks for testing
+ */
+export class MemoryBlockstore extends OriginalMemoryBlockstore {
+  constructor () {
+    super()
+
+    // prefill blockstore with test fixtures
+    Object.values(fixtures).forEach((fixture) => {
+      this.put(fixture.cid, fixture.data)
+    })
+  }
+}
diff --git a/examples/helia-browser-verified-fetch/test/fixtures.js b/examples/helia-browser-verified-fetch/test/fixtures.js
new file mode 100644
index 00000000..987afbe3
--- /dev/null
+++ b/examples/helia-browser-verified-fetch/test/fixtures.js
@@ -0,0 +1,16 @@
+import { CID } from 'multiformats/cid'
+
+export default {
+  json: {
+    cid: CID.parse('bagaaierasords4njcts6vs7qvdjfcvgnume4hqohf65zsfguprqphs3icwea'),
+    data: Uint8Array.from([123, 34, 104, 101, 108, 108, 111, 34, 58, 34, 119, 111, 114, 108, 100, 34, 125])
+  },
+  dagJson: {
+    cid: CID.parse('baguqeerasords4njcts6vs7qvdjfcvgnume4hqohf65zsfguprqphs3icwea'),
+    data: Uint8Array.from([123, 34, 104, 101, 108, 108, 111, 34, 58, 34, 119, 111, 114, 108, 100, 34, 125])
+  },
+  dagCbor: {
+    cid: CID.parse('bafyreidykglsfhoixmivffc5uwhcgshx4j465xwqntbmu43nb2dzqwfvae'),
+    data: Uint8Array.from([161, 101, 104, 101, 108, 108, 111, 101, 119, 111, 114, 108, 100])
+  }
+}
diff --git a/examples/helia-browser-verified-fetch/test/index.spec.js b/examples/helia-browser-verified-fetch/test/index.spec.js
new file mode 100644
index 00000000..4bb9c936
--- /dev/null
+++ b/examples/helia-browser-verified-fetch/test/index.spec.js
@@ -0,0 +1,64 @@
+import { setup, expect } from 'test-ipfs-example/browser'
+import fixtures from './fixtures.js'
+
+// Setup
+const test = setup()
+
+test.describe('Use @helia/verified-fetch With react and vite', () => {
+  // DOM
+  const ipfsPathInput = '#ipfs-path'
+  const fetchOutput = '#output'
+  const fetchAutoBtn = '#button-fetch-auto'
+
+  test.beforeEach(async ({ servers, page }) => {
+    await page.goto(servers[0].url)
+  })
+
+  test('should properly render ui with the ipfs path input and display JSON', async ({ page }) => {
+    // wait for helia node to be online
+    const ipfsPath = await page.locator(ipfsPathInput)
+    await expect(ipfsPath).toHaveClass(/bg-gray-50/)
+
+    await page.fill(ipfsPathInput, `ipfs://${fixtures.json.cid.toString()}`)
+    await page.click(fetchAutoBtn)
+    await page.locator(fetchOutput).waitFor('visible')
+
+    const output = await page.locator(fetchOutput)
+    await expect(output).toContainText(
+      '{ "hello": "world" }',
+      { timeout: 2000 }
+    )
+  })
+
+  test('should properly render ui with the ipfs path input and display DAG-JSON', async ({ page }) => {
+    // wait for helia node to be online
+    const ipfsPath = await page.locator(ipfsPathInput)
+    await expect(ipfsPath).toHaveClass(/bg-gray-50/)
+
+    await page.fill(ipfsPathInput, `ipfs://${fixtures.dagJson.cid.toString()}`)
+    await page.click(fetchAutoBtn)
+    await page.locator(fetchOutput).waitFor('visible')
+
+    const output = await page.locator(fetchOutput)
+    await expect(output).toContainText(
+      '{ "hello": "world" }',
+      { timeout: 2000 }
+    )
+  })
+
+  test('should properly render ui with the ipfs path input and display DAG-CBOR', async ({ page }) => {
+    // wait for helia node to be online
+    const ipfsPath = await page.locator(ipfsPathInput)
+    await expect(ipfsPath).toHaveClass(/bg-gray-50/)
+
+    await page.fill(ipfsPathInput, `ipfs://${fixtures.dagCbor.cid.toString()}`)
+    await page.click(fetchAutoBtn)
+    await page.locator(fetchOutput).waitFor('visible')
+
+    const output = await page.locator(fetchOutput)
+    await expect(output).toContainText(
+      '{ "hello": "world" }',
+      { timeout: 2000 }
+    )
+  })
+})
diff --git a/examples/helia-browser-verified-fetch/test/vite.config.js b/examples/helia-browser-verified-fetch/test/vite.config.js
new file mode 100644
index 00000000..60829f10
--- /dev/null
+++ b/examples/helia-browser-verified-fetch/test/vite.config.js
@@ -0,0 +1,11 @@
+import { resolve } from 'path'
+import defaultConfig from '../vite.config.js'
+
+// override resolution of `blockstore-core` module so we can pre-fill a memory
+// blockstore with test data
+defaultConfig.resolve ??= {}
+defaultConfig.resolve.alias ??= {}
+defaultConfig.resolve.alias['blockstore-core/dist/src/memory.js'] = resolve(process.cwd(), 'test/blockstore.js')
+
+// https://vitejs.dev/config/
+export default defaultConfig
diff --git a/examples/helia-browser-verified-fetch/tsconfig.json b/examples/helia-browser-verified-fetch/tsconfig.json
new file mode 100644
index 00000000..6d545f54
--- /dev/null
+++ b/examples/helia-browser-verified-fetch/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,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/examples/helia-browser-verified-fetch/vite.config.js b/examples/helia-browser-verified-fetch/vite.config.js
new file mode 100644
index 00000000..ba242447
--- /dev/null
+++ b/examples/helia-browser-verified-fetch/vite.config.js
@@ -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/examples/helia-nestjs/tsconfig-check.aegir.json b/examples/helia-nestjs/tsconfig-check.aegir.json
new file mode 100644
index 00000000..1a02e18d
--- /dev/null
+++ b/examples/helia-nestjs/tsconfig-check.aegir.json
@@ -0,0 +1 @@
+{"compilerOptions":{"module":"ES2020","declaration":true,"removeComments":true,"emitDecoratorMetadata":true,"experimentalDecorators":true,"allowSyntheticDefaultImports":true,"target":"ES2020","sourceMap":true,"outDir":"./dist","baseUrl":"./","incremental":true,"skipLibCheck":true,"strictNullChecks":true,"noImplicitAny":false,"strictBindCallApply":false,"forceConsistentCasingInFileNames":false,"noFallthroughCasesInSwitch":false,"moduleResolution":"Node","noEmit":true,"emitDeclarationOnly":false}}