Merge pull request #103 from alleslabs/style/add-network-checked

style: add checkmark to selected network
alleslabs · Jan 19, 2023 · 147e5a0 · 147e5a0 · vercel · Jan 19, 2023
2 parents 9ca9b86 + 73f9240
commit 147e5a0
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 20 deletions.
diff --git 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
 - [#92](https://github.com/alleslabs/celatone-frontend/pull/92) Create select contract component for admin and migrate pages
 - [#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

diff --git 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
@@ -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";
@@ -22,10 +23,16 @@ 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) => {
+      if (chainName === currentChainName) return;
       setCurrentChain(chainName);
       navigate({
         pathname: router.asPath.replace(`/${router.query.network}`, ""),
@@ -37,7 +44,7 @@ const Header = () => {
         },
       });
     },
-    [setCurrentChain, navigate, router]
+    [currentChainName, setCurrentChain, navigate, router]
   );
 
   return (
@@ -89,23 +96,33 @@ const Header = () => {
             </Flex>
           </MenuButton>
           <MenuList>
-            {CHAIN_NAMES.map((chainName) => {
-              return (
-                <MenuItem
-                  key={chainName}
-                  onClick={() => {
-                    handleChainSelect(chainName);
-                  }}
-                  flexDirection="column"
-                  alignItems="flex-start"
-                >
-                  <Text>{getChainRecord(chainName)?.chain.pretty_name}</Text>
-                  <Text color="text.dark" fontSize="sm">
-                    {getChainRecord(chainName)?.chain.chain_id}
-                  </Text>
-                </MenuItem>
-              );
-            })}
+            {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>
+                  {chainName === currentChainName && (
+                    <Icon as={MdCheck} boxSize={4} color="gray.600" />
+                  )}
+                </Flex>
+              </MenuItem>
+            ))}
           </MenuList>
         </Menu>
         <WalletSection />