Bump deps (#588)

ChainSafe · Nov 22, 2024 · c98f2bf · c98f2bf
1 parent 27df741
commit c98f2bf
Show file tree

Hide file tree

Showing 11 changed files with 1,535 additions and 1,778 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/extrinsic-display.cy.ts b/packages/ui/cypress/tests/extrinsic-display.cy.ts
@@ -17,7 +17,7 @@ describe('Verify extrinsics display', () => {
     })
   })
 
-  it('The omnipool.sell extrinsic is displayed in plank', () => {
+  it('The router.sell extrinsic is displayed in plank', () => {
     multisigPage.accountHeader().within(() => {
       accountDisplay.addressLabel().should('contain.text', expectedMultisigAddress.slice(0, 6))
     })
@@ -28,12 +28,12 @@ describe('Verify extrinsics display', () => {
       .within(() => {
         multisigPage.pendingTransactionItem().should('have.length', 1)
         multisigPage.pendingTransactionItem().within(() => {
-          multisigPage.pendingTransactionCallName().should('contain.text', 'omnipool.sell')
+          multisigPage.pendingTransactionCallName().should('contain.text', 'router.sell')
           multisigPage.unknownCallIcon().should('not.exist')
           multisigPage.unknownCallAlert().should('not.exist')
           expander.paramExpander().click()
-          expander.contentExpander().should('contain', 'amount: 10,000,000,000,000')
-          expander.contentExpander().should('contain', 'min_buy_amount: 59,509')
+          expander.contentExpander().should('contain', 'amount_in: 10,000,000,000,000')
+          expander.contentExpander().should('contain', 'min_amount_out: 72,179')
         })
       })
   })

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.method).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,57 +3,57 @@
   "version": "0.1.0",
   "license": "Apache-2.0",
   "dependencies": {
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
-    "@fontsource/jost": "^5.0.17",
-    "@mui/material": "^5.15.15",
-    "@mui/styled-engine": "^5.15.14",
-    "@polkadot/api": "^13.1.1",
-    "@polkadot/api-augment": "^13.1.1",
-    "@polkadot/extension-dapp": "^0.52.3",
-    "@polkadot/react-identicon": "^3.10.1",
-    "@polkadot/types": "^13.1.1",
-    "@polkadot/util-crypto": "^13.1.1",
-    "@tanstack/react-query": "^5.29.2",
+    "@emotion/react": "^11.13.5",
+    "@emotion/styled": "^11.13.5",
+    "@fontsource/jost": "^5.1.1",
+    "@mui/material": "^6.1.8",
+    "@mui/styled-engine": "^6.1.8",
+    "@polkadot/api": "^14.3.1",
+    "@polkadot/api-augment": "^14.3.1",
+    "@polkadot/extension-dapp": "^0.56.2",
+    "@polkadot/react-identicon": "^3.11.3",
+    "@polkadot/types": "^14.3.1",
+    "@polkadot/util-crypto": "^13.2.3",
+    "@tanstack/react-query": "^5.61.0",
     "@types/react-router-dom": "^5.3.3",
-    "@walletconnect/web3wallet": "^1.11.2",
-    "dayjs": "^1.11.10",
-    "graphql": "^16.8.1",
-    "graphql-request": "^6.1.0",
+    "@walletconnect/web3wallet": "^1.16.1",
+    "dayjs": "^1.11.13",
+    "graphql": "^16.9.0",
+    "graphql-request": "^7.1.2",
     "graphql-ws": "^5.16.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-icons": "^5.1.0",
-    "react-router-dom": "^6.22.3",
-    "reactflow": "^11.11.1",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-icons": "^5.3.0",
+    "react-router-dom": "^6.28.0",
+    "reactflow": "^11.11.4",
     "rxjs": "^7.8.1",
-    "typescript": "5.4.5",
-    "vite": "^5.4.7"
+    "typescript": "5.7.2",
+    "vite": "^5.4.11"
   },
   "devDependencies": {
-    "@chainsafe/cypress-polkadot-wallet": "^2.2.0",
-    "@eslint/js": "^9.0.0",
-    "@graphql-codegen/cli": "5.0.2",
-    "@graphql-codegen/client-preset": "4.2.5",
+    "@chainsafe/cypress-polkadot-wallet": "^2.3.0",
+    "@eslint/js": "^9.15.0",
+    "@graphql-codegen/cli": "5.0.3",
+    "@graphql-codegen/client-preset": "4.5.0",
     "@graphql-codegen/typescript-react-query": "^6.1.0",
     "@graphql-eslint/eslint-plugin": "^3.20.1",
-    "@polkadot/extension-inject": "^0.52.3",
-    "@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",
+    "@polkadot/extension-inject": "^0.56.2",
+    "@polkadot/typegen": "^14.3.1",
+    "@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
@@ -399,15 +399,18 @@ const ManualExtrinsic = ({
                 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/useAutocomplete/useAutocomplete'
 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'>)