Full lesson
solana-web-test
Test repo for NextJS web app to interact with Solana programs
- Original
- Periondao/solana-web-test
- SuperStack fork
- Blockchains/solana-web-test @
766cce7 - Stars
- 0
- Last push (original)
- 2024-09-29
- Languages
- TypeScript, CSS, JavaScript
- Detected stack
- Next.jsweb3.js
- Categories
- Other
- Licence
- MIT
- Homepage
- https://solana-web-test.vercel.app
Architecture
34 source files. By extension: .tsx ×25, .ts ×8, .js ×1.
| Top-level directory | Source files |
|---|---|
web | 34 |
Dapp: devnet deploy pending
⏳ Devnet deploy pending — goes live when the devnet wallet is topped up. This fork's own dapp is not deployed yet, so there is no program address or transaction to show. It is queued in dapp-queue.txt; once devnet SOL is available it is deployed, exercised with real devnet transactions, and this section switches to the live dapp at /dapps/solana-web-test/. Until then, the lesson and step-by-step guide below are complete, and you can run it locally with the commands below.
Key code, explained
Excerpts chosen automatically where the code uses the most Solana concepts, pinned to the fork's commit.
web/components/campaign/Campaign.tsx L13–36 @ 766cce7 · MIT · original const createCampaign = async () => { if (!wallet?.publicKey) return alert('Connect wallet') try { const program = new Program(idl as Idl, connContext) const [campaign] = PublicKey.findProgramAddressSync([ utils.bytes.utf8.encode("CampaignDemo"), wallet.publicKey.toBuffer(), ], program.programId ) const tx = await program.methods.create('Foquelhon', 'Herteka', new BN(2000)) .accounts({ systemProgram: SystemProgram.programId, user: wallet.publicKey, campaign, }) .transaction() const resp = await wallet.sendTransaction(tx, connContext.connection) console.log('responso', resp)- Line 19
const [campaign] = PublicKey.findProgramAddressSync([: Derives a PDA from seeds and the program ID and returns the address with its canonical bump. - Line 34
const resp = await wallet.sendTransaction(tx, connContext.connection): Submits the signed transaction to the cluster.
How to run, build and test
These commands come from the repo's own manifests (package.json scripts, Anchor.toml, Cargo, go.mod, Makefile). Check the README for prerequisites and environment variables.
| Directory | Command | Runs |
|---|---|---|
. | npm run dev | nx serve web --port 3300 |
. | npm run build | nx build web |
What you could build from it
- Fork the SuperStack copy and extend it within the Other gaps listed on the idea page.
- Learn the pattern first: Program Derived Addresses (PDAs)
- Learn the pattern first: Cross-Program Invocations (CPIs)