Dev-01-08-2024

package.json

@@ -1,6 +1,6 @@
 {
   "name": "browser-extension",
-  "version": "1.2.9",
+  "version": "1.3.0",
   "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.2.9",
+  "version": "1.3.0",
   "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.2.9",
+  "version": "1.3.0",
   "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/composed/Balance/Balance.js

@@ -4,17 +4,17 @@ import { useNavigate, useParams } from 'react-router-dom'
 import { ReactComponent as BtcLogo } from '@Assets/images/btc-logo.svg'
 import { LogoRound } from '@BasicComponents'
 import { Format, NumbersHelper } from '@Helpers'
-import { NetworkContext, SettingsContext } from '@Contexts'
+import { MintlayerContext, SettingsContext } from '@Contexts'
 import { AppInfo } from '@Constants'
 
 import './Balance.css'
 import TokenLogoRound from '../../basic/TokenLogoRound/TokenLogoRound'
 
 const Balance = ({ balance, balanceLocked, exchangeRate, walletType }) => {
   const { networkType } = useContext(SettingsContext)
-  const { tokenBalances } = useContext(NetworkContext)
   const { coinType } = useParams()
   const navigate = useNavigate()
+  const { tokenBalances } = useContext(MintlayerContext)
   // TODO Consider the correct format for 0,00 that might also be 0.00
   const balanceInUSD =
     networkType === AppInfo.NETWORK_TYPES.TESTNET
@@ -48,7 +48,7 @@ const Balance = ({ balance, balanceLocked, exchangeRate, walletType }) => {
   }
 
   const onLockedClick = () => {
-     navigate('/wallet/' + coinType + '/locked-balance')
+    navigate('/wallet/' + coinType + '/locked-balance')
   }
 
   return (
@@ -71,7 +71,10 @@ const Balance = ({ balance, balanceLocked, exchangeRate, walletType }) => {
           <span>{Format.fiatValue(balanceInUSD)}</span> USD
         </p>
         {parseFloat(balanceLocked) > 0 ? (
-          <div className="balance-locked" onClick={onLockedClick}>
+          <div
+            className="balance-locked"
+            onClick={onLockedClick}
+          >
             Locked: {balanceLocked} {symbol()}
           </div>
         ) : (

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

@@ -1,22 +1,24 @@
 import { render, screen } from '@testing-library/react'
 import Balance from './Balance'
-import { SettingsProvider, NetworkContext } from '@Contexts'
+import { SettingsProvider, MintlayerContext } from '@Contexts'
 
 const BALANCE_SAMPLE = 1
 const EXCHANGE_RATE_SAMPLE = 25000
 
 test('Render account balance with ML', () => {
   render(
-      <SettingsProvider>
-        <NetworkContext.Provider value={{ balanceLoading: false, tokenBalances: [] }}>
-          <Balance
-            balance={BALANCE_SAMPLE}
-            exchangeRate={EXCHANGE_RATE_SAMPLE}
-            walletType={{ name: 'Mintlayer' }}
-          />
-        </NetworkContext.Provider>
-        ,
-      </SettingsProvider>
+    <SettingsProvider>
+      <MintlayerContext.Provider
+        value={{ balanceLoading: false, tokenBalances: [] }}
+      >
+        <Balance
+          balance={BALANCE_SAMPLE}
+          exchangeRate={EXCHANGE_RATE_SAMPLE}
+          walletType={{ name: 'Mintlayer' }}
+        />
+      </MintlayerContext.Provider>
+      ,
+    </SettingsProvider>,
   )
   const currantBalanceComponent = screen.getByTestId('current-balance')
   const balanceParagraphs = screen.getAllByTestId('balance-paragraph')
@@ -32,16 +34,18 @@ test('Render account balance with ML', () => {
 
 test('Render account balance with BTC', () => {
   render(
-      <SettingsProvider>
-        <NetworkContext.Provider value={{ balanceLoading: false, tokenBalances: [] }}>
-          <Balance
-            balance={BALANCE_SAMPLE}
-            exchangeRate={EXCHANGE_RATE_SAMPLE}
-            walletType={{ name: 'Bitcoin' }}
-          />
-        </NetworkContext.Provider>
-        ,
-      </SettingsProvider>
+    <SettingsProvider>
+      <MintlayerContext.Provider
+        value={{ balanceLoading: false, tokenBalances: [] }}
+      >
+        <Balance
+          balance={BALANCE_SAMPLE}
+          exchangeRate={EXCHANGE_RATE_SAMPLE}
+          walletType={{ name: 'Bitcoin' }}
+        />
+      </MintlayerContext.Provider>
+      ,
+    </SettingsProvider>,
   )
   const currantBalanceComponent = screen.getByTestId('current-balance')
   const balanceParagraphs = screen.getAllByTestId('balance-paragraph')
@@ -57,16 +61,18 @@ test('Render account balance with BTC', () => {
 
 test('renders balance with zero value when networkType is testnet', () => {
   render(
-      <SettingsProvider value={{ networkType: 'testnet' }}>
-        <NetworkContext.Provider value={{ balanceLoading: false, tokenBalances: [] }}>
-          <Balance
-            balance={BALANCE_SAMPLE}
-            exchangeRate={EXCHANGE_RATE_SAMPLE}
-            walletType={{ name: 'Bitcoin' }}
-          />
-        </NetworkContext.Provider>
-        ,
-      </SettingsProvider>
+    <SettingsProvider value={{ networkType: 'testnet' }}>
+      <MintlayerContext.Provider
+        value={{ balanceLoading: false, tokenBalances: [] }}
+      >
+        <Balance
+          balance={BALANCE_SAMPLE}
+          exchangeRate={EXCHANGE_RATE_SAMPLE}
+          walletType={{ name: 'Bitcoin' }}
+        />
+      </MintlayerContext.Provider>
+      ,
+    </SettingsProvider>,
   )
 
   const currantBalanceComponent = screen.getByTestId('current-balance')

src/components/composed/FeeField/FeeFieldML.js

@@ -1,19 +1,14 @@
-import React, {
-  useContext,
-} from 'react'
+import React, { useContext } from 'react'
 
-import { NetworkContext } from '@Contexts'
+import { MintlayerContext } from '@Contexts'
 import { Input } from '@BasicComponents'
 import { OptionButtons } from '@ComposedComponents'
 
 import './FeeField.css'
 import { ML as MLHelpers } from '@Helpers'
 
-const FeeFieldML = ({
-  value: parentValue,
-  id,
-}) => {
-  const { feerate } = useContext(NetworkContext)
+const FeeFieldML = ({ value: parentValue, id }) => {
+  const { feerate } = useContext(MintlayerContext)
   const timeToFirstConfirmations = '~2 minutes'
 
   const options = [{ name: 'norm', value: feerate }]
@@ -24,7 +19,11 @@ const FeeFieldML = ({
         <div className="fee-input-wrapper ml">
           <Input
             id={id}
-            value={parentValue ? parentValue : MLHelpers.getAmountInCoins(Number(feerate / 1000))}
+            value={
+              parentValue
+                ? parentValue
+                : MLHelpers.getAmountInCoins(Number(feerate / 1000))
+            }
             disabled={true}
           />
           <small>ML</small>

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

@@ -8,7 +8,7 @@ import {
   useLocation,
 } from 'react-router-dom'
 
-import { AccountProvider, SettingsProvider, NetworkProvider } from '@Contexts'
+import { AccountProvider, SettingsProvider, MintlayerProvider } from '@Contexts'
 import Header from './Header'
 
 const toggleNetworkType = jest.fn()
@@ -41,21 +41,21 @@ const setup = async (location) => {
   await render(
     <AccountProvider value={value}>
       <SettingsProvider value={{ networkType: 'testnet', toggleNetworkType }}>
-        <NetworkProvider>
-        <MemoryRouter initialEntries={['/']}>
-          <Routes>
-            <Route
-              path="/next-page"
-              element={<NextPage />}
-            />
-            <Route
-              exact
-              path="/"
-              element={<PreviousPage />}
-            />
-          </Routes>
-        </MemoryRouter>
-        </NetworkProvider>
+        <MintlayerProvider>
+          <MemoryRouter initialEntries={['/']}>
+            <Routes>
+              <Route
+                path="/next-page"
+                element={<NextPage />}
+              />
+              <Route
+                exact
+                path="/"
+                element={<PreviousPage />}
+              />
+            </Routes>
+          </MemoryRouter>
+        </MintlayerProvider>
       </SettingsProvider>
     </AccountProvider>,
   )

src/components/composed/LockedBalanceList/LockedBalanceList.js

@@ -1,5 +1,5 @@
 import React, { useContext, useState, useEffect, useCallback } from 'react'
-import { NetworkContext } from '@Contexts'
+import { MintlayerContext } from '@Contexts'
 
 import { Loading } from '@ComposedComponents'
 import { Mintlayer } from '@APIs'
@@ -9,7 +9,7 @@ import './LockedBalanceList.css'
 
 const LockedBalanceList = () => {
   const { lockedUtxos, transactions, fetchingUtxos } =
-    useContext(NetworkContext)
+    useContext(MintlayerContext)
   const [loading, setLoading] = useState(false)
   const [updatedUtxosList, setUpdatedUtxosList] = useState([])
 

src/components/composed/TextField/TextField.css

@@ -1,7 +1,6 @@
 .inputLabel {
   color: rgb(var(--color-dark-gray));
   display: block;
-  text-align: center;
 }
 
 .inputLabel.alternate {

src/components/composed/TextField/TextField.js

@@ -19,7 +19,8 @@ const TextField = ({
   errorMessages,
   pristinity = true,
   reference,
-  focus = false,
+  focus = true,
+  bigGap = true,
 }) => {
   const inputId = useId()
 
@@ -44,7 +45,7 @@ const TextField = ({
   const setPristineState = (e) => setIsPristine(false)
 
   return (
-    <VerticalGroup bigGap>
+    <VerticalGroup bigGap={bigGap}>
       {label && (
         <label
           htmlFor={inputId}
@@ -64,7 +65,7 @@ const TextField = ({
         pattern={pattern}
         extraStyleClasses={extraStyleClasses}
         onBlurHandle={setPristineState}
-        focus
+        focus={focus}
       />
       {errorMessages && !isPristine && <Error error={errorMessages} />}
     </VerticalGroup>

src/components/composed/UpdateButton/UpdateButton.js

@@ -4,26 +4,25 @@ import { Button } from '@BasicComponents'
 import { ReactComponent as SuccessImg } from '@Assets/images/icon-success.svg'
 import { ReactComponent as LoadingImg } from '@Assets/images/icon-loading.svg'
 
-import { NetworkContext } from '@Contexts'
+import { MintlayerContext, BitcoinContext } from '@Contexts'
 
 import './UpdateButton.css'
 
-
 const UpdateButton = () => {
-  const { fetchAllData, fetchDelegations } =
-    useContext(NetworkContext)
+  const { fetchAllData: fetchAllDataMintlayer, fetchDelegations } = useContext(MintlayerContext)
+  const { fetchAllData: fetchAllDataBitcoin } = useContext(BitcoinContext)
   const [loading, setLoading] = useState(false)
   const [showSuccess, setShowSuccess] = useState(false)
 
   const handleClick = async () => {
     try {
       setLoading(true)
-      await fetchAllData()
+      await fetchAllDataBitcoin()
+      await fetchAllDataMintlayer()
       await fetchDelegations()
       setLoading(false)
       setShowSuccess(true)
-    }
-    catch (error) {
+    } catch (error) {
       console.error(error)
       setLoading(false)
     }
@@ -43,9 +42,16 @@ const UpdateButton = () => {
       alternate
       extraStyleClasses={['update-button']}
     >
-      {loading && <LoadingImg className="loading-animated"  data-testid="icon-loading-animated"/>}
-      {!loading && showSuccess && <SuccessImg data-testid="icon-success"/>}
-      {!loading && !showSuccess && <LoadingImg data-testid="icon-loading-default"/>}
+      {loading && (
+        <LoadingImg
+          className="loading-animated"
+          data-testid="icon-loading-animated"
+        />
+      )}
+      {!loading && showSuccess && <SuccessImg data-testid="icon-success" />}
+      {!loading && !showSuccess && (
+        <LoadingImg data-testid="icon-loading-default" />
+      )}
     </Button>
   )
 }