Merge pull request #189 from mintlayer/dev

* feat: add nested navigation and wallets menu

* feat: add Textarea basic component, replace textarea with new component on Restore wallet

* feat: add new array helpers

* feat: add Sign and Verify message components

* feat: add Message page

* feat: update MIntlayer lib with new messages functions update Textarea

* chore: remove console.log

* feat: add message verification

* feat: update wasm library (#187)

* feat: replace signing/verify function with verifyChallenge and signChallenge

* feat: remove steps from signin

* feat: remove steps from verify

---------

Co-authored-by: Sergey <[email protected]>

src/components/composed/RestoreSeedField/RestoreSeedField.css → src/components/basic/Textarea/Textarea.css

@@ -1,12 +1,13 @@
-.seed-textarea {
+.textarea {
+  width: 100%;
   padding: 15px;
   resize: none;
 }
 
-.seed-textarea.seed-invalid {
+.textaria-invalid {
   border-bottom: 2px solid rgb(var(--color-red));
 }
 
-.seed-textarea.seed-valid {
+.textaria-valid {
   border-bottom: 2px solid rgb(var(--color-green));
 }

src/components/basic/Textarea/Textarea.js

@@ -0,0 +1,49 @@
+import React, { useEffect, useState } from 'react'
+import './Textarea.css'
+
+const Textarea = ({
+  value,
+  onChange,
+  extraClasses,
+  id,
+  size,
+  validity = true,
+  disabled,
+}) => {
+  const [textareaVakue, setTextareaValue] = useState(value ? value : '')
+
+  useEffect(() => {
+    setTextareaValue(value)
+  }, [value])
+
+  const getExtraClasses = () => {
+    if (value && validity) {
+      return 'textaria-valid'
+    } else if (value && !validity) {
+      return 'textaria-invalid'
+    } else {
+      return ''
+    }
+  }
+  const onChangeHandler = ({ target }) => {
+    onChange && onChange({ target })
+    setTextareaValue(target.value)
+    getExtraClasses()
+  }
+
+  return (
+    <textarea
+      data-testid={id}
+      value={textareaVakue}
+      onChange={onChangeHandler}
+      className={`textarea ${getExtraClasses()} ${extraClasses}`}
+      name={id}
+      id={id}
+      cols={size.cols}
+      rows={size.rows}
+      readOnly={disabled}
+    />
+  )
+}
+
+export default Textarea

src/components/basic/index.js

@@ -12,6 +12,7 @@ import Logo from './Logo/Logo'
 import LogoRound from './LogoRound/LogoRound'
 import SkeletonLoader from './SkeletonLoader/SkeletonLoader'
 import Tooltip from './Tooltip/Tooltip'
+import Textarea from './Textarea/Textarea'
 
 export {
   Arc,
@@ -28,4 +29,5 @@ export {
   LogoRound,
   SkeletonLoader,
   Tooltip,
+  Textarea,
 }

src/components/composed/Navigation/Navigation.css

@@ -4,19 +4,40 @@
   padding: 10px 5px;
   border-radius: 4px;
   cursor: pointer;
+  transition: all 0.2s ease;
 }
 
-.bottom-menu-item:last-child {
+.navigation-item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.bottom-menu-item:last-child,
+.navigation-item:last-child {
   border-bottom: none;
 }
 
-.bottom-menu-item:hover {
-   color: rgb(var(--color-green), var(--nearly-opaque-alpha));
-   background-color: rgb(var(--color-extra-light-gray));
+.label-wrapper {
+  display: flex;
+  align-items: center;
+  padding: 10px 5px;
+  border-radius: 4px;
 }
 
-.bottom-menu-item svg {
-  width: 20px;
+.bottom-menu-item:hover,
+.navigation-item:hover {
+  color: rgb(var(--color-green), var(--nearly-opaque-alpha));
+  background-color: rgb(var(--color-extra-light-gray));
+}
+
+.bottom-menu-item svg,
+.navigation-item svg {
+  width: 21px;
   height: 20px;
   margin-right: 10px;
 }
@@ -25,5 +46,28 @@
   display: flex;
   margin-top: 5px;
   padding-left: 5px;
-  font-size: 0.9rem
+  font-size: 0.9rem;
+}
+
+.navigation-item-open {
+  color: rgb(var(--color-green), var(--nearly-opaque-alpha));
+  background-color: rgb(var(--color-extra-light-gray));
+  padding: 5px;
+  transition: all 0.2s ease;
+}
+
+.navigation-item .navigation-triangle {
+  position: absolute;
+  top: 16px;
+  right: 10px;
+  width: 8px;
+  height: 8px;
+  margin: 0;
+  transform: rotate(180deg);
+  transition: all 0.2s ease;
+}
+
+.navigation-item .navigation-triangle-open {
+  transform: none;
+  top: 21px;
 }

src/components/composed/Navigation/Navigation.js

@@ -8,13 +8,20 @@ import { ReactComponent as SettingsImg } from '@Assets/images/settings.svg'
 import { ReactComponent as LoginImg } from '@Assets/images/icon-login.svg'
 import { ReactComponent as AddWalletImg } from '@Assets/images/icon-add-wallet.svg'
 import { ReactComponent as HomeImg } from '@Assets/images/icon-home.svg'
+import { ReactComponent as WalletIcon } from '@Assets/images/icon-wallet.svg'
+import { ReactComponent as TriangleIcon } from '@Assets/images/icon-triangle.svg'
 
 import { AccountContext } from '@Contexts'
+import { AppInfo } from '@Constants'
+
+import NestedNavigation from './NestedNavigation'
 
 import './Navigation.css'
 
 const Navigation = ({ customNavigation }) => {
   const [unlocked, setUnlocked] = useState(false)
+  const [navigationItemID, setNavigationItemID] = useState(null)
+  const [nestedItemID, setNestedItemID] = useState(null)
   const navigate = useNavigate()
   const location = useLocation()
   const {
@@ -35,24 +42,24 @@ const Navigation = ({ customNavigation }) => {
     setSliderMenuOpen(!sliderMenuOpen)
   }
 
-  const goSettings = () => {
-    navigate('/settings')
-    toggleSliderMenu()
-  }
-
-  const goDashboard = () => {
-    navigate('/dashboard')
-    toggleSliderMenu()
-  }
-
-  const goLogin = () => {
-    navigate('/')
-    toggleSliderMenu()
+  const onNavigationItemClick = (item) => {
+    if (item.type !== 'menu') {
+      navigate(item.link)
+      toggleSliderMenu()
+    } else {
+      setNavigationItemID(navigationItemID === item.id ? null : item.id)
+    }
+    return
   }
 
-  const goCreateAccount = () => {
-    navigate('/create-restore')
-    toggleSliderMenu()
+  const onNestedItemClick = (item) => {
+    if (item.type !== 'menu') {
+      navigate(item.link)
+      toggleSliderMenu()
+    } else {
+      setNestedItemID(nestedItemID === item.id ? null : item.id)
+    }
+    return
   }
 
   const expandHandler = () => {
@@ -76,13 +83,20 @@ const Navigation = ({ customNavigation }) => {
       id: 1,
       label: 'Dashboard',
       icon: <HomeImg />,
-      onClick: goDashboard,
+      link: '/dashboard',
     },
     {
       id: 2,
+      label: 'Wallets',
+      icon: <WalletIcon />,
+      type: 'menu',
+      content: AppInfo.WALLETS_NAVIGATION,
+    },
+    {
+      id: 3,
       label: 'Settings',
       icon: <SettingsImg />,
-      onClick: goSettings,
+      link: '/settings',
     },
   ]
 
@@ -91,19 +105,22 @@ const Navigation = ({ customNavigation }) => {
       id: 1,
       label: 'Login',
       icon: <LoginImg />,
-      onClick: goLogin,
+      link: '/',
+      type: 'link',
     },
     {
       id: 2,
       label: 'Create/Restore Wallet',
       icon: <AddWalletImg />,
-      onClick: goCreateAccount,
+      link: '/create-restore',
+      type: 'link',
     },
     {
       id: 3,
       label: 'Settings',
       icon: <SettingsImg />,
-      onClick: goSettings,
+      link: '/settings',
+      type: 'link',
     },
   ]
 
@@ -119,11 +136,30 @@ const Navigation = ({ customNavigation }) => {
         {navList.map((item) => (
           <li
             key={item.id}
-            onClick={item.onClick}
-            className="bottom-menu-item"
+            className={`navigation-item ${navigationItemID === item.id && 'navigation-item-open'}`}
           >
-            {item.icon && item.icon}
-            {item.label}
+            <div
+              className="label-wrapper"
+              onClick={() => {
+                onNavigationItemClick(item)
+              }}
+            >
+              {item.icon && item.icon}
+              {item.label}
+            </div>
+
+            {item.type === 'menu' && navigationItemID === item.id && (
+              <NestedNavigation
+                item={item}
+                onNestedItemClick={onNestedItemClick}
+                nestedItemID={nestedItemID}
+              />
+            )}
+            {item.type === 'menu' && (
+              <TriangleIcon
+                className={`navigation-triangle ${navigationItemID === item.id && 'navigation-triangle-open'}`}
+              />
+            )}
           </li>
         ))}
       </ul>