From a19242e94f07e2646b687cfb053607b2650ba016 Mon Sep 17 00:00:00 2001 From: Hares Mahmood Date: Fri, 17 Jun 2022 15:46:32 +0000 Subject: [PATCH] Add `network-switcher`-component. --- src/components/AppBar.tsx | 8 ++++-- src/components/NetworkSwitcher.tsx | 28 +++++++++++++++++++ src/components/Notification.tsx | 4 ++- src/components/SendTransaction.tsx | 1 + src/contexts/ContextProvider.tsx | 18 ++++++++---- src/contexts/NetworkConfigurationProvider.tsx | 22 +++++++++++++++ 6 files changed, 73 insertions(+), 8 deletions(-) create mode 100644 src/components/NetworkSwitcher.tsx create mode 100644 src/contexts/NetworkConfigurationProvider.tsx diff --git a/src/components/AppBar.tsx b/src/components/AppBar.tsx index f5ef1c7b4..211461250 100644 --- a/src/components/AppBar.tsx +++ b/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 */}
-
+ + +
@@ -76,11 +79,12 @@ export const AppBar: FC = props => { Autoconnect
-
{props.children} diff --git a/src/components/NetworkSwitcher.tsx b/src/components/NetworkSwitcher.tsx new file mode 100644 index 000000000..bd2a82950 --- /dev/null +++ b/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 ( + + ); +}; + +export default dynamic(() => Promise.resolve(NetworkSwitcher), { + ssr: false +}) \ No newline at end of file diff --git a/src/components/Notification.tsx b/src/components/Notification.tsx index 656c78671..c903b39a7 100644 --- a/src/components/Notification.tsx +++ b/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 }) => {
{ 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 }); diff --git a/src/contexts/ContextProvider.tsx b/src/contexts/ContextProvider.tsx index 9d9507114..a0e18a99d 100644 --- a/src/contexts/ContextProvider.tsx +++ b/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 ( - - {children} - + <> + + + {children} + + + ); }; diff --git a/src/contexts/NetworkConfigurationProvider.tsx b/src/contexts/NetworkConfigurationProvider.tsx new file mode 100644 index 000000000..d3b3ae6b8 --- /dev/null +++ b/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({} as NetworkConfigurationState); + +export function useNetworkConfiguration(): NetworkConfigurationState { + return useContext(NetworkConfigurationContext); +} + +export const NetworkConfigurationProvider: FC<{ children: ReactNode }> = ({ children }) => { + const [networkConfiguration, setNetworkConfiguration] = useLocalStorage("network", "devnet"); + + return ( + {children} + ); +}; \ No newline at end of file