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 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
      projectId='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.