react-app: Replace blue avatar with react avatar

refs oursky#336
hochiw · Aug 2, 2022 · 12d1e2c · 12d1e2c
1 parent 1c917b5
commit 12d1e2c
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 26 deletions.
diff --git a/react-app/src/components/StakesTablePanel/StakesTablePanel.tsx b/react-app/src/components/StakesTablePanel/StakesTablePanel.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import cn from "classnames";
 import { Link } from "react-router-dom";
+import Avatar from "react-avatar";
 import Paper from "../common/Paper/Paper";
 import { Icon, IconType } from "../common/Icons/Icons";
 import LocalizedText from "../common/Localized/LocalizedText";
@@ -70,16 +71,16 @@ const StakesTablePanel: React.FC<StakesTablePanelProps> = ({
         >
           {(item) => (
             <div className={cn("flex", "items-center")}>
-              <div
-                className={cn(
-                  "flex-shrink-0",
-                  "w-9",
-                  "h-9",
-                  "leading-none",
-                  "rounded-full",
-                  "bg-blue-700",
-                  "flex-shrink-0"
-                )}
+              <Avatar
+                name={
+                  item.validator.description?.moniker ??
+                  item.validator.operatorAddress
+                }
+                // Hide the initials, we need them as seed to generate random color
+                className={cn("!text-transparent")}
+                size="36px"
+                round={true}
+                // TODO: Handle avatar
               />
               <div className="ml-3">
                 <h3 className="text-sm font-medium text-app-green">

diff --git a/react-app/src/components/ValidatorScreen/ValidatorScreen.tsx b/react-app/src/components/ValidatorScreen/ValidatorScreen.tsx
@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import cn from "classnames";
 import { Link, useSearchParams } from "react-router-dom";
 import { toast } from "react-toastify";
+import Avatar from "react-avatar";
 import { Icon, IconType } from "../common/Icons/Icons";
 import LocalizedText from "../common/Localized/LocalizedText";
 import FilterTabs, { IFilterTabItem } from "../Tabs/FilterTabs";
@@ -233,22 +234,17 @@ const ValidatorScreen: React.FC = () => {
                   !item.jailed && item.status === ValidatorBondingStatus.Bonded;
                 return (
                   <div className={cn("flex", "flex-row")}>
-                    <div
-                      className={cn(
-                        "flex-shrink-0",
-                        "w-9",
-                        "h-9",
-                        "leading-none",
-                        "rounded-full",
-                        "bg-blue-700",
-                        "bg-cover"
-                      )}
-                      style={{
-                        backgroundImage:
-                          item.avatarUrl != null
-                            ? `url(${item.avatarUrl})`
-                            : undefined,
-                      }}
+                    <Avatar
+                      name={item.moniker ?? item.operatorAddress ?? ""}
+                      // Hide the initials, we need them as seed to generate random color
+                      className={cn("!text-transparent")}
+                      size="36px"
+                      round={true}
+                      src={
+                        item.avatarUrl != null
+                          ? `url(${item.avatarUrl})`
+                          : undefined
+                      }
                     />
                     <div className="ml-3">
                       <h3 className="text-sm font-medium text-app-green">