React Components library

NPM package
The Kiln React Components is available as a public NPM package that every one can download and integrate in their web application.
NPM package: @kilnfi/react-components​
Our repository is also open source on github: https://github.com/kilnfi/react-components​
Ethereum Staking Widget
Import easily an Ethereum Staking Widget on your platform. You can specify a config with different configuration for each of your clients, like accountId which will assign the stakes made to the specified account.
You can also use our event handler in the config object to customize the React Component while having a simplified way to interact with Kiln backend.
1
import { EthStakingWidget } from "@kilnfi/react-components";
2
import "@kilnfi/react-components/dist/cjs/index.css";
3
​
4
const App = () => {
5
  const config: Config = {
6
    apiUrl: '...', // KILN API URL
7
    apiKey: '...', // KILN API TOKEN
8
    accountId: '...', // KILN ACCOUNT ID
9
    network: 'goerli', // goerli | mainnet
10
    chainId: 5, // network chain id
11
  };
12
  
13
  const provider = '' // A JsonRpcProvider (see: https://docs.ethers.io/v5/api/providers/jsonrpc-provider/)
14
  const account = '...' // connected wallet address
15
  
16
  return (
17
    <EthStakingWidget 
18
      config={config}
19
      provider={provider}
20
      account={account}
21
    >
22
      <EthStakingWidget.Header />
23
      <EthStakingWidget.SelectAmount />
24
      <EthStakingWidget.RewardsForecast />
25
      <EthStakingWidget.Status />
26
    </EthStakingWidget>   
27
  )
28
}
Copied!

API - Previous

Tezos

Next - Kiln validators

Ethereum

Last modified 27d ago

Copy link

Contents

NPM package

Ethereum Staking Widget