feat: add logos mapping

forbole · Apr 16, 2024 · 2c72716 · 2c72716
1 parent 0134827
commit 2c72716
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 7 deletions.
diff --git a/public/chains/bonus-block.png b/public/chains/bonus-block.png
diff --git a/public/chains/inf-stones.png b/public/chains/inf-stones.png
diff --git a/public/chains/mech-cap.png b/public/chains/mech-cap.png
diff --git a/public/chains/stake-lab.png b/public/chains/stake-lab.png
diff --git a/src/features/staking/components/delegation-details.tsx b/src/features/staking/components/delegation-details.tsx
@@ -113,7 +113,10 @@ const DelegationRowBase = ({
     }
   }, [validatorAddress, staking]);
 
-  const logo = useValidatorLogo(validator?.description.identity);
+  const logo = useValidatorLogo(
+    validator?.description.identity,
+    validator?.operatorAddress,
+  );
 
   const floatingDropdown = (isMobile: boolean) => (
     <FloatingDropdown
@@ -266,7 +269,11 @@ const UnbondingRow = ({
 }: UnbondingRowProps) => {
   const { staking } = stakingRef;
 
-  const logo = useValidatorLogo(validator?.description.identity);
+  const logo = useValidatorLogo(
+    validator?.description.identity,
+    validator?.operatorAddress,
+  );
+
   const validatorAddress = unbonding.validator;
 
   useEffect(() => {

diff --git a/src/features/staking/components/validator-page.tsx b/src/features/staking/components/validator-page.tsx
@@ -47,7 +47,10 @@ export default function ValidatorPage() {
     ReturnType<typeof getValidatorDetailsAction>
   > | null>(null);
 
-  const logo = useValidatorLogo(validatorDetails?.description.identity);
+  const logo = useValidatorLogo(
+    validatorDetails?.description.identity,
+    validatorDetails?.operatorAddress,
+  );
 
   useEffect(() => {
     (async () => {

diff --git a/src/features/staking/components/validators-table.tsx b/src/features/staking/components/validators-table.tsx
@@ -60,7 +60,7 @@ const ValidatorRow = ({
   validator,
 }: ValidatorItemProps) => {
   const { identity } = validator.description;
-  const logo = useValidatorLogo(identity);
+  const logo = useValidatorLogo(identity, validator.operatorAddress);
 
   const votingPowerPerc = getVotingPowerPerc(validator?.tokens, staking.state);
   const votingPowerPercStr = formatVotingPowerPerc(votingPowerPerc);

diff --git a/src/features/staking/hooks.ts b/src/features/staking/hooks.ts
@@ -4,18 +4,40 @@ import { defaultAvatar } from "@/constants";
 
 import { keybaseClient } from "./lib/utils/keybase-client";
 
-export const useValidatorLogo = (identity?: string) => {
+const fallbackLogoMap: Record<string, string | undefined> = {
+  xionvaloper1mq85keggvh67m37035mnncsqjnpkmunl6s2w56: "/chains/bonus-block.png",
+  xionvaloper1sprpvyqln2vxshq8c5jt3dshn480rfeelupqrj: "/chains/inf-stones.png",
+  xionvaloper1t4yes7c20hhga3nhqylnyq9kn5ja8t7c6ay45c: "/chains/mech-cap.png",
+  xionvaloper1ypwfnfuldmlp9u8asqzz6qx29p0utqzer5678k: "/chains/stake-lab.png",
+};
+
+export const useValidatorLogo = (
+  identity?: string,
+  operatorAddress?: string,
+) => {
   const [logo, setLogo] = useState<null | string>(null);
 
   useEffect(() => {
     (async () => {
       if (identity) {
         const logoResponse = await keybaseClient.getIdentityLogo(identity);
 
-        setLogo(logoResponse);
+        if (logoResponse) {
+          setLogo(logoResponse);
+
+          return;
+        }
+      }
+
+      if (operatorAddress) {
+        const fallbackLogo = fallbackLogoMap[operatorAddress];
+
+        if (fallbackLogo) {
+          setLogo(fallbackLogo);
+        }
       }
     })();
-  }, [identity]);
+  }, [identity, operatorAddress]);
 
   return logo || defaultAvatar;
 };