diff --git a/examples/react/fake-keyring-app/.gitignore b/examples/react/fake-keyring-app/.gitignore new file mode 100644 index 00000000..a547bf36 --- /dev/null +++ b/examples/react/fake-keyring-app/.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/react/fake-keyring-app/index.html b/examples/react/fake-keyring-app/index.html new file mode 100644 index 00000000..79c47019 --- /dev/null +++ b/examples/react/fake-keyring-app/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + React + + +
+ + + diff --git a/examples/react/fake-keyring-app/package.json b/examples/react/fake-keyring-app/package.json new file mode 100644 index 00000000..c6aaa3f1 --- /dev/null +++ b/examples/react/fake-keyring-app/package.json @@ -0,0 +1,21 @@ +{ + "name": "fake-keyring-app", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "dependencies": { + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@types/react": "^18.0.26", + "@types/react-dom": "^18.0.9", + "@vitejs/plugin-react": "^3.0.0", + "vite": "^4.0.0" + } +} \ No newline at end of file diff --git a/examples/react/fake-keyring-app/public/vite.svg b/examples/react/fake-keyring-app/public/vite.svg new file mode 100644 index 00000000..e7b8dfb1 --- /dev/null +++ b/examples/react/fake-keyring-app/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/react/fake-keyring-app/src/App.css b/examples/react/fake-keyring-app/src/App.css new file mode 100644 index 00000000..2c5e2ef5 --- /dev/null +++ b/examples/react/fake-keyring-app/src/App.css @@ -0,0 +1,41 @@ +#root { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; +} + +.logo { + height: 6em; + padding: 1.5em; + will-change: filter; +} +.logo:hover { + filter: drop-shadow(0 0 2em #646cffaa); +} +.logo.react:hover { + filter: drop-shadow(0 0 2em #61dafbaa); +} + +@keyframes logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +@media (prefers-reduced-motion: no-preference) { + a:nth-of-type(2) .logo { + animation: logo-spin infinite 20s linear; + } +} + +.card { + padding: 2em; +} + +.read-the-docs { + color: #888; +} diff --git a/examples/react/fake-keyring-app/src/App.jsx b/examples/react/fake-keyring-app/src/App.jsx new file mode 100644 index 00000000..9ca19f26 --- /dev/null +++ b/examples/react/fake-keyring-app/src/App.jsx @@ -0,0 +1,38 @@ +import { useRef, useEffect } from 'react' +import './App.css' + +function log(...args){ + console.log(window.location.toString() + " ", ...args) +} + +function KeyringUserApp () { + const keyringRef = useRef() + function requestKeys () { + keyringRef.current.contentWindow.postMessage("gimme the keys", "http://localhost:3001") + } + + useEffect(function () { + window.addEventListener("message", (event) => { + log(`app received "${event.data}" from keyring domain`) + // TODO: replace this with keyring site URL + if (event.origin !== "http://localhost:3001") + return; + + log("TODO: stash UCAN somewhere and send it along with requests (?)") + }, false); + }, []) + + return ( +
+