From a0df30e84627757bf9ddcf11e5ef36da336e79c2 Mon Sep 17 00:00:00 2001 From: Anton Lykhoyda Date: Mon, 25 Sep 2023 15:05:59 +0200 Subject: [PATCH] Add accordion to settings page (#361) Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> Co-authored-by: Thibaut Sardan --- packages/ui/cypress/fixtures/landingData.ts | 2 + .../watched-acccounts/watched-accounts.cy.ts | 8 +- .../WalletConnectActiveSessions.tsx | 82 ++++++----- .../WalletConnect/WalletConnectSession.tsx | 45 +++--- .../ui/src/components/WatchedAccounts.tsx | 109 --------------- packages/ui/src/components/library/Button.tsx | 3 +- .../components/select/AccountSelection.tsx | 9 +- .../ui/src/contexts/WalletConnectContext.tsx | 4 +- packages/ui/src/logos/walletConnectSVG.svg | 5 + packages/ui/src/pages/Home/Home.tsx | 3 +- packages/ui/src/pages/Settings.tsx | 27 ---- packages/ui/src/pages/Settings/Settings.tsx | 125 +++++++++++++++++ .../ui/src/pages/Settings/WatchedAccounts.tsx | 130 ++++++++++++++++++ packages/ui/src/pages/index.ts | 2 +- packages/ui/src/styles/theme.ts | 12 ++ 15 files changed, 355 insertions(+), 211 deletions(-) delete mode 100644 packages/ui/src/components/WatchedAccounts.tsx create mode 100644 packages/ui/src/logos/walletConnectSVG.svg delete mode 100644 packages/ui/src/pages/Settings.tsx create mode 100644 packages/ui/src/pages/Settings/Settings.tsx create mode 100644 packages/ui/src/pages/Settings/WatchedAccounts.tsx diff --git a/packages/ui/cypress/fixtures/landingData.ts b/packages/ui/cypress/fixtures/landingData.ts index 85fac439..44387239 100644 --- a/packages/ui/cypress/fixtures/landingData.ts +++ b/packages/ui/cypress/fixtures/landingData.ts @@ -2,3 +2,5 @@ export const baseUrl = 'http://localhost:3333' export const networkParams = 'network=rococo' export const landingPageUrl = `${baseUrl}?${networkParams}` export const settingsPageUrl = `${baseUrl}/settings?${networkParams}` +const WATCH_ACCOUNT_ANCHOR = '#watched-accounts' +export const settingsPageWatchAccountUrl = `${settingsPageUrl}${WATCH_ACCOUNT_ANCHOR}` diff --git a/packages/ui/cypress/tests/watched-acccounts/watched-accounts.cy.ts b/packages/ui/cypress/tests/watched-acccounts/watched-accounts.cy.ts index 2150d7b7..2ea7593e 100644 --- a/packages/ui/cypress/tests/watched-acccounts/watched-accounts.cy.ts +++ b/packages/ui/cypress/tests/watched-acccounts/watched-accounts.cy.ts @@ -1,5 +1,5 @@ import { addresses } from '../../fixtures/accounts' -import { landingPageUrl, settingsPageUrl } from '../../fixtures/landingData' +import { landingPageUrl, settingsPageWatchAccountUrl } from '../../fixtures/landingData' import { landingPage } from '../../support/page-objects/landingPage' import { settingsPage } from '../../support/page-objects/settingsPage' @@ -28,7 +28,7 @@ describe('Watched Accounts', () => { it('can remove an account from the watch list', () => { // add an account first - cy.visit(settingsPageUrl) + cy.visit(settingsPageWatchAccountUrl) addWatchAccount(addresses.Alice, 'Alice') // now remove it settingsPage.accountContainer().within(() => { @@ -41,7 +41,7 @@ describe('Watched Accounts', () => { it('can see error when attemping to add same address more than once', () => { // add an account first - cy.visit(settingsPageUrl) + cy.visit(settingsPageWatchAccountUrl) addWatchAccount(addresses.Alice, 'Alice') settingsPage.accountContainer().should('have.length', 1) // attempt to add the same account again @@ -52,7 +52,7 @@ describe('Watched Accounts', () => { }) it('can see error when attempting to add an invalid address', () => { - cy.visit(settingsPageUrl) + cy.visit(settingsPageWatchAccountUrl) addWatchAccount('123') settingsPage.errorLabel().should('be.visible').should('have.text', 'Invalid address') settingsPage.accountContainer().should('have.length', 0) diff --git a/packages/ui/src/components/WalletConnect/WalletConnectActiveSessions.tsx b/packages/ui/src/components/WalletConnect/WalletConnectActiveSessions.tsx index 81180689..eadb3b03 100644 --- a/packages/ui/src/components/WalletConnect/WalletConnectActiveSessions.tsx +++ b/packages/ui/src/components/WalletConnect/WalletConnectActiveSessions.tsx @@ -32,48 +32,46 @@ export const WalletConnectActiveSessions = () => { return ( - <> - Active sessions: - {activeSessions.map((session) => { - const { name, url } = session.peer.metadata - const expiryDate = new Date(session.expiry * 1000) - - const content = ( - -
-
    -
  • Namespace: {session.requiredNamespaces.polkadot.chains?.join(', ')}
    • -
  • Methods: {session.requiredNamespaces.polkadot.methods?.join(', ')}
    • -
  • Expiring: {expiryDate.toDateString()}
    • -
-
-
- -
- - ) - - return ( - -
{name}
-
{url}
- - } - content={content} - /> - ) - })} - + Active sessions: + {activeSessions.map((session) => { + const { name, url } = session.peer.metadata + const expiryDate = new Date(session.expiry * 1000) + + const content = ( + +
+
    +
  • Namespace: {session.requiredNamespaces.polkadot.chains?.join(', ')}
    • +
  • Methods: {session.requiredNamespaces.polkadot.methods?.join(', ')}
    • +
  • Expiring: {expiryDate.toDateString()}
    • +
+
+
+ +
+ + ) + + return ( + +
{name}
+
{url}
+ + } + content={content} + /> + ) + })} ) } diff --git a/packages/ui/src/components/WalletConnect/WalletConnectSession.tsx b/packages/ui/src/components/WalletConnect/WalletConnectSession.tsx index f368b7b3..21389d9b 100644 --- a/packages/ui/src/components/WalletConnect/WalletConnectSession.tsx +++ b/packages/ui/src/components/WalletConnect/WalletConnectSession.tsx @@ -1,6 +1,6 @@ import { Alert, CircularProgress, Grid, styled } from '@mui/material' -import { Button, TextFieldStyled } from '../library' -import { useCallback, useMemo, useState } from 'react' +import { Button, InputField } from '../library' +import { useCallback, useMemo, useState, ChangeEvent } from 'react' import { useWalletConnect } from '../../contexts/WalletConnectContext' import { useMultiProxy } from '../../contexts/MultiProxyContext' @@ -25,7 +25,7 @@ export const WalletConnectSession = () => { } }, [pair, uri]) - const onUriChange = useCallback((event: React.ChangeEvent) => { + const onUriChange = useCallback((event: ChangeEvent) => { setUri(event.target.value.trim()) }, []) @@ -36,9 +36,6 @@ export const WalletConnectSession = () => { > {!canUseWalletConnect && ( @@ -52,24 +49,28 @@ export const WalletConnectSession = () => { )} - - - {loading ? : 'Connect Dapp'} - + + + {loading ? : 'Connect Dapp'} + + ) @@ -81,5 +82,5 @@ const AlertStyled = styled(Alert)` ` const ButtonStyled = styled(Button)` - margin-left: 1rem; + margin-top: 0.5rem; ` diff --git a/packages/ui/src/components/WatchedAccounts.tsx b/packages/ui/src/components/WatchedAccounts.tsx deleted file mode 100644 index b8e078d2..00000000 --- a/packages/ui/src/components/WatchedAccounts.tsx +++ /dev/null @@ -1,109 +0,0 @@ -import { styled } from '@mui/material/styles' -import { Box, Grid, IconButton, Paper } from '@mui/material' -import { useWatchedAddresses } from '../contexts/WatchedAddressesContext' -import AccountDisplay from './AccountDisplay' -import { HiOutlineTrash } from 'react-icons/hi2' -import AccountSelection from './select/AccountSelection' - -interface Props { - className?: string -} - -const WatchedAccounts = ({ className }: Props) => { - const { watchedAddresses, removeWatchedAccount, addWatchedAccount } = useWatchedAddresses() - - return ( - - {watchedAddresses.length > 0 && ( - - - {watchedAddresses.map((address) => { - const removeItem = () => removeWatchedAccount(address) - return ( -
- - - - -
- ) - })} - - - )} - - Watch new account... - - - - - - ) -} - -const PaperStyled = styled(Paper)` - padding: 1rem; - max-height: 13.5rem; - overflow: auto; - - .selectedSignatory { - margin-bottom: 1rem; - display: flex; - - &:last-child { - margin-bottom: 0; - } - - .deleteButton { - margin-left: 1rem; - height: 2.5rem; - align-self: center; - } - } -` -const TitleStyled = styled(Box)` - margin-bottom: 0.5rem; -` - -const AccountSelectionWrapperStyled = styled(Box)` - display: flex; - margin-bottom: 2rem; - - .accountDropdown { - flex: 1; - } -` - -export default WatchedAccounts diff --git a/packages/ui/src/components/library/Button.tsx b/packages/ui/src/components/library/Button.tsx index ba32c411..b78afc16 100644 --- a/packages/ui/src/components/library/Button.tsx +++ b/packages/ui/src/components/library/Button.tsx @@ -7,7 +7,7 @@ interface ButtonProps extends React.ButtonHTMLAttributes { } export const Button = styled('button')` - display: inline-flex; + display: inline-block; padding: 0.5rem 1rem; font-size: 1rem; height: 100%; @@ -21,6 +21,7 @@ export const Button = styled('button')` box-shadow: ${({ theme }) => theme.custom.boxShadow}; transition: background 0.2s ease-in-out; white-space: nowrap; + text-align: center; &:disabled { cursor: not-allowed; diff --git a/packages/ui/src/components/select/AccountSelection.tsx b/packages/ui/src/components/select/AccountSelection.tsx index e49db7ba..2022d025 100644 --- a/packages/ui/src/components/select/AccountSelection.tsx +++ b/packages/ui/src/components/select/AccountSelection.tsx @@ -18,6 +18,8 @@ interface Props { addAccount?: (address: string) => void value?: string label?: string + actionButtonLabel?: string + actionButtonVariant?: 'primary' | 'secondary' currentSelection?: string[] withName?: boolean withAddButton?: boolean @@ -31,6 +33,8 @@ const AccountSelection = ({ nameDisabled = false, value, label = 'Address', + actionButtonLabel = 'Add', + actionButtonVariant = 'secondary', currentSelection = [], withName = false, withAddButton = false, @@ -179,11 +183,11 @@ const AccountSelection = ({ {withAddButton && ( - Add + {actionButtonLabel} )} @@ -203,6 +207,7 @@ const BoxStyled = styled(Box)` const ButtonStyled = styled(Button)` margin-left: 1rem; align-self: end; + text-align: center; ` export default styled(AccountSelection)` diff --git a/packages/ui/src/contexts/WalletConnectContext.tsx b/packages/ui/src/contexts/WalletConnectContext.tsx index 52b40eff..c3c17d39 100644 --- a/packages/ui/src/contexts/WalletConnectContext.tsx +++ b/packages/ui/src/contexts/WalletConnectContext.tsx @@ -13,7 +13,7 @@ export interface IWalletConnectContext { web3wallet: IWeb3Wallet | undefined core: ICore pair: (params: { uri: string }) => Promise - refresh: () => void + refresh: () => Promise } const WalletConnectContext = createContext(undefined) @@ -58,7 +58,7 @@ const WalletConnectContextProvider = ({ children }: WalletConnectContextProps) = ) const refresh = useCallback(() => { - createWeb3Wallet() + return createWeb3Wallet() }, [createWeb3Wallet]) useEffect(() => { diff --git a/packages/ui/src/logos/walletConnectSVG.svg b/packages/ui/src/logos/walletConnectSVG.svg new file mode 100644 index 00000000..7baac649 --- /dev/null +++ b/packages/ui/src/logos/walletConnectSVG.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/packages/ui/src/pages/Home/Home.tsx b/packages/ui/src/pages/Home/Home.tsx index c7dc07bf..c2b5ae83 100644 --- a/packages/ui/src/pages/Home/Home.tsx +++ b/packages/ui/src/pages/Home/Home.tsx @@ -17,6 +17,7 @@ import MultisigView from './MultisigView' import TransactionList from '../../components/Transactions/TransactionList' import { ConnectOrWatch } from '../../components/ConnectOrWatch' import { HiOutlineArrowTopRightOnSquare as LaunchIcon } from 'react-icons/hi2' +import { WATCH_ACCOUNT_ANCHOR } from '../Settings/Settings' // import CurrentReferendumBanner from '../../components/CurrentReferendumBanner' interface HomeProps { @@ -63,7 +64,7 @@ const Home = ({ className }: HomeProps) => { or