import { WalletAdapterNetwork , WalletError } from '@solana/wallet-adapter-base' ; import { ConnectionProvider , WalletProvider } from '@solana/wallet-adapter-react' ; import { WalletDialogProvider , WalletMultiButton } from '@solana/wallet-adapter-material-ui' ; import { LedgerWalletAdapter , PhantomWalletAdapter , SlopeWalletAdapter , SolflareWalletAdapter , SolletExtensionWalletAdapter , SolletWalletAdapter , TorusWalletAdapter , } from '@solana/wallet-adapter-wallets' ; import { clusterApiUrl } from '@solana/web3.js' ; import { useSnackbar } from 'notistack' ; import React , { FC , ReactNode , useCallback , useMemo } from 'react' ; import { Theme } from './Theme' ; export const App = ( ) => { return ( < Theme > < Context > < Content /> < /Context> < /Theme>); } ; const Context = ( { children } ) => { const network = WalletAdapterNetwork . Devnet ; const endpoint = useMemo ( ( ) => clusterApiUrl ( network ) , [ network ] ) ; const wallets = useMemo ( ( ) => [ new PhantomWalletAdapter ( ) , new SlopeWalletAdapter ( ) , new SolflareWalletAdapter ( ) , new TorusWalletAdapter ( ) , new LedgerWalletAdapter ( ) , new SolletWalletAdapter ( { network } ) , new SolletExtensionWalletAdapter ( { network } ) , ] , [ network ] ) ; const { enqueueSnackbar } = useSnackbar ( ) ; const onError = useCallback ( ( error ) => { enqueueSnackbar ( error . message ? `${ error . name }: ${ error . message }` : error . name , { variant : 'error' } ) ; console . error ( error ) ; } , [ enqueueSnackbar ] ) ; return ( < ConnectionProvider endpoint = { endpoint } > < WalletProvider wallets = { wallets } onError = { onError } autoConnect > < WalletDialogProvider > { children } < /WalletDialogProvider> < /WalletProvider> < /ConnectionProvider>); } ; const Content = ( ) => { return < WalletMultiButton />; } ;