How to get Solana Account Info and-or SOL Balance using Vanilla JS and JSON-RPC via Phantom wallet integration?

Question

The following Vanilla JS example connects to and disconnects from the Solana blockchain via Phantom wallet.

It successfully connects and gets the public address.

It fails when trying to use a JSON-RPC request to get the wallet balance and the account info.

If someone could help sort this out, we'll have some basic examples for those of us who prefer to keep it Vanilla when possible.

Connect Function:

// Connect Phantom
function phantom_connect() {

  // Check for Solana & Phantom
  var provider = () => {
    if ("solana" in window) {
      var provider = window.solana;
      if (provider.isPhantom) {
        return provider;
      } else {
        return false;
      }
    }
    window.open("https://phantom.app", "_blank");
  };

  var phantom = provider();

  if (phantom !== false) {

    console.log("Phantom Wallet Found, Connecting..");

    try {

      // Connect to Solana
      var connect_wallet = phantom.connect();

      // After Connecting
      phantom.on("connect", () => {

        // Check Connection
        console.log("Phantom Connected: " + phantom.isConnected);

        // Get Wallet Address
        var wallet_address = phantom.publicKey.toString();
        console.log("Solana Wallet Address: " + wallet_address);


        // ********** THIS FAILS **********
        // Get Account Info
        var account = phantom.request({
          "jsonrpc": "2.0",
          "id": 1,
          "method": "getAccountInfo",
          "params": [wallet_address, {
            "encoding": "jsonParsed"
          }]
        });
        console.log("Solana Account Info:");
        console.log(account);
        // ********************************


        // ********** THIS FAILS **********
        // Get Wallet Balance
        var balance = phantom.request({
          "jsonrpc": "2.0",
          "id": 1,
          "method": "getBalance",
          "params": [wallet_address]
        });
        console.log("Solana Wallet Balance:");
        console.log(balance);
        // ********************************


      });
      //

    } catch (err) {
      console.log("Connection Cancelled!");
    }
  }

}

Disconnect Function:

// Disconnect Phantom
function phantom_disconnect() {
  window.solana.request({
    method: "disconnect"
  });
  window.solana.on('disconnect', () => {
    console.log("Phantom Disconnected!");
  });
}

The console shows a -32603 error on both getBalance and getAccountInfo.

RPC Error: JsonRpcEngine: Response has no error or result for request:

Answer 1

It doesn't use JSON-RPC API, but I put below my code to get Solana (Phantom) Wallet Balance on Devnet .

provider = window.solana;
connection = new solanaWeb3.Connection(solanaWeb3.clusterApiUrl('devnet'), 'confirmed');
// After Connecting
connection.getBalance(provider.publicKey).then(function(value) { console.log(value); })

Answer 2

I used this method using connection.getAccountInfo and stored it in the state

const [userSOLBalance, setSOLBalance] = useState<number>()
if (wallet.publicKey) {
  const SOL = connection.getAccountInfo(wallet.publicKey)
  SOL.then((res) => setSOLBalance(res.lamports / LAMPORTS_PER_SOL))
}