Elements (UI)
If you don't have the developer resources to integrate with our API or simply want to integrate staking in your application faster, we have build Elements for you: a library of UI components for embeddable staking.
👉 Figment Elements on Github
Staking Widget
Features
- Protocols: Ethereum and Babylon. Solana coming soon.
- Default Wallet: Defaults to WalletConnect (ETH) and OneKey (Babylon)
- Custom Wallet with
wallet
prop for custom wallet integration. See examples below. - Testnet supported: Holesky for ETH, Signet for Babylon
Examples
Requirements
We will need to issue an
appId
and allowlist the domain where the widget will be rendered.
Reach out to us!
With default wallet (ETH)
The React snippet below will render the staking widget for Ethereum mainnet with WalletConnect enabled by default
import { Staking } from "@figmentio/elements";
<Staking
appId="TYooMQauvdEDq54Ni"
protocol="ethereum" // or "babylon" or "solana"
network="mainnet"
/>
With custom wallet (BTC)
The React snippet below will render the staking widget for Babylon mainnet with your custom wallet. It will load the wallet you return (including its balance) and upon signing it will invoke the sign functions you implement. It will take care of broadcasting the signed transaction.
import { Staking } from "@figmentio/elements";
<Staking
appId="TYooMQauvdEDq54Ni"
protocol="babylon"
network="mainnet"
wallet={{
address: "bc1...",
publicKey: "020e3...",
signMessage: async (unsignedMsg: string): Promise<string> {
// implement this and return a signed message
},
signTransaction: async (unsignedTx: string): Promise<string> {
// implement this and return a signed transaction
}
}}
/>
Updated about 2 months ago