React
Last updated
Last updated
Add the widget to your React project using npm
or your favorite javascript package manager.
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
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 componts with the <KimaProvider>
and add the <KimaTransactionWidget>
component.
If you don't have one already, you'll need to get a (free) WallectConnect project ID from and add it to the <KimaProvider>
component.
Note that 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:
There are several configuration options, which will described in the section on setting up the widget.
The easiest way to see the widget working, including the polyfill workaround, is to check out .