function App() {
    const connect = useConnect();
  
    return (
      <button
        onClick={async () => {
          const wallet = await connect(metamaskConfig, connectOptions);
          console.log("connected to ", wallet);
        }}
      >
        Connect to MetaMask
      </button>
    );
  }

function App() {
    const connectionStatus = useConnectionStatus();
  
    if (connectionStatus === "unknown") return <p> Loading... </p>;
    if (connectionStatus === "connecting") return <p> Connecting... </p>;
    if (connectionStatus === "connected") return <p> You are connected </p>;
    if (connectionStatus === "disconnected")
      return <p> You are not connected to a wallet </p>;
  }

function App() {
    const setConnectedWallet = useSetConnectedWallet();
    const createWalletInstance = useCreateWalletInstance();
  
    const handleConnect = async () => {
      // create a wallet instance using useCreateWalletInstance
      const metamaskWalletInstance = createWalletInstance(metamaskConfig);
      // conect the wallet instance
      await metamaskWalletInstance.connect();
  
      // set the connected wallet as connected
      setConnectedWallet(walletInstance);
    };
  
    return <div> ... </div>;
  }

function App() {
    const setConnectionStatus = useSetConnectionStatus();
  
    const handleConnect = () => {
      setConnectionStatus("connecting");
      // manually connect to a wallet
      setConnectionStatus("connected");
    };
  
    const handleDisconnect = () => {
      // manually disconnect from the wallet
      setConnectionStatus("disconnected");
    };
  
    return (
      <div>
        {/* Your app content goes here */}
        <button onClick={handleConnect}>Connect</button>
        <button onClick={handleDisconnect}>Disconnect</button>
      </div>
    );
  }