fix: fix identity icon (#19)

Co-authored-by: alpers <alpers@163.com> release-as: 0.14.1
zCloak-Network · Feb 12, 2023 · 1c360a7 · 1c360a7
1 parent 26cc4b8
commit 1c360a7
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 11 deletions.
diff --git a/packages/page-claims/src/CredentialCell.tsx b/packages/page-claims/src/CredentialCell.tsx
@@ -48,9 +48,6 @@ const Wrapper = styled(Paper)(({ theme }) => ({
     '.CredentialCell_actions': {
       opacity: 1,
       transform: 'translateY(0)'
-    },
-    '.CredentialCell_Status': {
-      opacity: 0
     }
   },
   '.CredentialCell_action_status': {
@@ -131,9 +128,20 @@ function CredentialCell({ credential, issuer, rootHash, status, time }: Credenti
                   background: `url(${ctypeMeta.card}) no-repeat, #fff`,
                   backgroundSize: 'cover',
                   backgroundPosition: 'center',
-                  color: ctypeMeta?.color
+                  color: ctypeMeta?.color,
+                  ':hover': {
+                    '.CredentialCell_Status': {
+                      opacity: vc ? 0 : 1
+                    }
+                  }
+                }
+              : {
+                  ':hover': {
+                    '.CredentialCell_Status': {
+                      opacity: vc ? 0 : 1
+                    }
+                  }
                 }
-              : {}
           }
         >
           <Typography className="CredentialCell_title" mt={0} variant="h3">

diff --git a/packages/react-components/src/CredentialStatusDisplay.tsx b/packages/react-components/src/CredentialStatusDisplay.tsx
@@ -34,10 +34,12 @@ const CredentialStatusDisplay: React.FC<{
         alignItems: 'center',
         direction: 'row',
         borderRadius: '5px',
-        bgcolor: alpha(
-          status === 'approved' ? submitColor : status === 'rejected' ? rejectColor : initColor,
-          0.2
-        ),
+        bgcolor: showText
+          ? alpha(
+              status === 'approved' ? submitColor : status === 'rejected' ? rejectColor : initColor,
+              0.2
+            )
+          : 'inherit',
         color: status === 'approved' ? submitColor : status === 'rejected' ? rejectColor : initColor
       })}
     >

diff --git a/packages/react-components/src/IdentityIcon.tsx b/packages/react-components/src/IdentityIcon.tsx
@@ -3,6 +3,7 @@
 
 import jazzicon from '@metamask/jazzicon';
 import { Box } from '@mui/material';
+import { hexFixLength, hexToNumber, isHex, stringToHex } from '@polkadot/util';
 import React, { useLayoutEffect, useMemo, useRef } from 'react';
 
 interface Props {
@@ -12,10 +13,14 @@ interface Props {
 
 const IdentityIcon: React.FC<Props> = ({ diameter = 16, value }) => {
   const icon = useMemo(
-    () => value && jazzicon(diameter, parseInt(value.slice(2, 10), 16)),
+    () =>
+      value &&
+      jazzicon(
+        diameter,
+        hexToNumber(hexFixLength(isHex(value.slice) ? value : stringToHex(value), 52))
+      ),
     [diameter, value]
   );
-
   const iconRef = useRef<HTMLDivElement>(null);
 
   useLayoutEffect(() => {