feat: react

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

@@ -784,14 +784,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
@@ -290,16 +287,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)
 }
 
 /**
@@ -411,7 +409,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,33 @@
  "@airgap/beacon-transport-postmessage": "4.3.0",
  "@airgap/beacon-types": "4.3.0",
  "@airgap/beacon-utils": "4.3.0",
+ "@emotion/react": "^11.13.3",
+ "@emotion/styled": "^11.13.0",
+ "@fontsource/roboto": "^5.0.15",
+ "@mui/material": "^6.0.2",
  "@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)