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>
         );

assets/images/SVG/Copy.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" data-v-4fa90e7f="" style="--darkreader-inline-stroke: currentColor;" data-darkreader-inline-stroke=""><rect width="9" height="13" x="6.5" y="6.5" rx="1.5"></rect><path d="M8.5 6A1.5 1.5 0 0110 4.5h6A1.5 1.5 0 0117.5 6v10a1.5 1.5 0 01-1.5 1.5"></path></svg>

assets/images/SVG/Leaving.svg

@@ -0,0 +1,7 @@
+<svg width="160" height="152" viewBox="0 0 160 152" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32 96.5311V106.352C32 107.355 32.813 108.17 33.8181 108.17H58.9481C59.9528 108.17 60.7662 107.354 60.7662 106.352V96.4295L65.9384 99.8246V114.873C65.9384 115.876 66.7518 116.691 67.7565 116.691H77.0002C77.4864 116.691 77.9483 116.497 78.291 116.154C78.6338 115.812 78.8221 115.347 78.8183 114.862L78.6745 93.6333C78.6711 93.0386 78.3782 92.4843 77.8866 92.1472L67.8714 85.265L69.0592 83.6333V84.1145C69.0592 85.12 69.8714 85.9327 70.8773 85.9327H91.0078C92.0145 85.9327 92.826 85.1197 92.826 84.1145V75.1604C92.826 74.1564 92.0145 73.3422 91.0078 73.3422H80.4059V65.7729C80.4059 65.1817 80.1217 64.6296 79.6371 64.2876L68.8043 56.6331C68.4969 56.4166 68.1313 56.3002 67.755 56.3002H44.2169C43.211 56.3002 42.3987 57.1151 42.3987 58.1183V78.77C42.3987 79.7694 43.2056 80.5809 44.2054 80.5878L47.5515 80.6076C47.3917 80.8861 47.3057 81.2075 47.3091 81.5309L47.435 94.7145H33.8181C32.8149 94.7126 32 95.5275 32 96.5311ZM55.1569 68.0213H56.4459L55.1782 69.8147L55.1569 68.0213ZM35.6363 98.3489H49.2707C49.7565 98.3489 50.2199 98.1556 50.5634 97.8109C50.9051 97.4666 51.0945 96.9994 51.0888 96.5151L50.9511 82.0814L61.4438 67.2547C61.836 66.7 61.8851 65.9726 61.5724 65.3688C61.2616 64.7655 60.6376 64.3854 59.9574 64.3854H53.3167C52.8294 64.3854 52.3656 64.5798 52.024 64.926C51.6823 65.2714 51.4932 65.7383 51.4986 66.2256L51.591 74.2016L49.4879 76.9823L46.0369 76.9629V59.9365H67.1824L76.7731 66.7149V75.1604C76.7731 76.1636 77.5865 76.9785 78.5912 76.9785H89.1931V82.2964H72.697V78.0491C72.697 77.2608 72.191 76.5638 71.4419 76.3196C70.7023 76.0784 69.8748 76.342 69.4096 76.9785L63.8353 84.6331C63.5477 85.0291 63.4297 85.5282 63.513 86.0091C63.5944 86.4934 63.8699 86.9214 64.2747 87.2022L75.0477 94.6083L75.171 113.058H69.5762V98.845C69.5762 98.2344 69.2673 97.6625 68.7567 97.3251L59.9475 91.5484C59.389 91.1847 58.6761 91.1547 58.0856 91.4704C57.4978 91.7885 57.133 92.4025 57.133 93.0702V104.54H35.6363V98.3489Z" fill="black"/>
+<path d="M70.6152 51.1489C70.6152 57.1866 75.5275 62.0997 81.5667 62.0997C87.6036 62.0997 92.5167 57.1866 92.5167 51.1489C92.5167 45.1086 87.6036 40.1963 81.5667 40.1963C75.5275 40.1963 70.6152 45.1086 70.6152 51.1489ZM74.2515 51.1489C74.2515 47.1139 77.5329 43.833 81.5667 43.833C85.5975 43.833 88.8808 47.1143 88.8808 51.1489C88.8808 55.1832 85.5975 58.4634 81.5667 58.4634C77.5329 58.4638 74.2515 55.1813 74.2515 51.1489Z" fill="black"/>
+<path d="M56.6602 112.332V123.273C56.6602 124.78 57.8818 126 59.3872 126H116.634C118.14 126 119.361 124.78 119.361 123.273V28.727C119.361 27.2197 118.14 26 116.634 26H59.5257C58.0199 26 56.7986 27.2197 56.7986 28.727V52.4676H62.2531V31.4544H113.907V120.546H62.1146V112.332H56.6602Z" fill="black"/>
+<path d="M130.503 19.1397C130.503 19.1397 136.735 10.5588 143.911 6.4326L159.824 12.4696C159.824 12.4696 149.177 16.2934 145.328 19.1915L154.742 22.4201C154.742 22.4201 135.979 26.4626 126.698 34.7774C126.698 34.7774 129.3 25.7809 137.102 21.1954L130.503 19.1397Z" fill="#FFD93F"/>
+<path d="M45.3208 19.2363C45.3208 19.2363 39.089 10.6555 31.9131 6.52928L15.9999 12.5663C15.9999 12.5663 26.6469 16.3901 30.4958 19.2882L21.0821 22.5168C21.0821 22.5168 39.845 26.5592 49.126 34.8741C49.126 34.8741 46.5242 25.8775 38.7221 21.292L45.3208 19.2363Z" fill="#FFD93F"/>
+</svg>

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);