WIP

explorer/package.json

@@ -19,6 +19,8 @@
   },
   "dependencies": {
     "@cosmjs/math": "^0.26.2",
+    "@cosmos-kit/keplr": "^2.4.4",
+    "@cosmos-kit/react": "^2.9.3",
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
     "@mui/icons-material": "^5.0.0",
@@ -30,10 +32,12 @@
     "@nymproject/nym-validator-client": "^0.18.0",
     "@nymproject/react": "^1.0.0",
     "big.js": "^6.2.1",
+    "buffer": "^6.0.3",
+    "chain-registry": "^1.20.0",
     "d3-scale": "^4.0.0",
     "date-fns": "^2.24.0",
-    "lodash": "^4.17.21",
     "i18n-iso-countries": "^6.8.0",
+    "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^3.1.4",

explorer/src/components/ConnectKeplrWallet.tsx

@@ -0,0 +1,105 @@
+import { useChain, useWallet, ChainProvider } from '@cosmos-kit/react';
+import { Box, Button, Card } from '@mui/material';
+import Big from 'big.js';
+
+import { useEffect, useState, useMemo } from 'react';
+
+export function useIsClient() {
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  return isClient;
+}
+
+export const uNYMtoNYM = (unym: string, rounding = 6) => {
+  const nym = Big(unym).div(1000000).toFixed(rounding);
+
+  return {
+    asString: () => {
+      return nym;
+    },
+    asNumber: () => {
+      return Number(nym);
+    },
+  };
+};
+
+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 isClient = useIsClient();
+
+  useEffect(() => {
+    const fn = async () => {
+      await mainWallet?.connect();
+    };
+    fn();
+  }, []);
+
+  const [balance, setBalance] = useState<{
+    status: 'loading' | 'success';
+    data?: string;
+  }>({ status: 'loading', data: undefined });
+
+  useEffect(() => {
+    const getBalance = async (walletAddress: string) => {
+      setBalance({ status: 'loading', data: undefined });
+
+      const account = await getCosmWasmClient();
+      const uNYMBalance = await account.getBalance(walletAddress, 'unym');
+      const NYMBalance = uNYMtoNYM(uNYMBalance.amount).asString();
+
+      setBalance({ status: 'success', data: NYMBalance });
+    };
+
+    if (address) {
+      getBalance(address);
+    }
+  }, [address, getCosmWasmClient]);
+
+  console.log('balance :>> ', balance);
+
+  if (!isClient) return null;
+
+  const getGlobalbutton = () => {
+    if (globalStatus === 'Connecting') {
+      return <Button onClick={() => connect()}>{`Connecting ${wallet?.prettyName}`}</Button>;
+    }
+    if (globalStatus === 'Connected') {
+      return (
+        <Box display={'flex'} alignItems={'center'}>
+          <Button onClick={() => openView()}>
+            <div>
+              <span>Connected to: {wallet?.prettyName}</span>
+            </div>
+          </Button>
+
+          <Box>{address}</Box>
+          <Box>Balance: {balance.data} NYM</Box>
+
+          <Button
+            onClick={async () => {
+              await disconnect();
+              // setGlobalStatus(WalletStatus.Disconnected);
+            }}
+          >
+            Disconnect
+          </Button>
+        </Box>
+      );
+    }
+
+    return <Button onClick={() => connect()}>Connect Wallet</Button>;
+  };
+
+  return (
+    <Card className="min-w-[350px] max-w-[800px] mt-20 mx-auto p-10">
+      <Box>
+        <div className="flex justify-start space-x-5">{getGlobalbutton()}</div>
+      </Box>
+    </Card>
+  );
+}

explorer/src/components/Nav.tsx

@@ -24,6 +24,11 @@ import { Socials } from './Socials';
 import { Footer } from './Footer';
 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 { wallets as keplr } from '@cosmos-kit/keplr';
+import { useEffect, useState, useMemo } from 'react';
 
 const drawerWidth = 255;
 const bannerHeight = 80;
@@ -272,6 +277,33 @@ export const Nav: FCWithChildren = ({ children }) => {
     }
   };
 
+  const assetsFixedUp = useMemo(() => {
+    const nyx = assets.find((a) => a.chain_name === 'nyx');
+    if (nyx) {
+      const nyxCoin = nyx.assets.find((a) => a.name === 'nyx');
+      if (nyxCoin) {
+        nyxCoin.coingecko_id = 'nyx';
+      }
+      nyx.assets = nyx.assets.reverse();
+    }
+    return assets;
+  }, [assets]);
+
+  const chainsFixedUp = useMemo(() => {
+    const nyx = chains.find((c) => c.chain_id === 'nyx');
+    if (nyx) {
+      if (!nyx.staking) {
+        nyx.staking = {
+          staking_tokens: [{ denom: 'unyx' }],
+          lock_duration: {
+            blocks: 10000,
+          },
+        };
+      }
+    }
+    return chains;
+  }, [chains]);
+
   return (
     <Box sx={{ display: 'flex' }}>
       <AppBar
@@ -341,6 +373,16 @@ export const Nav: FCWithChildren = ({ children }) => {
                 alignItems: 'center',
               }}
             >
+              <ChainProvider
+                chains={chainsFixedUp}
+                assetLists={assetsFixedUp}
+                wallets={[...keplr]}
+                signerOptions={{
+                  preferredSignType: () => 'amino',
+                }}
+              >
+                <ConnectKeplrWallet />
+              </ChainProvider>
               <Socials />
               <DarkLightSwitchDesktop defaultChecked />
             </Box>

explorer/src/routes/index.tsx

@@ -4,6 +4,7 @@ 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>

explorer/webpack.config.js

@@ -36,6 +36,9 @@ module.exports = mergeWithRules({
 
     // this can be included automatically by the dev server, however build mode fails if missing
     new webpack.HotModuleReplacementPlugin(),
+    new webpack.ProvidePlugin({
+      Buffer: ['buffer', 'Buffer'],
+    }),
   ],
 
   target: 'web',