Skip to content

Commit

Permalink
Small style fixes and update new contact state (#76)
Browse files Browse the repository at this point in the history
* run dep:update

* small styling fix

* update new contact state

* update after review

* add onRequestClose prop to Modal (#79)
  • Loading branch information
KKA11010 committed Jun 22, 2023
1 parent 5e61135 commit a1e8437
Show file tree
Hide file tree
Showing 17 changed files with 771 additions and 528 deletions.
1,153 changes: 682 additions & 471 deletions package-lock.json

Large diffs are not rendered by default.

34 changes: 17 additions & 17 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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"
},
Expand All @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion src/components/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/components/Button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
>
Expand Down
2 changes: 1 addition & 1 deletion src/components/InitialModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/components/modal/OptsModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion src/components/modal/Question.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/components/modal/TrustMint.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
7 changes: 5 additions & 2 deletions src/components/modal/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ interface IMyModalProps {
visible: boolean
success?: boolean
isContactList?: boolean
close?: () => void
children: React.ReactNode
}

Expand All @@ -19,6 +20,7 @@ export default function MyModal({
visible,
success,
isContactList,
close,
children
}: IMyModalProps) {

Expand Down Expand Up @@ -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()}
Expand Down
33 changes: 22 additions & 11 deletions src/components/screens/Addressbook/Book.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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>
Expand All @@ -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
Expand Down Expand Up @@ -270,7 +281,7 @@ const styles = StyleSheet.create({
},
addOwnAddress: {
paddingVertical: 10,
marginRight: 16,
marginHorizontal: 20,
},
nameEntry: {
width: '100%',
Expand Down
22 changes: 14 additions & 8 deletions src/components/screens/Addressbook/Contact.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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>
Expand All @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/components/screens/Addressbook/modal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion src/components/screens/History/Details.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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' }]} />
:
Expand Down
19 changes: 13 additions & 6 deletions src/components/screens/Lightning/modal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand Down Expand Up @@ -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 }
Expand All @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/components/screens/Lightning/scannedQR.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/components/screens/Mints/MintManagement.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
9 changes: 7 additions & 2 deletions src/components/screens/Mints/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit a1e8437

Please sign in to comment.