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 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.

There are several configuration options, which are described in the Configuration options section.

Polyfills

For new integrations, prefer a modern setup such as Vite or Next.js. Those are the maintained reference examples in the widget repo.

The instructions below are only for older Create React App / Webpack setups that still need Node core module polyfills.

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 in a maintained setup is to check out the Vite example or the Next.js example in the widget repo.

Use the polyfill workaround above only if you are integrating into an older CRA/Webpack application that cannot move to Vite or Next.js yet.