Merge pull request #221 from chain4travel/suite

Enhancements and Fixes: Routing Paths, Wallet Components, and Address Checksum

src/components/Navbar/Account.tsx

@@ -1,4 +1,4 @@
-import { mdiCog, mdiLogout } from '@mdi/js'
+import { mdiCheckDecagram, mdiCog, mdiLogout } from '@mdi/js'
 import { Box, Chip, MenuItem, MenuList, Select, Typography, useTheme } from '@mui/material'
 import React, { useEffect, useState } from 'react'
 import { getNameOfWallet, getPchainAddress } from '../../helpers/walletStore'
@@ -147,39 +147,25 @@ export default function Account({ handleCloseSidebar }: LoginIconProps) {
                             }}
                         >
                             <MenuItem
-                                onKeyDown={e => {
-                                    handleKeyDown(e)
+                                onClick={() => {
+                                    navigate('/settings/verify-wallet')
+                                    setOpen(v => !v)
                                 }}
-                                sx={{ typography: 'body2', width: '100%', maxWidth: '326px' }}
-                            >
-                                <LoadAccountMenu type="kyc" setOpen={setOpen} />
-                            </MenuItem>
-                            <MenuItem
                                 onKeyDown={e => {
                                     handleKeyDown(e)
                                 }}
                                 sx={{
-                                    typography: 'body1',
+                                    typography: 'body2',
                                     width: '100%',
                                     maxWidth: '326px',
-                                    position: 'relative',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'start',
+                                    gap: '8px',
                                 }}
                             >
-                                <Chip
-                                    color="secondary"
-                                    size="small"
-                                    sx={{
-                                        position: 'absolute',
-                                        fontSize: '12px',
-                                        height: '16px',
-                                        top: '5px',
-                                        width: '50px',
-                                        left: 'calc(100% - 55px)',
-                                        zIndex: '1',
-                                    }}
-                                    label="beta"
-                                />
-                                <LoadAccountMenu type="kyb" setOpen={setOpen} />
+                                <Icon path={mdiCheckDecagram} size={1} />
+                                <Typography variant="body2">Verify Wallet</Typography>
                             </MenuItem>
                             <MenuItem
                                 onClick={() => {

src/components/Navbar/LoadMyKeysComponent.tsx

@@ -5,7 +5,7 @@ import { mountKyesComponent } from 'wallet/mountKyesComponent'
 import { useAppDispatch } from '../../hooks/reduxHooks'
 import { useEffectOnce } from '../../hooks/useEffectOnce'
 import useWallet from '../../hooks/useWallet'
-import { updateNotificationStatus } from '../../redux/slices/app-config'
+import { updateAccount, updateNotificationStatus } from '../../redux/slices/app-config'
 
 const StyledBox = styled(Box)(({ theme }) => ({
     display: 'flex',
@@ -43,11 +43,13 @@ const LoadMyKeysComponent = () => {
     const dispatch = useAppDispatch()
     const dispatchNotification = ({ message, type }) =>
         dispatch(updateNotificationStatus({ message, severity: type }))
+    const setAccount = account => dispatch(updateAccount(account))
     const { updateStore } = useWallet()
     useEffectOnce(() => {
         mountKyesComponent(ref.current, {
             dispatchNotification,
             updateStore,
+            setAccount
         })
     }) // eslint-disable-line react-hooks/exhaustive-deps
 

src/constants/footer-consts.tsx

@@ -1,12 +1,3 @@
-import {
-    DISCORD,
-    GITHUB,
-    LINKEDIN,
-    TELEGRAM_ANNOUNCEMENTS,
-    TELEGRAM_CAMINO,
-    X,
-    YOUTUBE,
-} from './route-paths'
 import {
     DiscordIcon,
     GithubIcon,
@@ -16,6 +7,15 @@ import {
     XIcon,
     YoutubeIcon,
 } from '../assets'
+import {
+    DISCORD,
+    GITHUB,
+    LINKEDIN,
+    TELEGRAM_ANNOUNCEMENTS,
+    TELEGRAM_CAMINO,
+    X,
+    YOUTUBE,
+} from './route-paths'
 
 import React from 'react'
 
@@ -187,21 +187,5 @@ export const FooterLinks = [
             },
         ],
     },
-    {
-        name: 'Public Sale',
-        links: [
-            {
-                text: 'Get CAM',
-                url: 'https://camino.network/public-sale/',
-            },
-            {
-                text: 'Disclaimer',
-                url: 'https://camino.network/public-sale-disclaimer/',
-            },
-            {
-                text: 'Terms & Conditions',
-                url: 'https://camino.network/static/docs/Terms_and_Conditions_of_Use_Public_Sale_2024.pdf',
-            },
-        ],
-    },
+
 ]

src/layout/RoutesSuite.tsx

@@ -18,6 +18,7 @@ import CreatedOffers from '../views/partners/CreatedOffers'
 import Foundation from '../views/partners/Foundation'
 import Partner from '../views/partners/Partner'
 import MultisigWallet from '../views/settings/MultisigWallet'
+import VerifyWallet from '../views/settings/VerifyWallet'
 import Settings from '../views/settings/index'
 import Wallet from '../views/wallet/WalletApp'
 import CreateDepositsLayout from './CreateDepositLayout'
@@ -100,6 +101,7 @@ export default function RoutesSuite() {
                         <Route index element={<Settings />} />
                         <Route path="save-account" element={<Settings />} />
                         <Route path="manage-multisig" element={<MultisigWallet />} />
+                        <Route path="verify-wallet" element={<VerifyWallet />} />
                     </Route>
                     <Route path="/foundation" element={<CreateDepositsLayout />}>
                         <Route index element={<Foundation />} />

src/views/settings/Links.tsx

@@ -23,6 +23,7 @@ export default function Links() {
     useEffect(() => {
         if (path === '/settings') setValue(0)
         else if (path === '/settings/manage-multisig') setValue(1)
+        else if (path === '/settings/verify-wallet') setValue(2)
         else setValue(0)
         dispatch(changeActiveApp('Network'))
     }, [path]) // eslint-disable-line react-hooks/exhaustive-deps
@@ -46,6 +47,15 @@ export default function Links() {
             key={1}
             sx={{ '&::after': { display: value === 1 ? 'block' : 'none' } }}
         />,
+        <Tab
+            className="tab"
+            disableRipple
+            label="Verify Wallet"
+            onClick={() => navigate('verify-wallet')}
+            {...a11yProps(2)}
+            key={2}
+            sx={{ '&::after': { display: value === 2 ? 'block' : 'none' } }}
+        />,
     ]
 
     const partnersTabs = [

src/views/settings/VerifyWallet.tsx

@@ -0,0 +1,37 @@
+import React, { useEffect, useRef } from 'react'
+// @ts-ignore
+import { Box } from '@mui/material'
+import { styled } from '@mui/material/styles'
+import { mountVerifyWalletSetting } from 'wallet/mountVerifyWalletSetting'
+
+const StyledBox = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '100%',
+    height: '100%',
+    '@media (max-width: 600px)': {
+        justifyContent: 'flex-start',
+    },
+}))
+
+const LoadVerifyWalletSetting = () => {
+    const ref = useRef(null)
+    useEffect(() => {
+        mountVerifyWalletSetting(ref.current)
+    }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+    return (
+        <StyledBox>
+            <div ref={ref} />
+        </StyledBox>
+    )
+}
+
+export default function VerifyWalletSetting() {
+    return (
+        <React.Suspense fallback={<div>Loading...</div>}>
+            <LoadVerifyWalletSetting />
+        </React.Suspense>
+    )
+}