Kima Transaction Widget
npm install @kimafinance/kima-transaction-widget
``bash`
npm install --save @kimafinance/kima-transaction-widget
yarn add @kimafinance/kima-transaction-widget
`tsx
import React from 'react'
import {
KimaTransactionWidget,
KimaProvider,
FontSizeOptions,
ModeOptions,
SupportNetworks,
ColorModeOptions
} from 'kima-transaction-widget'
const App = () => {
return (
walletConnectProjectId='e579511a495b5c312b572b036e60555a'
externalProvider={} // in case you want to provide an already connected wallet
>
colorMode: ColorModeOptions.light
}}
mode={ModeOptions.payment}
titleOption={{
initialTitle: 'New Purchase'
}}
paymentTitleOption={{
title:
'You can now purchase our NFT on Polygon, using funds from other chains.'
}}
compliantOption={false}
transactionOption={{
targetChain: SupportNetworks.AVALANCHE,
targetAddress: '0x67cc400c434F691Ed45e452dC8F2Baf0101a9B63',
amount: 5,
currency: 'USDK'
}}
/>
)
}
export default App
`
`tsx
import React from 'react'
import {
KimaTransactionWidget,
KimaProvider,
FontSizeOptions,
ModeOptions,
ColorModeOptions
} from 'kima-transaction-widget'
const App = () => {
return (
walletConnectProjectId='e579511a495b5c312b572b036e60555a'
externalProvider={} // in case you want to provide an already connected wallet
>
colorMode: ColorModeOptions.light,
fontSize: FontSizeOptions.medium
}}
mode={ModeOptions.bridge}
compliantOption={false}
errorHandler={(e: any) => {
console.log('error:', e)
}}
successHandler={() => {
console.log('success')
}}
closeHandler={() => {
console.log('closed')
}}
/>
)
}
export default App
`
`tsx
import React from 'react'
import {
KimaTransactionWidget,
KimaProvider,
FontSizeOptions,
ModeOptions,
ColorModeOptions
} from 'kima-transaction-widget'
const App = () => {
return (
walletConnectProjectId='e579511a495b5c312b572b036e60555a'
>
colorMode: ColorModeOptions.light,
fontSize: FontSizeOptions.medium
}}
mode={ModeOptions.status}
txId={10}
/>
)
}
export default App
`
Used to specify theme options of kima-transaction-widget.
- Required: true
- Type:
- Example
`tsx`
colorMode: ColorModeOptions.light,
backgroundColorLight: '#CCCCCC', // background color of widget when light mode
backgroundColorDark: '#FFDDFF' // background color of widget when dark mode
}}
/>
Used to specify the scenario of kima-transaction-widget. Available modes are payment, bridget and status.
- Required: true
- Type: 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
`tsx`
export declare enum ModeOptions {
payment = 'payment',
bridge = 'bridge',
status = 'status'
}
Used to specify transaction index to keep tracking of it's status and progress using kima-transaction-widget. Used for only status mode.
- Required: false
- Type:
- Default:
Used to specify title of widget. Consists of titles for each step of widget.
- Required: false
- Type:
`tsx`
interface TitleOption {
initialTitle?: string
confirmTitle?: string
}
`tsx`
initialTitle: 'New Purchase', // First screen's title
confirmTitle: 'Confirm Purchase' // Second screen (confirmation step) title
}}
/>
Used to specify usage of compliant check feature. Enable compliance check to prevent interacting with dangerous accounts.
- Required: false
- Type:
- Default:
Used to specify external url for help documentation
- Required: false
- Type:
Used to specify payment scenario option.
- Required: false
- Type:
- Example
`tsx`
targetChain: SupportNetworks.AVALANCHE, // target chain to receive payment
targetAddress: '0x8222ADB2A2092c3774105a5F558987265D920C09', // target address to receive payment
amount: 5 // token amount to receive payment
currency: 'USDK' // token to be used (default as USDK for testnet)
}}
/>
Used to specify payment screen's title.
- Required: false
- Type:
- Example
`tsx`
title:
'You can now purchase our NFT on Polygon, using funds from other chains.',
style: {
fontSize: '1.2em',
fontWeight: '500'
}
}}
/>
`tsx`
externalProvider={new Web3Provider()}
logLevel='debug' // optional, default is 'error'
walletConnectProjectId='e579511a495b5c312b572b036e60555a'
>
{/ etc /}
Used to provide the widget with wallet connection and chain switching functionality.
Used to specify kima transaction backend url.
- Required: true
- Type:
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:
For debugging purposes, you can specify the log level. Available levels are trace, debug, info, warn, error and silent. By default, the log level is set to error.
The log level can also be set using the LOG_LEVEL environment or the equivalent for your framework: NEXT_PUBLIC_LOG_LEVEL, VITE_LOG_LEVEL. The Widget property will take precedence over the environment variable as it is set last.
DEBUG mode: Type D E B U G while focus is on the Widget (not in the console) to enable debug mode. This will set the log level to debug and log all messages to the console. Type it again to disable debug mode and restore the default log level. Useful to temporarily toggle logging in the browser when in production or an already deployed app where changing the ENV variable would require a redeploy.
Used to provide an already connected wallet instance from your app. Depending on the network your dapp is currently connected to is the instance that you will need to provide.
`ts`
interface ExternalProvider {
type: 'evm' | 'solana' | 'tron'
provider: Web3Provider | SolProvider | TronProvider
signer: JsonRpcSigner | PublicKey | string
}
- Required: false
- Type:
- errorHandler: (e: any) => void: Callback function to handle errors.closeHandler: (e: any) => void
- : Callback function to handle close event.successHandler: (e: any) => void
- : Callback function to handle success event after transaction submission to kima transaction backend.
- switchChainHandler: (chainId: number) => void: Callback function to handle chain switch event.
- keplrHandler: (e: any) => void`: Callback function to handle Keplr wallet events.