code: add widget dapp

radixdlt · May 8, 2024 · c386a3d · c386a3d
1 parent f40f577
commit c386a3d
Show file tree

Hide file tree

Showing 15 changed files with 871 additions and 26 deletions.
diff --git a/examples/simple-dapp/src/main.ts b/examples/simple-dapp/src/main.ts
@@ -11,6 +11,7 @@ import {
 } from '@radixdlt/radix-dapp-toolkit'
 
 const dAppDefinitionAddress = import.meta.env.VITE_DAPP_DEFINITION_ADDRESS
+const widgetUrl = import.meta.env.VITE_WIDGET_DAPP_URL
 const networkId = RadixNetwork.Stokenet
 const storageModule = LocalStorageModule(
   `rdt:${dAppDefinitionAddress}:${networkId}`,
@@ -27,6 +28,8 @@ content.innerHTML = `
 
   <div class="mt-25"><button id="one-time-request">Send one time request</button></div>
 
+  <iframe src="${widgetUrl}" width="1000px" height="500px"></iframe>
+
   <pre id="sessions"></pre>
   <pre id="requests"></pre>
   <pre id="state"></pre>
@@ -46,18 +49,18 @@ const oneTimeRequest = document.getElementById('one-time-request')!
 
 const logger = Logger()
 
-logger.attachTransport((logObj) => {
-  const { _meta, ...rest } = logObj
+// logger.attachTransport((logObj) => {
+//   const { _meta, ...rest } = logObj
 
-  const logEntry = `[${_meta.name}]
-${JSON.stringify(rest, null, 2)}  
+//   const logEntry = `[${_meta.name}]
+// ${JSON.stringify(rest, null, 2)}
 
-${logs.innerHTML}`
+// ${logs.innerHTML}`
 
-  localStorage.setItem('logs', logEntry)
+//   localStorage.setItem('logs', logEntry)
 
-  logs.innerHTML = logEntry
-})
+//   logs.innerHTML = logEntry
+// })
 
 const dAppToolkit = RadixDappToolkit({
   dAppDefinitionAddress,
@@ -98,18 +101,18 @@ oneTimeRequest.onclick = () => {
 }
 
 setInterval(() => {
-  requestsStore.getState().map((value: any) => {
-    requests.innerHTML = JSON.stringify({ requests: value ?? {} }, null, 2)
-  })
-  stateStore.getState().map((value: any) => {
-    state.innerHTML = JSON.stringify({ state: value ?? {} }, null, 2)
-  })
-  sessionStore.getItemList().map((value: any) => {
-    sessions.innerHTML = JSON.stringify({ sessions: value }, null, 2)
-  })
-  gatewayApi.status
-    .getCurrent()
-    .then(
-      (status) => (gatewayStatus.innerHTML = JSON.stringify(status, null, 2)),
-    )
+  // requestsStore.getState().map((value: any) => {
+  //   requests.innerHTML = JSON.stringify({ requests: value ?? {} }, null, 2)
+  // })
+  // stateStore.getState().map((value: any) => {
+  //   state.innerHTML = JSON.stringify({ state: value ?? {} }, null, 2)
+  // })
+  // sessionStore.getItemList().map((value: any) => {
+  //   sessions.innerHTML = JSON.stringify({ sessions: value }, null, 2)
+  // })
+  // gatewayApi.status
+  //   .getCurrent()
+  //   .then(
+  //     (status) => (gatewayStatus.innerHTML = JSON.stringify(status, null, 2)),
+  //   )
 }, 1000)
diff --git a/examples/simple-dapp/src/sst-env.d.ts b/examples/simple-dapp/src/sst-env.d.ts
@@ -1,5 +1,7 @@
 /// <reference types="vite/client" />
-interface ImportMetaEnv {}
+interface ImportMetaEnv {
+
+}
 interface ImportMeta {
   readonly env: ImportMetaEnv
-}
+}
diff --git a/examples/widget/.gitignore b/examples/widget/.gitignore
@@ -0,0 +1,26 @@
+# 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?
+
+.sst
diff --git a/examples/widget/index.html b/examples/widget/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" />
+    <title>Simple dApp</title>
+  </head>
+  <body>
+    <header><radix-connect-button /></header>
+    <div id="app"></div>
+
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/widget/package.json b/examples/widget/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "widget",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "deploy": "sst deploy"
+  },
+  "dependencies": {
+    "@radixdlt/babylon-gateway-api-sdk": "^1.4.1",
+    "@radixdlt/radix-dapp-toolkit": "*"
+  },
+  "devDependencies": {
+    "sst": "^2.41.3",
+    "typescript": "^5.2.2",
+    "vite": "^5.1.6",
+    "vite-plugin-ngrok": "^1.0.0"
+  }
+}
diff --git a/examples/widget/public/.well-known/radix.json b/examples/widget/public/.well-known/radix.json
@@ -0,0 +1,8 @@
+{
+  "callbackPath": "/connect",
+  "dApps": [
+    {
+      "dAppDefinitionAddress": "account_tdx_2_12yf9gd53yfep7a669fv2t3wm7nz9zeezwd04n02a433ker8vza6rhe"
+    }
+  ]
+}
diff --git a/examples/widget/src/main.ts b/examples/widget/src/main.ts
@@ -0,0 +1,85 @@
+import { GatewayApiClient } from '@radixdlt/babylon-gateway-api-sdk'
+import './style.css'
+import {
+  RadixDappToolkit,
+  RadixNetwork,
+  Logger,
+  DataRequestBuilder,
+  OneTimeDataRequestBuilder,
+  LocalStorageModule,
+  generateRolaChallenge,
+} from '@radixdlt/radix-dapp-toolkit'
+
+const dAppDefinitionAddress = import.meta.env.VITE_DAPP_DEFINITION_ADDRESS
+const networkId = RadixNetwork.Stokenet
+const storageModule = LocalStorageModule(
+  `rdt:${dAppDefinitionAddress}:${networkId}`,
+)
+const requestsStore = storageModule.getPartition('requests')
+const sessionStore = storageModule.getPartition('sessions')
+const identityStore = storageModule.getPartition('identities')
+const stateStore = storageModule.getPartition('state')
+
+const content = document.getElementById('app')!
+
+content.innerHTML = `  
+  <button id="reset">Reset</button>
+  <div class="mt-25"><button id="one-time-request">Send one time request</button></div>
+  <pre id="logs"></pre>
+`
+const resetButton = document.getElementById('reset')!
+const oneTimeRequest = document.getElementById('one-time-request')!
+const sessions = document.getElementById('sessions')!
+const requests = document.getElementById('requests')!
+const logs = document.getElementById('logs')!
+const state = document.getElementById('state')!
+const gatewayStatus = document.getElementById('gatewayStatus')!
+
+const logger = Logger()
+
+logger.attachTransport((logObj) => {
+  const { _meta, ...rest } = logObj
+
+  const logEntry = `[${_meta.name}]
+${JSON.stringify(rest, null, 2)}  
+
+${logs.innerHTML}`
+
+  localStorage.setItem('logs', logEntry)
+
+  logs.innerHTML = logEntry
+})
+
+const dAppToolkit = RadixDappToolkit({
+  dAppDefinitionAddress,
+  networkId,
+  featureFlags: ['ExperimentalMobileSupport'],
+  logger,
+})
+
+const gatewayApi = GatewayApiClient.initialize(
+  dAppToolkit.gatewayApi.clientConfig,
+)
+
+dAppToolkit.walletApi.provideChallengeGenerator(async () => {
+  await new Promise((resolve) => setTimeout(resolve, 1000))
+  return generateRolaChallenge()
+})
+
+dAppToolkit.walletApi.setRequestData(DataRequestBuilder.persona().withProof())
+
+resetButton.onclick = () => {
+  sessionStore.clear()
+  requestsStore.clear()
+  stateStore.clear()
+  identityStore.clear()
+  localStorage.removeItem('logs')
+  window.location.hash = ``
+  window.location.replace(window.location.origin)
+}
+
+oneTimeRequest.onclick = () => {
+  dAppToolkit.walletApi.sendOneTimeRequest(
+    OneTimeDataRequestBuilder.accounts().exactly(1),
+  )
+}
diff --git a/examples/widget/src/sst-env.d.ts b/examples/widget/src/sst-env.d.ts
@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+interface ImportMetaEnv {
+
+}
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
diff --git a/examples/widget/src/style.css b/examples/widget/src/style.css
@@ -0,0 +1,108 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+  flex-direction: column;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+#app {
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vanilla:hover {
+  filter: drop-shadow(0 0 2em #3178c6aa);
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
+
+header {
+  display: flex;
+  align-self: flex-end;
+}
+
+pre {
+  width: 300px;
+  text-align: left;
+  overflow: auto;
+}
+
+.mt-25 {
+  margin-top: 10px;
+}
diff --git a/examples/widget/src/vite-env.d.ts b/examples/widget/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />