This commit is contained in:
kandrusyak
2022-06-28 16:38:05 +03:00
parent d617de75b5
commit 3a4ed9daf9
10 changed files with 94 additions and 51 deletions

View File

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
import { import {
Routes, Routes,
Route, Route,
useLocation useLocation,
} from 'react-router-dom'; } from 'react-router-dom';
import './css/style.scss'; import './css/style.scss';

3
src/api/node.js Normal file
View File

@@ -0,0 +1,3 @@
import {fetchWrapper} from '../shared/fetchWrapper';
export const getNodeInfo = (headers) => fetchWrapper.get('node/info/', headers)

View File

@@ -2,7 +2,7 @@ import React, { useState, useRef, useEffect } from 'react';
import {observer} from "mobx-react-lite"; import {observer} from "mobx-react-lite";
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import Transition from '../utils/Transition'; import Transition from '../utils/Transition';
import {registrationStore} from "../store/registrationStore"; import {registrationStore} from "../store/store";
import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg"; import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
import UserAvatar from '../images/user-avatar-32.png'; import UserAvatar from '../images/user-avatar-32.png';

View File

@@ -6,7 +6,7 @@ import OnboardingDecoration from '../images/auth-decoration.png';
import Logo from "../images/logo.png"; import Logo from "../images/logo.png";
import {observer} from "mobx-react-lite"; import {observer} from "mobx-react-lite";
import {passphrase} from "@liskhq/lisk-client"; import {passphrase} from "@liskhq/lisk-client";
import {registrationStore} from "../store/registrationStore"; import {registrationStore} from "../store/store";
const Onboarding1 = observer(()=>{ const Onboarding1 = observer(()=>{
let phrase = passphrase.Mnemonic.generateMnemonic() let phrase = passphrase.Mnemonic.generateMnemonic()

View File

@@ -1,7 +1,7 @@
import React, {useEffect, useState} from 'react'; import React, {useEffect, useState} from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { registrationStore } from "../store/registrationStore"; import { registrationStore } from "../store/store";
import OnboardingImage from '../images/onboarding-image.jpg'; import OnboardingImage from '../images/onboarding-image.jpg';
import OnboardingDecoration from '../images/auth-decoration.png'; import OnboardingDecoration from '../images/auth-decoration.png';

View File

@@ -2,15 +2,15 @@ import React, { useState} from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg"; import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
import Logo from "../images/logo.png"; import Logo from "../images/logo.png";
import {registrationStore} from "../store/registrationStore"; import {registrationStore} from "../store/store";
import { passphrase } from "@liskhq/lisk-client"; import { passphrase } from "@liskhq/lisk-client";
function Onboarding3() { function Onboarding3() {
const [passPhrase, setPassPhrase] = useState(registrationStore.passPhraseStore.replace(/\s+/g, ' ').split(' ').map((item, index) => ({str:item, id:index }))) const [passPhrase, setPassPhrase] = useState(registrationStore.passPhrase.replace(/\s+/g, ' ').split(' ').map((item, index) => ({str:item, id:index })))
function generatePassPhrase() { function generatePassPhrase() {
let phrase = passphrase.Mnemonic.generateMnemonic() let phrase = passphrase.Mnemonic.generateMnemonic()
registrationStore.savePassPhrase(phrase) registrationStore.savePassPhrase(phrase)
let newPassPhrase = registrationStore.passPhraseStore.split(' ').map((item, index) => ({str:item, id:index })) let newPassPhrase = registrationStore.passPhrase.split(' ').map((item, index) => ({str:item, id:index }))
setPassPhrase(newPassPhrase) setPassPhrase(newPassPhrase)
} }

View File

@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg"; import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
import Logo from "../images/logo.png"; import Logo from "../images/logo.png";
import {observer} from "mobx-react-lite"; import {observer} from "mobx-react-lite";
import { registrationStore } from "../store/registrationStore"; import { registrationStore } from "../store/store";
const Onboarding4 = observer(()=>{ const Onboarding4 = observer(()=>{

View File

@@ -32,7 +32,7 @@ function request(method, url, headers = {}, token, body) {
requestOptions = { requestOptions = {
method: method, method: method,
headers: { headers: {
authorization: `IDNTTY ${token}`, Authorization: `IDNTTY ${token}`,
...headers ...headers
}, },
signal: controller.signal, signal: controller.signal,
@@ -42,7 +42,7 @@ function request(method, url, headers = {}, token, body) {
requestOptions = { requestOptions = {
method: method, method: method,
headers: { headers: {
authorization: `IDNTTY ${token}`, Authorization: `IDNTTY ${token}`,
Accept: 'application/json', Accept: 'application/json',
'Content-Type': 'application/json', 'Content-Type': 'application/json',
...headers ...headers

View File

@@ -1,41 +0,0 @@
import { reaction, makeAutoObservable } from "mobx";
import {cryptography} from "@liskhq/lisk-client";
class RegistrationStore {
_accountData = {}
_passPhraseStore=''
_pubKey = ''
constructor() {
makeAutoObservable(this);
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)
}
get passPhraseStore() {
return this._passPhraseStore
}
get accountData() {
return this._accountData
};
get pubKey() {
return this._pubKey
}
};
export const registrationStore = new RegistrationStore();

81
src/store/store.js Normal file
View File

@@ -0,0 +1,81 @@
import { reaction, makeAutoObservable } from "mobx";
import {cryptography} from "@liskhq/lisk-client";
import {getNodeInfo} from '../api/node';
import {fetchWrapper} from '../shared/fetchWrapper';
class Store {
_accountData = {}
_passPhrase='rocket north inform swift improve fringe sweet crew client canyon bean autumn'
_nodeInfo = {}
constructor() {
makeAutoObservable(this);
this.fetchNodeInfo()
reaction(() => this.tokenKey, () => fetchWrapper.getAuth('http://3.125.47.101/api/data/account', {
networkIdentifier: this.nodeInfo.networkIdentifier,
lastBlockID: this.nodeInfo.lastBlockID
}))
};
savePassPhrase(phrase) {
this._passPhrase = phrase
}
saveDataRegistration(data) {
this._accountData = data;
};
fetchNodeInfo() {
getNodeInfo()
.then((info) => this.fetchNodeInfoSuccess(info))
.catch((err) => this.fetchNodeInfoFailed(err))
}
fetchNodeInfoSuccess(info) {
this._nodeInfo = info.data;
console.log(info)
}
fetchNodeInfoFailed(err) {
console.log(err)
}
get passPhrase() {
return 'rocket north inform swift improve fringe sweet crew client canyon bean autumn'
}
get accountData() {
return this._accountData
};
get nodeInfo() {
return this._nodeInfo;
}
get addressAndPubKey() {
return cryptography.getAddressAndPublicKeyFromPassphrase(this.passPhrase);
}
get pubKey() {
return this.addressAndPubKey.publicKey.toString('hex');
}
get address() {
return cryptography.bufferToHex(this.addressAndPubKey.address)
}
get tokenKey() {
const stringToSign = this.nodeInfo.networkIdentifier.concat(this.nodeInfo.lastBlockID);
if(!stringToSign)
return '';
const sign = cryptography.signDataWithPassphrase(Buffer.from(stringToSign, 'hex'), this.passPhrase).toString('hex')
return this.pubKey + ':' +sign
}
};
export const registrationStore = new Store();