From 3e3a7ac915da20954125e320eae60158e1e648af Mon Sep 17 00:00:00 2001 From: Evan Kaloudis Date: Mon, 10 Apr 2023 14:26:51 -0400 Subject: [PATCH] Components: Modal --- App.tsx | 3 + assets/images/SVG/Copy.svg | 1 + assets/images/SVG/Leaving.svg | 7 ++ components/Modal.tsx | 159 ++++++++++++++++++++++++++++++++++ ios/Podfile.lock | 2 +- locales/en.json | 4 + stores/ModalStore.ts | 33 +++++++ stores/Stores.ts | 3 + utils/UrlUtils.ts | 7 ++ 9 files changed, 218 insertions(+), 1 deletion(-) create mode 100644 assets/images/SVG/Copy.svg create mode 100644 assets/images/SVG/Leaving.svg create mode 100644 components/Modal.tsx create mode 100644 stores/ModalStore.ts 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);