Installation
Add the widget to your React project using npm
or your favorite javascript package manager.
npm install @kimafinance/kima-transaction-widget redux react-redux pino-pretty
You'll need to add the following:
The
<KimaProvider>
component inApp.tsx
The
<KimaTransactionWidget>
which interacts with KimaA link to the Kima Transaction Backend (or build your own)
A WalletConnect project id
For the purposes of this example, we'll just add the widget to App.tsx
, but it can go anywhere it makes sense for your project.
Open App.tsx
, wrap your existing componts with the <KimaProvider>
and add the <KimaTransactionWidget>
component.
If you don't have one already, you'll need to get a (free) WallectConnect project ID from Reown Cloud and add it to the <KimaProvider>
component.
import React from 'react'
import {
KimaTransactionWidget,
KimaProvider,
ModeOptions,
NetworkOptions,
ColorModeOptions
} from '@kimafinance/kima-transaction-widget'
import '@kimafinance/kima-transaction-widget/index.css'
const App = () => {
return (
<KimaProvider
walletConnectProjectId='your-project-id'
networkOption={NetworkOptions.testnet}
>
<KimaTransactionWidget
theme={{ colorMode: ColorModeOptions.light }}
mode={ModeOptions.bridge}
kimaBackendUrl='http://localhost:3001'
/>
</KimaProvider>
)
}
export default App
In the following sections, we'll go through the framework specific configuration for Vinalla React and NextJS.
Last updated