2

I have followed along with a few tutorials at this point, but I pulled code directly from the following website: https://www.0xdev.co/how-to-connect-to-a-solana-wallet-to-your-react-app/

After updating the App.tsx code to have all of the imports, installing the necessary dependencies, and making a component that contains the WalletMultiButton, the purple Select Wallet button appears, however nothing happens when it is clicked. In fact, unlike the demo, it doesn't even change colors when hovered on. I'm not sure why it doesn't seem to be registered as a button since I haven't altered any code and there are no error messages.

In the website's explanation it mentions using the library in the child components, but I don't know what that means exactly and Google has not been helpful.

Below is my main App.tsx file:

import Navbar from './components/Navbar';
import Home from './Home';
import About from './About';
import Wallet from './Wallet';
import Connect from './Connect';
import Footer from './components/Footer';
import MyComponent from './components/MyComponent';
import React, { useMemo } from 'react';
import { BrowserRouter, Route, Switch} from 'react-router-dom';
import { clusterApiUrl } from '@solana/web3.js';
import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
import {
    GlowWalletAdapter,
    LedgerWalletAdapter,
    PhantomWalletAdapter,
    SlopeWalletAdapter,
    SolflareWalletAdapter,
    SolletExtensionWalletAdapter,
    SolletWalletAdapter,
    TorusWalletAdapter,
} from '@solana/wallet-adapter-wallets';
import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
import { WalletModalProvider } from '@solana/wallet-adapter-react-ui';

import './App.css';

// import the styles
require('@solana/wallet-adapter-react-ui/styles.css');

function App() {
 // you can use Mainnet, Devnet or Testnet here
 const network = WalletAdapterNetwork.Mainnet;
 const endpoint = useMemo(() => clusterApiUrl(network), [network]);
 // initialise all the wallets you want to use
 const wallets = useMemo(
     () => [
         new PhantomWalletAdapter(),
         new GlowWalletAdapter(),
         new SlopeWalletAdapter(),
         new SolflareWalletAdapter({ network }),
         new TorusWalletAdapter(),
         //new LedgerWalletAdapter(),
         new SolletExtensionWalletAdapter(),
         new SolletWalletAdapter(),
     ],
     [network]
 );



  return (

    <ConnectionProvider endpoint={endpoint}>
      <WalletProvider wallets={wallets} autoConnect>
        <WalletModalProvider>
       
          <BrowserRouter>
          <div className ="App">
            <div className='nav'>
              <Navbar />
              <MyComponent/>
                      
            </div>
        
        
            <div className = "content"> 
            <Switch> 
                <Route path = "/home">
                  <Home/>
                </Route>
                <Route path = "/wallet">
                  <Wallet/>
                </Route>
                <Route path = "/connect">
                  <Connect/>
                </Route>
                <Route path = "/about">
                  <About/>
                </Route>
            </Switch>
        
            </div>

            <Footer/>
          </div>
        </BrowserRouter>
        </WalletModalProvider>
      </WalletProvider>
  </ConnectionProvider>
)
}
export default App;

and this is my equivalent of the MyComponent.tsx file:

import { WalletMultiButton } from '@solana/wallet-adapter-react-ui';
import { useConnection, useWallet } from '@solana/wallet-adapter- 
react';
// import this library
import * as solanaWeb3 from '@solana/web3.js';
import React from 'react';

function MyComponent(){
    const { connection } = useConnection();
    const { publicKey, sendTransaction } = useWallet();



    return (
    
        <WalletMultiButton />
    
    )
}

export default MyComponent

Does anyone have any suggestions?

4
  • "using the library in the child components" is talking about how they added the button in MyComponent and not just banged it right into App. Any errors in the inspector? It is still worth posting your code, just in case there is a nuance difference to the blog post.
    – sohrab
    Oct 2, 2022 at 2:33
  • @sohrab I just added the code that uses the wallet adapter functions, there are no errors from what I can tell.
    – Lexi
    Oct 2, 2022 at 23:49
  • Not sure what useConnection() and useWallet() are for but otherwise I don't spot anything that may break this.
    – sohrab
    Oct 3, 2022 at 3:06
  • I've followed the blog to get the connect wallet, it's working as shown in the blog. Few things you can check:- 1. Create a new react app using CRA, to make sure in your local env it's working. 2. You can check your CSS rules in your App, some rules might be causing issues and the connect wallet modal is not appearing because of that. Oct 3, 2022 at 13:40

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.