fixing token list error and adding mini dapp code for DAOstack

App.js

@@ -13,7 +13,7 @@ import {
 } from 'react-native';
 
 import { createAppContainer, createMaterialTopTabNavigator, createStackNavigator } from 'react-navigation';
-import Apps, {Foam, Fork, Mintbase, Test} from './src/Apps'
+import Apps, {Foam, Fork, Mintbase, Test, DAOstack} from './src/Apps'
 import CameraScreen from './src/AliceCore/Screens/Camera';
 import Tokens from './src/AliceCore/Screens/Tokens';
 import MapboxGL from '@react-native-mapbox-gl/maps';
@@ -67,7 +67,7 @@ const AppTabNavigator = createMaterialTopTabNavigator({
   Tokens: {
     screen: Tokens,
     navigationOptions: {
-      tabBarLabel: 'Settings',
+      tabBarLabel: 'Tokens',
       tabBarIcon: ({ focused }) => (
         focused ? <Image source={require('./src/AliceAssets/tokens-icon-black.png')} style={{resizeMode: 'contain', width: 40}}/>
         : <Image source={require('./src/AliceAssets/tokens-icon-grey.png')} style={{resizeMode: 'contain', width: 40}}/>
@@ -117,6 +117,7 @@ const MainApp = createStackNavigator({
   Apps: { screen: AppTabNavigator },
   Fork: { screen: Fork },
   Foam: { screen: Foam },
+  DAOstack: { screen: DAOstack },
   Test: { screen: Test },
   Mintbase: { screen: Mintbase },
 }, {

src/AliceComponents/Token.js

@@ -47,7 +47,7 @@ export default class Token extends Component<Props> {
           }
           <View style={{alignItems: 'flex-start', justifyContent: 'space-around'}}>
             <Text>{tokenInfo.name}</Text>
-            <Text>{(parseInt(token.balance)/Math.pow(10, parseInt(tokenInfo.decimals))).toFixed(2)} {tokenInfo.symbol.substring(0, 4)}</Text>
+            <Text>{(parseInt(token.balance)/Math.pow(10, parseInt(tokenInfo.decimals))).toFixed(4)} {tokenInfo.symbol.substring(0, 4)}</Text>
           </View>
         </Animated.View>
       </TouchableWithoutFeedback>

src/AliceCore/Screens/Tokens.js

@@ -9,7 +9,8 @@ import {
   Image,
   View,
   Dimensions,
-  TouchableOpacity
+  TouchableOpacity,
+  Animated
 } from "react-native";
 import React from "react";
 import MapboxGL from "@react-native-mapbox-gl/maps";
@@ -46,7 +47,10 @@ export default class Tokens extends Component {
       cameraModalVisible: false,
       address: '',
       addressStatus: 'unresolved',
-      inputAddress: ''
+      inputAddress: '',
+      ethBalance: 0,
+      animatePress: new Animated.Value(1),
+      amount: 0
     };
 
   }
@@ -55,8 +59,16 @@ export default class Tokens extends Component {
     this.getTokenInfo();
     this.getNFTInfo();
     this.setState({address: await Wallet.getAddress()})
+    this.getBalance()
   }
 
+  getBalance = async () => {
+    const ethBalance = await Wallet.getBalance();
+    this.setState({ethBalance})
+  }
+
+
+
   getTokenInfo = async () => {
     let data = null;
     var xhr = new XMLHttpRequest();
@@ -84,6 +96,10 @@ export default class Tokens extends Component {
     this.setState({tokenModalVisible: !this.state.tokenModalVisible})
   };
 
+  setTokenAmount = (amount) => {
+    this.setState({amount})
+  }
+
   getNFTInfo = async () => {
     let data = null;
     var xhr = new XMLHttpRequest();
@@ -148,7 +164,23 @@ export default class Tokens extends Component {
         </View>
         <ScrollView style={{flex: 1, width: '100%', padding: 10, backgroundColor: 'transparent'}}>
           <Text style={{fontWeight: '600', fontSize: 18}}>Tokens</Text>
-          {this.state.tokens.length > 0 && this.state.tokens.map((token, i) => {
+          <TouchableWithoutFeedback>
+            <Animated.View  style={{...styles.tokenBox, transform: [
+                {
+                  scale: this.state.animatePress
+                }
+              ]}}>
+              <View style={styles.tokenContainer}>
+                <Image source={require('../../AliceAssets/ethereum.png')} style={styles.tokenImage}/>
+              </View>
+
+              <View style={{alignItems: 'flex-start', justifyContent: 'space-around'}}>
+                <Text>Ethereum</Text>
+                <Text>{parseFloat(this.state.ethBalance).toFixed(4)} ETH</Text>
+              </View>
+            </Animated.View>
+          </TouchableWithoutFeedback>
+          {this.state.tokens && this.state.tokens.map((token, i) => {
             const {tokenInfo} = token;
             if (tokenInfo.name === "") return;
             return (
@@ -184,13 +216,16 @@ export default class Tokens extends Component {
             </ScrollView>
           </View>
           <View style={{width: '100%', backgroundColor: 'white', padding: 5, borderRadius: 15, alignItems: 'center', justifyContent: 'center'}}>
-            <View style={{width: '100%', height: 50, backgroundColor: 'rgba(0,0,0,0.1)', padding: 5, borderRadius: 15, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between'}}>
+            <View style={{width: '100%', height: 50, marginBottom: 10, backgroundColor: 'rgba(0,0,0,0.1)', padding: 5, borderRadius: 15, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between'}}>
               <TouchableOpacity onPress={() => this.setState({cameraModalVisible: !cameraModalVisible})}>
                 <Image source={require('../../AliceAssets/cam-icon-black.png')} style={{width: 30, resizeMode: 'contain', marginRight: 5}}/>
               </TouchableOpacity>
-              <TextInput autoCapitalize={false} style={{flex: 1, paddingRight: 5}} placeholder="Enter address or ENS" onChangeText={this.resolveAddress} value={this.state.inputAddress}/>
+              <TextInput autoCorrect={false} autoCapitalize={false} style={{flex: 1, paddingRight: 5}} placeholder="Enter address or ENS" onChangeText={this.resolveAddress} value={this.state.inputAddress}/>
               {this.renderVerification()}
             </View>
+            <View style={{width: '100%', height: 50, backgroundColor: 'rgba(0,0,0,0.1)', padding: 5, borderRadius: 15, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between'}}>
+              <TextInput keyboardType={'numeric'} autoCorrect={false} autoCapitalize={false} style={{flex: 1, paddingRight: 5}} placeholder="Enter amount to send" onChangeText={this.setTokenAmount} value={this.state.amount}/>
+            </View>
           </View>
 
         </Modal>
@@ -248,6 +283,33 @@ const styles = StyleSheet.create({
     padding: 15,
     backgroundColor: 'white',
     borderRadius: 25,
-  }
+  },
+  tokenBox: {
+    flexDirection: 'row',
+    width: '100%',
+    margin: 8,
+
+  },
+  tokenContainer: {
+    backgroundColor: '#ffffff',
+    height: 50,
+    width: 50,
+    borderRadius: 25,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 10,
+    shadowColor: '#212121',
+    shadowOffset: {
+      width: 0,
+      height: 3,
+    },
+    shadowRadius: 10,
+    shadowOpacity: 0.1,
 
+  },
+  tokenImage: {
+    height: 30,
+    width: 30,
+    resizeMode: 'contain',
+  },
 });

src/AliceSDK/Web3/index.js

@@ -23,23 +23,24 @@ const getBalance = async () => {
 
 const sendTransaction = async ({to, value, data}) => {
   try {
-    return await NativeModules.WalletModule.sendTransaction(to, value, data);
+    return await NativeModules.WalletModule.sendTransaction(to, '0x11e7ee486f8003', '0x454a2ab300000000000000000000000000000000000000000000000000000000000d4f2a');
   } catch(e) {
     return "Send transaction failed with error: " + e
   }
 };
 
 const sendTransactionWithDapplet = async ({to, value, data}) => {
   try {
-    return await NativeModules.WalletModule.sendTransactionWithDapplet(to, value, data);
+    return await NativeModules.WalletModule.sendTransactionWithDapplet(to, ethers.utils.formatBytes32String(value), ethers.utils.formatBytes32String(data));
   } catch(e) {
     return "Send transaction failed with error: " + e
   }
 };
 
 const signTransaction = async ({to, value, data}) => {
   try {
-    return await NativeModules.WalletModule.signTransaction(to, value, data);
+    console.log(to);
+    return await NativeModules.WalletModule.signTransaction(to, '0x11e7ee486f8003', '0x454a2ab300000000000000000000000000000000000000000000000000000000000d4f2a');
   } catch(e) {
     return "Sign transaction failed with error: " + e
   }
@@ -63,7 +64,7 @@ const sendToken = () => {
 
 const write = async ({contractAddress, abi, functionName, parameters, value, data}) => {
   try {
-    return await NativeModules.ContractModule.write(contractAddress, JSON.stringify(abi), functionName, parameters, value, data);
+    return await NativeModules.ContractModule.write(contractAddress, JSON.stringify(abi), functionName, parameters, ethers.utils.formatBytes32String(value), ethers.utils.formatBytes32String(data));
   } catch(e) {
     return "Write to contract failed with error: " + e
   }

src/Apps/DAOstack/Components/Modal.js

@@ -0,0 +1,24 @@
+import Modal from "react-native-modal";
+import React, {Component} from "react";
+import { StyleSheet } from "react-native";
+
+export default class ModalComponent extends Component<Props> {
+  state = {
+    isVisible: false,
+    pin: ''
+  };
+
+  render() {
+    return (
+      <Modal isVisible={this.props.isVisible} onBackdropPress={this.props.onBackdropPress} style={styles.modal} animationIn={'slideInUp'} animationOut={'slideOutDown'}>
+        {this.props.children}
+      </Modal>
+    )
+  }
+
+}
+const styles = StyleSheet.create({
+  modal: {
+    margin: 0,
+  },
+});

src/Apps/DAOstack/Components/Modalize.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import Modalize from 'react-native-modalize';
+
+export default class ModalizeModal extends React.PureComponent {
+
+  modal = React.createRef();
+
+  renderContent = () => (
+    <View style={s.content}>
+      <Text style={s.content__heading}>Article title</Text>
+      <Text style={s.content__paragraph}>rkslajnf  ndg dnfgkjnsdkjgndlkjngdjkf ngjkd ngjkl ndflg jkndfj ngdlkj nglsdfkjn gfkdjn gjdkfn gkdjfn ldkjn fslkjndfgkjs ndklgjn dfkjn gkjdfn gkdjfn glkjdnf glkjsnglkjn slkj ngkj nsdfgkj nsdfkj gnkdfjn gkjdsn gkljsn gjkfdn glkj nsgjkldf ngsljk ndfg</Text>
+    </View>
+  );
+
+  onClosed = () => {
+    const { onClosed } = this.props;
+
+    if (onClosed) {
+      onClosed();
+    }
+  };
+
+  openModal = () => {
+    if (this.modal.current) {
+      this.modal.current.open();
+    }
+  };
+
+  render() {
+    return (
+      <Modalize
+        ref={this.modal}
+        onClosed={this.onClosed}
+        handlePosition="outside"
+        adjustToContentHeight
+      >
+        {this.props.children}
+      </Modalize>
+    );
+  }
+}
+
+const s = StyleSheet.create({
+  content: {
+    padding: 15,
+  },
+
+  content__heading: {
+    marginVertical: 10,
+
+    fontSize: 24,
+    fontWeight: '600',
+    color: '#333',
+  },
+
+  content__paragraph: {
+    fontSize: 15,
+    fontWeight: '200',
+    lineHeight: 22,
+    color: '#666',
+  },
+
+  modal: {
+    margin: 20,
+
+    backgroundColor: '#cac9dd',
+    borderRadius: 20,
+
+    shadowOpacity: 0,
+  },
+
+  overlay: {
+    backgroundColor: 'rgba(41, 36, 107, 0.9)',
+  },
+
+  handle: {
+    width: 150,
+
+    backgroundColor: '#b0afbc',
+  },
+});