3

Im currently building a project using Create React App with Typescript, web3.js and ChakraUI.

I've set up the 'connect to wallet' button using the Solana Wallet Adapter, and the wallet stays connected if I navigate throughout different pages.

I'm having a slight issue with changing the state of a page as soon as the wallet is connected. So if the wallet is not connected I would like it to display "Connect Wallet" and if the wallet is connected I would want it to display a different UI such as "Wallet Connected" or any other different component. The code I currently have right now doesn't change one the wallet has connected but only changes if the page has been re-opened.

here is my code below :

//Component to display if wallet is not connected
function connectToWalletUI() {
    return (
        <Text>Connect to a wallet</Text>
    )
}

//Component to display as soon as wallet is connected 
function appContent() {
    return (
        <VStack>
            <Text>Hello Ryan</Text>
            <Spacer></Spacer>
            <HStack>
                <Button>Edit Button</Button>
                <Button>Add Button</Button>
                <Button>Remove Button</Button>
            </HStack>
            <Divider orientation='horizontal' width={750} />
            <HStack>
                <VStack direction='row'>
                    <Text justifySelf="flex-start">Your Content</Text>
                </VStack>
                <Divider orientation='vertical' />
                <VStack>
                    <Text>Other Content </Text>
                </VStack>
            </HStack>
        </VStack>

    )
}

function PagePick() {

    if (isWalletConnectd()) {
        return appContent()
    } else return connectToWalletUI();

}

///Export component to App.tsx
export const Demo = () => (
    PagePick()
);

1 Answer 1

2

If you are using Solana Wallet Adapter. You can use useWallet() which returns null when you are not connected.

const HomePage = () => {
   const wallet = useWallet();

   ...

   if (!wallet) return <div> Not Connected </div>;
   return <div> Connected </div>;
}
2
  • 1
    Thanks for helping out! I managed to find a solution by using useWallet, useState and useEffect. Jan 26, 2023 at 13:24
  • 1
    Glad to help! if I answered please mark this as answered. Thank you
    – vicyyn
    Jan 26, 2023 at 17:43

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.