React

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
      walletConnectProjectId='your-project-id'
      networkOption={NetworkOptions.testnet}
    >
      <KimaTransactionWidget
        theme={{ colorMode: ColorModeOptions.light }}
        mode={ModeOptions.bridge}
        kimaBackendUrl='http://localhost:3001'
      />
    </KimaProvider>
  )
}

export default App

There are several configuration options, which will described in theConfiguration options section on setting up the widget.

Polyfills

Note that if you are using a later version of webpack (>= 5), you will need to polyfill node core modules using react-app-rewired.

This can be resolved by adding a file at the root of your project named config-overrides.js. Paste the following content into the file:

const { ProvidePlugin } = require('webpack')

module.exports = function override(config, env) {
  return {
    ...config,
    module: {
      ...config.module,
      rules: [
        ...config.module.rules,
        {
          test: /\.js$/,
          enforce: 'pre',
          use: ['source-map-loader']
        },
        {
          test: /\.cjs$/,
          type: 'javascript/auto'
        },
        {
          test: /\.wasm$/,
          type: 'webassembly/async'
        },
        {
          test: /\.m?js/,
          type: 'javascript/auto'
        },
        {
          test: /\.m?js/,
          resolve: {
            fullySpecified: false
          },
        },
        {
          test: /\.json$/,
          use: 'json-loader',
          type: 'javascript/auto' // This is important to prevent Webpack 5 from treating JSON as ESM
        }
      ]
    },
    plugins: [
      ...config.plugins,
      new ProvidePlugin({
        Buffer: ['buffer', 'Buffer'],
        process: 'process/browser'
      })
    ],
    resolve: {
      ...config.resolve,
      fallback: {
        assert: 'assert',
        buffer: 'buffer',
        console: 'console-browserify',
        constants: 'constants-browserify',
        crypto: 'crypto-browserify',
        domain: 'domain-browser',
        events: 'events',
        fs: false,
        http: 'stream-http',
        https: 'https-browserify',
        os: 'os-browserify/browser',
        path: 'path-browserify',
        punycode: 'punycode',
        process: 'process/browser',
        querystring: 'querystring-es3',
        stream: 'stream-browserify',
        _stream_duplex: 'readable-stream/duplex',
        _stream_passthrough: 'readable-stream/passthrough',
        _stream_readable: 'readable-stream/readable',
        _stream_transform: 'readable-stream/transform',
        _stream_writable: 'readable-stream/writable',
        string_decoder: 'string_decoder',
        sys: 'util',
        timers: 'timers-browserify',
        tty: 'tty-browserify',
        url: 'url',
        util: 'util',
        vm: 'vm-browserify',
        zlib: 'browserify-zlib'
      }
    },
    experiments: {
      asyncWebAssembly: true
    },
    ignoreWarnings: [/Failed to parse source map/]
  }
}

Example

The easiest way to see the widget working, including the polyfill workaround, is to check out the example in the widget repo.