Merge pull request #2003 from oasisprotocol/kaja/mobile-verification-badge

Hide label of verification badge in a table for mobile screens

Author: lukaw3d

.changelog/2003.bugfix.md

@@ -0,0 +1 @@
+Hide label of contract verification badge in a table for mobile screens

src/app/components/ContractVerificationIcon/index.tsx

@@ -14,8 +14,9 @@ export const verificationIconBoxHeight = 28
 
 type ContractStatusProps = {
   verificationLevel?: 'full' | 'partial'
+  hideLabel?: boolean
 }
-export const ContractStatus = ({ verificationLevel }: ContractStatusProps) => {
+export const ContractStatus = ({ verificationLevel, hideLabel }: ContractStatusProps) => {
   const { t } = useTranslation()
   const statusLabel =
     verificationLevel === 'full'
@@ -26,15 +27,18 @@ export const ContractStatus = ({ verificationLevel }: ContractStatusProps) => {
   const statusVariant =
     verificationLevel === 'full' ? 'success' : verificationLevel === 'partial' ? 'partialsuccess' : 'danger'
 
-  return <StatusBadge label={statusLabel} variant={statusVariant} />
+  const label = hideLabel ? '' : statusLabel
+
+  return <StatusBadge label={label} variant={statusVariant} />
 }
 
 export const VerificationIcon: FC<{
   address_eth: string
   scope: SearchScope
   verificationLevel?: 'full' | 'partial'
   noLink?: boolean
-}> = ({ address_eth, scope, verificationLevel, noLink = false }) => {
+  hideLabel?: boolean
+}> = ({ address_eth, scope, verificationLevel, noLink = false, hideLabel }) => {
   const { t } = useTranslation()
   const [explainDelay, setExplainDelay] = useState(false)
   if (isLocalnet(scope.network)) {
@@ -49,16 +53,15 @@ export const VerificationIcon: FC<{
   }
   const Component = noLink ? Box : (Link as React.ElementType)
   const componentProps = noLink ? {} : sourcifyLinkProps
-
   return (
     <>
       <Component {...componentProps}>
-        <ContractStatus verificationLevel={verificationLevel} />
+        <ContractStatus verificationLevel={verificationLevel} hideLabel={hideLabel} />
       </Component>
-      &nbsp; &nbsp;
       {!noLink &&
         (verificationLevel ? (
           <Typography component="span" sx={{ fontSize: '12px', color: COLORS.brandExtraDark }}>
+            &nbsp; &nbsp;
             <Trans
               t={t}
               i18nKey={'contract.verification.openInSourcify'}
@@ -70,6 +73,7 @@ export const VerificationIcon: FC<{
           </Typography>
         ) : (
           <Typography component="span" sx={{ fontSize: '12px', color: COLORS.brandExtraDark }}>
+            &nbsp; &nbsp;
             <Trans
               t={t}
               i18nKey={'contract.verification.verifyInSourcify'}

src/app/components/Tokens/TokenList.tsx

@@ -18,6 +18,7 @@ import Typography from '@mui/material/Typography'
 import { COLORS } from '../../../styles/theme/colors'
 import { SxProps } from '@mui/material/styles'
 import { RoundedBalance } from '../RoundedBalance'
+import { useScreenSize } from 'app/hooks/useScreensize'
 
 type TokensProps = {
   tokens?: EvmToken[]
@@ -59,12 +60,16 @@ export const TokenTypeTag: FC<{ tokenType: EvmTokenType | undefined; sx?: SxProp
 export const TokenList = (props: TokensProps) => {
   const { isLoading, tokens, pagination, limit } = props
   const { t } = useTranslation()
+  const { isMobile } = useScreenSize()
   const tableColumns: TableColProps[] = [
     { key: 'index', content: '' },
     { key: 'name', content: t('common.name') },
     { key: 'type', content: t('common.type') },
     { key: 'contract', content: t('common.smartContract') },
-    { key: 'verification', content: t('contract.verification.title') },
+    {
+      key: 'verification',
+      content: isMobile ? t('contract.verification.sourceShort') : t('contract.verification.source'),
+    },
     {
       key: 'holders',
       content: t('tokens.holders'),
@@ -133,6 +138,7 @@ export const TokenList = (props: TokensProps) => {
                 scope={token}
                 verificationLevel={token.verification_level}
                 noLink
+                hideLabel={isMobile}
               />
             </Box>
           ),

src/app/components/common/StatusBadge.tsx

@@ -56,15 +56,13 @@ const StyledBadge = styled(Box, {
     color: COLORS.brandExtraDark,
     borderRadius: 10,
     padding: 4,
-    paddingLeft: 10,
-    paddingRight: 5,
   }
 })
 
 export const StatusBadge = ({ label, icon, variant = 'info' }: StatusBadgeProps) => {
   return (
     <StyledBadge bgColor={variantStyles[variant].bgColor}>
-      {label}
+      {label && <span style={{ paddingLeft: '5px' }}>{label}</span>}
       {icon || variantIcon[variant]}
     </StyledBadge>
   )

src/locales/en/translation.json

@@ -188,6 +188,8 @@
       "isPartiallyVerified": "Partially Verified",
       "openInAbiPlayground": "Interact in <AbiPlaygroundLink>ABI Playground</AbiPlaygroundLink>",
       "openInSourcify": "Open in <SourcifyLink>Sourcify</SourcifyLink>",
+      "source": "Source",
+      "sourceShort": "Src",
       "verifyInSourcify": "Verify through <SourcifyLink>Sourcify</SourcifyLink>",
       "explainVerificationDelay": "If you have just verified a contract, it should take a few minutes to update here.",
       "proxyERC1167": "ERC-1167 proxy to"