From 8826af3859077adf3c97920129b4561a38234e78 Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Mon, 7 Aug 2023 13:38:39 +0200
Subject: [PATCH] Fix: prevent key prop warning in EthHashInfo (#2351)

* Fix: prevent key prop warning in EthHashInfo

Fix: prevent key prop warning in EthHashInfo

Fix: prevent key prop warning in EthHashInfo

* Fix tests

* PR comments
---
 package.json                                  |   6 +-
 .../SrcEthHashInfo/CopyAddressButton.tsx      |  14 +++
 .../EthHashInfo/SrcEthHashInfo/index.tsx      |  96 +++++++++++++++
 .../SrcEthHashInfo/styles.module.css          |  22 ++++
 src/components/common/EthHashInfo/index.tsx   |  11 +-
 .../common/ExplorerButton/index.tsx           |  27 +++++
 src/components/common/ImageFallback/index.tsx |  19 ++-
 .../settings/DelegatesList/index.tsx          |   4 +-
 .../sidebar/SidebarHeader/index.tsx           |  12 +-
 .../sidebar/SidebarHeader/styles.module.css   |   1 +
 .../tx-flow/flows/AddOwner/ChooseOwner.tsx    |   2 +-
 .../flows/RemoveOwner/ReviewRemoveOwner.tsx   |   2 +-
 .../ApprovalEditorForm.test.tsx               |   8 +-
 .../tx/ApprovalEditor/ApprovalItem.tsx        |   4 +-
 .../tx/security/redefine/useRedefine.ts       |   7 +-
 src/hooks/useSafeTokenAllocation.ts           |   2 +
 yarn.lock                                     | 114 ++++++++++--------
 17 files changed, 262 insertions(+), 89 deletions(-)
 create mode 100644 src/components/common/EthHashInfo/SrcEthHashInfo/CopyAddressButton.tsx
 create mode 100644 src/components/common/EthHashInfo/SrcEthHashInfo/index.tsx
 create mode 100644 src/components/common/EthHashInfo/SrcEthHashInfo/styles.module.css
 create mode 100644 src/components/common/ExplorerButton/index.tsx

diff --git a/package.json b/package.json
index a782ecfee1..a64be9f03e 100644
--- a/package.json
+++ b/package.json
@@ -41,8 +41,8 @@
     "@emotion/react": "^11.10.0",
     "@emotion/server": "^11.10.0",
     "@emotion/styled": "^11.10.0",
-    "@mui/icons-material": "^5.8.4",
-    "@mui/material": "^5.13.5",
+    "@mui/icons-material": "^5.14.3",
+    "@mui/material": "^5.14.3",
     "@mui/x-date-pickers": "^5.0.12",
     "@reduxjs/toolkit": "^1.9.5",
     "@safe-global/safe-apps-sdk": "7.11.0",
@@ -52,7 +52,7 @@
     "@safe-global/safe-ethers-lib": "^1.9.4",
     "@safe-global/safe-gateway-typescript-sdk": "^3.8.0",
     "@safe-global/safe-modules-deployments": "^1.0.0",
-    "@safe-global/safe-react-components": "^2.0.5",
+    "@safe-global/safe-react-components": "^2.0.6",
     "@sentry/react": "^7.28.1",
     "@sentry/tracing": "^7.28.1",
     "@truffle/hdwallet-provider": "^2.1.4",
diff --git a/src/components/common/EthHashInfo/SrcEthHashInfo/CopyAddressButton.tsx b/src/components/common/EthHashInfo/SrcEthHashInfo/CopyAddressButton.tsx
new file mode 100644
index 0000000000..f432cf1028
--- /dev/null
+++ b/src/components/common/EthHashInfo/SrcEthHashInfo/CopyAddressButton.tsx
@@ -0,0 +1,14 @@
+import CopyButton from '../../CopyButton'
+
+type CopyAddressButtonProps = {
+  prefix?: string
+  address: string
+  copyPrefix?: boolean
+}
+
+const CopyAddressButton = ({ prefix, address, copyPrefix }: CopyAddressButtonProps): React.ReactElement => {
+  const addressText = copyPrefix && prefix ? `${prefix}:${address}` : address
+  return <CopyButton text={addressText} />
+}
+
+export default CopyAddressButton
diff --git a/src/components/common/EthHashInfo/SrcEthHashInfo/index.tsx b/src/components/common/EthHashInfo/SrcEthHashInfo/index.tsx
new file mode 100644
index 0000000000..71739f738d
--- /dev/null
+++ b/src/components/common/EthHashInfo/SrcEthHashInfo/index.tsx
@@ -0,0 +1,96 @@
+import type { ReactNode, ReactElement } from 'react'
+import { isAddress } from 'ethers/lib/utils'
+import { useTheme } from '@mui/material/styles'
+import Box from '@mui/material/Box'
+import useMediaQuery from '@mui/material/useMediaQuery'
+import Identicon from '../../Identicon'
+import CopyAddressButton from '../../CopyAddressButton'
+import ExplorerButton, { type ExplorerButtonProps } from '../../ExplorerButton'
+import { shortenAddress } from '@/utils/formatters'
+import ImageFallback from '../../ImageFallback'
+import css from './styles.module.css'
+
+export type EthHashInfoProps = {
+  address: string
+  chainId?: string
+  name?: string | null
+  showAvatar?: boolean
+  showCopyButton?: boolean
+  prefix?: string
+  showPrefix?: boolean
+  copyPrefix?: boolean
+  shortAddress?: boolean
+  customAvatar?: string
+  hasExplorer?: boolean
+  avatarSize?: number
+  children?: ReactNode
+  ExplorerButtonProps?: ExplorerButtonProps
+}
+
+const SrcEthHashInfo = ({
+  address,
+  customAvatar,
+  prefix = '',
+  copyPrefix,
+  showPrefix,
+  shortAddress = true,
+  showAvatar = true,
+  avatarSize,
+  name,
+  showCopyButton,
+  hasExplorer,
+  ExplorerButtonProps,
+  children,
+}: EthHashInfoProps): ReactElement => {
+  const shouldPrefix = isAddress(address)
+  const theme = useTheme()
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
+
+  const identicon = <Identicon address={address} size={avatarSize} />
+
+  return (
+    <div className={css.container}>
+      {showAvatar && (
+        <div
+          className={css.avatarContainer}
+          style={avatarSize ? { width: `${avatarSize}px`, height: `${avatarSize}px` } : undefined}
+        >
+          {customAvatar ? (
+            <ImageFallback src={customAvatar} fallbackComponent={identicon} width={avatarSize} height={avatarSize} />
+          ) : (
+            identicon
+          )}
+        </div>
+      )}
+
+      <Box overflow="hidden">
+        {name && (
+          <Box sx={{ fontSize: 'body2' }} textOverflow="ellipsis" overflow="hidden" title={name}>
+            {name}
+          </Box>
+        )}
+
+        <div className={css.addressContainer}>
+          <Box fontWeight="inherit" fontSize="inherit">
+            {showPrefix && shouldPrefix && prefix && <b>{prefix}:</b>}
+            <span>{shortAddress || isMobile ? shortenAddress(address) : address}</span>
+          </Box>
+
+          {showCopyButton && (
+            <CopyAddressButton prefix={prefix} address={address} copyPrefix={shouldPrefix && copyPrefix} />
+          )}
+
+          {hasExplorer && ExplorerButtonProps && (
+            <Box color="border.main">
+              <ExplorerButton {...ExplorerButtonProps} />
+            </Box>
+          )}
+
+          {children}
+        </div>
+      </Box>
+    </div>
+  )
+}
+
+export default SrcEthHashInfo
diff --git a/src/components/common/EthHashInfo/SrcEthHashInfo/styles.module.css b/src/components/common/EthHashInfo/SrcEthHashInfo/styles.module.css
new file mode 100644
index 0000000000..6fff7b5dc1
--- /dev/null
+++ b/src/components/common/EthHashInfo/SrcEthHashInfo/styles.module.css
@@ -0,0 +1,22 @@
+.container {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  line-height: 1.4;
+}
+
+.avatarContainer {
+  flex-shrink: 0;
+}
+
+.avatarContainer > * {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+.addressContainer {
+  display: flex;
+  align-items: center;
+  gap: 0.25em;
+  white-space: nowrap;
+}
diff --git a/src/components/common/EthHashInfo/index.tsx b/src/components/common/EthHashInfo/index.tsx
index dcfd6ce100..3ae1a0e7bb 100644
--- a/src/components/common/EthHashInfo/index.tsx
+++ b/src/components/common/EthHashInfo/index.tsx
@@ -1,16 +1,15 @@
 import { type ReactElement } from 'react'
-import { EthHashInfo } from '@safe-global/safe-react-components'
 import useAddressBook from '@/hooks/useAddressBook'
 import useChainId from '@/hooks/useChainId'
 import { useAppSelector } from '@/store'
 import { selectSettings } from '@/store/settingsSlice'
 import { selectChainById } from '@/store/chainsSlice'
 import { getBlockExplorerLink } from '@/utils/chains'
-import type { EthHashInfoProps } from '@safe-global/safe-react-components'
 import css from './styles.module.css'
 import { Emoji } from './AddressEmoji'
+import SrcEthHashInfo, { type EthHashInfoProps } from './SrcEthHashInfo'
 
-const PrefixedEthHashInfo = ({
+const EthHashInfo = ({
   showName = true,
   avatarSize = 44,
   ...props
@@ -25,7 +24,7 @@ const PrefixedEthHashInfo = ({
 
   return (
     <div className={css.container}>
-      <EthHashInfo
+      <SrcEthHashInfo
         prefix={chain?.shortName}
         showPrefix={settings.shortName.show}
         copyPrefix={settings.shortName.copy}
@@ -36,10 +35,10 @@ const PrefixedEthHashInfo = ({
         avatarSize={avatarSize}
       >
         {props.children}
-      </EthHashInfo>
+      </SrcEthHashInfo>
       {showEmoji && <Emoji address={props.address} size={avatarSize} />}
     </div>
   )
 }
 
-export default PrefixedEthHashInfo
+export default EthHashInfo
diff --git a/src/components/common/ExplorerButton/index.tsx b/src/components/common/ExplorerButton/index.tsx
new file mode 100644
index 0000000000..278a011752
--- /dev/null
+++ b/src/components/common/ExplorerButton/index.tsx
@@ -0,0 +1,27 @@
+import type { ReactElement, ComponentType } from 'react'
+import { IconButton, SvgIcon, Tooltip } from '@mui/material'
+import LinkIcon from '@/public/images/common/link.svg'
+
+export type ExplorerButtonProps = {
+  title?: string
+  href?: string
+  className?: string
+  icon?: ComponentType
+}
+
+const ExplorerButton = ({ title = '', href = '', icon = LinkIcon, className }: ExplorerButtonProps): ReactElement => (
+  <Tooltip title={title} placement="top">
+    <IconButton
+      className={className}
+      target="_blank"
+      rel="noreferrer"
+      href={href}
+      size="small"
+      sx={{ color: 'inherit' }}
+    >
+      <SvgIcon component={icon} inheritViewBox fontSize="small" />
+    </IconButton>
+  </Tooltip>
+)
+
+export default ExplorerButton
diff --git a/src/components/common/ImageFallback/index.tsx b/src/components/common/ImageFallback/index.tsx
index 75e00d885c..03f91c9409 100644
--- a/src/components/common/ImageFallback/index.tsx
+++ b/src/components/common/ImageFallback/index.tsx
@@ -1,10 +1,19 @@
 import type { ReactElement } from 'react'
 import { useState } from 'react'
 
-type ImageFallbackProps = React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> & {
-  fallbackSrc: string
-  fallbackComponent?: ReactElement
-}
+type ImageAttributes = React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>
+
+type ImageFallbackProps = ImageAttributes &
+  (
+    | {
+        fallbackSrc: string
+        fallbackComponent?: ReactElement
+      }
+    | {
+        fallbackSrc?: string
+        fallbackComponent: ReactElement
+      }
+  )
 
 const ImageFallback = ({ src, fallbackSrc, fallbackComponent, ...props }: ImageFallbackProps): React.ReactElement => {
   const [isError, setIsError] = useState<boolean>(false)
@@ -14,7 +23,7 @@ const ImageFallback = ({ src, fallbackSrc, fallbackComponent, ...props }: ImageF
   return (
     <img
       {...props}
-      alt={props.alt}
+      alt={props.alt || ''}
       src={isError || src === undefined ? fallbackSrc : src}
       onError={() => setIsError(true)}
     />
diff --git a/src/components/settings/DelegatesList/index.tsx b/src/components/settings/DelegatesList/index.tsx
index b9ee500e7d..1610e2db82 100644
--- a/src/components/settings/DelegatesList/index.tsx
+++ b/src/components/settings/DelegatesList/index.tsx
@@ -2,7 +2,7 @@ import { getDelegates } from '@safe-global/safe-gateway-typescript-sdk'
 import useAsync from '@/hooks/useAsync'
 import useSafeInfo from '@/hooks/useSafeInfo'
 import { Box, Grid, Paper, SvgIcon, Tooltip, Typography } from '@mui/material'
-import PrefixedEthHashInfo from '@/components/common/EthHashInfo'
+import EthHashInfo from '@/components/common/EthHashInfo'
 import InfoIcon from '@/public/images/notifications/info.svg'
 import ExternalLink from '@/components/common/ExternalLink'
 import { HelpCenterArticle } from '@/config/constants'
@@ -61,7 +61,7 @@ const DelegatesList = () => {
                   style={{ listStyleType: 'none', marginBottom: '1em' }}
                   title={`Delegated by ${item.delegator}`}
                 >
-                  <PrefixedEthHashInfo
+                  <EthHashInfo
                     address={item.delegate}
                     showCopyButton
                     hasExplorer
diff --git a/src/components/sidebar/SidebarHeader/index.tsx b/src/components/sidebar/SidebarHeader/index.tsx
index b0bb096983..5a5ab43b20 100644
--- a/src/components/sidebar/SidebarHeader/index.tsx
+++ b/src/components/sidebar/SidebarHeader/index.tsx
@@ -28,6 +28,7 @@ import { SvgIcon } from '@mui/material'
 import { useVisibleBalances } from '@/hooks/useVisibleBalances'
 import EnvHintButton from '@/components/settings/EnvironmentVariables/EnvHintButton'
 import useSafeAddress from '@/hooks/useSafeAddress'
+import ExplorerButton from '@/components/common/ExplorerButton'
 
 const SafeHeader = (): ReactElement => {
   const currency = useAppSelector(selectCurrency)
@@ -93,16 +94,7 @@ const SafeHeader = (): ReactElement => {
           </Track>
 
           <Track {...OVERVIEW_EVENTS.OPEN_EXPLORER}>
-            <Tooltip title={blockExplorerLink?.title || ''} placement="top">
-              <IconButton
-                className={css.iconButton}
-                target="_blank"
-                rel="noreferrer"
-                href={blockExplorerLink?.href || ''}
-              >
-                <SvgIcon component={LinkIconBold} inheritViewBox fontSize="small" color="primary" />
-              </IconButton>
-            </Tooltip>
+            <ExplorerButton {...blockExplorerLink} className={css.iconButton} icon={LinkIconBold} />
           </Track>
 
           <EnvHintButton />
diff --git a/src/components/sidebar/SidebarHeader/styles.module.css b/src/components/sidebar/SidebarHeader/styles.module.css
index 05e06e5e6d..f5cf985566 100644
--- a/src/components/sidebar/SidebarHeader/styles.module.css
+++ b/src/components/sidebar/SidebarHeader/styles.module.css
@@ -24,6 +24,7 @@
 .iconButton {
   border-radius: 4px;
   padding: 6px;
+  color: var(--color-primary-main);
   background-color: var(--color-background-main);
   width: 32px;
   height: 32px;
diff --git a/src/components/tx-flow/flows/AddOwner/ChooseOwner.tsx b/src/components/tx-flow/flows/AddOwner/ChooseOwner.tsx
index 73590da568..644a057c46 100644
--- a/src/components/tx-flow/flows/AddOwner/ChooseOwner.tsx
+++ b/src/components/tx-flow/flows/AddOwner/ChooseOwner.tsx
@@ -1,4 +1,3 @@
-import { EthHashInfo } from '@safe-global/safe-react-components'
 import {
   Box,
   Typography,
@@ -27,6 +26,7 @@ import TxCard from '../../common/TxCard'
 import InfoIcon from '@/public/images/notifications/info.svg'
 import commonCss from '@/components/tx-flow/common/styles.module.css'
 import { TOOLTIP_TITLES } from '@/components/tx-flow/common/constants'
+import EthHashInfo from '@/components/common/EthHashInfo'
 
 type FormData = Pick<AddOwnerFlowProps | ReplaceOwnerFlowProps, 'newOwner' | 'threshold'>
 
diff --git a/src/components/tx-flow/flows/RemoveOwner/ReviewRemoveOwner.tsx b/src/components/tx-flow/flows/RemoveOwner/ReviewRemoveOwner.tsx
index 3c59f4b35c..676a2b1561 100644
--- a/src/components/tx-flow/flows/RemoveOwner/ReviewRemoveOwner.tsx
+++ b/src/components/tx-flow/flows/RemoveOwner/ReviewRemoveOwner.tsx
@@ -1,6 +1,5 @@
 import { useContext, useEffect } from 'react'
 import { Typography, Divider, Box, Paper, SvgIcon } from '@mui/material'
-import { EthHashInfo } from '@safe-global/safe-react-components'
 import type { ReactElement } from 'react'
 
 import SignOrExecuteForm from '@/components/tx/SignOrExecuteForm'
@@ -11,6 +10,7 @@ import { createRemoveOwnerTx } from '@/services/tx/tx-sender'
 import MinusIcon from '@/public/images/common/minus.svg'
 import { SafeTxContext } from '../../SafeTxProvider'
 import type { RemoveOwnerFlowProps } from '.'
+import EthHashInfo from '@/components/common/EthHashInfo'
 
 import commonCss from '@/components/tx-flow/common/styles.module.css'
 
diff --git a/src/components/tx/ApprovalEditor/ApprovalEditorForm.test.tsx b/src/components/tx/ApprovalEditor/ApprovalEditorForm.test.tsx
index 2b7650baa7..ea5928f06a 100644
--- a/src/components/tx/ApprovalEditor/ApprovalEditorForm.test.tsx
+++ b/src/components/tx/ApprovalEditor/ApprovalEditorForm.test.tsx
@@ -1,8 +1,8 @@
-import { fireEvent, getAllByRole, render, waitFor } from '@/tests/test-utils'
+import { fireEvent, render, waitFor } from '@/tests/test-utils'
 import { hexZeroPad } from 'ethers/lib/utils'
 import { TokenType } from '@safe-global/safe-gateway-typescript-sdk'
 import { ApprovalEditorForm } from '@/components/tx/ApprovalEditor/ApprovalEditorForm'
-import { getAllByTestId } from '@testing-library/dom'
+import { getAllByTestId, getAllByTitle } from '@testing-library/dom'
 
 describe('ApprovalEditorForm', () => {
   beforeEach(() => {
@@ -39,7 +39,7 @@ describe('ApprovalEditorForm', () => {
     expect(approvalItems).toHaveLength(2)
 
     // One button for each approval
-    const buttons = getAllByRole(result.container, 'button')
+    const buttons = getAllByTitle(result.container, 'Save')
     expect(buttons).toHaveLength(2)
 
     // First approval value is rendered
@@ -100,7 +100,7 @@ describe('ApprovalEditorForm', () => {
 
     // Change value and save
     const amountInput = result.container.querySelector('input[name="approvals.0"]') as HTMLInputElement
-    const saveButton = result.getByRole('button')
+    const saveButton = result.getByTitle('Save')
 
     fireEvent.change(amountInput!, { target: { value: '100' } })
     fireEvent.click(saveButton)
diff --git a/src/components/tx/ApprovalEditor/ApprovalItem.tsx b/src/components/tx/ApprovalEditor/ApprovalItem.tsx
index 8a75c02623..74859657e1 100644
--- a/src/components/tx/ApprovalEditor/ApprovalItem.tsx
+++ b/src/components/tx/ApprovalEditor/ApprovalItem.tsx
@@ -1,7 +1,7 @@
 import { type ReactElement } from 'react'
 import { Alert, Grid, Typography } from '@mui/material'
 import css from '@/components/tx/ApprovalEditor/styles.module.css'
-import PrefixedEthHashInfo from '@/components/common/EthHashInfo'
+import EthHashInfo from '@/components/common/EthHashInfo'
 
 const ApprovalItem = ({ spender, children }: { spender: string; children: ReactElement }) => {
   return (
@@ -20,7 +20,7 @@ const ApprovalItem = ({ spender, children }: { spender: string; children: ReactE
 
           <Grid item>
             <Typography fontSize="14px">
-              <PrefixedEthHashInfo address={spender} hasExplorer showAvatar={false} shortAddress={false} />
+              <EthHashInfo address={spender} hasExplorer showAvatar={false} shortAddress={false} />
             </Typography>
           </Grid>
         </Grid>
diff --git a/src/components/tx/security/redefine/useRedefine.ts b/src/components/tx/security/redefine/useRedefine.ts
index 7ed4b7d39a..ec3144f1a9 100644
--- a/src/components/tx/security/redefine/useRedefine.ts
+++ b/src/components/tx/security/redefine/useRedefine.ts
@@ -11,8 +11,8 @@ import {
 import type { SecurityResponse } from '@/services/security/modules/types'
 import { FEATURES } from '@/utils/chains'
 import type { SafeTransaction } from '@safe-global/safe-core-sdk-types'
-import { useState, useEffect, useMemo } from 'react'
-import { type AlertColor, type SvgIconProps } from '@mui/material'
+import { useState, useEffect, useMemo, type ComponentType } from 'react'
+import { type AlertColor } from '@mui/material'
 import { SecuritySeverity } from '@/services/security/modules/types'
 import CloseIcon from '@/public/images/common/close.svg'
 import InfoIcon from '@/public/images/notifications/info.svg'
@@ -31,8 +31,7 @@ const CRITICAL_ERRORS: Record<number, string> = {
 
 type SecurityWarningProps = {
   color: AlertColor
-  // @ts-expect-error - Use any to avoid conflicts with @svgr/webpack plugin or babel-plugin-inline-react-svg plugin.
-  icon: SvgIconProps['component']
+  icon: ComponentType
   label: string
   action?: string
 }
diff --git a/src/hooks/useSafeTokenAllocation.ts b/src/hooks/useSafeTokenAllocation.ts
index 2ea00d7151..75539eb71b 100644
--- a/src/hooks/useSafeTokenAllocation.ts
+++ b/src/hooks/useSafeTokenAllocation.ts
@@ -129,12 +129,14 @@ const useSafeTokenAllocation = (): [BigNumber | undefined, boolean] => {
       ),
     )
     // If the history tag changes we could have claimed / redeemed tokens
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [chainId, safeAddress, safe.txHistoryTag])
 
   const [balance, _error, balanceLoading] = useAsync<string>(() => {
     if (!safeAddress) return
     return fetchTokenBalance(chainId, safeAddress)
     // If the history tag changes we could have claimed / redeemed tokens
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [chainId, safeAddress, safe.txHistoryTag])
 
   const allocation = useMemo(() => {
diff --git a/yarn.lock b/yarn.lock
index 033773b8e0..970cab1ae0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1010,6 +1010,13 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
+"@babel/runtime@^7.22.5", "@babel/runtime@^7.22.6":
+  version "7.22.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.6.tgz#57d64b9ae3cff1d67eb067ae117dac087f5bd438"
+  integrity sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
 "@babel/template@^7.18.10", "@babel/template@^7.3.3":
   version "7.18.10"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.10.tgz#6f9134835970d1dbf0835c0d100c9f38de0c5e71"
@@ -2777,57 +2784,57 @@
     "@motionone/dom" "^10.16.2"
     tslib "^2.3.1"
 
-"@mui/base@5.0.0-beta.4":
-  version "5.0.0-beta.4"
-  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.4.tgz#e3f4f4a056b88ab357194a245e223177ce35e0b0"
-  integrity sha512-ejhtqYJpjDgHGEljjMBQWZ22yEK0OzIXNa7toJmmXsP4TT3W7xVy8bTJ0TniPDf+JNjrsgfgiFTDGdlEhV1E+g==
+"@mui/base@5.0.0-beta.9":
+  version "5.0.0-beta.9"
+  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.9.tgz#e88d7052aa6d97c1e57d5ce2a4e2edf898db90ec"
+  integrity sha512-gm6gnPnc/lS5Z3neH0iuOrK7IbS02+oh6KsMtXYLhI6bJpHs+PNWFsBmISx7x4FSPVJZvZkb8Bw6pEXpIMFt7Q==
   dependencies:
-    "@babel/runtime" "^7.21.0"
+    "@babel/runtime" "^7.22.6"
     "@emotion/is-prop-valid" "^1.2.1"
     "@mui/types" "^7.2.4"
-    "@mui/utils" "^5.13.1"
+    "@mui/utils" "^5.14.3"
     "@popperjs/core" "^2.11.8"
-    clsx "^1.2.1"
+    clsx "^2.0.0"
     prop-types "^15.8.1"
     react-is "^18.2.0"
 
-"@mui/core-downloads-tracker@^5.13.4":
-  version "5.13.4"
-  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.13.4.tgz#7e4b491d8081b6d45ae51556d82cb16b31315a19"
-  integrity sha512-yFrMWcrlI0TqRN5jpb6Ma9iI7sGTHpytdzzL33oskFHNQ8UgrtPas33Y1K7sWAMwCrr1qbWDrOHLAQG4tAzuSw==
+"@mui/core-downloads-tracker@^5.14.3":
+  version "5.14.3"
+  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.3.tgz#474689f4d691993376e8a1ca07e08d4545275082"
+  integrity sha512-QxvrcDqphZoXRjsAmCaQylmWjC/8/qKWwIde1MJMna5YIst3R9O0qhKRPu36/OE2d8AeTbCVjRcRvNqhhW8jyg==
 
-"@mui/icons-material@^5.8.4":
-  version "5.11.0"
-  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.11.0.tgz#9ea6949278b2266d2683866069cd43009eaf6464"
-  integrity sha512-I2LaOKqO8a0xcLGtIozC9xoXjZAto5G5gh0FYUMAlbsIHNHIjn4Xrw9rvjY20vZonyiGrZNMAlAXYkY6JvhF6A==
+"@mui/icons-material@^5.14.3":
+  version "5.14.3"
+  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.14.3.tgz#26a84d52ab2fceea2856adf7a139527b3a51ae90"
+  integrity sha512-XkxWPhageu1OPUm2LWjo5XqeQ0t2xfGe8EiLkRW9oz2LHMMZmijvCxulhgquUVTF1DnoSh+3KoDLSsoAFtVNVw==
   dependencies:
-    "@babel/runtime" "^7.20.6"
+    "@babel/runtime" "^7.22.6"
 
-"@mui/material@^5.13.5":
-  version "5.13.5"
-  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.13.5.tgz#c14f14824f3a37ae0c5ebddbc0034956bc6fec30"
-  integrity sha512-eMay+Ue1OYXOFMQA5Aau7qbAa/kWHLAyi0McsbPTWssCbGehqkF6CIdPsfVGw6tlO+xPee1hUitphHJNL3xpOQ==
+"@mui/material@^5.14.3":
+  version "5.14.3"
+  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.14.3.tgz#c88dbc270c4ebde32f9956b9b3cbf8a5d1dc7aef"
+  integrity sha512-dlu4SOcCp9Cy+wkcfZ/ns9ZkP40nr/WPgqxX0HmrE0o+dkE1ropY9BbHsLrTlYJCko8yzcC8bLghrD4xqZG1og==
   dependencies:
-    "@babel/runtime" "^7.21.0"
-    "@mui/base" "5.0.0-beta.4"
-    "@mui/core-downloads-tracker" "^5.13.4"
-    "@mui/system" "^5.13.5"
+    "@babel/runtime" "^7.22.6"
+    "@mui/base" "5.0.0-beta.9"
+    "@mui/core-downloads-tracker" "^5.14.3"
+    "@mui/system" "^5.14.3"
     "@mui/types" "^7.2.4"
-    "@mui/utils" "^5.13.1"
+    "@mui/utils" "^5.14.3"
     "@types/react-transition-group" "^4.4.6"
-    clsx "^1.2.1"
+    clsx "^2.0.0"
     csstype "^3.1.2"
     prop-types "^15.8.1"
     react-is "^18.2.0"
     react-transition-group "^4.4.5"
 
-"@mui/private-theming@^5.13.1":
-  version "5.13.1"
-  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.13.1.tgz#c3e9a0b44f9c5a51b92cfcfb660536060cb61ed7"
-  integrity sha512-HW4npLUD9BAkVppOUZHeO1FOKUJWAwbpy0VQoGe3McUYTlck1HezGHQCfBQ5S/Nszi7EViqiimECVl9xi+/WjQ==
+"@mui/private-theming@^5.13.7":
+  version "5.13.7"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.13.7.tgz#2f8ef5da066f3c6c6423bd4260d003a28d10b099"
+  integrity sha512-qbSr+udcij5F9dKhGX7fEdx2drXchq7htLNr2Qg2Ma+WJ6q0ERlEqGSBiPiVDJkptcjeVL4DGmcf1wl5+vD4EA==
   dependencies:
-    "@babel/runtime" "^7.21.0"
-    "@mui/utils" "^5.13.1"
+    "@babel/runtime" "^7.22.5"
+    "@mui/utils" "^5.13.7"
     prop-types "^15.8.1"
 
 "@mui/styled-engine@^5.13.2":
@@ -2840,17 +2847,17 @@
     csstype "^3.1.2"
     prop-types "^15.8.1"
 
-"@mui/system@^5.13.5":
-  version "5.13.5"
-  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.13.5.tgz#9f67ea0c4f6974713f90b7b94c999fd3f40f8de3"
-  integrity sha512-n0gzUxoZ2ZHZgnExkh2Htvo9uW2oakofgPRQrDoa/GQOWyRD0NH9MDszBwOb6AAoXZb+OV5TE7I4LeZ/dzgHYA==
+"@mui/system@^5.14.3":
+  version "5.14.3"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.14.3.tgz#71aa88433649a23dfa5c102cef8a3c5b1ac40ac6"
+  integrity sha512-b+C+j9+75+/iIYSa+1S4eCMc9MDNrj9hzWfExJqS2GffuNocRagjBZFyjtMqsLWLxMxQIX8Cg6j0hAioiw+WfQ==
   dependencies:
-    "@babel/runtime" "^7.21.0"
-    "@mui/private-theming" "^5.13.1"
+    "@babel/runtime" "^7.22.6"
+    "@mui/private-theming" "^5.13.7"
     "@mui/styled-engine" "^5.13.2"
     "@mui/types" "^7.2.4"
-    "@mui/utils" "^5.13.1"
-    clsx "^1.2.1"
+    "@mui/utils" "^5.14.3"
+    clsx "^2.0.0"
     csstype "^3.1.2"
     prop-types "^15.8.1"
 
@@ -2870,14 +2877,14 @@
     prop-types "^15.8.1"
     react-is "^18.2.0"
 
-"@mui/utils@^5.13.1":
-  version "5.13.1"
-  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.13.1.tgz#86199e46014215f95da046a5ec803f4a39c96eee"
-  integrity sha512-6lXdWwmlUbEU2jUI8blw38Kt+3ly7xkmV9ljzY4Q20WhsJMWiNry9CX8M+TaP/HbtuyR8XKsdMgQW7h7MM3n3A==
+"@mui/utils@^5.13.7", "@mui/utils@^5.14.3":
+  version "5.14.3"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.14.3.tgz#76d8151c23d2c2a871e98b90add57a8fd01d5d80"
+  integrity sha512-gZ6Etw+ppO43GYc1HFZSLjwd4DoZoa+RrYTD25wQLfzcSoPjVoC/zZqA2Lkq0zjgwGBQOSxKZI6jfp9uXR+kgw==
   dependencies:
-    "@babel/runtime" "^7.21.0"
+    "@babel/runtime" "^7.22.6"
     "@types/prop-types" "^15.7.5"
-    "@types/react-is" "^18.2.0"
+    "@types/react-is" "^18.2.1"
     prop-types "^15.8.1"
     react-is "^18.2.0"
 
@@ -3273,10 +3280,10 @@
   resolved "https://registry.yarnpkg.com/@safe-global/safe-modules-deployments/-/safe-modules-deployments-1.1.0.tgz#e8441d6da17ed4b29a211ecb9b97fadbd7c7ca2b"
   integrity sha512-UgSH/7Zcv6BJBBqoipKts6SKCPYPau9F1/arndsBYvb5Ayn28Q9cu/yiRbln2iI4VL21SIl9lcO/zRKJKl7QbQ==
 
-"@safe-global/safe-react-components@^2.0.5":
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/@safe-global/safe-react-components/-/safe-react-components-2.0.5.tgz#294b1198ef27322d74eac5f49e54652b57b6eb55"
-  integrity sha512-ExrE2ZAV+3qm6wi5QfEGUcb4R7rFsvP2oHcZ4k6gGZDLsvAnP8X5LMnXldriOvBjLBD3m3RoLYLfDER5hBrQ3A==
+"@safe-global/safe-react-components@^2.0.6":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/@safe-global/safe-react-components/-/safe-react-components-2.0.6.tgz#795a3506b84806e43a50171e71ad5bde3a36f012"
+  integrity sha512-KCo/zf+xcBlXhcROQbyyscsfOExLV1dTQBoKrB2zluwQOQjbsKZu3qOpnIgU/94yHATm38IOJdC8snv6fQQe0A==
   dependencies:
     "@ethersproject/address" "^5.7.0"
     ethereum-blockies-base64 "^1.0.2"
@@ -4254,7 +4261,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-is@^18.2.0":
+"@types/react-is@^18.2.1":
   version "18.2.1"
   resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-18.2.1.tgz#61d01c2a6fc089a53520c0b66996d458fdc46863"
   integrity sha512-wyUkmaaSZEzFZivD8F2ftSyAfk6L+DfFliVj/mYdOXbVjRcS87fQJLTnhk6dRZPuJjI+9g6RZJO4PNCngUrmyw==
@@ -6265,6 +6272,11 @@ clsx@^1.1.0, clsx@^1.2.1:
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
   integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
 
+clsx@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.0.0.tgz#12658f3fd98fafe62075595a5c30e43d18f3d00b"
+  integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"