Because the Kima blockchain is a public network, you can interact with it however you see fit. You can choose to become a validator, if you want - see Becoming a Validator for more details - or you can build a variety of applications on top of it.
To make developing on top of Kima simpler, we have created a toolkit - the Kima Software Development Kit (SDK).
We provide:
a standalone server that you can run locally and use as middleware that sits between the front end of your dApp and the Kima blockchain, submitting requests and returning the response to the front end
a front-end widget with different configuration options that you can easily integrate into your dApp
Of course, the open ethos of Web3 means that you can develop your own solutions from scratch, but we strongly recommend building with both front end and back end components of our SDK so you can leverage the efforts our development team have made on your behalf.
There is an extra step that needs to happen if you are using Kima's tools to transfer to or from Solana wallets. The recipient wallet first needs to be "primed" by sending a small amount of USDK to the wallet before transfers or payments via Kima can take place.
This applies to the testnet only and will not be the case once Kima's mainnet goes live.
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.
Assuming you are building an app from scratch, you can run npx create-next-app <your-app-name>
to create a new app.
You can either run:
npm i @kimafinance/kima-transaction-widget
or else copy this package.json
to the root of your directory and then simply run npm i
.
Copy
Within your app
directory, create a components
directory and inside that create a file named widget.jsx
with the following code:
Copy
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
When you visit localhost:3000
you will see something like this:
Exactly as with the basic React implementation, you have all the same configuration options.
Note that in the above example, we have configured the title and payment title text, along with the colour. These are just some of the configuration options we describe below.
There are numerous ways to configure the modal for your own preferences and the look and feel of your dApp, which you can do via the following props:
Theme
The Theme prop allows you not only to switch between light and dark mode but also to specify your font colour and style and background colour:
Copy
Title
The Title prop enables you to give the widget whatever title you want and can be configured for each step of the widget.
Required: false
Type: TitleOption:
Copy
Payment Title
The PaymentTitle prop allows you to optionally set the title that appears on the payment screen if you are using the Payment component.
Required: false
Type: PaymentTitleOption
Copy
HelpUrl
This is a string, which should be to your own help documentation or FAQ. If unset, the link will default to Kima's help documentation.
Required: false
Type: string
Used to specify the scenario of kima-transaction-widget. Available modes are payment, bridget and status.
Required: true Type: ModeOptions Payment and bridge scenario for the purpose of widget, status mode is for tracking status of specific transaction of kima widget. To use status mode, txId prop should be determined export declare enum ModeOptions { payment = 'payment', bridge = 'bridge', status = 'status' }
TransactionOption
Within the payment scenario, you may optionally want to preset the chain and wallet address where the payment should go, as well as the payment amount.
Required: false
Type: TransactionOption
Copy
kimaBackendUrl
This is one of the few props that is mandatory to set, because this specifies Kima's transaction back end URL. In the bridge example above, we have made the assumption that you have the back end server running locally on localhost:3001
.
Required: true
Type: string
kimaNodeProviderQuery
Again, this is mandatory because this is used to specify the REST API URL for interactions with the Kima blockchain.
Required: true
Type: string
kimaExplorer
This is used to specify the URL of Kima's block explorer in the environment you are using. The widget needs this to provide updates to the status screen, as well as allowing users to link to their transactions to view progress.
It is not mandatory, but it is highly recommended.
Required: false Type: string Default: explorer.kima.finance
txID
Similarly, this is used to show users the progress of their transactions. It is not mandatory and is used only for status mode.
Required: false
Type: boolean
Default: -1
useFIAT
Used to specify whether users should be given the option to transact with fiat currency.
Required: false
Type: boolean
Default: false
autoConnect
This prop is optional and allows you to define whether connection of wallets such as MetaMask should be automatic or manual.
Required: false
Type: boolean
Default: false
Used to provide the widget with wallet connection and chain switching functionality.
walletConnectProjectId
Used to specify the WalletConnect project id. A default value is provided, but you can specify your own. To create a project, visit Reown Cloud and sign up for a free account (WalletConnect is now called Reown).
Required: false
Type: string
networkOption
Used to specify the network type.
Required: false
Type: NetworkOptions
Default: NetworkOptions.testnet
You can add the widget to your React project simply by running:
yarn add @kimafinance/kima-transaction-widget
There are several configuration options, which we will describe below.
Note that if you are using a later version of webpack
(>= 5), you will need to polyfill node core modules using react-app-rewired
.
You can resolve this by adding a file at the root of your project named config-overrides.js
. Paste the following content into the file:
Copy
If you are creating your application from scratch and assuming you are using TypeScript, create a file App.tsx
and an Index.tsx
.
Let's demonstrate the Kima bridging function first, which allows your users to transfer value between chains.
Into your App.tsx
paste:
Copy
Create a simple index.css
with the following code:
Copy
In your Index.tsx
paste the following code:
Copy
Start your app with yarn start
and you should see the Kima modal on localhost:3000
.
It should look something like this:
The example above provides the most basic example of the bridge functionality, with generic styling and configuration.
Note that it makes the assumption that you also have the development server running on port 3001.
Next, try the Kima Transaction Widget's payment scenario.
Replace the code in App.tsx
with the following:
Copy
You should see a page that looks like this:
Note that in the above example, we have configured the title and payment title text, along with the colour. These are just some of the configuration options we describe below.
There are numerous ways to configure the modal for your own preferences and the look and feel of your dApp, which you can do via the following props:
Theme
The Theme prop allows you not only to switch between light and dark mode but also to specify your font colour and style and background colour:
Copy
Title
The Title prop enables you to give the widget whatever title you want and can be configured for each step of the widget.
Required: false
Type: TitleOption:
Copy
Payment Title
The PaymentTitle prop allows you to optionally set the title that appears on the payment screen if you are using the Payment component.
Required: false
Type: PaymentTitleOption
Copy
HelpUrl
This is a string, which should be to your own help documentation or FAQ. If unset, the link will default to Kima's help documentation.
Required: false
Type: string
Used to specify the scenario of kima-transaction-widget. Available modes are payment, bridget and status.
Required: true Type: ModeOptions Payment and bridge scenario for the purpose of widget, status mode is for tracking status of specific transaction of kima widget. To use status mode, txId prop should be determined export declare enum ModeOptions { payment = 'payment', bridge = 'bridge', status = 'status' }
TransactionOption
Within the payment scenario, you may optionally want to preset the chain and wallet address where the payment should go, as well as the payment amount.
Required: false
Type: TransactionOption
Copy
kimaBackendUrl
This is one of the few props that is mandatory to set, because this specifies Kima's transaction back end URL. In the bridge example above, we have made the assumption that you have the back end server running locally on localhost:3001
.
Required: true
Type: string
kimaNodeProviderQuery
Again, this is mandatory because this is used to specify the REST API URL for interactions with the Kima blockchain.
Required: true
Type: string
kimaExplorer
This is used to specify the URL of Kima's block explorer in the environment you are using. The widget needs this to provide updates to the status screen, as well as allowing users to link to their transactions to view progress.
It is not mandatory, but it is highly recommended.
Required: false Type: string Default: explorer.kima.finance
txID
Similarly, this is used to show users the progress of their transactions. It is not mandatory and is used only for status mode.
Required: false
Type: boolean
Default: -1
useFIAT
Used to specify whether users should be given the option to transact with fiat currency.
Required: false
Type: boolean
Default: false
autoConnect
This prop is optional and allows you to define whether connection of wallets such as MetaMask should be automatic or manual.
Required: false
Type: boolean
Default: false
Used to provide the widget with wallet connection and chain switching functionality.
walletConnectProjectId
Required: false
Type: string
networkOption
Used to specify the network type.
Required: false
Type: NetworkOptions
Default: NetworkOptions.testnet
The easiest way to see the widget working, including the workaround above, is to check out .
Used to specify the WalletConnect project id. A default value is provided, but you can specify your own. To create a project, visit and sign up for a free account (WalletConnect is now called Reown).
As a developer, what can you build with Kima? In order to onboard more users to Web3, we need to simplify the user experience, which means helping them avoid complicated procedures on bridging applications that may or may not be safe to use.
Integrating with Kima's SDK or front-end widget removes the need for your users to leave your dApp and enables them to effortlessly switch funds between networks with the click of a button.
You could think about using Kima for:
A quick glance at DeFi Llama shows that Ethereum's share of TVL is dropping as DEXs choose to deploy on different networks. Allowing users to bridge funds via a plugin on your own website provides them with a seamless user experience, whichever chain they want to use.
In-game payments can slow down the user experience and add unwanted friction. If your users also have to bridge their funds between chains, this can introduce frustration and boredom that may lead to them abandoning your game completely. Kima's smooth, intuitive transactions will mean your users barely notice them.
Similarly, buyers on eCommerce sites are more likely to proceed through the sales funnel if their experience is not impeded by having to visit a separate bridging application.
NFT collectors are no longer limited to one or two chains, and some of the coolest up-and-coming collections can be found on minority chains where fees are cheaper and transactions are faster. Make your marketplace effortlessly multi-chain by integrating Kima.
Wallet developers looking for an easy, intuitive way for their users to swap assets in-wallet need to look no further than Kima.
Essentially, as the number of networks within the thriving Web3 ecosystem expands, the need for sending value securely and quickly from one chain to another has become a pressing need.
This is a web server that works as middleware between the Kima Transaction Widget and Kima Chain. Once it receives a transaction request from the widget, it will submit a transaction to Kima Chain signed by a local wallet.
The server is an Express application and requires minimal setup. Here are the instructions:
We recommend Keplr, which is a widely used wallet for blockchains within the Cosmos ecosystem.
Install it from here and make sure you back it up by saving the seed phrase.
You will need to record the mnemonic phrase rather than the private key, as it is the seed phrase that is needed as an an environment variable.
If you are developing on the KIMA testnet, you can acquire test KIMA tokens from our faucet site.
Follow the instructions here if you have not used a faucet before.
https://github.com/kima-finance/kima-transaction-backend
If you are using Docker, you can add these to the docker-compose
; otherwise, create an .env file with the following key pairs:
Copy
A few notes about these environment variables:
KIMA_BACKEND_MNEMONIC
is the seed phrase from the wallet you installed.
KIMA_BACKEND_SECRET
is the secret for generating JSON Web Tokens. Read more about JWT here if you have not used them before.
You will need a Depasify account in order to make fiat transactions using the Kima Transaction back end. Add the Depasify API key to your environment variables as DEPASIFY_API_KEY
.
For checking whether transactions involve risky wallets. you will need an xplorisk account. The Xplorisk Lambda endpoint should be added to your .env file as XPLORISK_URL
.
Neither of these dependencies are mandatory as long as you do not want to invoke the /compliant
, /uuid
or /kyc
endpoints.
You can run:
npm i
then
npm run dev
but the easiest way to get up and running without any dependency issues is with Docker. Use docker-compose.yml for dev, docker-compose-prod.yml for prod.
Start the server with:
docker compose up
In your terminal, run the following command:
Copy
The server should respond with a valid authtoken with a five-second expiry.
The Kima Transaction Widget sends a POST request to this endpoint before it submits a transaction request. Returns JWT as cookie which has 5 seconds of life time. This cookie will be expired after 5 seconds. Kima Transaction Widget will call the second endpoint right after it receives JWT Auth Token.
This is a POST request that submits a cross-chain transaction using the developer wallet whose details are stored. Before the /submit
endpoint is called, the JWT will first be validated.
The reponse object will contain a transaction ID which can be used to track the success of the submission.
An example of the request body that should be sent:
Copy
This is a GET request which will return OK if the address is compliant. Note that this will work only if you have a Xplorisk account.
Copy
This GET request will generate a UUID for a fiat payment session, which uses the Depasify API.
Once you have generated the UUID above, it can be used to return the KYC status. Uses the Depasify API.
{ "uuid": "123e4567-e89b-12d3-a456-426614174000" }