Particle Network Docs - Chain Abstraction & Universal Accounts

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(
      {
        // You can pass options here if needed
      },
      {
        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,
      }
    ),
    // Add more connectors like walletConnect(), coinbaseWallet(), etc., here if needed
  ],
});

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

Answer: No, Particle Connect already integrates Particle Auth for social logins under the hood. If you’re using Particle Connect, there’s no need to install or configure any additional SDKs.

Get started with Particle Connect by following the Connect Quickstart Guide for a step-by-step tutorial.

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

Answer: No, Particle Connect does not natively support Bitcoin wallets.

How do I use account abstraction with Particle Connect?

Answer: To enable account abstraction with Particle Connect, start by configuring the aa plugin through the ConnectKitProvider.Once configured, you can use the useSmartAccount hook within your application. This hook gives you access to an object to manage the smart account, streamlining tasks like sending transactions and signing messages.

For detailed setup instructions, visit the Particle Connect SDK documentation.

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.