admin/BlockchainUI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add method for get passPhrase and generation hex for account logo

Browse Source
This commit is contained in:
DwCay
2022-06-18 16:50:32 +03:00
parent 0da68ddd63
commit bfdddee46a
7 changed files with 74 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/DropdownProfile.jsx
View File

@@ -1,12 +1,14 @@
import React, { useState, useRef, useEffect } from 'react';
import {observer} from "mobx-react-lite";
import { Link } from 'react-router-dom';
import Transition from '../utils/Transition';
import {registrationStore} from "../store/registrationStore";
import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
import UserAvatar from '../images/user-avatar-32.png';
function DropdownProfile({
const DropdownProfile = observer(({
align
}) {
})=>{
const [dropdownOpen, setDropdownOpen] = useState(false);
@@ -43,7 +45,7 @@ function DropdownProfile({
onClick={() => setDropdownOpen(!dropdownOpen)}
aria-expanded={dropdownOpen}
>
<img className="w-8 h-8 rounded-full" src={localStorage.getItem('svgAvatar') || UserAvatar} width="32" height="32" alt="User" />
<img className="w-8 h-8 rounded-full" src={generateSvgAvatar(registrationStore.pubKey) || UserAvatar} width="32" height="32" alt="User" />
<div className="flex items-center truncate">
<span className="truncate ml-2 text-sm font-medium group-hover:text-slate-800">Acme Inc.</span>
<svg className="w-3 h-3 shrink-0 ml-1 fill-current text-slate-400" viewBox="0 0 12 12">
@@ -95,6 +97,6 @@ function DropdownProfile({
</Transition>
</div>
)
}
})
export default DropdownProfile;

7
src/images/GenerateOnboardingSvg/GenerateSvg.js
View File

@@ -36,12 +36,9 @@ function createBlob(options) {
}
export var generateSvgAvatar = ( function () {
return function (seed, raw) {
let pubKey = localStorage.getItem('svgKey') || Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16);
return function (publicKey, seed, raw) {
let pubKey = publicKey || Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16);
//pubKey = "73f47d4929d7b2b6598ca4999d52567f9bb5aef3e353e0a66b468096db6e4e88"
if (!localStorage.getItem('svgKey')) {
localStorage.setItem('svgKey', `${pubKey}`)
}
let particles = [];
let gradients = ['#000000'];
let defs = [];

5
src/pages/Dashboard.jsx
View File

@@ -1,4 +1,4 @@
import React, {useEffect, useState} from 'react';
import React, {useState} from 'react';
import Sidebar from '../partials/Sidebar';
import Header from '../partials/Header';
@@ -19,9 +19,6 @@ import DashboardCard10 from '../partials/dashboard/DashboardCard10';
import DashboardCard11 from '../partials/dashboard/DashboardCard11';
function Dashboard() {
useEffect(() => {
localStorage.setItem('svgKey', '')
}, [])
const [sidebarOpen, setSidebarOpen] = useState(false);
return (

15
src/pages/Onboarding1.jsx
View File

@@ -1,11 +1,20 @@
import React from 'react';
import React, {useEffect} from 'react';
import { Link } from 'react-router-dom';
import OnboardingImage from '../images/onboarding-image.jpg';
import OnboardingDecoration from '../images/auth-decoration.png';
import Logo from "../images/logo.png";
import {observer} from "mobx-react-lite";
import {passphrase} from "@liskhq/lisk-client";
import {registrationStore} from "../store/registrationStore";
const Onboarding1 = observer(()=>{
let phrase = passphrase.Mnemonic.generateMnemonic()
registrationStore.savePassPhrase(phrase)
useEffect(()=>{
},[])
function Onboarding1() {
return (
<main className="bg-white">
@@ -127,6 +136,6 @@ function Onboarding1() {
</main>
);
}
})
export default Onboarding1;

42
src/pages/Onboarding3.jsx
View File

@@ -1,23 +1,33 @@
import React, {useEffect, useState} from 'react';
import React, { useState} from 'react';
import { Link } from 'react-router-dom';
import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
import Logo from "../images/logo.png";
import {registrationStore} from "../store/registrationStore";
import { passphrase } from "@liskhq/lisk-client";
function Onboarding3() {
const [passPhrase, setPassPhrase] = useState('')
function getPassPhrase() {
const [passPhrase, setPassPhrase] = useState(registrationStore.passPhraseStore.replace(/\s+/g, ' ').split(' ').map((item, index) => ({str:item, id:index })))
function generatePassPhrase() {
let phrase = passphrase.Mnemonic.generateMnemonic()
setPassPhrase(phrase)
registrationStore.savePassPhrase(phrase)
let newPassPhrase = registrationStore.passPhraseStore.split(' ').map((item, index) => ({str:item, id:index }))
setPassPhrase(newPassPhrase)
}
useEffect(()=>{
return ()=>{
localStorage.setItem('svgAvatar', generateSvgAvatar())
function savePassPhraseInStore (copiedPhrase) {
let phrasePaste = copiedPhrase.trim().replace(/\s+/g, ' ').split(' ')
if(phrasePaste.length===12) {
registrationStore.savePassPhrase(copiedPhrase)
setPassPhrase(phrasePaste.map((item, index) => ({str:item, id:index })))
} else {
return false
}
}, [])
}
function pastePassPhrase() {
navigator.clipboard.readText().then(res=>savePassPhraseInStore(res))
}
return (
<main className="bg-white">
@@ -73,21 +83,21 @@ 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">
{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>
{passPhrase.map(tag => (
<button key={tag.id} 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.str}</span>
</button>
))}
</div>
<div className="flex pl-7 gap-x-5">
<button className="btn pl-9 pr-16 border-slate-200 hover:border-slate-300 text-slate-600">
<button onClick={()=>pastePassPhrase()} className="btn pl-9 pr-16 border-slate-200 hover:border-slate-300 text-slate-600">
<svg className="w-4 h-4 fill-current text-slate-400 shrink-0 mb-0.5" viewBox="0 0 16 16">
<path
d="M11.7.3c-.4-.4-1-.4-1.4 0l-10 10c-.2.2-.3.4-.3.7v4c0 .6.4 1 1 1h4c.3 0 .5-.1.7-.3l10-10c.4-.4.4-1 0-1.4l-4-4zM4.6 14H2v-2.6l6-6L10.6 8l-6 6zM12 6.6L9.4 4 11 2.4 13.6 5 12 6.6z"></path>
</svg>
<span className="ml-2">Paste</span>
</button>
<button onClick={()=>getPassPhrase()} className="btn pr-11 pl-7 border-slate-200 hover:border-slate-300 text-rose-500">
<button onClick={()=>generatePassPhrase()} 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"/>
@@ -113,7 +123,7 @@ function Onboarding3() {
{/* Image */}
<div className="flex flex-col items-center h-full w-full hidden md:block absolute top-0 bottom-0 right-0 md:w-1/2" aria-hidden="true">
<div className="flex mt-40 flex-col items-center gap-2.5">
<img className="object-cover object-center" src={generateSvgAvatar()} width="493px" height="493px" alt="Onboarding" />
<img className="object-cover object-center" src={generateSvgAvatar(registrationStore.pubKey)} width="493px" height="493px" alt="Onboarding" />
<span className="text-sm">Your generated Digital ID</span>
</div>
</div>

10
src/pages/Onboarding4.jsx
View File

@@ -25,12 +25,6 @@ const Onboarding4 = observer(()=>{
}
},[checkBoxesSelected])
useEffect(()=>{
return ()=>{
localStorage.setItem('svgAvatar', generateSvgAvatar())
}
}, [])
return (
<main className="bg-white">
@@ -86,7 +80,7 @@ const Onboarding4 = observer(()=>{
<circle className="text-emerald-100" cx="32" cy="32" r="32" />
<path className="text-emerald-500" d="m28.5 41-8-8 3-3 5 5 12-12 3 3z" />
</svg>
<h1 className="text-3xl text-slate-800 font-bold mb-8">{`Nice to meet you, ${registrationStore.accountData().first_name} 🙌`}</h1>
<h1 className="text-3xl text-slate-800 font-bold mb-8">{registrationStore.accountData.first_name ? `Nice to meet you, ${registrationStore.accountData.first_name} 🙌` : 'Please, go back step 2'}</h1>
<button onClick={()=>validateCheckBox()} className="btn px-6 bg-indigo-500 hover:bg-indigo-600 text-white">
<Link id="link-dashboard" to={checkBoxesSelected && "/dashboard"}>Go To Profile -&gt;</Link>
</button>
@@ -117,7 +111,7 @@ const Onboarding4 = observer(()=>{
{/* Image */}
<div className="flex flex-col items-center h-full w-full hidden md:block absolute top-0 bottom-0 right-0 md:w-1/2" aria-hidden="true">
<div className="flex mt-40 flex-col items-center gap-2.5">
<img className="object-cover object-center" src={generateSvgAvatar()} width="493px" height="493px" alt="Onboarding" />
<img className="object-cover object-center" src={generateSvgAvatar(registrationStore.pubKey)} width="493px" height="493px" alt="Onboarding" />
<span className="text-sm">Your generated Digital ID</span>
</div>
</div>

27
src/store/registrationStore.js
View File

@@ -1,22 +1,41 @@
import { reaction, makeAutoObservable } from "mobx";
import {cryptography} from "@liskhq/lisk-client";
class RegistrationStore {
_accountData = {};
_accountData = {}
_passPhraseStore=''
_pubKey = ''
constructor() {
makeAutoObservable(this);
reaction(() => this.accountData, () => this.saveDataRegistration())
reaction(()=>this.passPhraseStore, ()=>this.savePubKey())
};
savePassPhrase(phrase) {
this._passPhraseStore = phrase
}
saveDataRegistration(data) {
this._accountData = data;
};
savePubKey() {
this._pubKey = cryptography.bufferToHex(cryptography.getAddressAndPublicKeyFromPassphrase(this.passPhraseStore).publicKey)
}
accountData() {
get passPhraseStore() {
return this._passPhraseStore
}
get accountData() {
return this._accountData
};
get pubKey() {
return this._pubKey
}
};
export const registrationStore = new RegistrationStore();