Small style fixes and update new contact state

package.json

@@ -38,14 +38,14 @@
 		"@bugsnag/expo": "^48.1.0",
 		"@cashu/cashu-ts": "^0.8.0-rc.4",
 		"@expo/metro-config": "^0.7.1",
-		"@react-native-async-storage/async-storage": "^1.17.11",
-		"@react-native-community/netinfo": "^9.3.7",
-		"@react-native-picker/picker": "^2.4.8",
+		"@react-native-async-storage/async-storage": "1.17.11",
+		"@react-native-community/netinfo": "9.3.7",
+		"@react-native-picker/picker": "2.4.8",
 		"@react-navigation/core": "^6.4.8",
 		"@react-navigation/drawer": "^6.6.2",
 		"@react-navigation/native": "^6.1.6",
 		"@react-navigation/native-stack": "^6.9.12",
-		"@shopify/flash-list": "^1.4.0",
+		"@shopify/flash-list": "1.4.0",
 		"axios": "^1.4.0",
 		"expo": "^48.0.19",
 		"expo-application": "^5.1.1",
@@ -63,13 +63,13 @@
 		"expo-sqlite": "^11.1.1",
 		"expo-status-bar": "^1.4.4",
 		"react": "^18.2.0",
-		"react-native": "^0.71.8",
-		"react-native-gesture-handler": "^2.9.0",
+		"react-native": "0.71.8",
+		"react-native-gesture-handler": "~2.9.0",
 		"react-native-qrcode-svg": "^6.2.0",
-		"react-native-reanimated": "^2.14.4",
-		"react-native-safe-area-context": "^4.5.0",
-		"react-native-screens": "^3.20.0",
-		"react-native-svg": "^13.4.0",
+		"react-native-reanimated": "~2.14.4",
+		"react-native-safe-area-context": "4.5.0",
+		"react-native-screens": "~3.20.0",
+		"react-native-svg": "13.4.0",
 		"react-native-url-polyfill": "^1.3.0",
 		"text-encoding-polyfill": "^0.6.7"
 	},
@@ -81,20 +81,20 @@
 		"@testing-library/react-native": "^12.1.2",
 		"@types/babel__core": "^7.20.1",
 		"@types/jest": "^29.5.2",
-		"@types/node": "^20.3.0",
-		"@types/react": "^18.0.27",
+		"@types/node": "^20.3.1",
+		"@types/react": "~18.0.27",
 		"@types/sqlite3": "^3.1.8",
-		"@typescript-eslint/eslint-plugin": "^5.59.9",
-		"@typescript-eslint/parser": "^5.59.9",
-		"dotenv": "^16.1.4",
-		"eslint": "^8.42.0",
+		"@typescript-eslint/eslint-plugin": "^5.60.0",
+		"@typescript-eslint/parser": "^5.60.0",
+		"dotenv": "^16.3.1",
+		"eslint": "^8.43.0",
 		"eslint-plugin-compat": "^4.1.4",
 		"eslint-plugin-deprecate": "^0.7.0",
 		"eslint-plugin-es5": "^1.5.0",
 		"eslint-plugin-eslint-plugin": "^5.1.0",
 		"eslint-plugin-html": "^7.1.0",
 		"eslint-plugin-import": "^2.27.5",
-		"eslint-plugin-jest": "^27.2.1",
+		"eslint-plugin-jest": "^27.2.2",
 		"eslint-plugin-jsdoc": "^46.2.6",
 		"eslint-plugin-json": "^3.1.0",
 		"eslint-plugin-node": "^11.1.0",

src/components/App.tsx

@@ -243,7 +243,7 @@ function _App(_initialProps: IInitialProps) {
 							<Navigator />
 							<StatusBar style="auto" />
 							{/* claim token if app comes to foreground and clipboard has valid cashu token */}
-							<MyModal type='question' visible={claimOpen}>
+							<MyModal type='question' visible={claimOpen} close={() => setClaimOpen(false)}>
 								<Text style={globals(color, highlight).modalHeader}>
 									Found a cashu token in your clipboard
 								</Text>

src/components/Button.tsx

@@ -44,13 +44,13 @@ interface IIconBtnProps {
 }
 
 export function IconBtn({ icon, onPress, testId }: IIconBtnProps) {
-	const { color, highlight } = useContext(ThemeContext)
+	const { highlight } = useContext(ThemeContext)
 	return (
 		<SafeAreaView>
 			<TouchableOpacity
 				accessibilityRole='button'
 				activeOpacity={.5}
-				style={[styles.iconBtn, { backgroundColor: color.BACKGROUND, borderColor: hi[highlight] }]}
+				style={[styles.iconBtn, { backgroundColor: hi[highlight], borderColor: hi[highlight] }]}
 				onPress={onPress}
 				testID={testId}
 			>

src/components/InitialModal.tsx

@@ -15,7 +15,7 @@ interface IInitialModalProps {
 export default function InitialModal({ visible, onConfirm, onCancel }: IInitialModalProps) {
 	const { color, highlight } = useContext(ThemeContext)
 	return (
-		<MyModal type='bottom' animation='slide' visible={visible}>
+		<MyModal type='bottom' animation='slide' visible={visible} close={onCancel}>
 			<Text style={globals(color, highlight).modalHeader}>
 				Get started
 			</Text>

src/components/modal/OptsModal.tsx

@@ -25,7 +25,7 @@ export default function OptsModal({
 }: IOptsModal) {
 	const { color, highlight } = useContext(ThemeContext)
 	return (
-		<MyModal type='bottom' animation='slide' visible={visible}>
+		<MyModal type='bottom' animation='slide' visible={visible} close={onPressCancel}>
 			<View style={{ marginVertical: 10 }} />
 			<ActionButtons
 				topBtnTxt={button1Txt}

src/components/modal/Question.tsx

@@ -19,7 +19,7 @@ interface IQuestionModalProps {
 export function QuestionModal({ header, txt, visible, confirmTxt, confirmFn, cancelTxt, cancelFn }: IQuestionModalProps) {
 	const { color, highlight } = useContext(ThemeContext)
 	return (
-		<MyModal type='question' animation='fade' visible={visible} >
+		<MyModal type='question' animation='fade' visible={visible} close={cancelFn} >
 			<Text style={[globals(color).modalHeader, !txt?.length ? { marginBottom: 0 } : {}]}>
 				{header}
 			</Text>

src/components/modal/TrustMint.tsx

@@ -18,7 +18,7 @@ interface ITrustModalProps {
 export default function TrustMintModal({ loading, tokenInfo, handleTrustModal, closeModal }: ITrustModalProps) {
 	const { color, highlight } = useContext(ThemeContext)
 	return (
-		<MyModal type='question' animation='fade' visible>
+		<MyModal type='question' animation='fade' visible close={closeModal}>
 			<Text style={globals(color, highlight).modalHeader}>
 				Do you want to trust this mint?
 			</Text>

src/components/modal/index.tsx

@@ -10,6 +10,7 @@ interface IMyModalProps {
 	visible: boolean
 	success?: boolean
 	isContactList?: boolean
+	close?: () => void
 	children: React.ReactNode
 }
 
@@ -19,6 +20,7 @@ export default function MyModal({
 	visible,
 	success,
 	isContactList,
+	close,
 	children
 }: IMyModalProps) {
 
@@ -52,9 +54,10 @@ export default function MyModal({
 		visible ?
 			<View style={styles(color, highlight).modalParent}>
 				<Modal
+					visible
+					transparent
 					animationType={animation}
-					transparent={true}
-					visible={visible}
+					onRequestClose={close}
 				>
 					<KeyboardAvoidingView
 						style={getCorrectStyle()}

src/components/screens/Addressbook/Book.tsx

@@ -31,21 +31,27 @@ export default function AddressBook({ nav, isModal, closeModal, setInput }: IAdd
 		isOwner: false,
 	})
 	// new contact input
-	const [newContactName, setNewContactName] = useState('')
-	const [newContactLN, setNewContactLN] = useState('')
+	const [newContact, setNewContact] = useState({
+		name: '',
+		lnUrl: ''
+	})
 	const { prompt, openPromptAutoClose } = usePrompt()
 	const handleNewContact = async () => {
-		if (!isLnurl(newContactLN)) {
+		const contact = {
+			name: newContact.name.trim(),
+			lnUrl: newContact.lnUrl.trim(),
+		}
+		if (!isLnurl(contact.lnUrl)) {
 			openPromptAutoClose({ msg: 'Invalid LNURL!', ms: 1500 })
 			return
 		}
-		if (!newContactName && !openNew.isOwner) {
+		if (!contact.name && !openNew.isOwner) {
 			openPromptAutoClose({ msg: 'Invalid name!', ms: 1500 })
 			return
 		}
 		const success = await addContact({
-			name: openNew.isOwner ? 'Personal LNURL' : newContactName,
-			ln: newContactLN,
+			name: openNew.isOwner ? 'Personal LNURL' : contact.name,
+			ln: contact.lnUrl,
 			isOwner: openNew.isOwner
 		})
 		if (!success) {
@@ -163,14 +169,19 @@ export default function AddressBook({ nav, isModal, closeModal, setInput }: IAdd
 			{!isModal &&
 				<View style={styles.newContactBtn}>
 					<IconBtn
-						icon={<PlusIcon width={15} height={15} color={hi[highlight]} />}
+						icon={<PlusIcon width={15} height={15} color='#FAFAFA' />}
 						onPress={() => setOpenNew({ open: true, isOwner: false })}
 						testId='testNewContact'
 					/>
 				</View>
 			}
 			{/* Add new contact modal */}
-			<MyModal type='bottom' animation='slide' visible={openNew.open && !prompt.open}>
+			<MyModal
+				type='bottom'
+				animation='slide'
+				visible={openNew.open && !prompt.open}
+				close={() => setOpenNew({ open: false, isOwner: false })}
+			>
 				<Text style={globals(color).modalHeader}>
 					{openNew.isOwner ? 'Your LNURL' : 'New contact'}
 				</Text>
@@ -180,15 +191,15 @@ export default function AddressBook({ nav, isModal, closeModal, setInput }: IAdd
 						placeholder="Name"
 						placeholderTextColor={color.INPUT_PH}
 						selectionColor={hi[highlight]}
-						onChangeText={setNewContactName}
+						onChangeText={name => setNewContact(prev => ({ ...prev, name }))}
 					/>
 				}
 				<TextInput
 					style={[globals(color).input, { marginBottom: 20 }]}
 					placeholder="[email protected]"
 					placeholderTextColor={color.INPUT_PH}
 					selectionColor={hi[highlight]}
-					onChangeText={setNewContactLN}
+					onChangeText={lnUrl => setNewContact(prev => ({ ...prev, lnUrl }))}
 				/>
 				<Button txt='Save' onPress={() => void handleNewContact()} />
 				<TouchableOpacity
@@ -270,7 +281,7 @@ const styles = StyleSheet.create({
 	},
 	addOwnAddress: {
 		paddingVertical: 10,
-		marginRight: 16,
+		marginHorizontal: 20,
 	},
 	nameEntry: {
 		width: '100%',

src/components/screens/Addressbook/Contact.tsx

@@ -50,6 +50,13 @@ export default function ContactPage({ navigation, route }: IContactPageProps) {
 			setOpenEdit(false)
 		}
 	}
+	const handleEditCancel = () => {
+		setOpenEdit(false)
+		setEditContact({
+			name: route.params.contact?.name,
+			ln: route.params.contact?.ln
+		})
+	}
 	useEffect(() => {
 		setEditContact({
 			name: route.params.contact?.name,
@@ -96,7 +103,12 @@ export default function ContactPage({ navigation, route }: IContactPageProps) {
 				</TouchableOpacity>
 			</View>
 			{/* Edit contact modal */}
-			<MyModal type='bottom' animation='slide' visible={openEdit && !prompt.open}>
+			<MyModal
+				type='bottom'
+				animation='slide'
+				visible={openEdit && !prompt.open}
+				close={handleEditCancel}
+			>
 				<Text style={globals(color).modalHeader}>
 					Edit contact
 				</Text>
@@ -122,13 +134,7 @@ export default function ContactPage({ navigation, route }: IContactPageProps) {
 				/>
 				<TouchableOpacity
 					style={styles.cancel}
-					onPress={() => {
-						setOpenEdit(false)
-						setEditContact({
-							name: route.params.contact?.name,
-							ln: route.params.contact?.ln
-						})
-					}}
+					onPress={handleEditCancel}
 				>
 					<Text style={globals(color, highlight).pressTxt}>
 						Cancel

src/components/screens/Addressbook/modal.tsx

@@ -9,7 +9,7 @@ interface IAddressBookModalProps {
 
 export default function AddressbookModal({ closeModal, setInput }: IAddressBookModalProps) {
 	return (
-		<MyModal type='invoiceAmount' animation='slide' visible isContactList>
+		<MyModal type='invoiceAmount' animation='slide' visible isContactList close={closeModal}>
 			<AddressBook
 				isModal
 				closeModal={closeModal}

src/components/screens/History/Details.tsx

@@ -230,7 +230,7 @@ export default function DetailsPage({ navigation, route }: THistoryEntryPageProp
 				</View>
 			</ScrollView>
 			<BottomNav navigation={navigation} route={route} />
-			<MyModal type='question' visible={qr.open}>
+			<MyModal type='question' visible={qr.open} close={() => setQr({ open: false, error: false })}>
 				{qr.error ?
 					<Txt txt='The amount of data is too big for a QR code.' styles={[{ textAlign: 'center' }]} />
 					:

src/components/screens/Lightning/modal.tsx

@@ -86,7 +86,13 @@ export function InvoiceModal({ visible, invoice, mintUrl, close }: IInvoiceModal
 		}
 	}, [expiry, expiryTime])
 	return (
-		<MyModal type='invoiceAmount' animation='fade' visible={visible} success={paid === 'paid' || mintUrl === _mintUrl}>
+		<MyModal
+			type='invoiceAmount'
+			animation='fade'
+			visible={visible}
+			success={paid === 'paid' || mintUrl === _mintUrl}
+			close={close}
+		>
 			{invoice.decoded && mintUrl !== _mintUrl && (!paid || paid === 'unpaid') ?
 				<View style={styles.container}>
 					<View style={styles.invoiceWrap}>
@@ -174,6 +180,10 @@ export function CoinSelectionModal({ mint, lnAmount, disableCS, proofs, setProof
 	const { color, highlight } = useContext(ThemeContext)
 	const [visible, setVisible] = useState(true)
 	const [mintKeysetId, setMintKeysetId] = useState('')
+	const cancelCoinSelection = () => {
+		setVisible(false)
+		disableCS()
+	}
 	// get the active keysetid of a mint once on initial render to compare with the proof keysets in the list
 	useEffect(() => {
 		if (!mint?.mintUrl) { return }
@@ -182,17 +192,14 @@ export function CoinSelectionModal({ mint, lnAmount, disableCS, proofs, setProof
 		})()
 	}, [mint?.mintUrl])
 	return (
-		<MyModal type='invoiceAmount' animation='slide' visible={visible}>
+		<MyModal type='invoiceAmount' animation='slide' visible={visible} close={cancelCoinSelection}>
 			<View style={styles.proofContainer}>
 				<View style={styles.header}>
 					<Text style={globals(color).navTxt}>
 						Coin selection
 					</Text>
 					<TouchableOpacity
-						onPress={() => {
-							setVisible(false)
-							disableCS()
-						}}
+						onPress={cancelCoinSelection}
 					>
 						<Text style={globals(color, highlight).pressTxt}>
 							Cancel

src/components/screens/Lightning/scannedQR.tsx

@@ -127,7 +127,7 @@ export default function ScannedQRDetails({ lnDecoded, closeDetails, nav }: IScan
 		}
 	}, [timeLeft])
 	return (
-		<MyModal type='invoiceAmount' animation='slide' visible>
+		<MyModal type='invoiceAmount' animation='slide' visible close={closeDetails}>
 			<View style={styles.topContainer}>
 				<Text style={globals(color, highlight).modalHeader}>
 					Lightning payment request

src/components/screens/Mints/MintManagement.tsx

@@ -312,7 +312,7 @@ export default function MintManagement({ navigation, route }: TMintManagementPag
 			}
 			{/* Custom mint name */}
 			{customNameOpen &&
-				<MyModal type='bottom' animation='slide' visible={true}>
+				<MyModal type='bottom' animation='slide' visible close={() => setCustomNameOpen(false)}>
 					<Text style={globals(color).modalHeader}>
 						{edit ? 'Edit mint name' : 'Add a custom name'}
 					</Text>

src/components/screens/Mints/index.tsx

@@ -179,7 +179,12 @@ export default function Mints({ navigation, route }: TMintsPageProps) {
 				</View>
 			</View>
 			{/* Submit new mint URL modal */}
-			<MyModal type='bottom' animation='slide' visible={newMintModal && !prompt.open}>
+			<MyModal
+				type='bottom'
+				animation='slide'
+				visible={newMintModal && !prompt.open}
+				close={() => setNewMintModal(false)}
+			>
 				<Text style={globals(color).modalHeader}>
 					Add a new mint
 				</Text>
@@ -209,7 +214,7 @@ export default function Mints({ navigation, route }: TMintsPageProps) {
 			{/* add new mint button */}
 			<View style={styles.newMint}>
 				<IconBtn
-					icon={<PlusIcon width={15} height={15} color={hi[highlight]} />}
+					icon={<PlusIcon width={15} height={15} color='#FAFAFA' />}
 					onPress={() => setNewMintModal(true)}
 				/>
 			</View>