How to mint an existing spl token with React?

Question

I'm building a platform where users play games and receive tokens. Once user have some tokens I'd like to have a "claim" button to transfer (or should I say mint?) these tokens to user's phantom wallet.

How to do it ? I'm a bit lost

So far :

• I've create the frontend, added the wallet-adapter-react, everything seems fine with the wallet
• I've created my token on the devnet using the spl-token cli (create-token + create-account)
• Trying to play with createMint / getOrCreateAssociatedTokenAccount / mintTo / transfer from the @solana/spl-token package in react but no success

And ye ending up stuck on the onClick of the claim button. I'd like the user to pay the fees and then mint a specific amount of my token previously created with the CLI.

is it even possible with client code only or should I look at smart contracts for this ?

Thanks for your help

Answer 1

Ok, I got it to work with the code below

export const redeemTokens = async () => {
  console.log("Connection...");

  const connection = new Connection(clusterApiUrl("devnet", "confirmed"));
  const fromWallet = Keypair.fromSecretKey(
    Uint8Array.from([000,000,000,00.......]) // Wallet secret that created the token in the CLI
  );
  const mintPublicKey = new PublicKey(
    `yghde2deh2763h.....` // Token ID
  );

  const toPublicKey = new PublicKey(
    `2kmfLy...` // Public key of destination wallet
  );

  try {   
    const toTokenAccount = await getOrCreateAssociatedTokenAccount(
      connection,
      fromWallet,
      mintPublicKey,
      toPublicKey
    );
    
    const signature = await mintTo(
      connection,
      fromWallet,
      mintPublicKey,
      toTokenAccount.address,
      fromWallet.publicKey,
      10000000000 // amount
    );

    console.log(`Mint signature ${signature}`);
  } catch (err) {
    console.log(err);
  }
};

Now, my concern is having the secret freestyle like this in the client (react). I think with a .env it's slightly better but probably not good as well, should I move everything into a node API ?

And how can I make the client pay for the fees everytime the user mints new token ?

Answer 2

Could you please clarify the exact issue you're having?

For minting new tokens (same token account, just producing new tokens) ( not transferring ) you have this:

await mintTo(
  connection,
  payer,
  mint,
  tokenAccount.address,
  mintAuthority,
  100000000000 // because decimals for the mint are set to 9 
)

and for transferring tokens you have this resource: https://spl.solana.com/token#example-transferring-tokens-to-another-user

please check that documentation as you will find many answers and a better understanding of how tokens work!