Welcome to the Figment Staking API. The goal of this app is to provide you with a way to visualize and interact with Staking API flows, to better understand how they function.
This app connects with the Staking API and displays information about each step of a flow. Relevant links to the Figment Documentation are provided throughout.
This is intended primarily as a visual learning tool, it does not require you to dive into the codebase — however you can still do so if you wish.
Developers should check out the contents of the components/ and pages/api/staking directories to learn more.
If you would like to learn more about integrating with Figment's Staking API, you can also check out the Figment APIs Demo App, which provides a helpful tutorial.
The preferred method is SSH. Add an SSH key to your GitHub account, if you do not already have one.
Otherwise, clone the repository with the HTTPS method as a fallback.
git clone git@github.com:figment-networks/visualize-staking-api-flows.git
git clone https://github.com/figment-networks/visualize-staking-api-flows.git
cd visualize-staking-api-flows
npm install
If you don't already have an API key, reach out to Figment.
cp .env.template .env→ Copies the template file to.env.
Paste a valid Figment API key in .env after the variable API_KEY= (on the same line), then save the file.
API_KEY=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Note: The .env file is already included in the .gitignore file for this project.
Once you have added your API key, make sure to keep it safe to avoid exposing it.
Check out Figment's API Key Best Practices.
If you would like to proceed with a delegation flow using the NEAR blockchain, stay on the main branch and continue with Step 5 - Build the Visualize App.
If you would like to proceed with a delegation flow using the Solana blockchain, switch to the solana branch:
git switch solanaorgit checkout solana→ Moves to the correct branch.
For the best experience and to avoid any slow loading pages, build the app before running it.
npm run build→ creates an optimized production build of the app. This process can take a few minutes, so please be patient.
Ensure you have added a Figment API key to .env before you run the server.
npm run start→ starts the Next.js server.CONTROL + C→ stops the Next.js server, once you have finished using the Visualize Staking API Flows app.
Navigate to http://localhost:3000 in your browser.
From here you'll be guided through the entire process, from creating a NEAR testnet account to creating a flow and completing that flow. Most pages provide more detailed information, which can be accessed via the "Click Here For More Information" button near the top of the page.
Note: For local development or testing, please use npm run dev, which will start the Next.js server in development mode at http://localhost:3000.
The code in pages/api/accounts/create-near-account.js creates a randomly generated NEAR testnet account ID and cryptographic keypair — a public key and private key.
The private key for this account is saved in the local storage of your web browser. This private key is used to sign the transaction payload which is sent to the Staking API during a flow. This occurs in the file pages/api/staking/sign-payload.js, using Figment's npm package @figmentio/slate. The code performing the signature has been clearly commented, and is only intended to illustrate the process.
While this facilitates the experience, keep in mind that it's not a secure pattern for production-grade apps.
The keypairs used in this app are for use on the NEAR testnet only!
In production, private keys should never be exposed, shared, and especially not stored in browser local storage.
If you have any questions about keypairs on NEAR, please take a moment to familiarize yourself with the NEAR account model before proceeding.