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
The easiest way to see the widget working, including the workaround above, is to check out the example in the widget repo.
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