diff --git a/src/components/AvatarHeader.tsx b/src/components/AvatarHeader.tsx index a3d747b9..ded08454 100644 --- a/src/components/AvatarHeader.tsx +++ b/src/components/AvatarHeader.tsx @@ -1,6 +1,6 @@ import { observer } from "mobx-react-lite" import React from "react" -import { ColorValue, Image, TextStyle, View, ViewStyle } from "react-native" +import { ColorValue, Image, Pressable, TextStyle, View, ViewStyle } from "react-native" import { Icon, Text } from "." import { spacing, useThemeColor } from "../theme" import { getImageSource } from '../utils/utils' @@ -10,6 +10,10 @@ import { iconRegistry } from '.' export interface AvatarHeaderProps { heading?: string, text?: string, + /** will have no effect if text is falsy */ + onTextPress?: () => void, + /** will have no effect if text is falsy */ + onTextLongPress?: () => void, picture?: string /** default is 96 for pic, 48 for icon - another option is 90 or 80 */ pictureHeight?: number, @@ -58,7 +62,9 @@ export const AvatarHeader = observer(function (props: AvatarHeaderProps) { )} {props.heading && } - {props.text && } + {props.text && + + } {props.children} ) diff --git a/src/components/QRShareModal.tsx b/src/components/QRShareModal.tsx new file mode 100644 index 00000000..0281156f --- /dev/null +++ b/src/components/QRShareModal.tsx @@ -0,0 +1,83 @@ +import React, { useState } from 'react' +import { View } from 'react-native' +import type { TextStyle } from 'react-native'; + +import { BottomModal } from './BottomModal'; +import { Text } from './Text'; +import { QRCodeBlock, QRCodeBlockTypes } from '../screens/Wallet/QRCode'; +import { spacing, useThemeColor } from '../theme'; +import { translate, TxKeyPath } from '../i18n'; + +interface QRShareModalProps { + url: string, + isVisible?: boolean, + onClose?: () => void, + type: QRCodeBlockTypes + shareModalTitle?: string, + shareModalTx?: TxKeyPath, + subHeading?: string, + label?: string + labelTx?: TxKeyPath, + size?: number, +} + +export const QRShareModal = (props: QRShareModalProps) => { + const labelText = useThemeColor('textDim') + const { + url, + isVisible = true, + onClose = () => {}, + shareModalTitle, + shareModalTx, + subHeading, + type, + label, + labelTx, + size + } = props + + let finalTx: TxKeyPath | undefined = shareModalTx + if (!shareModalTx && !shareModalTitle) finalTx = 'common.share' + + return ( + + + + + {(label || labelTx) && + + } + + + } + onBackButtonPress={onClose} + onBackdropPress={onClose} + /> + ) +} + +const $newContainer: TextStyle = { + alignSelf: 'stretch', +} \ No newline at end of file diff --git a/src/screens/MintInfoScreen.tsx b/src/screens/MintInfoScreen.tsx index 4a441575..d42c96f3 100644 --- a/src/screens/MintInfoScreen.tsx +++ b/src/screens/MintInfoScreen.tsx @@ -33,6 +33,7 @@ import AppError, { Err } from '../utils/AppError' import { useHeader } from '../utils/useHeader' import { CurrencySign } from './Wallet/CurrencySign' import { SvgXml } from 'react-native-svg' +import { QRShareModal } from '../components/QRShareModal' if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) { @@ -368,6 +369,7 @@ export const MintInfoScreen: FC> = observer const [mintInfo, setMintInfo] = useState() const [mint, setMint] = useState() const [isLocalInfoVisible, setIsLocalInfoVisible] = useState(false) + const [shareModalVisible, setShareModalVisible] = useState(false) const [error, setError] = useState() const [info, setInfo] = useState('') @@ -415,6 +417,9 @@ export const MintInfoScreen: FC> = observer setIsLocalInfoVisible(!isLocalInfoVisible) } + const openShareModal = () => { setShareModalVisible(true) } + const closeShareModal = () => { setShareModalVisible(false) } + const handleError = function (e: AppError): void { setIsLoading(false) setError(e) @@ -442,7 +447,10 @@ export const MintInfoScreen: FC> = observer } headerHeightModifier={0.26} heading={mintInfo?.name ?? translate('mintInfo.loadingNamePlaceholder')} - text={route.params.mintUrl}> + text={route.params.mintUrl} + onTextPress={openShareModal} + onTextLongPress={openShareModal} + > {mint?.units ? ( {mint.units.map(unit => ( @@ -515,6 +523,14 @@ export const MintInfoScreen: FC> = observer } /> + {error && } {info && } diff --git a/src/screens/MintsScreen.tsx b/src/screens/MintsScreen.tsx index 6650c699..0ae32b74 100644 --- a/src/screens/MintsScreen.tsx +++ b/src/screens/MintsScreen.tsx @@ -31,8 +31,7 @@ import { SvgXml } from 'react-native-svg' import { isStateTreeNode } from 'mobx-state-tree' import { MintKeyset } from '@cashu/cashu-ts' import { QRCodeBlock } from './Wallet/QRCode' - - +import { QRShareModal } from '../components/QRShareModal' export const MintsScreen: FC> = observer(function MintsScreen({route, navigation}) { useHeader({ @@ -47,11 +46,12 @@ export const MintsScreen: FC> = observer(funct const [mintUrl, setMintUrl] = useState('') const [defaultMintUrl, setDefaultMintUrl] = useState(MINIBITS_MINT_URL) const [selectedMint, setSelectedMint] = useState() - const [sharingMint, setSharingMint] = useState() + const [lastSelectedMint, setLastSelectedMint] = useState() const [info, setInfo] = useState('') const [error, setError] = useState() const [isLoading, setIsLoading] = useState(false) const [isAddMintVisible, setIsAddMintVisible] = useState(false) + const [shareModalVisible, setShareModalVisible] = useState(false) const toggleAddMintModal = async function () { @@ -75,15 +75,15 @@ export const MintsScreen: FC> = observer(funct const gotoScan = function () { - toggleAddMintModal() - navigation.navigate('WalletNavigator', {screen: 'Scan'}) + toggleAddMintModal() + navigation.navigate('WalletNavigator', {screen: 'Scan'}) } const gotoInfo = function () { - if(!selectedMint) {return} - navigation.navigate('MintInfo', {mintUrl: selectedMint?.mintUrl}) - onMintUnselect() + if(!selectedMint) {return} + navigation.navigate('MintInfo', {mintUrl: selectedMint?.mintUrl}) + onMintUnselect() } @@ -247,20 +247,22 @@ export const MintsScreen: FC> = observer(funct } } - const shareMint = function () { - // setSelectedMint(void 0) - setSharingMint(selectedMint?.mintUrl) - } - const onMintSelect = function (mint: Mint) { setSelectedMint(mint) + setLastSelectedMint(mint) } const onMintUnselect = function () { setSelectedMint(undefined) } + const openShareModal = () => { + setSelectedMint(void 0) + setShareModalVisible(true) + } + const closeShareModal = () => { setShareModalVisible(false) } + const handleError = function (e: AppError) { setIsLoading(false) setError(e) @@ -379,7 +381,7 @@ export const MintsScreen: FC> = observer(funct />*/} > = observer(funct onPress={onCopyMintUrl} tx='mintsScreen.copy' bottomSeparator={true} - style={{paddingHorizontal: spacing.medium}} + style={{paddingHorizontal: spacing.medium}}j /> > = observer(funct onBackButtonPress={toggleAddMintModal} onBackdropPress={toggleAddMintModal} /> - {/* TODO fix */} - - -