[WIP] Identity Verification

package.json

@@ -54,6 +54,9 @@
   "homepage": "https://gooddollar.org",
   "dependencies": {
     "@babel/preset-flow": "^7.0.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.22",
+    "@fortawesome/free-brands-svg-icons": "^5.10.2",
+    "@fortawesome/react-native-fontawesome": "^0.1.0",
     "@gooddollar/goodcontracts": "0.0.18",
     "@gooddollar/gun-appendonly": "^1.0.1",
     "@react-navigation/core": "^3.1.1",
@@ -94,6 +97,7 @@
     "react-native-qrcode-scanner": "^1.1.2",
     "react-native-recaptcha-v3": "0.0.16",
     "react-native-side-menu-gooddapp": "^2.0.2",
+    "react-native-svg": "^9.7.1",
     "react-native-vector-icons": "^6.6.0",
     "react-native-web": "^0.11.4",
     "react-native-web-webview": "^0.2.8",

src/components/common/form/InputRounded.js

@@ -3,6 +3,7 @@ import { TextInput, View } from 'react-native'
 import normalize from '../../../lib/utils/normalizeText'
 import { withStyles } from '../../../lib/styles'
 import Icon from '../view/Icon'
+import BrandIcon from '../view/BrandIcon'
 import ErrorText from './ErrorText'
 
 /**
@@ -13,7 +14,7 @@ import ErrorText from './ErrorText'
  * @param {React.Node} props.children
  * @returns {React.Node}
  */
-const InputRounded = ({ styles, theme, icon, iconSize, iconColor, error, onChange, ...inputProps }) => {
+const InputRounded = ({ styles, theme, brand, icon, iconSize, iconColor, error, onChange, ...inputProps }) => {
   const handleChange = event => {
     onChange(event.target.value)
   }
@@ -30,11 +31,20 @@ const InputRounded = ({ styles, theme, icon, iconSize, iconColor, error, onChang
           {...inputProps}
         />
         <View style={styles.suffixIcon}>
-          <Icon
-            color={error ? theme.colors.red : iconColor || theme.colors.gray50Percent}
-            name={icon}
-            size={iconSize}
-          />
+          {icon && !brand && (
+            <Icon
+              color={error ? theme.colors.red : iconColor || theme.colors.gray50Percent}
+              name={icon}
+              size={iconSize}
+            />
+          )}
+          {!icon && brand && (
+            <BrandIcon
+              color={error ? theme.colors.red : iconColor || theme.colors.gray50Percent}
+              name={brand}
+              size={iconSize}
+            />
+          )}
         </View>
       </View>
       {!inputProps.disabled && <ErrorText error={error} style={styles.errorMargin} />}

src/components/common/view/BrandIcon.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
+import { faFacebookSquare, faGithubSquare, faLinkedin, faTwitterSquare } from '@fortawesome/free-brands-svg-icons'
+
+const icons = {
+  twitter: faTwitterSquare,
+  facebook: faFacebookSquare,
+  github: faGithubSquare,
+  linkedin: faLinkedin,
+}
+
+const BrandIcon = ({ name, ...props }) => <FontAwesomeIcon icon={icons[name]} {...props} />
+
+export default BrandIcon

src/components/common/view/Icon/config.json

@@ -775,6 +775,24 @@
       "search": [
         "icons---settings---terms-of-use-–-1"
       ]
+    },
+    {
+      "uid": "4743b088aa95d6f3b6b990e770d3b647",
+      "css": "facebook",
+      "code": 62216,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "0f6a2573a7b6df911ed199bb63717e27",
+      "css": "github",
+      "code": 61595,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "906348dc798a0d42715cc97c875e3ac6",
+      "css": "twitter",
+      "code": 62212,
+      "src": "fontawesome"
     }
   ]
-}
+}