CommonsSwarm · 0xGabi · Apr 21, 2021
diff --git a/example/.gitignore b/example/.gitignore
@@ -0,0 +1,4 @@
+.build
+build
+web_modules
+node_modules
diff --git a/example/README.md b/example/README.md
@@ -0,0 +1,10 @@
+# Connect React − Intro
+
+A simple demo that displays the apps of an organization.
+
+## How to run
+
+```console
+yarn
+yarn start
+```
diff --git a/example/babel.config.json b/example/babel.config.json
@@ -0,0 +1,3 @@
+{
+  "extends": "@snowpack/app-scripts-react/babel.config.json"
+}
diff --git a/example/package.json b/example/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "example",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "start": "snowpack dev",
+    "build": "snowpack build"
+  },
+  "dependencies": {
+    "@1hive/connect-react": "^0.8.6",
+    "@commonsswarm/connect-hatch": "file:.yalc/@commonsswarm/connect-hatch",
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0"
+  },
+  "devDependencies": {
+    "@snowpack/app-scripts-react": "^1.6.0-alpha.0",
+    "@types/react": "^16.9.35",
+    "@types/react-dom": "^16.9.8",
+    "snowpack": "^2.6.4",
+    "typescript": "^3.8.0"
+  }
+}
diff --git a/example/public/favicon.ico b/example/public/favicon.ico
diff --git a/example/public/index.html b/example/public/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Connect React − Intro</title>
+    <style>
+      body,
+      button {
+        font: 16px/1.5 monospace;
+      }
+      body {
+        margin: 0;
+        padding: 40px;
+        color: #333;
+        background: #e5ffff;
+      }
+      button {
+        display: block;
+        width: auto;
+        padding: 5px;
+        color: #fff;
+        background: #a5aaaa;
+        border: 0;
+        border-radius: 3px;
+        cursor: pointer;
+        font-size: 14px;
+      }
+      h1 {
+        display: flex;
+        align-items: center;
+        margin: 30px 0 10px;
+        font-weight: 400;
+        font-size: 22px;
+      }
+      h1 button {
+        margin-left: 10px;
+      }
+      section h1 {
+        font-size: 18px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <script type="module" src="/_dist_/index.js"></script>
+  </body>
+</html>
diff --git a/example/public/robots.txt b/example/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/example/snowpack.config.json b/example/snowpack.config.json
@@ -0,0 +1,3 @@
+{
+  "extends": "@snowpack/app-scripts-react"
+}
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { Connect } from '@1hive/connect-react'
+import Info from './Info'
+
+function App() {
+  return (
+    <Connect
+      location="0x610f47Ece09Da2367f295950E5E4Aea581Bc7A23"
+      connector="thegraph"
+      options={{ network: 100 }}
+    >
+      <Info />
+    </Connect>
+  )
+}
+
+export default App
diff --git a/example/src/Info.tsx b/example/src/Info.tsx
@@ -0,0 +1,98 @@
+import React from 'react'
+import { useOrganization, useApps, useApp } from '@1hive/connect-react'
+import connectHatch from '@commonsswarm/connect-hatch'
+import LogButton from './LogButton'
+
+export default function Info() {
+  const [org] = useOrganization()
+  const [apps] = useApps()
+  const [hatchConnector, setHatchConnector] = React.useState(null)
+  const [contributors, setContributors] = React.useState(null)
+  const [hatchApp] = useApp('marketplace-hatch')
+
+  React.useEffect(() => {
+    if (!hatchApp) {
+      return
+    }
+
+    let cancelled = false
+
+    const fetchHatchConnector = async () => {
+      try {
+        const hatchConnector = await connectHatch(hatchApp)
+
+        if (!cancelled) {
+          setHatchConnector(hatchConnector)
+        }
+      } catch (err) {
+        console.error(`Error fetching hatch connector: ${err}`)
+      }
+    }
+
+    fetchHatchConnector()
+
+    return () => {
+      cancelled = true
+    }
+  }, [hatchApp])
+
+  React.useEffect(() => {
+    let cancelled = false
+
+    const fetchContributors = async () => {
+      try {
+        const contributors = await hatchConnector.contributors({
+          first: 100,
+          skip: 50,
+          orderBy: 'totalValue',
+          orderDirection: 'asc',
+        })
+
+        if (!cancelled) {
+          setContributors(contributors)
+        }
+      } catch (err) {
+        console.error(`Error fetching hatch connector: ${err}`)
+      }
+    }
+
+    if (!hatchConnector) {
+      return
+    }
+
+    fetchContributors()
+
+    return () => {
+      cancelled = true
+    }
+  }, [hatchConnector])
+
+  if (!org) {
+    return <div>Loading…</div>
+  }
+
+  return (
+    <>
+      <h1>Organization</h1>
+      <div>location: {org.location}</div>
+      <div>address: {org.address}</div>
+
+      <h1>Apps</h1>
+      {apps?.map((app: any) => (
+        <section key={app.address}>
+          <h1>
+            {app.name} <LogButton value={app} />
+          </h1>
+          <div>address: {app.address}</div>
+          {app.version && <div>version: {app.version}</div>}
+        </section>
+      ))}
+      <h1>Contributors</h1>
+      {contributors?.map((contributor: any) => (
+        <section key={contributor.address}>
+          <div>address: {contributor.address}</div>
+        </section>
+      ))}
+    </>
+  )
+}
diff --git a/example/src/LogButton.tsx b/example/src/LogButton.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+function LogButton({ value }: any) {
+  return <button onClick={() => console.log(value)}>log()</button>
+}
+
+export default LogButton
diff --git a/example/src/index.tsx b/example/src/index.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+)
+
+// Hot Module Replacement (HMR) - Remove this snippet to remove HMR.
+// Learn more: https://www.snowpack.dev/#hot-module-replacement
+if (import.meta.hot) {
+  import.meta.hot.accept()
+}
diff --git a/example/tsconfig.json b/example/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "@snowpack/app-scripts-react/tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "src",
+    "jsx": "react",
+    "target": "ESNext",
+    "baseUrl": "./",
+    "paths": { "*": ["web_modules/.types/*"] }
+  },
+  "include": ["src", "types"],
+  "exclude": ["node_modules"],
+  "references": [{ "path": "../tsconfig.json" }]
+}
diff --git a/example/types/import.d.ts b/example/types/import.d.ts
@@ -0,0 +1,8 @@
+// ESM-HMR Interface: `import.meta.hot`
+
+interface ImportMeta {
+  // TODO: Import the exact .d.ts files from "esm-hmr"
+  // https://github.com/pikapkg/esm-hmr
+  hot: any;
+  env: Record<string, any>;
+}
diff --git a/example/types/static.d.ts b/example/types/static.d.ts
@@ -0,0 +1,32 @@
+/* Use this file to declare any custom file extensions for importing */
+/* Use this folder to also add/extend a package d.ts file, if needed. */
+
+declare module '*.css';
+declare module '*.svg' {
+  const ref: string;
+  export default ref;
+}
+declare module '*.bmp' {
+  const ref: string;
+  export default ref;
+}
+declare module '*.gif' {
+  const ref: string;
+  export default ref;
+}
+declare module '*.jpg' {
+  const ref: string;
+  export default ref;
+}
+declare module '*.jpeg' {
+  const ref: string;
+  export default ref;
+}
+declare module '*.png' {
+  const ref: string;
+  export default ref;
+}
+declare module '*.webp' {
+  const ref: string;
+  export default ref;
+}
diff --git a/example/yalc.lock b/example/yalc.lock
@@ -0,0 +1,10 @@
+{
+  "version": "v1",
+  "packages": {
+    "@commonsswarm/connect-hatch": {
+      "signature": "55c67d2cd43470c2d3b73bd749e9b206",
+      "file": true,
+      "replaced": "^0.0.1"
+    }
+  }
+}