Particle Network Docs - Chain Abstraction & Universal Accounts

How can I ensure the signature result is consistent each time?

Answer: Due to the unique characteristics of Multi-Party Computation (MPC), the signature result for the same message can vary each time, unlike traditional private key wallets such as MetaMask.To address scenarios requiring a consistent signature result, we provide the uniq parameter. This parameter ensures that the signature remains consistent every time you sign the same message.

App.tsx

// Sign a message with the uniq flag
const result = await signMessage(message, true);

How can I silently log in and sign messages/transactions?

Answer: Currently, silent login and signing are not directly supported. However, this functionality can be achieved using the following approaches:

Session Keys with Biconomy V2: Session keys enable silent signing by creating temporary keys with limited permissions and expiration, allowing you to bypass frequent authentication popups.
Enabling Blind Signatures with Particle Auth: Blind signing (signing without a confirmation popup) is possible in Particle Auth if specific conditions are met:
- Authentication Method: The user must be authenticated via JWT or Telegram.
- Master Password Requirement:
  - The user has entered their master password, or
  - The user has not set a master password.
- No Payment Password: The user has not set a payment password.
- Disable Payment Password Prompt: Configure AuthCoreContextProvider with the parameter promptPaymentPasswordSettingWhenSign set to false.
// Configuration for disabling payment password prompt const promptSettingConfig = { promptPaymentPasswordSettingWhenSign: false, };
When these conditions are satisfied, blind signing is enabled.

How do I determine if an account is new?

Answer: When you retrieve UserInfo, either through the connect method or via the userInfo object from useAuthCore, a field provide the relevant information:

Account Creation: The created_at field indicates the timestamp when the account was created.

Find more about Handling User Information in the Particle Auth SDK page.

How can I check the status of the main password and payment password settings?

Answer: The userInfo object contains a security_account property, which includes two fields:

has_set_master_password: Indicates if the master password is set.
has_set_payment_password: Indicates if the payment password is set.

Find more about Handling User Information in the Particle Auth SDK page.

How to add support for a new EVM chain?

Answer: Our team needs to implement support for integrating a new EVM chain on our platform. Once we have added support for the chain, developers can use it within their applications.

Please contact us to discuss potential integration.

What are the options for chain_name returned by the backend API?

Answer: The chain_name values returned by the backend API include evm_chain and solana. Additionally, for Tron, the chain_name is also represented as evm_chain.These values indicate the blockchain network associated with the account.

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.