show validation icon on wallet (MystenLabs#7699)

thedave12345 · Jan 25, 2023 · 0090e93 · 0090e93
1 parent 532da36
commit 0090e93
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 13 deletions.
diff --git a/apps/wallet/src/ui/app/staking/validators/SelectValidatorCard.tsx b/apps/wallet/src/ui/app/staking/validators/SelectValidatorCard.tsx
@@ -46,6 +46,12 @@ export function SelectValidatorCard() {
                 name: getName(validator.fields.metadata.fields.name),
                 address: validator.fields.metadata.fields.sui_address,
                 apy: calculateAPY(validator, +validatorsData.epoch),
+                logo:
+                    validator.fields.metadata.fields.image_url &&
+                    typeof validator.fields.metadata.fields.image_url ===
+                        'string'
+                        ? validator.fields.metadata.fields.image_url
+                        : null,
             }))
             .sort((a, b) => {
                 if (sortKey === 'name') {
@@ -162,7 +168,7 @@ export function SelectValidatorCard() {
                 </div>
                 <div className="flex items-start flex-col w-full mt-1 flex-1">
                     {validatorsData &&
-                        validatorList.map(({ name, address, apy }) => (
+                        validatorList.map(({ name, address, apy, logo }) => (
                             <div
                                 className="cursor-pointer w-full relative"
                                 key={address}
@@ -172,6 +178,7 @@ export function SelectValidatorCard() {
                                     selected={selectedValidator === address}
                                     validatorAddress={address}
                                     validatorName={name}
+                                    logo={logo}
                                     apy={apy}
                                 />
                             </div>

diff --git a/apps/wallet/src/ui/app/staking/validators/ValidatorListItem.tsx b/apps/wallet/src/ui/app/staking/validators/ValidatorListItem.tsx
@@ -21,11 +21,13 @@ type ValidatorListItemProp = {
     apy: number;
     validatorName: string;
     validatorAddress: string;
+    logo: string | null;
 };
 export function ValidatorListItem({
     selected,
     validatorName,
     apy,
+    logo,
     validatorAddress,
 }: ValidatorListItemProp) {
     const truncatedAddress = useMiddleEllipsis(
@@ -34,8 +36,6 @@ export function ValidatorListItem({
         TRUNCATE_PREFIX_LENGTH
     );
 
-    const logo = null;
-
     return (
         <AnimatePresence>
             <motion.div

diff --git a/apps/wallet/src/ui/app/staking/validators/ValidatorLogo.tsx b/apps/wallet/src/ui/app/staking/validators/ValidatorLogo.tsx
@@ -41,24 +41,31 @@ export function ValidatorLogo({
         TRUNCATE_PREFIX_LENGTH
     );
 
-    const validatorName = useMemo(() => {
+    const validatorMeta = useMemo(() => {
         if (!validatorsData) return null;
 
         const validator = validatorsData.find(
             ({ sui_address }) => sui_address === validatorAddress
         );
         if (!validator) return null;
 
-        return getName(validator.name);
-    }, [validatorAddress, validatorsData]);
+        const logo =
+            (validator.image_url && typeof validator.image_url === 'string') ||
+            Array.isArray(validator.image_url)
+                ? validator.image_url
+                : null;
 
-    const logo = null;
+        return {
+            name: getName(validator.name),
+            logo: logo && getName(logo),
+        };
+    }, [validatorAddress, validatorsData]);
 
     if (isLoading) {
         return <div className="flex justify-center items-center">...</div>;
     }
 
-    return validatorName ? (
+    return validatorMeta ? (
         <div
             className={cl(
                 ['w-full flex justify-start  font-semibold'],
@@ -67,20 +74,20 @@ export function ValidatorLogo({
             )}
         >
             <ImageIcon
-                src={logo}
-                label={validatorName}
-                fallback={validatorName}
+                src={validatorMeta.logo}
+                label={validatorMeta.name}
+                fallback={validatorMeta.name}
                 size={iconSize}
                 circle
             />
             <div className="flex flex-col gap-1.5">
                 {isTitle ? (
                     <Heading as="h4" variant="heading4" color="steel-darker">
-                        {validatorName}
+                        {validatorMeta.name}
                     </Heading>
                 ) : (
                     <Text color="gray-90" variant={size} weight="semibold">
-                        {validatorName}
+                        {validatorMeta.name}
                     </Text>
                 )}
                 {showAddress && (