From 99a92da9c2d0bf96179fb3ab33bdb74d7a962f5f Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Thu, 27 Apr 2023 16:04:52 +0700
Subject: [PATCH 1/2] fix: ui avatar for validator not shown when encounter
 special chars

---
 src/lib/components/ValidatorBadge.tsx | 5 +++--
 src/lib/utils/formatter/index.ts      | 1 +
 src/lib/utils/formatter/text.ts       | 2 ++
 3 files changed, 6 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/utils/formatter/text.ts

diff --git a/src/lib/components/ValidatorBadge.tsx b/src/lib/components/ValidatorBadge.tsx
index 7058fd905..c2463cb5e 100644
--- a/src/lib/components/ValidatorBadge.tsx
+++ b/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
diff --git a/src/lib/utils/formatter/index.ts b/src/lib/utils/formatter/index.ts
index ad0a3ee3b..c2eac1536 100644
--- a/src/lib/utils/formatter/index.ts
+++ b/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";
diff --git a/src/lib/utils/formatter/text.ts b/src/lib/utils/formatter/text.ts
new file mode 100644
index 000000000..87d32ff52
--- /dev/null
+++ b/src/lib/utils/formatter/text.ts
@@ -0,0 +1,2 @@
+export const removeSpecialChars = (text: string) =>
+  text.replace(/[^a-zA-Z0-9]/g, "");

From 668e1a01f8831e41e8bb5cb2a2d588eba51cfaf8 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Thu, 27 Apr 2023 16:15:32 +0700
Subject: [PATCH 2/2] chore: add changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3462afe8c..bb340e943 100644
--- a/CHANGELOG.md
+++ b/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
 - [#290](https://github.com/alleslabs/celatone-frontend/pull/290) Fix spacing and styling in account detail
 - [#280](https://github.com/alleslabs/celatone-frontend/pull/280) Fix begin unlocking optional coins field causing crash
 - [#269](https://github.com/alleslabs/celatone-frontend/pull/269) Fix array value json string format and receipt row text color