From d8f7de7c0ff11f642560321a5eacfde85d82407e Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Thu, 19 Jan 2023 11:52:15 +0700
Subject: [PATCH 1/4] style: add checkmark to selected network

---
 src/lib/layout/Header.tsx | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/lib/layout/Header.tsx b/src/lib/layout/Header.tsx
index 8c59a98ad..98d04afdb 100644
--- a/src/lib/layout/Header.tsx
+++ b/src/lib/layout/Header.tsx
@@ -12,6 +12,7 @@ import { useWallet } from "@cosmos-kit/react";
 import { useRouter } from "next/router";
 import { useCallback } from "react";
 import { FiChevronDown } from "react-icons/fi";
+import { MdCheck } from "react-icons/md";
 
 import { useInternalNavigate } from "lib/app-provider";
 import { WalletSection } from "lib/components/Wallet";
@@ -98,11 +99,21 @@ const Header = () => {
                   }}
                   flexDirection="column"
                   alignItems="flex-start"
+                  _hover={{
+                    backgroundColor: "hover.dark",
+                  }}
                 >
-                  <Text>{getChainRecord(chainName)?.chain.pretty_name}</Text>
-                  <Text color="text.dark" fontSize="sm">
-                    {getChainRecord(chainName)?.chain.chain_id}
-                  </Text>
+                  <Flex justify="space-between" align="center" w="full">
+                    <Flex direction="column">
+                      <Text variant="body2">
+                        {getChainRecord(chainName)?.chain.pretty_name}
+                      </Text>
+                      <Text color="text.dark" variant="body3">
+                        {getChainRecord(chainName)?.chain.chain_id}
+                      </Text>
+                    </Flex>
+                    <Icon as={MdCheck} boxSize={4} color="gray.600" />
+                  </Flex>
                 </MenuItem>
               );
             })}

From 998c6442797ce01659e0d8f25c6c8300a9cbfb1f Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Thu, 19 Jan 2023 11:58:05 +0700
Subject: [PATCH 2/4] fix: add conditional checked

---
 src/lib/data/wallet.ts    |  2 +-
 src/lib/layout/Header.tsx | 11 +++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/lib/data/wallet.ts b/src/lib/data/wallet.ts
index 9df65defb..31957fb9b 100644
--- a/src/lib/data/wallet.ts
+++ b/src/lib/data/wallet.ts
@@ -1,4 +1,4 @@
-export const MAINNET_CHAIN_NAMES = [];
+export const MAINNET_CHAIN_NAMES = ["osmosis"];
 
 export const TESTNET_CHAIN_NAMES = ["osmosistestnet"];
 
diff --git a/src/lib/layout/Header.tsx b/src/lib/layout/Header.tsx
index 98d04afdb..0f4e5bbcf 100644
--- a/src/lib/layout/Header.tsx
+++ b/src/lib/layout/Header.tsx
@@ -23,7 +23,12 @@ import Searchbar from "./Searchbar";
 const Header = () => {
   const router = useRouter();
   const navigate = useInternalNavigate();
-  const { currentChainRecord, setCurrentChain, getChainRecord } = useWallet();
+  const {
+    currentChainRecord,
+    currentChainName,
+    setCurrentChain,
+    getChainRecord,
+  } = useWallet();
 
   const handleChainSelect = useCallback(
     (chainName: string) => {
@@ -112,7 +117,9 @@ const Header = () => {
                         {getChainRecord(chainName)?.chain.chain_id}
                       </Text>
                     </Flex>
-                    <Icon as={MdCheck} boxSize={4} color="gray.600" />
+                    {chainName === currentChainName && (
+                      <Icon as={MdCheck} boxSize={4} color="gray.600" />
+                    )}
                   </Flex>
                 </MenuItem>
               );

From b4569ef0c22b41fef723ab7d682357abbae9edaf Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Thu, 19 Jan 2023 12:34:37 +0700
Subject: [PATCH 3/4] fix: return on selecting current network

---
 src/lib/layout/Header.tsx | 57 +++++++++++++++++++--------------------
 1 file changed, 28 insertions(+), 29 deletions(-)

diff --git a/src/lib/layout/Header.tsx b/src/lib/layout/Header.tsx
index 0f4e5bbcf..1e3589e15 100644
--- a/src/lib/layout/Header.tsx
+++ b/src/lib/layout/Header.tsx
@@ -32,6 +32,7 @@ const Header = () => {
 
   const handleChainSelect = useCallback(
     (chainName: string) => {
+      if (chainName === currentChainName) return;
       setCurrentChain(chainName);
       navigate({
         pathname: router.asPath.replace(`/${router.query.network}`, ""),
@@ -43,7 +44,7 @@ const Header = () => {
         },
       });
     },
-    [setCurrentChain, navigate, router]
+    [currentChainName, setCurrentChain, navigate, router]
   );
 
   return (
@@ -95,35 +96,33 @@ const Header = () => {
             </Flex>
           </MenuButton>
           <MenuList>
-            {CHAIN_NAMES.map((chainName) => {
-              return (
-                <MenuItem
-                  key={chainName}
-                  onClick={() => {
-                    handleChainSelect(chainName);
-                  }}
-                  flexDirection="column"
-                  alignItems="flex-start"
-                  _hover={{
-                    backgroundColor: "hover.dark",
-                  }}
-                >
-                  <Flex justify="space-between" align="center" w="full">
-                    <Flex direction="column">
-                      <Text variant="body2">
-                        {getChainRecord(chainName)?.chain.pretty_name}
-                      </Text>
-                      <Text color="text.dark" variant="body3">
-                        {getChainRecord(chainName)?.chain.chain_id}
-                      </Text>
-                    </Flex>
-                    {chainName === currentChainName && (
-                      <Icon as={MdCheck} boxSize={4} color="gray.600" />
-                    )}
+            {CHAIN_NAMES.map((chainName) => (
+              <MenuItem
+                key={chainName}
+                onClick={() => {
+                  handleChainSelect(chainName);
+                }}
+                flexDirection="column"
+                alignItems="flex-start"
+                _hover={{
+                  backgroundColor: "hover.dark",
+                }}
+              >
+                <Flex justify="space-between" align="center" w="full">
+                  <Flex direction="column">
+                    <Text variant="body2">
+                      {getChainRecord(chainName)?.chain.pretty_name}
+                    </Text>
+                    <Text color="text.dark" variant="body3">
+                      {getChainRecord(chainName)?.chain.chain_id}
+                    </Text>
                   </Flex>
-                </MenuItem>
-              );
-            })}
+                  {chainName === currentChainName && (
+                    <Icon as={MdCheck} boxSize={4} color="gray.600" />
+                  )}
+                </Flex>
+              </MenuItem>
+            ))}
           </MenuList>
         </Menu>
         <WalletSection />

From 8d344c875bc7bfccf036e131bc27f7f230f29668 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Thu, 19 Jan 2023 12:35:57 +0700
Subject: [PATCH 4/4] chore: changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3a177a7d1..395fbdaf0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#103](https://github.com/alleslabs/celatone-frontend/pull/103) Add check mark to selected network
 - [#101](https://github.com/alleslabs/celatone-frontend/pull/101) Fix incorrect truncating of proposal id in contract detail's migration table
 - [#100](https://github.com/alleslabs/celatone-frontend/pull/100) Fix contract instantiated time parsing
 - [#97](https://github.com/alleslabs/celatone-frontend/pull/97) Change label style to always afloat