fix: display full list

airgap-it · Sep 10, 2024 · 0e1654f · 0e1654f
1 parent c29a78f
commit 0e1654f
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 11 deletions.
diff --git a/packages/beacon-ui/src/components/alert/index.tsx b/packages/beacon-ui/src/components/alert/index.tsx
@@ -2,10 +2,10 @@ 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 useIsMobile from 'src/ui/alert/hooks/useIsMobile'
 
 const Alert: React.FC<AlertProps> = (props: AlertProps) => {
-  // todo const isMobile = useIsMobile()
+  const isMobile = useIsMobile()
 
   return (
     <Modal open={true} onClose={props.onCloseClick}>
@@ -28,11 +28,31 @@ const Alert: React.FC<AlertProps> = (props: AlertProps) => {
             <LeftIcon />
           </Button>
           <LogoIcon />
-          <Button variant="outlined">
+          <Button variant="outlined" onClick={props.onCloseClick}>
             <CloseIcon />
           </Button>
         </Grid2>
-        <Grid2 container>{props.content}</Grid2>
+        <Grid2 container>
+          {props.content}
+          {!isMobile && (
+            <Grid2 container>
+              {props.extraContent && <Grid2>---</Grid2>}
+              {props.extraContent}
+            </Grid2>
+          )}
+        </Grid2>
+        <Grid2 container>{props.extraContent}</Grid2>
+        {!isMobile && props.extraContent && (
+          <Grid2
+            style={{ cursor: 'pointer', justifyContent: 'center' }}
+            onClick={() => {
+              if (props.onClickShowMore) props.onClickShowMore()
+            }}
+            container
+          >
+            {props.showMore ? 'Show less' : 'Show more'}
+          </Grid2>
+        )}
       </Box>
     </Modal>
   )

diff --git a/packages/beacon-ui/src/ui/alert/components/pairing-alert/index.tsx b/packages/beacon-ui/src/ui/alert/components/pairing-alert/index.tsx
@@ -32,7 +32,8 @@ const PairingAlert: React.FC<any> = (props) => {
     handleClickOpenDesktopApp,
     handleClickDownloadDesktopApp,
     handleUpdateState,
-    handleUpdateQRCode
+    handleUpdateQRCode,
+    handleShowMoreContent
   ] = useConnect(wcPayload, p2pPayload, postPayload, wallets, onClose)
   const isOnline = navigator.onLine
   const walletList = Array.from(wallets.values())
@@ -95,6 +96,7 @@ const PairingAlert: React.FC<any> = (props) => {
 
   return (
     <Alert
+      {...props}
       loading={isLoading}
       onCloseClick={onClose}
       open={true}
@@ -422,6 +424,37 @@ const PairingAlert: React.FC<any> = (props) => {
           </div>
         </div>
       }
+      extraContent={
+        state !== 'top-wallets' || isMobile ? undefined : (
+          <Wallets
+            small
+            wallets={walletList.slice(-(walletList.length - 4))}
+            isMobile={isMobile}
+            onClickWallet={(id) => handleClickWallet(id, props)}
+            onClickOther={handleClickOther}
+          />
+        )
+      }
+      onClickShowMore={handleShowMoreContent}
+      onBackClick={() => {
+        switch (state) {
+          case 'install':
+          case 'qr':
+          case 'wallets':
+            if (state === 'wallets' && !isMobile) return undefined
+            return () => handleUpdateState('top-wallets')
+          case 'help':
+            return () => {
+              // todo if (pairingExpired) {
+              //   handleCloseAlert();
+              //   return;
+              // }
+              // todo return setCurrentInfo(previousInfo());
+            }
+          default:
+            return undefined
+        }
+      }}
     />
   )
 }

diff --git a/packages/beacon-ui/src/ui/alert/hooks/useConnect.tsx b/packages/beacon-ui/src/ui/alert/hooks/useConnect.tsx
@@ -309,6 +309,8 @@ const useConnect = (
 
   const handleUpdateQRCode = useCallback((uri: string) => setQRCode(uri), [])
 
+  const handleShowMoreContent = useCallback(() => setShowMoreContent((prev) => !prev), [])
+
   return [
     wallet,
     isMobile,
@@ -327,7 +329,8 @@ const useConnect = (
     handleClickOpenDesktopApp,
     handleClickDownloadDesktopApp,
     handleUpdateState,
-    handleUpdateQRCode
+    handleUpdateQRCode,
+    handleShowMoreContent
   ] as const
 }
 

diff --git a/packages/beacon-ui/src/ui/alert/index.tsx b/packages/beacon-ui/src/ui/alert/index.tsx
@@ -8,15 +8,15 @@ import PairingAlert from './components/pairing-alert'
 let initDone: boolean = false
 const show$ = new Subject<boolean>()
 
-const createAlert = () => {
+const createAlert = (config: AlertConfig) => {
   const el = document.createElement('beacon-modal')
   document.body.prepend(el)
-  setTimeout(() => createRoot(el).render(<AlertRoot />), 50)
+  setTimeout(() => createRoot(el).render(<AlertRoot {...config} />), 50)
   initDone = true
 }
 
-const openAlert = (_config: AlertConfig) => {
-  !initDone && createAlert()
+const openAlert = (config: AlertConfig) => {
+  !initDone && createAlert(config)
   show$.next(true)
 }
 
@@ -28,7 +28,7 @@ const closeAlerts = () => {
   closeAlert()
 }
 
-const AlertRoot = (_props: any) => {
+const AlertRoot = (props: AlertConfig) => {
   const [isAlertVisible, setIsAlertVisible] = useState(true)
   useEffect(() => {
     show$.subscribe((value) => setIsAlertVisible(value))
@@ -37,6 +37,7 @@ const AlertRoot = (_props: any) => {
     <>
       {isAlertVisible && (
         <PairingAlert
+          {...props}
           open={true}
           loading={false}
           onClose={() => closeAlert()}