Merge pull request #153 from chain4travel/feat-create-edit-msig

Merge remote-tracking branch 'origin/suite' into suite-c4t
chain4travel · Aug 24, 2023 · 00fc732 · 00fc732
2 parents c5cb31f + d5af2f5
commit 00fc732
Show file tree

Hide file tree

Showing 21 changed files with 392 additions and 115 deletions.
diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml
@@ -21,10 +21,12 @@ jobs:
       - uses: actions/checkout@v3
         with:
           submodules: recursive
+          fetch-depth: 0
+
       - uses: actions/setup-node@v3
         with:
           node-version: '16'
-
+          
       - name: install yarn dependencies
         run: yarn install
       - name: lint

diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml
@@ -20,6 +20,9 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v3
+        with:
+          submodules: recursive
+          fetch-depth: 0
       - name: Use Node.js ${{ matrix.node }}
         uses: actions/setup-node@v3
         with:

diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml
@@ -24,6 +24,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
+        with:
+          submodules: recursive
+          fetch-depth: 0
 
       - name: Prepare Image Tag
         id: setDefaults

diff --git a/package.json b/package.json
@@ -51,6 +51,7 @@
         "babel-loader": "^8.2.2",
         "copy-webpack-plugin": "^11.0.0",
         "cypress-file-upload": "^4.0.7",
+        "dotenv-webpack": "^8.0.1",
         "eslint": "^8.34.0",
         "eslint-config-prettier": "^8.6.0",
         "eslint-config-react-app": "^7.0.1",

diff --git a/src/components/Footer/LoadWalletVersion.tsx b/src/components/Footer/LoadWalletVersion.tsx
@@ -0,0 +1,18 @@
+import React, { useRef } from 'react'
+import { mountVersionComponent } from 'wallet/mountVersionComponent'
+import { useEffectOnce } from '../../hooks/useEffectOnce'
+
+const WalletVersionComponent = () => {
+    const ref = useRef(null)
+    useEffectOnce(() => {
+        mountVersionComponent(ref.current)
+    }) // eslint-disable-line react-hooks/exhaustive-deps
+
+    return (
+        <>
+            <div ref={ref} />
+        </>
+    )
+}
+
+export default React.memo(WalletVersionComponent)
diff --git a/src/components/Footer/Version.tsx b/src/components/Footer/Version.tsx
@@ -0,0 +1,45 @@
+import React from 'react'
+import WalletVersionComponent from './LoadWalletVersion'
+import { Box, Typography } from '@mui/material'
+import { useStore } from 'Explorer/useStore'
+import { Link } from 'react-router-dom'
+import { SUITE, SUITE_EXPLORER, SUITE_WALLET } from '../../constants/route-paths'
+
+const LinkButton = ({ children, type, to }) => {
+    return (
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: '.5rem' }}>
+            <Typography variant="body1" component="p">
+                {type}
+            </Typography>
+            <Link
+                rel="noopener noreferrer"
+                target="_blank"
+                style={{ textDecoration: 'none' }}
+                to={to}
+            >
+                <Typography variant="body2" component="p" color={'primary'}>
+                    {children}
+                </Typography>
+            </Link>
+        </Box>
+    )
+}
+
+const Version = () => {
+    const { state } = useStore()
+    return (
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: '.5rem' }}>
+            <LinkButton type="Suite" to={SUITE}>
+                {process.env.GIT_COMMIT_HASH}
+            </LinkButton>
+            <LinkButton type="Wallet" to={SUITE_WALLET}>
+                <WalletVersionComponent />
+            </LinkButton>
+            <LinkButton type="Explorer" to={SUITE_EXPLORER}>
+                {state.appConfig.commitHash}
+            </LinkButton>
+        </Box>
+    )
+}
+
+export default Version
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
@@ -1,5 +1,15 @@
 import React from 'react'
-import { Box, Grid, Typography, useTheme, Divider, Container, MenuItem } from '@mui/material'
+import {
+    Box,
+    Grid,
+    Typography,
+    useTheme,
+    Divider,
+    Container,
+    MenuItem,
+    Tooltip,
+    Fade,
+} from '@mui/material'
 import {
     DOCS,
     TWITTER,
@@ -9,8 +19,12 @@ import {
     GITHUB,
     DISCORD,
     CAMINO,
+    SUITE_RELEASES,
 } from '../../constants/route-paths'
 import { Link } from 'react-router-dom'
+import { mdiInformationOutline } from '@mdi/js'
+import Icon from '@mdi/react'
+import Version from './Version'
 
 export default function Footer() {
     const theme = useTheme()
@@ -139,6 +153,61 @@ export default function Footer() {
                             ))}
                         </Grid>
                     </Grid>
+                    <Divider sx={{ mt: 2 }} variant="fullWidth" />
+                    <Grid container sx={{ mt: 2 }} justifyContent="space-between">
+                        <Grid item xs={12} md={6}>
+                            <Typography
+                                variant="subtitle1"
+                                component="p"
+                                sx={{
+                                    textAlign: { xs: 'center', md: 'left' },
+                                }}
+                            >
+                                Camino Network Foundation &copy; 2023
+                            </Typography>
+                        </Grid>
+                        <Grid item xs={12} md={6}>
+                            <Box
+                                sx={{
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: '.5rem',
+                                    justifyContent: { xs: 'center', md: 'flex-end' },
+                                }}
+                            >
+                                {process.env.NODE_ENV === 'development' ? (
+                                    <Tooltip
+                                        TransitionComponent={Fade}
+                                        TransitionProps={{ timeout: 600 }}
+                                        title={<Version />}
+                                        placement="top"
+                                        PopperProps={{
+                                            sx: {
+                                                '& .MuiTooltip-tooltip': {
+                                                    maxWidth: '500px !important',
+                                                },
+                                            },
+                                        }}
+                                    >
+                                        <Icon path={mdiInformationOutline} size={0.85} />
+                                    </Tooltip>
+                                ) : (
+                                    <Icon path={mdiInformationOutline} size={0.85} />
+                                )}
+
+                                <Link
+                                    rel="noopener noreferrer"
+                                    target="_blank"
+                                    style={{ textDecoration: 'none' }}
+                                    to={SUITE_RELEASES}
+                                >
+                                    <Typography variant="body1" component="p" color="primary">
+                                        {process.env.VERSION}
+                                    </Typography>
+                                </Link>
+                            </Box>
+                        </Grid>
+                    </Grid>
                 </Container>
             </Box>
         </footer>

diff --git a/src/components/Navbar/AliasPicker.tsx b/src/components/Navbar/AliasPicker.tsx
@@ -1,15 +1,15 @@
-import { Box, DialogContent, DialogTitle, Typography, Divider } from '@mui/material'
-import React, { useEffect, useState } from 'react'
-import DialogAnimate from '../Animate/DialogAnimate'
-import Icon from '@mdi/react'
 import { mdiClose } from '@mdi/js'
-import MainButton from '../MainButton'
-import LoadMyKeysComponent from './LoadMyKeysComponent'
-import LoadSaveKeysComponent from './LoadSaveKeysComponent'
+import Icon from '@mdi/react'
+import { Box, DialogContent, DialogTitle, Divider, Typography, IconButton } from '@mui/material'
+import React, { useEffect, useState } from 'react'
 import store from 'wallet/store'
 import { getMultisigAliases } from '../../api'
 import { useAppSelector } from '../../hooks/reduxHooks'
 import { getShowButton } from '../../redux/slices/app-config'
+import DialogAnimate from '../Animate/DialogAnimate'
+import MainButton from '../MainButton'
+import LoadMyKeysComponent from './LoadMyKeysComponent'
+import LoadSaveKeysComponent from './LoadSaveKeysComponent'
 
 const AliasPicker = () => {
     const [open, setOpen] = useState(false)
@@ -19,6 +19,7 @@ const AliasPicker = () => {
     }
     const showButtonState = useAppSelector(getShowButton)
     async function showButton() {
+        setLoad(false)
         let aliases = await getMultisigAliases(store.getters['staticAddresses']('P'))
         if ((aliases && aliases.length > 0) || store.state.wallets.length > 1) setLoad(true)
     }
@@ -39,22 +40,25 @@ const AliasPicker = () => {
                 Switch Wallet
             </MainButton>
             <DialogAnimate open={open} onClose={handleCloseModal}>
-                <DialogTitle
-                    sx={{
-                        position: 'relative',
-                        display: 'flex',
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
-                    }}
-                >
-                    <Typography variant="h4" component="h4">
+                <DialogTitle sx={{ m: 0, p: 2 }}>
+                    <Typography variant="h4" component="span">
                         Wallet Switcher
                     </Typography>
-                    <Box sx={{ cursor: 'pointer' }} onClick={handleCloseModal}>
+                    <IconButton
+                        aria-label="close"
+                        onClick={handleCloseModal}
+                        sx={{
+                            position: 'absolute',
+                            right: 10,
+                            top: 15,
+                            cursor: 'pointer',
+                            color: theme => theme.palette.grey[500],
+                        }}
+                    >
                         <Icon path={mdiClose} size={1} />
-                    </Box>
+                    </IconButton>
                 </DialogTitle>
+
                 <Divider sx={{ borderWidth: '1.5px' }} />
                 <DialogContent>
                     <Box

diff --git a/src/components/Navbar/LoginButton.tsx b/src/components/Navbar/LoginButton.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { useAppDispatch, useAppSelector } from '../../hooks/reduxHooks'
-import { MenuItem, MenuList, Select, IconButton, useTheme, Typography } from '@mui/material'
+import { MenuItem, MenuList, Select, IconButton, useTheme, Typography, Chip } from '@mui/material'
 import store from 'wallet/store'
 import { useNavigate } from 'react-router-dom'
 import {
@@ -52,8 +52,20 @@ export default function LoginIcon() {
                     <MenuItem>
                         <LoadAccountMenu type="kyc" />
                     </MenuItem>
-                    <MenuItem>
+                    <MenuItem sx={{ position: 'relative' }}>
                         <LoadAccountMenu type="kyb" />
+                        <Chip
+                            color="secondary"
+                            size="small"
+                            sx={{
+                                position: 'absolute',
+                                fontSize: '12px',
+                                height: '16px',
+                                top: 0,
+                                right: { xs: '0.3rem', sm: 0 },
+                            }}
+                            label="beta"
+                        />
                     </MenuItem>
                     <MenuItem
                         onClick={logout}
@@ -113,8 +125,25 @@ export default function LoginIcon() {
                                 onKeyDown={e => {
                                     handleKeyDown(e)
                                 }}
-                                sx={{ typography: 'body1', width: '100%', maxWidth: '326px' }}
+                                sx={{
+                                    typography: 'body1',
+                                    width: '100%',
+                                    maxWidth: '326px',
+                                    position: 'relative',
+                                }}
                             >
+                                <Chip
+                                    color="secondary"
+                                    size="small"
+                                    sx={{
+                                        position: 'absolute',
+                                        fontSize: '12px',
+                                        height: '16px',
+                                        top: 0,
+                                        right: { xs: '0.3rem', sm: 0 },
+                                    }}
+                                    label="beta"
+                                />
                                 <LoadAccountMenu type="kyb" />
                             </MenuItem>
                             <MenuItem

diff --git a/src/components/Navbar/NetworkSwitcher.tsx b/src/components/Navbar/NetworkSwitcher.tsx
@@ -91,7 +91,7 @@ export default function NetworkSwitcher() {
                                     </Typography>
                                 </Box>
                                 <Box sx={{ flexGrow: 1 }} />
-                                {!network.readonly && (
+                                {!network.readonly && network.url !== activeNetwork.url && (
                                     <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
                                         <IconButton onClick={() => handleEditCustomNetwork()}>
                                             <Icon path={mdiPencilOutline} size={0.8} />
@@ -173,7 +173,7 @@ export default function NetworkSwitcher() {
                             <Typography variant="subtitle1" component="span" noWrap>
                                 {network.name}
                             </Typography>
-                            {!network.readonly && (
+                            {!network.readonly && network.url !== activeNetwork.url && (
                                 <Box sx={{ display: 'flex', gap: 1, ml: 1 }}>
                                     <Button
                                         sx={{

diff --git a/src/constants/route-paths.ts b/src/constants/route-paths.ts
@@ -14,6 +14,14 @@ export const GITHUB = 'https://github.com/chain4travel/'
 
 export const CAMINO = 'https://camino.network/'
 
+export const SUITE_RELEASES = 'https://github.com/chain4travel/camino-suite/releases'
+
+export const SUITE_WALLET = 'https://github.com/chain4travel/camino-wallet/tree/suite'
+
+export const SUITE_EXPLORER = 'https://github.com/chain4travel/camino-block-explorer/tree/suite'
+
+export const SUITE = 'https://github.com/chain4travel/camino-suite/tree/suite'
+
 export const WALLET = '/wallet'
 
 export const BASE_PATH = '/explorer'

diff --git a/src/hooks/useNetwork.ts b/src/hooks/useNetwork.ts
@@ -1,4 +1,3 @@
-import { useEffect, useState } from 'react'
 import {
     addNetworks,
     changeActiveNetwork,
@@ -8,11 +7,12 @@ import {
     selectNetworkStatus,
 } from '@/redux/slices/network'
 import { useStore } from 'Explorer/useStore'
-import { Status } from '../@types'
+import { useEffect, useState } from 'react'
+import { AvaNetwork } from 'wallet/AvaNetwork'
 import store from 'wallet/store'
+import { Status } from '../@types'
 import { updateNotificationStatus, updateShowButton } from '../redux/slices/app-config'
 import { useAppDispatch, useAppSelector } from './reduxHooks'
-import { AvaNetwork } from 'wallet/AvaNetwork'
 
 const useNetwork = (): {
     handleChangeNetwork: (arg: string) => void
@@ -51,8 +51,12 @@ const useNetwork = (): {
     const switchNetwork = async (network: AvaNetwork) => {
         try {
             dispatch(changeNetworkStatus(Status.LOADING))
+            if (store.state.activeWallet?.type === 'multisig') {
+                await store.dispatch('activateWallet', store.state.wallets[0])
+            }
             await store.dispatch('Network/setNetwork', network)
             dispatch(changeNetworkStatus(Status.SUCCEEDED))
+            await store.dispatch('fetchMultiSigAliases', { disable: false })
             dispatch(updateShowButton())
             dispatch(
                 updateNotificationStatus({