Solana Smart Contract Tutorial: Using Phantom Wallet to create a DApp | React, Anchor

Solana Smart Contract Tutorial: Using Phantom Wallet to create a DApp | React, Anchor



In this video we will learn how to use the Solana’s wallet adapter library to safely retrieve your user’s Phantom wallet (or any Solana wallet) and then make transactions for them to your Solana Program by creating a very simple React.js application.

This video will assume some understanding of creating a Solana Smart Contract using the Anchor Framework from my previous video:
https://www.youtube.com/watch?v=CmG5_sIas1Q

📙 Solana Playlist: https://www.youtube.com/watch?v=-AAtfPHEMbA&list=PL53JxaGwWUqCr3xm4qvqbgpJ4Xbs4lCs7
💰 Donations accepted (but optional): 2hYca42EE2kwmFZPV7M4skev1za7atWBh5ctzQWfsTD7

00:00 – Intro
00:12 – Video Overview
01:48 – Installing Phantom Wallet
02:02 – React Crash Course
05:04 – Learning about the Solana Wallet Adapter
06:45 – Setting up the wallet adapter for your front end
13:42 – Using the wallet adapter for your front end
14:47 – Anchor Setup Overview
16:38 – Setting up an anchor project to generate an IDL JSON file
22:02 – Frontend Overview to use Phantom Wallet
22:57 – Setting up the Front End Starter Project
27:09 – Importing the IDL JSON file
28:17 – Implementing getProvider
33:25 – Implement Sending Transactions Part 1
44:55 – Airdropping SOL to test initialization transaction
47:05 – Implement Sending Transactions Part 2

Resources:
Phantome Wallet:
https://phantom.app

Solana Wallet Adapter Github:
https://github.com/solana-labs/wallet-adapter

Starter Project:
https://github.com/solana-labs/wallet-adapter/tree/master/packages/starter/create-react-app-starter

https://github.com/solana-labs/wallet-adapter/blob/master/packages/starter/create-react-app-starter/src/index.tsx
https://github.com/solana-labs/wallet-adapter/blob/master/packages/starter/create-react-app-starter/src/App.tsx

WalletAdapterNetwork:
https://github.com/solana-labs/wallet-adapter/blob/master/packages/core/base/src/types.ts

Wallets to integrate :
https://github.com/solana-labs/wallet-adapter/tree/master/packages/wallets

Wallet Adapter for React:
https://github.com/solana-labs/wallet-adapter/tree/master/packages/core/react

@solana/wallet-adapter-react-ui:
https://github.com/solana-labs/wallet-adapter/tree/master/packages/core/react

Anchor Installation Instruction:
https://project-serum.github.io/anchor/getting-started/installation.html

Anchor Github Project:
https://github.com/project-serum/anchor

Helpful Fullstack Example:
https://dev.to/edge-and-node/the-complete-guide-to-full-stack-solana-development-with-react-anchor-rust-and-phantom-3291

source

views 890

Leave a Comment

Your email address will not be published.

Scroll to Top