Files
xahau.js/UNIQUE_SETUPS.md
Caleb Kniffen 38b385969b feat: remove Buffer support and bundle polyfill (#2526)
- Removes need for bundlers to polyfill the `Buffer` class. `UInt8Array` are used instead which are native to the browser and node.
- Reduces bundle size 7.1kb gzipped and eliminates 4 runtime dependencies: `base-x`, `base64-js`, `buffer`, and `ieee754`.

BREAKING CHANGE: All methods that previously took a `Buffer` now accept a `UInt8Array`.

---------

Co-authored-by: Jackson Mills <jmills@ripple.com>
2024-02-01 13:53:41 -06:00

2.6 KiB

Unique Setup Steps for Xrpl.js

Starting in 3.0 xrpl and all the packages in this repo no longer require custom configurations (ex. polyfills) to run.

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

Starting in 3.0 xrpl and its related packages no longer require custom configurations (ex. polyfills) to run.

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'
  1. Import polyfills in index file your project (it must be the first line):
import './polyfills'
...

Using xrpl.js with Vite React

Starting in 3.0 xrpl and all the packages in this repo no longer require custom configurations (ex. polyfills) to run.

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));
    });
  });
})();