feat: using ConnectWalletModal

cardano-foundation · Aug 23, 2023 · 6ff1c91 · 6ff1c91
1 parent af84a84
commit 6ff1c91
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 5 deletions.
diff --git a/ui/summit-2023/src/components/Hero/Hero.tsx b/ui/summit-2023/src/components/Hero/Hero.tsx
@@ -28,7 +28,7 @@ const Hero: React.FC = () => {
         display: 'flex',
         flexDirection: { xs: 'column', sm: 'row' },
         height: { xs: 'auto', sm: '400px' },
-        marginLeft: isMobile ? '0px' : '50px'
+        marginLeft: isMobile ? '0px' : '50px',
       }}
     >
       <Box
@@ -39,7 +39,10 @@ const Hero: React.FC = () => {
           order: { xs: '1', sm: '1' },
         }}
       >
-        <div className="left-title-container"  style={{ marginTop: isMobile ? '0px' : '15%' }}>
+        <div
+          className="left-title-container"
+          style={{ marginTop: isMobile ? '0px' : '15%' }}
+        >
           <Typography
             className="title"
             variant="h2"
@@ -66,7 +69,7 @@ const Hero: React.FC = () => {
         sx={{
           flex: '1',
           padding: '20px',
-          marginLeft:  isMobile ? '0px' : '40px',
+          marginLeft: isMobile ? '0px' : '40px',
           order: { xs: '2', sm: '2' },
         }}
       >

diff --git a/ui/summit-2023/src/components/common/Header/Header.tsx b/ui/summit-2023/src/components/common/Header/Header.tsx
@@ -16,18 +16,39 @@ import MenuIcon from '@mui/icons-material/Menu';
 import CloseIcon from '@mui/icons-material/Close';
 import './Header.scss';
 import { i18n } from '../../../i18n';
+import ConnectWalletModal from '../../ConnectWalletModal/ConnectWalletModal';
+import { useCardano } from '@cardano-foundation/cardano-connect-with-wallet';
+import toast from 'react-hot-toast';
 
 const Header: React.FC = () => {
   const [drawerOpen, setDrawerOpen] = useState(false);
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
+  const { stakeAddress, isConnected, signMessage } = useCardano();
+  const [isDisabled, setIsDisabled] = useState<boolean>(false);
+  const [showVoteReceipt, setShowVoteReceipt] = useState<boolean>(false);
+  const [openAuthDialog, setOpenAuthDialog] = useState<boolean>(false);
+  const [optionId, setOptionId] = useState('');
+
+  const notify = (message: string) => toast(message);
+
+  const handleCloseAuthDialog = () => {
+    setOpenAuthDialog(false);
+  };
+
+  const onConnectWallet = () => {
+    setOpenAuthDialog(false);
+    notify('Wallet Connected!');
+  };
+
   const drawerItems = (
     <List>
       <ListItem style={{ justifyContent: 'space-between' }}>
         <Button
           className="connect-button"
           color="inherit"
+          onClick={() => setOpenAuthDialog(true)}
         >
           {i18n.t('header.connectWalletButton')}
         </Button>
@@ -127,6 +148,7 @@ const Header: React.FC = () => {
                 <Button
                   className="connect-button"
                   color="inherit"
+                  onClick={() => setOpenAuthDialog(true)}
                 >
                   {i18n.t('header.connectWalletButton')}
                 </Button>
@@ -146,6 +168,17 @@ const Header: React.FC = () => {
       >
         {drawerItems}
       </Drawer>
+
+      <ConnectWalletModal
+        openStatus={openAuthDialog}
+        onCloseFn={handleCloseAuthDialog}
+        name="connect-wallet-list"
+        id="connect-wallet-list"
+        title="Choose your preferred wallet to connect"
+        action
+        buttonLabel="Close"
+        onConnectWallet={onConnectWallet}
+      />
     </>
   );
 };

diff --git a/ui/summit-2023/src/index.scss b/ui/summit-2023/src/index.scss
@@ -21,8 +21,9 @@
   font-weight: 400;
   src: url(./common/resources/fonts/Roboto-Light.ttf) format('ttf');
 }
-body, html {
+body,
+html {
   margin: 0;
   padding: 0;
   overflow-x: hidden;
-}
+}