How to Transfer Sol from External Wallet to Connected Wallet in React

Question

I hope you're doing well. I'm currently working on a React app where users can withdraw rewards to their connected wallet. I want to ensure the security of the process and avoid exposing the private key on the frontend.

Here's the scenario:

Frontend Interaction: When a user clicks a button, I want to initiate the withdrawal process without exposing the private key.

Transaction Signing on Frontend: I'm looking for a secure way to sign the transaction on the frontend and then pass it to the backend.

Backend Handling (Node.js): The signed transaction should be received by the Node.js backend, where the actual transfer of Sol to the designated wallet will occur.

I'm seeking advice on the best practices for achieving this workflow. Any insights into securely signing transactions on the frontend and handling them on the backend in a React app would be greatly appreciated.

Thank you in advance for your help!

Best regards,

Answer 1

you have to ways to do it :

Either you create a program (smart contract), you put funds/token (what will be claimed) in a vault, and the program can sign and send the assets to the user who claims them.

Either you do it in a backend with javascript. In this case, you have to call your backend, create a transaction sign it with your private key (key needed for the transfer), send it back to the frontend, and make user sign it as well.

In any case, you should never, NEVER, put a private key in the frontend source. It's a security issue.

Let me know which way you want to go, and i can provide help here.

Answer 2

IMO you should do this on chain. Have the front end interact with a smart contract and then handle all transaction logic in the contract. You might have a typescript node program that also interacts with the same contract as well, but depending on what you are doing this might not be necessary. If you use the front end wallet connector the user private key will never be exposed. Likewise if you also interact with the contract from your node side the user will never be exposed to your private key. You can control the entire state of the contract and transaction by interacting with the contract from Node.