Differentiate partially and fully verified contracts

Author: kaja-osojnik

.changelog/1888.feature.md

@@ -0,0 +1 @@
+Differentiate partially and fully verified contracts

src/app/components/Account/RuntimeAccountDetailsView.tsx

@@ -105,7 +105,7 @@ export const RuntimeAccountDetailsView: FC<RuntimeAccountDetailsViewProps> = ({
             <VerificationIcon
               address_eth={account.address_eth!}
               scope={account}
-              verified={!!account.evm_contract?.verification}
+              verificationLevel={account.evm_contract?.verification?.verification_level}
             />
           </dd>
         </>

src/app/components/ContractVerificationIcon/index.tsx

@@ -13,25 +13,28 @@ import { StatusBadge } from '../common/StatusBadge'
 export const verificationIconBoxHeight = 28
 
 type ContractStatusProps = {
-  verified: boolean
+  verificationLevel?: 'full' | 'partial'
 }
-
-export const ContractStatus = ({ verified }: ContractStatusProps) => {
+export const ContractStatus = ({ verificationLevel }: ContractStatusProps) => {
   const { t } = useTranslation()
-  const statusLabel = verified
-    ? t('contract.verification.isVerified')
-    : t('contract.verification.isNotVerified')
-  const statusVariant = verified ? 'success' : 'danger'
+  const statusLabel =
+    verificationLevel === 'full'
+      ? t('contract.verification.isVerified')
+      : verificationLevel === 'partial'
+        ? t('contract.verification.isPartiallyVerified')
+        : t('contract.verification.isNotVerified')
+  const statusVariant =
+    verificationLevel === 'full' ? 'success' : verificationLevel === 'partial' ? 'partialsuccess' : 'danger'
 
   return <StatusBadge label={statusLabel} variant={statusVariant} />
 }
 
 export const VerificationIcon: FC<{
   address_eth: string
   scope: SearchScope
-  verified: boolean
+  verificationLevel?: 'full' | 'partial'
   noLink?: boolean
-}> = ({ address_eth, scope, verified, noLink = false }) => {
+}> = ({ address_eth, scope, verificationLevel, noLink = false }) => {
   const { t } = useTranslation()
   const [explainDelay, setExplainDelay] = useState(false)
   if (isLocalnet(scope.network)) {
@@ -42,19 +45,19 @@ export const VerificationIcon: FC<{
     rel: 'noopener noreferrer',
     target: '_blank',
     sx: { fontWeight: 400, color: 'inherit', textDecoration: 'underline' },
-    onClick: verified ? undefined : () => setExplainDelay(true),
+    onClick: verificationLevel ? undefined : () => setExplainDelay(true),
   }
   const Component = noLink ? Box : (Link as React.ElementType)
   const componentProps = noLink ? {} : sourcifyLinkProps
 
   return (
     <>
       <Component {...componentProps}>
-        <ContractStatus verified={verified} />
+        <ContractStatus verificationLevel={verificationLevel} />
       </Component>
       &nbsp; &nbsp;
       {!noLink &&
-        (verified ? (
+        (verificationLevel ? (
           <Typography component="span" sx={{ fontSize: '12px', color: COLORS.brandExtraDark }}>
             <Trans
               t={t}

src/app/components/StatusIcon/index.tsx

@@ -11,25 +11,28 @@ import Tooltip from '@mui/material/Tooltip'
 import { useTxErrorMessage } from '../../hooks/useTxErrorMessage'
 import { TFunction } from 'i18next'
 
-type TxStatus = 'unknown' | 'success' | 'failure' | 'pending'
+type TxStatus = 'unknown' | 'success' | 'partialsuccess' | 'failure' | 'pending'
 
 const statusBgColor: Record<TxStatus, string> = {
   unknown: COLORS.grayMediumLight,
-  success: COLORS.honeydew,
+  success: COLORS.eucalyptus,
+  partialsuccess: COLORS.honeydew,
   failure: COLORS.linen,
   pending: COLORS.warningLight,
 }
 
 const statusFgColor: Record<TxStatus, string> = {
   unknown: COLORS.grayMedium,
-  success: COLORS.eucalyptus,
+  success: COLORS.honeydew,
+  partialsuccess: COLORS.eucalyptus,
   failure: COLORS.errorIndicatorBackground,
   pending: COLORS.warningColor,
 }
 
 export const statusIcon: Record<TxStatus, ReactNode> = {
   unknown: <HelpIcon color="inherit" fontSize="inherit" />,
-  success: <CheckCircleIcon color="success" fontSize="inherit" />,
+  success: <CheckCircleIcon color="inherit" fontSize="inherit" />,
+  partialsuccess: <CheckCircleIcon color="success" fontSize="inherit" />,
   failure: <CancelIcon color="error" fontSize="inherit" />,
   pending: <HelpIcon color="inherit" fontSize="inherit" />,
 }
@@ -119,6 +122,7 @@ export const StatusIcon: FC<StatusIconProps> = ({ success, error, withText, meth
   const statusLabel: Record<TxStatus, string> = {
     unknown: t('common.unknown'),
     success: t('common.success'),
+    partialsuccess: t('common.partial_success'),
     failure: t('common.failed'),
     pending: getPendingLabel(t, method, withText),
   }

src/app/components/Tokens/TokenDetails.tsx

@@ -69,7 +69,11 @@ export const TokenDetails: FC<{
       </dd>
       <dt>{t('contract.verification.title')}</dt>
       <dd>
-        <VerificationIcon address_eth={token.eth_contract_addr} scope={token} verified={token.is_verified} />
+        <VerificationIcon
+          address_eth={token.eth_contract_addr}
+          scope={token}
+          verificationLevel={token.verification_level}
+        />
       </dd>
 
       <dt>{t(isMobile ? 'tokens.holders' : 'tokens.holdersCount')}</dt>

src/app/components/Tokens/TokenList.tsx

@@ -131,7 +131,7 @@ export const TokenList = (props: TokensProps) => {
               <VerificationIcon
                 address_eth={token.eth_contract_addr}
                 scope={token}
-                verified={token.is_verified}
+                verificationLevel={token.verification_level}
                 noLink
               />
             </Box>

src/app/components/common/StatusBadge.tsx

@@ -7,10 +7,13 @@ import CancelIcon from '@mui/icons-material/Cancel'
 import InfoIcon from '@mui/icons-material/Info'
 import ErrorIcon from '@mui/icons-material/Error'
 
-export type StatusVariant = 'success' | 'warning' | 'danger' | 'info'
+export type StatusVariant = 'success' | 'partialsuccess' | 'warning' | 'danger' | 'info'
 
 const variantStyles: Record<StatusVariant, { bgColor: string }> = {
   success: {
+    bgColor: COLORS.eucalyptus,
+  },
+  partialsuccess: {
     bgColor: COLORS.honeydew,
   },
   warning: {
@@ -25,7 +28,8 @@ const variantStyles: Record<StatusVariant, { bgColor: string }> = {
 }
 
 const variantIcon: Record<StatusVariant, ReactNode> = {
-  success: <CheckCircleIcon color="success" fontSize="small" />,
+  success: <CheckCircleIcon sx={{ color: COLORS.honeydew }} fontSize="small" />,
+  partialsuccess: <CheckCircleIcon color="success" fontSize="small" />,
   warning: <ErrorIcon color="warning" fontSize="small" />,
   danger: <CancelIcon color="error" fontSize="small" />,
   info: <InfoIcon color="info" fontSize="small" />,

src/app/pages/NFTInstanceDashboardPage/InstanceDetailsCard.tsx

@@ -97,7 +97,7 @@ export const InstanceDetailsCard: FC<InstanceDetailsCardProps> = ({
               <VerificationIcon
                 address_eth={token?.eth_contract_addr!}
                 scope={token!}
-                verified={!!token?.is_verified}
+                verificationLevel={token?.verification_level}
               />
             </dd>
           </StyledDescriptionList>

src/app/pages/NFTInstanceDashboardPage/InstanceTitleCard.tsx

@@ -68,7 +68,7 @@ export const InstanceTitleCard: FC<InstanceTitleCardProps> = ({ isFetched, isLoa
               <VerificationIcon
                 address_eth={token.eth_contract_addr}
                 scope={token}
-                verified={token.is_verified}
+                verificationLevel={token.verification_level}
                 noLink
               />
               <AccountLink scope={scope} address={displayAddress!} alwaysTrim />

src/app/pages/TokenDashboardPage/TokenDetailsCard.tsx

@@ -64,7 +64,7 @@ export const TokenDetailsCard: FC<{ scope: SearchScope; address: string; searchT
               <VerificationIcon
                 address_eth={token.eth_contract_addr}
                 scope={token}
-                verified={token.is_verified}
+                verificationLevel={token.verification_level}
               />
             </dd>