Search…
React Components library
Kiln provides React Components to simplify and fasten the staking integration on your platform.

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!