From 6e0e610a2166d81ea5585d2e376db29753877789 Mon Sep 17 00:00:00 2001 From: Gabi Date: Wed, 21 Apr 2021 13:38:00 -0300 Subject: [PATCH] Add example --- example/.gitignore | 4 ++ example/README.md | 10 ++++ example/babel.config.json | 3 ++ example/package.json | 22 ++++++++ example/public/favicon.ico | Bin 0 -> 3150 bytes example/public/index.html | 50 ++++++++++++++++++ example/public/robots.txt | 3 ++ example/snowpack.config.json | 3 ++ example/src/App.tsx | 17 ++++++ example/src/Info.tsx | 98 +++++++++++++++++++++++++++++++++++ example/src/LogButton.tsx | 7 +++ example/src/index.tsx | 16 ++++++ example/tsconfig.json | 14 +++++ example/types/import.d.ts | 8 +++ example/types/static.d.ts | 32 ++++++++++++ example/yalc.lock | 10 ++++ 16 files changed, 297 insertions(+) create mode 100644 example/.gitignore create mode 100644 example/README.md create mode 100644 example/babel.config.json create mode 100644 example/package.json create mode 100644 example/public/favicon.ico create mode 100644 example/public/index.html create mode 100644 example/public/robots.txt create mode 100644 example/snowpack.config.json create mode 100644 example/src/App.tsx create mode 100644 example/src/Info.tsx create mode 100644 example/src/LogButton.tsx create mode 100644 example/src/index.tsx create mode 100644 example/tsconfig.json create mode 100644 example/types/import.d.ts create mode 100644 example/types/static.d.ts create mode 100644 example/yalc.lock diff --git a/example/.gitignore b/example/.gitignore new file mode 100644 index 0000000..a9965a5 --- /dev/null +++ b/example/.gitignore @@ -0,0 +1,4 @@ +.build +build +web_modules +node_modules \ No newline at end of file diff --git a/example/README.md b/example/README.md new file mode 100644 index 0000000..a4fa23d --- /dev/null +++ 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 new file mode 100644 index 0000000..9357351 --- /dev/null +++ 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 new file mode 100644 index 0000000..55d8e7b --- /dev/null +++ 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 new file mode 100644 index 0000000000000000000000000000000000000000..bcd5dfd67cd0361b78123e95c2dd96031f27f743 GIT binary patch literal 3150 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 MDeX2GIKR{Qf5okjU;qFB literal 0 HcmV?d00001 diff --git a/example/public/index.html b/example/public/index.html new file mode 100644 index 0000000..1900432 --- /dev/null +++ b/example/public/index.html @@ -0,0 +1,50 @@ + + + + + + + Connect React − Intro + + + +
+ + + + diff --git a/example/public/robots.txt b/example/public/robots.txt new file mode 100644 index 0000000..e9e57dc --- /dev/null +++ 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 new file mode 100644 index 0000000..ee7a488 --- /dev/null +++ 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 new file mode 100644 index 0000000..ce72e62 --- /dev/null +++ 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 ( + + + + ) +} + +export default App diff --git a/example/src/Info.tsx b/example/src/Info.tsx new file mode 100644 index 0000000..5184028 --- /dev/null +++ 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
Loading…
+ } + + return ( + <> +

Organization

+
location: {org.location}
+
address: {org.address}
+ +

Apps

+ {apps?.map((app: any) => ( +
+

+ {app.name} +

+
address: {app.address}
+ {app.version &&
version: {app.version}
} +
+ ))} +

Contributors

+ {contributors?.map((contributor: any) => ( +
+
address: {contributor.address}
+
+ ))} + + ) +} diff --git a/example/src/LogButton.tsx b/example/src/LogButton.tsx new file mode 100644 index 0000000..ae878dc --- /dev/null +++ b/example/src/LogButton.tsx @@ -0,0 +1,7 @@ +import React from 'react' + +function LogButton({ value }: any) { + return +} + +export default LogButton diff --git a/example/src/index.tsx b/example/src/index.tsx new file mode 100644 index 0000000..13e69ea --- /dev/null +++ b/example/src/index.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import ReactDOM from 'react-dom' +import App from './App' + +ReactDOM.render( + + + , + 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 new file mode 100644 index 0000000..3947680 --- /dev/null +++ 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 new file mode 100644 index 0000000..2cca6d8 --- /dev/null +++ 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; +} diff --git a/example/types/static.d.ts b/example/types/static.d.ts new file mode 100644 index 0000000..a81b1be --- /dev/null +++ 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 new file mode 100644 index 0000000..98dbfcc --- /dev/null +++ b/example/yalc.lock @@ -0,0 +1,10 @@ +{ + "version": "v1", + "packages": { + "@commonsswarm/connect-hatch": { + "signature": "55c67d2cd43470c2d3b73bd749e9b206", + "file": true, + "replaced": "^0.0.1" + } + } +} \ No newline at end of file