# xrpl-wallet-kit > A toolkit for interacting with all Xrpl wallets using a single, simple API. This library abstracts away the complexities of individual wallet configurations, allowing developers to focus on the frontend of their application. Latest version **0.1.31** (published 2023-12-13) · MIT license · 0 weekly downloads ## Install ```sh npm install xrpl-wallet-kit pnpm add xrpl-wallet-kit yarn add xrpl-wallet-kit bun add xrpl-wallet-kit ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.31 | | Published | 2023-12-13 | | First published | 2023-07-20 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 8 | | Unpacked size | 70.6 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 3 | | Author | Afo | | Maintainers | garantor | ## Links - npm: https://www.npmjs.com/package/xrpl-wallet-kit - Repository: https://github.com/garantor/xrpl-wallet-kit - Homepage: https://github.com/garantor/xrpl-wallet-kit#readme - Issues: https://github.com/garantor/xrpl-wallet-kit/issues - npm.io page: https://npm.io/package/xrpl-wallet-kit ## Dependencies (8) - [xrpl](https://npm.io/package/xrpl.md) ^2.9.1 - [xumm](https://npm.io/package/xumm.md) ^1.5.4 - [@types/node](https://npm.io/package/@types/node.md) ^20.4.4 - [xrpl-client](https://npm.io/package/xrpl-client.md) ^2.1.0 - [@gemwallet/api](https://npm.io/package/@gemwallet/api.md) ^3.3.0 - [@walletconnect/types](https://npm.io/package/@walletconnect/types.md) ^2.10.4 - [@ts-web3modal/standalone](https://npm.io/package/@ts-web3modal/standalone.md) ^2.4.9 - [@walletconnect/sign-client](https://npm.io/package/@walletconnect/sign-client.md) ^2.10.4 ## Recent versions - 0.1.31 (latest) — 2023-12-13 - 0.1.30 — 2023-12-13 - 0.1.29 — 2023-12-13 - 0.1.28 — 2023-12-13 - 0.1.27 — 2023-10-28 - 0.1.26 — 2023-09-28 - 0.1.25 — 2023-08-21 - 0.1.24 — 2023-08-06 - 0.1.23 — 2023-08-06 - 0.1.22 — 2023-07-26 - 0.1.21 — 2023-07-26 - 0.1.20 — 2023-07-26 - 0.1.19 — 2023-07-24 - 0.1.18 — 2023-07-24 - 0.1.17 — 2023-07-24 - … 16 more at https://npm.io/package/xrpl-wallet-kit/versions ## README # Xrpl wallet toolkit A toolkit for interacting with all Xrpl wallets using a single, simple API. This library abstracts away the complexities of individual wallet configurations, allowing developers to focus on the frontend of their application. The toolkit provides a unified interface for creating, accessing, and managing Xrpl transaction using wallets. The toolkit is easy to use and can be integrated into any application that needs to interact with Xrpl wallets. It is also open source, so developers can contribute to its development and make it even better. ## Installation ```shell npm i xrpl-wallet-kit ``` ## Supported Wallets The goal is to support as much wallet as we can to provide flexibility for dapp developer but initially the kit only support the following wallets; - Xumm - Gem Wallet - Walletconnect v2(standalone) If you would like to see more wallets supported, please raise an issue. ## Examples To begin with, you need to create a single instance of the main class. This will ensure that all of the methods in the class are accessible and that unexpected results are avoided. ```shell import { XRPLKit, EsupportedWallet, Networks } from 'xrpl-wallet-kit'; const client = new XRPLKit(EsupportedWallet.GEM, Networks.TESTNET) ``` ## Connecting Dapps to wallets To establish the initial connection with the wallets, you need to call the ```connectKitToWallet``` method of the previously initialized class, passing in the project ID or API key depending on the wallet you are connecting to. For example, to connect to Xumm, you would use the following code: ```shell clientSession = await client.connectKitToWallet(null, "apiKey for xumm connection") ``` Where apiKey is the project apikey for your Xumm account. Once you have called the ```connectKitToWallet``` method, the wallet will be connected and you will be able to interact with it. ## Signing transaction The transaction format for most wallets on the Kit follows the standard XRP Ledger transaction format, with the exception of Wallet Connect. When using Wallet Connect, you are required to specify the desired method type. To learn more about Wallet Connect on XRPL, you can visit this [link](https://docs.walletconnect.com/2.0/advanced/rpc-reference/xrpl-rpc). To sign a Wallet Connect transaction using the Kit, you need to provide the following information as shown in the example below. - To send a walletconnect transaction for signing; ```shell const client = await client.signTransaction({ "request":{ "method":"the_wallet_connect_method", "params":{ "tx_json":{ "TransactionType":"Payment", "Account":"accounts", "Destination":"r4MPsJ8SmQZGzk4dFxEoJHEF886bfX4rhu", "Amount":"13000000" } } } }) ``` For signing with other wallets, please provide a standard XRPL transaction. - For other wallets, ```shell const client = await client.signTransaction({ "TransactionType":"Payment", "Account":"accounts", "Destination":"r4MPsJ8SmQZGzk4dFxEoJHEF886bfX4rhu", "Amount":"13000000" }) ``` When using the xrpl-wallet-kit with `create-react-app` you will need to follow these steps below; 1. Installation of dependencies: ```shell npm install --save-dev \ assert \ buffer \ crypto-browserify \ https-browserify \ os-browserify \ process \ stream-browserify \ stream-http \ url \ browserify-zlib ``` 2. Modify or create webpack configuration i. Install `react-app-rewired` ```shell npm install --save-dev react-app-rewired ``` ii. Setup a config file in the root of your project `config-overrides.js` and add the following; ```shell const { ProvidePlugin } = require('webpack'); module.exports = function (config, env) { return { ...config, module: { ...config.module, rules: [ ...config.module.rules, { test: /\.m?[jt]sx?$/, enforce: 'pre', use: ['source-map-loader'], }, { test: /\.m?[jt]sx?$/, resolve: { fullySpecified: false, }, }, ], }, plugins: [ ...config.plugins, new ProvidePlugin({ process: 'process/browser', }), ], resolve: { ...config.resolve, fallback: { assert: require.resolve('assert'), buffer: require.resolve('buffer'), crypto: require.resolve('crypto-browserify'), http: require.resolve('stream-http'), https: require.resolve('https-browserify'), stream: require.resolve('stream-browserify'), url: require.resolve('url/'), zlib: require.resolve('browserify-zlib'), }, }, ignoreWarnings: [/Failed to parse source map/], }; }; ``` 3. Update package.json scripts section ```shell "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test" ``` - To disconnect or logout from a wallet, simply call the disconnect method of the class. ```shell await client.disconnect() ``` We will be releasing more documentation on the kit in the near future. I hope this is helpful --- _Source: https://npm.io/package/xrpl-wallet-kit · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._