windingtree · kostysh · Apr 23, 2021 · Apr 23, 2021 · Apr 23, 2021
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "arbor-frontend",
-  "version": "1.6.4",
+  "version": "1.6.5",
   "private": true,
   "dependencies": {
     "@brainhubeu/react-carousel": "1.19.26",

diff --git a/src/assets/SvgComponents/dropFile.svg b/src/assets/SvgComponents/dropFile.svg
diff --git a/src/components/Dialog.js b/src/components/Dialog.js
@@ -15,7 +15,7 @@ const DialogContent = withStyles({
     '&:first-child': {
       paddingTop: '80px'
     },
-    maxWidth: '800px'
+    maxWidth: '900px'
   }
 })(MuiDialogContent);
 

diff --git a/src/components/DropTextFile.js b/src/components/DropTextFile.js
@@ -0,0 +1,156 @@
+import React, { createRef, useRef, useState } from 'react';
+import { useDropzone } from 'react-dropzone';
+import { Grid, TextField, Button, Typography } from '@material-ui/core';
+import dropFileIcon from '../assets/SvgComponents/dropFile.svg';
+
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles({
+    dropArea: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'stretch',
+        flexDirection: 'column',
+        background: '#FAFAFA',
+        border: '1px dashed #D9D9D9',
+        boxSizing: 'border-box',
+        borderRadius: '8px',
+        padding: '22px',
+        textAlign: 'center'
+    },
+    isDrag: {
+        background: 'rgba(250,250,250,0.5)',
+        border: '1px dashed #949494'
+    },
+    dropAreaTitle: {
+        fontWeight: 500,
+        fontSize: '14px',
+        lineHeight: '16px',
+        color: '#8F999F'
+    },
+    dropBottomText: {
+        fontWeight: 500,
+        fontSize: '14px',
+        lineHeight: '16px',
+        color: '#3E9693'
+    },
+    dropAreaIcon: {
+        width: '25px',
+        height: '25px',
+        margin: '20px',
+        backgroundImage: `url(${dropFileIcon})`,
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: 'contain'
+    },
+    textTitle: {
+        fontWeight: 'bold',
+        fontSize: '16px',
+        lineHeight: '20px',
+        color: '#8F999F',
+        margin: '26px 0 12px 0'
+    }
+});
+
+const DropTextFile = props => {
+    const inputRef = useRef();
+    const classes = useStyles();
+    const {
+        label,
+        name,
+        value = '',
+        helperText,
+        error,
+        onChange = () => {},
+        onBlur = () => {},
+        onError = () => {}
+    } = props;
+
+    const { getRootProps, getInputProps, isDragActive } = useDropzone({
+        accept: 'application/json',
+        multiple: false,
+        onDrop: async acceptedFiles => {
+            try {
+                window['file_0'] = acceptedFiles[0];
+                if (!acceptedFiles[0]) {
+                    throw new Error('Unable to get the file');
+                }
+                const file = acceptedFiles[0];
+                const reader = new FileReader();
+                reader.onload = () => {
+                    console.log(reader.result);
+                    const nativeTextareaSetter = Object
+                        .getOwnPropertyDescriptor(
+                            window.HTMLTextAreaElement.prototype,
+                            'value'
+                        ).set;
+                    nativeTextareaSetter.call(inputRef.current, reader.result);
+                    const inputEvent = new Event('input', { bubbles: true});
+                    console.log({inputRef});
+                    inputRef.current.dispatchEvent(inputEvent);
+                };
+                reader.onerror = () => {
+                    onError(reader.error);
+                };
+                reader.readAsText(file);
+            } catch (error) {
+                onError(error);
+            }
+        }
+    });
+
+    return (
+        <div {...getRootProps({
+            onClick: event => {
+                if (event.target.nodeName === 'TEXTAREA') {
+                    event.stopPropagation();
+                }
+            }
+        })}>
+            <input {...getInputProps()} />
+            <Grid
+                container
+                alignItems='stretch'
+                justify='center'
+                direction='column'
+            >
+                <Grid item>
+                    <div className={`${classes.dropArea} ${isDragActive ? classes.isDrag : ''}`}>
+                        <Typography className={classes.dropAreaTitle}>
+                            Drag a file here
+                        </Typography>
+                        <div className={classes.dropAreaIcon} />
+                        <Typography className={classes.dropBottomText}>
+                            or select a file from your computer
+                        </Typography>
+                    </div>
+                </Grid>
+                <Grid item>
+                    <Typography className={classes.textTitle}>
+                        or manually copypaste .json content here
+                    </Typography>
+                </Grid>
+                <Grid item xs>
+                    <TextField
+                        inputRef={inputRef}
+                        label={label}
+                        name={name}
+                        value={value}
+                        helperText={helperText}
+                        error={error}
+                        onChange={onChange}
+                        onBlur={onBlur}
+                        rows={3}
+                        variant='filled'
+                        required
+                        multiline
+                        fullWidth
+                    />
+                </Grid>
+            </Grid>
+
+        </div>
+    );
+};
+
+export default DropTextFile;
diff --git a/src/components/ProofsList.js b/src/components/ProofsList.js
@@ -94,7 +94,7 @@ const proofsTemplate = [
     {
         id: 'd1',
         type: 'domain',
-        title: 'Verify website',
+        title: 'Verify your website',
         pubTitle: 'Not verified',
         notes: [
             '1. Put evidence to your website using one of these methods',
@@ -123,22 +123,26 @@ const proofsTemplate = [
         id: 's2',
         type: 'social',
         subtype: 'twitter',
-        title: 'Prove your Twitter account',
+        title: 'Verify your Twitter account',
         pubTitle: 'Twitter account proof not submitted yet',
         notes: [
-            '!To prove that a Twitter account is yours copy this exactrly as it appears and create a post in your Twitter',
-            '>Verifying my ORG.ID identifier: [ORGID]'
+            '1. Post a tweet containing your ORGiD in the Twitter account that you want to verify',
+            '>Verifying my ORG.ID identifier: [ORGID]',
+            '2. Once you have the tweet, provide direct link to it here'
         ],
         icon: 'twitter'
     },
     {
         id: 't1',
         type: 'social',
         subtype: 't.me',
-        title: 'Prove your Telegram group',
+        title: 'Verify your Telegram Group',
         pubTitle: 'Telegram group account proof not submitted yet',
         notes: [
-            '!To prove that a Telegram group account is yours copy the content of proof generated by the ORGiD bot to the following form'
+            '1. Add ORGiD Bot (@ogrid_bot) to the Telegram Group you wan’t to verify',
+            '2. Once you have ORGiD Bot as a member of your Group send this command to the your group',
+            '>/proof [ORGID]',
+            '3. ORGiD Bot will do his magic with the command and create .json file that you need to upload here'
         ],
         icon: 'telegram',
         proofType: 'vc'

diff --git a/src/components/ProofsWizard.js b/src/components/ProofsWizard.js
@@ -14,15 +14,19 @@ import SaveButton from './buttons/Save';
 import CopyIdComponent from '../components/CopyIdComponent';
 
 const useStyles = makeStyles({
-    root: {
-
+    root: {},
+    formTitle: {
+        fontSize: '20px',
+        lineHeight: '20px',
+        color: '#3E9693',
+        marginBottom: '40px'
     },
     noteTitleNum: {
         fontWeight: 600,
         fontSize: '16px',
         color: '#42424F',
         marginBottom: '20px',
-        margin: '10px 0 0 -16px'
+        margin: '10px 0 0 0'
     },
     noteTitle: {
         fontWeight: 600,
@@ -120,6 +124,11 @@ const ProofForm = props => {
                     isSubmitting
                 }) => (
                     <form onSubmit={handleSubmit}>
+                        <div>
+                            <Typography className={classes.formTitle}>
+                                {proof.title}
+                            </Typography>
+                        </div>
                         <div>
                             {proof.notes.map((n, i) => {
 
@@ -170,10 +179,11 @@ const ProofForm = props => {
                         <div>
                             <TextField
                                 type='input'
-                                label='https://...'
+                                variant='filled'
+                                label='Link to evidence'
                                 name='proofUri'
                                 value={values['proofUri']}
-                                helperText={errors['proofUri'] && touched['proofUri'] ? errors['proofUri'] : undefined}
+                                helperText={errors['proofUri'] && touched['proofUri'] ? errors['proofUri'] : values['proofUri'] === '' ? 'Put direct link to the evidence here' : undefined}
                                 required={true}
                                 error={errors['proofUri'] && touched['proofUri']}
                                 onChange={handleChange}

diff --git a/src/components/VcProofsWizard.js b/src/components/VcProofsWizard.js
@@ -2,28 +2,30 @@ import React from 'react';
 import { connect } from 'react-redux';
 import DialogComponent from './Dialog';
 import { Formik } from 'formik';
-import {
-    TextField,
-    TextareaAutosize,
-    Typography
-} from "@material-ui/core";
+import { Typography } from "@material-ui/core";
 import { makeStyles } from '@material-ui/core/styles';
 import {
     addAssertion
 } from '../ducks/wizard';
+import DropTextFile from '../components/DropTextFile';
 import SaveButton from './buttons/Save';
 import CopyIdComponent from '../components/CopyIdComponent';
 
 const useStyles = makeStyles({
-    root: {
-        maxWidth: '700px'
+    root: {},
+    formTitle: {
+        fontSize: '20px',
+        lineHeight: '20px',
+        color: '#3E9693',
+        marginBottom: '40px'
     },
     noteTitleNum: {
         fontWeight: 600,
         fontSize: '16px',
+        lineHeight: '18px',
         color: '#42424F',
         marginBottom: '20px',
-        margin: '10px 0 0 -16px'
+        margin: '10px 0 0 0'
     },
     noteTitle: {
         fontWeight: 600,
@@ -66,6 +68,9 @@ const useStyles = makeStyles({
         margin: '20px 0 0 0',
         display: 'block',
         overflow: 'hidden'
+    },
+    dropTextWrapper: {
+        marginTop: '26px'
     }
 });
 
@@ -129,6 +134,11 @@ const ProofForm = props => {
                     isSubmitting
                 }) => (
                     <form onSubmit={handleSubmit}>
+                        <div>
+                            <Typography className={classes.formTitle}>
+                                {proof.title}
+                            </Typography>
+                        </div>
                         <div>
                             {proof.notes.map((n, i) => {
 
@@ -176,30 +186,23 @@ const ProofForm = props => {
                                 );
                             })}
                         </div>
-                        <div>
-                            <TextField
-                                className={classes.vcContentField}
-                                label='VC content'
+                        <div className={classes.dropTextWrapper}>
+                            <DropTextFile
+                                label='Verifiable Credential content'
                                 name='vc'
-                                multiline
-                                filled
-                                rows={5}
                                 value={values['vc']}
-                                helperText={errors['vc'] && touched['vc'] ? errors['vc'] : undefined}
-                                required={true}
+                                helperText={errors['vc'] && touched['vc'] ? errors['vc'] : values['vc'] === '' ? 'Put your credential content here' : undefined}
                                 error={errors['vc'] && touched['vc']}
                                 onChange={handleChange}
                                 onBlur={handleBlur}
-                                fullWidth
-                                autoFocus
                             />
                         </div>
                         <div className={classes.save}>
                             <SaveButton
                                 type='submit'
                                 disabled={isSubmitting}
                             >
-                                Save
+                                Done
                             </SaveButton>
                         </div>
                     </form>

diff --git a/src/components/buttons/Save.js b/src/components/buttons/Save.js
@@ -4,11 +4,11 @@ import Button from '@material-ui/core/Button';
 
 const useStyles = makeStyles({
     root: {
-        background: 'linear-gradient(180deg, #FFB36B -140%, #F58F7F 100%)',
-        border: '1px solid #F58F7F',
+        background: 'linear-gradient(180deg, #99D7C5 -25%, #3A9492 103.57%)',
+        border: '1px solid #99D7C5',
         boxShadow: '0px 2px 12px rgba(12, 64, 78, 0.1)',
         boxSizing: 'border-box',
-        borderRadius: 8,
+        borderRadius: '6px',
         color: 'white',
         width: 'auto',
         height: 40,