A-1216249512875644: Side panel

package.json

@@ -1,6 +1,6 @@
 {
   "name": "browser-extension",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "private": true,
   "dependencies": {
     "@bitcoinerlab/secp256k1": "^1.2.0",

public/background-script.js

@@ -3,6 +3,20 @@ let popupWindowId = null
 let connectWindowId = null
 let isPopupOpening = false
 
+// Firefox has no sidePanel API: open the sidebar when the toolbar icon is clicked
+if (
+  typeof browser !== 'undefined' &&
+  browser.action &&
+  browser.sidebarAction &&
+  browser.sidebarAction.open
+) {
+  browser.action.onClicked.addListener(() => {
+    browser.sidebarAction.open().catch((error) => {
+      console.error('[Mintlayer] sidebarAction.open error:', error)
+    })
+  })
+}
+
 browser.runtime.onConnect.addListener((port) => {
   port.onMessage.addListener((msg) => {
     if (msg && msg.myProperty && msg.myProperty.message) {

public/background.js

@@ -11,6 +11,15 @@
   let connectedSites = {}
   const pendingResponses = new Map()
 
+  // Open the wallet in the browser side panel when the toolbar icon is clicked
+  if (api.sidePanel && api.sidePanel.setPanelBehavior) {
+    api.sidePanel
+      .setPanelBehavior({ openPanelOnActionClick: true })
+      .catch((error) =>
+        console.error('[Mintlayer] setPanelBehavior error:', error),
+      )
+  }
+
   // Load connected sites from storage
   api.storage.local.get(['connectedSites'], (data) => {
     if (api.runtime.lastError) {

public/index.css

@@ -1,12 +1,12 @@
-@media screen and (min-width: 801px) {
-  html {
+@media screen and (min-width: 901px) {
+  html.extended-view {
     display: flex;
     justify-content: center;
     padding: 30px 0 30px 0;
     height: 100vh;
   }
 
-  body {
+  html.extended-view body {
     border-radius: 30px;
   }
 }

public/manifestDefault.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Mojito - A Mintlayer Wallet",
-  "version": "1.6.0",
+  "version": "1.6.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/",
@@ -18,14 +18,16 @@
   },
   "action": {
     "default_icon": "logo192.png",
-    "default_title": "Mojito",
-    "default_popup": "index.html"
+    "default_title": "Mojito"
+  },
+  "side_panel": {
+    "default_path": "index.html"
   },
   "background": {
     "service_worker": "background.js",
     "type": "module"
   },
-  "permissions": ["scripting", "storage"],
+  "permissions": ["scripting", "storage", "sidePanel"],
   "content_scripts": [
     {
       "run_at": "document_start",

public/manifestFirefox.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Mojito - A Mintlayer Wallet",
-  "version": "1.6.0",
+  "version": "1.6.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": {
@@ -34,9 +34,13 @@
     "scripts": ["background-script.js"]
   },
   "action": {
+    "default_icon": "logo192.png",
+    "default_title": "Mojito"
+  },
+  "sidebar_action": {
     "default_icon": "logo192.png",
     "default_title": "Mojito",
-    "default_popup": "index.html"
+    "default_panel": "index.html"
   },
   "content_security_policy": {
     "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'; img-src 'self' data:; style-src 'self' https://fonts.cdnfonts.com https://fonts.googleapis.com https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com https://fonts.cdnfonts.com; style-src-elem 'self' https://fonts.googleapis.com"

src/assets/styles/constants.css

@@ -62,6 +62,58 @@
   --border-radius-input: 16px;
   --round-size-big: 99px;
   --default-font-size: 14px;
+
+  --font-size-xs: 11px;
+  --font-size-sm: 13px;
+  --font-size-md: 14px;
+  --font-size-lg: 16px;
+  --font-size-xl: 18px;
+  --font-size-2xl: 20px;
+  --font-size-3xl: 22px;
+  --font-size-4xl: 24px;
+  --font-size-5xl: 26px;
+  --font-size-6xl: 32px;
+  --font-size-display: 80px;
+
+  --space-3xs: 4px;
+  --space-2xs: 6px;
+  --space-xs: 8px;
+  --space-sm: 10px;
+  --space-md: 12px;
+  --space-lg: 16px;
+  --space-xl: 20px;
+  --space-2xl: 24px;
+  --space-3xl: 28px;
+  --space-4xl: 32px;
+  --space-5xl: 36px;
+}
+
+@media screen and (max-width: 500px) {
+  :root {
+    --font-size-xs: 10px;
+    --font-size-sm: 12px;
+    --font-size-md: 13px;
+    --font-size-lg: 14px;
+    --font-size-xl: 16px;
+    --font-size-2xl: 17px;
+    --font-size-3xl: 19px;
+    --font-size-4xl: 20px;
+    --font-size-5xl: 22px;
+    --font-size-6xl: 26px;
+    --font-size-display: 64px;
+
+    --space-3xs: 3px;
+    --space-2xs: 4px;
+    --space-xs: 6px;
+    --space-sm: 8px;
+    --space-md: 10px;
+    --space-lg: 12px;
+    --space-xl: 14px;
+    --space-2xl: 16px;
+    --space-3xl: 20px;
+    --space-4xl: 24px;
+    --space-5xl: 28px;
+  }
 }
 
 @keyframes moveArrowUpRight {

src/assets/styles/index.css

@@ -13,56 +13,61 @@ html {
   background:
     radial-gradient(
       50% 50% at 20% 30%,
-      rgba(105, 238, 150, 0.4) 0%,
-      rgba(145, 155, 200, 0.4) 59%,
+      rgba(105, 238, 150, 0.22) 0%,
+      rgba(145, 155, 200, 0.16) 59%,
       rgba(195, 192, 225, 0) 100%
     ),
     radial-gradient(
       50% 50% at 80% 70%,
-      rgba(105, 238, 150, 0.4) 0%,
-      rgba(158, 188, 207, 0.4) 59%,
+      rgba(105, 238, 150, 0.22) 0%,
+      rgba(158, 188, 207, 0.16) 59%,
       rgba(195, 192, 225, 0) 100%
     ),
     radial-gradient(
       50% 50% at 50% 50%,
-      rgba(105, 238, 150, 0.4) 0%,
-      rgba(145, 155, 200, 0.4) 59%,
+      rgba(105, 238, 150, 0.18) 0%,
+      rgba(145, 155, 200, 0.14) 59%,
       rgba(195, 192, 225, 0) 100%
     ),
     radial-gradient(
       50% 50% at 30% 80%,
-      rgba(105, 238, 150, 0.4) 0%,
-      rgba(181, 139, 201, 0.4) 59%,
+      rgba(105, 238, 150, 0.18) 0%,
+      rgba(181, 139, 201, 0.14) 59%,
       rgba(195, 192, 225, 0) 100%
     ),
     radial-gradient(
       50% 50% at 70% 20%,
-      rgba(105, 238, 150, 0.4) 0%,
-      rgba(145, 155, 200, 0.4) 59%,
+      rgba(105, 238, 150, 0.18) 0%,
+      rgba(145, 155, 200, 0.14) 59%,
       rgba(195, 192, 225, 0) 100%
     ),
-    rgb(225, 225, 245);
+    rgb(235, 242, 240);
 }
 
 body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  height: 600px;
-  width: 800px;
+  height: 100vh;
+  width: 100%;
+  min-width: 400px;
   background: #f0f2f5;
+  --page-content-height: auto;
+}
 
-  @media screen and (min-width: 801px) {
+html.extended-view body {
+  @media screen and (min-width: 901px) {
     height: auto;
-    border-radius: 30px;
-    width: 111vh;
+    border-radius: 21px;
+    width: 112vh;
+    --page-content-height: 93%;
   }
 }
 
 #root {
   position: relative;
   height: 100%;
 
-  @media screen and (min-width: 801px) {
+  @media screen and (min-width: 901px) {
     display: flex;
   }
 }
@@ -79,10 +84,17 @@ body {
   position: relative;
   display: flex;
   flex-direction: column;
-  height: 530px;
+  flex: 1;
+  height: auto;
+  min-height: 0;
+  overflow-y: auto;
+}
 
-  @media screen and (min-width: 801px) {
+html.extended-view .App {
+  @media screen and (min-width: 901px) {
+    flex: none;
     height: 93%;
+    overflow-y: hidden;
   }
 }
 

src/components/basic/Arc/Arc.js

@@ -12,51 +12,7 @@ const createPieGenerator = () =>
     .padAngle(0.02)
     .sort((a, b) => b.value - a.value)
 
-const createTooltip = () =>
-  d3
-    .select('body')
-    .append('div')
-    .attr('class', 'chart-tooltip')
-    .attr('data-testid', 'tooltip-container')
-    .style('opacity', 0)
-
-const mouseMoveHandle = (tooltip, ev) => {
-  tooltip.style('left', `${ev.pageX}px`).style('top', `${ev.pageY - 35}px`)
-}
-
-const mouseOverHandle = (tooltip, _, item) => {
-  tooltip
-    .attr('data-show', 'true')
-    .transition()
-    .duration(200)
-    .style('opacity', 0.9)
-
-  tooltip.html(
-    `${item.data.asset} <br />${item.data.value} ${item.data.valueSymbol} `,
-  )
-}
-
-const mouseOutHandle = (tooltip) => {
-  tooltip
-    .attr('data-show', 'false')
-    .transition()
-    .duration(500)
-    .style('opacity', 0)
-}
-
-const buildArc = ({
-  container,
-  pathData,
-  arcGenerator,
-  tooltip,
-  mouseMoveFn = mouseMoveHandle,
-  mouseOverFn = mouseOverHandle,
-  mouseOutFn = mouseOutHandle,
-}) => {
-  const mouseMoveHandleBinded = mouseMoveFn.bind(null, tooltip)
-  const mouseOverHandleBinded = mouseOverFn.bind(null, tooltip)
-  const mouseOutHandleBinded = mouseOutFn.bind(null, tooltip)
-
+const buildArc = ({ container, pathData, arcGenerator }) => {
   d3.select(container)
     .selectAll('path')
     .data(pathData)
@@ -65,17 +21,6 @@ const buildArc = ({
     .attr('stroke', 'none')
     .attr('fill', (item) => item.data.color)
     .attr('data-testid', (item) => `arc-${item.data.asset}-container`)
-    .on('mouseover', mouseMoveHandleBinded)
-    .on('mousemove', mouseOverHandleBinded)
-    .on('mouseout', mouseOutHandleBinded)
 }
 
-export {
-  createPieGenerator,
-  createArcGenerator,
-  createTooltip,
-  buildArc,
-  mouseMoveHandle,
-  mouseOverHandle,
-  mouseOutHandle,
-}
+export { createPieGenerator, createArcGenerator, buildArc }