# React

Add the widget to your React project using `npm` or your favorite JavaScript package manager.

```bash
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](https://cloud.reown.com/sign-in) and pass it to the `projectId` prop on `<KimaProvider>`.

```tsx
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](https://docs.kima.network/kima-network/the-kima-sdk/add-kima-widget-to-your-app/configure-kima-widget) 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:

```js
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](https://github.com/kima-finance/kima-transaction-widget/tree/main/example-vite) or the [Next.js example](https://github.com/kima-finance/kima-transaction-widget/tree/main/example-next) 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.