I need help with changing the contents of a page once a wallet has been connected

Question

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()
);

Answer 1

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>;
}