refactor qrcode components

FantomWallet/app.json

@@ -1,5 +1,4 @@
 {
   "name": "FantomWallet",
-  "displayName": "FantomWallet",
-  "expo": { "sdkVersion": "26.0.0" }
+  "displayName": "FantomWallet"
 }

FantomWallet/src/components/QRCode/QRCodeGenerator/index.js

@@ -0,0 +1,37 @@
+// @flow
+import React from 'react';
+import { View, Text, ActivityIndicator, Dimensions } from 'react-native';
+
+import QRCodeWithLogo from '~/components/QRCode/QRCodeWithLogo';
+
+import styles from './styles';
+
+export const DEVICE_WIDTH = Dimensions.get('window').width;
+export const DEVICE_HEIGHT = Dimensions.get('window').height;
+
+type Props = {
+  qrLink: ?string,
+  titleText: string,
+};
+
+const QRGenerator = ({ qrLink, titleText }: Props) => {
+  const renderLoader = (color: string = "#FFF") => (
+    <View style={styles.loaderStyle}>
+      <ActivityIndicator size="large" color={color} />
+    </View>
+  );
+
+  return (
+    <View style={styles.container}>
+      {/* Top heading */}
+      <View style={styles.addressTitleViewStyle}>
+        <Text style={styles.addressTitleTextStyle}> {titleText} </Text>
+      </View>
+
+      {qrLink ? <QRCodeWithLogo content={qrLink} /> : renderLoader()}
+
+    </View>
+  );
+};
+
+export default QRGenerator;

FantomWallet/src/components/QRCode/QRCodeSave/index.js

@@ -0,0 +1,61 @@
+// @flow
+import React, { useRef, useImperativeHandle, forwardRef } from 'react';
+import { View, Text, Alert, ActivityIndicator } from 'react-native';
+import Share from 'react-native-share';
+import ViewShot from 'react-native-view-shot';
+
+import QRCodeWithLogo from '~/components/QRCode/QRCodeWithLogo';
+import styles from './styles';
+
+type Props = {
+  content: string,
+  amount: string
+}
+
+const QRCodeSave = ({ content, amount }: Props, ref: any) => {
+  const viewShot: any = useRef(null);
+
+  const renderLoader = (color: string = "#FFF") => (
+    <View style={styles.loader}>
+      <ActivityIndicator size="large" color={color} />
+    </View>
+  );
+
+  const save = () => {
+    if (!amount || amount === '0') {
+      Alert.alert('Error', 'Please enter billing amount.');
+      return;
+    }
+    viewShot.current.capture().then(uri => {
+      const message = '';
+      Share.open({ url: uri, title: 'Fantom', message })
+        .then(() => { })
+        .catch(() => { });
+    });
+  };
+
+  useImperativeHandle(ref, () => ({
+    onPress: save,
+  }));
+
+  return (
+    <ViewShot
+      ref={viewShot}
+      options={{ format: 'jpg' }}
+      style={styles.viewShot}
+    >
+      <>
+        {content
+          ? <QRCodeWithLogo content={content} />
+          : renderLoader('#000')}
+        <View style={styles.line} />
+        <Text style={styles.textAmount}>
+          Billing amount: {Math.round(Number(amount) * 10000) / 10000} FTM
+          </Text>
+      </>
+    </ViewShot>
+  );
+};
+
+// $FlowFixMe
+export default forwardRef(QRCodeSave);

FantomWallet/src/components/QRCode/QRCodeSave/styles.js

@@ -0,0 +1,31 @@
+import { StyleSheet, Dimensions } from 'react-native';
+
+export const DEVICE_WIDTH = Dimensions.get('window').width;
+export const DEVICE_HEIGHT = Dimensions.get('window').height;
+
+export default StyleSheet.create({
+  loader: {
+    height: 350,
+    flexDirection: 'row',
+    alignSelf: 'center',
+  },
+  viewShot: {
+    position: 'absolute',
+    left: -(DEVICE_WIDTH * 5),
+    top: -(DEVICE_HEIGHT * 5),
+    backgroundColor: 'white',
+  },
+  line: {
+    flex: 1,
+    height: 2,
+    backgroundColor: 'rgb(50, 50, 50)',
+    margin: 10,
+  },
+  textAmount: {
+    margin: 10,
+    marginTop: 0,
+    fontSize: 16,
+    fontWeight: 'bold',
+    width: 230,
+  },
+});

FantomWallet/src/components/QRCode/QRCodeWithLogo/index.js

@@ -0,0 +1,44 @@
+// @flow
+import React from 'react';
+import { View, Image } from 'react-native';
+import { QRCode } from 'react-native-custom-qr-codes';
+
+import FantomLogoTranparentWhite from '~/images/fantom_logo_TranparentWhite.png';
+
+
+const size = 250;
+const logoWidth = 146;
+const logoHeight = 35;
+const logoConatinerStyle = {
+  flexDirection: 'row',
+  width: logoWidth,
+  height: logoHeight,
+  position: 'absolute',
+  left: size / 2 - logoWidth / 2,
+  top: size / 2 - logoHeight / 2,
+  padding: 15,
+  backgroundColor: 'rgb(14,14,18)',
+};
+const logoImgStyle = {
+  alignSelf: 'center',
+  backgroundColor: 'rgb(14,14,18)',
+  flex: 1,
+  height: logoHeight,
+};
+
+type Props = {
+  content: string,
+}
+
+export default ({ content }: Props) => (
+  <View style={{ flex: 1 }}>
+    <QRCode content={content} ecl="M" backgroundColor="white" color="rgb(14,14,18)" />
+    <View style={logoConatinerStyle}>
+      <Image
+        source={FantomLogoTranparentWhite} // eslint-disable-line
+        style={logoImgStyle}
+        resizeMode="contain"
+      />
+    </View>
+  </View>
+);