React
Add the widget to your React project using npm
or your favorite javascript package manager.
npm install @kimafinance/kima-transaction-widget redux react-redux pino-pretty
You'll need to add the following:
The
<KimaProvider>
component inApp.tsx
The
<KimaTransactionWidget>
which interacts with KimaA 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 Reown Cloud and add it to the <KimaProvider>
component.
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>
);
};
export default App;
There are several configuration options, which will described in theConfiguration options section on setting up the widget.
Polyfills
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:
const { ProvidePlugin } = require("webpack");
module.exports = function override(config, env) {
return {
...config,
module: {
...config.module,
rules: [
...config.module.rules,
{
test: /\.js$/,
enforce: "pre",
use: ["source-map-loader"],
},
{
test: /\.cjs$/,
type: "javascript/auto",
},
{
test: /\.wasm$/,
type: "webassembly/async",
},
{
test: /\.m?js/,
type: "javascript/auto",
},
{
test: /\.m?js/,
resolve: {
fullySpecified: false,
},
},
{
test: /\.json$/,
use: "json-loader",
type: "javascript/auto", // This is important to prevent Webpack 5 from treating JSON as ESM
},
],
},
plugins: [
...config.plugins,
new ProvidePlugin({
Buffer: ["buffer", "Buffer"],
process: "process/browser",
}),
],
resolve: {
...config.resolve,
fallback: {
assert: "assert",
buffer: "buffer",
console: "console-browserify",
constants: "constants-browserify",
crypto: "crypto-browserify",
domain: "domain-browser",
events: "events",
fs: false,
http: "stream-http",
https: "https-browserify",
os: "os-browserify/browser",
path: "path-browserify",
punycode: "punycode",
process: "process/browser",
querystring: "querystring-es3",
stream: "stream-browserify",
_stream_duplex: "readable-stream/duplex",
_stream_passthrough: "readable-stream/passthrough",
_stream_readable: "readable-stream/readable",
_stream_transform: "readable-stream/transform",
_stream_writable: "readable-stream/writable",
string_decoder: "string_decoder",
sys: "util",
timers: "timers-browserify",
tty: "tty-browserify",
url: "url",
util: "util",
vm: "vm-browserify",
zlib: "browserify-zlib",
},
},
experiments: {
asyncWebAssembly: true,
},
ignoreWarnings: [/Failed to parse source map/],
};
};
Example
The easiest way to see the widget working, including the polyfill workaround, is to check out the example in the widget repo.
Last updated