displaying qr code

package.json

@@ -13,6 +13,7 @@
     "react": "^15.4.2",
     "react-native": "0.40.0",
     "react-native-camera": "^0.5.1",
+    "react-native-qrcode": "^0.2.3",
     "react-native-router-flux": "^3.37.0",
     "react-native-tabs": "^1.0.9",
     "react-redux": "^5.0.2",

src/actions/transactions.js

-import { NEW_SCANNED_TX } from '../constants/TransactionActions'
+import { NEW_SCANNED_TX, SIGNED_TX } from '../constants/TransactionActions'
 
 export function newScannedTx(data) {
   return {
@@ -6,3 +6,10 @@ export function newScannedTx(data) {
     data: data,
   }
 }
+
+export function signedTx(data) {
+  return {
+    type: SIGNED_TX,
+    data: data,
+  }
+}

src/components/App.js

@@ -6,7 +6,6 @@ import { Actions, ActionConst, Router, Scene } from 'react-native-router-flux'
 import reducers from '../reducers'
 import TabIcon from './TabIcon'
 import QrScanner from '../containers/QrScanner'
-import Signer from '../containers/Signer'
 import Accounts from '../containers/Accounts'
 import SelectAccount from '../containers/SelectAccount'
 import NewAccount from '../containers/NewAccount'
@@ -14,6 +13,7 @@ import Send from '../components/Send'
 import Account from '../containers/Account'
 import ConfirmTransaction from '../containers/ConfirmTransaction'
 import { EnterPin, SetPin, ConfirmPin } from '../containers/Pin'
+import QrDisplay from '../containers/QrDisplay'
 
 const ConnectedRouter = connect()(Router)
 const store = createStore(reducers)
@@ -34,14 +34,17 @@ const scenes = Actions.create(
   <Scene key='root'>
     <Scene key='tabs' tabs style={styles.tabbar}>
       <Scene key='left' title='Scan QR' initial icon={TabIcon} navigationBarStyle={styles.navibar} titleStyle={styles.navibarTitle}>
-        <Scene key='scan' component={QrScanner} title='Scan QR' rightTitle="Scanned" onRight={() => Actions.confirm()} rightButtonTextStyle={styles.navibarTitle}/>
+        <Scene key='scan' component={QrScanner} title='Scan QR' rightTitle="confirmX"
+          onRight={() => Actions.confirm()} rightButtonTextStyle={styles.navibarTitle}/>
         <Scene key='confirm' component={ConfirmTransaction} title='Sign Tx'/>
         <Scene key='select' title='Select Account' component={SelectAccount}/>
         <Scene key='enterPin' title='Enter Pin' component={EnterPin}/>
+        <Scene key='display' title='QR Code' component={QrDisplay} rightTitle='Done'
+          onRight={() => Actions.popTo('left')} rightButtonTextStyle={styles.navibarTitle}/>
       </Scene>
       <Scene key='right' title='Accounts' icon={TabIcon} navigationBarStyle={styles.navibar} titleStyle={styles.navibarTitle}>
-        <Scene key='accounts' title='Accounts' component={Accounts} rightTitle="Add" onRight={() => Actions.add()}
-          rightButtonTextStyle={styles.navibarTitle}/>
+        <Scene key='accounts' title='Accounts' component={Accounts}
+          rightTitle="Add" onRight={() => Actions.add()} rightButtonTextStyle={styles.navibarTitle}/>
         <Scene key='add' component={NewAccount} title='Add Account'/>
         <Scene key='setPin' title='Set Pin' component={SetPin}/>
         <Scene key='confirmPin' title='Confirm Pin' component={ConfirmPin}/>

src/components/Scanned.js → src/components/QrView.js

@@ -2,18 +2,24 @@
 
 import React, { Component, PropTypes } from 'react'
 import { Text, View, StyleSheet } from 'react-native'
+import QRCode from 'react-native-qrcode'
 
-export default class Scanned extends Component {
+export default class QrView extends Component {
   static propTypes = {
-    transactions: PropTypes.shape({
-      pendingTx: PropTypes.string.isRequired,
-    }).isRequired
+    text: PropTypes.string.isRequired,
   }
 
   render() {
     return (
       <View style={styles.view}>
-        <Text>You scanned {this.props.transactions.pendingTx}</Text>
+        <View style={styles.rectangleContainer}>
+          <QRCode
+            value={this.props.text}
+            size={250}
+            bgColor='black'
+            fgColor='white'
+          />
+        </View>
       </View>
     )
   }
@@ -25,4 +31,10 @@ const styles = StyleSheet.create({
     marginTop: 60,
     marginBottom: 50,
   },
+  rectangleContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'transparent',
+  },
 })

src/constants/TransactionActions.js

 export const NEW_SCANNED_TX = 'TRANSACTION_ACTION_NEW_SCANNED_TX'
+export const SIGNED_TX = 'TRANSACTION_ACTION_SIGNED_TX'

src/containers/Account.js

@@ -15,7 +15,7 @@ const mapDispatchToProps = (dispatch, ownProps) => ({
 })
 
 const Account = connect(state => ({
-  account: state.accounts.selected.address,
+  account: state.accounts.selected,
 }), mapDispatchToProps)(AccountDetails)
 
 export default Account

src/containers/Accounts.js

@@ -5,8 +5,8 @@ import AccountsList from '../components/AccountsList'
 import { selectAccount } from '../actions/accounts'
 
 const mapDispatchToProps = (dispatch, ownProps) => ({
-  onAccountSelected: (address) => {
-    dispatch(selectAccount({address}))
+  onAccountSelected: (account) => {
+    dispatch(selectAccount(account))
     Actions.details()
   }
 })

src/containers/Pin.js

@@ -4,6 +4,7 @@ import { connect } from 'react-redux'
 import { Actions } from 'react-native-router-flux'
 import Pin from '../components/Pin'
 import { addAccount, setPin } from '../actions/accounts'
+import { signedTx } from '../actions/transactions'
 
 const mapStateToPropsEnterPin = (state, ownProps) => ({
   account: state.accounts.selected,
@@ -12,6 +13,8 @@ const mapStateToPropsEnterPin = (state, ownProps) => ({
 const mapDispatchToPropsEnterPin = (dispatch, ownProps) => ({
   onNextPressed: (pin, account) => {
     if (pin === account.pin) {
+      dispatch(signedTx('my super awesome data'))
+      Actions.display()
     } else {
       Alert.alert('Invalid pin')
     }

src/containers/QrDisplay.js

+'use strict'
+
+import React from 'react'
+import { connect } from 'react-redux'
+import QrView from '../components/QrView'
+
+const mapStateToProps = (state, ownProps) => ({
+	text: state.transactions.signedTx,
+})
+
+const QrDisplay = connect(mapStateToProps)(QrView)
+
+export default QrDisplay

src/containers/SelectAccount.js

@@ -5,8 +5,8 @@ import AccountsList from '../components/AccountsList'
 import { selectAccount } from '../actions/accounts'
 
 const mapDispatchToProps = (dispatch, ownProps) => ({
-  onAccountSelected: (address) => {
-    dispatch(selectAccount({address}))
+  onAccountSelected: (account) => {
+    dispatch(selectAccount(account))
     Actions.enterPin()
   }
 })

src/containers/Signer.js

-import React from 'react'
-import { connect } from 'react-redux'
-import Scanned from '../components/Scanned'
-
-const Signer = connect(state => ({
-  transactions: state.transactions
-}))(Scanned)
-
-export default Signer

src/reducers/transactions.js

-import { NEW_SCANNED_TX } from '../constants/TransactionActions'
+import { NEW_SCANNED_TX, SIGNED_TX } from '../constants/TransactionActions'
 
 const initialState = {}
 
@@ -8,6 +8,10 @@ export default function transactions(state = initialState, { type, data }) {
         return Object.assign({}, state, {
           pendingTx: data,
         })
+      case SIGNED_TX:
+        return Object.assign({}, state, {
+          signedTx: data,
+        })
       default:
         return state
   }