Merge pull request #204 from HaresMahmood/network-switcher-component

Add Network Switcher component.

src/components/AppBar.tsx

@@ -3,6 +3,7 @@ import Link from "next/link";
 
 import { WalletMultiButton } from "@solana/wallet-adapter-react-ui";
 import { useAutoConnect } from '../contexts/AutoConnectProvider';
+import NetworkSwitcher from './NetworkSwitcher';
 
 export const AppBar: FC = props => {
   const { autoConnect, setAutoConnect } = useAutoConnect();
@@ -62,7 +63,9 @@ export const AppBar: FC = props => {
 
         {/* Wallet & Settings */}
         <div className="navbar-end">
-          <div className="dropdown">
+          <WalletMultiButton className="btn btn-ghost mr-4" />
+
+          <div className="dropdown dropdown-end">
             <div tabIndex={0} className="btn btn-square btn-ghost text-right">
               <svg className="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
@@ -76,11 +79,12 @@ export const AppBar: FC = props => {
                     <a>Autoconnect</a>
                     <input type="checkbox" checked={autoConnect} onChange={(e) => setAutoConnect(e.target.checked)} className="toggle" />
                   </label>
+
+                  <NetworkSwitcher />
                 </div>
               </li>
             </ul>
           </div>
-          <WalletMultiButton className="btn btn-ghost mr-4" />
         </div>
       </div>
       {props.children}

src/components/NetworkSwitcher.tsx

@@ -0,0 +1,28 @@
+import { FC } from 'react';
+import dynamic from 'next/dynamic';
+import { useNetworkConfiguration } from '../contexts/NetworkConfigurationProvider';
+
+const NetworkSwitcher: FC = () => {
+  const { networkConfiguration, setNetworkConfiguration } = useNetworkConfiguration();
+
+  console.log(networkConfiguration);
+
+  return (
+    <label className="cursor-pointer label">
+      <a>Network</a>
+      <select             
+        value={networkConfiguration}
+        onChange={(e) => setNetworkConfiguration(e.target.value)} 
+        className="select max-w-xs"
+      >
+        <option value="mainnet-beta">main</option>
+        <option value="devnet">dev</option>
+        <option value="testnet">test</option>
+      </select>
+    </label>
+  );
+};
+
+export default dynamic(() => Promise.resolve(NetworkSwitcher), {
+  ssr: false
+})

src/components/Notification.tsx

@@ -8,6 +8,7 @@ import { XIcon } from '@heroicons/react/solid'
 import useNotificationStore from '../stores/useNotificationStore'
 import { useConnection } from '@solana/wallet-adapter-react';
 import { getExplorerUrl } from '../utils/explorer'
+import { useNetworkConfiguration } from 'contexts/NetworkConfigurationProvider';
 
 const NotificationList = () => {
   const { notifications, set: setNotificationStore } = useNotificationStore(
@@ -46,6 +47,7 @@ const NotificationList = () => {
 
 const Notification = ({ type, message, description, txid, onHide }) => {
   const { connection } = useConnection();
+  const { networkConfiguration } = useNetworkConfiguration();
 
   // TODO: we dont have access to the network or endpoint here.. 
   // getExplorerUrl(connection., txid, 'tx')
@@ -86,7 +88,7 @@ const Notification = ({ type, message, description, txid, onHide }) => {
               <div className="flex flex-row">
 
                 <a
-                  href={'https://explorer.solana.com/tx/' + txid + `?cluster=devnet`}
+                  href={'https://explorer.solana.com/tx/' + txid + `?cluster=${networkConfiguration}`}
                   target="_blank"
                   rel="noreferrer"
                   className="flex flex-row link link-accent"

src/components/SendTransaction.tsx

@@ -27,6 +27,7 @@ export const SendTransaction: FC = () => {
             signature = await sendTransaction(transaction, connection);
 
             await connection.confirmTransaction(signature, 'confirmed');
+            console.log(signature);
             notify({ type: 'success', message: 'Transaction successful!', txid: signature });
         } catch (error: any) {
             notify({ type: 'error', message: `Transaction failed!`, description: error?.message, txid: signature });

src/contexts/ContextProvider.tsx

@@ -10,16 +10,20 @@ import {
     // LedgerWalletAdapter,
     // SlopeWalletAdapter,
 } from '@solana/wallet-adapter-wallets';
-import { clusterApiUrl } from '@solana/web3.js';
+import { Cluster, clusterApiUrl } from '@solana/web3.js';
 import { FC, ReactNode, useCallback, useMemo } from 'react';
 import { AutoConnectProvider, useAutoConnect } from './AutoConnectProvider';
 import { notify } from "../utils/notifications";
+import { NetworkConfigurationProvider, useNetworkConfiguration } from './NetworkConfigurationProvider';
 
 const WalletContextProvider: FC<{ children: ReactNode }> = ({ children }) => {
     const { autoConnect } = useAutoConnect();
-    const network = WalletAdapterNetwork.Devnet;
+    const { networkConfiguration } = useNetworkConfiguration();
+    const network = networkConfiguration as WalletAdapterNetwork;
     const endpoint = useMemo(() => clusterApiUrl(network), [network]);
 
+    console.log(network);
+
     const wallets = useMemo(
         () => [
             new PhantomWalletAdapter(),
@@ -53,8 +57,12 @@ const WalletContextProvider: FC<{ children: ReactNode }> = ({ children }) => {
 
 export const ContextProvider: FC<{ children: ReactNode }> = ({ children }) => {
     return (
-        <AutoConnectProvider>
-            <WalletContextProvider>{children}</WalletContextProvider>
-        </AutoConnectProvider>
+        <>
+            <NetworkConfigurationProvider>
+                <AutoConnectProvider>
+                    <WalletContextProvider>{children}</WalletContextProvider>
+                </AutoConnectProvider>
+            </NetworkConfigurationProvider>
+        </>
     );
 };

src/contexts/NetworkConfigurationProvider.tsx

@@ -0,0 +1,22 @@
+import { useLocalStorage } from '@solana/wallet-adapter-react';
+import { createContext, FC, ReactNode, useContext } from 'react';
+
+
+export interface NetworkConfigurationState {
+    networkConfiguration: string;
+    setNetworkConfiguration(networkConfiguration: string): void;
+}
+
+export const NetworkConfigurationContext = createContext<NetworkConfigurationState>({} as NetworkConfigurationState);
+
+export function useNetworkConfiguration(): NetworkConfigurationState {
+    return useContext(NetworkConfigurationContext);
+}
+
+export const NetworkConfigurationProvider: FC<{ children: ReactNode }> = ({ children }) => {
+    const [networkConfiguration, setNetworkConfiguration] = useLocalStorage("network", "devnet");
+
+    return (
+        <NetworkConfigurationContext.Provider value={{ networkConfiguration, setNetworkConfiguration }}>{children}</NetworkConfigurationContext.Provider>
+    );
+};