feat: react

package.json

@@ -152,4 +152,4 @@
       "pre-commit": "npm run check-version && pretty-quick --staged"
     }
   }
-}
+}

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

@@ -818,23 +818,20 @@ export class DAppClient extends Client {
             this._initPromise = undefined
           }
 
+          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((err) => {
-                    logger.error(err)
-                    if (err.message === 'The account is deactivated.') {
-                      this.hideUI(['alert'])
-                      abortHandler()
-                    }
-                  })
-                return p2pTransport.getPairingRequestInfo()
-              },
-              postmessagePeerInfo: () => postMessageTransport.getPairingRequestInfo(),
-              walletConnectPeerInfo: () => walletConnectTransport.getPairingRequestInfo(),
+              p2pPeerInfo,
+              postmessagePeerInfo,
+              walletConnectPeerInfo,
               networkType: this.network.type,
               abortedHandler: abortHandler.bind(this),
               disclaimerText: this.disclaimerText,

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
@@ -201,19 +198,19 @@ 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
     analytics: AnalyticsInterface
     featuredWallets?: string[]
   }
   [BeaconEvent.PAIR_SUCCESS]:
-  | ExtendedPostMessagePairingResponse
-  | ExtendedP2PPairingResponse
-  | ExtendedWalletConnectPairingResponse
+    | ExtendedPostMessagePairingResponse
+    | ExtendedP2PPairingResponse
+    | ExtendedWalletConnectPairingResponse
   [BeaconEvent.CHANNEL_CLOSED]: string
   [BeaconEvent.INTERNAL_ERROR]: { text: string; buttons?: AlertButton[] }
   [BeaconEvent.UNKNOWN]: undefined
@@ -249,7 +246,7 @@ const showSentToast = async (data: RequestSentInfo): Promise<void> => {
     text: 'Wallet not receiving request?',
     actionText: 'Reset Connection',
     actionCallback: async (): Promise<void> => {
-      await closeToast()
+      closeToast()
       // eslint-disable-next-line @typescript-eslint/unbound-method
       const resetCallback = data.extraInfo.resetCallback
       if (resetCallback) {
@@ -266,7 +263,7 @@ const showSentToast = async (data: RequestSentInfo): Promise<void> => {
     timer: isMobileOS(window) ? SUCCESS_TIMER : 0,
     actions,
     openWalletAction
-  }).catch((toastError) => console.error(toastError))
+  })
 }
 
 const showAcknowledgedToast = async (data: {
@@ -278,7 +275,7 @@ const showAcknowledgedToast = async (data: {
     body: 'Awaiting confirmation in\u00A0 {{wallet}}',
     state: 'acknowledge',
     walletInfo: data.walletInfo
-  }).catch((toastError) => console.error(toastError))
+  })
 }
 
 const showPrepare = async (data: { walletInfo?: WalletInfo }): Promise<void> => {
@@ -289,27 +286,24 @@ const showPrepare = async (data: { walletInfo?: WalletInfo }): Promise<void> =>
     body: text,
     state: 'prepare',
     walletInfo: data.walletInfo
-  }).catch((toastError) => console.error(toastError))
+  })
 }
 
 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?.includes('alert')) {
+    closeAlerts()
+  }
+
+  if (elements?.includes('toast') || !elements) {
+    closeToast()
   }
 }
 
 /**
  * Show a "No Permission" alert
  */
 const showNoPermissionAlert = async (): Promise<void> => {
-  await openAlert({
+  openAlert({
     title: 'No Permission',
     body: 'Please allow the wallet to handle this type of request.'
   })
@@ -319,7 +313,7 @@ const showNoPermissionAlert = async (): Promise<void> => {
  * Show an "Invalid state" alert
  */
 const showInvalidActiveAccountState = async (): Promise<void> => {
-  await openAlert({
+  openAlert({
     title: 'Invalid state',
     body: `An active account has been received, but no active subscription was found for BeaconEvent.ACTIVE_ACCOUNT_SET.
     For more information, visit: https://docs.walletbeacon.io/guides/migration-guide`
@@ -391,8 +385,8 @@ const showErrorToast = async (
       text: '',
       actionText: 'Show Details',
       actionCallback: async (): Promise<void> => {
-        await closeToast()
-        await openAlert({
+        closeToast()
+        openAlert({
           title: error.title,
           // eslint-disable-next-line @typescript-eslint/unbound-method
           body: error.fullDescription.description,
@@ -403,7 +397,7 @@ const showErrorToast = async (
     })
   }
 
-  await openToast({
+  openToast({
     body: `{{wallet}}\u00A0 has returned an error`,
     timer:
       response.errorResponse.errorType === BeaconErrorType.ABORTED_ERROR
@@ -424,7 +418,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))
+  })
 }
 
 /**
@@ -438,7 +432,7 @@ const showExtensionConnectedAlert = async (): Promise<void> => {
  * Show a "channel closed" alert for 1.5 seconds
  */
 const showChannelClosedAlert = async (): Promise<void> => {
-  // await openAlert({
+  // openAlert({
   //   title: 'Channel closed',
   //   body: `Your peer has closed the connection.`,
   //   buttons: [{ text: 'Done', style: 'outline' }],
@@ -458,7 +452,7 @@ const showInternalErrorAlert = async (
     body: data.text,
     buttons
   }
-  await openAlert(alertConfig)
+  openAlert(alertConfig)
 }
 
 /**
@@ -483,7 +477,7 @@ const showPairAlert = async (data: BeaconEventType[BeaconEvent.PAIR_INIT]): Prom
     analytics: data.analytics,
     featuredWallets: data.featuredWallets
   }
-  await openAlert(alertConfig)
+  openAlert(alertConfig)
 }
 
 /**
@@ -496,7 +490,7 @@ const showPermissionSuccessAlert = async (
 ): Promise<void> => {
   const { output } = data
 
-  await openToast({
+  openToast({
     body: `{{wallet}}\u00A0 has granted permission`,
     timer: SUCCESS_TIMER,
     walletInfo: data.walletInfo,
@@ -524,29 +518,29 @@ const showProofOfEventChallengeSuccessAlert = async (
 ): Promise<void> => {
   const { output } = data
 
-  await openToast({
+  openToast({
     body: `{{wallet}}\u00A0 has ${output.isAccepted ? 'accepted' : 'refused'} the challenge`,
     timer: SUCCESS_TIMER,
     walletInfo: data.walletInfo,
     state: 'finished',
     actions: output.isAccepted
       ? [
-        {
-          text: `Payload hash: ${output.payloadHash}`,
-          actionText: 'Copy to clipboard',
-          actionCallback: async (): Promise<void> => {
-            navigator.clipboard.writeText(output.payloadHash).then(
-              () => {
-                logger.log('showSignSuccessAlert', 'Copying to clipboard was successful!')
-              },
-              (err) => {
-                logger.error('showSignSuccessAlert', 'Could not copy text to clipboard: ', err)
-              }
-            )
-            await closeToast()
+          {
+            text: `Payload hash: ${output.payloadHash}`,
+            actionText: 'Copy to clipboard',
+            actionCallback: async (): Promise<void> => {
+              navigator.clipboard.writeText(output.payloadHash).then(
+                () => {
+                  logger.log('showSignSuccessAlert', 'Copying to clipboard was successful!')
+                },
+                (err) => {
+                  logger.error('showSignSuccessAlert', 'Could not copy text to clipboard: ', err)
+                }
+              )
+              closeToast()
+            }
           }
-        }
-      ]
+        ]
       : []
   })
 }
@@ -556,7 +550,7 @@ const showSimulatedProofOfEventChallengeSuccessAlert = async (
 ): Promise<void> => {
   const { output } = data
 
-  await openToast({
+  openToast({
     body: !output.errorMessage
       ? `{{wallet}}\u00A0 has returned the list of operation`
       : `{{wallet}}\u00A0 has returned an error`,
@@ -565,22 +559,22 @@ const showSimulatedProofOfEventChallengeSuccessAlert = async (
     state: 'finished',
     actions: !output.errorMessage
       ? [
-        {
-          text: 'Operation list',
-          actionText: 'Copy to clipboard',
-          actionCallback: async (): Promise<void> => {
-            navigator.clipboard.writeText(output.operationsList).then(
-              () => {
-                logger.log('showSignSuccessAlert', 'Copying to clipboard was successful!')
-              },
-              (err) => {
-                logger.error('showSignSuccessAlert', 'Could not copy text to clipboard: ', err)
-              }
-            )
-            await closeToast()
+          {
+            text: 'Operation list',
+            actionText: 'Copy to clipboard',
+            actionCallback: async (): Promise<void> => {
+              navigator.clipboard.writeText(output.operationsList).then(
+                () => {
+                  logger.log('showSignSuccessAlert', 'Copying to clipboard was successful!')
+                },
+                (err) => {
+                  logger.error('showSignSuccessAlert', 'Could not copy text to clipboard: ', err)
+                }
+              )
+              closeToast()
+            }
           }
-        }
-      ]
+        ]
       : [{ text: 'Error message', actionText: output.errorMessage }]
   })
 }
@@ -595,7 +589,7 @@ const showOperationSuccessAlert = async (
 ): Promise<void> => {
   const { account, output, blockExplorer } = data
 
-  await openToast({
+  openToast({
     body: `{{wallet}}\u00A0 successfully submitted operation`,
     timer: SUCCESS_TIMER,
     state: 'finished',
@@ -612,7 +606,7 @@ const showOperationSuccessAlert = async (
             account.network
           )
           window.open(link, '_blank', 'noopener')
-          await closeToast()
+          closeToast()
         }
       }
     ]
@@ -628,7 +622,7 @@ const showSignSuccessAlert = async (
   data: BeaconEventType[BeaconEvent.SIGN_REQUEST_SUCCESS]
 ): Promise<void> => {
   const output = data.output
-  await openToast({
+  openToast({
     body: `{{wallet}}\u00A0 successfully signed payload`,
     timer: SUCCESS_TIMER,
     state: 'finished',
@@ -646,7 +640,7 @@ const showSignSuccessAlert = async (
               logger.error('showSignSuccessAlert', 'Could not copy text to clipboard: ', err)
             }
           )
-          await closeToast()
+          closeToast()
         }
       }
     ]
@@ -663,7 +657,7 @@ const showSignSuccessAlert = async (
 //   data: BeaconEventType[BeaconEvent.ENCRYPT_REQUEST_SUCCESS]
 // ): Promise<void> => {
 //   const output = data.output
-//   await openToast({
+//   openToast({
 //     body: `{{wallet}}\u00A0 successfully ${
 //       data.output.cryptoOperation === EncryptionOperation.ENCRYPT ? 'encrypted' : 'decrypted'
 //     } payload`,
@@ -683,7 +677,7 @@ const showSignSuccessAlert = async (
 //               logger.error('showSignSuccessAlert', 'Could not copy text to clipboard: ', err)
 //             }
 //           )
-//           await closeToast()
+//           closeToast()
 //         }
 //       }
 //     ]
@@ -700,7 +694,7 @@ const showBroadcastSuccessAlert = async (
 ): Promise<void> => {
   const { network, output, blockExplorer } = data
 
-  await openToast({
+  openToast({
     body: `{{wallet}}\u00A0 successfully injected operation`,
     timer: SUCCESS_TIMER,
     state: 'finished',
@@ -717,7 +711,7 @@ const showBroadcastSuccessAlert = async (
             network
           )
           window.open(link, '_blank', 'noopener')
-          await closeToast()
+          closeToast()
         }
       }
     ]

packages/beacon-ui/__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};