Merge pull request #136 from mintlayer/dev

Dev-02-04-2024-v-1-2-2
mintlayer · Apr 2, 2024 · fe5ee52 · fe5ee52
2 parents 81f85b5 + 56d49eb
commit fe5ee52
Show file tree

Hide file tree

Showing 60 changed files with 634 additions and 270 deletions.
diff --git a/cypress/e2e/create-backup-db.cy.js b/cypress/e2e/create-backup-db.cy.js
@@ -17,7 +17,7 @@ describe('stuff IndexedDB', () => {
       return a.then(() =>
         cy.wrap(null).then(() => {
           cy.restoreWallet(x)
-          cy.contains('button', 'Create Wallet').click()
+          cy.contains('button', 'Add Wallet').click()
         }),
       )
     }, cy.wrap(null))

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "browser-extension",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "private": true,
   "dependencies": {
     "@mintlayer/entropy-generator": "^1.0.2",

diff --git a/packing.sh b/packing.sh
@@ -10,6 +10,9 @@ cd build
 CSPHEADER="<meta http-equiv=\"Content-Security-Policy\" content=\"default-src *;img-src * 'self' data: https:;style-src-elem 'self' https:\/\/fonts.googleapis.com;font-src https:\/\/fonts.gstatic.com;\"\/>"
 sed -i "s/<meta name=\"CSP\"\/>/$CSPHEADER/g" index.html
 
+# Copying index.html to popup.html to have different entry points for popup and extended view
+cp index.html popup.html
+
 # creates zip for Firefox
 mv manifestFirefox.json manifest.json
 zip -r ../extFF.zip ./*

diff --git a/public/background-script.js b/public/background-script.js
@@ -27,7 +27,7 @@ browser.runtime.onConnect.addListener((port) => {
 
   async function handleConnect(request, port) {
     if (connectWindowId === null) {
-      await createPopup('index.html', async (win) => {
+      await createPopup('popup.html', async (win) => {
         connectWindowId = win.id
         setTimeout(async () => {
           const response = await browser.runtime.sendMessage({
@@ -44,7 +44,7 @@ browser.runtime.onConnect.addListener((port) => {
   async function handleDelegate(request) {
     if (popupWindowId === null && !isPopupOpening) {
       isPopupOpening = true
-      await createPopup('index.html', async (win) => {
+      await createPopup('popup.html', async (win) => {
         popupWindowId = win.id
         isPopupOpening = false
         setTimeout(async () => {
@@ -61,7 +61,7 @@ browser.runtime.onConnect.addListener((port) => {
 
   async function handleStake(request) {
     if (popupWindowId === null) {
-      await createPopup('index.html', async (win) => {
+      await createPopup('popup.html', async (win) => {
         popupWindowId = win.id
         setTimeout(async () => {
           await browser.runtime.sendMessage({

diff --git a/public/background.js b/public/background.js
@@ -20,7 +20,7 @@ chrome.runtime.onMessageExternal.addListener(function (
           popupWindowId = true
           chrome.windows.create(
             {
-              url: chrome.runtime.getURL('index.html'),
+              url: chrome.runtime.getURL('popup.html'),
               type: 'popup',
               width: 800,
               height: 600,
@@ -52,7 +52,7 @@ chrome.runtime.onMessageExternal.addListener(function (
           popupWindowId = true
           chrome.windows.create(
             {
-              url: chrome.runtime.getURL('index.html'),
+              url: chrome.runtime.getURL('popup.html'),
               type: 'popup',
               width: 800,
               height: 600,
@@ -80,7 +80,7 @@ chrome.runtime.onMessageExternal.addListener(function (
           popupWindowId = true
           chrome.windows.create(
             {
-              url: chrome.runtime.getURL('index.html'),
+              url: chrome.runtime.getURL('popup.html'),
               type: 'popup',
               width: 800,
               height: 630,

diff --git a/public/index.css b/public/index.css
@@ -0,0 +1,7 @@
+@media screen and (min-width: 801px) {
+  html {
+    display: flex;
+    justify-content: center;
+    padding: 30px 0 0 0;
+  }
+}
diff --git a/public/index.html b/public/index.html
@@ -3,6 +3,10 @@
   <head>
     <meta name="CSP" />
     <meta charset="utf-8" />
+    <link
+      rel="stylesheet"
+      href="index.css"
+    />
     <link
       rel="icon"
       href="%PUBLIC_URL%/favicon.ico"

diff --git a/public/manifestDefault.json b/public/manifestDefault.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Mojito - A Mintlayer Wallet",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "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/",

diff --git a/public/manifestFirefox.json b/public/manifestFirefox.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Mojito - A Mintlayer Wallet",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "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": {

diff --git a/src/assets/images/icon-expand.svg b/src/assets/images/icon-expand.svg
diff --git a/src/assets/images/logo.svg b/src/assets/images/logo.svg
diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css
@@ -37,7 +37,7 @@ body {
 .title-create {
   font-size: 24px;
   font-weight: bold;
-  margin: 8px 0 62px 0;
+  margin: 4rem 0 4rem 0;
 }
 
 .footnote-wrapper {

diff --git a/src/components/basic/Button/Button.js b/src/components/basic/Button/Button.js
@@ -12,6 +12,8 @@ const Button = ({
   extraStyleClasses = [],
   disabled = false,
   buttonType = 'button',
+  onMouseEnter,
+  onMouseLeave,
 }) => {
   const classesList = ['btn', ...extraStyleClasses]
   alternate && classesList.push('alternate')
@@ -32,6 +34,8 @@ const Button = ({
         data-testid="button"
         disabled={disabled}
         type={buttonType}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
       >
         {children}
       </button>

diff --git a/src/components/basic/Input/Input.css b/src/components/basic/Input/Input.css
@@ -16,6 +16,7 @@
 
 .input::placeholder {
   color: rgb(var(--color-dark-gray));
+  opacity: 0.2;
   font-size: 1.5rem;
 }
 

diff --git a/src/components/basic/Logo/Logo.css b/src/components/basic/Logo/Logo.css
@@ -8,7 +8,7 @@
 }
 
 .logoContainer .logo {
-  width: 64px;
+  width: 60px;
   margin: 0;
 }
 

diff --git a/src/components/basic/Logo/Logo.js b/src/components/basic/Logo/Logo.js
@@ -1,6 +1,6 @@
 import { useState, useEffect, useContext } from 'react'
 import { SettingsContext, AccountContext } from '@Contexts'
-import LogoIcon from '@Assets/images/logo96.png'
+import LogoIcon from '@Assets/images/logo.svg'
 import { AppInfo } from '@Constants'
 import './Logo.css'
 

diff --git a/src/components/basic/Tooltip/Tooltip.css b/src/components/basic/Tooltip/Tooltip.css
@@ -1,20 +1,70 @@
 .tooltip {
   position: absolute;
-  top: 0;
-  left: 34px;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 110px;
+  width: max-content;
+  max-width: 110px;
+  max-height: fit-content;
   padding: 4px 8px;
   background: rgb(var(--color-green));
   border-radius: 5px;
   color: rgb(var(--color-white));
   font-size: 0.8rem;
-  opacity: 0;
+  transition: opacity 0.7s ease;
 }
 
-.tooltip.visible {
-  opacity: 1;
-  transition: opacity 0.7s ease;
+.top {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.bottom {
+  top: 110%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.left {
+  top: 50%;
+  right: 110%;
+  transform: translateY(-50%);
+}
+
+.right {
+  top: 50%;
+  left: 110%;
+  transform: translateY(-50%);
+}
+
+.topLeft {
+  bottom: 100%;
+  right: 100%;
+}
+
+.topRight {
+  bottom: 100%;
+  left: 100%;
+}
+
+.bottomLeft {
+  top: 110%;
+  right: 100%;
+}
+
+.bottomRight {
+  top: 110%;
+  left: 100%;
+}
+
+.hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  border: 0;
+  padding: 0;
+  clip: rect(0 0 0 0);
+  overflow: hidden;
 }
diff --git a/src/components/basic/Tooltip/Tooltip.js b/src/components/basic/Tooltip/Tooltip.js
@@ -1,9 +1,21 @@
 import './Tooltip.css'
 
-const Tooltip = ({ message, visible }) => {
+const Tooltip = ({ message, visible, position }) => {
+  const orientation = [
+    'top',
+    'bottom',
+    'left',
+    'right',
+    'topLeft',
+    'topRight',
+    'bottomLeft',
+    'bottomRight',
+  ]
   return (
     <span
-      className={`tooltip ${visible && 'visible'}`}
+      className={`tooltip ${
+        orientation.includes(position) ? position : 'bottom'
+      } ${!visible && 'hidden'}`}
       data-testid="tooltip"
     >
       {message}

diff --git a/src/components/basic/Tooltip/Tooltip.test.js b/src/components/basic/Tooltip/Tooltip.test.js
@@ -2,31 +2,51 @@ import { render, screen } from '@testing-library/react'
 import Tooltip from './Tooltip'
 
 describe('Tooltip', () => {
-  it('renders correctly when visible', () => {
+  it('renders the tooltip message', () => {
     render(
       <Tooltip
-        message="Test tooltip"
+        message="Test message"
         visible={true}
+        position="top"
       />,
     )
+    const tooltipElement = screen.getByText(/Test message/i)
+    expect(tooltipElement).toBeInTheDocument()
+  })
 
+  it('applies the correct position class', () => {
+    render(
+      <Tooltip
+        message="Test message"
+        visible={true}
+        position="top"
+      />,
+    )
     const tooltipElement = screen.getByTestId('tooltip')
-    expect(tooltipElement).toHaveTextContent('Test tooltip')
-    expect(tooltipElement).toHaveClass('tooltip')
-    expect(tooltipElement).toHaveClass('visible')
+    expect(tooltipElement).toHaveClass('top')
   })
 
-  it('renders correctly when not visible', () => {
+  it('applies the hidden class when not visible', () => {
     render(
       <Tooltip
-        message="Test tooltip"
+        message="Test message"
         visible={false}
+        position="top"
       />,
     )
+    const tooltipElement = screen.getByTestId('tooltip')
+    expect(tooltipElement).toHaveClass('hidden')
+  })
 
+  it('defaults to the bottom position if an invalid position is provided', () => {
+    render(
+      <Tooltip
+        message="Test message"
+        visible={true}
+        position="invalid"
+      />,
+    )
     const tooltipElement = screen.getByTestId('tooltip')
-    expect(tooltipElement).toHaveTextContent('Test tooltip')
-    expect(tooltipElement).toHaveClass('tooltip')
-    expect(tooltipElement).not.toHaveClass('visible')
+    expect(tooltipElement).toHaveClass('bottom')
   })
 })
diff --git a/src/components/composed/AddWallet/AddWallet.js b/src/components/composed/AddWallet/AddWallet.js
@@ -28,7 +28,7 @@ const AddWallet = ({
   const getMnemonics = () =>
     wordsFields.reduce((acc, word) => `${acc} ${word.value}`, '').trim()
 
-  const submitButtonTitle = step === 3 ? 'Create Wallet' : 'Next'
+  const submitButtonTitle = step === 3 ? 'Add Wallet' : 'Next'
 
   const changePassHandle = (value) => {
     setPass(value)

diff --git a/src/components/composed/AddWallet/AddWallet.test.js b/src/components/composed/AddWallet/AddWallet.test.js
@@ -102,7 +102,7 @@ describe('AddWallet', () => {
 
     const submitButton = screen.getByTestId('button')
     expect(submitButton).toBeInTheDocument()
-    expect(submitButton).toHaveTextContent('Create Wallet')
+    expect(submitButton).toHaveTextContent('Add Wallet')
   })
 
   test('changes step on submit button click', () => {