diff --git a/App.tsx b/App.tsx
index 7d225162c..ddd92920e 100644
--- a/App.tsx
+++ b/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}
>
+
);
diff --git a/assets/images/SVG/Copy.svg b/assets/images/SVG/Copy.svg
new file mode 100644
index 000000000..c3489f6e5
--- /dev/null
+++ b/assets/images/SVG/Copy.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/assets/images/SVG/Leaving.svg b/assets/images/SVG/Leaving.svg
new file mode 100644
index 000000000..385a71715
--- /dev/null
+++ b/assets/images/SVG/Leaving.svg
@@ -0,0 +1,7 @@
+
diff --git a/components/Modal.tsx b/components/Modal.tsx
new file mode 100644
index 000000000..07c343313
--- /dev/null
+++ b/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 {
+ render() {
+ const { ModalStore } = this.props;
+ const { showModal, modalUrl, closeModal, onPress } = ModalStore;
+
+ return (
+
+
+
+
+
+ {localeString('components.Modal.externalLink')}
+
+
+ {localeString('components.Modal.proceed')}
+
+ Clipboard.setString(modalUrl)}
+ >
+
+ {localeString('components.Modal.copyLink')}
+
+
+ {modalUrl}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+const styles = StyleSheet.create({
+ buttons: {
+ width: '100%'
+ },
+ button: {
+ marginBottom: 20,
+ width: 350
+ }
+});
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index 87750d24c..776f38228 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -621,4 +621,4 @@ SPEC CHECKSUMS:
PODFILE CHECKSUM: 484ccfa2ce3a7012f09dd892fa52be243e5fcb71
-COCOAPODS: 1.11.3
+COCOAPODS: 1.12.0
diff --git a/locales/en.json b/locales/en.json
index 9f87be404..b4531182a 100644
--- a/locales/en.json
+++ b/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",
diff --git a/stores/ModalStore.ts b/stores/ModalStore.ts
new file mode 100644
index 000000000..29da8569d
--- /dev/null
+++ b/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;
+ };
+}
diff --git a/stores/Stores.ts b/stores/Stores.ts
index a69b34e84..65d240266 100644
--- a/stores/Stores.ts
+++ b/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);
diff --git a/utils/UrlUtils.ts b/utils/UrlUtils.ts
index 26cc7d8dd..3e59447d8 100644
--- a/utils/UrlUtils.ts
+++ b/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);