NextJS

The procedure for adding the Kima Transaction Widget to a NextJS app is very similar to the React tutorial but you should be aware that you will need to export the widget component as a dynamic component with {ssr: false} so that the application runs the widget on the client side.

To create a new app, you can run npx create-next-app <your-app-name>. Then install the Kima Widget and its peer dependencies.

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

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 walletConnectProjectId='your-project-id' /> component.

Within your app directory, create a components directory and inside that create a file named widget.jsx with the following code:

Copy

import dynamic from "next/dynamic";
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"
      kimaBackendUrl="http://localhost:3001"
    >
      <KimaTransactionWidget
        theme={{ colorMode: ColorModeOptions.light }}
        mode={ModeOptions.bridge}
      />
    </KimaProvider>
  );
};

const DynamicApp = dynamic(() => Promise.resolve(App), {
  ssr: false,
});

export default DynamicApp;

You can now use DynamicApp on whatever page you like. In our example, we will create an index page index.jsx in our pages directory and copy the following code:

Copy

import React from "react";
import DynamicApp from "../components/widget";

const HomePage = () => {
  return <DynamicApp />;
};

export default HomePage;

When you visit localhost:3000 you will see something like this:

See the Configuration options section for more details on setting up the widget.

Troubleshooting

Turbopack (Development)

The widget is not currently compatible with the --turbopack flag. Please disable this flag when running the development server.