expose the create msig alias component

src/layout/RoutesSuite.tsx

@@ -12,6 +12,7 @@ import { getActiveNetwork } from '../redux/slices/network'
 import { useAppSelector } from '../hooks/reduxHooks'
 import Protected from './Protected'
 import Settings from '../views/settings/index'
+import MultisigWallet from '../views/settings/MultisigWallet'
 import SettingsLayout from './SettingsLayout'
 
 export default function RoutesSuite() {
@@ -34,15 +35,15 @@ export default function RoutesSuite() {
                 setNetworkAliasToUrl(activeNetwork.name.toLowerCase())
             }
         }
-    }, [activeNetwork])
+    }, [activeNetwork]) // eslint-disable-line react-hooks/exhaustive-deps
 
     //Temporally Solution when the network is changed
     useEffect(() => {
         let isExplorer = lastUrlWithNewNetwork.split('/')[1] === 'explorer' ? true : false
         if (isExplorer && networkAliasToUrl !== '') {
             navigate('/changing-network')
         }
-    }, [networkAliasToUrl])
+    }, [networkAliasToUrl]) // eslint-disable-line react-hooks/exhaustive-deps
 
     return (
         <>
@@ -73,7 +74,7 @@ export default function RoutesSuite() {
                     <Route path="/settings" element={<SettingsLayout />}>
                         <Route index element={<Settings />} />
                         <Route path="save-account" element={<Settings />} />
-                        {/* <Route path="create-multisig" element={<div>create multisig</div>} /> */}
+                        <Route path="create-multisig" element={<MultisigWallet />} />
                     </Route>
                 </Route>
                 <Route path="/login" element={<LoginPage />} />

src/theme/overrides/Tab.ts

@@ -0,0 +1,33 @@
+import { Theme } from '@mui/material/styles'
+
+export default function Tab(theme: Theme) {
+    return {
+        MuiTab: {
+            styleOverrides: {
+                root: {
+                    display: 'flex',
+                    padding: '10px 12px',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    position: 'relative',
+                    height: '61px',
+                    fontFamily: 'Inter',
+                    fontSize: '14px',
+                    fontStyle: 'normal',
+                    fontWeight: '600',
+                    lineHeight: '20px',
+                    color: theme => theme.palette.text.primary,
+                    '&::after': {
+                        content: '""',
+                        width: '100%',
+                        height: '4px',
+                        position: 'absolute',
+                        bottom: '0px',
+                        borderRadius: '4px 4px 0px 0px',
+                        background: '#0085FF',
+                    },
+                },
+            },
+        },
+    }
+}

src/theme/overrides/index.ts

@@ -12,6 +12,7 @@ import Paper from './Paper'
 import Drawer from './Drawer'
 import Input from './Input'
 import DialogActions from './DialogActions'
+import Tab from './Tab'
 
 export default function ComponentsOverrides(theme: Theme) {
     return merge(
@@ -27,5 +28,6 @@ export default function ComponentsOverrides(theme: Theme) {
         Drawer(theme),
         Input(theme),
         DialogActions(theme),
+        Tab(theme),
     )
 }

src/views/settings/Links.tsx

@@ -3,7 +3,6 @@ import Tabs from '@mui/material/Tabs'
 import Tab from '@mui/material/Tab'
 import Box from '@mui/material/Box'
 import { useNavigate } from 'react-router'
-import { Typography } from '@mui/material'
 
 function a11yProps(index: number) {
     return {
@@ -17,14 +16,7 @@ export default function Links() {
     const navigate = useNavigate()
     const handleChange = (event: React.SyntheticEvent, newValue: number) => setValue(newValue)
     return (
-        <Box
-            sx={{
-                display: 'flex',
-                cursor: 'pointer',
-                width: '100%',
-                maxWidth: '1536px',
-            }}
-        >
+        <Box sx={{ display: 'flex', cursor: 'pointer', width: '100%', maxWidth: '1536px' }}>
             <Tabs
                 value={value}
                 onChange={handleChange}
@@ -37,49 +29,19 @@ export default function Links() {
                 <Tab
                     className="tab"
                     disableRipple
-                    label={
-                        <Typography
-                            sx={{
-                                fontFamily: 'Inter',
-                                fontSize: '14px',
-                                fontStyle: 'normal',
-                                fontWeight: '600',
-                                lineHeight: '20px',
-                                color: theme => theme.palette.text.primary,
-                            }}
-                        >
-                            Save account
-                        </Typography>
-                    }
+                    label="Save account"
                     onClick={() => navigate('/settings')}
                     {...a11yProps(0)}
-                    sx={{
-                        display: 'flex',
-                        padding: '10px 12px',
-                        justifyContent: 'center',
-                        alignItems: 'center',
-                        position: 'relative',
-                        height: '61px',
-                        '&::after': {
-                            content: '""',
-                            display: value === 0 ? 'block' : 'none',
-                            width: '100%',
-                            height: '4px',
-                            position: 'absolute',
-                            bottom: '0px',
-                            borderRadius: '4px 4px 0px 0px',
-                            background: '#0085FF',
-                        },
-                    }}
+                    sx={{ '&::after': { display: value === 0 ? 'block' : 'none' } }}
                 />
-                {/* <Tab
+                <Tab
                     className="tab"
                     disableRipple
                     label="Multisignature Wallet"
                     onClick={() => navigate('create-multisig')}
                     {...a11yProps(1)}
-                    sx={{ alignItems: { xs: 'baseline', sm: 'self-start' } }}
-                /> */}
+                    sx={{ '&::after': { display: value === 1 ? 'block' : 'none' } }}
+                />
             </Tabs>
         </Box>
     )

src/views/settings/MultisigWallet.tsx

@@ -0,0 +1,43 @@
+import React, { useEffect, useRef } from 'react'
+// @ts-ignore
+import { mountMultisigWalletSetting } from 'wallet/mountMultisigWalletSetting'
+import { useAppDispatch } from '../../hooks/reduxHooks'
+import { updateNotificationStatus, updateShowButton } from '../../redux/slices/app-config'
+import { styled } from '@mui/material/styles'
+import { Box } from '@mui/material'
+
+const StyledBox = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '100%',
+    height: '100%',
+    '@media (max-width: 600px)': {
+        justifyContent: 'flex-start',
+    },
+}))
+
+const LoadMultisigWalletSetting = () => {
+    const ref = useRef(null)
+    const dispatch = useAppDispatch()
+    const dispatchNotification = ({ message, type }) =>
+        dispatch(updateNotificationStatus({ message, severity: type }))
+    const updateShowAlias = () => dispatch(updateShowButton())
+    useEffect(() => {
+        mountMultisigWalletSetting(ref.current, { dispatchNotification, updateShowAlias })
+    }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+    return (
+        <StyledBox>
+            <div ref={ref} />
+        </StyledBox>
+    )
+}
+
+export default function MultisigWallet() {
+    return (
+        <React.Suspense fallback={<div>Loading...</div>}>
+            <LoadMultisigWalletSetting />
+        </React.Suspense>
+    )
+}