feat: add helia/verified-fetch browser example

ipfs-examples · Mar 28, 2024 · 8a2210c · 8a2210c
1 parent 84a9e04
commit 8a2210c
Show file tree

Hide file tree

Showing 14 changed files with 277 additions and 0 deletions.
diff --git a/examples/helia-browser-react-verified-fetch/.gitignore b/examples/helia-browser-react-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-react-verified-fetch/README.md b/examples/helia-browser-react-verified-fetch/README.md
@@ -0,0 +1,36 @@
+<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)
+- [Usage](#usage)
+
+
+## Getting Started
+
+### Installation and Running example
+
+```console
+npm install
+npm run dev
+```
diff --git a/examples/helia-browser-react-verified-fetch/index.html b/examples/helia-browser-react-verified-fetch/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" type="text/css" href="/src/index.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <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-react-verified-fetch/package.json b/examples/helia-browser-react-verified-fetch/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "helia-browser-react-verified-fetch",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@helia/verified-fetch": "^0.0.0-6c88ee1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.17",
+    "eslint": "^8.55.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "postcss": "^8.4.34",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8"
+  }
+}
diff --git a/examples/helia-browser-react-verified-fetch/postcss.config.js b/examples/helia-browser-react-verified-fetch/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/examples/helia-browser-react-verified-fetch/src/App.tsx b/examples/helia-browser-react-verified-fetch/src/App.tsx
@@ -0,0 +1,83 @@
+import { useCallback, useState } from 'react'
+import { verifiedFetch } from '@helia/verified-fetch'
+import { helpText } from './constants'
+
+function App() {
+  const [path, setPath] = useState<string>('')
+  const [output, setOutput] = useState<string>('')
+  const [err, setErr] = useState<string>('')
+
+  const onFetchJson = useCallback(async () => {
+    if (!path) {
+      setErr('Invalid path')
+      return
+    }
+    const resp = await verifiedFetch(path)
+    const json = await resp.json()
+
+    setOutput(json)
+  }, [path])
+
+  const onFetchImage = useCallback(async () => {}, [path])
+  const onFetchFile = useCallback(async () => {}, [path])
+
+  return (
+    <div className="">
+      <section>
+        <div className="grid h-screen grid-cols-2">
+          {/* Left */}
+          <div className="bg-teal-200 p-4">
+            <h1 className="text-2xl">
+              Verified Retrieval with <strong>@helia/verified-fetch</strong>
+            </h1>
+            <label className="block mt-4 mb-2 font-medium text-gray-900 dark:text-white">
+              IPFS path to fetch
+            </label>
+            <input
+              type="text"
+              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={(e) => setPath(e.target.value)}
+              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-resolve-ipns"
+              onClick={onFetchJson}
+            >
+              🔑 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-resolve-ipns"
+              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-resolve-ipns"
+              onClick={onFetchFile}
+            >
+              🔑 Fetch as file
+            </button>
+
+            <pre className="bg-black text-teal-300 rounded p-4">{helpText}</pre>
+          </div>
+          {/* Left */}
+
+          {/* Right */}
+          <div className="bg-violet-300">
+            {output && (
+              <pre className="bg-black text-teal-300 rounded p-4">
+                <code id="output" className="language-json"></code>
+              </pre>
+            )}
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}
+
+export default App
diff --git a/examples/helia-browser-react-verified-fetch/src/constants.ts b/examples/helia-browser-react-verified-fetch/src/constants.ts
@@ -0,0 +1,20 @@
+export const helpText = `Example Paths
+=========
+IPNS name 👇
+ipns://k51qzi5uqu5dhp48cti0590jyvwgxssrii0zdf19pyfsxwoqomqvfg6bg8qj3s
+
+DNSLink 👇
+ipns://tokens.uniswap.org
+
+JSON 👇
+ipfs://bagaaieracglt4ey6qsxtvzqsgwnsw3b6p2tb7nmx5wdgxur2zia7q6nnzh7q
+
+UnixFS JSON 👇
+ipfs://bafybeia5ci747h54m2ybc4rf6yqdtm6nzdisxv57pk66fgubjsnnja6wq4
+
+UnixFS image 👇
+ipfs://bafybeicklkqcnlvtiscr2hzkubjwnwjinvskffn4xorqeduft3wq7vm5u4
+
+UnixFS video 👇
+ipfs://bafybeicq6y27fphdisjtxaybzxold7dczhvxiiyn3bvkyht7b36lveerrm
+`
diff --git a/examples/helia-browser-react-verified-fetch/src/index.css b/examples/helia-browser-react-verified-fetch/src/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/examples/helia-browser-react-verified-fetch/src/main.tsx b/examples/helia-browser-react-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-react-verified-fetch/src/vite-env.d.ts b/examples/helia-browser-react-verified-fetch/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/helia-browser-react-verified-fetch/tailwind.config.js b/examples/helia-browser-react-verified-fetch/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
diff --git a/examples/helia-browser-react-verified-fetch/tsconfig.json b/examples/helia-browser-react-verified-fetch/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "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"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/examples/helia-browser-react-verified-fetch/tsconfig.node.json b/examples/helia-browser-react-verified-fetch/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/examples/helia-browser-react-verified-fetch/vite.config.ts b/examples/helia-browser-react-verified-fetch/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})