Particle Connect FAQ - Particle Network docs

How do I add a custom wallet to Particle Connect?

Answer: Particle Connect, out-of-the-box, supports MetaMask, WalletConnect, Phantom, Coinbase Wallet, OKX Wallet, Trust Wallet, and Bitget Wallet.

Although, a custom wallet can be added given it supports application injection (the vast majority of extension-based wallets). To add an injected wallet to Particle Connect, you’ll need to place injected from @particle-network/connectkit (for Web) within the connectorFns object.

An example of this has been included below.

import { createConfig } from '@particle-network/connectkit';
import { evmWalletConnectors, injected, walletConnect, coinbaseWallet } from '@particle-network/connectkit/evm';

const config = createConfig({
    walletConnectors: [
        evmWalletConnectors({
            },
            connectorFns: [
                injected({
                    // Replace the placeholders with information reflecting the wallet you're including.
                    target: {
                        icon: 'https://...',
                        id: 'xxx', // Wallet Unique ID
                        name: 'XXX Wallet',
                        provider: (window) => {
                            return window?.xxx.ethereum;
                        },
                    },
                }),
            ],
            // EIP-6963: Multi Injected Provider Discovery, default true.
            multiInjectedProviderDiscovery: true,
        }),
    ],
    // Other connectors...
});

Do I need to use Particle Auth if I'm using Particle Connect?

Does Particle Connect include support for Bitcoin wallets through BTC Connect?

How do I use account abstraction with Particle Connect?

How do I fix webpack 5 polyfills error when creating a new React application?

Answer: When using create-react-app version 5 or above, you might encounter issues due to the lack of NodeJS polyfills, which are no longer included by default. To fix this, you can use react-app-rewired and install the necessary polyfill modules.

Step 1: After creating a new application with CRA, install react-app-rewired and the required polyfill packages.

If you’re using Yarn:

yarn add --dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process vm-browserify browserify-zlib

If you’re using NPM:

npm install --save-dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process vm-browserify browserify-zlib

Step 2: Create a config-overrides.js file in the root of your project and add the necessary configuration to include the missing polyfills. This file will override the default Webpack configuration provided by create-react-app.

config-overrides.js

const webpack = require('webpack');

module.exports = function override(config) {
  const fallback = config.resolve.fallback || {};
  Object.assign(fallback, {
    crypto: require.resolve('crypto-browserify'),
    stream: require.resolve('stream-browserify'),
    assert: require.resolve('assert'),
    http: require.resolve('stream-http'),
    https: require.resolve('https-browserify'),
    os: require.resolve('os-browserify'),
    url: require.resolve('url'),
    zlib: require.resolve('browserify-zlib'),
    process: require.resolve('process/browser'),
  });
  config.resolve.fallback = fallback;
  config.plugins = (config.plugins || []).concat([
    new webpack.ProvidePlugin({
      process: 'process/browser.js',
      Buffer: ['buffer', 'Buffer'],
    }),
  ]);

  config.module.rules = config.module.rules.map((rule) => {
    if (rule.oneOf instanceof Array) {
      rule.oneOf[rule.oneOf.length - 1].exclude = [
        /\.(js|mjs|jsx|cjs|ts|tsx)$/,
        /\.html$/,
        /\.json$/,
      ];
    }
    return rule;
  });

  return config;
};

Step 3: Modify the scripts section in your package.json to use react-app-rewired instead of the default react-scripts:

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
},

After making these changes, your React application should build successfully without encountering NodeJS polyfill errors.

How do I fix the '__wbindgen_add_to_stack_pointer' error in a React app using Vite?

Answer: If you’re encountering the error "Cannot read properties of undefined (reading '__wbindgen_add_to_stack_pointer')" in your React app using Vite, it likely relates to issues with loading a WebAssembly (Wasm) module.

To resolve this, you can use the Particle Network WASM plugin with a customized Vite configuration. Here’s how to set it up:

Install the Vite Plugin: Ensure you have the necessary WASM files and the plugin configured.

Terminal

npm i @vitejs/plugin-react

Update your vite.config.ts: Add the following configuration to correctly handle the WebAssembly module in development mode:

vite.config.ts

    import { defineConfig, Plugin, ConfigEnv } from 'vite';
  import react from '@vitejs/plugin-react';
  import fs from 'fs';
  import path from 'path';

  const particleWasmPlugin: Plugin | undefined = {
      name: 'particle-wasm',
      apply: (_, env: ConfigEnv) => {
          return env.mode === 'development';
      },
      buildStart: () => {
          const copiedPath = path.join(
              __dirname,
              'node_modules/@particle-network/thresh-sig/wasm/thresh_sig_wasm_bg.wasm'
          );
          const dir = path.join(__dirname, 'node_modules/.vite/wasm');
          const resultPath = path.join(dir, 'thresh_sig_wasm_bg.wasm');
          if (!fs.existsSync(dir)) {
              fs.mkdirSync(dir, { recursive: true });
          }
          fs.copyFileSync(copiedPath, resultPath);
      },
  };

  export default defineConfig({
    plugins: [react(), particleWasmPlugin],
    server: {
      host: '0.0.0.0',
    },
    define: {
      'process.env': process.env
    },
    build: {
      target: 'esnext', // you can also use 'es2020' here
    },
    optimizeDeps: {
      esbuildOptions: {
        target: 'esnext', // you can also use 'es2020' here
      },
    },
  });

This configuration helps ensure that the WebAssembly module is correctly copied and accessible during development, preventing the __wbindgen_add_to_stack_pointer error from occurring.

Still need help?

Open a ticket with Particle’s Developer Relations team through the dedicated Telegram support bot.

How do I add a custom wallet to Particle Connect?

Answer: Particle Connect, out-of-the-box, supports MetaMask, WalletConnect, Phantom, Coinbase Wallet, OKX Wallet, Trust Wallet, and Bitget Wallet.

An example of this has been included below.

import { createConfig } from '@particle-network/connectkit';
import { evmWalletConnectors, injected, walletConnect, coinbaseWallet } from '@particle-network/connectkit/evm';

const config = createConfig({
    walletConnectors: [
        evmWalletConnectors({
            },
            connectorFns: [
                injected({
                    // Replace the placeholders with information reflecting the wallet you're including.
                    target: {
                        icon: 'https://...',
                        id: 'xxx', // Wallet Unique ID
                        name: 'XXX Wallet',
                        provider: (window) => {
                            return window?.xxx.ethereum;
                        },
                    },
                }),
            ],
            // EIP-6963: Multi Injected Provider Discovery, default true.
            multiInjectedProviderDiscovery: true,
        }),
    ],
    // Other connectors...
});

Do I need to use Particle Auth if I'm using Particle Connect?

Does Particle Connect include support for Bitcoin wallets through BTC Connect?

How do I use account abstraction with Particle Connect?

How do I fix webpack 5 polyfills error when creating a new React application?

Step 1: After creating a new application with CRA, install react-app-rewired and the required polyfill packages.

If you’re using Yarn:

yarn add --dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process vm-browserify browserify-zlib

If you’re using NPM:

npm install --save-dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process vm-browserify browserify-zlib

config-overrides.js

const webpack = require('webpack');

module.exports = function override(config) {
  const fallback = config.resolve.fallback || {};
  Object.assign(fallback, {
    crypto: require.resolve('crypto-browserify'),
    stream: require.resolve('stream-browserify'),
    assert: require.resolve('assert'),
    http: require.resolve('stream-http'),
    https: require.resolve('https-browserify'),
    os: require.resolve('os-browserify'),
    url: require.resolve('url'),
    zlib: require.resolve('browserify-zlib'),
    process: require.resolve('process/browser'),
  });
  config.resolve.fallback = fallback;
  config.plugins = (config.plugins || []).concat([
    new webpack.ProvidePlugin({
      process: 'process/browser.js',
      Buffer: ['buffer', 'Buffer'],
    }),
  ]);

  config.module.rules = config.module.rules.map((rule) => {
    if (rule.oneOf instanceof Array) {
      rule.oneOf[rule.oneOf.length - 1].exclude = [
        /\.(js|mjs|jsx|cjs|ts|tsx)$/,
        /\.html$/,
        /\.json$/,
      ];
    }
    return rule;
  });

  return config;
};

Step 3: Modify the scripts section in your package.json to use react-app-rewired instead of the default react-scripts:

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
},

After making these changes, your React application should build successfully without encountering NodeJS polyfill errors.

How do I fix the '__wbindgen_add_to_stack_pointer' error in a React app using Vite?

To resolve this, you can use the Particle Network WASM plugin with a customized Vite configuration. Here’s how to set it up:

Install the Vite Plugin: Ensure you have the necessary WASM files and the plugin configured.

Terminal

npm i @vitejs/plugin-react

Update your vite.config.ts: Add the following configuration to correctly handle the WebAssembly module in development mode:

vite.config.ts

    import { defineConfig, Plugin, ConfigEnv } from 'vite';
  import react from '@vitejs/plugin-react';
  import fs from 'fs';
  import path from 'path';

  const particleWasmPlugin: Plugin | undefined = {
      name: 'particle-wasm',
      apply: (_, env: ConfigEnv) => {
          return env.mode === 'development';
      },
      buildStart: () => {
          const copiedPath = path.join(
              __dirname,
              'node_modules/@particle-network/thresh-sig/wasm/thresh_sig_wasm_bg.wasm'
          );
          const dir = path.join(__dirname, 'node_modules/.vite/wasm');
          const resultPath = path.join(dir, 'thresh_sig_wasm_bg.wasm');
          if (!fs.existsSync(dir)) {
              fs.mkdirSync(dir, { recursive: true });
          }
          fs.copyFileSync(copiedPath, resultPath);
      },
  };

  export default defineConfig({
    plugins: [react(), particleWasmPlugin],
    server: {
      host: '0.0.0.0',
    },
    define: {
      'process.env': process.env
    },
    build: {
      target: 'esnext', // you can also use 'es2020' here
    },
    optimizeDeps: {
      esbuildOptions: {
        target: 'esnext', // you can also use 'es2020' here
      },
    },
  });

This configuration helps ensure that the WebAssembly module is correctly copied and accessible during development, preventing the __wbindgen_add_to_stack_pointer error from occurring.

Still need help?

Open a ticket with Particle’s Developer Relations team through the dedicated Telegram support bot.

CHANGELOG