feat: wrong network warning + high risk checkbox

src/components/walletconnect/ProposalForm/ProposalVerification.tsx

@@ -29,7 +29,7 @@ const Validation: {
   },
   INVALID: {
     color: 'error',
-    desc: 'has been flagged as a scam by WalletConnect. Only proceed if you trust this them.',
+    desc: 'has been flagged as a high risk by WalletConnect.',
     Icon: CloseIcon,
   },
 }

src/components/walletconnect/ProposalForm/WrongRequiredChain.tsx

@@ -0,0 +1,13 @@
+import { Alert } from '@mui/material'
+import type { ReactElement } from 'react'
+
+import css from './styles.module.css'
+
+export const WrongRequiredChain = (): ReactElement => {
+  return (
+    <Alert severity="warning" className={css.alert}>
+      The dApp is trying to connect with the wrong network. Approving the session should update it but we advise
+      checking in the dApp before transacting.
+    </Alert>
+  )
+}

src/components/walletconnect/ProposalForm/index.tsx

@@ -1,6 +1,7 @@
-import { Button, Divider, Typography } from '@mui/material'
-import type { Web3WalletTypes } from '@walletconnect/web3wallet'
+import { Button, Checkbox, Divider, FormControlLabel, Typography } from '@mui/material'
+import { useState } from 'react'
 import type { ReactElement } from 'react'
+import type { Web3WalletTypes } from '@walletconnect/web3wallet'
 
 import { EIP155 } from '@/services/walletconnect/constants'
 import useChains from '@/hooks/useChains'
@@ -10,6 +11,7 @@ import SafeAppIconCard from '@/components/safe-apps/SafeAppIconCard'
 import css from './styles.module.css'
 import ProposalVerification from './ProposalVerification'
 import useSafeInfo from '@/hooks/useSafeInfo'
+import { WrongRequiredChain } from './WrongRequiredChain'
 
 type ProposalFormProps = {
   proposal: Web3WalletTypes.SessionProposal
@@ -18,6 +20,7 @@ type ProposalFormProps = {
 }
 
 const ProposalForm = ({ proposal, onApprove, onReject }: ProposalFormProps): ReactElement => {
+  const [understandsRisk, setUnderstandsRisk] = useState(false)
   const { safe } = useSafeInfo()
   const { configs } = useChains()
   const { requiredNamespaces, optionalNamespaces, proposer } = proposal.params
@@ -33,6 +36,10 @@ const ProposalForm = ({ proposal, onApprove, onReject }: ProposalFormProps): Rea
     .map((chain) => chain.chainId)
 
   const supportsSafe = chainIds.includes(safe.chainId)
+  const requiresWrongChain = !requiredChains.includes(getEip155ChainId(safe.chainId))
+
+  const isHighRisk = proposal.verifyContext.verified.validation === 'INVALID'
+  const disabled = isScam || (isHighRisk && !understandsRisk)
 
   return (
     <div className={css.container}>
@@ -58,17 +65,25 @@ const ProposalForm = ({ proposal, onApprove, onReject }: ProposalFormProps): Rea
       <div className={css.info}>
         <ProposalVerification proposal={proposal} />
 
-        {!supportsSafe && <UnsupportedChain chainIds={chainIds} />}
+        {!supportsSafe ? <UnsupportedChain chainIds={chainIds} /> : requiresWrongChain && <WrongRequiredChain />}
       </div>
 
+      {isHighRisk && supportsSafe && (
+        <FormControlLabel
+          className={css.checkbox}
+          control={<Checkbox checked={understandsRisk} onChange={(_, checked) => setUnderstandsRisk(checked)} />}
+          label="I understand the risks of interacting with this dApp and would like to continue."
+        />
+      )}
+
       <Divider flexItem className={css.divider} />
 
       <div className={css.buttons}>
         <Button variant="danger" onClick={onReject} className={css.button}>
           Reject
         </Button>
 
-        <Button variant="contained" onClick={onApprove} className={css.button} disabled={!supportsSafe && !isScam}>
+        <Button variant="contained" onClick={onApprove} className={css.button} disabled={disabled}>
           Approve
         </Button>
       </div>

src/components/walletconnect/ProposalForm/styles.module.css

@@ -34,6 +34,11 @@
   font-weight: 700;
 }
 
+.checkbox {
+  text-align: left;
+  margin-top: var(--space-2);
+}
+
 .divider {
   margin: var(--space-3) calc(-1 * var(--space-4));
 }