add poc

.github/workflows/main.yml

@@ -0,0 +1,32 @@
+name: CI
+on: [push]
+jobs:
+  build:
+    name: Build, lint, and test on Node ${{ matrix.node }} and ${{ matrix.os }}
+
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        node: ['10.x', '12.x', '14.x']
+        os: [ubuntu-latest, windows-latest, macOS-latest]
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v2
+
+      - name: Use Node ${{ matrix.node }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node }}
+
+      - name: Install deps and build (with cache)
+        uses: bahmutov/npm-install@v1
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Test
+        run: yarn test --ci --coverage --maxWorkers=2
+
+      - name: Build
+        run: yarn build

.github/workflows/size.yml

@@ -0,0 +1,12 @@
+name: size
+on: [pull_request]
+jobs:
+  size:
+    runs-on: ubuntu-latest
+    env:
+      CI_JOB_NUMBER: 1
+    steps:
+      - uses: actions/checkout@v1
+      - uses: andresz1/size-limit-action@v1
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -0,0 +1,7 @@
+*.log
+.DS_Store
+node_modules
+.cache
+dist
+example/.cache/
+example/.parcel-cache/

README.md

@@ -0,0 +1,160 @@
+# TSDX React User Guide
+
+Congrats! You just saved yourself hours of work by bootstrapping this project with TSDX. Let’s get you oriented with what’s here and how to use it.
+
+> This TSDX setup is meant for developing React component libraries (not apps!) that can be published to NPM. If you’re looking to build a React-based app, you should use `create-react-app`, `razzle`, `nextjs`, `gatsby`, or `react-static`.
+
+> If you’re new to TypeScript and React, checkout [this handy cheatsheet](https://github.com/sw-yx/react-typescript-cheatsheet/)
+
+## Commands
+
+TSDX scaffolds your new library inside `/src`, and also sets up a [Parcel-based](https://parceljs.org) playground for it inside `/example`.
+
+The recommended workflow is to run TSDX in one terminal:
+
+```bash
+npm start # or yarn start
+```
+
+This builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`.
+
+Then run the example inside another:
+
+```bash
+cd example
+npm i # or yarn to install dependencies
+npm start # or yarn start
+```
+
+The default example imports and live reloads whatever is in `/dist`, so if you are seeing an out of date component, make sure TSDX is running in watch mode like we recommend above. **No symlinking required**, we use [Parcel's aliasing](https://parceljs.org/module_resolution.html#aliases).
+
+To do a one-off build, use `npm run build` or `yarn build`.
+
+To run tests, use `npm test` or `yarn test`.
+
+## Configuration
+
+Code quality is set up for you with `prettier`, `husky`, and `lint-staged`. Adjust the respective fields in `package.json` accordingly.
+
+### Jest
+
+Jest tests are set up to run with `npm test` or `yarn test`.
+
+### Bundle analysis
+
+Calculates the real cost of your library using [size-limit](https://github.com/ai/size-limit) with `npm run size` and visulize it with `npm run analyze`.
+
+#### Setup Files
+
+This is the folder structure we set up for you:
+
+```txt
+/example
+  index.html
+  index.tsx       # test your component here in a demo app
+  package.json
+  tsconfig.json
+/src
+  index.tsx       # EDIT THIS
+/test
+  blah.test.tsx   # EDIT THIS
+.gitignore
+package.json
+README.md         # EDIT THIS
+tsconfig.json
+```
+
+#### React Testing Library
+
+We do not set up `react-testing-library` for you yet, we welcome contributions and documentation on this.
+
+### Rollup
+
+TSDX uses [Rollup](https://rollupjs.org) as a bundler and generates multiple rollup configs for various module formats and build settings. See [Optimizations](#optimizations) for details.
+
+### TypeScript
+
+`tsconfig.json` is set up to interpret `dom` and `esnext` types, as well as `react` for `jsx`. Adjust according to your needs.
+
+## Continuous Integration
+
+### GitHub Actions
+
+Two actions are added by default:
+
+- `main` which installs deps w/ cache, lints, tests, and builds on all pushes against a Node and OS matrix
+- `size` which comments cost comparison of your library on every pull request using [`size-limit`](https://github.com/ai/size-limit)
+
+## Optimizations
+
+Please see the main `tsdx` [optimizations docs](https://github.com/palmerhq/tsdx#optimizations). In particular, know that you can take advantage of development-only optimizations:
+
+```js
+// ./types/index.d.ts
+declare var __DEV__: boolean;
+
+// inside your code...
+if (__DEV__) {
+  console.log('foo');
+}
+```
+
+You can also choose to install and use [invariant](https://github.com/palmerhq/tsdx#invariant) and [warning](https://github.com/palmerhq/tsdx#warning) functions.
+
+## Module Formats
+
+CJS, ESModules, and UMD module formats are supported.
+
+The appropriate paths are configured in `package.json` and `dist/index.js` accordingly. Please report if any issues are found.
+
+## Deploying the Example Playground
+
+The Playground is just a simple [Parcel](https://parceljs.org) app, you can deploy it anywhere you would normally deploy that. Here are some guidelines for **manually** deploying with the Netlify CLI (`npm i -g netlify-cli`):
+
+```bash
+cd example # if not already in the example folder
+npm run build # builds to dist
+netlify deploy # deploy the dist folder
+```
+
+Alternatively, if you already have a git repo connected, you can set up continuous deployment with Netlify:
+
+```bash
+netlify init
+# build command: yarn build && cd example && yarn && yarn build
+# directory to deploy: example/dist
+# pick yes for netlify.toml
+```
+
+## Named Exports
+
+Per Palmer Group guidelines, [always use named exports.](https://github.com/palmerhq/typescript#exports) Code split inside your React app instead of your React library.
+
+## Including Styles
+
+There are many ways to ship styles, including with CSS-in-JS. TSDX has no opinion on this, configure how you like.
+
+For vanilla CSS, you can include it at the root directory and add it to the `files` section in your `package.json`, so that it can be imported separately by your users and run through their bundler's loader.
+
+## Publishing to NPM
+
+We recommend using [np](https://github.com/sindresorhus/np).
+
+## Usage with Lerna
+
+When creating a new package with TSDX within a project set up with Lerna, you might encounter a `Cannot resolve dependency` error when trying to run the `example` project. To fix that you will need to make changes to the `package.json` file _inside the `example` directory_.
+
+The problem is that due to the nature of how dependencies are installed in Lerna projects, the aliases in the example project's `package.json` might not point to the right place, as those dependencies might have been installed in the root of your Lerna project.
+
+Change the `alias` to point to where those packages are actually installed. This depends on the directory structure of your Lerna project, so the actual path might be different from the diff below.
+
+```diff
+   "alias": {
+-    "react": "../node_modules/react",
+-    "react-dom": "../node_modules/react-dom"
++    "react": "../../../node_modules/react",
++    "react-dom": "../../../node_modules/react-dom"
+   },
+```
+
+An alternative to fixing this problem would be to remove aliases altogether and define the dependencies referenced as aliases as dev dependencies instead. [However, that might cause other problems.](https://github.com/palmerhq/tsdx/issues/64)

example/.npmignore

@@ -0,0 +1,3 @@
+node_modules
+.cache
+dist

example/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Playground</title>
+  </head>
+
+  <body style="background-color:lightgray;"}}>
+    <div id="root"></div>
+    <script src="./index.tsx" type="module"></script>
+  </body>
+</html>

example/index.tsx

@@ -0,0 +1,97 @@
+import 'react-app-polyfill/ie11';
+import * as React from 'react';
+import { useEffect } from 'react';
+import * as ReactDOM from 'react-dom';
+import { Session } from '../src/index';
+import { generatePrivateKey, getPublicKey, nip04, relayInit } from 'nostr-tools'
+
+const App = () => {
+  /* useEffect(() => {
+    (async () => {
+    })();
+  }, []); */
+
+  const [walletKey, setWalletKey] = React.useState<{ pk: string; sk: string }>();
+  const [sessionHolder, setSession] = React.useState<Session>();
+  const [request, setRequest] = React.useState<any>();
+
+
+  const newWallet = () => {
+    //this is the wallet public key
+    let sk = generatePrivateKey()
+    let pk = getPublicKey(sk)
+    setWalletKey({ pk, sk });
+  }
+
+  const newSession = async () => {
+
+    const session = new Session({
+      name: 'Auth',
+      description: 'lorem ipsum dolor sit amet',
+      url: 'https://vulpem.com',
+      icons: ['https://vulpem.com/1000x860-p-500.422be1bc.png'],
+    });
+    
+    await session.startPairing(walletKey?.pk);    
+    setSession(session);
+  };
+
+  const listen = async () => {
+    if (!sessionHolder) return;
+
+    // let's query for an event to this wallet pub key
+    const relay = relayInit('wss://nostr.vulpem.com');
+    await relay.connect()
+
+    relay.on('connect', () => {
+      console.log(`wallet: connected to ${relay.url}`)
+    })
+    relay.on('error', () => {
+      console.log(`wallet: failed to connect to ${relay.url}`)
+    })
+
+    let sub = relay.sub([{ kinds: [4] }])
+    // on the receiver side
+    sub.on('event', async (event) => {
+      if (!walletKey) return;
+
+      const mention = event.tags.find(([k, v]) => k === 'p' && v && v !== '')[1]
+      if (mention !== walletKey.pk) return;
+
+      const plaintext = await nip04.decrypt(walletKey?.sk, sessionHolder.pubKey, event.content);
+      console.log('wallet', event.id, event.pubkey, JSON.parse(plaintext));
+      setRequest(JSON.parse(plaintext));
+    })
+
+    sub.on('eose', () => {
+      sub.unsub()
+    })
+  }
+
+  return (
+    <div>
+      <h1>💸 Wallet</h1>
+      {walletKey && <p> 🔎 Wallet Pub: {walletKey?.pk} </p>}
+      <button onClick={newWallet}>Create Wallet</button>
+      <button disabled={!sessionHolder} onClick={listen}>Listen</button>
+      {request && <div>
+        <h1>📨 Incoming Request</h1>
+        <img height={80} src={request?.icons[0]} />
+        <p>
+          Name <b>{request?.name}</b>
+        </p>
+        <p>
+          Description <b>{request?.description}</b>
+        </p>
+        <p>
+          URL: <b>{request?.url}</b>
+        </p>
+      </div>}
+      <hr />
+      <h1> App </h1>
+      <button disabled={!walletKey} onClick={newSession}>New Session</button>
+    </div>
+  );
+};
+
+ReactDOM.render(<App />, document.getElementById('root'));

example/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "example",
+  "version": "1.0.0",
+  "license": "MIT",
+  "scripts": {
+    "start": "parcel --no-cache index.html",
+    "watch": "parcel watch index.html",
+    "build": "parcel build index.html"
+  },
+  "dependencies": {
+    "react-app-polyfill": "^1.0.0"
+  },
+  "alias": {
+    "react": "../node_modules/react",
+    "react-dom": "../node_modules/react-dom/profiling",
+    "scheduler/tracing": "../node_modules/scheduler/tracing-profiling"
+  },
+  "devDependencies": {
+    "@types/react": "^16.9.11",
+    "@types/react-dom": "^16.8.4",
+    "parcel": "^2.8.2",
+    "typescript": "^3.4.5"
+  }
+}

example/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": false,
+    "target": "es5",
+    "module": "commonjs",
+    "jsx": "react",
+    "moduleResolution": "node",
+    "noImplicitAny": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "removeComments": true,
+    "strictNullChecks": true,
+    "preserveConstEnums": true,
+    "sourceMap": true,
+    "lib": ["es2015", "es2016", "dom"],
+    "types": ["node"]
+  }
+}

package.json

@@ -0,0 +1,64 @@
+{
+  "version": "0.1.0",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "engines": {
+    "node": ">=10"
+  },
+  "scripts": {
+    "start": "tsdx watch",
+    "build": "tsdx build",
+    "test": "tsdx test --passWithNoTests",
+    "lint": "tsdx lint",
+    "prepare": "tsdx build",
+    "size": "size-limit",
+    "analyze": "size-limit --why"
+  },
+  "peerDependencies": {
+    "react": ">=16"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "tsdx lint"
+    }
+  },
+  "prettier": {
+    "printWidth": 80,
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "es5"
+  },
+  "name": "nostr-connect-ts",
+  "author": "tiero",
+  "module": "dist/nostr-connect-ts.esm.js",
+  "size-limit": [
+    {
+      "path": "dist/nostr-connect-ts.cjs.production.min.js",
+      "limit": "10 KB"
+    },
+    {
+      "path": "dist/nostr-connect-ts.esm.js",
+      "limit": "10 KB"
+    }
+  ],
+  "devDependencies": {
+    "@size-limit/preset-small-lib": "^8.1.0",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "husky": "^8.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "size-limit": "^8.1.0",
+    "tsdx": "^0.14.1",
+    "tslib": "^2.4.1",
+    "typescript": "^4.9.4"
+  },
+  "dependencies": {
+    "nostr-tools": "^1.0.1"
+  }
+}

src/index.tsx

@@ -0,0 +1,103 @@
+import {
+  generatePrivateKey,
+  getPublicKey,
+  validateEvent,
+  verifySignature,
+  signEvent,
+  getEventHash,
+  Event,
+  relayInit,
+  nip04
+} from 'nostr-tools'
+
+const KEY_MANAGER = "40852bb98e00d3e242d6a9717ede49574168ecef83841ce88f56699cc83f3085";
+
+export class Session {
+  request: {
+    name: string;
+    description: any;
+    url: any;
+    icons: any;
+  };
+  pubKey: string;
+  private secretKey: string;
+
+  
+  constructor({
+    name,
+    description,
+    url,
+    icons,
+  }: {
+    name: string,
+    description?: string
+    url: string,
+    icons: string[],
+  }) {
+    // Generate an ephemeral identity for this session in the app
+    let sk = generatePrivateKey()
+    let pk = getPublicKey(sk)
+    this.secretKey = sk;
+    this.pubKey = pk;
+
+    this.request = {
+      name,
+      description,
+      url,
+      icons,
+    };
+    console.log(`Session with   pubKey: ${this.pubKey}`)
+  }
+
+  async startPairing(walletPubKey: string = KEY_MANAGER) {
+    const payload = JSON.stringify(this.request);
+    const cipherText = await nip04.encrypt(this.secretKey, walletPubKey, payload);
+    let event: Event = {
+      kind: 4,
+      created_at: Math.floor(Date.now() / 1000),
+      pubkey: this.pubKey,
+      tags: [['p', walletPubKey]],
+      content: cipherText,
+    }
+    await this.sendEvent(event)  
+  }
+
+  async sendEvent(event: Event) {
+    const id = getEventHash(event)
+    const sig = signEvent(event, this.secretKey)
+
+    const signedEvent = { ...event, id, sig };
+    let ok = validateEvent(signedEvent)
+    let veryOk = verifySignature(signedEvent)
+    console.log(ok, veryOk)
+    if (!ok || !veryOk) {
+      throw new Error('Event is not valid')
+    }
+
+    const relay = relayInit('wss://nostr.vulpem.com')
+
+    await relay.connect();
+    relay.on('connect', () => {
+      console.log(`connected to ${relay.url}`)
+    })
+    relay.on('error', () => {
+      throw new Error(`failed to connect to ${relay.url}`);
+    })
+
+
+    let pub = relay.publish(signedEvent);
+    console.log(signedEvent);
+
+    pub.on('ok', () => {
+      console.log(`${relay.url} has accepted our event`)
+    })
+    pub.on('seen', () => {
+      console.log(`we saw the event on ${relay.url}`)
+    })
+    pub.on('failed', (reason: any) => {
+      console.error(reason);
+      console.log(`failed to publish to ${relay.url}: ${reason}`)
+    })
+  }
+
+}

test/blah.test.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Thing } from '../src';
+
+describe('it', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<Thing />, div);
+    ReactDOM.unmountComponentAtNode(div);
+  });
+});

tsconfig.json

@@ -0,0 +1,35 @@
+{
+  // see https://www.typescriptlang.org/tsconfig to better understand tsconfigs
+  "include": ["src", "types"],
+  "compilerOptions": {
+    "module": "esnext",
+    "lib": ["dom", "esnext"],
+    "importHelpers": true,
+    // output .d.ts declaration files for consumers
+    "declaration": true,
+    // output .js.map sourcemap files for consumers
+    "sourceMap": true,
+    // match output dir to input dir. e.g. dist/index instead of dist/src/index
+    "rootDir": "./src",
+    // stricter type-checking for stronger correctness. Recommended by TS
+    "strict": true,
+    // linter checks for common issues
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    // noUnused* overlap with @typescript-eslint/no-unused-vars, can disable if duplicative
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    // use Node's module resolution algorithm, instead of the legacy TS one
+    "moduleResolution": "node",
+    // transpile JSX to React.createElement
+    "jsx": "react",
+    // interop between ESM and CJS modules. Recommended by TS
+    "esModuleInterop": true,
+    // significant perf increase by skipping checking .d.ts files, particularly those in node_modules. Recommended by TS
+    "skipLibCheck": true,
+    // error out if import and file system have a casing mismatch. Recommended by TS
+    "forceConsistentCasingInFileNames": true,
+    // `tsdx build` ignores this option, but it is commonly used when type-checking separately with `tsc`
+    "noEmit": true,
+  }
+}