feat: react

packages/beacon-dapp/src/dapp-client/DAppClient.ts

@@ -785,14 +785,20 @@ export class DAppClient extends Client {
               console.error(error)
             })
 
+          await p2pTransport.connect()
+
+          const serializer = new Serializer()
+          const p2pPeerInfo = await serializer.serialize(await p2pTransport.getPairingRequestInfo())
+          const walletConnectPeerInfo = (await walletConnectTransport.getPairingRequestInfo()).uri
+          const postmessagePeerInfo = await serializer.serialize(
+            await postMessageTransport.getPairingRequestInfo()
+          )
+
           this.events
             .emit(BeaconEvent.PAIR_INIT, {
-              p2pPeerInfo: () => {
-                p2pTransport.connect().then().catch(console.error)
-                return p2pTransport.getPairingRequestInfo()
-              },
-              postmessagePeerInfo: () => postMessageTransport.getPairingRequestInfo(),
-              walletConnectPeerInfo: () => walletConnectTransport.getPairingRequestInfo(),
+              p2pPeerInfo,
+              postmessagePeerInfo,
+              walletConnectPeerInfo,
               networkType: this.network.type,
               abortedHandler: async () => {
                 logger.log('init', 'ABORTED')

packages/beacon-dapp/src/events.ts

@@ -11,9 +11,7 @@ import {
 import {
   BeaconErrorType,
   ExtendedPostMessagePairingResponse,
-  PostMessagePairingRequest,
   ExtendedP2PPairingResponse,
-  P2PPairingRequest,
   AccountInfo,
   ErrorResponse,
   PermissionResponseOutput,
@@ -26,7 +24,6 @@ import {
   AcknowledgeResponse,
   WalletInfo,
   ExtendedWalletConnectPairingResponse,
-  WalletConnectPairingRequest,
   AnalyticsInterface,
   ProofOfEventChallengeResponseOutput,
   SimulatedProofOfEventChallengeResponseOutput
@@ -199,9 +196,9 @@ export interface BeaconEventType {
   [BeaconEvent.SHOW_PREPARE]: { walletInfo?: WalletInfo }
   [BeaconEvent.HIDE_UI]: ('alert' | 'toast')[] | undefined
   [BeaconEvent.PAIR_INIT]: {
-    p2pPeerInfo: () => Promise<P2PPairingRequest>
-    postmessagePeerInfo: () => Promise<PostMessagePairingRequest>
-    walletConnectPeerInfo: () => Promise<WalletConnectPairingRequest>
+    p2pPeerInfo: string
+    postmessagePeerInfo: string
+    walletConnectPeerInfo: string
     networkType: NetworkType
     abortedHandler?(): void
     disclaimerText?: string
@@ -291,16 +288,17 @@ const showPrepare = async (data: { walletInfo?: WalletInfo }): Promise<void> =>
 }
 
 const hideUI = async (elements?: ('alert' | 'toast')[]): Promise<void> => {
-  if (elements) {
-    if (elements.includes('alert')) {
-      await closeAlerts()
-    }
-    if (elements.includes('toast')) {
-      await closeToast()
-    }
-  } else {
-    await closeToast()
-  }
+  // if (elements) {
+  //   if (elements.includes('alert')) {
+  //     await closeAlerts()
+  //   }
+  //   if (elements.includes('toast')) {
+  //     await closeToast()
+  //   }
+  // } else {
+  //   await closeToast()
+  // }
+  console.log('todo', elements)
 }
 
 /**
@@ -412,7 +410,7 @@ const showRateLimitReached = async (): Promise<void> => {
     body: 'Rate limit reached. Please slow down',
     buttons: [{ text: 'Done', style: 'outline' }],
     timer: 3000
-  }).catch((toastError) => console.error(toastError))
+  })
 }
 
 /**

packages/beacon-ui/package.json

@@ -38,23 +38,32 @@
     "@airgap/beacon-transport-postmessage": "4.3.1",
     "@airgap/beacon-types": "4.3.1",
     "@airgap/beacon-utils": "4.3.1",
+    "@emotion/react": "^11.13.5",
+    "@emotion/styled": "^11.13.5",
+    "@mui/material": "^6.1.9",
     "@walletconnect/utils": "2.14.0",
     "qrcode-svg": "^1.1.0",
-    "solid-js": "^1.7.11"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@babel/preset-react": "^7.24.6",
+    "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.4",
     "@rollup/plugin-image": "^3.0.2",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
     "@types/node": "^20.6.0",
     "@types/qrcode-svg": "^1.1.2",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "@vitejs/plugin-react": "^4.1.0",
     "rollup": "^3.29.1",
     "rollup-plugin-import-css": "^3.3.3",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-typescript2": "^0.35.0",
-    "rollup-preset-solid": "^2.0.1",
     "typescript": "^5.2.2",
-    "vite": "^4.4.9",
-    "vite-plugin-solid": "^2.7.0"
+    "vite": "^4.4.9"
   }
 }

packages/beacon-ui/rollup.config.mjs

@@ -1,26 +1,76 @@
 import postcss from 'rollup-plugin-postcss'
-import css from "rollup-plugin-import-css";
+import css from 'rollup-plugin-import-css'
 import typescript from 'rollup-plugin-typescript2'
-import withSolid from 'rollup-preset-solid'
+import babel from '@rollup/plugin-babel'
+import terser from '@rollup/plugin-terser'
+import commonjs from '@rollup/plugin-commonjs'
+import resolve from '@rollup/plugin-node-resolve'
 
-export default withSolid([
+const extensions = ['.js', '.jsx', '.ts', '.tsx']
+
+export default [
   {
     input: 'src/index.ts',
-    output: '.',
-    plugins: [css(), typescript()]
+    output: {
+      file: 'dist/bundle.js',
+      format: 'iife',
+      name: 'MyApp',
+      sourcemap: true
+    },
+    plugins: [
+      resolve({ extensions }),
+      commonjs(),
+      // postcss({
+      //   extract: true,
+      //   minimize: true,
+      //   sourceMap: true,
+      // }),
+      css(),
+      typescript({
+        tsconfig: 'tsconfig.json'
+      }),
+      babel({
+        extensions,
+        babelHelpers: 'bundled',
+        include: ['src/**/*'],
+        presets: [['@babel/preset-react', { runtime: 'automatic' }]]
+      }),
+      // terser()
+    ]
   },
   {
     input: 'src/index.ts',
     output: [
       {
         file: 'dist/cjs/index.js',
-        format: 'cjs'
+        format: 'cjs',
+        sourcemap: true
       },
       {
         file: 'dist/esm/index.js',
-        format: 'esm'
+        format: 'esm',
+        sourcemap: true
       }
     ],
-    plugins: [css(), typescript()]
+    plugins: [
+      resolve({ extensions }),
+      commonjs(),
+      // postcss({
+      //   extract: true,
+      //   minimize: true,
+      //   sourceMap: true,
+      // }),
+      css(),
+      typescript({
+        tsconfig: 'tsconfig.json'
+      }),
+      babel({
+        extensions,
+        babelHelpers: 'bundled',
+        include: ['src/**/*'],
+        presets: [['@babel/preset-react', { runtime: 'automatic' }]]
+      }),
+      // terser()
+    ]
   }
-])
+]

packages/beacon-ui/scripts/server-fix.ts

@@ -1,24 +1,24 @@
-const fs = require('fs')
+// const fs = require('fs')
 
-// Read the file into a string
-let fileData = fs.readFileSync('./dist/cjs/index.js', 'utf8')
+// // Read the file into a string
+// let fileData = fs.readFileSync('./dist/cjs/index.js', 'utf8')
 
-// Define the code you want to insert
-const codeToInsert = `if (web.isServer) {
-    web.template = () => {
-      return { cloneNode: () => {} }
-    }
-  }`
+// // Define the code you want to insert
+// const codeToInsert = `if (web.isServer) {
+//     web.template = () => {
+//       return { cloneNode: () => {} }
+//     }
+//   }`
 
-// Split the file into an array of lines
-let fileLines = fileData.split('\n')
+// // Split the file into an array of lines
+// let fileLines = fileData.split('\n')
 
-// Insert the code into the desired line (line number starting from 0)
-const lineToInsert = 5 
-fileLines.splice(lineToInsert, 0, codeToInsert)
+// // Insert the code into the desired line (line number starting from 0)
+// const lineToInsert = 5 
+// fileLines.splice(lineToInsert, 0, codeToInsert)
 
-// Join the modified lines into a string
-fileData = fileLines.join('\n')
+// // Join the modified lines into a string
+// fileData = fileLines.join('\n')
 
-// Write the modified file back to disk
-fs.writeFileSync('./dist/cjs/index.js', fileData)
+// // Write the modified file back to disk
+// fs.writeFileSync('./dist/cjs/index.js', fileData)