Merge pull request #190 from chain4travel/suite

Suite
chain4travel · Feb 21, 2024 · 487149e · 487149e
2 parents 622f16a + ed1f1cc
commit 487149e
Show file tree

Hide file tree

Showing 27 changed files with 522 additions and 262 deletions.
diff --git a/cypress/e2e/explorer_latest_transaction_list_Xchain.cy.ts b/cypress/e2e/explorer_latest_transaction_list_Xchain.cy.ts
@@ -1,5 +1,3 @@
-import { expect } from 'chai'
-
 let transactionsBody = {
     transactions: [
         {
@@ -279,7 +277,7 @@ describe('latest transaction list Xchainet', { tags: ['@explorer', '@suite'] },
                 })
         })
         cy.wait('@transactions').then(() => {
-            cy.get('.css-1voxykv-MuiPaper-root').should('be.visible')
+            cy.get('[aria-label="transaction-list"]').should('be.visible')
             cy.get(
                 ':nth-child(1) > .MuiGrid-grid-md-4 > .MuiGrid-container > .MuiGrid-grid-xs-8 > a > .MuiTypography-root',
             )

diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
@@ -82,12 +82,24 @@ Cypress.Commands.add('changeNetwork', (network: string = 'Kopernikus') => {
     cy.get('@txtSelectedNetwork')
         .invoke('text')
         .then(currentNetwork => {
-            cy.get('@btnNetworkSwitcher').click({ force: true }) // Network Switcher
-            cy.get(`[data-value="${network}"]`).click() // Select Network
-
-            // Waiting 'info.networkID', and 'info.getTxFee'
-            cy.wait('@getNetworkID').then(interceptNetworkInfo)
-            cy.wait('@getTxFee').then(interceptNetworkInfo)
+            if (currentNetwork !== network) {
+                // Only perform the switch if the current network is different
+                cy.get('@btnNetworkSwitcher').click({ force: true })
+                cy.get(`[data-value="${network}"]`).click()
+
+                // After switching, wait for the network requests
+                cy.wait('@getNetworkID').then(interceptNetworkInfo)
+                cy.wait('@getTxFee').then(interceptNetworkInfo)
+            } else {
+                cy.get('body').then($body => {
+                    if ($body.find(`[data-value="${network}"]`).length > 0) {
+                        cy.get(`[data-value="${network}"]`).click()
+                    } else {
+                        cy.log(`Network option '${network}' not found.`)
+                    }
+                })
+                cy.log(`Already on the '${network}' network, no switch needed.`)
+            }
 
             // increasing timeout to make sure the network is selected, especially on slowly local dev env
             cy.get('@txtSelectedNetwork', { timeout: 15000 }).should('have.text', network)

diff --git a/public/index.html b/public/index.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="night">
+<html lang="en">
     <head>
         <meta charset="utf-8" />
-        <link rel="manifest"  href="/manifest.json"/>
+        <link rel="manifest" href="/manifest.json" />
         <link rel="icon" href="/favicon.ico" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="theme-color" content="#000000" />
@@ -38,12 +38,12 @@
         <div id="app"></div>
     </body>
     <style>
-        html[data-theme='day'] {
+        html[data-theme='light'] {
             --background-color: #fff;
             --secondary-background-color: #f1f5f9;
             --text-color: #0f172a;
         }
-        html[data-theme='night'] {
+        html[data-theme='dark'] {
             --background-color: #0f172a;
             --secondary-background-color: #1e293b;
             --text-color: #ffffff;
@@ -94,13 +94,19 @@
         })
     </script>
 
-    <noscript
-        >Free cookie consent management tool by
-        <a href="https://www.termsfeed.com/privacy-policy-generator/"
-            >TermsFeed Free Privacy Policy Generator</a
-        ></noscript
-    >
+    <noscript>
+        Free cookie consent management tool by
+        <a href="https://www.termsfeed.com/privacy-policy-generator/">
+            TermsFeed Free Privacy Policy Generator
+        </a>
+    </noscript>
     <script>
+        // set data-theme based on localStorage
+        const theme = localStorage.getItem('theme')
+
+        if (theme) document.documentElement.setAttribute('data-theme', theme)
+        else document.documentElement.setAttribute('data-theme', 'light')
+
         let intervalId
 
         function checkAppLoading() {

diff --git a/src/components/Animate/DialogAnimate.tsx b/src/components/Animate/DialogAnimate.tsx
@@ -19,7 +19,7 @@ export default function DialogAnimate({
             {open && (
                 <Dialog
                     fullWidth
-                    maxWidth="xl"
+                    maxWidth="md"
                     open={open}
                     onClose={onClose}
                     PaperComponent={props => (

diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
@@ -1,33 +1,35 @@
-import React from 'react'
 import {
     Box,
-    Grid,
-    Typography,
-    useTheme,
-    Divider,
     Container,
+    Divider,
+    Fade,
+    Grid,
     MenuItem,
     Tooltip,
-    Fade,
+    Typography,
+    useTheme,
 } from '@mui/material'
 import {
+    CAMINO,
+    DISCORD,
     DOCS,
-    TWITTER,
-    TELEGRAM_CAMINO,
-    TELEGRAM_ANNOUNCEMENTS,
-    MEDIUM,
     GITHUB,
-    DISCORD,
-    CAMINO,
+    MEDIUM,
     SUITE_RELEASES,
+    TELEGRAM_ANNOUNCEMENTS,
+    TELEGRAM_CAMINO,
+    TWITTER,
 } from '../../constants/route-paths'
-import { Link } from 'react-router-dom'
-import { mdiInformationOutline } from '@mdi/js'
+
 import Icon from '@mdi/react'
+import { Link } from 'react-router-dom'
+import React from 'react'
 import Version from './Version'
+import { mdiInformationOutline } from '@mdi/js'
 
 export default function Footer() {
     const theme = useTheme()
+    const year = new Date().getFullYear()
     return (
         <footer style={{ position: 'relative', marginTop: 'auto' }}>
             {theme.palette.mode !== 'light' && <Divider variant="fullWidth" />}
@@ -163,7 +165,7 @@ export default function Footer() {
                                     textAlign: { xs: 'center', md: 'left' },
                                 }}
                             >
-                                Camino Network Foundation &copy; 2023
+                                Camino Network Foundation &copy; {year}
                             </Typography>
                         </Grid>
                         <Grid item xs={12} md={6}>

diff --git a/src/components/LoadAccountMenu.tsx b/src/components/LoadAccountMenu.tsx
@@ -1,10 +1,11 @@
+import { Box } from '@mui/material'
+import { styled } from '@mui/material/styles'
 import React, { useRef } from 'react'
-import { useAppDispatch } from '../hooks/reduxHooks'
-import { updateAccount, updateNotificationStatus } from '../redux/slices/app-config'
 import { mountAccountMenu } from 'wallet/mountAccountMenu'
-import { styled } from '@mui/material/styles'
-import { Box } from '@mui/material'
+import { useAppDispatch } from '../hooks/reduxHooks'
 import { useEffectOnce } from '../hooks/useEffectOnce'
+import useWallet from '../hooks/useWallet'
+import { updateAccount, updateNotificationStatus } from '../redux/slices/app-config'
 
 const StyledBox = styled(Box)(({ theme }) => ({
     display: 'flex',
@@ -24,13 +25,16 @@ export const LoadAccountMenu = (props: {
     const ref = useRef(null)
     const dispatch = useAppDispatch()
     const setAccount = account => dispatch(updateAccount(account))
+    const { updateStore } = useWallet()
     const dispatchNotification = ({ message, type }) =>
         dispatch(updateNotificationStatus({ message, severity: type }))
     useEffectOnce(() => {
         mountAccountMenu(ref.current, {
             ...props,
             setAccount,
             dispatchNotification,
+
+            updateStore,
         })
     }) // eslint-disable-line react-hooks/exhaustive-deps
 

diff --git a/src/components/Navbar/Account.tsx b/src/components/Navbar/Account.tsx
@@ -4,13 +4,14 @@ import { Chip, MenuItem, MenuList, Select, Typography, useTheme } from '@mui/mat
 import React, { useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import store from 'wallet/store'
-import {
-    getNameOfMultiSigWallet,
-    getPchainAddress,
-    isMultiSigWallet,
-} from '../../helpers/walletStore'
+import { getNameOfWallet, getPchainAddress } from '../../helpers/walletStore'
 import { useAppDispatch, useAppSelector } from '../../hooks/reduxHooks'
-import { changeActiveApp, getAccount, updateAccount } from '../../redux/slices/app-config'
+import {
+    changeActiveApp,
+    getAccount,
+    updateAccount,
+    updatePchainAddress,
+} from '../../redux/slices/app-config'
 import { updateAuthStatus } from '../../redux/slices/utils'
 import MHidden from '../@material-extend/MHidden'
 import { LoadAccountMenu } from '../LoadAccountMenu'
@@ -23,7 +24,6 @@ interface LoginIconProps {
 
 export default function Account({ handleCloseSidebar }: LoginIconProps) {
     const auth = useAppSelector(state => state.appConfig.isAuth)
-    const [_, setWalletName] = React.useState('')
     const dispatch = useAppDispatch()
     const navigate = useNavigate()
     const account = useAppSelector(getAccount)
@@ -42,11 +42,10 @@ export default function Account({ handleCloseSidebar }: LoginIconProps) {
         handleCloseSidebar()
     }
     useEffect(() => {
-        if (isMultiSigWallet()) {
-            setWalletName(getNameOfMultiSigWallet() || getPchainAddress())
-        } else setWalletName(getPchainAddress())
+        dispatch(
+            updatePchainAddress({ address: getPchainAddress(), walletName: getNameOfWallet() }),
+        )
     }, [auth])
-
     const handleKeyDown = e => {
         e.stopPropagation()
     }