Merge pull request #1431 from kaloudis/android-nfc-modal

components: AndroidNfcModal
ZeusLN · Apr 13, 2023 · 9f01629 · 9f01629
2 parents 7655d78 + 1e06488
commit 9f01629
Show file tree

Hide file tree

Showing 10 changed files with 289 additions and 109 deletions.
diff --git a/App.tsx b/App.tsx
@@ -3,7 +3,8 @@ import { Provider } from 'mobx-react';
 import Stores from './stores/Stores';
 import Navigation from './Navigation';
 import { AppContainer } from './components/layout/AppContainer';
-import Modal from './components/Modal';
+import ExternalLinkModal from './components/Modals/ExternalLinkModal';
+import AndroidNfcModal from './components/Modals/AndroidNfcModal';
 
 export default class App extends React.PureComponent {
     render() {
@@ -28,7 +29,8 @@ export default class App extends React.PureComponent {
             >
                 <AppContainer>
                     <Navigation />
-                    <Modal />
+                    <ExternalLinkModal />
+                    <AndroidNfcModal />
                 </AppContainer>
             </Provider>
         );

diff --git a/assets/images/SVG/NFC.svg b/assets/images/SVG/NFC.svg
diff --git a/components/Modals/AndroidNfcModal.tsx b/components/Modals/AndroidNfcModal.tsx
@@ -0,0 +1,110 @@
+import React from 'react';
+import { View, StyleSheet, Text } from 'react-native';
+import { inject, observer } from 'mobx-react';
+
+import Button from '../Button';
+import ModalBox from '../ModalBox';
+
+import ModalStore from '../../stores/ModalStore';
+
+import { localeString } from '../../utils/LocaleUtils';
+
+import NFC from '../../assets/images/SVG/NFC.svg';
+
+interface AndroidNfcModalProps {
+    ModalStore: ModalStore;
+}
+
+@inject('ModalStore')
+@observer
+export default class AndroidNfcModal extends React.Component<
+    AndroidNfcModalProps,
+    {}
+> {
+    render() {
+        const { ModalStore } = this.props;
+        const { showAndroidNfcModal, toggleAndroidNfcModal } = ModalStore;
+
+        return (
+            <ModalBox
+                isOpen={showAndroidNfcModal}
+                style={{
+                    backgroundColor: 'transparent',
+                    paddingLeft: 24,
+                    paddingRight: 24,
+                    height: 380
+                }}
+                swipeToClose={false}
+                backButtonClose={false}
+                backdropPressToClose={false}
+                position="bottom"
+                ref="modal"
+            >
+                <View
+                    style={{
+                        flex: 1,
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        marginTop: 22
+                    }}
+                >
+                    <View
+                        style={{
+                            backgroundColor: 'white',
+                            borderRadius: 30,
+                            padding: 35,
+                            alignItems: 'center',
+                            shadowColor: '#000',
+                            shadowOffset: {
+                                width: 0,
+                                height: 2
+                            }
+                        }}
+                    >
+                        <Text
+                            style={{
+                                fontSize: 30,
+                                fontWeight: 'bold',
+                                color: 'darkgrey',
+                                marginBottom: 30
+                            }}
+                        >
+                            {localeString('components.AndroidNfcModal.ready')}
+                        </Text>
+                        <NFC />
+                        <Text
+                            style={{
+                                fontSize: 18,
+                                color: 'black',
+                                marginTop: 30,
+                                marginBottom: 30,
+                                textAlign: 'center'
+                            }}
+                        >
+                            {localeString('components.AndroidNfcModal.hold')}
+                        </Text>
+                        <View style={styles.buttons}>
+                            <View style={styles.button}>
+                                <Button
+                                    title={localeString('general.cancel')}
+                                    onPress={() => toggleAndroidNfcModal(false)}
+                                    quaternary
+                                ></Button>
+                            </View>
+                        </View>
+                    </View>
+                </View>
+            </ModalBox>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    buttons: {
+        width: '100%'
+    },
+    button: {
+        marginBottom: 20,
+        width: 350
+    }
+});
diff --git a/components/Modal.tsx → components/Modals/ExternalLinkModal.tsx b/components/Modal.tsx → components/Modals/ExternalLinkModal.tsx
@@ -2,33 +2,41 @@ import React from 'react';
 import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';
 import { inject, observer } from 'mobx-react';
 
-import Button from './Button';
-import ModalBox from './ModalBox';
+import Button from '../Button';
+import ModalBox from '../ModalBox';
 
-import ModalStore from '../stores/ModalStore';
+import ModalStore from '../../stores/ModalStore';
 
-import { localeString } from '../utils/LocaleUtils';
-import { themeColor } from '../utils/ThemeUtils';
+import { localeString } from '../../utils/LocaleUtils';
+import { themeColor } from '../../utils/ThemeUtils';
 
-import Copy from '../assets/images/SVG/Copy.svg';
-import Leaving from '../assets/images/SVG/Leaving.svg';
+import Copy from '../../assets/images/SVG/Copy.svg';
+import Leaving from '../../assets/images/SVG/Leaving.svg';
 
 import Clipboard from '@react-native-clipboard/clipboard';
 
-interface ModalProps {
+interface ExternalLinkModalProps {
     ModalStore: ModalStore;
 }
 
 @inject('ModalStore')
 @observer
-export default class ZeusModal extends React.Component<ModalProps, {}> {
+export default class ExternalLinkModal extends React.Component<
+    ExternalLinkModalProps,
+    {}
+> {
     render() {
         const { ModalStore } = this.props;
-        const { showModal, modalUrl, closeModal, onPress } = ModalStore;
+        const {
+            showExternalLinkModal,
+            modalUrl,
+            toggleExternalLinkModal,
+            onPress
+        } = ModalStore;
 
         return (
             <ModalBox
-                isOpen={showModal}
+                isOpen={showExternalLinkModal}
                 style={{
                     backgroundColor: 'transparent',
                     paddingLeft: 24,
@@ -70,7 +78,9 @@ export default class ZeusModal extends React.Component<ModalProps, {}> {
                                 color: 'black'
                             }}
                         >
-                            {localeString('components.Modal.externalLink')}
+                            {localeString(
+                                'components.ExternalLinkModal.externalLink'
+                            )}
                         </Text>
                         <Text
                             style={{
@@ -79,7 +89,9 @@ export default class ZeusModal extends React.Component<ModalProps, {}> {
                                 textAlign: 'center'
                             }}
                         >
-                            {localeString('components.Modal.proceed')}
+                            {localeString(
+                                'components.ExternalLinkModal.proceed'
+                            )}
                         </Text>
                         <TouchableOpacity
                             style={{
@@ -101,7 +113,9 @@ export default class ZeusModal extends React.Component<ModalProps, {}> {
                                     color: themeColor('text')
                                 }}
                             >
-                                {localeString('components.Modal.copyLink')}
+                                {localeString(
+                                    'components.ExternalLinkModal.copyLink'
+                                )}
                             </Text>
                             <Text
                                 style={{
@@ -137,7 +151,9 @@ export default class ZeusModal extends React.Component<ModalProps, {}> {
                             <View style={styles.button}>
                                 <Button
                                     title={localeString('general.cancel')}
-                                    onPress={closeModal}
+                                    onPress={() =>
+                                        toggleExternalLinkModal(false)
+                                    }
                                 ></Button>
                             </View>
                         </View>

diff --git a/locales/en.json b/locales/en.json
@@ -81,9 +81,11 @@
     "components.QRCodeScanner.cameraPermissionTitle": "Permission to use camera",
     "components.QRCodeScanner.cameraPermission": "We need your permission to use your camera",
     "components.QRCodeScanner.noCameraAccess": "No access to camera",
-    "components.Modal.externalLink": "You're about to leave Zeus",
-    "components.Modal.proceed": "Proceed to the following URL?",
-    "components.Modal.copyLink": "Copy Link",
+    "components.ExternalLinkModal.externalLink": "You're about to leave Zeus",
+    "components.ExternalLinkModal.proceed": "Proceed to the following URL?",
+    "components.ExternalLinkModal.copyLink": "Copy Link",
+    "components.AndroidNfcModal.ready": "Ready to scan",
+    "components.AndroidNfcModal.hold": "Hold your Android phone near an NFC tag to read it",
     "models.Channel.unknownId": "Unknown Channel ID",
     "models.Invoice.noMemo": "No memo",
     "models.Invoice.seconds": "seconds",

diff --git a/stores/ModalStore.ts b/stores/ModalStore.ts
@@ -1,26 +1,23 @@
 import { action, observable } from 'mobx';
 
 export default class ModalStore {
-    @observable public showModal: boolean = false;
+    @observable public showExternalLinkModal: boolean = false;
+    @observable public showAndroidNfcModal: boolean = false;
     @observable public modalUrl: string;
     @observable public clipboardValue: string;
     @observable public onPress: () => void;
 
+    /* External Link Modal */
     @action
-    public toggleModal = (status: boolean) => {
-        this.showModal = status;
+    public toggleExternalLinkModal = (status: boolean) => {
+        this.showExternalLinkModal = status;
     };
 
     @action
     public setUrl = (text: string) => {
         this.modalUrl = text;
     };
 
-    @action
-    public closeModal = () => {
-        this.showModal = false;
-    };
-
     @action
     public setAction = (action: any) => {
         this.onPress = action;
@@ -30,4 +27,10 @@ export default class ModalStore {
     public setClipboardValue = (value: string) => {
         this.clipboardValue = value;
     };
+
+    /* Android NFC Modal */
+    @action
+    public toggleAndroidNfcModal = (status: boolean) => {
+        this.showAndroidNfcModal = status;
+    };
 }
diff --git a/utils/UrlUtils.ts b/utils/UrlUtils.ts
@@ -44,7 +44,7 @@ const goToBlockExplorerBlockHash = (hash: string, testnet: boolean) =>
 const goToUrl = (url: string) => {
     stores.modalStore.setUrl(url);
     stores.modalStore.setClipboardValue(url);
-    stores.modalStore.toggleModal(true);
+    stores.modalStore.toggleExternalLinkModal(true);
     stores.modalStore.setAction(() => leaveZeus(url));
 };