Our great sponsors
-
Node.js - I recommend installing Node using either nvm or fnm.
-
Node.js - I recommend installing Node using either nvm or fnm.
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
import './App.css'; import { useState } from 'react'; import { Connection, PublicKey } from '@solana/web3.js'; import { Program, Provider, web3 } from '@project-serum/anchor'; import idl from './idl.json'; import { PhantomWalletAdapter } from '@solana/wallet-adapter-wallets'; import { useWallet, WalletProvider, ConnectionProvider } from '@solana/wallet-adapter-react'; import { WalletModalProvider, WalletMultiButton } from '@solana/wallet-adapter-react-ui'; require('@solana/wallet-adapter-react-ui/styles.css'); const wallets = [ /* view list of available wallets at https://github.com/solana-labs/wallet-adapter#wallets */ new PhantomWalletAdapter() ] const { SystemProgram, Keypair } = web3; /* create an account */ const baseAccount = Keypair.generate(); const opts = { preflightCommitment: "processed" } const programID = new PublicKey(idl.metadata.address); function App() { const [value, setValue] = useState(null); const wallet = useWallet(); async function getProvider() { /* create the provider and return it to the caller */ /* network set to local network for now */ const network = "http://127.0.0.1:8899"; const connection = new Connection(network, opts.preflightCommitment); const provider = new Provider( connection, wallet, opts.preflightCommitment, ); return provider; } async function createCounter() { const provider = await getProvider() /* create the program interface combining the idl, program ID, and provider */ const program = new Program(idl, programID, provider); try { /* interact with the program via rpc */ await program.rpc.create({ accounts: { baseAccount: baseAccount.publicKey, user: provider.wallet.publicKey, systemProgram: SystemProgram.programId, }, signers: [baseAccount] }); const account = await program.account.baseAccount.fetch(baseAccount.publicKey); console.log('account: ', account); setValue(account.count.toString()); } catch (err) { console.log("Transaction error: ", err); } } async function increment() { const provider = await getProvider(); const program = new Program(idl, programID, provider); await program.rpc.increment({ accounts: { baseAccount: baseAccount.publicKey } }); const account = await program.account.baseAccount.fetch(baseAccount.publicKey); console.log('account: ', account); setValue(account.count.toString()); } if (!wallet.connected) { /* If the user's wallet is not connected, display connect wallet button. */ return (
{ !value && (Create counter) } { value && Increment counter } { value && value >= Number(0) ? ({value}
) : (Please create the counter.
) } -
solana/web3.js - A Solana version of web3.js that seems to work pretty well, but the documentation was almost unusable for me
-
React - The client-side framework
-
hardhat
Hardhat is a development environment to compile, deploy, test, and debug your Ethereum software.
Anchor Framework - Anchor is actually a life saver for me, and I'm almost certain I would not have been able to get over the hump of building anything without it. It is the Hardhat of Solana development and more, and I love it. It also offers a DSL on top of Rust so that you do not need a deep understanding of the language to get started, though I am still trying to learn Rust as it will probably be useful to build anything non-trivial, even with the DSL. A good free place to learn Rust is The Rust Book.
Related posts
- Effective nodejs version management for the busy developer
- The ultimate Solana step-by-step guide (including programs, dapps and Rust from scratch)
- snm v0.7.0: A completely revamped node version manager
- Rotating Images with Node.js Made Easy: Automate BoreStuffs
- Full Stack Web Development Concept map