feat: add toast back

airgap-it · Jan 14, 2025 · d1c1349 · d1c1349
1 parent b63c4ed
commit d1c1349
Show file tree

Hide file tree

Showing 12 changed files with 252 additions and 328 deletions.
diff --git a/packages/beacon-dapp/src/events.ts b/packages/beacon-dapp/src/events.ts
@@ -244,7 +244,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) {
@@ -261,7 +261,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: {
@@ -273,7 +273,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> => {
@@ -284,28 +284,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()
-  // }
-  console.log('todo', elements)
+  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.'
   })
@@ -315,7 +311,7 @@ const showNoPermissionAlert = async (): Promise<void> => {
  * Show a
  */
 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`
@@ -377,8 +373,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,
@@ -389,7 +385,7 @@ const showErrorToast = async (
     })
   }
 
-  await openToast({
+  openToast({
     body: `{{wallet}}\u00A0 has returned an error`,
     timer:
       response.errorResponse.errorType === BeaconErrorType.ABORTED_ERROR
@@ -424,7 +420,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' }],
@@ -444,7 +440,7 @@ const showInternalErrorAlert = async (
     body: data.text,
     buttons
   }
-  await openAlert(alertConfig)
+  openAlert(alertConfig)
 }
 
 /**
@@ -469,7 +465,7 @@ const showPairAlert = async (data: BeaconEventType[BeaconEvent.PAIR_INIT]): Prom
     analytics: data.analytics,
     featuredWallets: data.featuredWallets
   }
-  await openAlert(alertConfig)
+  openAlert(alertConfig)
 }
 
 /**
@@ -482,7 +478,7 @@ const showPermissionSuccessAlert = async (
 ): Promise<void> => {
   const { output } = data
 
-  await openToast({
+  openToast({
     body: `{{wallet}}\u00A0 has granted permission`,
     timer: SUCCESS_TIMER,
     walletInfo: data.walletInfo,
@@ -510,7 +506,7 @@ 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,
@@ -529,7 +525,7 @@ const showProofOfEventChallengeSuccessAlert = async (
                   logger.error('showSignSuccessAlert', 'Could not copy text to clipboard: ', err)
                 }
               )
-              await closeToast()
+              closeToast()
             }
           }
         ]
@@ -542,7 +538,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`,
@@ -563,7 +559,7 @@ const showSimulatedProofOfEventChallengeSuccessAlert = async (
                   logger.error('showSignSuccessAlert', 'Could not copy text to clipboard: ', err)
                 }
               )
-              await closeToast()
+              closeToast()
             }
           }
         ]
@@ -581,7 +577,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',
@@ -598,7 +594,7 @@ const showOperationSuccessAlert = async (
             account.network
           )
           window.open(link, '_blank', 'noopener')
-          await closeToast()
+          closeToast()
         }
       }
     ]
@@ -614,7 +610,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',
@@ -632,7 +628,7 @@ const showSignSuccessAlert = async (
               logger.error('showSignSuccessAlert', 'Could not copy text to clipboard: ', err)
             }
           )
-          await closeToast()
+          closeToast()
         }
       }
     ]
@@ -649,7 +645,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`,
@@ -669,7 +665,7 @@ const showSignSuccessAlert = async (
 //               logger.error('showSignSuccessAlert', 'Could not copy text to clipboard: ', err)
 //             }
 //           )
-//           await closeToast()
+//           closeToast()
 //         }
 //       }
 //     ]
@@ -686,7 +682,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',
@@ -703,7 +699,7 @@ const showBroadcastSuccessAlert = async (
             network
           )
           window.open(link, '_blank', 'noopener')
-          await closeToast()
+          closeToast()
         }
       }
     ]

diff --git a/packages/beacon-ui/src/components/alert/index.tsx b/packages/beacon-ui/src/components/alert/index.tsx
@@ -1,20 +1,11 @@
 import React from 'react'
 import { CloseIcon, LeftIcon, LogoIcon } from '../icons'
 import Loader from '../loader'
-import { AlertProps } from '../../ui/alert/common'
+import { AlertProps } from '../../ui/common'
 import './styles.css'
 import useIsMobile from '../../ui/alert/hooks/useIsMobile'
 
 const Alert: React.FC<React.PropsWithChildren<AlertProps>> = (props) => {
-  // useEffect(() => {
-  //   const prevBodyOverflow = document.body.style.overflow
-  //   document.body.style.overflow = 'hidden'
-
-  //   return () => {
-  //     document.body.style.overflow = prevBodyOverflow
-  //   }
-  // }, [])
-
   const isMobile = useIsMobile()
 
   return (

diff --git a/packages/beacon-ui/src/components/pair-other/pair-other.tsx b/packages/beacon-ui/src/components/pair-other/pair-other.tsx
@@ -1,7 +1,9 @@
 import React, { useState, useEffect } from 'react'
 import QR from '../qr'
 
-import { PairOtherProps } from '../../ui/alert/common'
+import { PairOtherProps } from '../../ui/common'
+
+import './styles.css'
 
 const PairOther: React.FC<PairOtherProps> = (props: PairOtherProps) => {
   const [uiState, setUiState] = useState<'selection' | 'p2p' | 'walletconnect'>('selection')

diff --git a/packages/beacon-ui/src/components/pairing.tsx b/packages/beacon-ui/src/components/pairing.tsx
@@ -1,18 +1,6 @@
 import { desktopList, extensionList, iOSList, webList } from '../ui/alert/wallet-lists'
 import { DesktopApp, App, ExtensionApp, WebApp } from '@airgap/beacon-types'
 
-// export interface PairingProps {}
-
-// const Pairing: Component<PairingProps> = (props: PairingProps) => {
-//   return (
-//     <div>
-//       <h1>Pairing Component</h1>
-//     </div>
-//   )
-// }
-
-// export default Pairing
-
 /**
  * Initialize with tezos wallets for backwards compatibility
  */