Merge pull request #186 from mintlayer/dev

Dev-12-09-2024

package.json

@@ -1,6 +1,6 @@
 {
   "name": "browser-extension",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "private": true,
   "dependencies": {
     "@mintlayer/entropy-generator": "^1.0.4",

public/manifestDefault.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Mojito - A Mintlayer Wallet",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "short_name": "Mojito",
   "description": "Mojito is a non-custodial decentralized crypto wallet that lets you send and receive BTC and ML from any other address.",
   "homepage_url": "https://www.mintlayer.org/",

public/manifestFirefox.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Mojito - A Mintlayer Wallet",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Mojito is a non-custodial decentralized crypto wallet that lets you send and receive BTC and ML from any other address.",
   "homepage_url": "https://www.mintlayer.org/",
   "icons": {

src/assets/styles/index.css

@@ -22,6 +22,7 @@ body {
 
 .App {
   position: relative;
+  min-height: 600px;
   padding: 2rem 2.875rem;
 }
 

src/components/basic/Button/Button.js

@@ -12,6 +12,7 @@ const Button = ({
   extraStyleClasses = [],
   disabled = false,
   buttonType = 'button',
+  dataTestId = 'button',
   onMouseEnter,
   onMouseLeave,
 }) => {
@@ -31,7 +32,7 @@ const Button = ({
       <button
         className={styleClasses}
         onClick={onClickHandle}
-        data-testid="button"
+        data-testid={dataTestId}
         disabled={disabled}
         type={buttonType}
         onMouseEnter={onMouseEnter}

src/components/basic/Logo/Logo.js

@@ -4,7 +4,7 @@ import LogoIcon from '@Assets/images/logo.svg'
 import { AppInfo } from '@Constants'
 import './Logo.css'
 
-const Logo = ({ unlocked }) => {
+const Logo = () => {
   const { networkType } = useContext(SettingsContext)
 
   return (
@@ -19,7 +19,7 @@ const Logo = ({ unlocked }) => {
         data-testid="logo-name"
       >
         Moji
-        {networkType === AppInfo.NETWORK_TYPES.TESTNET && unlocked ? (
+        {networkType === AppInfo.NETWORK_TYPES.TESTNET ? (
           <span
             className="testnetMark"
             data-testid="testnet-mark"
@@ -31,7 +31,7 @@ const Logo = ({ unlocked }) => {
         )}
         o
       </h1>
-      {networkType === AppInfo.NETWORK_TYPES.TESTNET && unlocked && (
+      {networkType === AppInfo.NETWORK_TYPES.TESTNET && (
         <div
           className="testnetMessage"
           data-testid="testnet-message"

src/components/basic/Toggle/Toggle.js

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import './Toggle.css'
 
-const Toggle = ({ label, name = 'toggleInput', toggled, onClick }) => {
+const Toggle = ({ label, name = 'toggleInput', toggled = false, onClick }) => {
   const [isToggled, toggle] = useState(toggled)
 
   const callback = () => {

src/components/composed/Balance/Balance.test.js

@@ -1,12 +1,14 @@
 import { render, screen } from '@testing-library/react'
 import Balance from './Balance'
 import { SettingsProvider, MintlayerContext } from '@Contexts'
+import { BrowserRouter as Router } from 'react-router-dom'
 
 const BALANCE_SAMPLE = 1
 const EXCHANGE_RATE_SAMPLE = 25000
 
 test('Render account balance with ML', () => {
   render(
+    <Router>
     <SettingsProvider>
       <MintlayerContext.Provider
         value={{ balanceLoading: false, tokenBalances: [] }}
@@ -19,6 +21,7 @@ test('Render account balance with ML', () => {
       </MintlayerContext.Provider>
       ,
     </SettingsProvider>,
+    </Router>
   )
   const currantBalanceComponent = screen.getByTestId('current-balance')
   const balanceParagraphs = screen.getAllByTestId('balance-paragraph')
@@ -34,6 +37,7 @@ test('Render account balance with ML', () => {
 
 test('Render account balance with BTC', () => {
   render(
+    <Router>
     <SettingsProvider>
       <MintlayerContext.Provider
         value={{ balanceLoading: false, tokenBalances: [] }}
@@ -46,6 +50,7 @@ test('Render account balance with BTC', () => {
       </MintlayerContext.Provider>
       ,
     </SettingsProvider>,
+    </Router>
   )
   const currantBalanceComponent = screen.getByTestId('current-balance')
   const balanceParagraphs = screen.getAllByTestId('balance-paragraph')
@@ -61,6 +66,7 @@ test('Render account balance with BTC', () => {
 
 test('renders balance with zero value when networkType is testnet', () => {
   render(
+    <Router>
     <SettingsProvider value={{ networkType: 'testnet' }}>
       <MintlayerContext.Provider
         value={{ balanceLoading: false, tokenBalances: [] }}
@@ -73,6 +79,7 @@ test('renders balance with zero value when networkType is testnet', () => {
       </MintlayerContext.Provider>
       ,
     </SettingsProvider>,
+    </Router>
   )
 
   const currantBalanceComponent = screen.getByTestId('current-balance')

src/components/composed/Header/Header.css

@@ -26,6 +26,16 @@ header {
   right: 0;
 }
 
+.header-menu-button {
+  height: 40px;
+  width: 40px;
+  padding: 0.2rem;
+  /* position: absolute; */
+  top: 0.5rem;
+  right: 45px;
+  outline: none;
+}
+
 .settings {
   height: 40px;
   width: 40px;
@@ -47,7 +57,8 @@ header {
 }
 
 .logout svg,
-.settings svg {
+.settings svg,
+.menu svg {
   width: 100%;
   height: 100%;
 }

src/components/composed/Header/Header.js

@@ -3,23 +3,23 @@ import React, { useContext, useEffect, useState } from 'react'
 import { useNavigate, useLocation } from 'react-router-dom'
 
 import { ReactComponent as BackImg } from '@Assets/images/back-button.svg'
-import { ReactComponent as LogoutImg } from '@Assets/images/logout.svg'
-import { ReactComponent as ExpandImg } from '@Assets/images/icon-expand.svg'
-import { ReactComponent as SettingsImg } from '@Assets/images/settings.svg'
+import { ReactComponent as MenuImg } from '@Assets/images/icon-hamburger.svg'
 
-import { Button, Logo, Tooltip } from '@BasicComponents'
-import { UpdateButton } from '@ComposedComponents'
+import { Button, Logo } from '@BasicComponents'
+import { UpdateButton, SliderMenu, Navigation } from '@ComposedComponents'
 import { AccountContext } from '@Contexts'
 
 import './Header.css'
 
 const Header = ({ customBackAction }) => {
   const [unlocked, setUnlocked] = useState(false)
-  const [tooltipVisible, setTooltipVisible] = useState(false)
-  const tooltipMessage = 'Expand view'
   const navigate = useNavigate()
   const location = useLocation()
-  const { isAccountUnlocked, logout, isExtended } = useContext(AccountContext)
+  const {
+    isAccountUnlocked,
+    sliderMenuOpen,
+    setSliderMenuOpen,
+  } = useContext(AccountContext)
 
   const coinType = location.pathname.includes('/wallet/')
     ? location.pathname.split('/wallet/')[1].split('/')[0]
@@ -60,27 +60,8 @@ const Header = ({ customBackAction }) => {
     return customBackAction ? customBackAction() : navigate(-1)
   }
 
-  const logoutHandle = () => {
-    logout()
-    navigate('/')
-  }
-
-  const goSettings = () => {
-    navigate('/settings')
-  }
-
-  const expandHandler = () => {
-    window.open(
-      typeof browser !== 'undefined'
-        ? // eslint-disable-next-line no-undef
-          browser.runtime.getURL('popup.html')
-        : chrome.runtime.getURL('popup.html'),
-      '_blank',
-    )
-  }
-
-  const toggleTooltip = () => {
-    setTooltipVisible(!tooltipVisible)
+  const toggleSliderMenu = () => {
+    setSliderMenuOpen(!sliderMenuOpen)
   }
 
   return (
@@ -95,67 +76,23 @@ const Header = ({ customBackAction }) => {
         </Button>
       </div>
 
-      {!unlocked && !isExtended && (
-        <div className="expand-wrapped">
-          <div className="tooltipWrapper">
-            <Button
-              alternate
-              extraStyleClasses={['settings']}
-              onClickHandle={expandHandler}
-              onMouseEnter={toggleTooltip}
-              onMouseLeave={toggleTooltip}
-            >
-              <ExpandImg />
-            </Button>
-            <Tooltip
-              message={tooltipMessage}
-              visible={tooltipVisible}
-              position="left"
-            />
-          </div>
-        </div>
-      )}
-
-      {unlocked && (
-        <>
-          <div className="expand-wrapped expand-wrapped-unlocked">
-            {!isExtended && (
-              <div className="tooltipWrapper">
-                <Button
-                  alternate
-                  extraStyleClasses={['expand']}
-                  onClickHandle={expandHandler}
-                  onMouseEnter={toggleTooltip}
-                  onMouseLeave={toggleTooltip}
-                >
-                  <ExpandImg />
-                </Button>
-                <Tooltip
-                  message={tooltipMessage}
-                  visible={tooltipVisible}
-                  position="left"
-                />
-              </div>
-            )}
+          <div className="expand-wrapped">
             <Button
               alternate
-              extraStyleClasses={['settings']}
-              onClickHandle={goSettings}
+              extraStyleClasses={['header-menu-button']}
+              onClickHandle={toggleSliderMenu}
             >
-              <SettingsImg />
+              <MenuImg />
             </Button>
           </div>
-          <Button
-            alternate
-            extraStyleClasses={['logout']}
-            onClickHandle={logoutHandle}
-          >
-            <LogoutImg />
-          </Button>
-        </>
-      )}
-      <Logo unlocked={unlocked} />
+      <Logo />
       {unlocked && <UpdateButton />}
+      <SliderMenu
+        isOpen={sliderMenuOpen}
+        onClose={toggleSliderMenu}
+      >
+        <Navigation />
+      </SliderMenu>
     </header>
   )
 }