feat: react

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

@@ -342,8 +342,8 @@ export class DAppClient extends Client {
           connectionInfo.origin === Origin.P2P
             ? this.p2pTransport
             : connectionInfo.origin === Origin.WALLETCONNECT
-              ? this.walletConnectTransport
-              : this.postMessageTransport ?? (await this.transport)
+            ? this.walletConnectTransport
+            : this.postMessageTransport ?? (await this.transport)
 
         if (relevantTransport) {
           const peers: ExtendedPeerInfo[] = await relevantTransport.getPeers()
@@ -440,8 +440,8 @@ export class DAppClient extends Client {
           res.status === 426
             ? console.error('Metrics are no longer supported for this version, please upgrade.')
             : console.warn(
-              'Network error encountered. Metrics sharing have been automatically disabled.'
-            )
+                'Network error encountered. Metrics sharing have been automatically disabled.'
+              )
         }
         this.enableMetrics = res.ok
         this.storage.set(StorageKey.ENABLE_METRICS, res.ok)
@@ -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')
@@ -808,7 +814,7 @@ export class DAppClient extends Client {
                 this.postMessageTransport =
                   this.walletConnectTransport =
                   this.p2pTransport =
-                  undefined
+                    undefined
                 this._activeAccount.isResolved() && this.clearActiveAccount()
                 this._initPromise = undefined
               },
@@ -1374,9 +1380,9 @@ export class DAppClient extends Client {
     logger.time(true, logId)
     const res = (await this.checkMakeRequest())
       ? this.makeRequestV3<
-        BlockchainRequestV3<string>,
-        BeaconMessageWrapper<BlockchainResponseV3<string>>
-      >(request)
+          BlockchainRequestV3<string>,
+          BeaconMessageWrapper<BlockchainResponseV3<string>>
+        >(request)
       : this.makeRequestBC<any, any>(request)
 
     res.catch(async (requestError: ErrorResponse) => {
@@ -1588,13 +1594,13 @@ export class DAppClient extends Client {
 
     const res = (await this.checkMakeRequest())
       ? this.makeRequest<
-        SimulatedProofOfEventChallengeRequest,
-        SimulatedProofOfEventChallengeResponse
-      >(request)
+          SimulatedProofOfEventChallengeRequest,
+          SimulatedProofOfEventChallengeResponse
+        >(request)
       : this.makeRequestBC<
-        SimulatedProofOfEventChallengeRequest,
-        SimulatedProofOfEventChallengeResponse
-      >(request)
+          SimulatedProofOfEventChallengeRequest,
+          SimulatedProofOfEventChallengeResponse
+        >(request)
 
     res.catch(async (requestError: ErrorResponse) => {
       requestError.errorType === BeaconErrorType.ABORTED_ERROR
@@ -2058,50 +2064,50 @@ export class DAppClient extends Client {
     request: BeaconRequestInputMessage,
     response:
       | {
-        account: AccountInfo
-        output: PermissionResponseOutput
-        blockExplorer: BlockExplorer
-        connectionContext: ConnectionContext
-        walletInfo: WalletInfo
-      }
+          account: AccountInfo
+          output: PermissionResponseOutput
+          blockExplorer: BlockExplorer
+          connectionContext: ConnectionContext
+          walletInfo: WalletInfo
+        }
       | {
-        account: AccountInfo
-        output: ProofOfEventChallengeResponse
-        blockExplorer: BlockExplorer
-        connectionContext: ConnectionContext
-        walletInfo: WalletInfo
-      }
+          account: AccountInfo
+          output: ProofOfEventChallengeResponse
+          blockExplorer: BlockExplorer
+          connectionContext: ConnectionContext
+          walletInfo: WalletInfo
+        }
       | {
-        account: AccountInfo
-        output: SimulatedProofOfEventChallengeResponse
-        blockExplorer: BlockExplorer
-        connectionContext: ConnectionContext
-        walletInfo: WalletInfo
-      }
+          account: AccountInfo
+          output: SimulatedProofOfEventChallengeResponse
+          blockExplorer: BlockExplorer
+          connectionContext: ConnectionContext
+          walletInfo: WalletInfo
+        }
       | {
-        account: AccountInfo
-        output: OperationResponseOutput
-        blockExplorer: BlockExplorer
-        connectionContext: ConnectionContext
-        walletInfo: WalletInfo
-      }
+          account: AccountInfo
+          output: OperationResponseOutput
+          blockExplorer: BlockExplorer
+          connectionContext: ConnectionContext
+          walletInfo: WalletInfo
+        }
       | {
-        output: SignPayloadResponseOutput
-        connectionContext: ConnectionContext
-        walletInfo: WalletInfo
-      }
+          output: SignPayloadResponseOutput
+          connectionContext: ConnectionContext
+          walletInfo: WalletInfo
+        }
       // | {
       //     output: EncryptPayloadResponseOutput
       //     connectionContext: ConnectionContext
       //     walletInfo: WalletInfo
       // }
       | {
-        network: Network
-        output: BroadcastResponseOutput
-        blockExplorer: BlockExplorer
-        connectionContext: ConnectionContext
-        walletInfo: WalletInfo
-      }
+          network: Network
+          output: BroadcastResponseOutput
+          blockExplorer: BlockExplorer
+          connectionContext: ConnectionContext
+          walletInfo: WalletInfo
+        }
   ): Promise<void> {
     this.events
       .emit(messageEvents[request.type].success, response)
@@ -2342,7 +2348,7 @@ export class DAppClient extends Client {
 
     logger.log('makeRequest', 'sending message', request)
     try {
-      ; (await this.transport).send(payload, peer)
+      ;(await this.transport).send(payload, peer)
       if (
         request.type !== BeaconMessageType.PermissionRequest ||
         (this._activeAccount.isResolved() && (await this._activeAccount.promise))
@@ -2458,7 +2464,7 @@ export class DAppClient extends Client {
 
     logger.log('makeRequest', 'sending message', request)
     try {
-      ; (await this.transport).send(payload, peer)
+      ;(await this.transport).send(payload, peer)
       if (
         request.message.type !== BeaconMessageType.PermissionRequest ||
         (this._activeAccount.isResolved() && (await this._activeAccount.promise))
@@ -2505,9 +2511,9 @@ export class DAppClient extends Client {
     request: Optional<T, IgnoredRequestInputProperties>
   ): Promise<
     | {
-      message: U
-      connectionInfo: ConnectionContext
-    }
+        message: U
+        connectionInfo: ConnectionContext
+      }
     | undefined
   > {
     if (!this._transport.isResolved()) {