fix: render

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

@@ -1,22 +1,39 @@
 import { AlertProps } from '../../ui/alert/common'
-import { Modal, Box } from '@mui/material'
+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<AlertProps> = (props: AlertProps) => {
-  const style = {
-    position: 'absolute',
-    top: '50%',
-    left: '50%',
-    transform: 'translate(-50%, -50%)',
-    width: 400,
-    bgcolor: 'black',
-    border: '2px solid #000',
-    boxShadow: 24,
-    p: 4
-  }
+  // const isMobile = useIsMobile()
+
   return (
     <Modal open={true} onClose={props.onCloseClick}>
-      <Box sx={style}>
-        <h1>Hello World</h1>
+      <Box
+        sx={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          width: 400,
+          bgcolor: 'grey',
+          border: '2px solid #000',
+          boxShadow: 24,
+          borderRadius: '10px',
+          p: 4
+        }}
+      >
+        <Grid2 container spacing={8} alignItems={'center'} justifyContent={'center'}>
+          <Button variant="outlined">
+            <LeftIcon />
+          </Button>
+          <LogoIcon />
+          <Button variant="outlined">
+            <CloseIcon />
+          </Button>
+        </Grid2>
+        <Grid2 container>{props.content}</Grid2>
       </Box>
     </Modal>
   )

packages/beacon-ui/src/components/top-wallets/index.tsx

@@ -1,68 +1,59 @@
-import React from "react";
-import { MergedWallet } from "../../utils/wallets";
-import Wallet from "../wallet";
+import React from 'react'
+import { MergedWallet } from '../../utils/wallets'
+import Wallet from '../wallet'
 
-import { StorageKey } from "@airgap/beacon-types";
+import { StorageKey } from '@airgap/beacon-types'
+import { Button, Grid2 } from '@mui/material'
 
 interface TopWalletsProps {
-  wallets: MergedWallet[];
-  onClickWallet: (id: string) => void;
-  onClickLearnMore: () => void;
-  otherWallets?: { images: string[]; onClick: () => void };
-  disabled?: boolean;
-  isMobile: boolean;
+  wallets: MergedWallet[]
+  onClickWallet: (id: string) => void
+  onClickLearnMore: () => void
+  otherWallets?: { images: string[]; onClick: () => void }
+  disabled?: boolean
+  isMobile: boolean
 }
 
 const TopWallets: React.FC<TopWalletsProps> = (props: TopWalletsProps) => {
-  const enableBugReport = localStorage
-    ? localStorage.getItem(StorageKey.ENABLE_METRICS)
-    : "false";
+  const enableBugReport = localStorage ? localStorage.getItem(StorageKey.ENABLE_METRICS) : 'false'
 
   return (
     <div className="top-wallets-wrapper">
       <div className="top-wallets-info">
         <h3>Connect Wallet</h3>
-        {enableBugReport === "true" ? (
+        {enableBugReport === 'true' ? (
           <span>
-            Do you wish to report a bug?{" "}
-            <span
-              className="top-wallets-learn-more"
-              onClick={props.onClickLearnMore}
-            >
+            Do you wish to report a bug?{' '}
+            <span className="top-wallets-learn-more" onClick={props.onClickLearnMore}>
               Click here
             </span>
           </span>
         ) : (
           <span>
-            If you don't have a wallet, you can select a provider and create one
-            now.{" "}
-            <span
-              className="top-wallets-learn-more"
-              onClick={props.onClickLearnMore}
-            >
+            If you don't have a wallet, you can select a provider and create one now.{' '}
+            <span className="top-wallets-learn-more" onClick={props.onClickLearnMore}>
               Learn more
             </span>
           </span>
         )}
       </div>
-      <div className="top-wallets-wallets-main">
+      <Grid2 container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
         {props.wallets.map((wallet) => (
-          <Wallet
-            key={wallet.id}
-            disabled={props.disabled}
-            mobile={props.isMobile}
-            name={wallet.name}
-            description={wallet.descriptions.join(" & ")}
-            image={wallet.image}
-            onClick={() => props.onClickWallet(wallet.id)}
-            tags={wallet.tags}
-          />
+          <Grid2 size={6}>
+            <Button variant="outlined">
+              <Wallet
+                key={wallet.id}
+                disabled={props.disabled}
+                name={wallet.name}
+                description={wallet.descriptions.join(' & ')}
+                image={wallet.image}
+                onClick={() => props.onClickWallet(wallet.id)}
+              />
+            </Button>
+          </Grid2>
         ))}
         {props.otherWallets && (
-          <div
-            className="top-wallets-other-wallets"
-            onClick={props.otherWallets.onClick}
-          >
+          <div className="top-wallets-other-wallets" onClick={props.otherWallets.onClick}>
             <div className="top-wallets-other-wallets-left">
               <h3>Other Wallets</h3>
               <p>See other wallets you can use to connect</p>
@@ -78,10 +69,9 @@ const TopWallets: React.FC<TopWalletsProps> = (props: TopWalletsProps) => {
             </div>
           </div>
         )}
-      </div>
+      </Grid2>
     </div>
-  );
-};
-
+  )
+}
 
-export default TopWallets;
+export default TopWallets

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

@@ -1,39 +1,38 @@
-import React from "react";
-import { MergedWallet } from "../../utils/wallets";
-import Wallet from "../wallet";
-
+import React from 'react'
+import { MergedWallet } from '../../utils/wallets'
+import Wallet from '../wallet'
+import { Grid2 } from '@mui/material'
 
 interface WalletProps {
-  wallets: MergedWallet[];
-  onClickWallet: (id: string) => void;
-  onClickOther: () => void;
-  isMobile: boolean;
-  small?: boolean;
-  disabled?: boolean;
+  wallets: MergedWallet[]
+  onClickWallet: (id: string) => void
+  onClickOther: () => void
+  isMobile: boolean
+  small?: boolean
+  disabled?: boolean
 }
 
 const Wallets: React.FC<WalletProps> = (props: WalletProps) => {
   return (
-    <div className="wallets-list-main-wrapper">
-      <div className="wallets-list-wrapper">
-        {props.wallets.map((wallet) => (
+    <Grid2 container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
+      {props.wallets.map((wallet) => (
+        <Grid2 size={6}>
           <Wallet
             key={wallet.id}
             disabled={props.disabled}
             name={wallet.name}
-            description={wallet.descriptions.join(" & ")}
+            description={wallet.descriptions.join(' & ')}
             image={wallet.image}
             small={props.small}
             onClick={() => props.onClickWallet(wallet.id)}
           />
-        ))}
-      </div>
+        </Grid2>
+      ))}
       <button className="wallets-button" onClick={props.onClickOther}>
-        {props.isMobile ? "Pair wallet on another device" : "Show QR code"}
+        {props.isMobile ? 'Pair wallet on another device' : 'Show QR code'}
       </button>
-    </div>
-  );
-};
-
+    </Grid2>
+  )
+}
 
-export default Wallets;
+export default Wallets