feat: add contact url in qr codes

client/react-native/android/app/build.gradle

@@ -152,6 +152,7 @@ android {
 }
 
 dependencies {
+    compile project(':react-native-svg')
     compile project(':react-native-restart')
     compile project(':react-native-exception-handler')
     compile project(':react-native-vector-icons')

client/react-native/android/app/src/main/java/chat/berty/main/MainApplication.java

@@ -3,6 +3,7 @@
 import android.app.Application;
 
 import com.facebook.react.ReactApplication;
+import com.horcrux.svg.SvgPackage;
 import com.avishayil.rnrestart.ReactNativeRestartPackage;
 import com.masteratul.exceptionhandler.ReactNativeExceptionHandlerPackage;
 import com.oblador.vectoricons.VectorIconsPackage;
@@ -32,6 +33,7 @@ public boolean getUseDeveloperSupport() {
         protected List<ReactPackage> getPackages() {
             return Arrays.<ReactPackage>asList(
                 new MainReactPackage(),
+            new SvgPackage(),
             new ReactNativeRestartPackage(),
             new ReactNativeExceptionHandlerPackage(),
                 new CorePackage(),

client/react-native/android/settings.gradle

@@ -1,4 +1,6 @@
 rootProject.name = 'Berty'
+include ':react-native-svg'
+project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android')
 include ':react-native-restart'
 project(':react-native-restart').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-restart/android')
 include ':react-native-exception-handler'

client/react-native/common/components/Library/PublicKeyWithActions.js

@@ -1,16 +1,18 @@
-import { ScrollView, TextInput, Platform, Clipboard } from 'react-native'
+import { ScrollView, TextInput, Platform, Clipboard, TouchableNativeFeedback, TouchableOpacity } from 'react-native'
 import { btoa } from 'b64-lite'
 import React, { PureComponent } from 'react'
 
 import { Button, Flex, TextInputMultilineFix, Text } from './index'
 import { RelayContext } from '../../relay'
 import { colors } from '../../constants'
 import {
-  extractPublicKeyFromId,
+  extractPublicKeyFromId, makeShareableUrl,
   shareLinkOther,
   shareLinkSelf,
 } from '../../helpers/contacts'
 import { marginTop, padding, rounded, textTiny } from '../../styles'
+import QRGenerator from './QRGenerator'
+import { ThemeProvider, ButtonGroup } from 'react-native-elements'
 
 const CopyKeyButton = ({ id }) => (
   <ActionButton
@@ -75,6 +77,7 @@ export default class PublicKeyWithActions extends PureComponent {
         overrideDisplayName: '',
         overrideDisplayStatus: '',
       },
+      mode: props.mode || 'key',
     }
 
     if (missingInitialData && props.data !== undefined) {
@@ -117,6 +120,7 @@ export default class PublicKeyWithActions extends PureComponent {
     } = this.props
     const {
       contact: { id, displayName },
+      mode,
     } = this.state
 
     let errors = []
@@ -126,52 +130,83 @@ export default class PublicKeyWithActions extends PureComponent {
       // noop
     }
 
+    const modeButtons = [
+      { element: () => <Text icon={'edit'} big color={mode === 'key' ? colors.white : colors.grey1} /> },
+      {
+        element: () => <Text icon={'material-qrcode-scan'} big
+          color={mode === 'qrcode' ? colors.white : colors.grey1} />,
+      },
+    ]
+
     return (
       <ScrollView>
         <Flex.Rows style={[padding]} align='center'>
-          <TextInput
-            placeholder={'Contact name (optional)'}
-            onChangeText={displayName =>
-              this.setState({ contact: { ...this.state.contact, displayName } })
-            }
-            value={displayName}
-            style={[
-              {
-                backgroundColor: colors.grey7,
-                color: colors.black,
-                textAlign: 'left',
-                width: 330,
-                flex: 0,
-                ...(Platform.OS === 'web' ? { outline: 'none' } : {}),
-              },
-              padding,
-              rounded,
-            ]}
-          />
-          <TextInputMultilineFix
-            style={[
-              {
-                width: 330,
-                height: 165,
-                backgroundColor: colors.grey7,
-                color: colors.black,
-                flexWrap: 'wrap',
-                fontFamily: Platform.OS === 'ios' ? 'Courier' : 'monospace',
-              },
-              textTiny,
-              padding,
-              marginTop,
-              rounded,
-            ]}
-            multiline
-            placeholder='Type or copy/paste a berty user public key here'
-            value={id}
-            onChangeText={id =>
-              this.setState({ contact: { ...this.state.contact, id } })
-            }
-            editable={!readOnly}
-            selectTextOnFocus
-          />
+          <Flex.Cols style={{ width: 330 }}>
+            <TextInput
+              placeholder={'Contact name (optional)'}
+              onChangeText={displayName =>
+                this.setState({ contact: { ...this.state.contact, displayName } })
+              }
+              value={displayName}
+              style={[
+                {
+                  backgroundColor: colors.grey7,
+                  color: colors.black,
+                  textAlign: 'left',
+                  flex: 1,
+                  ...(Platform.OS === 'web' ? { outline: 'none' } : {}),
+                },
+                padding,
+                rounded,
+              ]}
+            />
+            {/* TODO: Use a lighter button group impl? */}
+            {readOnly
+              ? <ThemeProvider theme={{ colors: { primary: colors.blue } }}>
+                <ButtonGroup
+                  onPress={() => this.setState({ mode: mode === 'key' ? 'qrcode' : 'key' })}
+                  selectedIndex={mode === 'key' ? 0 : 1}
+                  buttons={modeButtons}
+                  containerStyle={{ height: 32, flex: 1 }}
+                  selectedBackgroundColor={colors.green}
+                  component={Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity}
+                />
+              </ThemeProvider>
+              : null}
+          </Flex.Cols>
+          {(!readOnly || mode === 'key')
+            ? <TextInputMultilineFix
+              style={[
+                {
+                  width: 330,
+                  height: 248,
+                  backgroundColor: colors.grey7,
+                  color: colors.black,
+                  flexWrap: 'wrap',
+                  fontFamily: Platform.OS === 'ios' ? 'Courier' : 'monospace',
+                },
+                textTiny,
+                padding,
+                marginTop,
+                rounded,
+              ]}
+              multiline
+              placeholder='Type or copy/paste a berty user public key here'
+              value={id}
+              onChangeText={id =>
+                this.setState({ contact: { ...this.state.contact, id } })
+              }
+              editable={!readOnly}
+              selectTextOnFocus
+            />
+            : null}
+          {readOnly && mode === 'qrcode'
+            ? <QRGenerator
+              value={makeShareableUrl({ id, displayName })}
+              size={248}
+              style={[marginTop]} />
+            : null // TODO: implement camera
+          }
 
           {shareButton ? (
             <ShareKeyButton id={id} displayName={displayName} self={self} />

client/react-native/common/components/Library/QRGenerator.js

@@ -0,0 +1,9 @@
+import React  from 'react'
+import QRCode from 'react-native-qrcode-svg'
+import { View } from 'react-native'
+
+export default ({ value, size, style }) => <>
+  <View style={[{ width: size, height: size }, ...(style || [])]}>
+    <QRCode size={size} value={value} />
+  </View>
+</>

client/react-native/common/components/Screens/Contacts/Add/ByQRCode.js

@@ -5,7 +5,7 @@ import { colors } from '../../../../constants'
 import { Flex, Screen, Button } from '../../../Library'
 import { padding, paddingVertical, borderBottom } from '../../../../styles'
 import { RelayContext } from '../../../../relay'
-import QRGenerator from '../../../Library/QRGenerator/QRGenerator'
+import QRGenerator from '../../../Library/QRGenerator'
 import QRReader from '../../../Library/QRReader/QRReader'
 
 // TODO: get contact with status == 'myself' to get real id

client/react-native/common/components/Screens/Settings/MyAccount/MyQRCode.js

@@ -1,69 +1,24 @@
 import React, { PureComponent } from 'react'
-import { Clipboard } from 'react-native'
 import { colors } from '../../../../constants'
-import { Flex, Screen, Button, Header } from '../../../Library'
-import { padding, paddingVertical } from '../../../../styles'
-import QRGenerator from '../../../Library/QRGenerator/QRGenerator'
-import { extractPublicKeyFromId } from '../../../../helpers/contacts'
+import { Screen, Header, PublicKeyWithActions } from '../../../Library'
+import { paddingVertical } from '../../../../styles'
 
 export default class MyQRCode extends PureComponent {
   static navigationOptions = ({ navigation }) => ({
     tabBarVisible: false,
     header: <Header navigation={navigation} title='My QR code' backBtn />,
   })
 
-  state = {
-    myID:
-      'MEkwEwYHKoZIzj0CAQYIKoZIzj0DAQMDMgAE+Y+qPqI3geo2hQH8eK7Rn+YWG09TejZ5QFoj9fmxFrUyYhFap6XmTdJtEi8myBmW',
-    logo: require('../../../../static/img/logo-border.png'),
-  }
-
   share = () => {
     console.error('share: not implemented')
   }
 
   render () {
-    const { logo } = this.state
-    const { id } = this.props.navigation.getParam('data')
-    const myID = extractPublicKeyFromId(id)
+    const { id, displayName } = this.props.navigation.getParam('data')
 
     return (
       <Screen style={[{ backgroundColor: colors.white }, paddingVertical]}>
-        <Flex.Rows style={[padding]} align='center'>
-          <QRGenerator value={myID} logo={logo} size={256} logoWidth={100} />
-          <Flex.Cols align='start'>
-            <Flex.Rows>
-              <Button
-                icon={'share'}
-                background={colors.blue}
-                margin
-                padding
-                rounded={23}
-                height={24}
-                medium
-                middle
-                center
-                onPress={this.share}
-              >
-                SHARE THE KEY
-              </Button>
-              <Button
-                icon='copy'
-                background={colors.blue}
-                margin
-                padding
-                rounded={23}
-                height={24}
-                medium
-                middle
-                center
-                onPress={() => Clipboard.setString(myID)}
-              >
-                COPY THE CODE
-              </Button>
-            </Flex.Rows>
-          </Flex.Cols>
-        </Flex.Rows>
+        <PublicKeyWithActions initialKey={id} initialName={displayName} copyButton shareButton readOnly self mode={'qrcode'} />
       </Screen>
     )
   }