Refactor: extract proposal verification into a component

safe-global · Sep 23, 2023 · 8273d8e · 8273d8e
1 parent 1b580cc
commit 8273d8e
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 61 deletions.
diff --git a/src/components/walletconnect/ProposalForm/ProposalVerification.tsx 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 (
+    <Alert
+      severity={color}
+      sx={{ bgcolor: ({ palette }) => palette[color].background }}
+      className={css.alert}
+      icon={
+        <SvgIcon
+          component={Icon}
+          inheritViewBox
+          color={color}
+          sx={{
+            '& path': {
+              fill: ({ palette }) => palette[color].main,
+            },
+          }}
+        />
+      }
+    >
+      {isScam
+        ? `We prevent connecting to ${proposer.metadata.name} as they are a known scam.`
+        : `${proposer.metadata.name} ${_validation.desc}`}
+    </Alert>
+  )
+}
+export default ProposalVerification
diff --git a/src/components/walletconnect/ProposalForm/index.tsx b/src/components/walletconnect/ProposalForm/index.tsx
@@ -1,45 +1,13 @@
-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'
 
 type ProposalFormProps = {
   proposal: Web3WalletTypes.SessionProposal
@@ -60,12 +28,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 (
     <div className={css.container}>
       <Typography variant="h4" fontWeight={700}>
@@ -108,27 +70,7 @@ const ProposalForm = ({ proposal, onApprove, onReject }: ProposalFormProps) => {
 
       <Divider flexItem />
 
-      <Alert
-        severity={color}
-        sx={{ bgcolor: ({ palette }) => palette[color].background }}
-        className={css.alert}
-        icon={
-          <SvgIcon
-            component={Icon}
-            inheritViewBox
-            color={color}
-            sx={{
-              '& path': {
-                fill: ({ palette }) => palette[color].main,
-              },
-            }}
-          />
-        }
-      >
-        {isScam
-          ? `We prevent connecting to ${proposer.metadata.name} as they are a known scam.`
-          : `${proposer.metadata.name} ${_validation.desc}`}
-      </Alert>
+      <ProposalVerification proposal={proposal} />
 
       <Button variant="text" size="small" fullWidth onClick={onReject}>
         Reject