WIP

explorer/package.json

@@ -19,8 +19,8 @@
   },
   "dependencies": {
     "@cosmjs/math": "^0.26.2",
-    "@cosmos-kit/keplr": "^2.4.4",
-    "@cosmos-kit/react": "^2.9.3",
+    "@cosmos-kit/keplr": "^2.3.11",
+    "@cosmos-kit/react": "^2.8.2",
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
     "@mui/icons-material": "^5.0.0",
@@ -33,7 +33,7 @@
     "@nymproject/react": "^1.0.0",
     "big.js": "^6.2.1",
     "buffer": "^6.0.3",
-    "chain-registry": "^1.20.0",
+    "chain-registry": "^1.19.0",
     "d3-scale": "^4.0.0",
     "date-fns": "^2.24.0",
     "i18n-iso-countries": "^6.8.0",
@@ -114,6 +114,9 @@
     "webpack-favicons": "^1.3.8",
     "webpack-merge": "^5.8.0"
   },
+
+
+
   "browserslist": {
     "production": [
       ">0.2%",

explorer/src/components/ConnectKeplrWallet.tsx

@@ -1,9 +1,11 @@
-import { useChain, useWallet, ChainProvider } from '@cosmos-kit/react';
+import { useChain } from '@cosmos-kit/react';
 import { Box, Button, Card } from '@mui/material';
 import Big from 'big.js';
 
 import { useEffect, useState, useMemo } from 'react';
 
+import '@interchain-ui/react/styles';
+
 export function useIsClient() {
   const [isClient, setIsClient] = useState(false);
 
@@ -28,17 +30,10 @@ export const uNYMtoNYM = (unym: string, rounding = 6) => {
 };
 
 export default function ConnectKeplrWallet() {
-  const { username, connect, disconnect, wallet, openView, address, getCosmWasmClient } = useChain('nyx');
-  const { status: globalStatus, mainWallet } = useWallet(); // status here is the global wallet status for all activated chains (chain is activated when call useChain)
+  const { username, connect, disconnect, wallet, openView, address, getCosmWasmClient, isWalletConnected } =
+    useChain('nyx');
   const isClient = useIsClient();
 
-  useEffect(() => {
-    const fn = async () => {
-      await mainWallet?.connect();
-    };
-    fn();
-  }, []);
-
   const [balance, setBalance] = useState<{
     status: 'loading' | 'success';
     data?: string;
@@ -65,10 +60,10 @@ export default function ConnectKeplrWallet() {
   if (!isClient) return null;
 
   const getGlobalbutton = () => {
-    if (globalStatus === 'Connecting') {
-      return <Button onClick={() => connect()}>{`Connecting ${wallet?.prettyName}`}</Button>;
-    }
-    if (globalStatus === 'Connected') {
+    // if (globalStatus === 'Connecting') {
+    //   return <Button onClick={() => connect()}>{`Connecting ${wallet?.prettyName}`}</Button>;
+    // }
+    if (isWalletConnected) {
       return (
         <Box display={'flex'} alignItems={'center'}>
           <Button onClick={() => openView()}>

explorer/src/components/Nav.tsx

@@ -26,9 +26,11 @@ import { DarkLightSwitchDesktop } from './Switch';
 import { NavOptionType } from '../context/nav';
 import ConnectKeplrWallet from './ConnectKeplrWallet';
 import { assets, chains } from 'chain-registry';
-import { useChain, useWallet, ChainProvider } from '@cosmos-kit/react';
+import { ChainProvider } from '@cosmos-kit/react';
 import { wallets as keplr } from '@cosmos-kit/keplr';
-import { useEffect, useState, useMemo } from 'react';
+import { useMemo } from 'react';
+
+import '@interchain-ui/react/styles';
 
 const drawerWidth = 255;
 const bannerHeight = 80;

explorer/src/routes/index.tsx

@@ -4,7 +4,6 @@ import { PageOverview } from '../pages/Overview';
 import { PageMixnodesMap } from '../pages/MixnodesMap';
 import { Page404 } from '../pages/404';
 import { NetworkComponentsRoutes } from './network-components';
-import ConnectKeplrWallet from '../components/ConnectKeplrWallet';
 
 export const Routes: FCWithChildren = () => (
   <ReactRouterRoutes>