A-1207660367546313: backup and restoring (#183)

* feat: add wallet backup to JSON

* feat: add restoring wallet from JSON

* feat: improve validation

* test: add new and fix existings tests

* chore: move saving logig from db to account

* fix

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/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/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/Entropy/DrawingBoard.test.js

@@ -7,9 +7,6 @@ import 'konva/lib/shapes/Line'
 const setLines = jest.fn()
 const setEntropy = jest.fn()
 
-const scaleMock = jest.fn()
-
-
 test('Render Drawing Board', () => {
   render(
     <AccountProvider>
@@ -32,7 +29,7 @@ test('Render Drawing Board', () => {
 
 test('allows drawing on the canvas', () => {
   render(
-    <AccountProvider value={{ lines: [], setLines, scale: scaleMock }}>
+    <AccountProvider value={{ lines: [], setLines }}>
       <DrawingBoard />
     </AccountProvider>,
   )

src/components/composed/Header/Header.test.js

@@ -8,13 +8,53 @@ import {
   useLocation,
 } from 'react-router-dom'
 
-import { AccountProvider, SettingsProvider, MintlayerProvider, BitcoinProvider } from '@Contexts'
+import {
+  AccountProvider,
+  SettingsProvider,
+  MintlayerProvider,
+  BitcoinProvider,
+} from '@Contexts'
 import Header from './Header'
+import { expect } from '@playwright/test'
+
+global.AbortSignal = global.AbortSignal || {}
+
+global.AbortSignal.timeout = jest.fn((timeout) => {
+  const controller = new AbortController()
+  setTimeout(() => controller.abort(), timeout)
+  return controller.signal
+})
 
 const toggleNetworkType = jest.fn()
 
-const setup = async (location) => {
-  const value = { isAccountUnlocked: () => true, logout: jest.fn(), addresses: {mlMainnetAddresses: ['address'], mlTestnetAddresses: ['address']}}
+const setup = async (location, mode = 'default') => {
+  const valueDefaul = {
+    isAccountUnlocked: () => true,
+    logout: jest.fn(),
+    setSliderMenuOpen: jest.fn(),
+    addresses: {
+      mlMainnetAddresses: ['address'],
+      mlTestnetAddresses: ['address'],
+    },
+  }
+
+  const valueOpenMenu = {
+    isAccountUnlocked: () => true,
+    logout: jest.fn(),
+    setSliderMenuOpen: jest.fn(),
+    sliderMenuOpen: true,
+    addresses: {
+      mlMainnetAddresses: ['address'],
+      mlTestnetAddresses: ['address'],
+    },
+  }
+
+  const mintlayerProviderValue = {
+    currentMlAddresses: {
+      mlReceivingAddresses: ['address'],
+      mlChangeAddresses: ['address'],
+    },
+  }
 
   const PreviousPage = () => {
     location = useLocation()
@@ -38,24 +78,26 @@ const setup = async (location) => {
     )
   }
 
+  const value = mode === 'default' ? valueDefaul : valueOpenMenu
+
   await render(
     <AccountProvider value={value}>
       <SettingsProvider value={{ networkType: 'testnet', toggleNetworkType }}>
-        <MintlayerProvider>
+        <MintlayerProvider value={mintlayerProviderValue}>
           <BitcoinProvider>
-          <MemoryRouter initialEntries={['/']}>
-            <Routes>
-              <Route
-                path="/next-page"
-                element={<NextPage />}
-              />
-              <Route
-                exact
-                path="/"
-                element={<PreviousPage />}
-              />
-            </Routes>
-          </MemoryRouter>
+            <MemoryRouter initialEntries={['/']}>
+              <Routes>
+                <Route
+                  path="/next-page"
+                  element={<NextPage />}
+                />
+                <Route
+                  exact
+                  path="/"
+                  element={<PreviousPage />}
+                />
+              </Routes>
+            </MemoryRouter>
           </BitcoinProvider>
         </MintlayerProvider>
       </SettingsProvider>
@@ -80,6 +122,7 @@ test('Header component, renders a page before, navigate to Header and go back',
 
   const nextPageComponent = screen.getByTestId('next-page')
   const buttons = screen.getAllByTestId('button')
+  expect(nextPageComponent).toBeInTheDocument()
 
   expect(nextPageComponent).toBeInTheDocument()
 
@@ -91,8 +134,8 @@ test('Header component, renders a page before, navigate to Header and go back',
   expect(prevPageComponent).toBeInTheDocument()
 })
 
-test('Header component, renders a page before, navigate to Header and logout', async () => {
-  const { value } = await setup()
+test('Header component, navigate to Header and open menu', async () => {
+  const { value } = await setup(false, 'open')
 
   const nextPageLinkComponent = screen.getByTestId('next-page-link')
 
@@ -109,13 +152,29 @@ test('Header component, renders a page before, navigate to Header and logout', a
   expect(nextPageComponent).toBeInTheDocument()
 
   act(() => {
-    buttons[3].click()
+    buttons[1].click()
   })
 
   await waitFor(async () => {
-    expect(value.logout).toBeCalled()
+    expect(value.setSliderMenuOpen).toBeCalled()
   })
 
-  const prevPageComponent = screen.getByTestId('prev-page')
-  expect(prevPageComponent).toBeInTheDocument()
+  const backdrop = screen.getByTestId('backdrop')
+  const sliderMenu = screen.getByTestId('slider-menu')
+
+  expect(backdrop).toBeInTheDocument()
+  expect(sliderMenu).toBeInTheDocument()
+
+  const logoutButton = screen.getByTestId('navigation-logout')
+  const expandViewButton = screen.getByTestId('navigation-expand-view')
+  expect(logoutButton).toBeInTheDocument()
+  expect(expandViewButton).toBeInTheDocument()
+
+  act(() => {
+    logoutButton.click()
+  })
+
+  await waitFor(async () => {
+    expect(value.logout).toBeCalled()
+  })
 })

src/components/composed/Navigation/Navigation.js

@@ -9,7 +9,6 @@ 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 { AccountContext } from '@Contexts'
 
 import './Navigation.css'
@@ -32,9 +31,9 @@ const Navigation = ({ customNavigation }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [location.pathname])
 
-   const toggleSliderMenu = () => {
-     setSliderMenuOpen(!sliderMenuOpen)
-   }
+  const toggleSliderMenu = () => {
+    setSliderMenuOpen(!sliderMenuOpen)
+  }
 
   const goSettings = () => {
     navigate('/settings')
@@ -108,7 +107,11 @@ const Navigation = ({ customNavigation }) => {
     },
   ]
 
-  const navList = customNavigation ? customNavigation : unlocked ? loggedNavigationList : navigationList
+  const navList = customNavigation
+    ? customNavigation
+    : unlocked
+      ? loggedNavigationList
+      : navigationList
 
   return (
     <>
@@ -129,6 +132,7 @@ const Navigation = ({ customNavigation }) => {
           <li
             className="bottom-menu-item"
             onClick={expandHandler}
+            data-testid="navigation-expand-view"
           >
             <ExpandImg /> Expand view
           </li>
@@ -137,12 +141,13 @@ const Navigation = ({ customNavigation }) => {
           <li
             className="bottom-menu-item"
             onClick={logoutHandler}
+            data-testid="navigation-logout"
           >
             <LogoutImg />
             Logout
           </li>
         )}
-        <span className='slider-version'>v1.2.9</span>
+        <span className="slider-version">v1.3.1</span>
       </ul>
     </>
   )