feat: connect wallet toast

cardano-foundation · Aug 25, 2023 · a843100 · a843100
1 parent 4228385
commit a843100
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 47 deletions.
diff --git a/ui/summit-2023/package.json b/ui/summit-2023/package.json
@@ -19,7 +19,6 @@
     "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hot-toast": "^2.4.1",
     "react-redux": "^8.0.7",
     "react-router-dom": "^6.11.1",
     "react-scripts": "5.0.1",

diff --git a/ui/summit-2023/src/components/ConnectWalletModal/ConnectWalletModal.tsx b/ui/summit-2023/src/components/ConnectWalletModal/ConnectWalletModal.tsx
@@ -7,7 +7,7 @@ import CloseIcon from '@mui/icons-material/Close';
 import { useCardano } from '@cardano-foundation/cardano-connect-with-wallet';
 import Paper from '@mui/material/Paper';
 import './ConnectWalletModal.scss';
-import {walletIcon} from '../../utils/utils';
+import { walletIcon } from '../../utils/utils';
 
 const StyledPaper = (props: any) => {
   return (
@@ -25,6 +25,7 @@ type ConnectWalletModalProps = {
   title: string;
   description: string;
   onConnectWallet: () => void;
+  onConnectError: () => void;
   onClose: () => void;
 };
 
@@ -33,7 +34,7 @@ type ConnectWalletModalProps = {
 const SUPPORTED_WALLETS = ['flint', 'nami', 'eternl', 'typhon', 'yoroi', 'nufi'];
 
 const ConnectWalletModal = (props: ConnectWalletModalProps) => {
-  const { name, id, openStatus, title, description, onConnectWallet, onClose } = props;
+  const { name, id, openStatus, title, description, onConnectWallet, onConnectError, onClose } = props;
   const { installedExtensions, connect } = useCardano();
 
   const availableWallets = installedExtensions.filter((installedWallet) => SUPPORTED_WALLETS.includes(installedWallet));
@@ -73,7 +74,7 @@ const ConnectWalletModal = (props: ConnectWalletModalProps) => {
             <ListItem
               key={index}
               className="walletItem"
-              onClick={() => connect(walletName, onConnectWallet)}
+              onClick={() => connect(walletName, onConnectWallet, onConnectError)}
             >
               <ListItemAvatar>
                 <Avatar

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,21 @@
   animation-duration: 300ms;
 }
 
+.header-toast {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: 8px;
+  .MuiSnackbarContent-root {
+    background-color: var(--color-ultra-dark-blue);;
+  }
+}
+.header-toast-error {
+  .MuiSnackbarContent-root {
+    background-color:  var(--color-light-red) !important;
+  }
+}
 .button-container {
   position: relative;
   padding-top: 16px;

diff --git a/ui/summit-2023/src/components/common/Header/Header.tsx b/ui/summit-2023/src/components/common/Header/Header.tsx
@@ -1,27 +1,30 @@
 import React, { useState } from 'react';
 import { NavLink } from 'react-router-dom';
 import {
-    AppBar,
-    Toolbar,
-    Button,
-    IconButton,
-    Drawer,
-    List,
-    ListItem,
-    useTheme,
-    useMediaQuery,
-    Grid, Avatar,
+  AppBar,
+  Toolbar,
+  Button,
+  IconButton,
+  Drawer,
+  List,
+  ListItem,
+  useTheme,
+  useMediaQuery,
+  Grid,
+  Avatar,
+  Snackbar,
 } 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 CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+import DoNotDisturbAltIcon from '@mui/icons-material/DoNotDisturbAlt';
 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';
+import { addressSlice, walletIcon } from '../../../utils/utils';
 
 const Header: React.FC = () => {
   const [drawerOpen, setDrawerOpen] = useState(false);
@@ -30,22 +33,45 @@ const Header: React.FC = () => {
 
   const { stakeAddress, isConnected, disconnect, enabledWallet } = useCardano();
   const [openAuthDialog, setOpenAuthDialog] = useState<boolean>(false);
-
-  const notify = (message: string) => toast(message);
+  const [toastMessage, setToastMessage] = useState('');
+  const [toastIsError, setToastIsError] = useState(false);
+  const [toastOpen, setToastOpen] = useState(false);
 
   const handleCloseAuthDialog = () => {
     setOpenAuthDialog(false);
   };
 
+  const showToast = (message: string, error?: boolean) => {
+    setToastIsError(!!error);
+    setToastOpen(true);
+    setToastMessage(message);
+  };
+
   const onConnectWallet = () => {
     setOpenAuthDialog(false);
-    notify('Wallet Connected!');
+    showToast('Wallet connected successfully');
+  };
+  const onConnectWalletError = () => {
+    setOpenAuthDialog(false);
+    showToast('Unable to connect wallet. Please try again', true);
+  };
+
+  const onDisconnectWallet = () => {
+    disconnect();
+    showToast('Wallet disconnected successfully');
   };
 
   const handleConnectWallet = () => {
-      if (!isConnected){
-          setOpenAuthDialog(true)
-      }
+    if (!isConnected) {
+      setOpenAuthDialog(true);
+    }
+  };
+
+  const handleToastClose = (event?: Event | React.SyntheticEvent<any, Event>, reason?: string) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+    setToastOpen(false);
   };
 
   const drawerItems = (
@@ -157,25 +183,33 @@ const Header: React.FC = () => {
                     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>
-                      </>}
+                    {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()}
+                        onClick={onDisconnectWallet}
                       >
                         Disconnect wallet
                       </Button>
@@ -202,12 +236,37 @@ const Header: React.FC = () => {
       <ConnectWalletModal
         openStatus={openAuthDialog}
         onClose={handleCloseAuthDialog}
+        onConnectError={onConnectWalletError}
         name="connect-wallet-list"
         id="connect-wallet-list"
         title="Connect wallet"
         description="In order to vote, first you will need to connect your wallet."
         onConnectWallet={onConnectWallet}
       />
+
+      <Snackbar
+        className={`header-toast ${toastIsError ? 'header-toast-error' : ''}`}
+        open={toastOpen}
+        autoHideDuration={3000}
+        onClose={handleToastClose}
+        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+        message={<span style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            {toastIsError ? <DoNotDisturbAltIcon/>: <CheckCircleOutlineIcon />} {toastMessage}
+      </span>}
+        action={
+          <>
+            <div style={{ background: 'lightgray', width: '1px', height: '24px', marginRight: '8px' }}></div>
+            <IconButton
+              size="small"
+              aria-label="close"
+              color="inherit"
+              onClick={handleToastClose}
+            >
+              <CloseIcon fontSize="small" />
+            </IconButton>
+          </>
+        }
+      />
     </>
   );
 };

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