Fiat on Ramp: Payments

.circleci/config.yml

@@ -176,26 +176,27 @@ workflows:
               only:
                 - master
                 - develop
-      - prep-node-deps:
-          filters:
-            branches:
-              ignore:
-                - master
-                - develop
-      - lint:
-          requires:
-            - prep-node-deps
-      - test-unit:
-          requires:
-            - prep-node-deps
+                - feature/rn-payments
+      # - prep-node-deps:
+      #     filters:
+      #       branches:
+      #         ignore:
+      #           - master
+      #           - develop
+      # - lint:
+      #     requires:
+      #       - prep-node-deps
+      # - test-unit:
+      #     requires:
+      #       - prep-node-deps
     #   - test-e2e-ios:
     #       requires:
     #         - prep-node-deps
     #         - test-unit
-      - all-tests-pass:
-          requires:
-            - lint
-            - test-unit
+      # - all-tests-pass:
+      #     requires:
+      #       - lint
+      #       - test-unit
     #       - test-e2e-ios
     #   - upload-coverage:
     #       requires:

android/app/src/main/java/io/metamask/MainApplication.java

@@ -1,6 +1,7 @@
 package io.metamask;
 
 import com.facebook.react.ReactApplication;
+import com.reactnativecommunity.webviewforked.RNCWebViewForkedPackage;
 import com.cmcewen.blurview.BlurViewPackage;
 import android.content.Context;
 import com.facebook.react.PackageList;

android/settings.gradle

@@ -1,4 +1,6 @@
 rootProject.name = 'MetaMask'
+include ':react-native-webview-forked'
+project(':react-native-webview-forked').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview-forked/android')
 include ':@react-native-community_blur'
 project(':@react-native-community_blur').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/blur/android')
 include ':lottie-react-native'

app/components/Base/DetailsModal.js

@@ -0,0 +1,127 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import { colors, fontStyles } from '../../styles/common';
+
+import Text from './Text';
+
+const styles = StyleSheet.create({
+	modalContainer: {
+		width: '100%',
+		backgroundColor: colors.white,
+		borderRadius: 10
+	},
+	modalView: {
+		flexDirection: 'column',
+		justifyContent: 'center',
+		alignItems: 'center'
+	},
+	header: {
+		borderBottomWidth: StyleSheet.hairlineWidth,
+		borderColor: colors.grey100,
+		flexDirection: 'row'
+	},
+	title: {
+		flex: 1,
+		textAlign: 'center',
+		fontSize: 18,
+		marginVertical: 12,
+		marginHorizontal: 24,
+		color: colors.fontPrimary,
+		...fontStyles.bold
+	},
+	closeIcon: { paddingTop: 4, position: 'absolute', right: 16 },
+	body: {
+		paddingHorizontal: 15
+	},
+	section: {
+		paddingVertical: 16,
+		flexDirection: 'row'
+	},
+	sectionBorderBottom: {
+		borderBottomColor: colors.grey100,
+		borderBottomWidth: 1
+	},
+	column: {
+		flex: 1
+	},
+	columnEnd: {
+		alignItems: 'flex-end'
+	},
+	sectionTitle: {
+		...fontStyles.normal,
+		fontSize: 10,
+		color: colors.grey500,
+		marginBottom: 8
+	}
+});
+const DetailsModal = ({ children }) => (
+	<View style={styles.modalView}>
+		<View style={styles.modalContainer}>{children}</View>
+	</View>
+);
+
+const DetailsModalHeader = ({ style, ...props }) => <View style={[styles.header, style]} {...props} />;
+const DetailsModalTitle = ({ style, ...props }) => <Text style={[styles.title, style]} {...props} />;
+const DetailsModalCloseIcon = ({ style, ...props }) => (
+	<TouchableOpacity style={[styles.closeIcon, style]} {...props}>
+		<Ionicons name={'ios-close'} size={38} />
+	</TouchableOpacity>
+);
+const DetailsModalBody = ({ style, ...props }) => <View style={[styles.body, style]} {...props} />;
+const DetailsModalSection = ({ style, borderBottom, ...props }) => (
+	<View style={[styles.section, borderBottom && styles.sectionBorderBottom]} {...props} />
+);
+const DetailsModalSectionTitle = ({ style, ...props }) => <Text style={[styles.sectionTitle, style]} {...props} />;
+const DetailsModalColumn = ({ style, end, ...props }) => (
+	<View style={[styles.column, end && styles.columnEnd, style]} {...props} />
+);
+
+DetailsModal.Header = DetailsModalHeader;
+DetailsModal.Title = DetailsModalTitle;
+DetailsModal.CloseIcon = DetailsModalCloseIcon;
+DetailsModal.Body = DetailsModalBody;
+DetailsModal.Section = DetailsModalSection;
+DetailsModal.SectionTitle = DetailsModalSectionTitle;
+DetailsModal.Column = DetailsModalColumn;
+
+/**
+ * Any other external style defined in props will be applied
+ */
+const stylePropType = PropTypes.oneOfType([PropTypes.object, PropTypes.array]);
+
+DetailsModal.propTypes = {
+	children: PropTypes.node
+};
+
+DetailsModalHeader.propTypes = {
+	style: stylePropType
+};
+DetailsModalTitle.propTypes = {
+	style: stylePropType
+};
+DetailsModalCloseIcon.propTypes = {
+	style: stylePropType
+};
+DetailsModalBody.propTypes = {
+	style: stylePropType
+};
+DetailsModalSection.propTypes = {
+	style: stylePropType,
+	/**
+	 * Adds a border to the bottom of the section
+	 */
+	borderBottom: PropTypes.bool
+};
+DetailsModalSectionTitle.propTypes = {
+	style: stylePropType
+};
+DetailsModalColumn.propTypes = {
+	style: stylePropType,
+	/**
+	 * Aligns column content to flex-end
+	 */
+	end: PropTypes.bool
+};
+export default DetailsModal;

app/components/Base/ListItem.js

@@ -0,0 +1,112 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { StyleSheet, View } from 'react-native';
+import Device from '../../util/Device';
+import { colors, fontStyles } from '../../styles/common';
+import Text from './Text';
+
+const styles = StyleSheet.create({
+	wrapper: {
+		padding: 15,
+		minHeight: Device.isIos() ? 95 : 100
+	},
+	date: {
+		color: colors.fontSecondary,
+		fontSize: 12,
+		marginBottom: 10,
+		...fontStyles.normal
+	},
+	content: {
+		flexDirection: 'row'
+	},
+	actions: {
+		flexDirection: 'row',
+		paddingTop: 10,
+		paddingLeft: 40
+	},
+	icon: {
+		flexDirection: 'row',
+		alignItems: 'center'
+	},
+	body: {
+		flex: 1,
+		marginLeft: 15
+	},
+	amounts: {
+		flex: 0.6,
+		alignItems: 'flex-end'
+	},
+	title: {
+		fontSize: 15,
+		color: colors.fontPrimary
+	},
+	amount: {
+		fontSize: 15,
+		color: colors.fontPrimary
+	},
+	fiatAmount: {
+		fontSize: 12,
+		color: colors.fontSecondary,
+		textTransform: 'uppercase'
+	}
+});
+
+const ListItem = ({ style, ...props }) => <View style={[styles.wrapper, style]} {...props} />;
+
+const ListItemDate = ({ style, ...props }) => <Text style={[styles.date, style]} {...props} />;
+const ListItemContent = ({ style, ...props }) => <View style={[styles.content, style]} {...props} />;
+const ListItemActions = ({ style, ...props }) => <View style={[styles.actions, style]} {...props} />;
+const ListItemIcon = ({ style, ...props }) => <View style={[styles.icon, style]} {...props} />;
+const ListItemBody = ({ style, ...props }) => <View style={[styles.body, style]} {...props} />;
+const ListItemTitle = ({ style, ...props }) => <Text style={[styles.title, style]} {...props} />;
+const ListItemAmounts = ({ style, ...props }) => <View style={[styles.amounts, style]} {...props} />;
+const ListItemAmount = ({ style, ...props }) => <Text style={[styles.amount, style]} {...props} />;
+const ListItemFiatAmount = ({ style, ...props }) => <Text style={[styles.fiatAmount, style]} {...props} />;
+
+ListItem.Date = ListItemDate;
+ListItem.Content = ListItemContent;
+ListItem.Actions = ListItemActions;
+ListItem.Icon = ListItemIcon;
+ListItem.Body = ListItemBody;
+ListItem.Title = ListItemTitle;
+ListItem.Amounts = ListItemAmounts;
+ListItem.Amount = ListItemAmount;
+ListItem.FiatAmount = ListItemFiatAmount;
+
+export default ListItem;
+
+/**
+ * Any other external style defined in props will be applied
+ */
+const stylePropType = PropTypes.oneOfType([PropTypes.object, PropTypes.array]);
+
+ListItem.propTypes = {
+	style: stylePropType
+};
+ListItemDate.propTypes = {
+	style: stylePropType
+};
+ListItemContent.propTypes = {
+	style: stylePropType
+};
+ListItemActions.propTypes = {
+	style: stylePropType
+};
+ListItemIcon.propTypes = {
+	style: stylePropType
+};
+ListItemBody.propTypes = {
+	style: stylePropType
+};
+ListItemTitle.propTypes = {
+	style: stylePropType
+};
+ListItemAmounts.propTypes = {
+	style: stylePropType
+};
+ListItemAmount.propTypes = {
+	style: stylePropType
+};
+ListItemFiatAmount.propTypes = {
+	style: stylePropType
+};

app/components/Base/ModalHandler.js

@@ -0,0 +1,17 @@
+import { useState } from 'react';
+
+function ModalHandler({ children }) {
+	const [isVisible, setVisible] = useState(false);
+
+	const showModal = () => setVisible(true);
+	const hideModal = () => setVisible(true);
+	const toggleModal = () => setVisible(!isVisible);
+
+	if (typeof children === 'function') {
+		return children({ isVisible, toggleModal, showModal, hideModal });
+	}
+
+	return children;
+}
+
+export default ModalHandler;

app/components/Base/StatusText.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Text from './Text';
+import { colors } from '../../styles/common';
+import { StyleSheet } from 'react-native';
+import { FIAT_ORDER_STATES } from '../../reducers/fiatOrders';
+import { strings } from '../../../locales/i18n';
+
+const styles = StyleSheet.create({
+	status: {
+		marginTop: 4,
+		fontSize: 12,
+		letterSpacing: 0.5
+	}
+});
+
+export const ConfirmedText = props => <Text bold green style={styles.status} {...props} />;
+export const PendingText = props => <Text bold style={[styles.status, { color: colors.orange }]} {...props} />;
+export const FailedText = props => <Text bold style={[styles.status, { color: colors.red }]} {...props} />;
+
+function StatusText({ status, context, ...props }) {
+	switch (status) {
+		case 'Confirmed':
+		case 'confirmed':
+			return <ConfirmedText>{strings(`${context}.${status}`)}</ConfirmedText>;
+		case 'Pending':
+		case 'pending':
+		case 'Submitted':
+		case 'submitted':
+			return <PendingText>{strings(`${context}.${status}`)}</PendingText>;
+		case 'Failed':
+		case 'Cancelled':
+		case 'failed':
+		case 'cancelled':
+			return <FailedText>{strings(`${context}.${status}`)}</FailedText>;
+
+		case FIAT_ORDER_STATES.COMPLETED:
+			return <ConfirmedText>{strings(`${context}.completed`)}</ConfirmedText>;
+		case FIAT_ORDER_STATES.PENDING:
+			return <PendingText>{strings(`${context}.pending`)}</PendingText>;
+		case FIAT_ORDER_STATES.FAILED:
+			return <FailedText>{strings(`${context}.failed`)}</FailedText>;
+		case FIAT_ORDER_STATES.CANCELLED:
+			return <FailedText>{strings(`${context}.cancelled`)}</FailedText>;
+
+		default:
+			return (
+				<Text bold style={styles.status}>
+					{status}
+				</Text>
+			);
+	}
+}
+
+StatusText.defaultProps = {
+	context: 'transaction'
+};
+
+StatusText.propTypes = {
+	status: PropTypes.string.isRequired,
+	context: PropTypes.string
+};
+
+export default StatusText;