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

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​

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.
import { EthStakingWidget } from "@kilnfi/react-components";
import "@kilnfi/react-components/dist/cjs/index.css";
​
const App = () => {
const config: Config = {
apiUrl: '...', // KILN API URL
apiKey: '...', // KILN API TOKEN
accountId: '...', // KILN ACCOUNT ID
network: 'goerli', // goerli | mainnet
chainId: 5, // network chain id
};
const provider = '' // A JsonRpcProvider (see: https://docs.ethers.io/v5/api/providers/jsonrpc-provider/)
const account = '...' // connected wallet address
return (
<EthStakingWidget
config={config}
provider={provider}
account={account}
>
<EthStakingWidget.Header />
<EthStakingWidget.SelectAmount />
<EthStakingWidget.RewardsForecast />
<EthStakingWidget.Status />
</EthStakingWidget>
)
}
Copy link
On this page
NPM package
Ethereum Staking Widget