feat: add web2login redirect mode

nervina-labs · Jun 24, 2024 · 59c940a · 59c940a
1 parent 4153e1e
commit 59c940a
Show file tree

Hide file tree

Showing 22 changed files with 740 additions and 52 deletions.
diff --git a/examples/web2login-demo/.gitignore b/examples/web2login-demo/.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/web2login-demo/README.md b/examples/web2login-demo/README.md
@@ -0,0 +1,28 @@
+## Usage
+
+```bash
+$ npm install # or pnpm install or yarn install
+```
+
+### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs)
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm run dev`
+
+Runs the app in the development mode.<br>
+Open [http://localhost:5173](http://localhost:5173) to view it in the browser.
+
+### `npm run build`
+
+Builds the app for production to the `dist` folder.<br>
+It correctly bundles Solid in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br>
+Your app is ready to be deployed!
+
+## Deployment
+
+Learn more about deploying your application with the [documentations](https://vitejs.dev/guide/static-deploy.html)
diff --git a/examples/web2login-demo/index.html b/examples/web2login-demo/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/joyid.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>JoyID Web2Login Demo</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/examples/web2login-demo/package.json b/examples/web2login-demo/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "web2login-demo",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host --open",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@joyid/evm": "workspace:*",
+    "@solid-primitives/clipboard": "^1.5.4",
+    "@vitejs/plugin-basic-ssl": "^1.1.0",
+    "solid-js": "^1.8.15",
+    "solid-toast": "^0.5.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0",
+    "vite-plugin-solid": "^2.10.2"
+  }
+}
diff --git a/examples/web2login-demo/public/joyid.svg b/examples/web2login-demo/public/joyid.svg
diff --git a/examples/web2login-demo/src/App.css b/examples/web2login-demo/src/App.css
@@ -0,0 +1,27 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.solid:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
diff --git a/examples/web2login-demo/src/App.tsx b/examples/web2login-demo/src/App.tsx
@@ -0,0 +1,89 @@
+import { Show, createSignal } from 'solid-js'
+import { writeClipboard } from '@solid-primitives/clipboard'
+import { Toaster } from 'solid-toast'
+import toast from 'solid-toast'
+
+import { buildRedirectUrl } from './utils'
+import {
+  initConfig,
+  connect,
+  connectWithRedirect,
+  connectCallback,
+} from '@joyid/evm/web2login'
+
+import joyidLogo from './assets/joyid.svg'
+import './App.css'
+
+declare let isProd: boolean
+let _IsProd: boolean = false
+
+function App() {
+  try {
+    _IsProd = isProd
+  } catch (e) {
+    /* empty */
+  }
+
+  initConfig({
+    backgroundImage: `center center / cover no-repeat url("https://images.unsplash.com/photo-1601314167099-232775b3d6fd?q=80&w=2072&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D")`,
+    joyidAppURL: _IsProd ? 'https://app.joy.id' : 'https://testnet.joyid.dev',
+  })
+
+  const [address, setAddress] = createSignal('')
+
+  try {
+    setAddress(connectCallback().uid)
+  } catch (error) {
+    // TODO: handle error
+  }
+
+  function onConnectRedirect() {
+    const url = buildRedirectUrl('connect')
+    connectWithRedirect(url)
+  }
+
+  const onConnectPopup = async () => {
+    console.log('onConnectPopup')
+    const { uid } = await connect()
+    console.log('address', uid)
+    setAddress(uid)
+  }
+
+  const onCopyAddress = async () => {
+    await writeClipboard(address())
+    toast.success('Copied Successfully!', {
+      position: 'bottom-center',
+    })
+  }
+
+  return (
+    <>
+      <Toaster />
+      <div>
+        <a href="https://docs.joyid.dev/guide" target="_blank">
+          <img src={joyidLogo} class="logo joyid" alt="joyid logo" />
+        </a>
+      </div>
+      <h1>JoyID Web2Login Demo</h1>
+      <Show when={address()}>
+        <p>Address: {address()}</p>
+        <button onClick={() => onCopyAddress()}>Copy Address</button>
+      </Show>
+      <div class="card">
+        <button onClick={onConnectPopup}>
+          Connect With <strong>POPUP</strong>
+        </button>
+
+        <button onClick={() => onConnectRedirect()}>
+          Connect With <strong>REDIRECT</strong>
+        </button>
+        <p>
+          Edit <code>src/App.tsx</code> and save to test HMR
+        </p>
+      </div>
+      <p class="read-the-docs">Click on the JoyID logos to learn more</p>
+    </>
+  )
+}
+
+export default App
diff --git a/examples/web2login-demo/src/assets/joyid.svg b/examples/web2login-demo/src/assets/joyid.svg
diff --git a/examples/web2login-demo/src/chains/chains.json b/examples/web2login-demo/src/chains/chains.json
@@ -0,0 +1,34 @@
+[
+  {
+    "name": "Ethereum Sepolia",
+    "chainId": 11155111,
+    "rpcURL": "https://ethereum-sepolia.blockpi.network/v1/rpc/public",
+    "unit": "ETH",
+    "explorer": "https://sepolia.etherscan.io",
+    "faucet": "https://sepoliafaucet.com"
+  },
+  {
+    "name": "BNB Testnet",
+    "chainId": 97,
+    "rpcURL": "https://bsc-testnet.blockpi.network/v1/rpc/public",
+    "unit": "BNB",
+    "explorer": "https://testnet.bscscan.com",
+    "faucet": "https://testnet.bnbchain.org/faucet-smart"
+  },
+  {
+    "name": "Avalanche Fuji",
+    "chainId": 43113,
+    "rpcURL": "https://avalanche-fuji.blockpi.network/v1/rpc/public",
+    "unit": "AVAX",
+    "explorer": "https://testnet.snowtrace.io",
+    "faucet": "https://core.app/tools/testnet-faucet/?subnet=c&token=c"
+  },
+  {
+    "name": "Polygon Mumbai",
+    "chainId": 80001,
+    "rpcURL": "https://polygon-mumbai.blockpi.network/v1/rpc/public",
+    "unit": "MATIC",
+    "explorer": "https://mumbai.polygonscan.com",
+    "faucet": "https://mumbaifaucet.com"
+  }
+]
diff --git a/examples/web2login-demo/src/chains/index.ts b/examples/web2login-demo/src/chains/index.ts
@@ -0,0 +1,18 @@
+import chainList from './chains.json'
+
+export interface Chain {
+  name: string
+  chainId: number
+  rpcURL: string
+  unit: string
+  faucet: string
+  explorer: string
+}
+
+export const EthSepolia: Chain = chainList[0]
+
+// eslint-disable-next-line unicorn/no-array-reduce
+export const Chains = chainList.reduce<Record<string, Chain>>((prev, acc) => {
+  prev[acc.name] = acc
+  return prev
+}, {})
diff --git a/examples/web2login-demo/src/hooks/localStorage.ts b/examples/web2login-demo/src/hooks/localStorage.ts
@@ -0,0 +1,51 @@
+import { createEffect } from 'solid-js'
+import {
+  createStore,
+  produce,
+  type SetStoreFunction,
+  type Store,
+} from 'solid-js/store'
+import { type Chain } from '../chains'
+
+export function createLocalStore<T extends object>(
+  name: string,
+  init: T
+): [Store<T>, SetStoreFunction<T>] {
+  const localState = localStorage.getItem(name)
+  const [state, setState] = createStore<T>(
+    localState ? JSON.parse(localState) : init
+  )
+  createEffect(() => {
+    localStorage.setItem(name, JSON.stringify(state))
+  })
+  return [state, setState]
+}
+
+export const EMPTY_OBJECT = Object.create(null)
+
+export const storageKey = 'demo:auth-data:3'
+
+const [authData, setAuthData] = createLocalStore<
+  { ethAddress: string; mode: 'popup' | 'redirect' } & Chain
+>(storageKey, EMPTY_OBJECT)
+
+export function useAuthData() {
+  const isAuthcated = Object.keys(authData).length > 0
+  return { authData, setAuthData, isAuthcated }
+}
+
+export function useLogout() {
+  return () => {
+    // localStorage.removeItem(storageKey)
+    setAuthData(
+      produce((s) => {
+        for (const k in s) {
+          if (Object.prototype.hasOwnProperty.call(s, k)) {
+            // @ts-expect-error
+            s[k] = undefined
+          }
+        }
+      })
+    )
+  }
+}
diff --git a/examples/web2login-demo/src/hooks/provider.tsx b/examples/web2login-demo/src/hooks/provider.tsx
@@ -0,0 +1,20 @@
+import { providers } from 'ethers'
+import { useAuthData } from './localStorage'
+import { createMemo } from 'solid-js'
+
+export const SepoliaNetwork = {
+  name: 'Ethereum Sepolia',
+  chainId: 11_155_111,
+}
+
+export const useProvider = () => {
+  const { authData } = useAuthData()
+  return createMemo(() =>
+    authData.name
+      ? new providers.JsonRpcBatchProvider(authData.rpcURL, {
+          name: authData.name,
+          chainId: authData.chainId,
+        })
+      : null
+  )
+}