Merge pull request #21 from delegit-xyz/nik-network-switch

Fix the network switch

src/App.tsx

@@ -12,6 +12,7 @@ import { ReDotProvider, ReDotChainProvider } from '@reactive-dot/react'
 import { Suspense } from 'react'
 import { AccountContextProvider } from '@/contexts/AccountsContext'
 import { DelegateeContextProvider } from '@/contexts/DelegateesContext'
+import { NetworkContextProvider } from './contexts/NetworkContext'
 
 const App = () => {
   const [settings] = useLocalStorage('fellowship-settings', {
@@ -24,19 +25,21 @@ const App = () => {
         <ReDotProvider config={config}>
           <ReDotChainProvider chainId="polkadot">
             <Suspense>
-              <DelegateeContextProvider>
-                <AccountContextProvider>
-                  <TooltipProvider>
-                    <div className="flex min-h-screen w-full flex-col bg-muted/40">
-                      <Navigation />
-                      <div className="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">
-                        <Header />
-                        <Content />
+              <NetworkContextProvider>
+                <DelegateeContextProvider>
+                  <AccountContextProvider>
+                    <TooltipProvider>
+                      <div className="flex min-h-screen w-full flex-col bg-muted/40">
+                        <Navigation />
+                        <div className="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">
+                          <Header />
+                          <Content />
+                        </div>
                       </div>
-                    </div>
-                  </TooltipProvider>
-                </AccountContextProvider>
-              </DelegateeContextProvider>
+                    </TooltipProvider>
+                  </AccountContextProvider>
+                </DelegateeContextProvider>
+              </NetworkContextProvider>
             </Suspense>
           </ReDotChainProvider>
         </ReDotProvider>

src/consts.ts

@@ -6,8 +6,6 @@ const DappName = 'Polkadot DelegIt Dashboard'
 const PolkadotUrl = 'https://delegit-xyz.github.io/dashboard'
 
 const GithubOwner = 'delegit-xyz'
-export const DelegeeList =
-  'https://raw.githubusercontent.com/novasamatech/opengov-delegate-registry/master/registry/polkadot.json'
 
 const SideMenuMaximisedWidth = 185
 const SideMenuMinimisedWidth = 75

src/contexts/DelegateesContext.tsx

@@ -1,7 +1,13 @@
 /* eslint-disable react-refresh/only-export-components */
 import { createContext, useContext, useEffect, useState } from 'react'
-import delegateesList from '@/polkadot.json'
+import polkadotList from '@/polkadot.json'
+import kusamaList from '@/kusama.json'
+import { useNetwork } from './NetworkContext'
 // import { dotApi } from '@/clients'
+export const DelegeeListPolkadot =
+  'https://raw.githubusercontent.com/novasamatech/opengov-delegate-registry/master/registry/polkadot.json'
+export const DelegeeListKusama =
+  'https://raw.githubusercontent.com/novasamatech/opengov-delegate-registry/master/registry/kusama.json'
 
 type DelegateesContextProps = {
   children: React.ReactNode | React.ReactNode[]
@@ -25,11 +31,16 @@ const DelegateesContext = createContext<IDelegateesContext | undefined>(
 )
 
 const DelegateeContextProvider = ({ children }: DelegateesContextProps) => {
+  const { network } = useNetwork()
   const [delegetees, setDelegatees] = useState<DelegateeProps[]>([])
 
   useEffect(() => {
-    setDelegatees(delegateesList as DelegateeProps[])
-  }, [])
+    setDelegatees(
+      (network === 'polkadot'
+        ? polkadotList
+        : kusamaList) as unknown as DelegateeProps[],
+    )
+  }, [network])
 
   // Votes thingy - pause for now
   // useEffect(() => {

src/contexts/NetworkContext.tsx

@@ -0,0 +1,59 @@
+/* eslint-disable react-refresh/only-export-components */
+import { createContext, useContext, useEffect, useState } from 'react'
+import { dot, ksm } from '@polkadot-api/descriptors'
+import { PolkadotClient, TypedApi, createClient } from 'polkadot-api'
+import { getWsProvider } from 'polkadot-api/ws-provider/web'
+
+type NetworkContextProps = {
+  children: React.ReactNode | React.ReactNode[]
+}
+
+// const polakdotEndpoints = ['wss://rpc.ibp.network/polkadot']
+// const kusamaEndpoints = ['wss://rpc.ibp.network/kusama']
+
+export type NetworkProps = 'polkadot' | 'kusama'
+
+export interface INetworkContext {
+  network: NetworkProps
+  setNetwork: React.Dispatch<React.SetStateAction<NetworkProps>>
+  client: PolkadotClient | undefined
+  api: TypedApi<typeof dot | typeof ksm> | undefined
+}
+
+const NetworkContext = createContext<INetworkContext | undefined>(undefined)
+
+const NetworkContextProvider = ({ children }: NetworkContextProps) => {
+  const [client, setClient] = useState<PolkadotClient>()
+  const [api, setApi] = useState<TypedApi<typeof dot | typeof ksm>>()
+  const [network, setNetwork] = useState<NetworkProps>('polkadot')
+
+  useEffect(() => {
+    let cl: PolkadotClient
+    let typedApi: TypedApi<typeof dot | typeof ksm>
+    if (network === 'polkadot') {
+      cl = createClient(getWsProvider('wss://rpc.ibp.network/polkadot'))
+      typedApi = cl.getTypedApi(dot)
+    } else {
+      cl = createClient(getWsProvider('wss://rpc.ibp.network/kusama'))
+      typedApi = cl.getTypedApi(ksm)
+    }
+    setClient(cl)
+    setApi(typedApi)
+  }, [network])
+
+  return (
+    <NetworkContext.Provider value={{ network, setNetwork, client, api }}>
+      {children}
+    </NetworkContext.Provider>
+  )
+}
+
+const useNetwork = () => {
+  const context = useContext(NetworkContext)
+  if (context === undefined) {
+    throw new Error('useNetwork must be used within a NetworkContextProvider')
+  }
+  return context
+}
+
+export { NetworkContextProvider, useNetwork }

src/header.tsx

@@ -12,19 +12,21 @@ import { routes } from '@/lib/utils'
 import { useWalletDisconnector } from '@reactive-dot/react'
 import { Settings2, PanelLeft } from 'lucide-react'
 
-import {
-  Menubar,
-  MenubarContent,
-  MenubarItem,
-  MenubarMenu,
-  MenubarSeparator,
-  MenubarShortcut,
-  MenubarTrigger,
-} from '@/components/ui/menubar'
+// import {
+//   Menubar,
+//   MenubarContent,
+//   MenubarItem,
+//   MenubarMenu,
+//   MenubarSeparator,
+//   MenubarShortcut,
+//   MenubarTrigger,
+// } from '@/components/ui/menubar'
 import { useAccounts } from './contexts/AccountsContext'
 import { useEffect } from 'react'
+import { useNetwork } from './contexts/NetworkContext'
 
 export const Header = () => {
+  const { network, setNetwork } = useNetwork()
   const { accounts, selectAccount, selectedAccount } = useAccounts()
   const [, disconnectAll] = useWalletDisconnector()
 
@@ -67,7 +69,7 @@ export const Header = () => {
       </Sheet>
       <div className="flex justify-between w-full">
         <div>
-          {/* TODO: split submenu based on routes */}
+          {/* TODO: split submenu based on routes 
           <Menubar>
             <MenubarMenu>
               <MenubarTrigger>File</MenubarTrigger>
@@ -82,9 +84,32 @@ export const Header = () => {
                 <MenubarItem>Print</MenubarItem>
               </MenubarContent>
             </MenubarMenu>
-          </Menubar>
+          </Menubar>*/}
         </div>
-        <div className="">
+        <div className="flex">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button size="default" className="cursor-pointer mx-2">
+                {network.charAt(0).toUpperCase() + network.slice(1)}
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem
+                className="cursor-pointer"
+                key={'polkadot'}
+                onClick={() => setNetwork('polkadot')}
+              >
+                Polkadot
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                className="cursor-pointer"
+                key={'polkadot'}
+                onClick={() => setNetwork('kusama')}
+              >
+                Kusama
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
           {!accounts.length && (
             <dc-connection-button>Connect</dc-connection-button>
           )}