merge main

ChainSafe · Nov 22, 2024 · ff75a6e · ff75a6e
2 parents 77ce053 + c98f2bf
commit ff75a6e
Show file tree

Hide file tree

Showing 12 changed files with 2,042 additions and 2,452 deletions.
diff --git a/package.json b/package.json
@@ -37,10 +37,10 @@
     "ui:start-with-chopsticks": "yarn workspace multix-ui start-with-chopsticks"
   },
   "devDependencies": {
-    "concurrently": "^8.2.2",
+    "concurrently": "^9.1.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "prettier": "^3.2.5"
+    "eslint-plugin-prettier": "^5.2.1",
+    "prettier": "^3.3.3"
   },
   "resolutions": {
     "graphql": "^16.0.0",

diff --git a/packages/ui/cypress/tests/setIdentity.cy.ts b/packages/ui/cypress/tests/setIdentity.cy.ts
@@ -1,10 +1,10 @@
-import { landingPageNetwork, landingPageUrl } from '../fixtures/landingData'
+import { landingPageNetwork } from '../fixtures/landingData'
 import { setIdentityMultisigs } from '../fixtures/setIdentity/setIdentityMultisigs'
 import { setIdentitySignatories } from '../fixtures/setIdentity/setIdentitySignatories'
 import { multisigPage } from '../support/page-objects/multisigPage'
 import { sendTxModal } from '../support/page-objects/sendTxModal'
 import { topMenuItems } from '../support/page-objects/topMenuItems'
-import { waitForTxRequest } from '../utils/waitForTxRequests'
+// import { waitForTxRequest } from '../utils/waitForTxRequests'
 
 describe('Set an identity', () => {
   // joystream network isn't supported any more.
@@ -25,69 +25,69 @@ describe('Set an identity', () => {
     sendTxModal.selectionEasySetupSetIdentity().should('not.exist')
   })
 
-  it.skip('Can set an identity from the options menu', () => {
-    const multisigSignatoryWithoutIdentity = setIdentitySignatories[1]
-    cy.setupAndVisit({
-      url: landingPageUrl,
-      extensionConnectionAllowed: true,
-      injectExtensionWithAccounts: [multisigSignatoryWithoutIdentity]
-    })
-    multisigPage.optionsMenuButton().click()
-    multisigPage.setIdentityMenuOption().should('be.visible').click()
-    sendTxModal.sendTxTitle().should('be.visible')
-    sendTxModal.setIdentitySection().should('be.visible')
+  // it.skip('Can set an identity from the options menu', () => {
+  //   const multisigSignatoryWithoutIdentity = setIdentitySignatories[1]
+  //   cy.setupAndVisit({
+  //     url: landingPageUrl,
+  //     extensionConnectionAllowed: true,
+  //     injectExtensionWithAccounts: [multisigSignatoryWithoutIdentity]
+  //   })
+  //   multisigPage.optionsMenuButton().click()
+  //   multisigPage.setIdentityMenuOption().should('be.visible').click()
+  //   sendTxModal.sendTxTitle().should('be.visible')
+  //   sendTxModal.setIdentitySection().should('be.visible')
 
-    // every field is empty to start with
-    sendTxModal.setIdentityFieldInput('display').should('have.value', '')
-    sendTxModal.setIdentityFieldInput('legal').should('have.value', '')
+  //   // every field is empty to start with
+  //   sendTxModal.setIdentityFieldInput('display').should('have.value', '')
+  //   sendTxModal.setIdentityFieldInput('legal').should('have.value', '')
 
-    // typing into legal with empty display should show an error
-    sendTxModal.setIdentityField('legal').type('le')
-    sendTxModal.sendTxError().should('contain', 'Display name is required')
-    sendTxModal.setIdentityFieldElement('display', 'label').should('have.class', 'Mui-error')
-    sendTxModal.setIdentityFieldElement('display', 'div').should('have.class', 'Mui-error')
-    sendTxModal.buttonSend().should('be.disabled')
+  //   // typing into legal with empty display should show an error
+  //   sendTxModal.setIdentityField('legal').type('le')
+  //   sendTxModal.sendTxError().should('contain', 'Display name is required')
+  //   sendTxModal.setIdentityFieldElement('display', 'label').should('have.class', 'Mui-error')
+  //   sendTxModal.setIdentityFieldElement('display', 'div').should('have.class', 'Mui-error')
+  //   sendTxModal.buttonSend().should('be.disabled')
 
-    // typing into display should remove the error
-    sendTxModal.setIdentityField('display').type('diis')
-    sendTxModal.sendTxError().should('not.exist')
-    sendTxModal.setIdentityFieldElement('display', 'label').should('not.have.class', 'Mui-error')
-    sendTxModal.buttonSend().should('be.enabled')
+  //   // typing into display should remove the error
+  //   sendTxModal.setIdentityField('display').type('diis')
+  //   sendTxModal.sendTxError().should('not.exist')
+  //   sendTxModal.setIdentityFieldElement('display', 'label').should('not.have.class', 'Mui-error')
+  //   sendTxModal.buttonSend().should('be.enabled')
 
-    // typing a too long field should show another error
-    sendTxModal.setIdentityField('legal').type('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
-    sendTxModal.sendTxError().should('contain', 'A field exceeds the 32 character limit')
-    sendTxModal.setIdentityFieldElement('legal', 'label').should('have.class', 'Mui-error')
-    sendTxModal.buttonSend().should('be.disabled')
+  //   // typing a too long field should show another error
+  //   sendTxModal.setIdentityField('legal').type('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
+  //   sendTxModal.sendTxError().should('contain', 'A field exceeds the 32 character limit')
+  //   sendTxModal.setIdentityFieldElement('legal', 'label').should('have.class', 'Mui-error')
+  //   sendTxModal.buttonSend().should('be.disabled')
 
-    // too many bytes should show the From error
-    sendTxModal.setIdentityField('legal').type('{selectall}{del}aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
-    sendTxModal.setIdentityFieldElement('legal', 'label').should('not.have.class', 'Mui-error')
-    sendTxModal.sendTxError().should('contain', `The "From" account doesn't have`)
-    sendTxModal.buttonSend().should('be.disabled')
+  //   // too many bytes should show the From error
+  //   sendTxModal.setIdentityField('legal').type('{selectall}{del}aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
+  //   sendTxModal.setIdentityFieldElement('legal', 'label').should('not.have.class', 'Mui-error')
+  //   sendTxModal.sendTxError().should('contain', `The "From" account doesn't have`)
+  //   sendTxModal.buttonSend().should('be.disabled')
 
-    // removing should remove the error
-    sendTxModal.setIdentityField('legal').type('{selectall}{del}leeg')
-    sendTxModal.sendTxError().should('not.exist')
-    sendTxModal.setIdentityFieldElement('legal', 'label').should('not.have.class', 'Mui-error')
-    sendTxModal.buttonSend().should('be.enabled')
+  //   // removing should remove the error
+  //   sendTxModal.setIdentityField('legal').type('{selectall}{del}leeg')
+  //   sendTxModal.sendTxError().should('not.exist')
+  //   sendTxModal.setIdentityFieldElement('legal', 'label').should('not.have.class', 'Mui-error')
+  //   sendTxModal.buttonSend().should('be.enabled')
 
-    // verify the tx it sends
-    sendTxModal.buttonSend().click()
-    waitForTxRequest()
-    cy.getTxRequests().then((req) => {
-      const txRequests = Object.values(req)
-      cy.wrap(txRequests.length).should('eq', 1)
-      cy.wrap(txRequests[0].payload.address).should('eq', multisigSignatoryWithoutIdentity.address)
-      sendTxModal.buttonSend().should('not.exist')
-      sendTxModal.buttonSending().should('be.visible')
-      // expected https://polkadot.js.org/apps/?rpc=wss%3A%2F%2Frococo-rpc.polkadot.io#/extrinsics/decode/0x1f0102000412ad770206045069201514711dc2456908b0af226442d475d12a5334e9c4513e001901000564696973056c6565670000000000000000
-      cy.wrap(txRequests[0].payload).should(
-        'eq',
-        '0x1f0102000412ad770206045069201514711dc2456908b0af226442d475d12a5334e9c4513e001901000564696973056c6565670000000000000000'
-      )
-    })
-  })
+  //   // verify the tx it sends
+  //   sendTxModal.buttonSend().click()
+  //   waitForTxRequest()
+  //   cy.getTxRequests().then((req) => {
+  //     const txRequests = Object.values(req)
+  //     cy.wrap(txRequests.length).should('eq', 1)
+  //     cy.wrap(txRequests[0].payload.address).should('eq', multisigSignatoryWithoutIdentity.address)
+  //     sendTxModal.buttonSend().should('not.exist')
+  //     sendTxModal.buttonSending().should('be.visible')
+  //     // expected https://polkadot.js.org/apps/?rpc=wss%3A%2F%2Frococo-rpc.polkadot.io#/extrinsics/decode/0x1f0102000412ad770206045069201514711dc2456908b0af226442d475d12a5334e9c4513e001901000564696973056c6565670000000000000000
+  //     cy.wrap(txRequests[0].payload.method).should(
+  //       'eq',
+  //       '0x1f0102000412ad770206045069201514711dc2456908b0af226442d475d12a5334e9c4513e001901000564696973056c6565670000000000000000'
+  //     )
+  //   })
+  // })
 
   // skipping since identity now needs to be handled with the associatedppl chain
   it.skip('Can edit an identity from the new tx button', () => {

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -3,36 +3,36 @@
   "version": "0.1.0",
   "license": "Apache-2.0",
   "dependencies": {
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
-    "@fontsource/jost": "^5.0.17",
+    "@emotion/react": "^11.13.5",
+    "@emotion/styled": "^11.13.5",
+    "@fontsource/jost": "^5.1.1",
     "@mui/base": "^5.0.0-beta.58",
-    "@mui/material": "^5.15.15",
-    "@mui/styled-engine": "^5.15.14",
+    "@mui/material": "^6.1.8",
+    "@mui/styled-engine": "^6.1.8",
     "@polkadot-api/descriptors": "portal:.papi/descriptors",
-    "@polkadot-api/tx-utils": "^0.0.4",
+    "@polkadot-api/tx-utils": "^0.0.6",
     "@polkadot-labs/hdkd": "^0.0.8",
     "@polkadot-labs/hdkd-helpers": "^0.0.8",
-    "@polkadot/react-identicon": "^3.10.1",
-    "@polkadot/util-crypto": "^13.1.1",
-    "@reactive-dot/core": "^0.19.0",
-    "@reactive-dot/react": "^0.19.0",
-    "@tanstack/react-query": "^5.29.2",
+    "@polkadot/react-identicon": "^3.11.3",
+    "@polkadot/util-crypto": "^13.2.3",
+    "@reactive-dot/core": "^0.26.2",
+    "@reactive-dot/react": "^0.26.2",
+    "@tanstack/react-query": "^5.61.0",
     "@types/react-router-dom": "^5.3.3",
-    "@walletconnect/web3wallet": "^1.11.2",
-    "dayjs": "^1.11.10",
-    "dot-connect": "^0.12.0",
-    "graphql": "^16.8.1",
-    "graphql-request": "^6.1.0",
+    "@walletconnect/web3wallet": "^1.16.1",
+    "dayjs": "^1.11.13",
+    "dot-connect": "^0.13.2",
+    "graphql": "^16.9.0",
+    "graphql-request": "^7.1.2",
     "graphql-ws": "^5.16.0",
-    "polkadot-api": "^1.6.5",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-icons": "^5.1.0",
-    "react-router-dom": "^6.22.3",
-    "reactflow": "^11.11.1",
-    "typescript": "5.4.5",
-    "vite": "^5.4.7"
+    "polkadot-api": "^1.7.7",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-icons": "^5.3.0",
+    "react-router-dom": "^6.28.0",
+    "reactflow": "^11.11.4",
+    "typescript": "5.7.2",
+    "vite": "^5.4.11"
   },
   "devDependencies": {
     "@chainsafe/cypress-polkadot-wallet": "^2.3.0",
@@ -41,22 +41,21 @@
     "@graphql-codegen/client-preset": "4.2.5",
     "@graphql-codegen/typescript-react-query": "^6.1.0",
     "@graphql-eslint/eslint-plugin": "^3.20.1",
-    "@polkadot/typegen": "^13.1.1",
-    "@types/node": "^20.12.7",
-    "@types/react-dom": "^18.2.25",
-    "@typescript-eslint/eslint-plugin": "^7.6.0",
-    "@typescript-eslint/parser": "^7.6.0",
-    "@vitejs/plugin-react": "^4.2.1",
-    "cypress": "^13.12.0",
-    "cypress-wait-until": "^3.0.1",
-    "eslint": "^8.57.0",
+    "@types/node": "^22.9.1",
+    "@types/react-dom": "^18.3.1",
+    "@typescript-eslint/eslint-plugin": "^8.15.0",
+    "@typescript-eslint/parser": "^8.15.0",
+    "@vitejs/plugin-react": "^4.3.3",
+    "cypress": "^13.16.0",
+    "cypress-wait-until": "^3.0.2",
+    "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-cypress": "^2.15.2",
-    "eslint-plugin-react": "^7.34.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "globals": "^15.0.0",
+    "eslint-plugin-cypress": "^4.1.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "globals": "^15.12.0",
     "ts-node": "^10.9.2",
-    "vite-plugin-svgr": "^4.2.0"
+    "vite-plugin-svgr": "^4.3.0"
   },
   "scripts": {
     "start": "vite --port 3333",

diff --git a/packages/ui/src/components/EasySetup/ManualExtrinsic.tsx b/packages/ui/src/components/EasySetup/ManualExtrinsic.tsx
@@ -397,15 +397,18 @@
 //                 label={`${paramField.name}${paramField.optional ? ' (optional)' : ''}`}
 //                 value={inputParams[ind] ? inputParams[ind].value : ''}
 //                 onChange={(event) => onParamChange(event, { ind, paramField })}
-//                 InputProps={{
-//                   endAdornment: isTypeBalanceWithBalanceCall(
-//                     paramField.typeName,
-//                     `${palletRpc}.${callable}`
-//                   ) && (
-//                     <InputAdornment position="end">{chainInfo?.tokenSymbol || ''}</InputAdornment>
-//                   )
+//                 slotProps={{
+//                   input: {
+//                     endAdornment: isTypeBalanceWithBalanceCall(
+//                       paramField.typeName,
+//                       `${palletRpc}.${callable}`
+//                     ) && (
+//                       <InputAdornment position="end">{chainInfo?.tokenSymbol || ''}</InputAdornment>
+//                     )
+//                   },
+
+//                   htmlInput: { 'data-cy': `param-input-${paramField.name}` }
 //                 }}
-//                 inputProps={{ 'data-cy': `param-input-${paramField.name}` }}
 //               />
 //             </li>
 //           )

diff --git a/packages/ui/src/components/library/Autocomplete.tsx b/packages/ui/src/components/library/Autocomplete.tsx
@@ -1,17 +1,19 @@
-import { Autocomplete as AutocompleteMui, Box, Popper } from '@mui/material'
+import {
+  AutocompleteFreeSoloValueMapping,
+  Autocomplete as AutocompleteMui,
+  Box,
+  FilterOptionsState,
+  Popper
+} from '@mui/material'
 import React from 'react'
 import { styled } from '@mui/material/styles'
 import {
+  AutocompleteInputChangeReason,
   AutocompleteRenderInputParams,
-  AutocompleteRenderOptionState
+  AutocompleteRenderOptionState,
+  AutocompleteValue
 } from '@mui/material/Autocomplete/Autocomplete'
 import { HiOutlineChevronDown } from 'react-icons/hi2'
-import {
-  AutocompleteFreeSoloValueMapping,
-  AutocompleteInputChangeReason,
-  AutocompleteValue,
-  FilterOptionsState
-} from '@mui/base'
 import { theme } from '../../styles/theme'
 
 interface AutocompleteProps<T, Multiple, DisableClearable, FreeSolo> {
@@ -89,8 +91,10 @@ const Autocomplete = <
         renderOption={renderOption}
         popupIcon={<HiOutlineChevronDown />}
         renderInput={renderInput}
-        PopperComponent={PopperStyled}
         {...props}
+        slots={{
+          popper: PopperStyled
+        }}
       />
     </AutocompleteWrapper>
   )

diff --git a/packages/ui/src/components/select/MultiProxySelection.tsx b/packages/ui/src/components/select/MultiProxySelection.tsx
@@ -169,18 +169,23 @@ const MultiProxySelection = ({ className, testId = '' }: Props) => {
       {...params}
       inputRef={ref}
       label=""
-      InputProps={{
-        ...params.InputProps,
-        startAdornment: addressToShow && (
-          <InputAdornment position="start">
-            <IdenticonBadge
-              address={addressToShow}
-              badge={isSelectedProxy ? AccountBadge.PURE : AccountBadge.MULTI}
-            />
-          </InputAdornment>
-        )
+      slotProps={{
+        input: {
+          ...params.InputProps,
+          startAdornment: addressToShow && (
+            <InputAdornment position="start">
+              <IdenticonBadge
+                address={addressToShow}
+                badge={isSelectedProxy ? AccountBadge.PURE : AccountBadge.MULTI}
+              />
+            </InputAdornment>
+          )
+        },
+        htmlInput: {
+          ...params.inputProps,
+          'data-cy': `input-select-multiproxy-${testId}`
+        }
       }}
-      inputProps={{ ...params.inputProps, 'data-cy': `input-select-multiproxy-${testId}` }}
       onKeyDown={handleSpecialKeys}
     />
   )

diff --git a/packages/ui/src/components/select/OptionMenuItem.tsx b/packages/ui/src/components/select/OptionMenuItem.tsx
@@ -10,7 +10,6 @@ interface OptionMenuProps {
 const OptionMenuItem = ({ keyValue, children, ...props }: OptionMenuProps) => (
   <BoxStyled
     key={keyValue}
-    component="li"
     {...props}
   >
     {children}

diff --git a/packages/ui/src/styles/theme.ts b/packages/ui/src/styles/theme.ts
@@ -196,4 +196,4 @@ export const theme = createTheme({
       red: 'firebrick'
     }
   }
-} as ThemeOptions)
+} as Omit<ThemeOptions, 'components'>)
diff --git a/packages/ui/src/utils/isValidAddress.ts b/packages/ui/src/utils/isValidAddress.ts
@@ -6,7 +6,7 @@ export const isValidAddress = (address: string | Uint8Array | null | undefined)
     encodeAddress(isHex(address) ? hexToU8a(address) : decodeAddress(address))
 
     return true
-  } catch (error) {
+  } catch {
     // if it's an ethereum address it can't be decoded but could still be valid
     if (typeof address === 'string' && address.startsWith('0x') && address.length === 42) {
       return true

diff --git a/packages/ui/src/walletConfigs.ts b/packages/ui/src/walletConfigs.ts
@@ -1,11 +1,11 @@
 import type { Config } from '@reactive-dot/core'
-import { InjectedWalletAggregator } from '@reactive-dot/core/wallets.js'
+import { InjectedWalletProvider } from '@reactive-dot/core/wallets.js'
 import { registerDotConnect } from 'dot-connect'
 import { DAPP_NAME } from './constants'
 
 export const config = {
   chains: {},
-  wallets: [new InjectedWalletAggregator({ originName: DAPP_NAME })]
+  wallets: [new InjectedWalletProvider({ originName: DAPP_NAME })]
 } satisfies Config
 
 // Register dot-connect custom elements & configure supported wallets