Revert "chore: removed css files"

This reverts commit c022318.

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

@@ -785,20 +785,14 @@ 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,
-              postmessagePeerInfo,
-              walletConnectPeerInfo,
+              p2pPeerInfo: () => {
+                p2pTransport.connect().then().catch(console.error)
+                return p2pTransport.getPairingRequestInfo()
+              },
+              postmessagePeerInfo: () => postMessageTransport.getPairingRequestInfo(),
+              walletConnectPeerInfo: () => walletConnectTransport.getPairingRequestInfo(),
               networkType: this.network.type,
               abortedHandler: async () => {
                 logger.log('init', 'ABORTED')

packages/beacon-dapp/src/events.ts

@@ -11,7 +11,9 @@ import {
 import {
   BeaconErrorType,
   ExtendedPostMessagePairingResponse,
+  PostMessagePairingRequest,
   ExtendedP2PPairingResponse,
+  P2PPairingRequest,
   AccountInfo,
   ErrorResponse,
   PermissionResponseOutput,
@@ -24,6 +26,7 @@ import {
   AcknowledgeResponse,
   WalletInfo,
   ExtendedWalletConnectPairingResponse,
+  WalletConnectPairingRequest,
   AnalyticsInterface,
   ProofOfEventChallengeResponseOutput,
   SimulatedProofOfEventChallengeResponseOutput
@@ -196,9 +199,9 @@ export interface BeaconEventType {
   [BeaconEvent.SHOW_PREPARE]: { walletInfo?: WalletInfo }
   [BeaconEvent.HIDE_UI]: ('alert' | 'toast')[] | undefined
   [BeaconEvent.PAIR_INIT]: {
-    p2pPeerInfo: string
-    postmessagePeerInfo: string
-    walletConnectPeerInfo: string
+    p2pPeerInfo: () => Promise<P2PPairingRequest>
+    postmessagePeerInfo: () => Promise<PostMessagePairingRequest>
+    walletConnectPeerInfo: () => Promise<WalletConnectPairingRequest>
     networkType: NetworkType
     abortedHandler?(): void
     disclaimerText?: string

packages/beacon-ui/package.json

@@ -38,32 +38,29 @@
     "@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",
     "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/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@babel/preset-react": "^7.24.6",
     "typescript": "^5.2.2",
-    "vite": "^4.4.9"
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "vite": "^4.4.9",
+    "@vitejs/plugin-react": "^4.1.0"
   }
 }

packages/beacon-ui/src/components/alert/index.tsx

@@ -1,65 +1,85 @@
+import React, { useEffect } from 'react'
+import { CloseIcon, LeftIcon, LogoIcon } from '../icons'
+import Loader from '../loader'
 import { AlertProps } from '../../ui/alert/common'
-import { Modal, Box, Grid2, Button } from '@mui/material'
-import { LeftIcon, LogoIcon, CloseIcon } from '../icons'
-// import Loader from '../loader'
-import useIsMobile from 'src/ui/alert/hooks/useIsMobile'
+import './styles.css'
 
-const Alert: React.FC<React.PropsWithChildren<AlertProps>> = (props) => {
-  const isMobile = useIsMobile()
+const Alert: React.FC<AlertProps> = (props: AlertProps) => {
+  useEffect(() => {
+    const prevBodyOverflow = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
 
-  const backButton = props.onBackClick ? (
-    <Button variant="outlined" onClick={props.onBackClick}>
-      <LeftIcon />
-    </Button>
-  ) : (
-    <Grid2 width={'3rem'} height={'1rem'} />
-  )
+    return () => {
+      document.body.style.overflow = prevBodyOverflow
+    }
+  }, [])
+
+  const isMobile = window.innerWidth <= 800
 
   return (
-    <Modal open={true} onClose={props.onCloseClick}>
-      <Box
-        sx={{
-          position: 'absolute',
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%, -50%)',
-          width: 400,
-          bgcolor: 'white',
-          border: '2px solid #000',
-          boxShadow: 24,
-          borderRadius: '30px',
-          p: 4
+    <div
+      className={props.open ? 'alert-wrapper-show' : 'alert-wrapper-hide'}
+      onClick={props.onCloseClick}
+    >
+      <div
+        className={props.open ? 'alert-modal-show' : 'alert-modal-hide'}
+        onClick={(e) => {
+          e.stopPropagation()
         }}
       >
-        <Grid2
-          container
-          spacing={10}
-          alignItems={'center'}
-          justifyContent={'center'}
-          flexWrap={'nowrap'}
-        >
-          {backButton}
-          <LogoIcon />
-          <Button variant="text" onClick={props.onCloseClick}>
+        <div className="alert-header">
+          {props.onBackClick ? (
+            <div className="alert-button-icon" onClick={props.onBackClick}>
+              <LeftIcon />
+            </div>
+          ) : (
+            <div className="alert-button-icon-empty"></div>
+          )}
+          <div className="alert-logo">
+            <LogoIcon />
+          </div>
+          <div className="alert-button-icon" onClick={props.onCloseClick}>
             <CloseIcon />
-          </Button>
-        </Grid2>
-        <Grid2 textAlign={'center'} container>
-          {props.children}
-          {!isMobile && <Grid2 container>{props.showMore && props.extraContent}</Grid2>}
-        </Grid2>
+          </div>
+        </div>
+        <div
+          className="alert-modal-loading-wrapper"
+          style={
+            props.loading
+              ? {
+                  opacity: 1,
+                  transition: 'all ease 0.3s',
+                  height: '14px',
+                  overflow: 'unset',
+                  width: 'unset'
+                }
+              : {
+                  opacity: 0,
+                  transition: 'all ease 0.3s',
+                  height: 0,
+                  overflow: 'hidden',
+                  width: 0
+                }
+          }
+        >
+          <Loader />
+        </div>
+        <div className="alert-body" style={{ marginBottom: props.extraContent ? '' : '1.8em' }}>
+          {props.content}
+          {!isMobile && (
+            <div className={props.showMore ? 'alert-body-extra-show' : 'alert-body-extra-hide'}>
+              {props.extraContent && <div className="alert-divider"></div>}
+              {props.extraContent}
+            </div>
+          )}
+        </div>
         {!isMobile && props.extraContent && (
-          <Grid2
-            style={{ cursor: 'pointer', justifyContent: 'center' }}
-            onClick={() => props.onClickShowMore && props.onClickShowMore()}
-            marginTop={'15px'}
-            container
-          >
+          <div className="alert-footer" onClick={props.onClickShowMore}>
             {props.showMore ? 'Show less' : 'Show more'}
-          </Grid2>
+          </div>
         )}
-      </Box>
-    </Modal>
+      </div>
+    </div>
   )
 }