Add accordion to settings page (#361)

Co-authored-by: Thibaut Sardan <[email protected]> Co-authored-by: Thibaut Sardan <[email protected]>
ChainSafe · Sep 25, 2023 · a0df30e · a0df30e
1 parent d724757
commit a0df30e
Show file tree

Hide file tree

Showing 15 changed files with 355 additions and 211 deletions.
diff --git 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
@@ -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
@@ -32,48 +32,46 @@ export const WalletConnectActiveSessions = () => {
 
   return (
     <WrapperBox>
-      <>
-        Active sessions:
-        {activeSessions.map((session) => {
-          const { name, url } = session.peer.metadata
-          const expiryDate = new Date(session.expiry * 1000)
-
-          const content = (
-            <ContentBoxStyled>
-              <div className="info">
-                <ul>
-                  <li>Namespace: {session.requiredNamespaces.polkadot.chains?.join(', ')}</li>
-                  <li>Methods: {session.requiredNamespaces.polkadot.methods?.join(', ')}</li>
-                  <li>Expiring: {expiryDate.toDateString()}</li>
-                </ul>
-              </div>
-              <div className="buttonWrapper">
-                <Button
-                  variant="primary"
-                  onClick={() => onDeleteSession(session.topic)}
-                  disabled={isLoading}
-                >
-                  {isLoading ? <CircularProgress size={24} /> : 'Delete session'}
-                </Button>
-              </div>
-            </ContentBoxStyled>
-          )
-
-          return (
-            <ExpanderStyled
-              key={session.topic}
-              expanded={false}
-              title={
-                <TitleBoxStyled>
-                  <div className="name">{name}</div>
-                  <div className="url">{url}</div>
-                </TitleBoxStyled>
-              }
-              content={content}
-            />
-          )
-        })}
-      </>
+      Active sessions:
+      {activeSessions.map((session) => {
+        const { name, url } = session.peer.metadata
+        const expiryDate = new Date(session.expiry * 1000)
+
+        const content = (
+          <ContentBoxStyled>
+            <div className="info">
+              <ul>
+                <li>Namespace: {session.requiredNamespaces.polkadot.chains?.join(', ')}</li>
+                <li>Methods: {session.requiredNamespaces.polkadot.methods?.join(', ')}</li>
+                <li>Expiring: {expiryDate.toDateString()}</li>
+              </ul>
+            </div>
+            <div className="buttonWrapper">
+              <Button
+                variant="primary"
+                onClick={() => onDeleteSession(session.topic)}
+                disabled={isLoading}
+              >
+                {isLoading ? <CircularProgress size={24} /> : 'Delete session'}
+              </Button>
+            </div>
+          </ContentBoxStyled>
+        )
+
+        return (
+          <ExpanderStyled
+            key={session.topic}
+            expanded={false}
+            title={
+              <TitleBoxStyled>
+                <div className="name">{name}</div>
+                <div className="url">{url}</div>
+              </TitleBoxStyled>
+            }
+            content={content}
+          />
+        )
+      })}
     </WrapperBox>
   )
 }

diff --git 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<HTMLInputElement>) => {
+  const onUriChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
     setUri(event.target.value.trim())
   }, [])
 
@@ -36,9 +36,6 @@ export const WalletConnectSession = () => {
     >
       <Grid
         item
-        xs={12}
-        sm={12}
-        md={12}
         alignItems="center"
       >
         {!canUseWalletConnect && (
@@ -52,24 +49,28 @@ export const WalletConnectSession = () => {
         )}
       </Grid>
       <Grid
-        item
         xs={12}
-        sm={12}
-        md={12}
-        alignItems="center"
+        md={8}
+        item
       >
-        <TextFieldStyled
-          onChange={onUriChange}
-          value={uri}
-          placeholder="WalletConnect key..."
-          disabled={!canUseWalletConnect}
-        />
-        <ButtonStyled
-          disabled={!uri || !canUseWalletConnect}
-          onClick={onConnect}
+        <Grid
+          container
+          direction="column"
         >
-          {loading ? <CircularProgress size={25} /> : 'Connect Dapp'}
-        </ButtonStyled>
+          <InputField
+            label="WalletConnect key"
+            onChange={onUriChange}
+            value={uri}
+            disabled={!canUseWalletConnect}
+          />
+          <ButtonStyled
+            variant="primary"
+            disabled={!uri || !canUseWalletConnect}
+            onClick={onConnect}
+          >
+            {loading ? <CircularProgress size={24} /> : 'Connect Dapp'}
+          </ButtonStyled>
+        </Grid>
       </Grid>
     </Grid>
   )
@@ -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
diff --git 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<HTMLButtonElement> {
 }
 
 export const Button = styled('button')<ButtonProps>`
-  display: inline-flex;
+  display: inline-block;
   padding: 0.5rem 1rem;
   font-size: 1rem;
   height: 100%;
@@ -21,6 +21,7 @@ export const Button = styled('button')<ButtonProps>`
   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
@@ -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 && (
             <ButtonStyled
               onClick={onAdd}
-              variant="secondary"
+              variant={actionButtonVariant}
               disabled={!selected || !!errorMessage}
               data-cy="button-add-watched-account"
             >
-              Add
+              {actionButtonLabel}
             </ButtonStyled>
           )}
         </BoxStyled>
@@ -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
@@ -13,7 +13,7 @@ export interface IWalletConnectContext {
   web3wallet: IWeb3Wallet | undefined
   core: ICore
   pair: (params: { uri: string }) => Promise<PairingTypes.Struct>
-  refresh: () => void
+  refresh: () => Promise<void>
 }
 
 const WalletConnectContext = createContext<IWalletConnectContext | undefined>(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