Add method for get passPhrase

package.json

@@ -4,15 +4,20 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "postinstall": "node './src/bufferFix/BufferFix'"
   },
   "dependencies": {
+    "@liskhq/lisk-client": "^5.2.2",
+    "@liskhq/lisk-passphrase": "^3.1.1",
     "@tailwindcss/forms": "^0.4.0",
+    "buffer": "^6.0.3",
     "chart.js": "^3.5.0",
     "chartjs-adapter-moment": "^1.0.0",
     "mobx": "^6.6.0",
     "mobx-react-lite": "^3.4.0",
     "moment": "^2.29.1",
+    "node-libs-browser": "^2.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-flatpickr": "^3.10.7",

src/bufferFix/BufferFix.js

@@ -0,0 +1,18 @@
+const fs = require('fs');
+
+const buffer = '../../node_modules/node-libs-browser/node_modules/buffer/index.js';
+const fix = "./readBigUInt64BE.js";
+
+fs.readFile(buffer, (bufferErr, bufferCode) => {
+  if (bufferErr) throw bufferErr;
+
+  fs.readFile(fix, (fixErr, fixCode) => {
+    if (fixErr) throw fixErr;
+
+    fs.writeFile(buffer, bufferCode + fixCode, 'utf8', (err) => {
+      if (err) throw err;
+
+      console.log('Successfully added readBigUInt64BE to Buffer.');
+    })
+  });
+});

src/bufferFix/readBigUInt64BE.js

@@ -0,0 +1,101 @@
+Buffer.prototype.readBigUInt64BE = defineBigIntMethod(function readBigUInt64BE (offset = 0) {
+  validateNumber(offset, 'offset')
+  const first = this[offset]
+  const last = this[offset + 7]
+  if (first === undefined || last === undefined) {
+    boundsError(offset, this.length - 8)
+  }
+
+  const hi = first * 2 ** 24 +
+      this[++offset] * 2 ** 16 +
+      this[++offset] * 2 ** 8 +
+      this[++offset]
+
+  const lo = this[++offset] * 2 ** 24 +
+      this[++offset] * 2 ** 16 +
+      this[++offset] * 2 ** 8 +
+      last
+
+  return (BigInt(hi) << 32n) + BigInt(lo)
+})
+
+Buffer.prototype.writeBigUInt64BE = defineBigIntMethod(function writeBigUInt64BE (value, offset = 0) {
+  return wrtBigUInt64BE(this, value, offset, 0n, 0xffffffffffffffffn)
+})
+
+function wrtBigUInt64BE (buf, value, offset, min, max) {
+  checkIntBI(value, min, max, buf, offset, 7)
+
+  let lo = Number(value & 0xffffffffn)
+  buf[offset + 7] = lo
+  lo = lo >> 8
+  buf[offset + 6] = lo
+  lo = lo >> 8
+  buf[offset + 5] = lo
+  lo = lo >> 8
+  buf[offset + 4] = lo
+  let hi = Number(value >> 32n & 0xffffffffn)
+  buf[offset + 3] = hi
+  hi = hi >> 8
+  buf[offset + 2] = hi
+  hi = hi >> 8
+  buf[offset + 1] = hi
+  hi = hi >> 8
+  buf[offset] = hi
+  return offset + 8
+}
+
+function checkBounds (buf, offset, byteLength) {
+  validateNumber(offset, 'offset')
+  if (buf[offset] === undefined || buf[offset + byteLength] === undefined) {
+    boundsError(offset, buf.length - (byteLength + 1))
+  }
+}
+
+function checkIntBI (value, min, max, buf, offset, byteLength) {
+  if (value > max || value < min) {
+    const n = typeof min === 'bigint' ? 'n' : ''
+    let range
+    if (byteLength > 3) {
+      if (min === 0 || min === 0n) {
+        range = `>= 0${n} and < 2${n} ** ${(byteLength + 1) * 8}${n}`
+      } else {
+        range = `>= -(2${n} ** ${(byteLength + 1) * 8 - 1}${n}) and < 2 ** ` +
+            `${(byteLength + 1) * 8 - 1}${n}`
+      }
+    } else {
+      range = `>= ${min}${n} and <= ${max}${n}`
+    }
+    throw new errors.ERR_OUT_OF_RANGE('value', range, value)
+  }
+  checkBounds(buf, offset, byteLength)
+}
+
+function defineBigIntMethod (fn) {
+  return typeof BigInt === 'undefined' ? BufferBigIntNotDefined : fn
+}
+
+function BufferBigIntNotDefined () {
+  throw new Error('BigInt not supported')
+}
+
+function validateNumber (value, name) {
+  if (typeof value !== 'number') {
+    throw new errors.ERR_INVALID_ARG_TYPE(name, 'number', value)
+  }
+}
+
+function boundsError (value, length, type) {
+  if (Math.floor(value) !== value) {
+    validateNumber(value, type)
+    throw new errors.ERR_OUT_OF_RANGE(type || 'offset', 'an integer', value)
+  }
+
+  if (length < 0) {
+    throw new errors.ERR_BUFFER_OUT_OF_BOUNDS()
+  }
+
+  throw new errors.ERR_OUT_OF_RANGE(type || 'offset',
+      `>= ${type ? 1 : 0} and <= ${length}`,
+      value)
+}

src/main.jsx

@@ -1,8 +1,11 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
+import {Buffer} from "buffer";
 import { BrowserRouter as Router } from 'react-router-dom'
 import App from './App'
 
+globalThis.Buffer = Buffer
+
 ReactDOM.render(
   <React.StrictMode>
     <Router>

src/pages/Onboarding3.jsx

@@ -1,17 +1,24 @@
-import React, {useEffect} from 'react';
+import React, {useEffect, useState} from 'react';
 import { Link } from 'react-router-dom';
 import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
 import Logo from "../images/logo.png";
+import { passphrase } from "@liskhq/lisk-client";
 
 function Onboarding3() {
 
+  const [passPhrase, setPassPhrase] = useState('')
+
+  function getPassPhrase() {
+    let phrase = passphrase.Mnemonic.generateMnemonic()
+    setPassPhrase(phrase)
+  }
+
   useEffect(()=>{
     return ()=>{
       localStorage.setItem('svgAvatar', generateSvgAvatar())
     }
   }, [])
 
-  const arrayBadges = ['judge', 'jelly', 'wasp', 'true', 'clog', 'forward', 'talent', 'ozone', 'belive', 'fresh', 'bulk', 'hobby']
   return (
     <main className="bg-white">
 
@@ -66,7 +73,7 @@ function Onboarding3() {
                   <h1 className="text-3xl text-slate-800 font-bold mb-12">Company information ✨</h1>
                   {/* htmlForm */}
                   <div className="grid grid-cols-4 gap-y-2.5 gap-[18px] mb-14">
-                    {arrayBadges.map(tag => (
+                    {passPhrase.split(' ').map(tag => (
                       <button key={tag} className="min-w-93px w-24 min-h-26px h-26px bg-slate-100 text-slate-500 cursor-pointer hover:bg-blue-100 hover:text-blue-600 rounded-full text-center px-2.5">
                         <span className="text-sm font-medium">{tag}</span>
                       </button>
@@ -80,7 +87,7 @@ function Onboarding3() {
                       </svg>
                       <span className="ml-2">Paste</span>
                     </button>
-                    <button className="btn pr-11 pl-7 border-slate-200 hover:border-slate-300 text-rose-500">
+                    <button onClick={()=>getPassPhrase()} className="btn pr-11 pl-7 border-slate-200 hover:border-slate-300 text-rose-500">
                       <svg className="mb-0.5" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path d="M14.5744 5.66943L13.1504 7.09343C13.4284 7.44043 13.6564 7.75743 13.8194 8.00043C13.0594 9.13043 10.9694 11.8204 8.25836 11.9854L6.44336 13.8004C6.93936 13.9244 7.45736 14.0004 8.00036 14.0004C12.7074 14.0004 15.7444 8.71643 15.8714 8.49243C16.0424 8.18843 16.0434 7.81643 15.8724 7.51243C15.8254 7.42743 15.3724 6.63143 14.5744 5.66943Z" fill="#F43F5E"/>
                         <path fillRule="evenodd" clipRule="evenodd" d="M1.00038 16.0002C0.744375 16.0002 0.488375 15.9022 0.293375 15.7072C-0.0976249 15.3162 -0.0976249 14.6842 0.292375 14.2942L2.82138 11.7653C1.17238 10.2913 0.198375 8.61425 0.128375 8.48925C-0.0416249 8.18625 -0.0426249 7.81725 0.126375 7.51425C0.251375 7.28925 3.24537 2.00025 8.00037 2.00025C9.33138 2.00025 10.5154 2.43125 11.5484 3.03825L14.2934 0.29325C14.6844 -0.09775 15.3164 -0.09775 15.7074 0.29325C16.0984 0.68425 16.0984 1.31625 15.7074 1.70725L1.70738 15.7072C1.51238 15.9022 1.25638 16.0002 1.00038 16.0002ZM8.00037 4.00025C5.14637 4.00025 2.95837 6.83525 2.18138 7.99925C2.55938 8.56225 3.28538 9.51025 4.24038 10.3463L6.07438 8.51225C6.02938 8.34825 6.00037 8.17825 6.00037 8.00025C6.00037 6.89525 6.89537 6.00025 8.00037 6.00025C8.17838 6.00025 8.34838 6.02925 8.51237 6.07425L10.0784 4.50825C9.43738 4.20125 8.74237 4.00025 8.00037 4.00025Z" fill="#F43F5E"/>

src/store/passPhrase.js

@@ -0,0 +1,8 @@
+const passphrase = require('@liskhq/lisk-passphrase')
+
+function passPhrase () {
+  return passphrase.Mnemonic.generateMnemonic()
+}
+
+console.log(passPhrase())
+

vite.config.js

@@ -2,6 +2,7 @@ import { defineConfig } from 'vite'
 import postcss from './postcss.config.js'
 import react from '@vitejs/plugin-react'
 
+
 // https://vitejs.dev/config/
 export default defineConfig({
   define: {
@@ -11,6 +12,9 @@ export default defineConfig({
     postcss,
   },
   plugins: [react()],
+  node: {
+    fs: 'empty'
+  },
   resolve: {
     alias: [
       {