@bifold/core 2.4.5 → 2.5.0

package/src/components/misc/ConnectionAlert.tsx

@@ -1,123 +0,0 @@
-import { useNavigation } from '@react-navigation/native'
-import { StackNavigationProp } from '@react-navigation/stack'
-import React, { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { StyleSheet, TouchableOpacity, View } from 'react-native'
-import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
-
-import { hitSlop } from '../../constants'
-import { useTheme } from '../../contexts/theme'
-import { RootStackParams, Screens, Stacks } from '../../types/navigators'
-import PopupModal from '../modals/PopupModal'
-import Link from '../texts/Link'
-
-import { InfoBoxType } from './InfoBox'
-import UnorderedList from './UnorderedList'
-import { ThemedText } from '../texts/ThemedText'
-
-interface ConnectionAlertProps {
-  connectionLabel?: string
-}
-
-const ConnectionAlert: React.FC<ConnectionAlertProps> = ({ connectionLabel }) => {
-  const { t } = useTranslation()
-  const { ColorPalette } = useTheme()
-  const [infoCardVisible, setInfoCardVisible] = useState(false)
-
-  const settingsNavigation = useNavigation<StackNavigationProp<RootStackParams>>()
-
-  const styles = StyleSheet.create({
-    modalCenter: {
-      flex: 1,
-      justifyContent: 'center',
-      alignItems: 'center',
-      backgroundColor: ColorPalette.notification.popupOverlay,
-      padding: 20,
-    },
-    notifyTextContainer: {
-      borderLeftColor: ColorPalette.brand.highlight,
-      backgroundColor: ColorPalette.brand.secondaryBackground,
-      borderLeftWidth: 10,
-      flex: 1,
-      paddingLeft: 10,
-      paddingVertical: 15,
-      marginVertical: 15,
-    },
-    row: {
-      flexDirection: 'row',
-    },
-    notifyTitle: {
-      marginBottom: 5,
-    },
-    notifyText: {
-      marginVertical: 5,
-    },
-    notifyTextList: {
-      marginVertical: 6,
-    },
-    informationIcon: {
-      color: ColorPalette.notification.infoIcon,
-      marginLeft: 10,
-    },
-  })
-
-  const toggleInfoCard = () => setInfoCardVisible(!infoCardVisible)
-
-  const navigateToSettings = () => {
-    toggleInfoCard()
-    settingsNavigation.navigate(Stacks.SettingStack, { screen: Screens.Settings })
-  }
-
-  return (
-    <View style={styles.notifyTextContainer}>
-      <View style={styles.row}>
-        <ThemedText variant="title" style={styles.notifyTitle}>
-          {t('ConnectionAlert.AddedContacts')}
-        </ThemedText>
-        <TouchableOpacity
-          testID={t('Global.Info')}
-          accessibilityLabel={t('ConnectionAlert.WhatAreContacts')}
-          accessibilityRole={'button'}
-          onPress={toggleInfoCard}
-          hitSlop={hitSlop}
-        >
-          <Icon name={'information-outline'} size={30} style={styles.informationIcon} />
-        </TouchableOpacity>
-      </View>
-      {infoCardVisible && (
-        <PopupModal
-          notificationType={InfoBoxType.Info}
-          title={t('ConnectionAlert.WhatAreContacts')}
-          bodyContent={
-            <View>
-              <ThemedText variant="popupModalText">{t('ConnectionAlert.PopupIntro')}</ThemedText>
-              <UnorderedList
-                unorderedListItems={[
-                  t('ConnectionAlert.PopupPoint1'),
-                  t('ConnectionAlert.PopupPoint2'),
-                  t('ConnectionAlert.PopupPoint3'),
-                ]}
-              />
-              <ThemedText variant="popupModalText">{t('ConnectionAlert.SettingsInstruction')}</ThemedText>
-              <Link
-                style={{ marginBottom: 8 }}
-                onPress={navigateToSettings}
-                linkText={t('ConnectionAlert.SettingsLink')}
-              />
-              <ThemedText variant="popupModalText">{t('ConnectionAlert.PrivacyMessage')}</ThemedText>
-            </View>
-          }
-          onCallToActionLabel={t('ConnectionAlert.PopupExit')}
-          onCallToActionPressed={toggleInfoCard}
-        />
-      )}
-      <ThemedText style={styles.notifyText}>
-        {t('ConnectionAlert.NotificationBodyUpper') +
-          (connectionLabel ?? t('ContactDetails.AContact').toLowerCase()) +
-          t('ConnectionAlert.NotificationBodyLower')}
-      </ThemedText>
-    </View>
-  )
-}
-
-export default ConnectionAlert

package/src/components/misc/ConnectionImage.tsx

@@ -1,45 +0,0 @@
-import React from 'react'
-import { Image, StyleSheet, View } from 'react-native'
-
-import { useTheme } from '../../contexts/theme'
-import { toImageSource } from '../../utils/credential'
-import { useConnectionImageUrl } from '../../utils/helpers'
-
-interface ConnectionImageProps {
-  connectionId?: string
-  imageUri?: string
-  marginTop?: number
-}
-
-const ConnectionImage: React.FC<ConnectionImageProps> = ({ connectionId, imageUri, marginTop }) => {
-  const { ColorPalette } = useTheme()
-  const styles = StyleSheet.create({
-    connectionImageContainer: {
-      backgroundColor: ColorPalette.brand.secondaryBackground,
-      width: 90,
-      height: 90,
-      alignItems: 'center',
-      justifyContent: 'center',
-      borderRadius: 45,
-      marginTop: marginTop ?? 15,
-      borderColor: ColorPalette.grayscale.lightGrey,
-      borderWidth: 3,
-      alignSelf: 'center',
-    },
-    connectionImage: {
-      width: 55,
-      height: 55,
-    },
-  })
-
-  const anonCredsImageUri = useConnectionImageUrl(connectionId ?? '')
-  const connectionImage = imageUri ? imageUri : anonCredsImageUri
-
-  return connectionImage ? (
-    <View style={styles.connectionImageContainer}>
-      <Image style={styles.connectionImage} source={toImageSource(connectionImage)} />
-    </View>
-  ) : null
-}
-
-export default ConnectionImage

package/src/components/misc/ContentGradient.tsx

@@ -1,40 +0,0 @@
-import React from 'react'
-import { View, StyleSheet } from 'react-native'
-import Svg, { Defs, Rect, LinearGradient, Stop } from 'react-native-svg'
-
-type ContentGradientProps = {
-  backgroundColor: string
-  height?: number
-}
-
-/**
- * To be used in a relative position controlsContainer that is below (and not in) scrollview content
- */
-const ContentGradient: React.FC<ContentGradientProps> = ({ backgroundColor, height = 30 }) => {
-  const id = 'gradient'
-
-  const styles = StyleSheet.create({
-    container: {
-      position: 'absolute',
-      height,
-      width: '100%',
-      top: -height,
-    },
-  })
-
-  return (
-    <View style={styles.container}>
-      <Svg height={`${height}`} width="100%" style={StyleSheet.absoluteFill}>
-        <Defs>
-          <LinearGradient id={id} x1="0%" y1="0%" x2="0%" y2="100%">
-            <Stop offset="0%" stopColor={backgroundColor} stopOpacity={0} />
-            <Stop offset="100%" stopColor={backgroundColor} stopOpacity={1} />
-          </LinearGradient>
-        </Defs>
-        <Rect height={`${height}`} width="100%" fill={`url(#${id})`} />
-      </Svg>
-    </View>
-  )
-}
-
-export default ContentGradient

package/src/components/misc/CredentialCard.tsx

@@ -1,161 +0,0 @@
-import { CredentialExchangeRecord, MdocRecord, SdJwtVcRecord, W3cCredentialRecord } from '@credo-ts/core'
-import { Attribute, BrandingOverlayType, CredentialOverlay, Predicate } from '@bifold/oca/build/legacy'
-import React, { useEffect, useState } from 'react'
-import { ViewStyle } from 'react-native'
-
-import { TOKENS, useServices } from '../../container-api'
-import { useTheme } from '../../contexts/theme'
-import { GenericFn } from '../../types/fn'
-
-import CredentialCard10 from './CredentialCard10'
-import CredentialCard11, { CredentialErrors } from './CredentialCard11'
-import { GenericCredentialExchangeRecord } from '../../types/credentials'
-import { BrandingOverlay } from '@bifold/oca'
-import { useOpenIDCredentials } from '../../modules/openid/context/OpenIDCredentialRecordProvider'
-import { getCredentialForDisplay } from '../../modules/openid/display'
-import { getAttributeField } from '../../utils/oca'
-
-interface CredentialCardProps {
-  credential?: GenericCredentialExchangeRecord
-  credDefId?: string
-  schemaId?: string
-  credName?: string
-  onPress?: GenericFn
-  style?: ViewStyle
-  proof?: boolean
-  displayItems?: (Attribute | Predicate)[]
-  hasAltCredentials?: boolean
-  credentialErrors?: CredentialErrors[]
-  handleAltCredChange?: () => void
-  brandingOverlay?: CredentialOverlay<BrandingOverlay>
-}
-
-const CredentialCard: React.FC<CredentialCardProps> = ({
-  credential,
-  credDefId,
-  schemaId,
-  proof,
-  displayItems,
-  credName,
-  hasAltCredentials,
-  handleAltCredChange,
-  style = {},
-  onPress = undefined,
-  credentialErrors,
-  brandingOverlay,
-}) => {
-  // add ability to reference credential by ID, allows us to get past react hook restrictions
-  const [bundleResolver] = useServices([TOKENS.UTIL_OCA_RESOLVER])
-  const { ColorPalette } = useTheme()
-  const [overlay, setOverlay] = useState<CredentialOverlay<BrandingOverlay>>({})
-  const { resolveBundleForCredential } = useOpenIDCredentials()
-  const [extraOverlayAttribute, setExtraOverlayAttribute] = useState<Attribute | undefined>()
-
-  useEffect(() => {
-    if (brandingOverlay) {
-      setOverlay(brandingOverlay as unknown as CredentialOverlay<BrandingOverlay>)
-      return
-    }
-
-    const resolveOverlay = async (w3cCred: W3cCredentialRecord | SdJwtVcRecord | MdocRecord) => {
-      const brandingOverlay = await resolveBundleForCredential(w3cCred)
-      setOverlay(brandingOverlay)
-    }
-
-    if (
-      credential instanceof W3cCredentialRecord ||
-      credential instanceof SdJwtVcRecord ||
-      credential instanceof MdocRecord
-    ) {
-      resolveOverlay(credential)
-      const credentialDisplay = getCredentialForDisplay(credential)
-      if (credentialDisplay.display.primary_overlay_attribute) {
-        const attributeValue = getAttributeField(
-          credentialDisplay,
-          credentialDisplay.display.primary_overlay_attribute
-        )?.field
-        setExtraOverlayAttribute(attributeValue)
-      }
-    }
-  }, [credential, brandingOverlay, resolveBundleForCredential])
-
-  const getCredOverlayType = (type: BrandingOverlayType) => {
-    const isBranding10 = bundleResolver.getBrandingOverlayType() === BrandingOverlayType.Branding10
-    if (proof) {
-      return (
-        <CredentialCard11
-          displayItems={displayItems}
-          style={isBranding10 ? { backgroundColor: ColorPalette.brand.secondaryBackground } : undefined}
-          credName={credName}
-          credDefId={credDefId}
-          schemaId={schemaId}
-          credential={credential as CredentialExchangeRecord}
-          handleAltCredChange={handleAltCredChange}
-          hasAltCredentials={hasAltCredentials}
-          proof
-          elevated
-          credentialErrors={credentialErrors ?? []}
-          brandingOverlayType={bundleResolver.getBrandingOverlayType()}
-        />
-      )
-    }
-
-    if (credential) {
-      if (type === BrandingOverlayType.Branding01) {
-        return <CredentialCard10 credential={credential as CredentialExchangeRecord} style={style} onPress={onPress} />
-      } else {
-        return (
-          <CredentialCard11
-            credential={credential as CredentialExchangeRecord}
-            style={style}
-            onPress={onPress}
-            credentialErrors={credentialErrors ?? []}
-            brandingOverlayType={bundleResolver.getBrandingOverlayType()}
-            elevated={bundleResolver.getBrandingOverlayType() === BrandingOverlayType.Branding11}
-          />
-        )
-      }
-    } else {
-      return (
-        <CredentialCard11
-          credDefId={credDefId}
-          schemaId={schemaId}
-          credName={credName}
-          displayItems={displayItems}
-          style={style}
-          onPress={onPress}
-          credentialErrors={credentialErrors ?? []}
-          brandingOverlayType={bundleResolver.getBrandingOverlayType()}
-        />
-      )
-    }
-  }
-
-  if (
-    credential instanceof W3cCredentialRecord ||
-    credential instanceof SdJwtVcRecord ||
-    credential instanceof MdocRecord
-  ) {
-    return (
-      <CredentialCard11
-        credential={undefined}
-        style={style}
-        onPress={onPress}
-        brandingOverlay={overlay}
-        credentialErrors={credentialErrors ?? []}
-        proof={proof}
-        elevated={proof}
-        displayItems={displayItems}
-        hideSlice={true}
-        hasAltCredentials={hasAltCredentials}
-        handleAltCredChange={handleAltCredChange}
-        extraOverlayParameter={extraOverlayAttribute}
-        brandingOverlayType={bundleResolver.getBrandingOverlayType()}
-      />
-    )
-  } else {
-    return getCredOverlayType(bundleResolver.getBrandingOverlayType())
-  }
-}
-
-export default CredentialCard

package/src/components/misc/CredentialCard10.tsx

@@ -1,329 +0,0 @@
-import { CredentialExchangeRecord } from '@credo-ts/core'
-import { LegacyBrandingOverlay } from '@bifold/oca'
-import { CredentialOverlay } from '@bifold/oca/build/legacy'
-import React, { useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import {
-  Image,
-  ImageBackground,
-  StyleSheet,
-  Text,
-  View,
-  ViewStyle,
-  useWindowDimensions,
-  TouchableOpacity,
-} from 'react-native'
-
-import { TOKENS, useServices } from '../../container-api'
-import { useTheme } from '../../contexts/theme'
-import { GenericFn } from '../../types/fn'
-import {
-  credentialTextColor,
-  getCredentialIdentifiers,
-  isValidAnonCredsCredential,
-  toImageSource,
-} from '../../utils/credential'
-import { formatTime, useCredentialConnectionLabel } from '../../utils/helpers'
-import { buildFieldsFromAnonCredsCredential } from '../../utils/oca'
-import { testIdWithKey } from '../../utils/testable'
-
-import CardWatermark from './CardWatermark'
-
-interface CredentialCard10Props {
-  credential: CredentialExchangeRecord
-  onPress?: GenericFn
-  style?: ViewStyle
-}
-
-const paddingVertical = 10
-const paddingHorizontal = 10
-const transparent = 'rgba(0,0,0,0)'
-const borderRadius = 15
-const borderPadding = 8
-
-/**
- * A card is defined as a 4x8 (height/rows x width/columns) grid.
- | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
- | 2 |   |   |   |   |   |   |   |
- | 3 |   |   |   |   |   |   |   |
- | 4 |   |   |   |   |   |   |   |
-
-The card width is the full screen width, and the card height is half of the screen width
-
-Variation 1:
-  Header: Small Logo (1x1) + Issuer Name (1x3) + Credential Name (1x4)
-  Body: Reserved for Future Use (2x4)
-  Footer: Issued or Expired Date (1x4)
-
-  | L | Issuer    | Cred Name     |
-  |             Body              |
-  |             Body              |
-  | Issued/Expired Date           |
-
- Variation 2:
-  Header: Large Logo (1x4) + Credential Name (1x4)
-  Body: Reserved for Future Use (2x4)
-  Footer: Issued or Expired Date (1x4)
-
-  | Logo          | Cred Name     |
-  |             Body              |
-  |             Body              |
-  | Issued/Expired Date           |
-
-
-Note: The small logo MUST be provided as 1x1 (height/width) ratio, while the large logo MUST be provided as 1x4 (height/width) ratio
- */
-
-const CredentialCard10: React.FC<CredentialCard10Props> = ({ credential, style = {}, onPress = undefined }) => {
-  const { width } = useWindowDimensions()
-  const cardHeight = width / 2 // a card height is half of the screen width
-  const cardHeaderHeight = cardHeight / 4 // a card has a total of 4 rows, and the header occupy 1 row
-  const { t, i18n } = useTranslation()
-  const { ColorPalette, TextTheme } = useTheme()
-  const [overlay, setOverlay] = useState<CredentialOverlay<LegacyBrandingOverlay>>({})
-  const [isRevoked, setIsRevoked] = useState<boolean>(false)
-  const credentialConnectionLabel = useCredentialConnectionLabel(credential)
-  const [bundleResolver] = useServices([TOKENS.UTIL_OCA_RESOLVER])
-
-  const styles = StyleSheet.create({
-    container: {
-      backgroundColor: overlay?.brandingOverlay?.imageSource ? transparent : overlay?.brandingOverlay?.backgroundColor,
-      height: cardHeight,
-      borderRadius: borderRadius,
-    },
-    outerHeaderContainer: {
-      flexDirection: 'column',
-      backgroundColor: overlay?.brandingOverlay?.header?.backgroundColor ?? transparent,
-      height: cardHeaderHeight + borderPadding,
-      borderTopLeftRadius: borderRadius,
-      borderTopRightRadius: borderRadius,
-    },
-    innerHeaderContainer: {
-      flexDirection: 'row',
-      height: cardHeaderHeight,
-      marginLeft: borderPadding,
-      marginRight: borderPadding,
-      marginTop: borderPadding,
-      marginBottom: borderPadding,
-      backgroundColor: overlay?.brandingOverlay?.header?.backgroundColor ?? transparent,
-    },
-    bodyContainer: {
-      flexGrow: 1,
-    },
-    footerContainer: {
-      flexDirection: 'row',
-      backgroundColor: overlay?.brandingOverlay?.footer?.backgroundColor ?? transparent,
-      paddingHorizontal,
-      paddingVertical,
-      borderBottomLeftRadius: borderRadius,
-      borderBottomRightRadius: borderRadius,
-    },
-    revokedFooter: {
-      backgroundColor: ColorPalette.notification.error,
-      flexGrow: 1,
-      marginHorizontal: -1 * paddingHorizontal,
-      marginVertical: -1 * paddingVertical,
-      paddingHorizontal: paddingHorizontal,
-      paddingVertical: paddingVertical,
-      borderBottomLeftRadius: borderRadius,
-      borderBottomRightRadius: borderRadius,
-    },
-    flexGrow: {
-      flexGrow: 1,
-    },
-    watermark: {
-      opacity: 0.16,
-      fontSize: 22,
-      transform: [{ rotate: '-30deg' }],
-    },
-  })
-
-  useEffect(() => {
-    if (!(credential && isValidAnonCredsCredential(credential))) {
-      return
-    }
-
-    const params = {
-      identifiers: getCredentialIdentifiers(credential),
-      attributes: buildFieldsFromAnonCredsCredential(credential),
-      meta: {
-        credConnectionId: credential?.connectionId,
-        alias: credentialConnectionLabel,
-      },
-      language: i18n.language,
-    }
-    bundleResolver.resolveAllBundles(params).then((bundle) => {
-      setOverlay((o) => ({
-        ...o,
-        ...bundle,
-        brandingOverlay: bundle.brandingOverlay as LegacyBrandingOverlay,
-      }))
-    })
-  }, [credential, credentialConnectionLabel, i18n.language, bundleResolver])
-
-  useEffect(() => {
-    setIsRevoked(credential.revocationNotification !== undefined)
-  }, [credential.revocationNotification])
-
-  const CredentialCardHeader: React.FC = () => {
-    return (
-      <View style={styles.outerHeaderContainer}>
-        <View testID={testIdWithKey('CredentialCardHeader')} style={styles.innerHeaderContainer}>
-          {overlay?.brandingOverlay?.header?.imageSource && (
-            <Image
-              source={toImageSource(overlay?.brandingOverlay?.header?.imageSource)}
-              style={{
-                flex: !overlay?.brandingOverlay?.header?.hideIssuer ? 1 : 4,
-                resizeMode: 'contain',
-                maxHeight: styles.outerHeaderContainer.height - borderPadding,
-              }}
-            />
-          )}
-          {overlay?.brandingOverlay?.header?.hideIssuer ? null : (
-            <Text
-              numberOfLines={1}
-              ellipsizeMode="tail"
-              style={[
-                TextTheme.label,
-                {
-                  color:
-                    overlay?.brandingOverlay?.header?.color ??
-                    credentialTextColor(
-                      ColorPalette,
-                      overlay?.brandingOverlay?.header?.backgroundColor || overlay?.brandingOverlay?.backgroundColor
-                    ),
-                  paddingHorizontal: 0.5 * paddingHorizontal,
-                  flex: !overlay?.brandingOverlay?.header?.imageSource ? 4 : 3,
-                  textAlignVertical: 'center',
-                },
-              ]}
-              testID={testIdWithKey('CredentialIssuer')}
-              maxFontSizeMultiplier={1}
-            >
-              {overlay?.metaOverlay?.issuer}
-            </Text>
-          )}
-          <Text
-            numberOfLines={1}
-            ellipsizeMode="tail"
-            style={[
-              TextTheme.label,
-              {
-                color:
-                  overlay?.brandingOverlay?.header?.color ??
-                  credentialTextColor(
-                    ColorPalette,
-                    overlay?.brandingOverlay?.header?.backgroundColor || overlay?.brandingOverlay?.backgroundColor
-                  ),
-                textAlign: 'right',
-                paddingHorizontal: 0.5 * paddingHorizontal,
-                flex: 4,
-                textAlignVertical: 'center',
-              },
-            ]}
-            testID={testIdWithKey('CredentialName')}
-            maxFontSizeMultiplier={1}
-          >
-            {overlay?.metaOverlay?.name}
-          </Text>
-        </View>
-      </View>
-    )
-  }
-
-  const CredentialCardBody: React.FC = () => {
-    return <View style={styles.bodyContainer} testID={testIdWithKey('CredentialCardBody')}></View>
-  }
-
-  const CredentialCardFooter: React.FC<{ revoked: boolean }> = ({ revoked = false }) => {
-    return (
-      <View testID={testIdWithKey('CredentialCardFooter')} style={styles.footerContainer}>
-        {revoked ? (
-          <View style={styles.revokedFooter}>
-            <Text
-              style={[TextTheme.label, { color: ColorPalette.semantic.error }]}
-              testID={testIdWithKey('CredentialRevoked')}
-            >
-              {t('CredentialDetails.Revoked')}
-            </Text>
-          </View>
-        ) : (
-          <Text
-            style={[
-              TextTheme.caption,
-              {
-                color:
-                  overlay?.brandingOverlay?.footer?.color ??
-                  credentialTextColor(
-                    ColorPalette,
-                    overlay?.brandingOverlay?.footer?.backgroundColor || overlay?.brandingOverlay?.backgroundColor
-                  ),
-              },
-            ]}
-            testID={testIdWithKey('CredentialIssued')}
-            maxFontSizeMultiplier={1}
-          >
-            {t('CredentialDetails.Issued')}: {formatTime(credential.createdAt, { shortMonth: true })}
-          </Text>
-        )}
-      </View>
-    )
-  }
-
-  const CredentialCard: React.FC<{ revoked?: boolean }> = ({ revoked = false }) => {
-    return (
-      <>
-        <CredentialCardHeader />
-        <CredentialCardBody />
-        <CredentialCardFooter revoked={revoked} />
-      </>
-    )
-  }
-
-  return (
-    <TouchableOpacity
-      accessible={true}
-      accessibilityLabel={`${
-        overlay.metaOverlay?.issuer ? `${t('Credentials.IssuedBy')} ${overlay.metaOverlay?.issuer}` : ''
-      }, ${overlay.metaOverlay?.watermark ?? ''} ${overlay.metaOverlay?.name ?? ''} ${t('Credentials.Credential')}.`}
-      disabled={typeof onPress === 'undefined' ? true : false}
-      onPress={onPress}
-      style={[styles.container, style]}
-      testID={testIdWithKey('ShowCredentialDetails')}
-    >
-      <View style={[styles.flexGrow, { overflow: 'hidden' }]} testID={testIdWithKey('CredentialCard')}>
-        {overlay?.brandingOverlay?.imageSource ? (
-          <ImageBackground
-            source={toImageSource(overlay?.brandingOverlay?.imageSource)}
-            style={styles.flexGrow}
-            imageStyle={{ borderRadius }}
-          >
-            {overlay.metaOverlay?.watermark && (
-              <CardWatermark
-                width={width}
-                height={cardHeight}
-                style={styles.watermark}
-                watermark={overlay.metaOverlay?.watermark}
-              />
-            )}
-            <CredentialCard revoked={isRevoked} />
-          </ImageBackground>
-        ) : (
-          <>
-            {overlay.metaOverlay?.watermark && (
-              <CardWatermark
-                width={width}
-                height={cardHeight}
-                style={styles.watermark}
-                watermark={overlay.metaOverlay?.watermark}
-              />
-            )}
-            <CredentialCard revoked={isRevoked} />
-          </>
-        )}
-      </View>
-    </TouchableOpacity>
-  )
-}
-
-export default CredentialCard10