fix: ui avatar for validator not shown when encounter special chars

CHANGELOG.md

@@ -82,6 +82,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#305](https://github.com/alleslabs/celatone-frontend/pull/305) Fix UI avatar for validator not shown when encounter special chars
 - [#302](https://github.com/alleslabs/celatone-frontend/pull/302) Fix token card width, text size for unsupported token button in account details page and tx count color when equal to zero
 - [#300](https://github.com/alleslabs/celatone-frontend/pull/300) Fix search bar's placeholder text and remove separator in latest block height
 - [#290](https://github.com/alleslabs/celatone-frontend/pull/290) Fix spacing and styling in account detail

src/lib/components/ValidatorBadge.tsx

@@ -5,6 +5,7 @@ import { useWallet } from "@cosmos-kit/react";
 import { getChainApiPath } from "env";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import type { ValidatorInfo } from "lib/types";
+import { removeSpecialChars } from "lib/utils";
 
 interface ValidatorBadgeProps {
   validator: ValidatorInfo | null;
@@ -44,9 +45,9 @@ export const ValidatorBadge = ({
               currentChainName
             )}/moniker/${validator.validatorAddress}.png`}
             alt={validator.moniker}
-            fallbackSrc={`https://ui-avatars.com/api/?name=${
+            fallbackSrc={`https://ui-avatars.com/api/?name=${removeSpecialChars(
               validator.moniker ?? ""
-            }&background=9793F3&color=fff`}
+            )}&background=9793F3&color=fff`}
             borderRadius="50%"
           />
           <ExplorerLink

src/lib/utils/formatter/index.ts

@@ -7,3 +7,4 @@ export * from "./snakeToCamel";
 export * from "./formatBalanceWithDenom";
 export * from "./tokenType";
 export * from "./token";
+export * from "./text";

src/lib/utils/formatter/text.ts

@@ -0,0 +1,2 @@
+export const removeSpecialChars = (text: string) =>
+  text.replace(/[^a-zA-Z0-9]/g, "");