feat: verify phone code and toast

cardano-foundation · Aug 28, 2023 · f84e02e · f84e02e
1 parent 4babd41
commit f84e02e
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 16 deletions.
diff --git a/ui/summit-2023/src/components/VerifyWallet/VerifyWallet.scss b/ui/summit-2023/src/components/VerifyWallet/VerifyWallet.scss
@@ -56,6 +56,7 @@
   text-transform: none;
 }
 
+.verify-number-button-continue.MuiButtonBase-root:hover,
 .verify-number-button-continue.MuiButtonBase-root {
   display: flex;
   width: 162px;
@@ -72,7 +73,7 @@
   line-height: normal;
   text-transform: none;
 }
-
+.verify-number-button-valid.MuiButtonBase-root:hover,
 .verify-number-button-valid.MuiButtonBase-root {
   background: var(--color-light-green) !important;
   color: var(--color-ultra-dark-blue) !important;
@@ -100,7 +101,18 @@
   font-size: 16px;
   font-style: normal;
   font-weight: 600 !important;
-  line-height: 22px; /* 137.5% */
+  line-height: 22px;
   text-decoration-line: underline;
   margin-top: 28px;
+}
+
+.verify-wallet-modal-description {
+  color: var(--color-medium-grey);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px;
+  span {
+    font-weight: 600 !important;
+  }
 }
diff --git a/ui/summit-2023/src/components/VerifyWallet/VerifyWallet.tsx b/ui/summit-2023/src/components/VerifyWallet/VerifyWallet.tsx
@@ -7,9 +7,7 @@ import {
     List,
     ListItem,
     ListItemAvatar,
-    Typography,
-    useMediaQuery,
-    useTheme
+    Typography
 } from '@mui/material';
 import CallIcon from '@mui/icons-material/Call';
 import { MuiTelInput, matchIsValidTel, MuiTelInputCountry } from 'mui-tel-input';
@@ -19,7 +17,12 @@ import discordLogo from '../../common/resources/images/discord-icon.svg';
 // TODO: env.
 const excludedCountries: MuiTelInputCountry[] | undefined = [];
 
-const VerifyWallet: React.FC = () => {
+type VerifyWalletProps = {
+    onVerify: () => void;
+};
+const VerifyWallet = (props:VerifyWalletProps) => {
+    const { onVerify } = props;
+
     const [verifyOption, setVerifyOption] = useState<string | undefined>(undefined);
     const [defaultCountryCode, setDefaultCountryCode] = useState<MuiTelInputCountry | undefined>('ES');
     const [phone, setPhone] = useState<string>('');
@@ -43,11 +46,28 @@ const VerifyWallet: React.FC = () => {
 
     const handleSendCode= () => {
         if (matchIsValidTel(phone) && checkImNotARobot){
-            // TODO
+            setPhoneCodeIsSent(true);
+            setCheckImNotARobot(false);
+        }
+    };
+
+    const reset = (timout?:boolean) => {
+        function clear() {
+            setVerifyOption(undefined);
+            setPhoneCodeIsSent(false);
+        }
+        if (timout) {
+            setTimeout(() => {
+                clear()
+            }, 2000);
+        } else {
+            clear();
         }
     };
-    const reset = () => {
-        setVerifyOption(undefined)
+
+    const handleVerifyPhoneCode= () => {
+        onVerify();
+        reset(true);
     };
 
     const renderSelectOption = () => {
@@ -98,6 +118,8 @@ const VerifyWallet: React.FC = () => {
         const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>, index: number) => {
             const value = event.target.value;
 
+            if (!(value && /^[0-9]$/.test(value)) && value !== '') return;
+
             const updatedCodes = [...codes];
             updatedCodes[index] = value;
             setCodes(updatedCodes);
@@ -113,13 +135,13 @@ const VerifyWallet: React.FC = () => {
         return (
             <>
                 <Typography
-                    className='connect-wallet-modal-description'
+                    className='verify-wallet-modal-description'
                     gutterBottom
                     style={{ wordWrap: 'break-word' }}
                 >
-                    Confirm the verification code that’s been sent to {phone}
+                    Confirm the verification code that’s been sent to <span>{phone}</span>
                 </Typography>
-                <div style={{ display: 'flex', justifyContent: 'center', gap: '8px' }}>
+                <div style={{ display: 'flex', justifyContent: 'center', gap: '8px', marginTop: '28px' }}>
                     {
                         [...Array(6)].map((_, index) => (
                             <input
@@ -158,9 +180,9 @@ const VerifyWallet: React.FC = () => {
                     </Grid>
                     <Grid item xs={6}>
                         <Button
-                            onClick={() => setPhoneCodeIsSent(true)}
+                            onClick={() => handleVerifyPhoneCode()}
                             disabled={codes.length < 6}
-                            className={`verify-number-button-continue ${codes.length < 6 ? 'verify-number-button-valid' : ''}`} fullWidth>
+                            className={`verify-number-button-continue ${codes.filter(code => code !== '').length === 6 ? 'verify-number-button-valid' : ''}`} fullWidth>
                             Verify
                         </Button>
                     </Grid>
@@ -209,7 +231,7 @@ const VerifyWallet: React.FC = () => {
                     </Grid>
                     <Grid item xs={6}>
                         <Button
-                            onClick={() => setPhoneCodeIsSent(true)}
+                            onClick={() => handleSendCode()}
                             disabled={!matchIsValidTel(phone) || !checkImNotARobot}
                             className={`verify-number-button-continue ${matchIsValidTel(phone) && checkImNotARobot ? 'verify-number-button-valid' : ''}`} fullWidth>
                             Send code

diff --git a/ui/summit-2023/src/components/common/Header/Header.tsx b/ui/summit-2023/src/components/common/Header/Header.tsx
@@ -78,6 +78,10 @@ const Header: React.FC = () => {
     const handleCloseVerify = () => {
         setVerifyModalIsOpen(false);
     };
+    const onVerify = () => {
+        showToast('Your wallet has been verified');
+        handleCloseVerify();
+    };
 
   const handleToastClose = (event?: Event | React.SyntheticEvent<any, Event>, reason?: string) => {
     if (reason === 'clickaway') {
@@ -273,7 +277,7 @@ const Header: React.FC = () => {
         onClose={handleCloseVerify}
         disableBackdropClick={true}
       >
-        <VerifyWallet />
+        <VerifyWallet onVerify={() => onVerify()} />
       </Modal>
       <Snackbar
         className={`header-toast ${toastIsError ? 'header-toast-error' : ''}`}