Pre-requisites - React

Let’s try to create a web based wallet similar to https://wallet-kosh.vercel.app/

https://github.com/keshav-exe/projekt-kosh/

• Initialize an empty React Project

 npm create vite@latest

• Install dependencies

npm install

• Add node-pollyfills

npm install vite-plugin-node-polyfills

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { nodePolyfills } from 'vite-plugin-node-polyfills'

// <https://vitejs.dev/config/>
export default defineConfig({
  plugins: [react(), nodePolyfills()],
})

• Clean up App.jsx

import { useState } from 'react'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
     
    </>
  )
}

export default App

• Create a mnemonics state variable

  const [mnemonic, setMnemonic] = useState("");

• Add a button that lets the user generate a fresh mnemonic phrase. Ref - https://projects.100xdevs.com/tracks/public-private-keys/Public-Key-Cryptography-9

npm install bip39

import { generateMnemonic } from "bip39";

<button onClick={async function() {
  const mn = await generateMnemonic();
  setMnemonic(mn)
}}>
  Create Seed Phrase
</button>

Reference - https://github.com/hujiulong/web-bip39

• Display the mnemonic in an input box