feat: add credential card bg (#16)

Co-authored-by: alpers <alpers@163.com> Co-authored-by: Zhichao Zhang <zzcwoshizz@163.com> release-as: 0.13.0
zCloak-Network · Feb 4, 2023 · 4e7c33c · 4e7c33c
1 parent b62e0a0
commit 4e7c33c
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 10 deletions.
diff --git a/packages/app-config/src/ctypes/index.ts b/packages/app-config/src/ctypes/index.ts
@@ -32,6 +32,7 @@ export const ctypeMeta: Record<HexString, CTypeMeta> = {
     type: 'all',
     card: 'christmas2022/bac_card2.webp'
   },
+  // legal-dao
   '0xa99186086d83f834f0bf951cb7f78cd142f147f3bd7a689086f157418944716c': {
     type: 'attest',
     card: 'legal-dao/bg2.jpeg',
@@ -67,17 +68,19 @@ export const TOP_CTYPES_FOR_ATTEST: HexString[] = isRelease
   : [];
 
 export function getCTypeMetaForIssue(id: HexString): CTypeMeta | undefined {
-  const meta: CTypeMeta | undefined = ctypeMeta[id];
-
-  if (!meta) return undefined;
+  const meta: CTypeMeta | undefined = getCTypeMeta(id);
 
-  return ['all', 'issue'].includes(meta.type) ? meta : undefined;
+  return meta && ['all', 'issue'].includes(meta.type) ? meta : undefined;
 }
 
 export function getCTypeMetaForAttest(id: HexString): CTypeMeta | undefined {
-  const meta: CTypeMeta | undefined = ctypeMeta[id];
+  const meta: CTypeMeta | undefined = getCTypeMeta(id);
 
-  if (!meta) return undefined;
+  return meta && ['all', 'attest'].includes(meta.type) ? meta : undefined;
+}
+
+export function getCTypeMeta(id: HexString): CTypeMeta | undefined {
+  const meta: CTypeMeta | undefined = ctypeMeta[id];
 
-  return ['all', 'attest'].includes(meta.type) ? meta : undefined;
+  return meta ?? undefined;
 }
diff --git a/packages/page-claims/src/CredentialCell.tsx b/packages/page-claims/src/CredentialCell.tsx
@@ -24,7 +24,7 @@ import {
 } from '@credential/react-components';
 import { ellipsisMixin } from '@credential/react-components/utils';
 import { DidName } from '@credential/react-dids';
-import { useToggle } from '@credential/react-hooks';
+import { useCTypeMeta, useToggle } from '@credential/react-hooks';
 import { isMobile } from '@credential/react-hooks/utils/userAgent';
 
 import DownloadButton from './button/DownloadButton';
@@ -120,6 +120,8 @@ function CredentialCell({ credential, issuer, rootHash, status, time }: Credenti
 
   const vc = useMemo(() => (isVC(credential) ? credential : null), [credential]);
 
+  const ctypeMeta = useCTypeMeta(vc?.ctype);
+
   return (
     <>
       <Box position="relative">
@@ -143,7 +145,19 @@ function CredentialCell({ credential, issuer, rootHash, status, time }: Credenti
                 : palette.success.main
           })}
         />
-        <Wrapper onClick={toggleOpen}>
+        <Wrapper
+          onClick={toggleOpen}
+          sx={
+            ctypeMeta?.card
+              ? {
+                  background: `url(${ctypeMeta.card}) no-repeat, #fff`,
+                  backgroundSize: 'cover',
+                  backgroundPosition: 'center',
+                  color: ctypeMeta?.color
+                }
+              : {}
+          }
+        >
           <Box className="CredentialCell_Status">
             <CredentialStatusDisplay showText status={status} />
             <Typography className="CredentialCell_Time" variant="inherit">

diff --git a/packages/react-hooks/src/useCTypeMeta.ts b/packages/react-hooks/src/useCTypeMeta.ts
@@ -7,7 +7,11 @@ import type { CTypeMeta } from '@credential/app-config/ctypes/type';
 
 import { useMemo } from 'react';
 
-import { getCTypeMetaForAttest, getCTypeMetaForIssue } from '@credential/app-config/ctypes';
+import {
+  getCTypeMeta,
+  getCTypeMetaForAttest,
+  getCTypeMetaForIssue
+} from '@credential/app-config/ctypes';
 
 export function useCTypeMetaForIssue(id: HexString): CTypeMeta | undefined {
   return useMemo(() => getCTypeMetaForIssue(id), [id]);
@@ -16,3 +20,9 @@ export function useCTypeMetaForIssue(id: HexString): CTypeMeta | undefined {
 export function useCTypeMetaForAttest(id: HexString): CTypeMeta | undefined {
   return useMemo(() => getCTypeMetaForAttest(id), [id]);
 }
+
+export function useCTypeMeta(id?: HexString): CTypeMeta | undefined {
+  return useMemo(() => {
+    return id ? getCTypeMeta(id) : undefined;
+  }, [id]);
+}