From 04bc42e3332776b1a650ac7428d722690ffda464 Mon Sep 17 00:00:00 2001
From: Yana <yanok87@users.noreply.github.com>
Date: Tue, 7 Jan 2025 16:39:17 +0200
Subject: [PATCH] Add mobile Keplr connection

---
 .../src/components/header/MobileHeader.tsx    |  2 +-
 .../src/components/wallet/ConnectWallet.tsx   | 46 ++++++++++++++-----
 explorer-nextjs/src/config/index.ts           |  2 +-
 3 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/explorer-nextjs/src/components/header/MobileHeader.tsx b/explorer-nextjs/src/components/header/MobileHeader.tsx
index 662dede066..593a10dc0e 100644
--- a/explorer-nextjs/src/components/header/MobileHeader.tsx
+++ b/explorer-nextjs/src/components/header/MobileHeader.tsx
@@ -135,7 +135,6 @@ const MobileMenuHeader = ({
         >
           <NymLogo />
         </Link>
-        <ConnectWallet size="small" />
 
         <Box
           sx={{
@@ -149,6 +148,7 @@ const MobileMenuHeader = ({
           </IconButton>
         </Box>
       </Box>
+      <ConnectWallet size="small" />
     </Wrapper>
   );
 };
diff --git a/explorer-nextjs/src/components/wallet/ConnectWallet.tsx b/explorer-nextjs/src/components/wallet/ConnectWallet.tsx
index 40596bfe55..a7c18ee472 100644
--- a/explorer-nextjs/src/components/wallet/ConnectWallet.tsx
+++ b/explorer-nextjs/src/components/wallet/ConnectWallet.tsx
@@ -2,7 +2,13 @@
 
 import { COSMOS_KIT_USE_CHAIN } from "@/config";
 import { useChain } from "@cosmos-kit/react";
-import { Button, type ButtonProps, IconButton, Stack } from "@mui/material";
+import {
+  Box,
+  Button,
+  type ButtonProps,
+  IconButton,
+  Typography,
+} from "@mui/material";
 import Cross from "../icons/Cross";
 import { WalletAddress } from "./WalletAddress";
 import { WalletBalance } from "./WalletBalance";
@@ -27,18 +33,36 @@ const ConnectWallet = ({ ...buttonProps }: ButtonPropsWithOnClick) => {
 
   if (isWalletConnected && !buttonProps.hideAddressAndBalance) {
     return (
-      <Stack direction="row" spacing={3}>
+      <Box
+        display={"flex"}
+        flexDirection={{ xs: "column", sm: "row" }}
+        alignItems={"center"}
+        gap={{ xs: 2, sm: 3 }}
+      >
         <WalletBalance />
         <WalletAddress address={address} />
-        <IconButton
-          size="small"
-          onClick={async () => {
-            await handleDisconnectWallet();
-          }}
-        >
-          <Cross />
-        </IconButton>
-      </Stack>
+        <Box>
+          <IconButton
+            size="small"
+            onClick={async () => {
+              await handleDisconnectWallet();
+            }}
+          >
+            <Box height={24} display={"flex"} alignItems={"center"}>
+              <Typography
+                variant="h5"
+                fontWeight={400}
+                mr={1}
+                display={{ sm: "none" }}
+                sx={{ color: "unset" }}
+              >
+                Disconnect
+              </Typography>
+              <Cross />
+            </Box>
+          </IconButton>
+        </Box>
+      </Box>
     );
   }
 
diff --git a/explorer-nextjs/src/config/index.ts b/explorer-nextjs/src/config/index.ts
index f38215abcf..6ee864de33 100644
--- a/explorer-nextjs/src/config/index.ts
+++ b/explorer-nextjs/src/config/index.ts
@@ -1,5 +1,5 @@
 export const COSMOS_KIT_USE_CHAIN =
-  process.env.NEXT_PUBLIC_COSMOS_KIT_USE_CHAIN || "sandbox";
+  process.env.NEXT_PUBLIC_COSMOS_KIT_USE_CHAIN || "nyx";
 
 export const NYM_MIXNET_CONTRACT =
   process.env.NYM_MIXNET_CONTRACT ||