diff --git a/ui/summit-2023/package.json b/ui/summit-2023/package.json index 7b2cb9c1d..4eb336280 100644 --- 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 index 2bef83934..5ff4a7747 100644 --- 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) => { connect(walletName, onConnectWallet)} + onClick={() => connect(walletName, onConnectWallet, onConnectError)} > { const [drawerOpen, setDrawerOpen] = useState(false); @@ -30,22 +33,45 @@ const Header: React.FC = () => { const { stakeAddress, isConnected, disconnect, enabledWallet } = useCardano(); const [openAuthDialog, setOpenAuthDialog] = useState(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, reason?: string) => { + if (reason === 'clickaway') { + return; + } + setToastOpen(false); }; const drawerItems = ( @@ -157,25 +183,33 @@ const Header: React.FC = () => { color="inherit" onClick={() => handleConnectWallet()} > - {isConnected && enabledWallet ? : } - {isConnected ? <> - {stakeAddress ? addressSlice(stakeAddress, 5) : null} -
- -
- : <> - {i18n.t('header.connectWalletButton')} - } + {isConnected && enabledWallet ? ( + + ) : ( + + )} + {isConnected ? ( + <> + {stakeAddress ? addressSlice(stakeAddress, 5) : null} +
+ +
+ + ) : ( + <> + {i18n.t('header.connectWalletButton')} + + )} {isConnected && (
@@ -202,12 +236,37 @@ const Header: React.FC = () => { + + + {toastIsError ? : } {toastMessage} + } + action={ + <> +
+ + + + + } + /> ); }; diff --git a/ui/summit-2023/src/utils/utils.ts b/ui/summit-2023/src/utils/utils.ts index 42d896376..7fb7d0545 100644 --- 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 -} \ No newline at end of file +export { addressSlice, walletIcon };