frontend: Developed NetworkType component and placed it on top of the…

… wallet connect button. Improved styles of the ThemeSwitcher component.
kkomelin · May 16, 2024 · 0a656c4 · 0a656c4
1 parent 5bd2e4c
commit 0a656c4
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 14 deletions.
diff --git a/packages/frontend/src/components/App.tsx b/packages/frontend/src/components/App.tsx
@@ -2,11 +2,13 @@ import { ConnectButton } from '@mysten/dapp-kit'
 import { FC } from 'react'
 import GreetingForm from './GreetingForm'
 import Layout from './Layout'
+import NetworkType from './NetworkType'
 
 const App: FC = () => {
   return (
     <Layout>
-      <div className="flex flex-col items-center justify-center">
+      <div className="flex flex-col items-center justify-center gap-3">
+        <NetworkType />
         <ConnectButton />
       </div>
 

diff --git a/packages/frontend/src/components/Layout.tsx b/packages/frontend/src/components/Layout.tsx
@@ -7,11 +7,13 @@ import ThemeSwitcher from './ThemeSwitcher'
 const Layout: FC<PropsWithChildren> = ({ children }) => {
   return (
     <div className="flex min-h-screen flex-col items-center justify-center gap-6 py-8">
-      <Header />
-      <main className="py-8">{children}</main>
       <div className="absolute right-0 top-0 p-3">
         <ThemeSwitcher />
       </div>
+
+      <Header />
+      <main className="py-8">{children}</main>
+
       <AnimatedBackground />
       <Toaster
         toastOptions={{

diff --git a/packages/frontend/src/components/NetworkType.tsx b/packages/frontend/src/components/NetworkType.tsx
@@ -0,0 +1,62 @@
+import { useCurrentWallet } from '@mysten/dapp-kit'
+import { Badge } from '@radix-ui/themes'
+import c from 'clsx'
+import { useEffect, useState } from 'react'
+
+const CONNECTION_CHECK_DELAY = 2000
+
+const DISCONNECTED_LABEL = 'disconnected'
+const MAINNET_LABEL = 'mainnet'
+
+const NetworkType = () => {
+  const wallet = useCurrentWallet()
+  const [networkName, setNetworkName] = useState<string>()
+
+  // @todo Find a better type for the wallet.
+  /* eslint-disable  @typescript-eslint/no-explicit-any */
+  const connectionStatusCheck = (wallet: any) => {
+    if (!wallet.isConnected) {
+      setNetworkName(DISCONNECTED_LABEL)
+      return
+    }
+
+    setNetworkName(
+      prepareNetworkName(wallet.currentWallet?.accounts?.[0].chains?.[0])
+    )
+  }
+
+  useEffect(() => {
+    const interval = setInterval(
+      () => connectionStatusCheck(wallet),
+      CONNECTION_CHECK_DELAY
+    )
+    return () => {
+      clearTimeout(interval)
+    }
+  }, [wallet])
+
+  useEffect(() => {
+    connectionStatusCheck(wallet)
+  }, [wallet])
+
+  return (
+    <Badge
+      className={c(
+        'rounded-lg px-3 py-1.5 text-amber-600 shadow',
+        { '!text-red-500': networkName === DISCONNECTED_LABEL },
+        { '!text-green-500': networkName === MAINNET_LABEL }
+      )}
+    >
+      {networkName}
+    </Badge>
+  )
+}
+
+export default NetworkType
+
+const prepareNetworkName = (machineName: string) => {
+  if (machineName.startsWith('sui:')) {
+    return machineName.substring(4)
+  }
+  return machineName
+}
diff --git a/packages/frontend/src/components/ThemeSwitcher.tsx b/packages/frontend/src/components/ThemeSwitcher.tsx
@@ -1,5 +1,6 @@
 import { detectBrowserTheme } from '@/helpers/theme'
 import * as Toggle from '@radix-ui/react-toggle'
+import { Badge } from '@radix-ui/themes'
 import { MoonIcon, SunIcon } from 'lucide-react'
 import { useEffect } from 'react'
 import { useLocalStorage } from 'react-use'
@@ -19,16 +20,14 @@ const ThemeSwitcher = () => {
   }
 
   return (
-    <Toggle.Root
-      className="rounded-full p-2 shadow"
-      aria-label="Toggle theme"
-      onPressedChange={toggleTheme}
-    >
-      {theme === 'dark' ? (
-        <SunIcon className="h-5 w-5" />
-      ) : (
-        <MoonIcon className="h-5 w-5" />
-      )}
+    <Toggle.Root aria-label="Toggle theme" onPressedChange={toggleTheme}>
+      <Badge className="rounded-full p-2 shadow">
+        {theme === 'dark' ? (
+          <SunIcon className="h-5 w-5" />
+        ) : (
+          <MoonIcon className="h-5 w-5" />
+        )}
+      </Badge>
     </Toggle.Root>
   )
 }

diff --git a/packages/frontend/src/providers/SuiProvider.tsx b/packages/frontend/src/providers/SuiProvider.tsx
@@ -14,7 +14,7 @@ const SuiProvider: FC<PropsWithChildren> = ({ children }) => {
         networks={networkConfig}
         defaultNetwork={ENetwork.LOCALNET}
       >
-        <WalletProvider autoConnect>{children}</WalletProvider>
+        <WalletProvider autoConnect={false}>{children}</WalletProvider>
       </SuiClientProvider>
     </QueryClientProvider>
   )