feat: pair-other mui migration

airgap-it · Jan 9, 2025 · 1894872 · 1894872
1 parent 2aea7e3
commit 1894872
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 87 deletions.
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,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
+import { Box, Typography, Button } from '@mui/material'
 import QR from '../qr'
-
 import { PairOtherProps } from 'src/ui/alert/common'
 
 const PairOther: React.FC<PairOtherProps> = (props: PairOtherProps) => {
@@ -10,45 +10,62 @@ const PairOther: React.FC<PairOtherProps> = (props: PairOtherProps) => {
   const [qrData, setQrData] = useState<string>('')
 
   useEffect(() => {
+    // Reset state whenever props change
     setUiState('selection')
     setQrData('')
     setHasBeacon(!!props.p2pPayload)
     setHasWalletConnect(!!props.wcPayload)
   }, [props.p2pPayload, props.wcPayload])
 
   const buttonClickHandler = (state: 'p2p' | 'walletconnect') => {
-    state === 'p2p' ? setQrData(props.p2pPayload) : setQrData(props.wcPayload)
+    setQrData(state === 'p2p' ? props.p2pPayload : props.wcPayload)
     setUiState(state)
   }
 
   return (
-    <>
+    <Box>
       {uiState === 'selection' && (
-        <div>
-          <span className="pair-other-info">Select QR Type</span>
-          <br />
+        <Box sx={{ padding: '5px' }}>
+          <Typography variant="body1" gutterBottom>
+            Select QR Type
+          </Typography>
           {hasBeacon && (
-            <button className="wallets-button" onClick={() => buttonClickHandler('p2p')}>
-              Beacon
-            </button>
+            <Box sx={{ padding: '5px' }}>
+              <Button
+                variant="contained"
+                color="primary"
+                onClick={() => buttonClickHandler('p2p')}
+                sx={{ width: '100%' }}
+              >
+                Beacon
+              </Button>
+            </Box>
           )}
           {hasWalletConnect && (
-            <button className="wallets-button" onClick={() => buttonClickHandler('walletconnect')}>
-              WalletConnect
-            </button>
+            <Box sx={{ padding: '5px' }}>
+              <Button
+                variant="contained"
+                color="primary"
+                sx={{ width: '100%' }}
+                onClick={() => buttonClickHandler('walletconnect')}
+              >
+                WalletConnect
+              </Button>
+            </Box>
           )}
-        </div>
+        </Box>
       )}
+
       {uiState !== 'selection' && qrData && (
         <QR
           isWalletConnect={uiState === 'walletconnect'}
-          isMobile={true}
-          walletName={'AirGap'}
+          isMobile
+          walletName="AirGap"
           code={qrData}
           onClickLearnMore={props.onClickLearnMore}
         />
       )}
-    </>
+    </Box>
   )
 }
 

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
@@ -44,7 +44,7 @@ const PairingAlert: React.FC<React.PropsWithChildren<AlertConfig>> = (props) =>
     p2pPayload,
     postPayload,
     wallets,
-    props.closeButtonCallback ?? (() => { })
+    props.closeButtonCallback ?? (() => {})
   )
   const isOnline = navigator.onLine
   const walletList = Array.from(wallets.values())
@@ -95,8 +95,8 @@ const PairingAlert: React.FC<React.PropsWithChildren<AlertConfig>> = (props) =>
             isMobile={isMobile}
             walletName={wallet?.name || 'AirGap'}
             code={qrCode ?? ''}
-            onClickLearnMore={() => { }}
-            onClickQrCode={() => { }}
+            onClickLearnMore={() => {}}
+            onClickQrCode={() => {}}
           />
         ) : (
           generateWCError(`Connect with ${wallet?.name} Mobile`)
@@ -108,7 +108,7 @@ const PairingAlert: React.FC<React.PropsWithChildren<AlertConfig>> = (props) =>
   return (
     <Alert
       loading={isLoading}
-      onCloseClick={props.closeButtonCallback ?? (() => { })}
+      onCloseClick={props.closeButtonCallback ?? (() => {})}
       open={true}
       showMore={showMoreContent}
       extraContent={
@@ -125,14 +125,14 @@ const PairingAlert: React.FC<React.PropsWithChildren<AlertConfig>> = (props) =>
       onClickShowMore={handleShowMoreContent}
       onBackClick={
         state === 'install' ||
-          state === 'qr' ||
-          (state === 'wallets' && isMobile) ||
-          state === 'help'
+        state === 'qr' ||
+        (state === 'wallets' && isMobile) ||
+        state === 'help'
           ? () => handleUpdateState('top-wallets')
           : undefined
       }
     >
-      <Grid2 container>
+      <Grid2 container sx={{ flexFlow: 'column' }}>
         {state === 'install' && (
           <Grid2 container justifyContent={'center'} spacing={2}>
             {isOnline && wallet?.types.includes('web') && (
@@ -165,19 +165,19 @@ const PairingAlert: React.FC<React.PropsWithChildren<AlertConfig>> = (props) =>
                 buttons={
                   wallet.firefoxId
                     ? [
-                      {
-                        label: 'Use Extension',
-                        type: 'primary',
-                        onClick: () => handleClickConnectExtension()
-                      }
-                    ]
+                        {
+                          label: 'Use Extension',
+                          type: 'primary',
+                          onClick: () => handleClickConnectExtension()
+                        }
+                      ]
                     : [
-                      {
-                        label: 'Install extension',
-                        type: 'primary',
-                        onClick: () => handleClickInstallExtension()
-                      }
-                    ]
+                        {
+                          label: 'Install extension',
+                          type: 'primary',
+                          onClick: () => handleClickInstallExtension()
+                        }
+                      ]
                 }
               />
             )}
@@ -235,9 +235,9 @@ const PairingAlert: React.FC<React.PropsWithChildren<AlertConfig>> = (props) =>
                   downloadLink={
                     wallet?.name.toLowerCase().includes('kukai') && isIOS(window)
                       ? {
-                        label: 'Get Kukai Mobile >',
-                        url: 'https://ios.kukai.app'
-                      }
+                          label: 'Get Kukai Mobile >',
+                          url: 'https://ios.kukai.app'
+                        }
                       : undefined
                   }
                   onShowQRCodeClick={async () => {
@@ -270,21 +270,22 @@ const PairingAlert: React.FC<React.PropsWithChildren<AlertConfig>> = (props) =>
         {state === 'qr' && (
           <Grid2
             container
-            style={{
+            sx={{
               opacity: 1,
               height: 'unset',
               overflow: 'unset',
               transform: 'scale(1)',
               transition: 'all ease 0.3s',
               display: 'flex',
               flexDirection: 'column',
+              flexFlow: 'column !important',
               gap: '0.9em'
             }}
           >
             {!displayQRExtra ? (
               <PairOther
                 walletList={walletList}
-                onClickLearnMore={() => { }}
+                onClickLearnMore={() => {}}
                 p2pPayload={p2pPayload}
                 wcPayload={wcPayload}
               ></PairOther>
@@ -298,19 +299,19 @@ const PairingAlert: React.FC<React.PropsWithChildren<AlertConfig>> = (props) =>
           style={
             state === 'wallets'
               ? {
-                opacity: 1,
-                height: 'unset',
-                overflow: 'unset',
-                transform: 'scale(1)',
-                transition: 'all ease 0.3s'
-              }
+                  opacity: 1,
+                  height: 'unset',
+                  overflow: 'unset',
+                  transform: 'scale(1)',
+                  transition: 'all ease 0.3s'
+                }
               : {
-                opacity: 0,
-                height: 0,
-                overflow: 'hidden',
-                transform: 'scale(1.1)',
-                transition: 'all ease 0.3s'
-              }
+                  opacity: 0,
+                  height: 0,
+                  overflow: 'hidden',
+                  transform: 'scale(1.1)',
+                  transition: 'all ease 0.3s'
+                }
           }
         >
           <Wallets
@@ -325,29 +326,29 @@ const PairingAlert: React.FC<React.PropsWithChildren<AlertConfig>> = (props) =>
           style={
             state === 'help'
               ? {
-                opacity: 1,
-                height: 'unset',
-                overflow: 'unset',
-                transform: 'scale(1)',
-                transition: 'all ease 0.3s',
-                display: 'flex',
-                flexDirection: 'column',
-                gap: '0.9em'
-              }
+                  opacity: 1,
+                  height: 'unset',
+                  overflow: 'unset',
+                  transform: 'scale(1)',
+                  transition: 'all ease 0.3s',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: '0.9em'
+                }
               : {
-                opacity: 0,
-                height: 0,
-                overflow: 'hidden',
-                transform: 'scale(1.1)',
-                transition: 'all ease 0.3s',
-                display: 'flex',
-                flexDirection: 'column',
-                gap: '0.9em'
-              }
+                  opacity: 0,
+                  height: 0,
+                  overflow: 'hidden',
+                  transform: 'scale(1.1)',
+                  transition: 'all ease 0.3s',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: '0.9em'
+                }
           }
         >
           {areMetricsEnabled && (
-            <BugReportForm onSubmit={props.closeButtonCallback ?? (() => { })} />
+            <BugReportForm onSubmit={props.closeButtonCallback ?? (() => {})} />
           )}
           {!areMetricsEnabled && (
             <>
@@ -403,19 +404,19 @@ const PairingAlert: React.FC<React.PropsWithChildren<AlertConfig>> = (props) =>
           style={
             state !== 'install' && state !== 'qr' && state !== 'wallets' && state !== 'help'
               ? {
-                opacity: 1,
-                height: 'unset',
-                overflow: 'unset',
-                transform: 'scale(1)',
-                transition: 'all ease 0.3s'
-              }
+                  opacity: 1,
+                  height: 'unset',
+                  overflow: 'unset',
+                  transform: 'scale(1)',
+                  transition: 'all ease 0.3s'
+                }
               : {
-                opacity: 0,
-                height: 0,
-                overflow: 'hidden',
-                transform: 'scale(1.1)',
-                transition: 'all ease 0.3s'
-              }
+                  opacity: 0,
+                  height: 0,
+                  overflow: 'hidden',
+                  transform: 'scale(1.1)',
+                  transition: 'all ease 0.3s'
+                }
           }
         >
           <TopWallets
@@ -426,9 +427,9 @@ const PairingAlert: React.FC<React.PropsWithChildren<AlertConfig>> = (props) =>
             otherWallets={
               isMobile
                 ? {
-                  images: [walletList[3].image, walletList[4].image, walletList[5].image],
-                  onClick: () => handleUpdateState('wallets')
-                }
+                    images: [walletList[3].image, walletList[4].image, walletList[5].image],
+                    onClick: () => handleUpdateState('wallets')
+                  }
                 : undefined
             }
           />