Wallet creation speed not improved 💭

[alimurad-1]

Question

How do I optimize the speed of wallet creation, I have followed the library guide but wallet creation is still taking 15 to 20 seconds

I am missing some configuration steps but I am unable to figure out the app performance is compromised and I want to improve it

any help with this issue is appreciated

What I tried

following are my project files 

//package.json

 "dependencies": {
    "@craftzdog/react-native-buffer": "^6.0.5",
    "@ethersproject/shims": "^5.7.0",
    "@react-native-async-storage/async-storage": "^1.23.1",
    "@react-native-clipboard/clipboard": "^1.14.1",
    "@react-navigation/native": "^6.1.17",
    "@react-navigation/native-stack": "^6.9.26",
    "@reduxjs/toolkit": "^2.2.5",
    "axios": "^1.7.2",
    "dotenv": "^16.4.5",
    "ethers": "^6.13.1",
    "fs": "^0.0.1-security",
    "path": "^0.12.7",
    "react": "18.2.0",
    "react-native": "0.74.1",
    "react-native-biometrics": "^3.0.1",
    "react-native-compressor": "^1.8.25",
    "react-native-confetti-cannon": "^1.5.2",
    "react-native-crypto-js": "^1.0.0",
    "react-native-device-info": "^11.1.0",
    "react-native-gesture-handler": "^2.17.1",
    "react-native-get-random-values": "^1.11.0",
    "react-native-image-picker": "^7.1.2",
    "react-native-permissions": "^4.1.5",
    "react-native-quick-crypto": "^0.7.0",
    "react-native-raw-bottom-sheet": "^3.0.0",
    "react-native-reanimated": "^3.13.0",
    "react-native-responsive-screen": "^1.4.2",
    "react-native-safe-area-context": "^4.10.3",
    "react-native-screens": "^3.31.1",
    "react-native-slide-to-unlock": "^0.1.6",
    "react-native-toast-message": "^2.2.0",
    "react-native-vector-icons": "^10.1.0",
    "react-redux": "^9.1.2",
    "readable-stream": "^4.5.2",
    "rn-slide-button": "^1.0.3",
    "rn-slide-to-confirm": "^1.0.6",
    "rn-sliding-button": "^1.1.5",
    "rn-swipe-to-confirm": "^0.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/babel-preset": "0.74.83",
    "@react-native/eslint-config": "0.74.83",
    "@react-native/metro-config": "0.74.83",
    "@react-native/typescript-config": "0.74.83",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "babel-plugin-dotenv": "^0.1.1",
    "babel-plugin-module-resolver": "^5.0.2",
    "babel-plugin-react-native": "^2.0.0",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-native-dotenv": "^3.4.11",
    "react-test-renderer": "18.2.0",
    "rn-nodeify": "^10.3.0",
    "typescript": "5.0.4"
  },


//metro.config.json

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = getDefaultConfig(__dirname);

// Ensure resolver is defined before setting resolveRequest
if (!config.resolver) {
  config.resolver = {};
}

config.resolver.resolveRequest = (context, moduleName, platform) => {
  if (moduleName === 'crypto') {
    // when importing crypto, resolve to react-native-quick-crypto
    return context.resolveRequest(
      context,
      'react-native-quick-crypto',
      platform,
    );
  }
  // otherwise chain to the standard Metro resolver.
  return context.resolveRequest(context, moduleName, platform);
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);


//babel.config.json

// babel.config.js

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    ['module:react-native-dotenv'],
    [
      'module-resolver',
      {
        alias: {
          '@images': './src/assets/images',
          '@components': './src/components',
          '@screens': './src/screens',
          '@utils': './src/utils',
          '@constants': './src/constants',
          '@store': './src/store',
          '@api': './src/api',
          crypto: 'react-native-quick-crypto',
          stream: 'readable-stream',
          buffer: '@craftzdog/react-native-buffer',
        },
      },
    ],
    'react-native-reanimated/plugin',
  ],
};

//index.jsx

import 'react-native-get-random-values';
// Import the the ethers shims (**BEFORE** ethers)
import '@ethersproject/shims';
// Import the ethers library
import {ethers} from 'ethers';

const app = () =>{

//the fn to create wallet

const fn = () => {
...
   const start = global.performance.now();
        const mnemonic = ethers.Wallet.createRandom().mnemonic;
        const end = global.performance.now();
        const timeTaken = end - start;
        console.log(`Time taken 1: ${timeTaken}ms`);

        const start2 = global.performance.now();
        const wallet = ethers.HDNodeWallet.fromMnemonic(mnemonic);
        const end2 = global.performance.now();
        const timeTaken2 = end2 - start2;
        console.log(`Time taken 2: ${timeTaken2}ms`);
...


}

return(
<>...<>
)}

export default app

QuickCrypto Version

^0.7.0

Additional information

• I am using Expo
• I have read the Troubleshooting Guide
• I agree to follow this project's Code of Conduct
• I searched for similar questions in the issues page as well as in the discussions page and found none.

[boorad]

Does it help to use RNQC polyfills? (see README.md)

import { install } from 'react-native-quick-crypto';
install();

I'm not sure what ethers is doing internally. What RNQC calls is it making? Are they supported in the implementation-coverage.md doc?

Maybe create a small public repo that reproduces this issue so it's easier to test?

[alimurad-1]

Does it help to use RNQC polyfills? (see README.md)

import { install } from 'react-native-quick-crypto';
install();

I'm not sure what ethers is doing internally. What RNQC calls is it making? Are they supported in the implementation-coverage.md doc?

Maybe create a small public repo that reproduces this issue so it's easier to test?

So I tried to create a public repo to with a fresh react native project, but it is giving build error in android

and upon looking at issues page I get to know that I am not the only one facing this issue

[alimurad-1]

the following setup helped me achieve the required speed

ethers-io/ethers.js#2250 (comment)

this setup is for the ethers v6

however the RNQC issue with new react native versions still persists