stashed

README.md

@@ -2,5 +2,7 @@
 
 * React Native uses javascriptCore which doesn't have modules that Web3 depends on
 * We must use `babel-preset-react-native-web3` as a workaround
-* We must use Web3 `^0.20.6`
+* We must use Web3 `^0.20.6` because v1.0 relies on "crypto" module
 * `truffle-contract` doesn't work even with `babel-preset-react-native-web3` so we must call contract methods using Web3 API
+* In order to connect uPort I had to add certain native capabilities. 
+  So I switched from Create React Native App & Expo to `react-native init`.

src/Rps.js

@@ -1,7 +1,11 @@
 import React from 'react'
 import { Root } from 'native-base'
+import { Provider } from 'react-redux'
 import { StackNavigator } from 'react-navigation'
+import { applyMiddleware, createStore } from 'redux'
+import promiseMiddleware from 'redux-promise-middleware'
 
+import reducer from './reducers'
 import EnterGameName from './screens/EnterGameName'
 import About from './screens/About'
 
@@ -18,8 +22,12 @@ const AppNavigator = StackNavigator(
   }
 )
 
+const store = createStore(reducer, applyMiddleware(promiseMiddleware()))
+
 export default () => (
   <Root>
-    <AppNavigator />
+    <Provider store={store}>
+      <AppNavigator />
+    </Provider>
   </Root>
 )

src/reducers.js

@@ -0,0 +1,9 @@
+import { combineReducers } from 'redux'
+
+import { reducer as uport } from './uport/uportActions'
+
+const appReducer = combineReducers({
+  uport
+})
+
+export default appReducer

src/screens/EnterGameName.js

@@ -1,32 +1,16 @@
 import React, { Component } from 'react'
 import { Text, Image } from 'react-native'
-
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
 import { Form, Item, Input, Button } from 'native-base'
+
 import rpsImage from '../../assets/rock-paper-scissors.png'
 import AppLayout from '../layout/AppLayout'
-import { getGameStatus } from '../utils/rpsApi'
+import { loadCredentials } from '../uport/uportActions'
 
 class EnterGameName extends Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      pending: false,
-      data: null,
-      error: null
-    }
-  }
-
-  async componentDidMount() {
-    this.setState({ pending: true })
-    try {
-      const status = await getGameStatus('a')
-      this.setState({ pending: false, data: status.toNumber() + '' })
-    } catch (e) {
-      this.setState({ pending: false, error: e + '' })
-    }
-  }
-
   render() {
+    // TODO: show loading, and uport screen if there are no credentials
     return (
       <AppLayout title="Create or join a game">
         <Image style={styles.image} source={rpsImage} />
@@ -38,15 +22,20 @@ class EnterGameName extends Component {
             <Text style={styles.submitBtn}>Submit</Text>
           </Button>
         </Form>
-        {this.state.pending && <Text>Loading...</Text>}
-        {!this.state.pending && !this.state.error && this.state.data && <Text>Data: {this.state.data}</Text>}
-        {this.state.error && <Text style={{ color: 'red' }}>{this.state.error}</Text>}
       </AppLayout>
     )
   }
 }
 
-export default EnterGameName
+const mapStateToProps = state => ({
+  credentials: state.uport.credentials
+})
+
+const mapDispatchToProps = dispatch => ({
+  actions: bindActionCreators({ loadCredentials }, dispatch)
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(EnterGameName)
 
 const styles = {
   image: {

src/screens/UportConnect.js

@@ -0,0 +1,18 @@
+import React, { Component } from 'react'
+import { Text } from 'react-native'
+
+import AppLayout from '../layout/AppLayout'
+
+class UportConnect extends Component {
+  render() {
+    return (
+      <AppLayout title="Connect via uPort">
+        <Text>
+          This app requires...
+        </Text>
+      </AppLayout>
+    )
+  }
+}
+
+export default UportConnect

src/uport/uportActions.js

@@ -0,0 +1,19 @@
+import { combineReducers } from 'redux'
+import makeTypesActionsReducer from '../utils/makeTypesActionsReducer'
+import { requestCredentials } from './uportApi'
+
+const { actions: loadCredentialsActions, reducer: credentials } = makeTypesActionsReducer(
+  'UPORT/GET_CACHED_CREDENTIALS',
+  requestCredentials
+)
+const { actions: requestCredentialsActions, reducer: reqCredentials } = makeTypesActionsReducer(
+  'UPORT/REQUEST_CREDENTIALS',
+  requestCredentials
+)
+
+export const actions = {
+  requestCredentials: requestCredentialsActions.asyncRequest,
+  getCachedCredentials: loadCredentialsActions.asyncRequest
+}
+
+export const reducer = combineReducers({ credentials, reqCredentials })

src/utils/uport.js → src/uport/uportApi.js

@@ -1,12 +1,27 @@
+import { AsyncStorage } from 'react-native'
 import configureUportConnect from 'react-native-uport-connect'
 
 class Uport {
+  credStorageKey = 'uport:credentials'
+
   constructor(config) {
     const { uport, MNID } = configureUportConnect(config)
     this.connection = uport
     this.MNID = MNID
   }
 
+  /**
+   * Loads previously requested credentials from AsyncStorage
+   */
+  async loadCredentials() {
+    const credentials = await AsyncStorage.getItem(this.credStorageKey)
+    return credentials ? JSON.parse(credentials) : null
+  }
+
+  /**
+   * Triggers Uport Request Credentials flow
+   * and saves them to AsyncStorage
+   */
   async requestCredentials() {
     var resp
     try {
@@ -19,7 +34,9 @@ class Uport {
         throw e
       }
     }
-    return { ...resp, ethAddress: this.MNID.decode(resp.address).address }
+    const credentials = { ...resp, ethAddress: this.MNID.decode(resp.address).address }
+    await AsyncStorage.setItem(this.credStorageKey, JSON.stringify(credentials))
+    return credentials
   }
 }