From 3f76a0d0f37ec43673f2460ae27e3f9607c86857 Mon Sep 17 00:00:00 2001
From: iamacook <aaron@safe.global>
Date: Thu, 12 Oct 2023 13:57:24 +0200
Subject: [PATCH] feat: wrong network warning + high risk checkbox

---
 .../ProposalForm/ProposalVerification.tsx     |  2 +-
 .../ProposalForm/WrongRequiredChain.tsx       | 13 +++++++++++
 .../walletconnect/ProposalForm/index.tsx      | 23 +++++++++++++++----
 .../ProposalForm/styles.module.css            |  5 ++++
 4 files changed, 38 insertions(+), 5 deletions(-)
 create mode 100644 src/components/walletconnect/ProposalForm/WrongRequiredChain.tsx

diff --git a/src/components/walletconnect/ProposalForm/ProposalVerification.tsx b/src/components/walletconnect/ProposalForm/ProposalVerification.tsx
index 6e555a6e42..b27dae9153 100644
--- a/src/components/walletconnect/ProposalForm/ProposalVerification.tsx
+++ b/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,
   },
 }
diff --git a/src/components/walletconnect/ProposalForm/WrongRequiredChain.tsx b/src/components/walletconnect/ProposalForm/WrongRequiredChain.tsx
new file mode 100644
index 0000000000..1514dd91c4
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/components/walletconnect/ProposalForm/index.tsx b/src/components/walletconnect/ProposalForm/index.tsx
index 873fb5dbe4..5199698b42 100644
--- a/src/components/walletconnect/ProposalForm/index.tsx
+++ b/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,9 +65,17 @@ 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}>
@@ -68,7 +83,7 @@ const ProposalForm = ({ proposal, onApprove, onReject }: ProposalFormProps): Rea
           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>
diff --git a/src/components/walletconnect/ProposalForm/styles.module.css b/src/components/walletconnect/ProposalForm/styles.module.css
index dad1cd2107..38c7127c64 100644
--- a/src/components/walletconnect/ProposalForm/styles.module.css
+++ b/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));
 }