diff --git a/src/components/InitialModal.tsx b/src/components/InitialModal.tsx
new file mode 100644
index 00000000..4f73777e
--- /dev/null
+++ b/src/components/InitialModal.tsx
@@ -0,0 +1,39 @@
+import MyModal from '@modal'
+import { ThemeContext } from '@src/context/Theme'
+import { globals } from '@styles'
+import { useContext } from 'react'
+import { StyleSheet, Text, TouchableOpacity } from 'react-native'
+
+import Button from './Button'
+
+interface IInitialModalProps {
+ visible: boolean
+ onConfirm: () => void
+ onCancel: () => void
+}
+
+export default function InitialModal({ visible, onConfirm, onCancel }: IInitialModalProps) {
+ const { color, highlight } = useContext(ThemeContext)
+ return (
+
+
+ Get started
+
+
+ You should add a mint that you trust before sending or receiving tokens.
+
+
+
+
+ Will do later
+
+
+
+ )
+}
+
+const styles = StyleSheet.create({
+ cancel: {
+ marginTop: 25,
+ },
+})
\ No newline at end of file
diff --git a/src/components/Separator.tsx b/src/components/Separator.tsx
new file mode 100644
index 00000000..60ddfdfa
--- /dev/null
+++ b/src/components/Separator.tsx
@@ -0,0 +1,14 @@
+import { ThemeContext } from '@src/context/Theme'
+import { useContext } from 'react'
+import { type StyleProp, StyleSheet, type TextStyle, View } from 'react-native'
+
+export default function Separator({ style }: { style?: StyleProp[] }) {
+ const { color } = useContext(ThemeContext)
+ return
+}
+
+const styles = StyleSheet.create({
+ separator: {
+ borderBottomWidth: 1
+ }
+})
\ No newline at end of file
diff --git a/src/components/pages/Addressbook/Book.tsx b/src/components/pages/Addressbook/Book.tsx
index f5c8630f..f9c05a69 100644
--- a/src/components/pages/Addressbook/Book.tsx
+++ b/src/components/pages/Addressbook/Book.tsx
@@ -1,6 +1,7 @@
import Button from '@comps/Button'
import usePrompt from '@comps/hooks/Prompt'
import { PlusIcon, UserIcon } from '@comps/Icons'
+import Separator from '@comps/Separator'
import Txt from '@comps/Txt'
import { addContact, getContacts } from '@db'
import MyModal from '@modal'
@@ -159,7 +160,7 @@ export default function AddressBook({ nav, isModal, closeModal, setInput }: IAdd
- {i < contacts.length - 1 && }
+ {i < contacts.length - 1 && }
))}
diff --git a/src/components/pages/Dashboard.tsx b/src/components/pages/Dashboard.tsx
index c336c402..76771851 100644
--- a/src/components/pages/Dashboard.tsx
+++ b/src/components/pages/Dashboard.tsx
@@ -1,14 +1,13 @@
/* eslint-disable @typescript-eslint/no-misused-promises */
import ActionButtons from '@comps/ActionButtons'
import Balance from '@comps/Balance'
-import Button from '@comps/Button'
import useLoading from '@comps/hooks/Loading'
import usePrompt from '@comps/hooks/Prompt'
import useCashuToken from '@comps/hooks/Token'
+import InitialModal from '@comps/InitialModal'
import Toaster from '@comps/Toaster'
import { addMint, getBalance, getMintsUrls, hasMints } from '@db'
import { l } from '@log'
-import MyModal from '@modal'
import OptsModal from '@modal/OptsModal'
import TrustMintModal from '@modal/TrustMint'
import { TDashboardPageProps } from '@model/nav'
@@ -18,19 +17,18 @@ import { FocusClaimCtx } from '@src/context/FocusClaim'
import { useInitialURL } from '@src/context/Linking'
import { ThemeContext } from '@src/context/Theme'
import { addToHistory } from '@store/HistoryStore'
-import { globals, highlight as hi } from '@styles'
import { hasTrustedMint, isCashuToken } from '@util'
import { claimToken } from '@wallet'
import { getTokenInfo } from '@wallet/proofs'
import * as Clipboard from 'expo-clipboard'
import { useContext, useEffect, useState } from 'react'
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
export default function Dashboard({ navigation, route }: TDashboardPageProps) {
// The URL content that redirects to this app after clicking on it (cashu:)
const { url } = useInitialURL()
// Theme
- const { color, highlight } = useContext(ThemeContext)
+ const { color } = useContext(ThemeContext)
// State to indicate token claim from clipboard after app comes to the foreground, to re-render total balance
const { claimed } = useContext(FocusClaimCtx)
// Total Balance state (all mints)
@@ -189,67 +187,52 @@ export default function Dashboard({ navigation, route }: TDashboardPageProps) {
/>
}
{/* Initial mint modal prompt */}
- {modal.mint &&
-
-
- Get started
-
-
- You should add a mint that you trust before sending or receiving tokens.
-
-
- setModal({ ...modal, mint: false })}>
-
- Will do later
-
-
-
- }
+ setModal({ ...modal, mint: false })}
+ />
{/* Receive options */}
- {modal.receiveOpts &&
- {
- if (token.length) { return }
- void (async () => {
- startLoading()
- const clipboard = await Clipboard.getStringAsync()
- if (!isCashuToken(clipboard)) {
- openPromptAutoClose(false, 'Your clipboard contains an invalid cashu token!')
- setModal({ ...modal, receiveOpts: false })
- stopLoading()
- return
- }
- setToken(clipboard)
- await handleTokenSubmit(clipboard)
- })()
- }}
- button2Txt='Create Lightning invoice'
- onPressSecondBtn={() => {
- navigation.navigate('lightning', { receive: true })
- setModal({ ...modal, receiveOpts: false })
- }}
- onPressCancel={() => setModal({ ...modal, receiveOpts: false })}
- />
- }
+ {
+ if (token.length) { return }
+ void (async () => {
+ startLoading()
+ const clipboard = await Clipboard.getStringAsync()
+ if (!isCashuToken(clipboard)) {
+ openPromptAutoClose(false, 'Your clipboard contains an invalid cashu token!')
+ setModal({ ...modal, receiveOpts: false })
+ stopLoading()
+ return
+ }
+ setToken(clipboard)
+ await handleTokenSubmit(clipboard)
+ })()
+ }}
+ button2Txt='Create Lightning invoice'
+ onPressSecondBtn={() => {
+ navigation.navigate('lightning', { receive: true })
+ setModal({ ...modal, receiveOpts: false })
+ }}
+ onPressCancel={() => setModal({ ...modal, receiveOpts: false })}
+ />
{/* Send options */}
- {modal.sendOpts &&
- {
- navigation.navigate('send')
- setModal({ ...modal, sendOpts: false })
- }}
- button2Txt='Pay Lightning invoice'
- onPressSecondBtn={() => {
- navigation.navigate('lightning', { send: true })
- setModal({ ...modal, sendOpts: false })
- }}
- onPressCancel={() => setModal({ ...modal, sendOpts: false })}
- />
- }
+ {
+ navigation.navigate('send')
+ setModal({ ...modal, sendOpts: false })
+ }}
+ button2Txt='Pay Lightning invoice'
+ onPressSecondBtn={() => {
+ navigation.navigate('lightning', { send: true })
+ setModal({ ...modal, sendOpts: false })
+ }}
+ onPressCancel={() => setModal({ ...modal, sendOpts: false })}
+ />
{/* Prompt toaster */}
{prompt.open && }
diff --git a/src/components/pages/History/Details.tsx b/src/components/pages/History/Details.tsx
index b704b8ad..8ad22df1 100644
--- a/src/components/pages/History/Details.tsx
+++ b/src/components/pages/History/Details.tsx
@@ -4,6 +4,7 @@ import useLoading from '@comps/hooks/Loading'
import { BackupIcon, CheckCircleIcon, CheckmarkIcon, CopyIcon, QRIcon } from '@comps/Icons'
import MyModal from '@comps/modal'
import QR from '@comps/QR'
+import Separator from '@comps/Separator'
import Txt from '@comps/Txt'
import type { THistoryEntryPageProps } from '@model/nav'
import TopNav from '@nav/TopNav'
@@ -90,7 +91,7 @@ export default function DetailsPage({ route }: THistoryEntryPageProps) {
-
+
{/* Memo */}
@@ -99,14 +100,14 @@ export default function DetailsPage({ route }: THistoryEntryPageProps) {
styles={[styles.infoValue]}
/>
-
+
{/* Mints */}
{/* TODO update style to fit multiple mints */}
formatMintUrl(m)).join(', ')} />
-
+
{/* cashu token or ln invoice */}
-
+
{/* check is token spendable */}
{isPayment && !isLn &&
}
-
+
{/* Lightning related */}
{isLn &&
<>
@@ -181,7 +182,7 @@ export default function DetailsPage({ route }: THistoryEntryPageProps) {
}
-
+
{/* LN payment preImage */}
-
+
{/* LN payment fees */}
-
+
>
}
{/* QR code */}
diff --git a/src/components/pages/History/index.tsx b/src/components/pages/History/index.tsx
index 6c366c39..6f79b2b5 100644
--- a/src/components/pages/History/index.tsx
+++ b/src/components/pages/History/index.tsx
@@ -1,3 +1,4 @@
+import Separator from '@comps/Separator'
import Txt from '@comps/Txt'
import type { IHistoryEntry } from '@model'
import type { THistoryPageProps } from '@model/nav'
@@ -69,7 +70,7 @@ export default function HistoryPage({ navigation, route }: THistoryPageProps) {
/>
)}
estimatedItemSize={300}
- ItemSeparatorComponent={() => }
+ ItemSeparatorComponent={() => }
/>
>
diff --git a/src/components/pages/Mints/Info.tsx b/src/components/pages/Mints/Info.tsx
index 804751a4..5aa57b3b 100644
--- a/src/components/pages/Mints/Info.tsx
+++ b/src/components/pages/Mints/Info.tsx
@@ -1,5 +1,6 @@
import type { GetInfoResponse } from '@cashu/cashu-ts'
import { ExclamationIcon, MintBoardIcon } from '@comps/Icons'
+import Separator from '@comps/Separator'
import Txt from '@comps/Txt'
import { l } from '@log'
import type { TMintInfoPageProps } from '@model/nav'
@@ -82,12 +83,12 @@ export default function MintInfoPage({ route }: TMintInfoPageProps) {
}
))}
-
+
Supported NUTs
{info.nuts.map((n, i) => )}
-
+
Public key
diff --git a/src/components/pages/Settings/Display.tsx b/src/components/pages/Settings/Display.tsx
index 9789acec..f57c6ff1 100644
--- a/src/components/pages/Settings/Display.tsx
+++ b/src/components/pages/Settings/Display.tsx
@@ -1,3 +1,5 @@
+import Separator from '@comps/Separator'
+import Txt from '@comps/Txt'
import type { TDisplaySettingsPageProps } from '@model/nav'
import TopNav from '@nav/TopNav'
import { ThemeContext } from '@src/context/Theme'
@@ -31,8 +33,13 @@ export default function DisplaySettings({ navigation }: TDisplaySettingsPageProp
Theme
- {themeColors.map(t => (
-
+ {themeColors.map((t, i) => (
+
))}
@@ -42,24 +49,26 @@ export default function DisplaySettings({ navigation }: TDisplaySettingsPageProp
interface IThemeSelectionProps {
name: string
selected: boolean
+ hasSeparator?: boolean
}
-function ThemeSelection({ name, selected }: IThemeSelectionProps) {
+function ThemeSelection({ name, selected, hasSeparator }: IThemeSelectionProps) {
const { color, highlight, setHighlight } = useContext(ThemeContext)
return (
- setHighlight(name)}
- >
-
- {name}
-
-
-
+ <>
+ setHighlight(name)}
+ >
+
+
+
+ {hasSeparator && }
+ >
)
}
diff --git a/src/components/pages/Settings/index.tsx b/src/components/pages/Settings/index.tsx
index b2090785..657f5554 100644
--- a/src/components/pages/Settings/index.tsx
+++ b/src/components/pages/Settings/index.tsx
@@ -1,5 +1,6 @@
import usePrompt from '@comps/hooks/Prompt'
import { ChevronRightIcon, LockIcon, PaletteIcon, TrashbinIcon2 } from '@comps/Icons'
+import Separator from '@comps/Separator'
import { PromptModal } from '@modal/Prompt'
import { QuestionModal } from '@modal/Question'
import { TSettingsPageProps } from '@model/nav'
@@ -30,12 +31,14 @@ export default function Settings({ navigation }: TSettingsPageProps) {
txtColor={color.TEXT}
icon={}
onPress={() => navigation.navigate('Security settings')}
+ hasSeparator
/>
}
onPress={() => navigation.navigate('Display settings')}
+ hasSeparator
/>
void
icon: React.ReactElement
+ hasSeparator?: boolean
}
-function SettingsMenuItem({ txt, txtColor, icon, onPress }: IMenuItemProps) {
- const { color } = useContext(ThemeContext)
+function SettingsMenuItem({ txt, txtColor, icon, onPress, hasSeparator }: IMenuItemProps) {
return (
<>
}
-
+ {hasSeparator && }
>
)
}
diff --git a/src/styles/globals.ts b/src/styles/globals.ts
index 0eb146a8..facf0775 100644
--- a/src/styles/globals.ts
+++ b/src/styles/globals.ts
@@ -47,5 +47,11 @@ export const globals = (color: TPref, h?: string) => StyleSheet.create({
marginRight: 20,
marginLeft: 20,
marginBottom: 40,
+ },
+ radioBtn: {
+ borderWidth: 1,
+ borderRadius: 50,
+ padding: 10,
+ borderColor: color.BORDER
}
})
\ No newline at end of file