diff --git a/src/components/walletconnect/ProposalForm/ProposalVerification.tsx b/src/components/walletconnect/ProposalForm/ProposalVerification.tsx
new file mode 100644
index 0000000000..6fa60eecbc
--- /dev/null
+++ b/src/components/walletconnect/ProposalForm/ProposalVerification.tsx
@@ -0,0 +1,68 @@
+import type { Web3WalletTypes } from '@walletconnect/web3wallet'
+import { Alert, SvgIcon } from '@mui/material'
+import type { AlertColor } from '@mui/material'
+import AlertIcon from '@/public/images/notifications/alert.svg'
+
+import type { Verify } from '@walletconnect/types'
+import type { ComponentType } from 'react'
+import CloseIcon from '@/public/images/common/close.svg'
+import InfoIcon from '@/public/images/notifications/info.svg'
+import CheckIcon from '@/public/images/common/check.svg'
+import css from './styles.module.css'
+
+const Validation: {
+ [key in Verify.Context['verified']['validation']]: {
+ color: AlertColor
+ desc: string
+ Icon: ComponentType
+ }
+} = {
+ VALID: {
+ color: 'success',
+ desc: 'has been verified by WalletConnect.',
+ Icon: CheckIcon,
+ },
+ UNKNOWN: {
+ color: 'warning',
+ desc: 'has not been verified by WalletConnect.',
+ Icon: InfoIcon,
+ },
+ INVALID: {
+ color: 'error',
+ desc: 'has been flagged as a scam by WalletConnect. Only proceed if you trust this them.',
+ Icon: CloseIcon,
+ },
+}
+
+const ProposalVerification = ({ proposal }: { proposal: Web3WalletTypes.SessionProposal }) => {
+ const { proposer } = proposal.params
+ const { isScam, validation } = proposal.verifyContext.verified
+ const _validation = Validation[validation]
+ const color = isScam ? 'error' : _validation.color
+ const Icon = isScam ? AlertIcon : _validation.Icon
+
+ return (
+ palette[color].background }}
+ className={css.alert}
+ icon={
+ palette[color].main,
+ },
+ }}
+ />
+ }
+ >
+ {isScam
+ ? `We prevent connecting to ${proposer.metadata.name} as they are a known scam.`
+ : `${proposer.metadata.name} ${_validation.desc}`}
+
+ )
+}
+export default ProposalVerification
diff --git a/src/components/walletconnect/ProposalForm/index.tsx b/src/components/walletconnect/ProposalForm/index.tsx
index e10f606267..7f755fd548 100644
--- a/src/components/walletconnect/ProposalForm/index.tsx
+++ b/src/components/walletconnect/ProposalForm/index.tsx
@@ -1,45 +1,14 @@
-import { Alert, Button, Divider, SvgIcon, Typography } from '@mui/material'
-import type { AlertColor } from '@mui/material'
+import { Button, Divider, Typography } from '@mui/material'
import type { Web3WalletTypes } from '@walletconnect/web3wallet'
-import type { Verify } from '@walletconnect/types'
-import type { ComponentType } from 'react'
import { EIP155 } from '@/services/walletconnect/constants'
import useChains from '@/hooks/useChains'
import ChainIndicator from '@/components/common/ChainIndicator'
import { getEip155ChainId } from '@/services/walletconnect/utils'
-import CloseIcon from '@/public/images/common/close.svg'
-import InfoIcon from '@/public/images/notifications/info.svg'
-import CheckIcon from '@/public/images/common/check.svg'
-import AlertIcon from '@/public/images/notifications/alert.svg'
import type { Eip155ChainId } from '@/services/walletconnect/utils'
-
-import css from './styles.module.css'
import SafeAppIconCard from '@/components/safe-apps/SafeAppIconCard'
-
-const Validation: {
- [key in Verify.Context['verified']['validation']]: {
- color: AlertColor
- desc: string
- Icon: ComponentType
- }
-} = {
- VALID: {
- color: 'success',
- desc: 'has been verified by WalletConnect.',
- Icon: CheckIcon,
- },
- UNKNOWN: {
- color: 'warning',
- desc: 'has not been verified by WalletConnect.',
- Icon: InfoIcon,
- },
- INVALID: {
- color: 'error',
- desc: 'has been flagged as a scam by WalletConnect. Only proceed if you trust this them.',
- Icon: CloseIcon,
- },
-}
+import css from './styles.module.css'
+import ProposalVerification from './ProposalVerification'
type ProposalFormProps = {
proposal: Web3WalletTypes.SessionProposal
@@ -60,12 +29,6 @@ const ProposalForm = ({ proposal, onApprove, onReject }: ProposalFormProps) => {
})
.map((chain) => chain.chainId)
- const { isScam, validation } = proposal.verifyContext.verified
- const _validation = Validation[validation]
-
- const color = isScam ? 'error' : _validation.color
- const Icon = isScam ? AlertIcon : _validation.Icon
-
return (
@@ -108,27 +71,7 @@ const ProposalForm = ({ proposal, onApprove, onReject }: ProposalFormProps) => {
- palette[color].background }}
- className={css.alert}
- icon={
- palette[color].main,
- },
- }}
- />
- }
- >
- {isScam
- ? `We prevent connecting to ${proposer.metadata.name} as they are a known scam.`
- : `${proposer.metadata.name} ${_validation.desc}`}
-
+