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

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

The React snippet below will render the staking widget for Ethereum 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="ethereum"
  network="mainnet"
  wallet={{  
    address: "0x...",
    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
    }
  }}  
/>