Kima Network Documentation
  • What is Kima?
  • Supported blockchains
  • Supported tokens
  • Supported fiat currencies and payment methods
  • Adding Kima to your wallet
  • Try Kima with the Demo App
    • The Kima Light Demo App
    • The Kima Advanced Demo App
    • Kima Faucets
    • Kima Block Explorer
  • Become a Kima validator
    • Hardware and operating system requirements
    • Installation
    • Appendix
  • Become a Kima delegator
    • Benefits
    • How does it work?
    • Preparations
    • Delegate
    • Reclaim delegation
  • Become a liquidity provider
    • Benefits
    • Supported blockchains
    • Prepare to provide liquidity
    • Deposit assets in Kima pools
    • Withdraw liquidity
  • Kima governance
    • Draft a proposal
    • On-chain proposal
    • Off-chain proposal
    • References
  • The Kima SDK
    • Kima Use Cases for Developers
    • The Kima Transaction Back End
    • The Kima Transaction Widget
      • Installation
      • React
      • NextJS
      • Credit Card Transactions
      • Payment Mode
      • Bridge Mode
      • Status Mode
      • Configuration Options
    • Upgrading
      • v1.4.x
    • Using the Kima SDK Without the Widget
      • Transaction Data
      • Message Signing
      • Approval
      • Submitting the Transaction
      • Getting the Transaction Status
  • Further reading
  • Legal
    • Terms and conditions
    • Privacy policy
    • Disclaimer
  • FAQ
Powered by GitBook
On this page
Export as PDF
  1. The Kima SDK
  2. The Kima Transaction Widget

NextJS

PreviousReactNextCredit Card Transactions

Last updated 21 days ago

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 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 section for more details on setting up the widget.

Reown Cloud
Configuration options