feat: add connect wallet button styles and func

cardano-foundation · Aug 25, 2023 · bf1ed5b · bf1ed5b
1 parent a6b3f9b
commit bf1ed5b
Show file tree

Hide file tree

Showing 4 changed files with 166 additions and 64 deletions.
diff --git a/ui/summit-2023/src/components/ConnectWalletModal/ConnectWalletModal.tsx b/ui/summit-2023/src/components/ConnectWalletModal/ConnectWalletModal.tsx
@@ -1,23 +1,13 @@
 import React from 'react';
 import Dialog from '@mui/material/Dialog';
 import DialogContent from '@mui/material/DialogContent';
-import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
-import {Avatar, Box, IconButton, List, ListItem, ListItemAvatar, styled, Typography} from '@mui/material';
+import { Avatar, IconButton, List, ListItem, ListItemAvatar, Typography } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
-import Grid from '@mui/material/Grid';
-import { useTheme } from '@mui/material/styles';
-import {ConnectWalletList, useCardano} from '@cardano-foundation/cardano-connect-with-wallet';
+import { useCardano } from '@cardano-foundation/cardano-connect-with-wallet';
 import Paper from '@mui/material/Paper';
 import './ConnectWalletModal.scss';
-
-const ConnectGrid = styled(Grid)(({ theme }) => ({
-  width: '100%',
-  ...theme.typography.body2,
-  '& [role="separator"]': {
-    margin: theme.spacing(0, 2),
-  },
-}));
+import {walletIcon} from '../../utils/utils';
 
 const StyledPaper = (props: any) => {
   return (
@@ -46,13 +36,7 @@ const ConnectWalletModal = (props: ConnectWalletModalProps) => {
   const { name, id, openStatus, title, description, onConnectWallet, onClose } = props;
   const { installedExtensions, connect } = useCardano();
 
-  const walletIcon = (walletName:string) => {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    return window.cardano && window.cardano[walletName].icon;
-  };
-
-  const availableWallets = installedExtensions.filter(installedWallet => SUPPORTED_WALLETS.includes(installedWallet));
+  const availableWallets = installedExtensions.filter((installedWallet) => SUPPORTED_WALLETS.includes(installedWallet));
 
   return (
     <Dialog
@@ -66,15 +50,9 @@ const ConnectWalletModal = (props: ConnectWalletModalProps) => {
         id={id}
         style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
       >
-        <Typography
-            className='connect-wallet-modal-title'
-          variant="h6"
-          style={{ float: 'left' }}
-        >
-          {title}
-        </Typography>
+        <Typography className="connect-wallet-modal-title">{title}</Typography>
         <IconButton
-            className="closeButton"
+          className="closeButton"
           edge="end"
           color="inherit"
           onClick={onClose}
@@ -83,19 +61,30 @@ const ConnectWalletModal = (props: ConnectWalletModalProps) => {
         </IconButton>
       </DialogTitle>
       <DialogContent style={{ width: '400px' }}>
-        <Typography className='connect-wallet-modal-description' gutterBottom style={{ wordWrap: 'break-word' }}>
+        <Typography
+          className="connect-wallet-modal-description"
+          gutterBottom
+          style={{ wordWrap: 'break-word' }}
+        >
           {description}
         </Typography>
         <List>
           {availableWallets.map((walletName, index) => (
-              <ListItem key={index} className='walletItem' onClick={() => connect(walletName, onConnectWallet)}>
-                <ListItemAvatar>
-                  <Avatar src={walletIcon(walletName)} style={{width: '24px', height: '24px'}}/>
-                </ListItemAvatar>
-                <Typography className='walletLabel'>
-                  Connect <span className='walletName'>{walletName}</span> wallet
-                </Typography>
-              </ListItem>
+            <ListItem
+              key={index}
+              className="walletItem"
+              onClick={() => connect(walletName, onConnectWallet)}
+            >
+              <ListItemAvatar>
+                <Avatar
+                  src={walletIcon(walletName)}
+                  style={{ width: '24px', height: '24px' }}
+                />
+              </ListItemAvatar>
+              <Typography className="walletLabel">
+                Connect <span className="walletName">{walletName}</span> wallet
+              </Typography>
+            </ListItem>
           ))}
         </List>
       </DialogContent>

diff --git a/ui/summit-2023/src/components/common/Header/Header.scss b/ui/summit-2023/src/components/common/Header/Header.scss
@@ -22,6 +22,41 @@
   animation-duration: 300ms;
 }
 
+.button-container {
+  position: relative;
+
+  &:hover .disconnect-wrapper {
+    display: block;
+  }
+
+  &:hover .arrow-icon svg {
+    transform: rotate(180deg);
+  }
+}
+
+.arrow-icon {
+  display: inline-flex;
+  align-items: center;
+
+  svg {
+    transition: transform 0.3s ease-in-out;
+    transform: rotate(0deg);
+  }
+}
+
+.disconnect-wrapper {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  display: none;
+
+  .disconnect-button {
+    margin-top: 4px;
+    width: 100%;
+    text-transform: none;
+  }
+}
 .connect-button.MuiButton-root {
   display: inline-flex;
   padding: 16px 24px 16px 16px;
@@ -36,13 +71,41 @@
   font-weight: 600;
   line-height: normal;
   text-transform: none;
+
+  span {
+    padding-top: 3px;
+  }
 }
 
 .connect-button.MuiButton-root:hover {
   transform: scale(1.02);
 }
 
-.menuButton.MuiButtonBase-root {
+.connected-button.MuiButton-root {
+  width: 191px;
+  border-radius: 8px;
+  border: 1px solid var(--color-light-grey);
+  background: var(--color-light-blue);
+  display: inline-flex;
+  padding: 16px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  text-transform: none;
+
+  color: var(--color-dark-grey);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+
+.connected-button.MuiButton-root:hover {
+  border: 1px solid var(--color-light-grey);
+  background: var(--color-light-blue);
+}
+
+.close-button.MuiButtonBase-root {
   width: 51px;
   height: 51px;
   flex-shrink: 0;
@@ -51,14 +114,14 @@
   background: var(--color-ultra-light-blue);
 }
 
-.closeIcon.MuiSvgIcon-root {
+.close-icon.MuiSvgIcon-root {
   width: 29px;
   height: 29px;
   flex-shrink: 0;
   color: var(--color-ultra-dark-blue);
 }
 
-.listItem.MuiListItem-root {
+.list-item.MuiListItem-root {
   display: flex;
   margin-left: 20px;
   width: 335px;

diff --git a/ui/summit-2023/src/components/common/Header/Header.tsx b/ui/summit-2023/src/components/common/Header/Header.tsx
@@ -1,31 +1,34 @@
 import React, { useState } from 'react';
 import { NavLink } from 'react-router-dom';
 import {
-  AppBar,
-  Toolbar,
-  Button,
-  IconButton,
-  Drawer,
-  List,
-  ListItem,
-  useTheme,
-  useMediaQuery,
-  Grid,
+    AppBar,
+    Toolbar,
+    Button,
+    IconButton,
+    Drawer,
+    List,
+    ListItem,
+    useTheme,
+    useMediaQuery,
+    Grid, Avatar,
 } from '@mui/material';
 import MenuIcon from '@mui/icons-material/Menu';
 import CloseIcon from '@mui/icons-material/Close';
+import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 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';
+import {addressSlice, walletIcon} from '../../../utils/utils';
 
 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 { stakeAddress, isConnected, signMessage, disconnect, enabledWallet } = useCardano();
   const [isDisabled, setIsDisabled] = useState<boolean>(false);
   const [showVoteReceipt, setShowVoteReceipt] = useState<boolean>(false);
   const [openAuthDialog, setOpenAuthDialog] = useState<boolean>(false);
@@ -42,6 +45,12 @@ const Header: React.FC = () => {
     notify('Wallet Connected!');
   };
 
+  const handleConnectWallet = () => {
+      if (!isConnected){
+          setOpenAuthDialog(true)
+      }
+  };
+
   const drawerItems = (
     <List>
       <ListItem style={{ justifyContent: 'space-between' }}>
@@ -53,17 +62,17 @@ const Header: React.FC = () => {
           {i18n.t('header.connectWalletButton')}
         </Button>
         <IconButton
-          className="menuButton"
+          className="close-button"
           onClick={() => setDrawerOpen(false)}
         >
-          <CloseIcon className="closeIcon" />
+          <CloseIcon className="close-icon" />
         </IconButton>
       </ListItem>
       <ListItem
         onClick={() => setDrawerOpen(false)}
         component={NavLink}
         to="/categories"
-        className="listItem"
+        className="list-item"
         style={{ marginTop: '20px' }}
       >
         {i18n.t('header.menu.categories')}
@@ -72,15 +81,15 @@ const Header: React.FC = () => {
         onClick={() => setDrawerOpen(false)}
         component={NavLink}
         to="/leaderboard"
-        className="listItem"
+        className="list-item"
       >
         {i18n.t('header.menu.leaderboard')}
       </ListItem>
       <ListItem
         onClick={() => setDrawerOpen(false)}
         component={NavLink}
         to="/user-guide"
-        className="listItem"
+        className="list-item"
       >
         {i18n.t('header.menu.userGuide')}
       </ListItem>
@@ -108,7 +117,7 @@ const Header: React.FC = () => {
                 className="menuButton"
                 onClick={() => setDrawerOpen(true)}
               >
-                <MenuIcon className="closeIcon" />
+                <MenuIcon className="close-icon" />
               </IconButton>
             </>
           ) : (
@@ -145,13 +154,37 @@ const Header: React.FC = () => {
                 </NavLink>
               </Grid>
               <Grid item>
-                <Button
-                  className="connect-button"
-                  color="inherit"
-                  onClick={() => setOpenAuthDialog(true)}
-                >
-                  {i18n.t('header.connectWalletButton')}
-                </Button>
+                <div className="button-container">
+                  <Button
+                    className={isConnected ? 'connected-button' : 'connect-button'}
+                    color="inherit"
+                    onClick={() => handleConnectWallet()}
+                  >
+                      {isConnected && enabledWallet ? <Avatar
+                          src={walletIcon(enabledWallet)}
+                          style={{ width: '24px', height: '24px' }}
+                      /> : <AccountBalanceWalletIcon />}
+                      {isConnected ? <>
+                          {stakeAddress ? addressSlice(stakeAddress, 5) : null}
+                          <div className="arrow-icon">
+                              <KeyboardArrowDownIcon />
+                          </div>
+                      </> : <>
+                          <span> {i18n.t('header.connectWalletButton')}</span>
+                      </>}
+                  </Button>
+                  {isConnected && (
+                    <div className="disconnect-wrapper">
+                      <Button
+                        className="connect-button disconnect-button"
+                        color="inherit"
+                        onClick={() => disconnect()}
+                      >
+                        Disconnect wallet
+                      </Button>
+                    </div>
+                  )}
+                </div>
               </Grid>
             </Grid>
           )}

diff --git a/ui/summit-2023/src/utils/utils.ts b/ui/summit-2023/src/utils/utils.ts
@@ -0,0 +1,17 @@
+const addressSlice = (address: string, sliceLength = 10) => {
+    if (address) {
+        return `${address.slice(0, sliceLength)}...${address.slice(-sliceLength)}`;
+    }
+    return address;
+}
+
+const walletIcon = (walletName: string) => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    return window.cardano && window.cardano[walletName].icon;
+};
+
+export {
+    addressSlice,
+    walletIcon
+}