Add example of how did-session is used

.gitignore

@@ -5,3 +5,4 @@ dist/
 .idea
 *.log
 .DS_Store
+.parcel-cache/

package.json

@@ -20,15 +20,33 @@
     "@types/jest": "^29.5.1",
     "@typescript-eslint/eslint-plugin": "^5.59.7",
     "@typescript-eslint/parser": "^5.59.7",
+    "assert": "^2.0.0",
+    "browserify-zlib": "^0.2.0",
+    "buffer": "^5.5.0||^6.0.0",
+    "crypto-browserify": "^3.12.0",
     "del-cli": "^5.0.0",
     "eslint": "^8.41.0",
     "eslint-config-3box": "^0.4.0",
     "eslint-plugin-jest": "^27.2.1",
+    "events": "^3.1.0",
+    "https-browserify": "^1.0.0",
     "jest": "^29.5.0",
+    "os-browserify": "^0.3.0",
+    "path-browserify": "^1.0.0",
     "prettier": "^2.8.8",
+    "process": "^0.11.10",
+    "punycode": "^1.4.1",
+    "stream-browserify": "^3.0.0",
+    "stream-http": "^3.1.0",
+    "string_decoder": "^1.3.0",
     "turbo": "^1.9.8",
     "typedoc": "0.24.7",
     "typedoc-plugin-markdown": "^3.15.3",
-    "typescript": "^5.0.4"
+    "typescript": "^5.0.4",
+    "url": "^0.11.0",
+    "util": "^0.12.3"
+  },
+  "@parcel/resolver-default": {
+    "packageExports": true
   }
 }

packages/example/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@siwx/example",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "./node_modules/.bin/parcel ./src/index.html"
+  },
+  "dependencies": {
+    "@airgap/beacon-sdk": "^4.0.4",
+    "@nanostores/react": "^0.7.1",
+    "@rainbow-me/rainbowkit": "^1.0.2",
+    "@tanstack/react-query": "^4.29.15",
+    "@types/react": "^18.2.14",
+    "@wagmi/core": "^1.2.1",
+    "@didtools/cacao": "workspace:*",
+    "@didtools/pkh-ethereum": "workspace:*",
+    "@didtools/pkh-tezos": "workspace:*",
+    "caip": "^1.1.0",
+    "did-session": "workspace:*",
+    "nanostores": "^0.9.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "viem": "^1.0.7",
+    "wagmi": "^1.2.1"
+  },
+  "alias": {
+    "preact/jsx-dev-runtime": "preact/jsx-runtime"
+  },
+  "devDependencies": {
+    "parcel": "nightly"
+  }
+}

packages/example/src/account.ts

@@ -0,0 +1,13 @@
+import type { AccountId } from 'caip'
+import { map } from 'nanostores'
+
+export type $Account =
+  | {
+      kind: 'ready'
+      accountId: AccountId
+      siwe: string
+      disconnect: () => Promise<void>
+    }
+  | { kind: 'absent' }
+
+export const $account = map<$Account>({ kind: 'absent' })

packages/example/src/app.tsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import { useStore } from '@nanostores/react'
+import { $account } from './account'
+import { RainbowProvider, WithEthereumCacao } from './ethereum'
+// import { WithTezos } from './tezos'
+
+function SignIn() {
+  return (
+    <>
+      <h1>Sign In With ...</h1>
+      <ul className={'sign-in-options'}>
+        {/*<li>*/}
+        {/*<WithEthereum />*/}
+        {/*</li>*/}
+        <li>
+          <WithEthereumCacao />
+        </li>
+        {/*<li>*/}
+        {/*  <WithTezos />*/}
+        {/*</li>*/}
+        {/*<li>*/}
+        {/*  <button className={'solana'}>Solana</button>*/}
+        {/*</li>*/}
+        {/*<li>*/}
+        {/*  <button className={'stacks'}>Stacks</button>*/}
+        {/*</li>*/}
+      </ul>
+    </>
+  )
+}
+
+function DisplayAccount() {
+  const account = useStore($account)
+  if (account.kind === 'absent') return <></>
+
+  const handleDisconnect = () => {
+    account
+      .disconnect()
+      .then(() => {
+        console.log('disconnected')
+      })
+      .catch((error) => {
+        console.error(error)
+      })
+  }
+
+  return (
+    <div>
+      <h2>Current account:</h2>
+      <pre>
+        <code>{account.accountId.toString()}</code>
+      </pre>
+      {/*<p>SIWx message:</p>*/}
+      {/*<pre>*/}
+      {/*  <code>{account.siwe.toString()}</code>*/}
+      {/*</pre>*/}
+      <p>
+        <button onClick={handleDisconnect}>Disconnect</button>
+      </p>
+    </div>
+  )
+}
+
+export function App() {
+  return (
+    <RainbowProvider>
+      <div className={'container'}>
+        <SignIn />
+        <DisplayAccount />
+      </div>
+    </RainbowProvider>
+  )
+}

packages/example/src/ethereum.tsx

@@ -0,0 +1,90 @@
+import { connectorsForWallets, RainbowKitProvider, useConnectModal } from '@rainbow-me/rainbowkit'
+import { configureChains, createConfig, useAccount, useDisconnect, WagmiConfig } from 'wagmi'
+import { AccountId } from 'caip'
+import { $account } from './account'
+import React, { PropsWithChildren, useCallback } from 'react'
+import { mainnet, polygon } from 'wagmi/chains'
+import { publicProvider } from 'wagmi/providers/public'
+import {
+  injectedWallet,
+  metaMaskWallet,
+  rainbowWallet,
+  walletConnectWallet,
+} from '@rainbow-me/rainbowkit/wallets'
+import { QueryClient } from '@tanstack/react-query'
+import { EthereumWebAuth } from '@didtools/pkh-ethereum'
+import { DIDSession } from 'did-session'
+
+export function WithEthereumCacao() {
+  const connectModal = useConnectModal()
+  const disconnect = useDisconnect()
+
+  useAccount({
+    async onConnect({ address, connector }) {
+      if (!address || !connector) return
+      await connector.getChainId().then(async (chainId) => {
+        const accountId = new AccountId({ address: address, chainId: `eip155:${chainId}` })
+        const provider = await connector.getProvider()
+        const authMethod = await EthereumWebAuth.getAuthMethod(provider, accountId)
+        const session = await DIDSession.get(accountId, authMethod, { resources: ['ceramic://nil'] })
+        const did = session.did
+        const signature = await did.createJWS({ hello: 'world' })
+        console.log('did-signature-jws', signature)
+        $account.set({
+          kind: 'ready',
+          siwe: '',
+          accountId: accountId,
+          disconnect: async () => {
+            await disconnect.disconnectAsync()
+            $account.set({ kind: 'absent' })
+          },
+        })
+      })
+    },
+  })
+
+  const handleClick = useCallback(() => {
+    if (connectModal.connectModalOpen) return
+    if (connectModal.openConnectModal) connectModal.openConnectModal()
+  }, [connectModal])
+
+  return (
+    <button onClick={handleClick} type="button">
+      Ethereum + CACAO (see console log)
+    </button>
+  )
+}
+
+const { publicClient, webSocketPublicClient, chains } = configureChains(
+  [mainnet, polygon],
+  [publicProvider()]
+)
+
+const projectId = '81d9f4a7bc6d0c61f049e8a34b088f95'
+
+const connectors = connectorsForWallets([
+  {
+    groupName: 'Recommended',
+    wallets: [
+      injectedWallet({ chains }),
+      metaMaskWallet({ chains, projectId }),
+      rainbowWallet({ projectId, chains }),
+      walletConnectWallet({ projectId, chains }),
+    ],
+  },
+])
+
+const config = createConfig({
+  publicClient,
+  queryClient: new QueryClient(),
+  webSocketPublicClient,
+  connectors,
+})
+
+export function RainbowProvider(props: PropsWithChildren) {
+  return (
+    <WagmiConfig config={config}>
+      <RainbowKitProvider chains={chains}>{props.children}</RainbowKitProvider>
+    </WagmiConfig>
+  )
+}

packages/example/src/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>SIWx Examples</title>
+    <link rel="stylesheet" href="styles.css" />
+    <script type="module" src="index.js"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

packages/example/src/index.js

@@ -0,0 +1,6 @@
+import { createRoot } from "react-dom/client";
+import { App } from "./app";
+import "@rainbow-me/rainbowkit/styles.css";
+
+const root = createRoot(document.getElementById("root"));
+root.render(<App />);

packages/example/src/styles.css

@@ -0,0 +1,44 @@
+.container {
+  text-align: center;
+}
+
+h1, h2 {
+  font-family: "Helvetica Neue", Arial, sans-serif;
+}
+
+.container .sign-in-options {
+  list-style: none;
+  padding: 0;
+}
+
+.container .sign-in-options button {
+  border-radius: 1dvmin;
+  border: none;
+  background: oklch(39.8% 0.115 238.76);
+  color: white;
+  margin: 0.5rem 0;
+  padding: 0.5rem 1rem;
+  font-size: larger;
+  width: 30%;
+  cursor: pointer;
+}
+
+.sign-in-options button:hover {
+  background: oklch(70% 0.115 238.76);
+}
+
+pre {
+  display: block;
+}
+
+pre code {
+  display: inline-block;
+  padding: 1rem;
+  text-align: left;
+  background: rgb(98%, 98%, 98%);
+  border: 1pt solid rgb(95%, 95%, 95%);
+  border-radius: 1dvmin;
+  max-width: 60%;
+  overflow-x: scroll;
+  /*background: rgb(10%, 10%, 10%);*/
+}

packages/example/src/tezos.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { DAppClient } from '@airgap/beacon-sdk'
+import { $account } from './account'
+import { TezosWebAuth } from '@didtools/pkh-tezos'
+import { fromDappClient } from '@siwx/auth/tezos'
+import { SIWx } from '@siwx/auth'
+
+const dAppClient = new DAppClient({ name: 'Sign in with Tezos example' })
+
+export function WithTezos() {
+  const handleClick = () => {
+    console.log('click')
+    // const authMethod = TezosWebAuth.getAuthMethod(dAppClient)
+    // console.log('f')
+    // const signed = await SIWx.request(fromDappClient(dAppClient), {
+    //   domain: window.location.host,
+    //   uri: window.location.origin,
+    // })
+    // $account.set({
+    //   kind: 'ready',
+    //   accountId: signed.message.accountId,
+    //   siwx: signed,
+    //   disconnect: async () => {
+    //     await dAppClient.disconnect()
+    //     $account.set({
+    //       kind: 'absent',
+    //     })
+    //   },
+    // })
+  }
+
+  return <button onClick={handleClick}>Tezos</button>
+}

packages/example/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "jsx": "react"
+  },
+  "include": ["src"]
+}