fixed url, font

fix merge
Merge pull request #37 from franze6/DID-9
2022-07-15 17:22:34 +03:00 · 2022-07-15 12:10:06 +03:00 · 2022-07-15 12:09:26 +03:00 · 2022-07-15 12:09:19 +03:00 · 2022-07-15 11:52:25 +03:00 · 2022-07-15 11:51:01 +03:00
5 changed files with 174 additions and 165 deletions
--- a/src/pages/digitalId/ProfileId.jsx
+++ b/src/pages/digitalId/ProfileId.jsx
@@ -7,6 +7,14 @@ import Header from '../../partials/Header';
 import ProfileTable from '../../partials/digitalId/ProfileTable';
 import Image from '../../images/transactions-image-04.svg';

+const defaultValues = {
+  label: '',
+  value: '',
+  seed: String(Math.floor(Math.random() * 90000000000000000000), 10) 
+};
+
+const initialPropertyValues = ['First name', 'Second name', 'Birthdate', 'Gender', 'National doctype', 'National doc ID', 'National doc issue date', 'National doc expiry date'];
+
 const Profile = observer (() => {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [buttonPanelOpen, setButtonPanelOpen] = useState(true);
@@ -16,14 +24,6 @@ const Profile = observer (() => {
  const [addPanelOpen, setAddPanelOpen] = useState(false);
  const [updatePanelOpen, setUpdatePanelOpen] = useState(false);
  const [selectedItems, setSelectedItems] = useState([]);
-  
-  const defaultValues = {
-    label: '',
-    value: '',
-    seed: Math.floor(Math.random() * 90000000000000000000) 
-  };
-
-  const initialPropertyValues = ['First name', 'Second name', 'Birthdate', 'Gender', 'National doctype', 'National doc id', 'National doc issue date', 'National doc expiry date'];
  const [propertyValues, setPropertyValues] = useState([]);
  const [updatedValues, setUpdatedValues] = useState([defaultValues]);
  const [addedValues, setAddedValues] = useState(defaultValues);
@@ -35,43 +35,41 @@ const Profile = observer (() => {
  }

  const changeAddedValues = (value, field) => {
-    setAddedValues((prevState) => (
-      field !== 'seed' ? {
+    setAddedValues((prevState) => ({
      ...prevState,
      [field]: value
-    } : {
-      ...prevState,
-      [field]: +value,
    }))
  };

  const changeUpdatedValues = (value, field, key) => {
    setUpdatedValues((prevState) => 
      prevState.map((elem) => (
-        (elem.key === key && field !== 'seed') ? {
-          ...elem,
-          [field]: value,
-        } : 
        (elem.key === key) ? {
          ...elem,
-          [field]: +value,
+          [field]: value,
        } : elem
      ))
    )
  };

-  const closeHint = (element) => {
+  const selectHint = (element) => {
    changeAddedValues(element, 'label');
    setPropertyValues([]);
  }

+  const closeHint = (eventTarget) => {
+    if (!eventTarget || eventTarget.tabIndex !== -1) {
+      setPropertyValues([]);
+    }
+  };
+
  const handleSelectedItems = (selectedItems) => {
    setSelectedItems([...selectedItems]);
    setUpdatedValues(userDataStore.decryptedData.filter(({ key }) => selectedItems.includes(key))
      .map(elem => (
        (!elem.seed) ? {
        ...elem,
-        seed: Math.floor(Math.random() * 90000000000000000000)
+        seed: String(Math.floor(Math.random() * 90000000000000000000), 10) 
      }: elem)));
    if (selectedItems.length > 0) {
      setButtonPanelOpen(false);
@@ -95,7 +93,9 @@ const Profile = observer (() => {
  }

  const sendAddedData = () => {
-    if (!userDataStore.decryptedData.some((element) => element.label === addedValues.label) && (addedValues.seed.toString().length === 20)) {
+    const checkingAddedData = !userDataStore.decryptedData
+      .some((element) => element.label === addedValues.label) && (addedValues.seed.length === 20);
+    if (checkingAddedData) {
      setAddPanelOpen(false);
      setButtonPanelOpen(true);
      setAddedValues(defaultValues);
@@ -232,56 +232,55 @@ const Profile = observer (() => {
                </div>
                <div className="ml-2.5">
                  {/* Add panel */}
-                  <div className={`${!addPanelOpen && 'hidden'} bg-white p-5 shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80 mb-11`}>
-                    <div className="flex flex-col gap-y-3">
-                      <div>
-                        <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Property <span className="text-rose-500">*</span></label>
-                        <input
-                          autoComplete='off'
-                          id="label"
-                          className="form-input w-full"
-                          type="text"
-                          required
-                          onInput={(e) => handleInput(e.target.value, 'label')}
-                          value={addedValues.label}
-                          onClick={openHint}
-                        />
-                        <div className={`flex flex-col gap-y-2 py-2 pl-2 border border-t-0 border-slate-200 rounded ${(propertyValues.length > 0) || 'hidden'}`}>
-                          <ul>
-                            {propertyValues.map((element, index) => (
-                              <li key={index} onClick={() => closeHint(element)}>{element}</li>
-                            ))}
-                          </ul>
-                        </div>
-                      </div>
-                      <div>
-                        <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Value <span className="text-rose-500">*</span></label>
-                        <input
-                          autoComplete='off'
-                          id="value"
-                          className="form-input w-full"
-                          type="text"
-                          required
-                          onClick={() => setPropertyValues([])}
-                          onChange={(e) => changeAddedValues(e.target.value, 'value')}
-                          value={addedValues.value}
-                        />
-                      </div>
-                      <div>
-                        <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Seed <span className="text-rose-500">*</span></label>
-                        <input
-                          autoComplete='off'
-                          id="seed"
-                          className="form-input w-full"
-                          type="number"
-                          required
-                          onClick={() => setPropertyValues([])}
-                          onChange={(e) => changeAddedValues(e.target.value, 'seed')}
-                          value={addedValues.seed}
-                        />
-                      </div>
+                  <div className={`${!addPanelOpen && 'hidden'} relative flex flex-col bg-white p-5 shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80 mb-11`}>
+                    <div className='relative z-20'>
+                      <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Property <span className="text-rose-500">*</span></label>
+                      <input
+                        autoComplete='off'
+                        id="label"
+                        className="form-input w-full"
+                        type="text"
+                        required
+                        onInput={(e) => handleInput(e.target.value, 'label')}
+                        value={addedValues.label}
+                        onClick={openHint}
+                        onBlur={(e) => closeHint(e.relatedTarget)}
+                      />
+                      <div tabIndex='-1' className={`absolute w-full box-border bg-white flex flex-col gap-y-2 py-2 pl-2 border border-t-0 border-slate-200 rounded ${(propertyValues.length > 0) || 'hidden'}`}>
+                        <ul>
+                          {propertyValues.map((element, index) => (
+                            <li className='hover:text-indigo-600 cursor-pointer' key={index} onClick={() => selectHint(element)}>{element}</li>
+                          ))}
+                        </ul>
+                     </div>
                    </div>
-                    <div className="flex flex-row justify-between pt-[16px] pb-[23px] items-center border-b border-slate-200">
+                    <div className='my-3 z-10'>
+                      <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Value <span className="text-rose-500">*</span></label>
+                      <input
+                        autoComplete='off'
+                        id="value"
+                        className="form-input w-full"
+                        type="text"
+                        required
+                        onClick={() => setPropertyValues([])}
+                        onChange={(e) => changeAddedValues(e.target.value, 'value')}
+                        value={addedValues.value}
+                      />
+                    </div>
+                    <div className='z-10'>
+                      <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Seed <span className="text-rose-500">*</span></label>
+                      <input
+                        autoComplete='off'
+                        id="seed"
+                        className="form-input w-full"
+                        type="number"
+                        required
+                        onClick={() => setPropertyValues([])}
+                        onChange={(e) => changeAddedValues(e.target.value, 'seed')}
+                        value={addedValues.seed}
+                      />
+                    </div>
+                    <div className="flex flex-row z-10 justify-between pt-[18px] pb-[23px] items-center border-b border-slate-200">
                      <span className="block text-sm font-medium">Store data on blockchain</span>
                      <div className="flex items-center">
                        <div className="form-switch">
@@ -293,7 +292,7 @@ const Profile = observer (() => {
                      </div>
                    </div>
                    {/* Buttons */}
-                    <div className="flex flex-row justify-end gap-x-2 pt-[18px] pb-[14px] items-end">
+                    <div className="flex flex-row z-10 justify-end gap-x-2 pt-[18px] pb-[14px] items-end">
                      <button
                        className="btn-sm bg-white border-slate-200 hover:bg-slate-50 text-slate-600"
                        onClick={cancelAddPanel}
--- a/src/pages/digitalId/Verify.jsx
+++ b/src/pages/digitalId/Verify.jsx
@@ -1,83 +1,13 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
+import { sharedDataStore } from '../../store/sharedDataStore';
+import { observer } from 'mobx-react-lite';

-const Verify = (() => {
+const Verify = observer(() => {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [descriptionOpen, setDescriptionOpen] = useState(false);

-  const verifiedData = [
-    {
-      "date": "31.05.2022 10:48",
-      "fields": [
-        {
-          "name": "Residence",
-          "value": "United Kindom",
-          "hash1": "7234ABC3423423523457234ABC34234",
-          "hash2": "7234ABC3423423523457234ABC34234"
-        },
-        {
-          "name": "Document ID",
-          "value": "A1321313",
-          "hash1": "7234ABC3423423523457234ABC34234",
-          "hash2": "7234ABC3423423523457234ABC34234"
-        },
-        {
-          "name": 'Document ID',
-          "value": 'A3451313',
-          "hash1": '9584ABC3423423523457234ABC34234',
-          "hash2": '9584ABC3423423523457234ABC34234'
-        }
-      ]
-    },
-    {
-      "date": "31.05.2022 10:48",
-      "fields": [
-        {
-          "name": 'Residence',
-          "value": 'Holland',
-          "hash1": '1024ABC3423423523457234ABC34234',
-          "hash2": '1024ABC3423423523457234ABC34234'
-        },
-        {
-          "name": 'Document ID',
-          "value": 'B3451313',
-          "hash1": '7893ABC3423423523457234ABC34234',
-          "hash2": '7893ABC3423423523457234ABC34234'
-        },
-        {
-          "name": 'Document ID',
-          "value": 'A3451313',
-          "hash1": '7286ABC3423423523457234ABC34234',
-          "hash2": '7286ABC3423423523457234ABC34234'
-        },
-      ]
-    },
-    {
-      "date": "31.05.2022 10:48",
-      "fields": [
-        {
-          "name": 'Residence',
-          "value": 'China',
-          "hash1": '0000ABC3423423523457234ABC34234',
-          "hash2": '0000ABC3423423523457234ABC34234'
-        },
-        {
-          "name": 'Document ID',
-          "value": 'C3451313',
-          "hash1": '1230ABC3423423523457234ABC34234',
-          "hash2": '1230ABC3423423523457234ABC34234'
-        },
-        {
-          "name": 'Document ID',
-          "value": 'D3451313',
-          "hash1": '4483ABC3423423523457234ABC34234',
-          "hash2": '4483ABC3423423523457234ABC34234'
-        },
-      ]
-    }
-  ];
-
  return (
    <div className="flex h-screen overflow-hidden">
      {/* Sidebar */}
@@ -112,13 +42,10 @@ const Verify = (() => {
            </div>
            {/* Block */}
            <div className="flex flex-col gap-y-4">
-              {verifiedData.map((item, index) => (
+              {sharedDataStore.sharedData.map((item, index) => (
                <div key={index} className="w-[1095px] pl-5 pr-[13px] pb-8 bg-white border border-slate-200 rounded shadow-[0_4px_6px_-1px_rgba(5,23,42,0.08)]">
                  {/* Header */}
-                  <div className="flex justify-between items-center h-[42px]">
-                    <span className="font-normal text-descriptionSize text-slate-500" >
-                      Yesterday at {item.date.slice(-5)} AM
-                    </span>
+                  <div className="flex justify-end items-center h-[42px]">
                    {/* Buttons */}
                    <div className="flex gap-x-[6px]">
                      <div className="flex items-center">
@@ -131,9 +58,8 @@ const Verify = (() => {
                      </div>
                      <div className="flex items-center">
                        <button
-                            className={`text-slate-400 hover:text-slate-500 transform ${descriptionOpen && 'rotate-180'}`}
-                            aria-expanded={descriptionOpen}
-                            onClick={() => setDescriptionOpen(!descriptionOpen)}
+                          className={`text-slate-400 hover:text-slate-500 transform ${descriptionOpen && 'rotate-180'}`}
+                          aria-expanded={descriptionOpen}
                        >
                          <svg className="w-8 h-8 fill-current" viewBox="0 0 32 32">
                            <path d="M16 20l-5.4-5.4 1.4-1.4 4 4 4-4 1.4 1.4z" />
@@ -144,15 +70,13 @@ const Verify = (() => {
                  </div>
                  {/* Content */}
                  <div className='flex flex-col gap-y-[9px]'>
-                    {item.fields.map((elem, index) => (
+                    {item.data.map((elem, index) => (
                      <div key={index} className='flex gap-y-2'>
                        <div className='flex flex-col'>
                          <div className='flex flex-row items-center'>
-                            <span className='font-semibold text-slate-800 text-base w-[204px]'>{elem.value}</span>
-                            <span className='font-semibold text-descriptionSize text-slate-600 underline w-80'>{elem.hash1}</span>
-                            <span className='font-semibold text-descriptionSize text-slate-600 underline w-80'>{elem.hash2}</span>
+                            <span className='font-inter font-semibold text-slate-800 text-base w-[204px]'>{elem.label}</span>
+                            <span className='font-inter truncate font-semibold text-descriptionSize text-slate-600 underline w-[770px]'>{elem.value}</span>
                          </div>
-                          <span className='font-normal text-xxs'>{elem.name}</span>
                        </div>
                      </div>
                    ))}
--- a/src/store/sharedDataStore.js
+++ b/src/store/sharedDataStore.js
@@ -0,0 +1,66 @@
+import { makeAutoObservable, reaction } from "mobx";
+import { fetchWrapper } from "../shared/fetchWrapper";
+import { registrationStore } from './store';
+
+const labelMap = {
+  firstname: 'First name',
+  secondname: 'Second name',
+  gender: "Gender",
+  birthdate: "Birthdate",
+  placeofbirth: "Place of birth",
+  nationality: "Nationality",
+  nationalid: "National ID",
+  nationaldoctype: "National doctype",
+  nationaldocid: "National doc ID",
+  nationaldocissuedate: "National doc issue date",
+  nationaldocexpirydate: "National doc expiry date",
+  telephone: "Telephone",
+  twitter: "Twitter",
+  facebook: "Facebook",
+  instagram: "Instagram",
+  youtube: "Youtube",
+  wechat: "Wechat",
+  tiktok: "Tiktok",
+  linkedin: "Linkedin",
+  vk: "Vk",
+  github: "Github",
+  telegram: "Telegram",
+  qq: "Qq",
+  snapchat: "Snapchat",
+  reddit: "Reddit"
+};
+
+class SharedDataStore{
+  _keysArray = [];
+  _sharedData = [];
+
+  constructor() {
+    makeAutoObservable(this);
+
+    reaction(() => ({data: registrationStore.keysArray}), ({data}) => {
+      this._keysArray = data;
+      this.fetchSharedData();
+    })
+  }
+
+  fetchSharedData() {
+    this._keysArray.forEach((elem) => fetchWrapper.get(`http://3.125.47.101/api/data/shared/${elem}`).then((res) => this.changeSharedData(res)))
+  };
+
+  changeSharedData(incomingData) {
+    this._sharedData.push({
+      data: incomingData.data,
+    })
+  }
+
+  get sharedData() {
+    return this._sharedData.map(elem => ({
+      data: elem.data.map(item => ({
+        label: labelMap[item.label],
+        value: item.value,
+      }))
+  }));
+  };
+}
+
+export const sharedDataStore = new SharedDataStore();
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -12,6 +12,8 @@ class Store {

  _userData = {}

+  _keysArray = []
+  
  _transactionsInfo = {}

  constructor() {
@@ -19,31 +21,42 @@ class Store {

    this.fetchNodeInfo()

-    reaction(() => this.tokenKey, () => this.fetchNewAccountData())
+    reaction(() => this.tokenKey, () => this.getData())
    reaction(() => this.tokenKey, () => this.fetchTransactionsInfo())
  };

+  getData() {
+    this.fetchNewAccountData();
+    this.fetchKeysArray();
+  }
+
  fetchNewAccountData() {
-    fetchWrapper.getAuth('http://3.125.47.101/api/data/private', {
+    fetchWrapper.getAuth('data/private', {
      networkIdentifier: this.nodeInfo.networkIdentifier,
      lastBlockID: this.nodeInfo.lastBlockID
    }).then((res) => this.userDataFetchChange(res))
  }

  pushAccountData(data=this.accountData) {
-    fetchWrapper.postAuth('http://3.125.47.101/api/data/private', {
+    fetchWrapper.postAuth('data/private', {
      networkIdentifier: this.nodeInfo.networkIdentifier,
      lastBlockID: this.nodeInfo.lastBlockID
    }, [...this.encryptAccountData(data)])
        .then(()=>this.fetchNewAccountData())
  }

+  fetchKeysArray() {
+    fetchWrapper.getAuth('data/shared/', {
+      networkIdentifier: this.nodeInfo.networkIdentifier,
+      lastBlockID: this.nodeInfo.lastBlockID
+    }).then((res) => this.keysArrayFetchChange(res))
+  }
+
  fetchTransactionsInfo() {
    fetchWrapper.getAuth(`http://3.125.47.101/api/account/transactions/${this.accountMadeTransaction}?moduleID=1001&assetID=11`, {
      networkIdentifier: this.nodeInfo.networkIdentifier,
      lastBlockID: this.nodeInfo.lastBlockID
-    })
-        .then((res)=>this.saveInfoTransactions(res))
+    }).then((res)=>this.saveInfoTransactions(res))
  }

  get accountMadeTransaction() {
@@ -54,8 +67,16 @@ class Store {
    this._userData = res;
  }

+  keysArrayFetchChange(res) {
+    this._keysArray = res.data;
+  }
+
+  get keysArray() {
+    return this._keysArray;
+  }
+
  get userData() {
-    return this._userData
+    return this._userData;
  }

  get transactionsInfo() {
@@ -130,7 +151,6 @@ class Store {
    const sign = cryptography.signDataWithPassphrase(Buffer.from(stringToSign, 'hex'), this.passPhrase).toString('hex')
    return this.pubKey + ':' +sign
  }
-
 };

 export const registrationStore = new Store();
--- a/src/tailwind.config.js
+++ b/src/tailwind.config.js
@@ -17,7 +17,7 @@ module.exports = {
        blue: '2px solid rgba(0, 112, 244, 0.5)',
      },
      fontFamily: {
-        inter: ['Inter', 'sans-serif'],
+        sans: ['Inter', 'sans-serif'],
      },
      fontSize: {
        descriptionSize: ['0.75rem', { lineHeight: '1.25' }],
Author	SHA1	Message	Date
Daria Golova	911c13cb87	fixed url, font	2022-07-15 17:22:34 +03:00
kandrusyak	1e9830c8d4	fix merge	2022-07-15 12:10:06 +03:00
Kirill Andrusyak	a8a6355daa	Merge pull request #37 from franze6/DID-9 Интеграция страницы Verify с сервером	2022-07-15 12:09:26 +03:00
Kirill Andrusyak	444c94690b	Merge branch 'master' into DID-9	2022-07-15 12:09:19 +03:00
Kirill Andrusyak	67133c5414	Merge pull request #36 from franze6/DID-8 Интеграция страницы ValidationLog с сервером	2022-07-15 11:52:25 +03:00
Kirill Andrusyak	f58a94bf24	Merge pull request #35 from franze6/DID-7 Внесла правки на странице Profile	2022-07-15 11:51:01 +03:00
Daria Golova	2eeb39abc9	rendered the data in the component	2022-07-13 14:45:17 +03:00
Daria Golova	b9f795c0e4	done store for shared data	2022-07-12 16:56:44 +03:00
Daria Golova	47dfcf347c	added stacking context for the hint	2022-07-11 15:08:45 +03:00
Daria Golova	e837f7cc89	added onblur, fixed seed, moved default values	2022-07-11 15:08:45 +03:00