Merge pull request #93 from rsksmart/develop

v0.1.2
rsksmart · Oct 23, 2020 · 4124f15 · 4124f15
2 parents 4015a11 + a6611d7
commit 4124f15
Show file tree

Hide file tree

Showing 26 changed files with 349 additions and 7,251 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -0,0 +1,19 @@
+version: 2.1
+orbs:
+  node: circleci/[email protected]
+jobs:
+  build:
+    working_directory: ~/tmp
+    executor:
+      name: node/default
+    steps:
+      - checkout
+      - node/with-cache:
+          steps:
+            - run: yarn
+            - run: yarn lerna bootstrap
+
+workflows:
+    build:
+      jobs:
+        - build
diff --git a/README.md b/README.md
@@ -5,6 +5,17 @@
 <p align="middle">
     RIF Self-sovereign identity UI library.
 </p>
+<p align="middle">
+    <a href="https://circleci.com/gh/rsksmart/rif-identity-ui">
+        <img src="https://img.shields.io/circleci/build/github/rsksmart/rif-identity-ui?label=CircleCI" alt="npm" />
+    </a>
+    <a href="https://lgtm.com/projects/g/rsksmart/rif-identity-ui/alerts/">
+      <img src="https://img.shields.io/lgtm/alerts/github/rsksmart/rif-identity-ui" alt="alerts">
+    </a>
+    <a href="https://lgtm.com/projects/g/rsksmart/rif-identity-ui/context:javascript">
+      <img src="https://img.shields.io/lgtm/grade/javascript/github/rsksmart/rif-identity-ui">
+    </a>
+</p>
 
 User interface packages and applications enabling RIF Self-sovereign identity models.
 

diff --git a/apps/IdentityApp/package.json b/apps/IdentityApp/package.json
@@ -1,6 +1,6 @@
 {
   "name": "IdentityApp",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "private": true,
   "scripts": {
     "android": "react-native run-android",

diff --git a/apps/IdentityApp/src/Libraries/BackScreen/BackScreenComponent.tsx b/apps/IdentityApp/src/Libraries/BackScreen/BackScreenComponent.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
-import { StyleSheet, View, TouchableOpacity } from 'react-native';
+import { StyleSheet, ScrollView, TouchableOpacity, StyleProp } from 'react-native';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import * as RootNavigation from '../../AppNavigation';
 
 interface BackScreenComponentProps {
   children: React.ReactNode;
   visible?: boolean;
+  style?: StyleProp<any>;
   overrideBack?: {
     location: string;
     params?: {};
@@ -16,6 +17,7 @@ const BackScreenComponent: React.FC<BackScreenComponentProps> = ({
   children,
   overrideBack,
   visible = true,
+  style = {},
 }) => {
   const handleBack = () => {
     if (!overrideBack) {
@@ -26,14 +28,14 @@ const BackScreenComponent: React.FC<BackScreenComponentProps> = ({
   };
 
   return (
-    <View>
+    <ScrollView style={style}>
       {visible && (
         <TouchableOpacity style={styles.touchable} onPress={handleBack}>
           <MaterialCommunityIcons name="arrow-left" size={30} />
         </TouchableOpacity>
       )}
       {children}
-    </View>
+    </ScrollView>
   );
 };
 

diff --git a/apps/IdentityApp/src/Libraries/Modal/ModalComponent.tsx b/apps/IdentityApp/src/Libraries/Modal/ModalComponent.tsx
@@ -1,6 +1,6 @@
-import React, { useContext }  from 'react';
+import React, { useContext } from 'react';
 import ThemeContext, { ThemeInterface } from '@rsksmart/rif-theme';
-import { Modal, StyleSheet, View } from 'react-native';
+import { Modal, StyleSheet, View, Dimensions } from 'react-native';
 
 interface ModalComponentProps {
   visible: boolean;
@@ -35,7 +35,10 @@ const styles = StyleSheet.create({
     margin: 20,
     backgroundColor: 'white',
     borderRadius: 20,
-    padding: 35,
+    paddingTop: 25,
+    paddingBottom: 25,
+    paddingRight: 15,
+    paddingLeft: 15,
     alignItems: 'center',
     shadowColor: '#000',
     shadowOffset: {
@@ -45,6 +48,7 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.25,
     shadowRadius: 3.84,
     elevation: 5,
+    width: Math.round(Dimensions.get('window').width) - 45,
   },
 });
 

diff --git a/apps/IdentityApp/src/Libraries/PinInput/PinInputComponent.tsx b/apps/IdentityApp/src/Libraries/PinInput/PinInputComponent.tsx
@@ -1,4 +1,5 @@
-import React, { useState, useContext }  from 'react';
+import React, { useState, useContext } from 'react';
+import { multilanguage } from 'redux-multilanguage';
 import ThemeContext, { ThemeInterface } from '@rsksmart/rif-theme';
 import { StyleSheet, View, Text } from 'react-native';
 
@@ -8,9 +9,10 @@ interface PinButtonsProps {
   onSubmit: (pin: string) => {};
   hidePin: boolean;
   maxDigits: number;
+  strings: any;
 }
 
-const PinButtons: React.FC<PinButtonsProps> = ({ onSubmit, hidePin, maxDigits }) => {
+const PinButtons: React.FC<PinButtonsProps> = ({ onSubmit, hidePin, maxDigits, strings }) => {
   const { layout, typography }: ThemeInterface = useContext(ThemeContext);
   const [sequence, setSequence] = useState([]);
 
@@ -58,7 +60,7 @@ const PinButtons: React.FC<PinButtonsProps> = ({ onSubmit, hidePin, maxDigits })
 
       <View style={layout.row}>
         <View style={[layout.column1, styles.buttonRow]}>
-          <SquareButton title="Next" onPress={handleSubmit} />
+          <SquareButton title={strings.next} onPress={handleSubmit} />
         </View>
       </View>
     </>
@@ -80,4 +82,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default PinButtons;
+export default multilanguage(PinButtons);
diff --git a/apps/IdentityApp/src/features/credentialsRequest/components/RequestTypeComponent.tsx b/apps/IdentityApp/src/features/credentialsRequest/components/RequestTypeComponent.tsx
@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import ThemeContext, { ThemeInterface } from '@rsksmart/rif-theme';
 import { multilanguage } from 'redux-multilanguage';
-import { Dimensions, StyleSheet, ScrollView, View, TouchableOpacity, Text } from 'react-native';
+import { Dimensions, StyleSheet, View, TouchableOpacity, Text } from 'react-native';
 import { serverInterface, credentialTypes } from '../../../Providers/Issuers';
 import BackScreenComponent from '../../../Libraries/BackScreen/BackScreenComponent';
 
@@ -29,27 +29,26 @@ const RequestTypeComponent: React.FC<RequestTypeComponentProps> = ({
   };
 
   return (
-    <ScrollView style={layout.container}>
-      <BackScreenComponent
-        overrideBack={{ location: 'CredentialsFlow', params: { screen: 'CredentialsHome' } }}>
-        <View style={[layout.row, styles.row]}>
-          <View style={layout.column1}>
-            <Text style={typography.header1}>{strings.request_credential}</Text>
-            <Text style={typography.paragraph}>{strings.request_credential_explanation}</Text>
-            <View style={styles.credentialList}>
-              {server.credentialsOffered?.map((item: credentialTypes, index: number) => (
-                <TouchableOpacity
-                  key={item.name}
-                  style={[styles.credentialButton, index % 2 === 0 ? styles.odd : {}]}
-                  onPress={() => handlePress(item)}>
-                  <Text style={typography.paragraph}>{strings[item.name.toLowerCase()]}</Text>
-                </TouchableOpacity>
-              ))}
-            </View>
+    <BackScreenComponent
+      overrideBack={{ location: 'CredentialsFlow', params: { screen: 'CredentialsHome' } }}
+      style={layout.container}>
+      <View style={[layout.row, styles.row]}>
+        <View style={layout.column1}>
+          <Text style={typography.header1}>{strings.request_credential}</Text>
+          <Text style={typography.paragraph}>{strings.request_credential_explanation}</Text>
+          <View style={styles.credentialList}>
+            {server.credentialsOffered?.map((item: credentialTypes, index: number) => (
+              <TouchableOpacity
+                key={item.name}
+                style={[styles.credentialButton, index % 2 === 0 ? styles.odd : {}]}
+                onPress={() => handlePress(item)}>
+                <Text style={typography.paragraph}>{strings[item.name.toLowerCase()]}</Text>
+              </TouchableOpacity>
+            ))}
           </View>
         </View>
-      </BackScreenComponent>
-    </ScrollView>
+      </View>
+    </BackScreenComponent>
   );
 };
 

diff --git a/apps/IdentityApp/src/features/credentialsView/components/DetailsComponent.tsx b/apps/IdentityApp/src/features/credentialsView/components/DetailsComponent.tsx
@@ -1,21 +1,18 @@
 import React, { useState, useContext } from 'react';
 import ThemeContext, { ThemeInterface } from '@rsksmart/rif-theme';
-import { StyleSheet, ScrollView, Text, View } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
 import { multilanguage } from 'redux-multilanguage';
 
 import { Credential as RifCredential } from '@rsksmart/rif-id-core/src/reducers/credentials';
 import StatusIcon from './StatusIcon';
 import BackScreenComponent from '../../../Libraries/BackScreen/BackScreenComponent';
 import { SquareButton } from '../../../Libraries/Button';
-import ModalComponent from '../../../Libraries/Modal/ModalComponent';
 import ClaimsDataComponent from './ClaimsDataComponent';
 import DeleteCredentialComponent from './DeleteCredentialComponent';
 import { IssuedCredentialRequest } from '@rsksmart/rif-id-core/lib/reducers/issuedCredentialRequests';
 import { CredentialRequestInput } from 'daf-selective-disclosure';
 import { CopyButton } from '../../../Libraries/CopyButton';
-import QRCode from 'react-native-qrcode-svg';
-import LoadingComponent from '../../../Libraries/Loading/LoadingComponent';
-import MessageComponent from '../../../Libraries/Message/MessageComponent';
+import QRModal from './QRModal';
 
 interface DetailsComponentProps {
   getCredential: () => RifCredential;
@@ -77,80 +74,65 @@ const DetailsComponent: React.FC<DetailsComponentProps> = ({
   const claims = credential ? credential.credentialSubject.otherClaims : credentialRequest.claims;
 
   return (
-    <BackScreenComponent>
-      <ScrollView style={[layout.container, styles.mainScroll]}>
-        <View style={layout.row}>
-          <View style={layout.column1}>
-            <Text style={typography.header1}>
-              {strings[type.toLowerCase()]} <StatusIcon status={status} />
-            </Text>
-          </View>
+    <BackScreenComponent style={layout.container}>
+      <View style={layout.row}>
+        <View style={layout.column1}>
+          <Text style={typography.header1}>
+            {strings[type.toLowerCase()]} <StatusIcon status={status} />
+          </Text>
         </View>
-        <View style={layout.row}>
-          <View style={layout.column1}>
-            <View style={styles.details}>
-              <Text style={typography.paragraphBold}>{strings.status}:</Text>
-              <Text style={paragraphIndent}>
-                {strings[status.toLowerCase()]}
-                <StatusIcon status={status} />
-              </Text>
-
-              <ClaimsDataComponent claims={claims} />
-
-              <Text style={[typography.paragraphBold, styles.noMargin]}>{strings.issuer}:</Text>
-              <CopyButton value={issuer} />
-
-              <Text style={[typography.paragraphBold, styles.noMargin]}>{strings.subject}:</Text>
-              <CopyButton value={subject} />
-
-              {credential && (
-                <>
-                  <Text style={typography.paragraphBold}>{strings.issuance_date}:</Text>
-                  <Text style={styles.did}>
-                    {new Date(credential.issuanceDate).toLocaleString()}
-                  </Text>
-                  <Text style={typography.paragraphBold}>{strings.expiration_date}:</Text>
-                  <Text style={styles.did}>
-                    {new Date(credential.expirationDate).toLocaleString()}
-                  </Text>
-                </>
-              )}
-
-              {status === 'CERTIFIED' && (
-                <View style={styles.buttonView}>
-                  <SquareButton title="Show QR Code" onPress={handleQrClick} />
-                  <ModalComponent visible={showQr}>
-                    <View style={layout.column1}>
-                      <View style={styles.modalQr}>
-                        {!qrModalHash && !qrError && <LoadingComponent />}
-                        {qrModalHash && <QRCode value={qrModalHash} size={225} />}
-                        {qrError && <MessageComponent message={qrError} type="ERROR" />}
-                      </View>
-                      <SquareButton
-                        title={strings.close}
-                        variation="hollow"
-                        onPress={() => setShowQr(false)}
-                      />
-                    </View>
-                  </ModalComponent>
-                </View>
-              )}
-            </View>
-
-            <DeleteCredentialComponent
-              removeCredential={() => removeCredential(credential, credentialRequest)}
-            />
+      </View>
+      <View style={layout.row}>
+        <View style={layout.column1}>
+          <View style={styles.details}>
+            <Text style={typography.paragraphBold}>{strings.status}:</Text>
+            <Text style={paragraphIndent}>
+              {strings[status.toLowerCase()]}
+              <StatusIcon status={status} />
+            </Text>
+
+            <ClaimsDataComponent claims={claims} />
+
+            <Text style={[typography.paragraphBold, styles.noMargin]}>{strings.issuer}:</Text>
+            <CopyButton value={issuer} />
+
+            <Text style={[typography.paragraphBold, styles.noMargin]}>{strings.subject}:</Text>
+            <CopyButton value={subject} />
+
+            {credential && (
+              <>
+                <Text style={typography.paragraphBold}>{strings.issuance_date}:</Text>
+                <Text style={styles.did}>{new Date(credential.issuanceDate).toLocaleString()}</Text>
+                <Text style={typography.paragraphBold}>{strings.expiration_date}:</Text>
+                <Text style={styles.did}>
+                  {new Date(credential.expirationDate).toLocaleString()}
+                </Text>
+              </>
+            )}
+
+            {status === 'CERTIFIED' && (
+              <View style={styles.buttonView}>
+                <SquareButton title="Show QR Code" onPress={handleQrClick} />
+                <QRModal
+                  showQr={showQr}
+                  qrModalHash={qrModalHash}
+                  qrError={qrError}
+                  onClose={() => setShowQr(false)}
+                />
+              </View>
+            )}
           </View>
+
+          <DeleteCredentialComponent
+            removeCredential={() => removeCredential(credential, credentialRequest)}
+          />
         </View>
-      </ScrollView>
+      </View>
     </BackScreenComponent>
   );
 };
 
 const styles = StyleSheet.create({
-  mainScroll: {
-    marginBottom: 70,
-  },
   details: {
     paddingRight: 20,
     paddingLeft: 20,