Components: Modal

App.tsx

@@ -3,6 +3,7 @@ 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';
 
 export default class App extends React.PureComponent {
     render() {
@@ -23,9 +24,11 @@ export default class App extends React.PureComponent {
                 MessageSignStore={Stores.messageSignStore}
                 ActivityStore={Stores.activityStore}
                 PosStore={Stores.posStore}
+                ModalStore={Stores.modalStore}
             >
                 <AppContainer>
                     <Navigation />
+                    <Modal />
                 </AppContainer>
             </Provider>
         );

components/Modal.tsx

@@ -0,0 +1,159 @@
+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 ModalStore from '../stores/ModalStore';
+
+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 Clipboard from '@react-native-clipboard/clipboard';
+
+interface ModalProps {
+    ModalStore: ModalStore;
+}
+
+@inject('ModalStore')
+@observer
+export default class ZeusModal extends React.Component<ModalProps, {}> {
+    render() {
+        const { ModalStore } = this.props;
+        const { showModal, modalUrl, closeModal, onPress } = ModalStore;
+
+        return (
+            <ModalBox
+                isOpen={showModal}
+                style={{
+                    backgroundColor: 'transparent',
+                    paddingLeft: 24,
+                    paddingRight: 24,
+                    height: 580
+                }}
+                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
+                            }
+                        }}
+                    >
+                        <Leaving />
+                        <Text
+                            style={{
+                                fontSize: 24,
+                                fontWeight: 'bold',
+                                color: 'black'
+                            }}
+                        >
+                            {localeString('components.Modal.externalLink')}
+                        </Text>
+                        <Text
+                            style={{
+                                marginTop: 20,
+                                marginBottom: 25,
+                                textAlign: 'center'
+                            }}
+                        >
+                            {localeString('components.Modal.proceed')}
+                        </Text>
+                        <TouchableOpacity
+                            style={{
+                                borderWidth: 1,
+                                borderRadius: 5,
+                                marginBottom: 25,
+                                backgroundColor: themeColor('background'),
+                                marginLeft: -25,
+                                marginRight: -25
+                            }}
+                            onPress={() => Clipboard.setString(modalUrl)}
+                        >
+                            <Text
+                                style={{
+                                    padding: 20,
+                                    paddingRight: 45,
+                                    paddingBottom: 5,
+                                    fontWeight: 'bold',
+                                    color: themeColor('text')
+                                }}
+                            >
+                                {localeString('components.Modal.copyLink')}
+                            </Text>
+                            <Text
+                                style={{
+                                    padding: 20,
+                                    paddingRight: 45,
+                                    color: themeColor('text')
+                                }}
+                            >
+                                {modalUrl}
+                            </Text>
+                            <View
+                                style={{
+                                    position: 'absolute',
+                                    right: 10,
+                                    top: 10
+                                }}
+                            >
+                                <Copy
+                                    height="30px"
+                                    width="30px"
+                                    stroke={themeColor('text')}
+                                />
+                            </View>
+                        </TouchableOpacity>
+                        <View style={styles.buttons}>
+                            <View style={styles.button}>
+                                <Button
+                                    title={localeString('general.proceed')}
+                                    onPress={onPress}
+                                    tertiary
+                                ></Button>
+                            </View>
+                            <View style={styles.button}>
+                                <Button
+                                    title={localeString('general.cancel')}
+                                    onPress={closeModal}
+                                ></Button>
+                            </View>
+                        </View>
+                    </View>
+                </View>
+            </ModalBox>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    buttons: {
+        width: '100%'
+    },
+    button: {
+        marginBottom: 20,
+        width: 350
+    }
+});

ios/Podfile.lock

@@ -621,4 +621,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 484ccfa2ce3a7012f09dd892fa52be243e5fcb71
 
-COCOAPODS: 1.11.3
+COCOAPODS: 1.12.0

locales/en.json

@@ -51,6 +51,7 @@
     "general.true": "True",
     "general.false": "False",
     "general.force": "Force",
+    "general.proceed": "Proceed",
     "general.fiatFetchError": "Error fetching exchange rates",
     "components.CollapsedQr.show": "Show QR",
     "components.CollapsedQr.hide": "Hide QR",
@@ -79,6 +80,9 @@
     "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",
     "models.Channel.unknownId": "Unknown Channel ID",
     "models.Invoice.noMemo": "No memo",
     "models.Invoice.seconds": "seconds",

stores/ModalStore.ts

@@ -0,0 +1,33 @@
+import { action, observable } from 'mobx';
+
+export default class ModalStore {
+    @observable public showModal: boolean = false;
+    @observable public modalUrl: string;
+    @observable public clipboardValue: string;
+    @observable public onPress: () => void;
+
+    @action
+    public toggleModal = (status: boolean) => {
+        this.showModal = status;
+    };
+
+    @action
+    public setUrl = (text: string) => {
+        this.modalUrl = text;
+    };
+
+    @action
+    public closeModal = () => {
+        this.showModal = false;
+    };
+
+    @action
+    public setAction = (action: any) => {
+        this.onPress = action;
+    };
+
+    @action
+    public setClipboardValue = (value: string) => {
+        this.clipboardValue = value;
+    };
+}

stores/Stores.ts

@@ -13,6 +13,7 @@ import UTXOsStore from './UTXOsStore';
 import MessageSignStore from './MessageSignStore';
 import ActivityStore from './ActivityStore';
 import PosStore from './PosStore';
+import ModalStore from './ModalStore';
 
 class Stores {
     public channelsStore: ChannelsStore;
@@ -30,9 +31,11 @@ class Stores {
     public messageSignStore: MessageSignStore;
     public activityStore: ActivityStore;
     public posStore: PosStore;
+    public modalStore: ModalStore;
 
     constructor() {
         this.settingsStore = new SettingsStore();
+        this.modalStore = new ModalStore();
         this.fiatStore = new FiatStore(this.settingsStore);
         this.channelsStore = new ChannelsStore(this.settingsStore);
         this.invoicesStore = new InvoicesStore(this.settingsStore);

utils/UrlUtils.ts

@@ -42,6 +42,13 @@ const goToBlockExplorerBlockHash = (hash: string, testnet: boolean) =>
     goToBlockExplorer('block', hash, testnet);
 
 const goToUrl = (url: string) => {
+    stores.modalStore.setUrl(url);
+    stores.modalStore.setClipboardValue(url);
+    stores.modalStore.toggleModal(true);
+    stores.modalStore.setAction(() => leaveZeus(url));
+};
+
+const leaveZeus = (url: string) => {
     Linking.canOpenURL(url).then((supported: boolean) => {
         if (supported) {
             Linking.openURL(url);