update grid

ChainSafe · Dec 3, 2024 · a6abfc2 · a6abfc2
1 parent d43229a
commit a6abfc2
Show file tree

Hide file tree

Showing 24 changed files with 185 additions and 442 deletions.
diff --git a/packages/ui/src/components/AccountEditName.tsx b/packages/ui/src/components/AccountEditName.tsx
@@ -1,4 +1,4 @@
-import { Grid } from '@mui/material'
+import { Grid2 as Grid } from '@mui/material'
 import { ChangeEvent, useCallback, useMemo, useState } from 'react'
 import { useAccounts } from '../contexts/AccountsContext'
 import { useAccountNames } from '../contexts/AccountNamesContext'
@@ -45,23 +45,15 @@ const AccountEditName = ({ address, onNameChange, className, testId }: Props) =>
       spacing={2}
     >
       <Grid
-        item
-        xs={12}
-        sm={6}
-        md={4}
+        size={{ xs: 12, sm: 6, md: 4 }}
         alignItems="center"
       >
         <AccountDisplay
           address={address}
           withName={false}
         />
       </Grid>
-      <Grid
-        item
-        xs={12}
-        sm={6}
-        md={8}
-      >
+      <Grid size={{ xs: 12, sm: 6, md: 8 }}>
         <InputField
           label={`Name${isExtensionAccount ? ' (from extension)' : ''}`}
           onChange={onChange}

diff --git a/packages/ui/src/components/DeepTxAlert.tsx b/packages/ui/src/components/DeepTxAlert.tsx
@@ -1,4 +1,4 @@
-import { Alert, Grid } from '@mui/material'
+import { Alert, Grid2 as Grid } from '@mui/material'
 import { styled } from '@mui/material/styles'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useMultisigsByMultisigOrPureSignatoriesQuery } from '../../types-and-hooks'
@@ -217,30 +217,19 @@ export const DeepTxAlert = ({ pendingTxCallData }: Props) => {
           data-cy="banner-nested-multisig-tx"
         >
           <Grid
-            item
-            xs={12}
-            sm={9}
-            md={9}
+            size={{ xs: 12, sm: 9, md: 9 }}
             container
           >
             <Grid
-              item
-              xs={12}
-              sm={12}
-              md={12}
-              lg={6}
+              size={{ xs: 12, sm: 12, md: 12, lg: 6 }}
               display="flex"
               alignItems="center"
               className="gridItem"
             >
               Pending tx <FunctionNameStyled>{data1.name}</FunctionNameStyled>
             </Grid>
             <Grid
-              item
-              xs={12}
-              sm={12}
-              md={12}
-              lg={6}
+              size={{ xs: 12, sm: 12, md: 12, lg: 6 }}
               display="flex"
               alignItems="center"
               className="gridItem"
@@ -254,10 +243,7 @@ export const DeepTxAlert = ({ pendingTxCallData }: Props) => {
             </Grid>
           </Grid>
           <Grid
-            item
-            xs={12}
-            sm={3}
-            md={3}
+            size={{ xs: 12, sm: 3, md: 3 }}
             display="flex"
             alignItems="center"
             className="gridItem"

diff --git a/packages/ui/src/components/EasySetup/BalancesTransfer.tsx b/packages/ui/src/components/EasySetup/BalancesTransfer.tsx
@@ -134,10 +134,12 @@ const BalancesTransfer = ({ className, onSetExtrinsic, onSetErrorMessage, from }
         value={amountString}
         helperText={amountError}
         error={!!amountError}
-        InputProps={{
-          endAdornment: (
-            <InputAdornment position="end">{chainInfo?.tokenSymbol || ''}</InputAdornment>
-          )
+        slotProps={{
+          input: {
+            endAdornment: (
+              <InputAdornment position="end">{chainInfo?.tokenSymbol || ''}</InputAdornment>
+            )
+          }
         }}
       />
     </Box>

diff --git a/packages/ui/src/components/ErrorFallback/ErrorFallback.tsx b/packages/ui/src/components/ErrorFallback/ErrorFallback.tsx
@@ -1,5 +1,5 @@
 import { useNavigate, useRouteError } from 'react-router'
-import { Alert, AlertTitle, Grid } from '@mui/material'
+import { Alert, AlertTitle, Grid2 as Grid } from '@mui/material'
 import { theme } from '../../styles/theme'
 import { styled, ThemeProvider as MuiThemeProvider } from '@mui/material/styles'
 import { Button } from '../library'
@@ -15,10 +15,7 @@ export const ErrorFallback = () => {
         alignItems="center"
         container
       >
-        <Grid
-          item
-          xs={6}
-        >
+        <Grid size={{ xs: 6 }}>
           <AlertStyled
             severity="error"
             role="alert"

diff --git a/packages/ui/src/components/SuccessCreation.tsx b/packages/ui/src/components/SuccessCreation.tsx
@@ -1,4 +1,4 @@
-import { Box, Grid } from '@mui/material'
+import { Box, Grid2 as Grid } from '@mui/material'
 import { styled } from '@mui/material/styles'
 import { HiOutlineClock as AccessTimeIcon } from 'react-icons/hi2'
 
@@ -14,22 +14,10 @@ const SuccessCreation = ({ className }: Props) => {
         container
         alignItems="center"
       >
-        <Grid
-          item
-          xs={12}
-          sm={4}
-          md={4}
-          lg={4}
-        >
+        <Grid size={{ xs: 12, sm: 4, md: 4, lg: 4 }}>
           <AccessTimeIcon className="icon" />
         </Grid>
-        <Grid
-          item
-          xs={12}
-          sm={8}
-          md={8}
-          lg={8}
-        >
+        <Grid size={{ xs: 12, sm: 8, md: 8, lg: 8 }}>
           <h4 className="explainer">
             It shouldn&apos;t take more than 30s.
             <br />

diff --git a/packages/ui/src/components/WalletConnect/WalletConnectSession.tsx b/packages/ui/src/components/WalletConnect/WalletConnectSession.tsx
@@ -1,4 +1,4 @@
-import { Alert, Box, CircularProgress, Grid, Tooltip, styled } from '@mui/material'
+import { Alert, Box, CircularProgress, Grid2 as Grid, Tooltip, styled } from '@mui/material'
 import { Button, InputField } from '../library'
 import { useCallback, useMemo, useState, ChangeEvent } from 'react'
 import { useWalletConnect } from '../../contexts/WalletConnectContext'
@@ -35,10 +35,7 @@ export const WalletConnectSession = () => {
       container
       spacing={2}
     >
-      <Grid
-        item
-        alignItems="center"
-      >
+      <Grid alignItems="center">
         {!canUseWalletConnect && (
           <AlertStyled
             severity="warning"
@@ -50,11 +47,7 @@ export const WalletConnectSession = () => {
           </AlertStyled>
         )}
       </Grid>
-      <Grid
-        xs={12}
-        md={8}
-        item
-      >
+      <Grid size={{ xs: 12, md: 8 }}>
         <Grid
           container
           direction="column"

diff --git a/packages/ui/src/components/layout/Center.tsx b/packages/ui/src/components/layout/Center.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Grid } from '@mui/material'
+import { Grid2 as Grid } from '@mui/material'
 
 interface Props {
   className?: string
@@ -15,11 +15,6 @@ export const Center = ({ children, className }: Props) => (
     justifyContent="center"
     style={{ height: '100%' }}
   >
-    <Grid
-      item
-      xs={3}
-    >
-      {children}
-    </Grid>
+    <Grid size={{ xs: 3 }}>{children}</Grid>
   </Grid>
 )
diff --git a/packages/ui/src/components/library/Autocomplete.tsx b/packages/ui/src/components/library/Autocomplete.tsx
@@ -75,6 +75,7 @@ const Autocomplete = <
   return (
     <AutocompleteWrapper className={className}>
       <AutocompleteMui
+        {...props}
         handleHomeEndKeys={handleHomeEndKeys}
         selectOnFocus={selectOnFocus}
         clearOnBlur={clearOnBlur}
@@ -91,7 +92,6 @@ const Autocomplete = <
         renderOption={renderOption}
         popupIcon={<HiOutlineChevronDown />}
         renderInput={renderInput}
-        {...props}
         slots={{
           popper: PopperStyled
         }}

diff --git a/packages/ui/src/components/modals/ChangeMultisig.tsx b/packages/ui/src/components/modals/ChangeMultisig.tsx
@@ -5,7 +5,7 @@ import {
   Dialog,
   DialogContent,
   DialogTitle,
-  Grid
+  Grid2 as Grid
 } from '@mui/material'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { styled } from '@mui/material/styles'
@@ -347,10 +347,7 @@ const ChangeMultisig = ({ onClose, className }: Props) => {
         <Grid container>
           {currentStep === 'selection' && (
             <>
-              <Grid
-                item
-                xs={12}
-              >
+              <Grid size={{ xs: 12 }}>
                 {!hasProxyEnoughFunds && (
                   <Alert severity="error">
                     The pure account doesn&apos;t have enough funds. It needs at least{' '}
@@ -383,10 +380,7 @@ const ChangeMultisig = ({ onClose, className }: Props) => {
                   </>
                 )}
               </Grid>
-              <Grid
-                item
-                xs={12}
-              >
+              <Grid size={{ xs: 12 }}>
                 <h4>Signatories</h4>
                 <Box className="subSection">
                   <SignatorySelection
@@ -395,10 +389,7 @@ const ChangeMultisig = ({ onClose, className }: Props) => {
                   />
                 </Box>
               </Grid>
-              <Grid
-                item
-                xs={12}
-              >
+              <Grid size={{ xs: 12 }}>
                 <h4>Threshold</h4>
                 <Box className="subSection">
                   <ThresholdSelection
@@ -446,8 +437,7 @@ const ChangeMultisig = ({ onClose, className }: Props) => {
             </Grid>
           )}
           <Grid
-            item
-            xs={12}
+            size={{ xs: 12 }}
             className="buttonContainer"
           >
             {!!errorMessage && <AlertStyled severity="warning">{errorMessage}</AlertStyled>}