Link | Instructor | Event |
---|---|---|
![]() |
Joe Caulfield | N/A |
Program | Link |
---|---|
SVG Generator | |
To learn more about how this dApp works see How it Works below.
You can find the on-chain program in svg-generator/
and the frontend application that will interface with our program can be found in app/
.
Built using npx create-solana-dapp -f next -p native
.
This workshop, like many others in the Solana Workshops collection, is built using the dApp Scaffold. This scaffold provides a huge handful of out-of-the-box NextJS configs and functionality to get up & running fast with building a dApp on Solana.
Amongst other things, this scaffold gives you:
- Wallet connection support for popular wallets
- Airdrop functionality & components
- User SOL balance store
- Navbar & Footer
- Basic NextJS file structure layout
You'll need to deploy this program to the Solana blockchain before you can successfully run the frontend. You can do this in two ways:
- Run the
cicd.sh
bash script to build the program withcargo
and deploy it. Make sure your local Solana configs are targeting the proper cluster; ie.solana config set -ud
(devnet). - Import the program (Rust) code into the Solana Playground IDE by using the "Import from GitHub" option. You'll want to select
native
and then import the GitHub url that routes to theworkshop-dapps/svg-generator/svg-generator
directory. You should seesrc
andCargo.toml
if you're in the right place. Then just click "Build" and "Deploy" in the wrench & hammer tab.
Next you can choose to run the test or launch the frontend.
To run the test: yarn install && yarn run test
(in the root directory).
To launch the frontend: yarn install && yarn dev
(in the app/
directory).
This Solana program is designed to generate an SVG string from some random inputs.
It's simply going to build a string from a handful of arrays, which house various strings that will change based on the random number (indices) provided.
Then it will write this string - which represents an SVG image - to a new account on Solana's blockchain.
Our frontend will then be able to render this account's data with a simple read.
835PwymmewwoZLHVSaxbusncWa2G5TUotcW123oA9KMS