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 in App.tsx

• The <KimaTransactionWidget> which interacts with Kima

• A link to the Kima Transaction Backend (or build your own)

• A Reown 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 components with the <KimaProvider> and add the <KimaTransactionWidget> component.

If you don't have one already, you'll need to get a free Reown project ID from Reown Cloud and pass it to the projectId prop on <KimaProvider>.

import React from 'react'

import {
  KimaTransactionWidget,
  KimaProvider,
  ModeOptions,
  ColorModeOptions
} from '@kimafinance/kima-transaction-widget'
import '@kimafinance/kima-transaction-widget/index.css'

const App = () => {
  return (
    <KimaProvider
      projectId='your-project-id'
      kimaBackendUrl='http://localhost:4000'
    >
      <KimaTransactionWidget
        theme={{ colorMode: ColorModeOptions.light }}
        mode={ModeOptions.bridge}
      />
    </KimaProvider>
  )
}

export default App

The widget detects the active environment from your backend /chains/env endpoint, so you do not need to pass a networkOption prop manually.

In the following sections, we'll go through the framework-specific configuration for Vanilla React and NextJS.