xahau.js/UNIQUE_SETUPS.md

Unique Setup Steps for Xrpl.js

For when you need to do more than just install xrpl.js for it to work (especially for React projects in the browser).

Using xrpl.js from a CDN

You can avoid setting up your build system to handle xrpl.js by using a cdn version that is prebuilt for the browser.

• unpkg <script src="https://unpkg.com/xrpl@2.3.0/build/xrpl-latest-min.js"></script>
• jsdelivr <script src="https://cdn.jsdelivr.net/npm/xrpl@2.3.0/build/xrpl-latest-min.js"></script>

Ensure that the full path is provided so the browser can find the sourcemaps.

Using xrpl.js with create-react-app

To use xrpl.js with React, you need to install shims for core NodeJS modules. Starting with version 5, Webpack stopped including shims by default, so you must modify your Webpack configuration to add the shims you need. Either you can eject your config and modify it, or you can use a library such as react-app-rewired. The example below uses react-app-rewired.

1. Install shims (you can use yarn as well):

   npm install --save-dev \
       buffer \
       process
   

2. Modify your webpack configuration

   1. Install react-app-rewired

      npm install --save-dev react-app-rewired
      

   2. At the project root, add a file named config-overrides.js with the following content:

      const webpack = require("webpack");
      
      module.exports = function override(config) {
        config.plugins = (config.plugins || []).concat([
          new webpack.ProvidePlugin({
            process: "process/browser",
            Buffer: ["buffer", "Buffer"],
          }),
        ]);
      
        return config;
      };
      

   3. Update package.json scripts section with

      "start": "react-app-rewired start",
      "build": "react-app-rewired build",
      "test": "react-app-rewired test",
      

This online template uses these steps to run xrpl.js with React in the browser: https://codesandbox.io/s/xrpl-intro-pxgdjr?file=/src/App.js

Using xrpl.js with React Native

If you want to use xrpl.js with React Native you will need to install polyfills for core NodeJS modules.

1. Install dependencies (you can use yarn as well):

   npm install xrpl \
       fast-text-encoding \
       react-native-get-random-values
   

2. After that, run the following commands:

   # compile `react-native-get-random-values` pods see https://www.npmjs.com/package/react-native-get-random-values#installation
   npx pod-install
   

3. Create polyfills.js and add

if (typeof Buffer === 'undefined') global.Buffer = require('buffer').Buffer
// Required for TextEncoder/TextDecoder
import 'fast-text-encoding'
// Required for `crypto.getRandomValues`
import 'react-native-get-random-values'

4. Import polyfills in index file your project (it must be the first line):

import './polyfills'
...

Using xrpl.js with Vite React

Similar to above, to get xrpl.js to work with Vite you need to set up a couple aliases in the vite.config.ts file.

1. If it's a fresh project you can use npm create vite@latest then choose the React and TypeScript options.

2. Copy these settings into your vite.config.ts file.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";
import polyfillNode from 'rollup-plugin-polyfill-node'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  define: {
    'process.env': {}
  },
  optimizeDeps: {
    esbuildOptions: {
      define: {
       global: 'globalThis',
      },
      plugins: [
        NodeGlobalsPolyfillPlugin({ 
          process: true, 
          buffer: true, 
        }),
      ],
    },
  }, 
  build: { 
    rollupOptions: {
      plugins: [
        polyfillNode(),
      ]
    } 
  },
})

3. Install the config dependencies and xrpl (e.g. using this command)

npm install --save-dev @esbuild-plugins/node-globals-polyfill \
		rollup-plugin-polyfill-node \
		&& npm install xrpl

Using xrpl.js with Deno

Until official support for Deno is added, you can use the following work-around to use xrpl.js with Deno:

Note

The following is currently broken due to https://github.com/denoland/deno/issues/20516. Once that is fixed there could be other issues as well.

import xrpl from 'https://dev.jspm.io/npm:xrpl';

(async () => {
  const api = new (xrpl as any).Client('wss://s.altnet.rippletest.net:51233');
  const address = 'rH8NxV12EuV...khfJ5uw9kT';

  api.connect().then(() => {
    api.getBalances(address).then((balances: any) => {
      console.log(JSON.stringify(balances, null, 2));
    });
  });
})();