├── .watchmanconfig
├── .gitignore
├── assets
├── bg.png
├── bitcoin.png
├── cards.png
├── chart.png
├── check.png
├── money.png
├── receive.png
├── sungwoo.jpg
├── sungwoo.png
├── arrow-up.png
├── cash-buy.png
├── cash-sell.png
├── transfer.png
├── bitcoin-sign.png
├── bitone_logo.png
├── cute-bitcoin.png
├── cute-dollar.png
├── dollar-sign.png
├── bitcoin-square.png
├── cash-transfer.png
└── icons
│ ├── app-icon.png
│ └── loading-icon.png
├── screenshots
├── 1.PNG
├── 10.PNG
├── 11.PNG
├── 2.PNG
├── 3.PNG
├── 4.PNG
├── 5.PNG
├── 6.PNG
├── 7.PNG
├── 8.PNG
└── 9.PNG
├── .babelrc
├── jsconfig.json
├── constants
├── colors.js
└── data.json
├── package.json
├── app.json
├── README.md
├── components
├── button.js
├── rowitem.js
└── apicalls.js
├── App.js
└── screens
├── pay.js
├── fab.js
├── transactions.js
├── intro.js
├── qrcode.js
├── login.js
├── scanner.js
├── bitcoin.js
└── landing.js
/.watchmanconfig:
--------------------------------------------------------------------------------
1 | {}
2 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/**/*
2 | .expo/*
3 | npm-debug.*
4 |
--------------------------------------------------------------------------------
/assets/bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ggomaeng/hophacks2017/HEAD/assets/bg.png
--------------------------------------------------------------------------------
/assets/bitcoin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ggomaeng/hophacks2017/HEAD/assets/bitcoin.png
--------------------------------------------------------------------------------
/assets/cards.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ggomaeng/hophacks2017/HEAD/assets/cards.png
--------------------------------------------------------------------------------
/assets/chart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ggomaeng/hophacks2017/HEAD/assets/chart.png
--------------------------------------------------------------------------------
/assets/check.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ggomaeng/hophacks2017/HEAD/assets/check.png
--------------------------------------------------------------------------------
/assets/money.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ggomaeng/hophacks2017/HEAD/assets/money.png
--------------------------------------------------------------------------------
/assets/receive.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ggomaeng/hophacks2017/HEAD/assets/receive.png
--------------------------------------------------------------------------------
/assets/sungwoo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ggomaeng/hophacks2017/HEAD/assets/sungwoo.jpg
--------------------------------------------------------------------------------
/assets/sungwoo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ggomaeng/hophacks2017/HEAD/assets/sungwoo.png
--------------------------------------------------------------------------------
/screenshots/1.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ggomaeng/hophacks2017/HEAD/screenshots/1.PNG
--------------------------------------------------------------------------------
/screenshots/10.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ggomaeng/hophacks2017/HEAD/screenshots/10.PNG
--------------------------------------------------------------------------------
/screenshots/11.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ggomaeng/hophacks2017/HEAD/screenshots/11.PNG
--------------------------------------------------------------------------------
/screenshots/2.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ggomaeng/hophacks2017/HEAD/screenshots/2.PNG
--------------------------------------------------------------------------------
/screenshots/3.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ggomaeng/hophacks2017/HEAD/screenshots/3.PNG
--------------------------------------------------------------------------------
/screenshots/4.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ggomaeng/hophacks2017/HEAD/screenshots/4.PNG
--------------------------------------------------------------------------------
/screenshots/5.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ggomaeng/hophacks2017/HEAD/screenshots/5.PNG
--------------------------------------------------------------------------------
/screenshots/6.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ggomaeng/hophacks2017/HEAD/screenshots/6.PNG
--------------------------------------------------------------------------------
/screenshots/7.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ggomaeng/hophacks2017/HEAD/screenshots/7.PNG
--------------------------------------------------------------------------------
/screenshots/8.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ggomaeng/hophacks2017/HEAD/screenshots/8.PNG
--------------------------------------------------------------------------------
/screenshots/9.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ggomaeng/hophacks2017/HEAD/screenshots/9.PNG
--------------------------------------------------------------------------------
/assets/arrow-up.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ggomaeng/hophacks2017/HEAD/assets/arrow-up.png
--------------------------------------------------------------------------------
/assets/cash-buy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ggomaeng/hophacks2017/HEAD/assets/cash-buy.png
--------------------------------------------------------------------------------
/assets/cash-sell.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ggomaeng/hophacks2017/HEAD/assets/cash-sell.png
--------------------------------------------------------------------------------
/assets/transfer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ggomaeng/hophacks2017/HEAD/assets/transfer.png
--------------------------------------------------------------------------------
/assets/bitcoin-sign.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ggomaeng/hophacks2017/HEAD/assets/bitcoin-sign.png
--------------------------------------------------------------------------------
/assets/bitone_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ggomaeng/hophacks2017/HEAD/assets/bitone_logo.png
--------------------------------------------------------------------------------
/assets/cute-bitcoin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ggomaeng/hophacks2017/HEAD/assets/cute-bitcoin.png
--------------------------------------------------------------------------------
/assets/cute-dollar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ggomaeng/hophacks2017/HEAD/assets/cute-dollar.png
--------------------------------------------------------------------------------
/assets/dollar-sign.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ggomaeng/hophacks2017/HEAD/assets/dollar-sign.png
--------------------------------------------------------------------------------
/assets/bitcoin-square.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ggomaeng/hophacks2017/HEAD/assets/bitcoin-square.png
--------------------------------------------------------------------------------
/assets/cash-transfer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ggomaeng/hophacks2017/HEAD/assets/cash-transfer.png
--------------------------------------------------------------------------------
/assets/icons/app-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ggomaeng/hophacks2017/HEAD/assets/icons/app-icon.png
--------------------------------------------------------------------------------
/assets/icons/loading-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ggomaeng/hophacks2017/HEAD/assets/icons/loading-icon.png
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["babel-preset-expo"],
3 | "env": {
4 | "development": {
5 | "plugins": ["transform-react-jsx-source"]
6 | }
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "allowJs": true,
4 | "allowSyntheticDefaultImports": true
5 | },
6 | "exclude": [
7 | "node_modules"
8 | ]
9 | }
--------------------------------------------------------------------------------
/constants/colors.js:
--------------------------------------------------------------------------------
1 | export default {
2 | text: '#4F6C8D',
3 | subtitle: '#A3ADB4',
4 | main: '#67C2AC',
5 | white: '#fff',
6 | bitcoin: '#FF9900',
7 | red: '#F96B6B',
8 |
9 |
10 | }
--------------------------------------------------------------------------------
/constants/data.json:
--------------------------------------------------------------------------------
1 | {
2 | "kevin_bitcoin": "59bd8d99ceb8abe24251bb8d",
3 | "kevin_usd": "59bd8d76ceb8abe24251bb8b",
4 | "kevin_image": "https://i.imgur.com/97o7sbS.jpg",
5 | "sungwoo_bitcoin": "59bd8a26ceb8abe24251bb86",
6 | "sungwoo_usd": "59bd89cbceb8abe24251bb84",
7 | "sungwoo_image": "https://i.imgur.com/d6lJt5A.jpg"
8 | }
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "bitone",
3 | "version": "0.0.0",
4 | "description": "Hello Expo!",
5 | "author": null,
6 | "private": true,
7 | "main": "node_modules/expo/AppEntry.js",
8 | "dependencies": {
9 | "expo": "^20.0.0",
10 | "moment": "^2.18.1",
11 | "react": "16.0.0-alpha.12",
12 | "react-native": "https://github.com/expo/react-native/archive/sdk-20.0.0.tar.gz",
13 | "react-native-action-button": "^2.8.0",
14 | "react-native-animatable": "^1.2.3",
15 | "react-native-parallax-scroll-view": "^0.19.0",
16 | "react-native-qrcode-svg": "^5.0.2",
17 | "react-native-snap-carousel": "^3.2.1",
18 | "react-navigation": "^1.0.0-beta.11"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
1 | {
2 | "expo": {
3 | "name": "bitone",
4 | "description": "An empty new project",
5 | "slug": "bitone",
6 | "privacy": "public",
7 | "sdkVersion": "20.0.0",
8 | "version": "1.0.0",
9 | "orientation": "portrait",
10 | "primaryColor": "#cccccc",
11 | "icon": "./assets/icons/app-icon.png",
12 | "loading": {
13 | "icon": "./assets/icons/loading-icon.png",
14 | "hideExponentText": false
15 | },
16 | "packagerOpts": {
17 | "assetExts": [
18 | "ttf",
19 | "mp4"
20 | ]
21 | },
22 | "ios": {
23 | "bundleIdentifier": "com.hophacks.bitone"
24 | },
25 | "android": {
26 | "package": "com.hophacks.bitone"
27 | }
28 | }
29 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Installation
2 |
3 | ```javascript
4 | git clone git@github.com:ggomaeng/hophacks2017.git
5 |
6 | cd hophacks2017
7 |
8 | npm install
9 |
10 | //open in Expo XDE
11 | ```
12 |
13 | # Screenshots
14 |
15 | 
16 |
17 | 
18 |
19 | 
20 |
21 | 
22 |
23 | 
24 |
25 | 
26 |
27 | 
28 |
29 | 
30 |
31 | 
32 |
33 | 
34 |
35 | 
36 |
--------------------------------------------------------------------------------
/components/button.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { ActivityIndicator, View, Text, TouchableOpacity, StyleSheet } from 'react-native';
3 |
4 | import Colors from '../constants/colors';
5 |
6 | import * as Animatable from 'react-native-animatable';
7 |
8 | export default class Button extends Component {
9 | render() {
10 | const { animation, loading, duration, delay, color, backgroundColor, onPress, text, borderColor, borderWidth } = this.props;
11 |
12 | const content = loading
13 | ?
14 |
15 | : {text}
19 |
20 | return (
21 |
26 |
39 | {content}
40 |
41 |
42 |
43 | )
44 | }
45 | }
--------------------------------------------------------------------------------
/components/rowitem.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { View, Text, StyleSheet } from 'react-native';
3 |
4 | import Colors from '../constants/colors';
5 |
6 | import moment from 'moment';
7 |
8 | export default class RowItem extends Component {
9 | static defaultProps = {
10 | item: {
11 | description: 'Transaction'
12 | }
13 | }
14 | numberWithCommas(x) {
15 | return (x + "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
16 | }
17 |
18 | render() {
19 | const { paid, bitcoin, bitcoin_price, converted } = this.props;
20 | const { description, transaction_date, amount, price } = this.props.item;
21 |
22 | const conversionText = converted && bitcoin ? ' to USD' : 'USD to BTC';
23 |
24 | const desc = description ? description : 'Transaction';
25 |
26 | return (
27 |
31 |
32 | {desc}
33 | {transaction_date}
34 |
35 |
36 |
37 |
38 | {paid ? '- ' : '+ '}
39 | {bitcoin ? 'Ƀ' : '$'}
40 | {bitcoin ? (amount / bitcoin_price).toFixed(3) : this.numberWithCommas(amount)}
41 |
42 |
43 |
44 |
45 | )
46 | }
47 | }
--------------------------------------------------------------------------------
/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { StyleSheet, StatusBar, Text, View } from 'react-native';
3 |
4 | import IntroScreen from './screens/intro';
5 | import LoginScreen from './screens/login';
6 | import LandingScreen from './screens/landing';
7 | import QRScreen from './screens/qrcode';
8 | import ScanScreen from './screens/scanner';
9 | import PayScreen from './screens/pay';
10 | import BitcoinScreen from './screens/bitcoin';
11 | import TransactionScreen from './screens/transactions';
12 |
13 | import FAB from './screens/fab';
14 |
15 | import {
16 | StackNavigator,
17 | } from 'react-navigation';
18 |
19 | var dashnavigation;
20 |
21 | export const DashNavigator = StackNavigator({
22 | Landing: {
23 | screen: LandingScreen,
24 | },
25 | Pay: {
26 | screen: PayScreen
27 | },
28 | Scanner: {
29 | screen: ScanScreen
30 | },
31 | QR: {
32 | screen: QRScreen
33 | },
34 | Bitcoin: {
35 | screen: BitcoinScreen
36 | },
37 | Transaction: {
38 | screen: TransactionScreen
39 | }
40 | }, {
41 | initialRouteName: 'Landing',
42 | headerMode: 'none'
43 | })
44 |
45 | const RootNavigator = StackNavigator({
46 | Intro: {
47 | screen: IntroScreen,
48 | },
49 | Login: {
50 | screen: LoginScreen
51 | },
52 | DashBoard: {
53 | screen: ({ navigation }) => (
54 |
55 |
56 | { this.navigator = nav; }} screenProps={{ rootNavigation: navigation }} />
57 |
58 | )
59 | }
60 | }, {
61 | initialRouteName: 'DashBoard',
62 | headerMode: 'none'
63 | })
64 |
65 | export default class App extends React.Component {
66 | render() {
67 | return (
68 |
69 |
70 |
71 |
72 | );
73 | }
74 | }
75 |
76 | const styles = StyleSheet.create({
77 | container: {
78 | flex: 1,
79 | backgroundColor: '#fff',
80 | },
81 | });
82 |
--------------------------------------------------------------------------------
/screens/pay.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {
3 | View,
4 | Text,
5 | Dimensions,
6 | TouchableOpacity,
7 | Image,
8 | StyleSheet
9 | } from 'react-native';
10 | import { Camera, BarCodeScanner, Permissions } from 'expo';
11 |
12 | const { width, height } = Dimensions.get('window');
13 | import * as Animatable from 'react-native-animatable'
14 |
15 | import Colors from '../constants/colors';
16 |
17 | class BoxView extends Component {
18 | render() {
19 | const { source, text, onPress } = this.props;
20 | return (
21 |
22 |
23 |
27 |
28 |
29 |
30 | {text}
31 |
32 |
33 | )
34 | }
35 | }
36 |
37 | export default class QRScreen extends Component {
38 | render() {
39 | console.log(this.props);
40 | const {params} = this.props.navigation.state;
41 | const { navigate } = this.props.navigation;
42 | return (
43 |
44 | {/* I want to */}
45 | Select an option below
46 |
47 |
48 | navigate('Scanner', params)} source={require('../assets/cards.png')} text='Pay' />
49 | navigate('QR', params)} source={require('../assets/money.png')} text='Receive' />
50 |
51 |
52 |
53 | )
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/components/apicalls.js:
--------------------------------------------------------------------------------
1 | import moment from 'moment';
2 |
3 | const ENDPOINT_URL = 'http://api.reimaginebanking.com';
4 | const API_KEY = '5a9650e5909592b214a68ecf5a3c28ca';
5 | const BITCOIN_PRICE_URL = 'https://api.coinmarketcap.com/v1/ticker/bitcoin/';
6 |
7 | export async function getBitcoinPrice() {
8 | try {
9 | let response = await fetch(`${BITCOIN_PRICE_URL}`);
10 | let responseJson = await response.json();
11 | // console.log(responseJson[0]);
12 | return responseJson && responseJson[0];
13 | } catch (error) {
14 | console.error(error);
15 | }
16 | }
17 |
18 |
19 | function generateURL(path, morethanone) {
20 | const more = morethanone ? '&' : '?';
21 | return `${ENDPOINT_URL}/${path}${more}key=${API_KEY}`;
22 | }
23 |
24 | export async function getAccounts() {
25 | try {
26 | let response = await fetch(generateURL('accounts'));
27 | let responseJson = await response.json();
28 | // console.log(responseJson);
29 | return responseJson;
30 | } catch (error) {
31 | console.error(error);
32 | }
33 | }
34 |
35 |
36 | export async function getAccountInfo(id) {
37 | try {
38 | let response = await fetch(generateURL(`accounts/${id}`));
39 | let responseJson = await response.json();
40 | // console.log(responseJson);
41 | return responseJson;
42 | } catch (error) {
43 | console.error(error);
44 | }
45 | }
46 |
47 | export async function getTransactions(bitcoin_id, bank_id) {
48 | try {
49 | var response = await fetch(generateURL(`accounts/${bitcoin_id}/transfers?type=payer`, true));
50 | var result1 = await response.json();
51 | var response2 = await fetch(generateURL(`accounts/${bitcoin_id}/transfers?type=payee`, true));
52 | var result2 = await response2.json();
53 | var response3 = await fetch(generateURL(`accounts/${bank_id}/transfers?type=payer`, true));
54 | var result3 = await response3.json();
55 | var response4 = await fetch(generateURL(`accounts/${bank_id}/transfers?type=payee`, true));
56 | var result4 = await response4.json();
57 |
58 | var finalresult = result1.concat(result2).concat(result3).concat(result4);
59 | // console.log(finalresult);
60 | return finalresult;
61 | } catch (error) {
62 | console.error(error);
63 | }
64 | }
65 |
66 | export async function transfer(from, to, amount, description, type) {
67 |
68 | // console.log(from, to, amount, description);
69 |
70 | const body = {
71 | medium: 'balance',
72 | payee_id: to,
73 | amount: parseFloat(amount),
74 | transaction_date: moment().format(),
75 | description: `[${type}]${description}`
76 | }
77 |
78 | console.log(JSON.stringify(body));
79 |
80 | const options = {
81 | method: 'POST',
82 | headers: {
83 | 'Accept': 'application/json',
84 | 'Content-Type': 'application/json',
85 | },
86 | body: JSON.stringify(body)
87 | }
88 |
89 |
90 | try {
91 | let response = await fetch(generateURL(`accounts/${from}/transfers`), options);
92 | let responseJson = await response.json();
93 | console.log(responseJson);
94 | return responseJson;
95 | } catch (error) {
96 | console.error(error);
97 | }
98 |
99 | }
--------------------------------------------------------------------------------
/screens/fab.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Animated, Image, View, StatusBar, Text, StyleSheet } from 'react-native';
3 | import ActionButton from 'react-native-action-button';
4 | import Icon from 'react-native-vector-icons/Ionicons';
5 | import { LinearGradient, BlurView } from 'expo';
6 |
7 | import { StackNavigator, NavigationActions } from 'react-navigation';
8 |
9 | import LandingScreen from './landing';
10 | import QRScreen from './qrcode';
11 |
12 | import * as Animatable from 'react-native-animatable';
13 |
14 | import { DashNavigator } from '../App';
15 |
16 | import Colors from '../constants/colors';
17 |
18 | const AnimatedBlurView = Animated.createAnimatedComponent(BlurView);
19 | export default class DashBoard extends Component {
20 |
21 | renderActionButton() {
22 | const params = {
23 |
24 | };
25 |
26 | const payAction = NavigationActions.navigate({
27 | routeName: 'Pay',
28 | action: NavigationActions.navigate({ routeName: 'Pay' })
29 | })
30 |
31 | const bitcoinAction = NavigationActions.navigate({
32 | routeName: 'Bitcoin',
33 | action: NavigationActions.navigate({ routeName: 'Bitcoin' })
34 | })
35 |
36 | const transAction = NavigationActions.navigate({
37 | routeName: 'Transaction',
38 | action: NavigationActions.navigate({ routeName: 'Transaction' })
39 | })
40 |
41 | const resetAction = NavigationActions.reset({
42 | index: 0,
43 | actions: [NavigationActions.navigate({ routeName: 'Intro' })],
44 | });
45 |
46 | return (
47 | } position="center" buttonColor={Colors.text}>
50 | this.props.navigation.dispatch(bitcoinAction)}>
51 |
52 |
53 | this.props.navigation.dispatch(payAction)}>
54 |
55 |
56 | this.props.navigation.dispatch(transAction)}>
57 |
58 |
59 | this.props.screenProps.rootNavigation.dispatch(resetAction)}>
60 |
61 |
62 |
63 | )
64 | }
65 | render() {
66 | return this.renderActionButton();
67 |
68 | }
69 | }
70 |
71 | const styles = StyleSheet.create({
72 | actionButtonIcon: {
73 | fontSize: 20,
74 | height: 22,
75 | color: Colors.text,
76 | },
77 | });
--------------------------------------------------------------------------------
/screens/transactions.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {
3 | View,
4 | Text,
5 | Image,
6 | ScrollView,
7 | FlatList,
8 | StatusBar,
9 | StyleSheet
10 | } from 'react-native';
11 |
12 | import Colors from '../constants/colors';
13 |
14 | import ParallaxScrollView from 'react-native-parallax-scroll-view';
15 |
16 | import RowItem from '../components/rowitem';
17 |
18 | import moment from 'moment';
19 |
20 | import * as Animatable from 'react-native-animatable';
21 |
22 | import { getTransactions } from '../components/apicalls';
23 |
24 |
25 | export default class Transaction extends Component {
26 | constructor(props) {
27 | super(props);
28 | const { params } = props.navigation.state;
29 | this.state = {
30 | bank_id: params.bank_id,
31 | bitcoin_id: params.bitcoin_id,
32 | bitcoin_price: params.bitcoin_price,
33 | data: []
34 |
35 | }
36 | }
37 |
38 | _keyExtractor = (item, index) => index;
39 |
40 | componentDidMount() {
41 | const { data, bank_id, bitcoin_id } = this.state;
42 | getTransactions(bitcoin_id, bank_id)
43 | .then(response => {
44 | console.log('bitcoin transfers', response);
45 | this.setState({ data: data.concat(response) })
46 | })
47 |
48 | }
49 |
50 |
51 | isBitcoin(item) {
52 | const { bitcoin_id, bank_id } = this.state;
53 | const { payee_id, payer_id } = item;
54 |
55 | if ((payer_id == bitcoin_id || payer_id == bank_id) && (payee_id == bitcoin_id || payee_id == bank_id)) {
56 | //transfer to my self
57 |
58 | if(payer_id == bitcoin_id) {
59 | return false;
60 | }
61 |
62 | if(payer_id == bank_id) {
63 | return true;
64 | }
65 |
66 | } else {
67 | if (payer_id == bitcoin_id || payee_id == bitcoin_id) return true;
68 | else return false;
69 | }
70 | }
71 |
72 | didPay(item) {
73 | const { bitcoin_id, bank_id } = this.state;
74 | const { payer_id } = item;
75 |
76 | return payer_id == bitcoin_id || payer_id == bank_id;
77 | }
78 |
79 | converted(item) {
80 | const { bitcoin_id, bank_id } = this.state;
81 | const { payee_id, payer_id } = item;
82 |
83 | return (payer_id == bitcoin_id && payee_id == bank_id) || (payee_id == bitcoin_id && payer_id == bank_id);
84 |
85 | }
86 |
87 | render() {
88 | const { data, bitcoin_price } = this.state;
89 |
90 | const sorted = data.sort(function(a,b){
91 | // Turn your strings into dates, and then subtract them
92 | // to get a value that is either negative, positive, or zero.
93 | return moment(b) - moment(a);
94 | });
95 |
96 | const content = data.length == 0 ?
97 |
98 | No Data to Show
99 |
100 |
101 | : }
105 | />
106 |
107 |
108 | return (
109 |
110 |
111 | (
117 |
118 |
119 |
120 | Transaction History
121 |
122 |
123 | )}>
124 | {content}
125 |
126 |
127 | )
128 | }
129 | }
--------------------------------------------------------------------------------
/screens/intro.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {
3 | View,
4 | Image,
5 | Dimensions,
6 | Text,
7 | TouchableOpacity,
8 | StyleSheet
9 | } from 'react-native';
10 |
11 | import { NavigationActions, withNavigation } from 'react-navigation';
12 |
13 | import * as Animatable from 'react-native-animatable';
14 |
15 | const { width, height } = Dimensions.get('window');
16 |
17 | import Colors from '../constants//colors';
18 |
19 | import Carousel from 'react-native-snap-carousel';
20 |
21 | export default class Intro extends Component {
22 | static navigationOptions = {
23 | header: null
24 | };
25 |
26 | state = {
27 | index: 0,
28 | entries: [
29 | {
30 | image: require('../assets/bitcoin.png'),
31 | title: "Easily Access Bitcoin",
32 | subtitle: "Bank Account & Credit and Debit Cards transactions Made Easy"
33 | }, {
34 | image: require('../assets/transfer.png'),
35 | title: "Money Transfer",
36 | subtitle: "Bank Account & Credit and Debit Cards transactions Made Easy"
37 | }, {
38 | image: require('../assets/chart.png'),
39 | title: "Price Visualization",
40 | subtitle: "Bank Account & Credit and Debit Cards transactions Made Easy"
41 | }
42 | ]
43 |
44 | }
45 |
46 | _renderItem({ item, index }) {
47 | return (
48 |
55 |
64 |
67 | {item.title}
73 | {item.subtitle}
81 |
82 |
83 |
84 | );
85 | }
86 |
87 | render() {
88 | const { index } = this.state;
89 |
90 | const resetAction = NavigationActions.reset({
91 | index: 0,
92 | actions: [NavigationActions.navigate({ routeName: 'Login' })],
93 | });
94 |
95 |
96 | return (
97 |
100 |
106 | this.setState({ index })}
110 | sliderWidth={width}
111 | itemWidth={width} />
112 |
113 |
114 |
120 |
129 | .
130 |
131 |
140 | .
141 |
142 |
151 | .
152 |
153 |
154 |
155 |
156 | this.props.navigation.dispatch(resetAction)}
158 | style={{
159 | justifyContent: 'center',
160 | alignItems: 'center',
161 | backgroundColor: Colors.main,
162 | margin: 40,
163 | padding: 20,
164 | borderRadius: 50
165 | }}>
166 | GET STARTED
171 |
172 |
173 |
174 | );
175 | }
176 | }
--------------------------------------------------------------------------------
/screens/qrcode.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { StyleSheet, KeyboardAvoidingView, TouchableOpacity, TextInput, Dimensions, Image, Text, View } from 'react-native';
3 | import QRCode from 'react-native-qrcode-svg';
4 |
5 | const { width, height } = Dimensions.get('window');
6 |
7 | import Button from '../components/button';
8 | import Colors from '../constants/colors';
9 |
10 | const data = require('../constants/data.json');
11 |
12 | import * as Animatable from 'react-native-animatable';
13 |
14 | export default class QRGen extends React.Component {
15 | constructor(props) {
16 | super(props);
17 | const { params } = props.navigation.state;
18 | this.state = {
19 | bank_id: params.bank_id,
20 | bitcoin_id: params.bitcoin_id,
21 | bank_balance: params.bank_balance,
22 | bitcoin_balance: params.bitcoin_balance,
23 | bitcoin_price: params.bitcoin_price,
24 | amount: '',
25 | desription: '',
26 | moneyIndex: 0,
27 | qrcodePressed: false
28 | }
29 | }
30 |
31 | generateQR() {
32 | const { bitcoin_id, bank_id, bitcoin_balance, bank_balance, moneyIndex, description, amount, qrcodePressed } = this.state;
33 |
34 |
35 | if (amount && amount > 0 && bitcoin_id && bank_id) {
36 | this.setState({ qrcodePressed: true });
37 |
38 | } else {
39 | alert("Check login status")
40 | }
41 | }
42 |
43 | numberWithCommas(x) {
44 | return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
45 | }
46 |
47 | render() {
48 | const { bitcoin_id, bank_id, bitcoin_balance, bank_balance, bitcoin_price, moneyIndex, description, amount, qrcodePressed } = this.state;
49 | if (qrcodePressed) {
50 | const isKevin = data.kevin_bitcoin == bitcoin_id;
51 | const args = {
52 | type: moneyIndex == 0 ? "BTC" : "USD",
53 | id: moneyIndex == 0 ? bitcoin_id : bank_id,
54 | name: isKevin ? 'Kevin Chae' : 'Sung Woo Park',
55 | image: isKevin ? data.kevin_image : data.sungwoo_image,
56 | amount: moneyIndex == 0 ? amount * bitcoin_price : amount,
57 | description
58 | }
59 |
60 | return (
61 |
62 |
63 |
70 |
71 |
72 |
74 |
75 |
76 | )
77 | }
78 |
79 |
80 | return (
81 |
82 |
83 |
84 | Choose Currency
85 |
86 | this.setState({ moneyIndex: 0 })} style={{ marginRight: 32 }}>
87 |
88 | {bitcoin_balance.toFixed(2)}
89 | BTC
90 |
91 |
92 | this.setState({ moneyIndex: 1 })} style={{ marginLeft: 32 }}>
93 |
94 | {bank_balance.toFixed(2)}
95 | USD
96 |
97 |
98 |
99 |
100 |
101 | this.setState({ amount })}
104 | placeholder="0.00"
105 | keyboardType='decimal-pad'
106 | placeholderTextColor={Colors.subtitle}
107 | value={amount}
108 | />
109 |
110 | this.setState({ description })}
113 | placeholder="Description"
114 | placeholderTextColor={Colors.subtitle}
115 | value={description}
116 | />
117 |
118 |
119 |
120 |
121 |
123 |
124 |
125 |
126 |
127 | );
128 | };
129 | }
--------------------------------------------------------------------------------
/screens/login.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { View, AsyncStorage, Dimensions, TextInput, Text, Platform, Image, NativeModules, StyleSheet } from 'react-native';
3 |
4 | import { NavigationActions } from 'react-navigation';
5 | import * as Animatable from 'react-native-animatable';
6 | import Colors from '../constants/colors';
7 |
8 | import Button from '../components/button';
9 |
10 | import { getAccountInfo } from '../components/apicalls';
11 |
12 | const data = require('../constants/data.json');
13 |
14 | const { width, height } = Dimensions.get('window');
15 |
16 | export default class Login extends Component {
17 | state = {
18 | success: false,
19 | bitcoin_id: 'sungwoo_bitcoin',
20 | bank_id: 'sungwoo_usd',
21 | warning: ''
22 | }
23 |
24 |
25 |
26 | render() {
27 | const { bitcoin_id, bank_id, text, warning } = this.state;
28 | const { navigate } = this.props.navigation;
29 |
30 | const resetAction = NavigationActions.reset({
31 | index: 0,
32 | actions: [NavigationActions.navigate({
33 | routeName: 'DashBoard',
34 |
35 | })],
36 | params: [NavigationActions.setParams({
37 | globalData: {
38 | bank_id,
39 | bitcoin_id
40 | }
41 | })]
42 | });
43 | if (Platform.OS === 'android') {
44 | authFunction = async () => {
45 | try {
46 | let result = await NativeModules.ExponentFingerprint.authenticateAsync();
47 | if (result.success) {
48 | this.setState({ success: true })
49 | // alert('Authenticated!');
50 | } else {
51 | this.setState({ success: false })
52 | // alert('Failed to authenticate');
53 | }
54 | } finally {
55 | }
56 | };
57 | } else if (Platform.OS === 'ios') {
58 | authFunction = async () => {
59 |
60 | let result = await NativeModules.ExponentFingerprint.authenticateAsync(
61 | 'Please verify your identity'
62 | );
63 | if (result.success) {
64 | this.setState({ success: true })
65 | this.props.navigation.dispatch(resetAction);
66 | // alert('Success!');
67 | } else {
68 | this.setState({ success: false })
69 | // alert('Cancel!');
70 | }
71 | }
72 | }
73 |
74 | // checkAccount = () => {
75 | // getAccountInfo(bitcoin_id)
76 | // .then(response => {
77 | // if (response && response.code && response.code == 404) {
78 | // this.setState({ warning: response.message });
79 | // } else {
80 | // getAccountInfo(bank_id)
81 | // .then(response => {
82 | // if (response && response.code && response.code == 404) {
83 | // this.setState({ warning: response.message });
84 | // } else {
85 | // authFunction();
86 | // }
87 | // });
88 | // }
89 | // });
90 | // }
91 |
92 | checkAcount = async () => {
93 | if (data[bitcoin_id] != null && data[bank_id] != null) {
94 | try {
95 | await AsyncStorage.setItem('bitcoin_id', data[bitcoin_id]);
96 | await AsyncStorage.setItem('bank_id', data[bank_id]);
97 | authFunction();
98 | } catch (error) {
99 | // Error saving data
100 | this.setState({ warning: error });
101 | }
102 | } else {
103 | this.setState({ warning: "Invalid Credentials" });
104 | }
105 | }
106 |
107 | return (
108 |
111 |
119 |
120 | BitOne
121 |
127 | Bank at Your Fingertips
133 |
134 | this.setState({ bitcoin_id })}
137 | placeholder="Bitcoin id"
138 | placeholderTextColor={Colors.subtitle}
139 | value={bitcoin_id}
140 | />
141 | this.setState({ bank_id })}
144 | placeholder="Bank id"
145 | secureTextEntry={true}
146 | placeholderTextColor={Colors.subtitle}
147 | value={bank_id}
148 | />
149 | {warning}
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 | )
158 | }
159 | }
--------------------------------------------------------------------------------
/screens/scanner.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { ActivityIndicator, StyleSheet, Image, Modal, Text, View, TouchableOpacity } from 'react-native';
3 | import { BarCodeScanner, Permissions } from 'expo';
4 |
5 | import Colors from '../constants/colors';
6 |
7 | import Button from '../components/button';
8 | import Icon from 'react-native-vector-icons/Ionicons';
9 |
10 | import { transfer } from '../components/apicalls';
11 |
12 | const data = require('../constants/data.json');
13 |
14 | export default class Scanner extends React.Component {
15 | constructor(props) {
16 | super(props);
17 | const { params } = props.navigation.state;
18 | this.state = {
19 | bank_id: params.bank_id,
20 | bitcoin_id: params.bitcoin_id,
21 | bitcoin_price: params.bitcoin_price,
22 | hasCameraPermission: null,
23 | visible: false,
24 | qrObject: {},
25 | paymentFinished: false,
26 | loading: false,
27 |
28 | }
29 | }
30 |
31 | async componentWillMount() {
32 | const { status } = await Permissions.askAsync(Permissions.CAMERA);
33 | this.setState({ hasCameraPermission: status === 'granted' });
34 | }
35 |
36 | createTransaction() {
37 | const { bank_id, bitcoin_id, hasCameraPermission, qrObject } = this.state;
38 |
39 | const { type, id, name, description, amount } = qrObject;
40 |
41 | const from = type == 'BTC' ? bitcoin_id : bank_id;
42 |
43 | this.setState({ loading: true });
44 | transfer(from, id, amount, description, type)
45 | .then(response => {
46 | console.log(response);
47 | if (response && response.code && response.code == 201) {
48 | setTimeout(() => {
49 | this.setState({ loading: false, paymentFinished: true });
50 | }, 1000)
51 | } else {
52 | alert("Something went wrong.");
53 | }
54 | });
55 |
56 | }
57 |
58 | goBack() {
59 | this.setState({visible: false});
60 | this.props.navigation.goBack(null);
61 | }
62 |
63 | renderModal() {
64 | const { hasCameraPermission, visible, qrObject, bitcoin_id, bitcoin_price, paymentFinished, loading, displayLoading } = this.state;
65 |
66 | const amt = qrObject.type == 'USD' ? qrObject.amount : qrObject.amount / bitcoin_price;
67 | const buttonText = paymentFinished ? 'Done' : `Pay ${qrObject.name} ${qrObject.type == 'USD' ? '$' : 'Ƀ'}${amt}`
68 |
69 | const desc = qrObject.description
70 | ?
71 | {qrObject.description}
72 | : null;
73 |
74 | const indicator =
75 |
76 |
77 |
78 | const isKevin = bitcoin_id == data.kevin_bitcoin;
79 |
80 | const content = !paymentFinished ?
81 |
82 | {desc}
83 |
84 |
85 | {qrObject.name}
86 |
87 |
88 |
89 |
93 | {qrObject.type == 'USD' ? '$' : 'Ƀ'}
94 | {this.numberWithCommas(amt)}
95 | {qrObject.type}
96 |
97 |
98 |
99 |
100 |
101 | {isKevin ? 'Kevin Chae' : 'Sung Woo Park'}
102 |
103 |
104 | :
105 |
106 | Complete!
107 | ;
108 |
109 | return (
110 |
111 |
112 | this.setState({ qrObject: {}, visible: false })}>
113 |
114 |
115 |
116 |
117 | {loading ? indicator : content}
118 |
119 |
120 |
121 | {loading ?
122 | :
125 |
126 | )
127 | }
128 |
129 | render() {
130 | const { hasCameraPermission, visible, qrObject } = this.state;
131 |
132 | if (hasCameraPermission === null) {
133 | return Requesting for camera permission;
134 | } else if (hasCameraPermission === false) {
135 | return No access to camera;
136 | } else {
137 | return (
138 |
139 |
143 |
144 |
149 | {this.renderModal()}
150 |
151 |
152 |
153 |
154 | );
155 | }
156 | }
157 |
158 | numberWithCommas(x) {
159 | return (x + "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
160 | }
161 |
162 | _handleBarCodeRead = ({ type, data }) => {
163 | // alert(`Bar code with type ${type} and data ${data} has been scanned!`);
164 | const qrObject = JSON.parse(data);
165 | this.setState({ qrObject, visible: true });
166 | }
167 | }
168 |
169 |
170 | const styles = StyleSheet.create({
171 | actionButtonIcon: {
172 | fontSize: 40,
173 | height: 32,
174 | margin: 16,
175 | marginRight: 24,
176 | marginTop: 40,
177 | color: Colors.white,
178 | },
179 | });
--------------------------------------------------------------------------------
/screens/bitcoin.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Alert, StyleSheet, KeyboardAvoidingView, TouchableOpacity, TextInput, Dimensions, Image, Text, View } from 'react-native';
3 | import QRCode from 'react-native-qrcode-svg';
4 |
5 | const { width, height } = Dimensions.get('window');
6 |
7 | import Button from '../components/button';
8 | import Colors from '../constants/colors';
9 |
10 | const data = require('../constants/data.json');
11 |
12 | import { transfer } from '../components/apicalls';
13 |
14 | import * as Animatable from 'react-native-animatable';
15 |
16 | export default class Bitcoin extends React.Component {
17 | constructor(props) {
18 | super(props);
19 | const { params } = props.navigation.state;
20 | this.state = {
21 | bank_id: params.bank_id,
22 | bitcoin_id: params.bitcoin_id,
23 | bank_balance: params.bank_balance,
24 | bitcoin_balance: params.bitcoin_balance,
25 | bitcoin_price: params.bitcoin_price,
26 | amount: '',
27 | resultAmount: 0,
28 | desription: '',
29 | moneyIndex: 0,
30 | qrcodePressed: false
31 | }
32 | }
33 |
34 | convert() {
35 | const { bitcoin_id, bank_id, bitcoin_balance, bitcoin_price, bank_balance, resultAmount, moneyIndex, description, amount, qrcodePressed } = this.state;
36 |
37 |
38 | console.log(amount, bitcoin_price);
39 |
40 | if (amount && amount > 0 && bitcoin_id && bank_id) {
41 | if (moneyIndex == 0 && (amount < 0 || amount > bitcoin_balance)) {
42 | alert("Invalid amount");
43 | return;
44 | }
45 |
46 | if (moneyIndex == 1 && (amount < 0 || amount > bank_balance)) {
47 | alert("Invalid amount");
48 | return;
49 | }
50 |
51 | const from = moneyIndex == 0 ? bitcoin_id : bank_id;
52 | const id = moneyIndex == 0 ? bank_id : bitcoin_id;
53 | const amt = moneyIndex == 0 ? amount * bitcoin_price : amount;
54 | const type = moneyIndex == 0 ? 'BTC' : 'USD';
55 |
56 | transfer(from, id, amt, description, type)
57 | .then(response => {
58 | console.log(response);
59 | if (response && response.code && response.code == 201) {
60 | Alert.alert(
61 | 'Transaction Complete',
62 | 'It may take a moment to transfer the value and see the change',
63 | [
64 | { text: 'OK', onPress: () => console.log('OK Pressed') },
65 | ],
66 | )
67 | this.props.navigation.goBack(null);
68 | } else {
69 | alert("Something went wrong.");
70 | }
71 | });
72 |
73 |
74 | } else {
75 | // alert("Invalid amount")
76 | }
77 | }
78 |
79 | numberWithCommas(x) {
80 | return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
81 | }
82 |
83 | isNumeric(n) {
84 | return !isNaN(parseFloat(n)) && isFinite(n);
85 | }
86 |
87 | render() {
88 | const { bitcoin_id, bank_id, bitcoin_balance, resultAmount, bank_balance, bitcoin_price, moneyIndex, description, amount, qrcodePressed } = this.state;
89 |
90 | const currencyText = {moneyIndex == 0 ? ' BTC ' : ' USD '} →
91 | {moneyIndex == 0 ? ' USD ' : ' BTC '}
92 |
93 | var fromAmount;
94 | var toAmount;
95 |
96 | if (moneyIndex == 0) {
97 | fromAmount = amount ? parseFloat(amount) : 0;
98 | toAmount = (amount * bitcoin_price).toFixed(2);
99 | } else if (moneyIndex == 1) {
100 | fromAmount = amount ? parseFloat(amount) : 0;
101 | toAmount = (amount / bitcoin_price).toFixed(8);
102 | }
103 |
104 | return (
105 |
106 |
107 |
108 | {currencyText}
109 |
110 | this.setState({ moneyIndex: 0 })} style={{ marginRight: 32 }}>
111 |
112 | {bitcoin_balance.toFixed(2)}
113 | BTC
114 |
115 |
116 | this.setState({ moneyIndex: 1 })} style={{ marginLeft: 32 }}>
117 |
118 | {bank_balance.toFixed(2)}
119 | USD
120 |
121 |
122 |
123 |
124 |
125 | this.setState({ amount: this.isNumeric(amt) || amt == '' ? amt : amount, resultAmount: toAmount })}
128 | placeholder="0.00"
129 | keyboardType='decimal-pad'
130 |
131 | placeholderTextColor={Colors.subtitle}
132 | value={amount + ""}
133 | />
134 |
135 |
136 |
137 |
138 |
140 |
141 |
142 |
143 |
144 | );
145 | };
146 | }
--------------------------------------------------------------------------------
/screens/landing.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { AsyncStorage, Animated, Dimensions, Image, View, Text, StatusBar, StyleSheet } from 'react-native';
3 | import ActionButton from 'react-native-action-button';
4 | import Icon from 'react-native-vector-icons/Ionicons';
5 | import { LinearGradient, BlurView } from 'expo';
6 |
7 | import { StackNavigator, NavigationActions } from 'react-navigation';
8 |
9 | import * as Animatable from 'react-native-animatable';
10 |
11 | import Carousel from 'react-native-snap-carousel';
12 |
13 | import Colors from '../constants/colors';
14 |
15 | import { getBitcoinPrice, getAccounts, getAccountInfo } from '../components/apicalls';
16 |
17 | const { width, height } = Dimensions.get('window');
18 |
19 | const AnimatedBlurView = Animated.createAnimatedComponent(BlurView);
20 |
21 | export default class DashBoard extends Component {
22 | state = {
23 | index: 0,
24 | entries: [
25 | {
26 | image: require('../assets/cute-bitcoin.png'),
27 | icon: require('../assets/bitcoin-sign.png'),
28 | title: "Bitcoin Balance",
29 | dollar: "0",
30 | cent: 0
31 | }, {
32 | image: require('../assets/cute-dollar.png'),
33 | icon: require('../assets/dollar-sign.png'),
34 | title: "Bank Balance",
35 | dollar: "0",
36 | cent: 0
37 | }],
38 | price_usd: 1,
39 | bitcoin_id: '',
40 | bitcoin_balance: 0,
41 | bank_id: '',
42 | bank_balance: 0,
43 | bitcoin_price: 0
44 | }
45 |
46 | componentWillMount() {
47 | console.log('entering screen');
48 |
49 | }
50 | componentWillUnmount() {
51 |
52 | }
53 |
54 | componentDidMount() {
55 | this.initData()
56 | .then(r => {
57 | this.update(r.bitcoin_id, r.bank_id);
58 | }
59 | )
60 |
61 | }
62 |
63 | update(bitcoin_id, bank_id) {
64 | const { entries } = this.state;
65 |
66 |
67 | getBitcoinPrice()
68 | .then(response => {
69 | const { price_usd } = response;
70 | console.log("PRICE", price_usd);
71 | // this.setState({ price_usd, bitcoin_price: price_usd });
72 | getAccountInfo(bitcoin_id)
73 | .then(response => {
74 | const bitcoin_balance = response.balance;
75 | // console.log("balance: ", balance);
76 | const bc_money = (bitcoin_balance + "").split(',');
77 | entries[1].dollar = bc_money[0];
78 | entries[1].cent = bc_money[1];
79 |
80 | getAccountInfo(bank_id)
81 | .then(response => {
82 | const bank_balance = response.balance;
83 | // console.log("balance: ", balance);
84 | const bk_money = (bank_balance + "").split(',');
85 | entries[1].dollar = bk_money[0];
86 | entries[1].cent = bk_money[1];
87 | this.setState({ entries, bitcoin_balance: bitcoin_balance / price_usd, bitcoin_price: price_usd, price_usd, bank_balance });
88 | })
89 |
90 | })
91 | });
92 |
93 | this.forceUpdate();
94 |
95 |
96 | }
97 |
98 | async initData() {
99 | try {
100 | const bitcoin_id = await AsyncStorage.getItem('bitcoin_id');
101 | const bank_id = await AsyncStorage.getItem('bank_id');
102 | if (bitcoin_id !== null && bank_id !== null) {
103 | // We have data!!
104 | console.log(bitcoin_id, bank_id);
105 | this.setState({ bitcoin_id, bank_id });
106 | return { bitcoin_id, bank_id }
107 | } else {
108 | console.error("no data!");
109 | }
110 | } catch (error) {
111 | console.error(error);
112 | // Error retrieving data
113 | }
114 | }
115 |
116 | numberWithCommas(x) {
117 | return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
118 | }
119 |
120 | renderActionButton() {
121 | const { bitcoin_id, bitcoin_balance, bitcoin_price, bank_balance, bank_id } = this.state;
122 |
123 | const params = {
124 | bitcoin_id,
125 | bitcoin_balance,
126 | bank_id,
127 | bank_balance,
128 | bitcoin_price
129 | };
130 |
131 | const payAction = NavigationActions.navigate({
132 | routeName: 'Pay',
133 | action: NavigationActions.navigate({ routeName: 'Pay' }),
134 | params
135 | })
136 |
137 | const bitcoinAction = NavigationActions.navigate({
138 | routeName: 'Bitcoin',
139 | action: NavigationActions.navigate({ routeName: 'Bitcoin' }),
140 | params
141 | })
142 |
143 | const transAction = NavigationActions.navigate({
144 | routeName: 'Transaction',
145 | action: NavigationActions.navigate({ routeName: 'Transaction' }),
146 | params
147 | })
148 |
149 | const resetAction = NavigationActions.reset({
150 | index: 0,
151 | actions: [NavigationActions.navigate({ routeName: 'Intro' })],
152 | });
153 |
154 | return (
155 | } position="center" buttonColor={Colors.text}>
158 | this.props.navigation.dispatch(bitcoinAction)}>
159 |
160 |
161 | this.props.navigation.dispatch(payAction)}>
162 |
163 |
164 | this.props.navigation.dispatch(transAction)}>
165 |
166 |
167 | this.props.screenProps.rootNavigation.dispatch(resetAction)}>
168 |
169 |
170 |
171 | )
172 | }
173 |
174 | _renderItem({ item, index }) {
175 | const { price_usd, bank_balance, bitcoin_price, bitcoin_balance } = this.state;
176 |
177 | var balance;
178 | var d;
179 | var c;
180 | if (index == 0) {
181 | balance = (bitcoin_balance + "").split('.');
182 | d = parseInt(balance[0]);
183 | c = parseFloat("." + balance[1]).toFixed(6).split('.')[1];
184 | } else {
185 | balance = (bank_balance + "").split('.');
186 | d = this.numberWithCommas(balance[0]);
187 | c = parseFloat("." + balance[1]).toFixed(2).split('.')[1];
188 | }
189 | return (
190 |
197 |
198 |
199 | {item.title}
200 |
201 |
202 | {d}
203 | .{c}
204 |
205 | 1 BTC = ${price_usd} USD
206 |
207 |
208 | );
209 | }
210 |
211 | render() {
212 | const { bitcoin_id, bank_id } = this.state;
213 | return (
214 |
215 |
216 |
217 | {
221 | this.update(bitcoin_id, bank_id);
222 | this.setState({ index })
223 | }}
224 | sliderWidth={width}
225 | itemWidth={width} />
226 |
227 |
228 |
229 |
230 |
231 | {this.renderActionButton()}
232 |
233 | )
234 | return (
235 |
236 |
237 |
238 |
239 |
240 |
241 | 123.456
242 | .50
243 |
244 | {/* */}
245 |
246 |
247 |
248 |
249 | {/* */}
250 |
251 |
252 | 8372.456
253 | .50
254 |
255 |
256 |
257 |
258 | )
259 | }
260 | }
261 |
262 | const styles = StyleSheet.create({
263 | actionButtonIcon: {
264 | fontSize: 20,
265 | height: 22,
266 | color: Colors.text,
267 | },
268 | });
--------------------------------------------------------------------------------