Custom Non-Custodial Web3 Wallet for better seamless experience.

[13x54n]

Custom Non-Custodial Web3 Wallet

Since wallet onboarding, persistent wallet authentication requires many configuration and many dependencies are required. @p2pV1 and @13x54n concluded to build custom non-custodial web3 wallet.

@13x54n has already built the basic versioned web3 wallet. It won't be hassle and even the users don't need frequent interaction with external wallets, it'll be much easier for both tech and non-tech platform users. Here's the basic understanding blog of custom web3 wallet by @13x54n.

Updated Workflow

The older version of wallet by @13x54n is production ready but is not persistent thus I updated a workflow.

Basic Snippet

Remember to install the crypto-js library before running the React app:

npm install crypto-js

Though, crypto-js has stopped providing updates, the recent version of it is more than powerful for our wallet to work.

import React, { useState } from 'react';
import crypto from 'crypto';

const App = () => {
  const [privateKey, setPrivateKey] = useState('');
  const [encryptedPrivateKey, setEncryptedPrivateKey] = useState('');
  const [decryptedPrivateKey, setDecryptedPrivateKey] = useState('');

  // Define a helper function to encrypt the private key
  const encryptPrivateKey = (privateKey, encryptionKey) => {
    const cipher = crypto.createCipher('aes-256-cbc', encryptionKey);
    let encrypted = cipher.update(privateKey, 'utf8', 'hex');
    encrypted += cipher.final('hex');
    return encrypted;
  };

  // Define a helper function to decrypt the private key
  const decryptPrivateKey = (encryptedPrivateKey, encryptionKey) => {
    const decipher = crypto.createDecipher('aes-256-cbc', encryptionKey);
    let decrypted = decipher.update(encryptedPrivateKey, 'hex', 'utf8');
    decrypted += decipher.final('utf8');
    return decrypted;
  };

  // Handle encryption and decryption
  const handleEncryptDecrypt = () => {
    const encryptionKey = 'your-encryption-key'; //@dev Replace with user chosen password

    // Encrypt the private key
    const encryptedKey = encryptPrivateKey(privateKey, encryptionKey);
    setEncryptedPrivateKey(encryptedKey);

    // Decrypt the private key
    const decryptedKey = decryptPrivateKey(encryptedKey, encryptionKey);
    setDecryptedPrivateKey(decryptedKey);
  };

  return (
    <div>
      <h1>Private Key Encryption</h1>
      <div>
        <label>Private Key:</label>
        <input type="text" value={privateKey} onChange={(e) => setPrivateKey(e.target.value)} />
      </div>
      <button onClick={handleEncryptDecrypt}>Encrypt/Decrypt</button>
      <div>
        <label>Encrypted Private Key:</label>
        <input type="text" value={encryptedPrivateKey} readOnly />
      </div>
      <div>
        <label>Decrypted Private Key:</label>
        <input type="text" value={decryptedPrivateKey} readOnly />
      </div>
    </div>
  );
};

export default App;