How to send solana via my app in vanilla js?

Question

Trying to do a simple send and receive function in Solana with vanilla JS.

Below is my send function that works fine, and now I want a receive function. Where the provider would get Solana transferred from my treasury wallet.

I'm not sure what approach I should have, just starting out. Is there a way to just move things around in this function? Or do I have to have a totally different approach?

Thanks!

async function transferSOL() {
  // Detecing and storing the phantom wallet of the user (creator in this case)
  var provider = phantom;

  // Establishing connection
  var connection = new web3.Connection(
    web3.clusterApiUrl('devnet'),
  );

  var transaction = new web3.Transaction().add(
    web3.SystemProgram.transfer({
      fromPubkey: provider.publicKey,
      toPubkey: treasuryWallet.publicKey,
      lamports: 0.1 * web3.LAMPORTS_PER_SOL - 100  
    }),
  );
  // Setting the variables for the transaction
  transaction.feePayer = await provider.publicKey;
  let blockhashObj = await connection.getRecentBlockhash();
  transaction.recentBlockhash = await blockhashObj.blockhash;

  // Request creator to sign the transaction (allow the transaction)
  let signed = await provider.signTransaction(transaction);
  let signature = await connection.sendRawTransaction(signed.serialize());
  await connection.confirmTransaction(signature);
}

Jon C · Answer 1 · 2022-04-06T11:17:11.553

0

If you want to transfer from your treasury to the user, then you must sign for treasuryWallet somehow. In your case, it looks like you already have the keypair available to you in your app, so you can simply do:

var transaction = new web3.Transaction().add(
    web3.SystemProgram.transfer({
      toPubkey: provider.publicKey,
      fromPubkey: treasuryWallet.publicKey,
      lamports: 0.1 * web3.LAMPORTS_PER_SOL - 100  
    }),
  );
  // Setting the variables for the transaction
  transaction.feePayer = treasuryWallet.publicKey;
  let blockhashObj = await connection.getRecentBlockhash();
  transaction.recentBlockhash = await blockhashObj.blockhash;

  // Request creator to sign the transaction (allow the transaction)
  transaction.sign(treasuryWallet);
  let signature = await connection.sendRawTransaction(transaction.serialize());
  await connection.confirmTransaction(signature);

Note that this is very unsafe! Everyone who uses your web app has full access to the treasury funds if the keypair is exposed, since they can just sign all the transactions that they want with it.

edited Apr 06 '22 at 11:17

answered Mar 28 '22 at 18:18

Jon C

7,019
10
17

Hmm... I get this error: `error index.browser.esm.js?64b9:2645 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'toString') at Transaction.sign (index.browser.esm.js?64b9:2645:1)` – tommyj Apr 04 '22 at 13:14
I was assuming that `treasuryWallet` is a `Keypair`, but perhaps it isn't. For the example to work, `treasuryWallet` must be a `Keypair` with a `publicKey`, otherwise you'll trip when getting `treasuryWallet.publicKey.toString()` at https://github.com/solana-labs/solana/blob/6ba4e870c4ed565f7f284604f6e85d39bb35a582/web3.js/src/transaction.ts#L468 – Jon C Apr 04 '22 at 17:26
Yeah, I have this. Is there something I'm missing here? const treasuryWallet = new web3.PublicKey("xxx"); – tommyj Apr 04 '22 at 18:39
`treasuryWallet` must be a `Keypair`, and not a `PublicKey` – Jon C Apr 04 '22 at 21:57
let secretKey = Uint8Array.from([223,...,198]); treasuryWallet = web3.Keypair.fromSecretKey(secretKey); Is this the correct way? Getting "serialize error" this time – tommyj Apr 05 '22 at 21:48
That's the way, but there was an error in my code. It's fixed now. – Jon C Apr 06 '22 at 11:17

How to send solana via my app in vanilla js?

1 Answers1