Replace blue avatar with React Avatar

MPR #336
oursky · Aug 2, 2022 · ccea1e9 · ccea1e9
2 parents 0197737 + 12d1e2c
commit ccea1e9
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 26 deletions.
diff --git a/react-app/package.json b/react-app/package.json
@@ -28,13 +28,15 @@
     "bech32": "^2.0.0",
     "bignumber.js": "^9.0.2",
     "buffer": "^6.0.3",
+    "core-js-pure": "^3.24.1",
     "crypto": "npm:crypto-browserify",
     "date-fns": "^2.28.0",
     "date-fns-tz": "^1.3.4",
     "graphql": "^16.5.0",
     "millify": "^4.0.0",
     "path": "npm:path-browserify",
     "react": "^18.1.0",
+    "react-avatar": "^5.0.1",
     "react-dom": "^18.1.0",
     "react-hook-form": "^7.31.3",
     "react-paginate": "^8.1.3",

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">

diff --git a/react-app/yarn.lock b/react-app/yarn.lock
@@ -3546,6 +3546,11 @@ chardet@^0.7.0:
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
+charenc@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/charenc/-/charenc-0.0.2.tgz#c0a1d2f3a7092e03774bfa83f14c0fc5790a8667"
+  integrity sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==
+
 "chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.2, chokidar@^3.5.3:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
@@ -3785,6 +3790,11 @@ copy-to-clipboard@^3.3.1:
   dependencies:
     toggle-selection "^1.0.6"
 
+core-js-pure@^3.24.1:
+  version "3.24.1"
+  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.24.1.tgz#8839dde5da545521bf282feb7dc6d0b425f39fd3"
+  integrity sha512-r1nJk41QLLPyozHUUPmILCEMtMw24NG4oWK6RbsDdjzQgg9ZvrUsPBj1MnG0wXXp1DCDU6j+wUvEmBSrtRbLXg==
+
 core-util-is@~1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
@@ -3889,6 +3899,11 @@ cross-undici-fetch@^0.4.0:
     undici "^5.1.0"
     web-streams-polyfill "^3.2.0"
 
+crypt@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/crypt/-/crypt-0.0.2.tgz#88d7ff7ec0dfb86f713dc87bbb42d044d3e6c41b"
+  integrity sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow==
+
 crypto-random-string@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
@@ -5847,6 +5862,11 @@ is-buffer@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.5.tgz#ebc252e400d22ff8d77fa09888821a24a658c191"
   integrity sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==
 
+is-buffer@~1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
+  integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
+
 is-builtin-module@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/is-builtin-module/-/is-builtin-module-3.1.0.tgz#6fdb24313b1c03b75f8b9711c0feb8c30b903b00"
@@ -6045,6 +6065,11 @@ is-relative@^1.0.0:
   dependencies:
     is-unc-path "^1.0.0"
 
+is-retina@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-retina/-/is-retina-1.0.3.tgz#d7401b286bea2ae37f62477588de504d0b8647e3"
+  integrity sha512-/tCmbIETZwCd8uHWO+GvbRa7jxwHFHdfetHfiwoP0aN9UDf3prUJMtKn7iBFYipYhqY1bSTjur8hC/Dakt8eyw==
+
 is-shared-array-buffer@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz#8f259c573b60b6a32d4058a1a07430c0a7344c79"
@@ -7176,6 +7201,15 @@ md5.js@^1.3.4:
     inherits "^2.0.1"
     safe-buffer "^5.1.2"
 
+md5@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/md5/-/md5-2.3.0.tgz#c3da9a6aae3a30b46b7b0c349b87b110dc3bda4f"
+  integrity sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==
+  dependencies:
+    charenc "0.0.2"
+    crypt "0.0.2"
+    is-buffer "~1.1.6"
+
 mdast-util-definitions@^5.0.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/mdast-util-definitions/-/mdast-util-definitions-5.1.0.tgz#b6d10ef00a3c4cf191e8d9a5fa58d7f4a366f817"
@@ -8595,6 +8629,14 @@ rc@^1.2.8:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-avatar@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/react-avatar/-/react-avatar-5.0.1.tgz#66a6c6d1e8a790dfccd7b5ca03f41c193370eb3a"
+  integrity sha512-IE9v9WMcsLb9Zq5NYtZwsHvZX7HKsy87N4hro9/NYSStilPnq3fohPF/N3e3S3KuRAipzV1LNqjKT0Jvb8SMaA==
+  dependencies:
+    is-retina "^1.0.3"
+    md5 "^2.0.0"
+
 react-dom@^18.1.0:
   version "18.1.0"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.1.0.tgz"