> ## Documentation Index
> Fetch the complete documentation index at: https://docs.figment.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Elements (UI)

<Image align="center" border={false} src="https://files.readme.io/8b5a7c2812a209099dd2308267c79d5fa1d93dd9457ec82761eb2247124c32a4-Frame_hero.png" />

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.**

:point\_right: [Figment Elements on Github](https://github.com/figment-networks/elements)

# Staking Widget

<Image align="center" border={true} width="300px" src="https://files.readme.io/7cb1a81950f845d87104ad92e220d6cd723dcd3d8bbf35f1d30b61acb30d9848-Screenshot_2024-09-19_at_15.23.38.png" className="border" />

## Features

* Protocols: Ethereum, Solana, and Babylon
* Default Wallet: Defaults to WalletConnect (ETH), Wallet Adapter (SOL), and OneKey (Babylon)
* Custom Wallet with `wallet` prop for custom wallet integration. See examples below.
* Testnet supported: Hoodi for ETH, Devnet for Solana, and Signet for Babylon

## Examples

<Callout icon="💬" theme="default">
  ### Requirements

  We will need to issue an `appId` and allowlist the domain where the widget will be rendered.\
  Reach out to us!
</Callout>

### With default wallet (ETH)

The React snippet below will render the staking widget for Ethereum mainnet with WalletConnect enabled by default

```typescript ETH + WalletConnect (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.

```typescript BTC + Custom Wallet
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
    }
  }}  
/>
```

## Step-by-Step Integration Demo

<HTMLBlock>
  {`
  <!--ARCADE EMBED START-->
  <div style="position: relative; padding-bottom: calc(56.25% + 41px); height: 0; width: 100%;">
  <iframe src="https://demo.arcade.software/LIZzJzQsuqupABYsTcMz?embed&embed_mobile=tab&embed_desktop=inline&squared=true&show_copy_link=true" title="Figment Elements Arcade (Solana demo)" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="clipboard-write" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; color-scheme: light;"></iframe>
  </div>
  <!--ARCADE EMBED END-->
  `}
</HTMLBlock>