From eee6ac780ef68a5a7a52b11c2d6bb34f6ef01f65 Mon Sep 17 00:00:00 2001 From: Achraf Eddaqqaq <51858084+aeddaqqa@users.noreply.github.com> Date: Tue, 4 Jul 2023 20:49:11 +0100 Subject: [PATCH 01/12] feat: expose the commit hash to the suite (#133) --- package.json | 1 + src/components/Footer/LoadWalletVersion.tsx | 18 ++++++ src/components/Footer/Version.tsx | 45 +++++++++++++ src/components/Footer/index.tsx | 71 ++++++++++++++++++++- src/constants/route-paths.ts | 8 +++ src/theme/typography.ts | 2 +- webpack.common.js | 23 +++++++ yarn.lock | 21 +++++- 8 files changed, 186 insertions(+), 3 deletions(-) create mode 100644 src/components/Footer/LoadWalletVersion.tsx create mode 100644 src/components/Footer/Version.tsx diff --git a/package.json b/package.json index 7e4da16a..1e69e7cf 100644 --- 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 new file mode 100644 index 00000000..89f2eec5 --- /dev/null +++ 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 ( + <> +
+ + ) +} + +export default React.memo(WalletVersionComponent) diff --git a/src/components/Footer/Version.tsx b/src/components/Footer/Version.tsx new file mode 100644 index 00000000..6b58b433 --- /dev/null +++ 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 ( + + + {type} + + + + {children} + + + + ) +} + +const Version = () => { + const { state } = useStore() + return ( + + + {process.env.GIT_COMMIT_HASH} + + + + + + {state.appConfig.commitHash} + + + ) +} + +export default Version diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx index b7aef62c..8e8aa273 100644 --- 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() { ))} + + + + + Camino Network Foundation © 2023 + + + + + {process.env.NODE_ENV === 'development' ? ( + } + placement="top" + PopperProps={{ + sx: { + '& .MuiTooltip-tooltip': { + maxWidth: '500px !important', + }, + }, + }} + > + + + ) : ( + + )} + + + + {process.env.VERSION} + + + + + diff --git a/src/constants/route-paths.ts b/src/constants/route-paths.ts index 88c296e8..b7a1280f 100644 --- 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/theme/typography.ts b/src/theme/typography.ts index dd5251ad..d4539656 100644 --- a/src/theme/typography.ts +++ b/src/theme/typography.ts @@ -16,7 +16,7 @@ function responsiveFontSizes({ sm, md, lg }: { sm: number; md: number; lg: numbe } } -const FONT_PRIMARY = 'ClashDisplay' +const FONT_PRIMARY = 'Inter' const FONT_SECONDARY = 'Inter' const typography = { diff --git a/webpack.common.js b/webpack.common.js index d19a7463..a4979b15 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -1,6 +1,23 @@ const HtmlWebPackPlugin = require('html-webpack-plugin') const path = require('path') const CopyWebpackPlugin = require('copy-webpack-plugin') +const Dotenv = require('dotenv-webpack') +const webpack = require('webpack') +const { execSync } = require('child_process') + +const getGitInformation = () => { + try { + const commit = execSync('git rev-parse --short HEAD').toString().trim() + const repo = execSync('git config --get remote.origin.url').toString().trim() + const tag = execSync('git describe --tags --always').toString().trim() + return { commit, repo, tag } + } catch (e) { + return { commit: '', repo: '', tag: '' } + } +} + +const gitInfo = getGitInformation() + module.exports = { resolve: { extensions: ['.vue', '.tsx', '.ts', '.jsx', '.js', '.json'], @@ -33,6 +50,12 @@ module.exports = { }, plugins: [ + new Dotenv(), + new webpack.DefinePlugin({ + 'process.env.GIT_COMMIT_HASH': JSON.stringify(gitInfo.commit), + 'process.env.VERSION': JSON.stringify(gitInfo.tag), + 'process.env.RELEASES_PAGE': JSON.stringify(gitInfo.repo), + }), new HtmlWebPackPlugin({ template: path.resolve(__dirname, 'public/index.html'), favicon: 'public/favicon.ico', diff --git a/yarn.lock b/yarn.lock index 4c5717b9..665951df 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1173,7 +1173,7 @@ "@c4tplatform/camino-wallet-sdk@file:camino-wallet-sdk": version "0.0.2" dependencies: - "@c4tplatform/caminojs" "file:../../../../.cache/yarn/v6/npm-@c4tplatform-camino-wallet-sdk-0.0.2-219ce51b-7ff5-45af-90b9-a8b0ac92aba5-1685654423926/node_modules/@c4tplatform/camino-wallet-sdk/caminojs" + "@c4tplatform/caminojs" "file:../../../../Library/Caches/Yarn/v6/npm-@c4tplatform-camino-wallet-sdk-0.0.2-7816f32c-f51e-4cd0-b062-32a01391a346-1686832390604/node_modules/@c4tplatform/camino-wallet-sdk/caminojs" "@ethereumjs/tx" "3.4.0" "@ledgerhq/hw-app-eth" "6.12.2" "@ledgerhq/hw-transport" "^6.19.0" @@ -6184,16 +6184,35 @@ dot-case@^3.0.4: no-case "^3.0.4" tslib "^2.0.3" +dotenv-defaults@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/dotenv-defaults/-/dotenv-defaults-2.0.2.tgz#6b3ec2e4319aafb70940abda72d3856770ee77ac" + integrity sha512-iOIzovWfsUHU91L5i8bJce3NYK5JXeAwH50Jh6+ARUdLiiGlYWfGw6UkzsYqaXZH/hjE/eCd/PlfM/qqyK0AMg== + dependencies: + dotenv "^8.2.0" + dotenv-expand@^5.1.0: version "5.1.0" resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-5.1.0.tgz#3fbaf020bfd794884072ea26b1e9791d45a629f0" integrity sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA== +dotenv-webpack@^8.0.1: + version "8.0.1" + resolved "https://registry.yarnpkg.com/dotenv-webpack/-/dotenv-webpack-8.0.1.tgz#6656550460a8076fab20e5ac2eac867e72478645" + integrity sha512-CdrgfhZOnx4uB18SgaoP9XHRN2v48BbjuXQsZY5ixs5A8579NxQkmMxRtI7aTwSiSQcM2ao12Fdu+L3ZS3bG4w== + dependencies: + dotenv-defaults "^2.0.2" + dotenv@^10.0.0: version "10.0.0" resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-10.0.0.tgz#3d4227b8fb95f81096cdd2b66653fb2c7085ba81" integrity sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q== +dotenv@^8.2.0: + version "8.6.0" + resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.6.0.tgz#061af664d19f7f4d8fc6e4ff9b584ce237adcb8b" + integrity sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g== + duplexer3@^0.1.4: version "0.1.5" resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.5.tgz#0b5e4d7bad5de8901ea4440624c8e1d20099217e" From 59a556fa5131faef51915be8bcdbd2ac56a38778 Mon Sep 17 00:00:00 2001 From: Achraf Eddaqqaq <51858084+aeddaqqa@users.noreply.github.com> Date: Wed, 5 Jul 2023 16:12:16 +0100 Subject: [PATCH 02/12] add beta tag to kyb button (#139) --- src/components/Navbar/LoginButton.tsx | 35 ++++++++++++++++++++++++--- 1 file changed, 32 insertions(+), 3 deletions(-) diff --git a/src/components/Navbar/LoginButton.tsx b/src/components/Navbar/LoginButton.tsx index d9234b87..ff20461c 100644 --- 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() { - + + { handleKeyDown(e) }} - sx={{ typography: 'body1', width: '100%', maxWidth: '326px' }} + sx={{ + typography: 'body1', + width: '100%', + maxWidth: '326px', + position: 'relative', + }} > + Date: Mon, 17 Jul 2023 15:20:46 +0200 Subject: [PATCH 03/12] Adjust settings area styling (#141) --- src/layout/RoutesSuite.tsx | 3 +-- src/layout/SettingsLayout.tsx | 21 +++++++++++------- src/views/login/LoginPage.tsx | 25 +++++++++++++++++++-- src/views/settings/Links.tsx | 41 ++++++++++++++++++++++++++++++----- 4 files changed, 72 insertions(+), 18 deletions(-) diff --git a/src/layout/RoutesSuite.tsx b/src/layout/RoutesSuite.tsx index 741bdc6a..c8d6f33b 100644 --- a/src/layout/RoutesSuite.tsx +++ b/src/layout/RoutesSuite.tsx @@ -15,7 +15,6 @@ import Settings from '../views/settings/index' import SettingsLayout from './SettingsLayout' export default function RoutesSuite() { - const navigate = useNavigate() const activeNetwork = useAppSelector(getActiveNetwork) @@ -74,7 +73,7 @@ export default function RoutesSuite() { }> } /> } /> - create multisig
} /> + {/* create multisig} /> */} } /> diff --git a/src/layout/SettingsLayout.tsx b/src/layout/SettingsLayout.tsx index 2e409ead..60c6c948 100644 --- a/src/layout/SettingsLayout.tsx +++ b/src/layout/SettingsLayout.tsx @@ -6,27 +6,32 @@ const SettingsLayout = () => { return ( - theme.palette.background.paper, + flexGrow: 1, + p: '1.5rem', + zIndex: 9, + position: 'fixed', + top: '65px', + width: '100vw', + height: '61px', display: 'flex', justifyContent: 'center', + right: 0, }} > - - - - + + ) diff --git a/src/views/login/LoginPage.tsx b/src/views/login/LoginPage.tsx index 82841627..0b7f0e2c 100644 --- a/src/views/login/LoginPage.tsx +++ b/src/views/login/LoginPage.tsx @@ -7,9 +7,16 @@ import { Link, useNavigate } from 'react-router-dom' import { styled } from '@mui/material/styles' import { mountAccounts } from 'wallet/mountAccounts' +const StyledExternalLink = styled('a')(({ theme }) => ({ + color: theme.palette.text.primary, + textDecoration: 'underline !important', + mx: '.5rem', +})) + const StyledLink = styled(Link)(({ theme }) => ({ color: theme.palette.text.primary, textDecoration: 'underline !important', + mx: '.5rem', })) const LoadAccountMenu = () => { @@ -112,9 +119,23 @@ export default function LoginPage() { By using this application, you agree to the  - + Terms of Use - + +  and  + + Privacy Policy + diff --git a/src/views/settings/Links.tsx b/src/views/settings/Links.tsx index 2a793588..ed9975a9 100644 --- a/src/views/settings/Links.tsx +++ b/src/views/settings/Links.tsx @@ -3,6 +3,7 @@ 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 { @@ -21,14 +22,14 @@ export default function Links() { display: 'flex', cursor: 'pointer', width: '100%', - height: '48px', + maxWidth: '1536px', }} > theme.palette.text.primary, + }} + > + Save account + + } onClick={() => navigate('/settings')} {...a11yProps(0)} sx={{ - alignItems: { xs: 'baseline', sm: 'self-start' }, + 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', + }, }} /> - navigate('create-multisig')} {...a11yProps(1)} sx={{ alignItems: { xs: 'baseline', sm: 'self-start' } }} - /> + /> */} ) From 76078abe0990ed0f0db9ceb6b510b71709e008ff Mon Sep 17 00:00:00 2001 From: Achraf Eddaqqaq <51858084+aeddaqqa@users.noreply.github.com> Date: Tue, 18 Jul 2023 09:18:21 +0100 Subject: [PATCH 04/12] display the version tag (#142) --- src/views/login/LoginPage.tsx | 52 +++++++++++++++++------------------ 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/src/views/login/LoginPage.tsx b/src/views/login/LoginPage.tsx index 0b7f0e2c..bedaf714 100644 --- a/src/views/login/LoginPage.tsx +++ b/src/views/login/LoginPage.tsx @@ -19,6 +19,32 @@ const StyledLink = styled(Link)(({ theme }) => ({ mx: '.5rem', })) +const AccessActionButton = props => { + const navigate = useNavigate() + return ( + + ) +} + const LoadAccountMenu = () => { const ref = useRef(null) const navigate = useNavigate() @@ -142,29 +168,3 @@ export default function LoginPage() { ) } - -function AccessActionButton(props) { - const navigate = useNavigate() - return ( - - ) -} From 4c3908e13e204cb9bb930315e467ac7e3bb0d480 Mon Sep 17 00:00:00 2001 From: Mohamed Elmoslemany <117270519+mo-c4t@users.noreply.github.com> Date: Tue, 18 Jul 2023 11:51:20 +0200 Subject: [PATCH 05/12] fetch all tags while deploying (#143) --- .github/workflows/build.yaml | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml index 3722d452..97d62587 100644 --- 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 From 55a47aa6c980e348044a0c63834a01c7b96386e5 Mon Sep 17 00:00:00 2001 From: Mohamed Elmoslemany <117270519+mo-c4t@users.noreply.github.com> Date: Tue, 18 Jul 2023 14:41:05 +0200 Subject: [PATCH 06/12] fetch tags (#144) --- .github/workflows/cypress.yml | 3 +++ .github/workflows/docker.yml | 3 +++ 2 files changed, 6 insertions(+) diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml index 3846ffc0..1ec459a3 100644 --- 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 index bbdbdc4a..5ee5bcea 100644 --- 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 From 89a14ce18884735e15944b2b5e5af396f5eb7b87 Mon Sep 17 00:00:00 2001 From: Ayoub Agoumi Date: Mon, 24 Jul 2023 20:49:58 +0100 Subject: [PATCH 07/12] expose the create msig alias component (#146) * override th tab styling * add the exposed component & update the links component * add route for the msig creation --- src/layout/RoutesSuite.tsx | 7 ++-- src/theme/overrides/Tab.ts | 33 ++++++++++++++++++ src/theme/overrides/index.ts | 2 ++ src/views/settings/Links.tsx | 50 ++++----------------------- src/views/settings/MultisigWallet.tsx | 43 +++++++++++++++++++++++ 5 files changed, 88 insertions(+), 47 deletions(-) create mode 100644 src/theme/overrides/Tab.ts create mode 100644 src/views/settings/MultisigWallet.tsx diff --git a/src/layout/RoutesSuite.tsx b/src/layout/RoutesSuite.tsx index c8d6f33b..2cce90ce 100644 --- a/src/layout/RoutesSuite.tsx +++ b/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,7 +35,7 @@ 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(() => { @@ -42,7 +43,7 @@ export default function RoutesSuite() { if (isExplorer && networkAliasToUrl !== '') { navigate('/changing-network') } - }, [networkAliasToUrl]) + }, [networkAliasToUrl]) // eslint-disable-line react-hooks/exhaustive-deps return ( <> @@ -73,7 +74,7 @@ export default function RoutesSuite() { }> } /> } /> - {/* create multisig} /> */} + } /> } /> diff --git a/src/theme/overrides/Tab.ts b/src/theme/overrides/Tab.ts new file mode 100644 index 00000000..aab28c1a --- /dev/null +++ b/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', + }, + }, + }, + }, + } +} diff --git a/src/theme/overrides/index.ts b/src/theme/overrides/index.ts index 311f1ebe..08756752 100644 --- a/src/theme/overrides/index.ts +++ b/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), ) } diff --git a/src/views/settings/Links.tsx b/src/views/settings/Links.tsx index ed9975a9..e0fa1bf6 100644 --- a/src/views/settings/Links.tsx +++ b/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 ( - + theme.palette.text.primary, - }} - > - Save account - - } + 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' } }} /> - {/* navigate('create-multisig')} {...a11yProps(1)} - sx={{ alignItems: { xs: 'baseline', sm: 'self-start' } }} - /> */} + sx={{ '&::after': { display: value === 1 ? 'block' : 'none' } }} + /> ) diff --git a/src/views/settings/MultisigWallet.tsx b/src/views/settings/MultisigWallet.tsx new file mode 100644 index 00000000..f9963722 --- /dev/null +++ b/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 ( + +
+ + ) +} + +export default function MultisigWallet() { + return ( + Loading...
}> + + + ) +} From 6a916793e710cc8e79e8d0c32d587c6bd10ac88c Mon Sep 17 00:00:00 2001 From: Ayoub Agoumi Date: Thu, 17 Aug 2023 22:51:22 +0200 Subject: [PATCH 08/12] fix: switching active tab when route changes (#148) --- src/views/settings/Links.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/views/settings/Links.tsx b/src/views/settings/Links.tsx index e0fa1bf6..4858cedf 100644 --- a/src/views/settings/Links.tsx +++ b/src/views/settings/Links.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import React, { useState, useEffect } from 'react' import Tabs from '@mui/material/Tabs' import Tab from '@mui/material/Tab' import Box from '@mui/material/Box' @@ -15,6 +15,14 @@ export default function Links() { const [value, setValue] = useState(0) const navigate = useNavigate() const handleChange = (event: React.SyntheticEvent, newValue: number) => setValue(newValue) + const path = window.location.pathname + + useEffect(() => { + if (path === '/settings') setValue(0) + else if (path === '/settings/create-multisig') setValue(1) + else setValue(0) + }, [path]) // eslint-disable-line react-hooks/exhaustive-deps + return ( Date: Fri, 18 Aug 2023 09:07:09 +0100 Subject: [PATCH 09/12] update multisig on network change (#147) * update multisig on network change * switch back from alias to root key --- src/components/Navbar/AliasPicker.tsx | 15 ++++++++------- src/hooks/useNetwork.ts | 10 +++++++--- 2 files changed, 15 insertions(+), 10 deletions(-) diff --git a/src/components/Navbar/AliasPicker.tsx b/src/components/Navbar/AliasPicker.tsx index 9e341598..8cdd3c60 100644 --- 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 } 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) } diff --git a/src/hooks/useNetwork.ts b/src/hooks/useNetwork.ts index 0ae21ac4..113da5e1 100644 --- 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({ From 245b45b3927f28d7a85c3c35395027e35f2318ea Mon Sep 17 00:00:00 2001 From: Ayoub Agoumi Date: Mon, 21 Aug 2023 02:46:00 +0200 Subject: [PATCH 10/12] Create multisig alias (#149) --- src/components/Navbar/AliasPicker.tsx | 29 +++++++++++++---------- src/components/Navbar/NetworkSwitcher.tsx | 4 ++-- src/views/settings/Links.tsx | 6 ++--- src/views/settings/MultisigWallet.tsx | 2 +- 4 files changed, 21 insertions(+), 20 deletions(-) diff --git a/src/components/Navbar/AliasPicker.tsx b/src/components/Navbar/AliasPicker.tsx index 8cdd3c60..9e74e5d0 100644 --- a/src/components/Navbar/AliasPicker.tsx +++ b/src/components/Navbar/AliasPicker.tsx @@ -1,6 +1,6 @@ import { mdiClose } from '@mdi/js' import Icon from '@mdi/react' -import { Box, DialogContent, DialogTitle, Divider, Typography } from '@mui/material' +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' @@ -40,22 +40,25 @@ const AliasPicker = () => { Switch Wallet - - + + Wallet Switcher - + theme.palette.grey[500], + }} + > - + + - {!network.readonly && ( + {!network.readonly && network.url !== activeNetwork.url && ( handleEditCustomNetwork()}> @@ -173,7 +173,7 @@ export default function NetworkSwitcher() { {network.name} - {!network.readonly && ( + {!network.readonly && network.url !== activeNetwork.url && (