laantungir/minibits_wallet
1
0
Fork 0
mirror of https://github.com/minibits-cash/minibits_wallet.git synced 2026-08-11 08:59:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Theme selection, new golden theme

Browse Source
This commit is contained in:
minibits-cash
2024-09-26 13:02:49 +02:00
parent 8ef1cf7b51
commit e7eaddecd5
39 changed files with 532 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Icon.tsx
+2 -1
View File
@@ -94,13 +94,14 @@ import { faCircleArrowDown } from "@fortawesome/free-solid-svg-icons/faCircleArr
import { faGlobe } from "@fortawesome/free-solid-svg-icons/faGlobe"
import { faCubes } from "@fortawesome/free-solid-svg-icons/faCubes"
import { faClock } from "@fortawesome/free-regular-svg-icons/faClock"
import { faArrowRotateLeft } from "@fortawesome/free-solid-svg-icons/faArrowRotateLeft"
export type IconTypes = keyof typeof iconRegistry
// TODO remove need for manual iconregistry?
// would be best to just import all of them, i guess, or figure out something smart
export const iconRegistry = { faAddressCard, faAddressBook, faWallet, faQrcode, faClipboard, faSliders, faCoins, faEllipsisVertical, faEllipsis, faArrowUp, faArrowDown, faArrowLeft, faXmark, faInfoCircle, faBug, faCheckCircle, faArrowTurnUp, faArrowTurnDown, faPencil, faTags, faShareFromSquare, faRotate, faCode, faBan, faCircle, faPaperPlane, faBolt, faArrowUpFromBracket, faArrowRightToBracket, faPlus, faShieldHalved, faCloudArrowUp, faPaintbrush, faCopy, faBurst, faUserShield, faLock, faLockOpen, faTriangleExclamation, faDownload, faUpload, faRecycle, faListUl, faExpand, faFingerprint, faWandMagicSparkles, faCircleUser, faComment, faKey, faCircleNodes, faBullseye, faEyeSlash, faUpRightFromSquare, faShareNodes, faPaste, faKeyboard, faMoneyBill1, faGears, faTag, faBank, faChevronDown, faChevronUp, faCircleExclamation, faCircleQuestion, faEnvelope, faTwitter, faTelegramPlane, faDiscord, faGithub, faReddit, faCircleArrowUp, faCircleArrowDown, faGlobe, faCubes, faClock }
export const iconRegistry = { faAddressCard, faAddressBook, faWallet, faQrcode, faClipboard, faSliders, faCoins, faEllipsisVertical, faEllipsis, faArrowUp, faArrowDown, faArrowLeft, faXmark, faInfoCircle, faBug, faCheckCircle, faArrowTurnUp, faArrowTurnDown, faPencil, faTags, faShareFromSquare, faRotate, faCode, faBan, faCircle, faPaperPlane, faBolt, faArrowUpFromBracket, faArrowRightToBracket, faPlus, faShieldHalved, faCloudArrowUp, faPaintbrush, faCopy, faBurst, faUserShield, faLock, faLockOpen, faTriangleExclamation, faDownload, faUpload, faRecycle, faListUl, faExpand, faFingerprint, faWandMagicSparkles, faCircleUser, faComment, faKey, faCircleNodes, faBullseye, faEyeSlash, faUpRightFromSquare, faShareNodes, faPaste, faKeyboard, faMoneyBill1, faGears, faTag, faBank, faChevronDown, faChevronUp, faCircleExclamation, faCircleQuestion, faEnvelope, faTwitter, faTelegramPlane, faDiscord, faGithub, faReddit, faCircleArrowUp, faCircleArrowDown, faGlobe, faCubes, faClock, faArrowRotateLeft }
interface IconProps extends TouchableOpacityProps {
src/i18n_messages/en.json
+1
View File
@@ -416,6 +416,7 @@
},
"preferredUnit": "Preferred unit",
"exchangeCurrency": "Balance conversion",
"theme": "Theme",
"privacy": "Privacy",
"security": "Security",
"title": "Settings",
src/models/RootStore.ts
+1 -1
View File
@@ -11,7 +11,7 @@ import {WalletStoreModel} from './WalletStore'
import {NwcStoreModel} from './NwcStore'
import { log } from '../services'
export const rootStoreModelVersion = 25 // Update this if model changes require migrations defined in setupRootStore.ts
export const rootStoreModelVersion = 26 // Update this if model changes require migrations defined in setupRootStore.ts
/**
* A RootStore model.
src/models/UserSettingsStore.ts
+13 -2
View File
@@ -3,12 +3,14 @@ import {Database} from '../services'
import {MMKVStorage} from '../services'
import {LogLevel} from '../services/log/logTypes'
import { CurrencyCode, MintUnit } from '../services/wallet/currency'
import { ThemeCode } from '../theme'
export type UserSettings = {
id?: number
walletId: string | null
preferredUnit: MintUnit | null
exchangeCurrency: CurrencyCode | null
theme: ThemeCode | null
isOnboarded: boolean | 0 | 1
isStorageEncrypted: boolean | 0 | 1
isLocalBackupOn: boolean | 0 | 1
@@ -24,6 +26,7 @@ export const UserSettingsStoreModel = types
walletId: types.maybeNull(types.string),
preferredUnit: types.optional(types.frozen<MintUnit>(), 'sat'),
exchangeCurrency: types.optional(types.frozen<CurrencyCode | null>(), CurrencyCode.USD),
theme: types.optional(types.frozen<ThemeCode>(), ThemeCode.DEFAULT),
isOnboarded: types.optional(types.boolean, false),
isStorageEncrypted: types.optional(types.boolean, false),
isLocalBackupOn: types.optional(types.boolean, true),
@@ -37,7 +40,8 @@ export const UserSettingsStoreModel = types
const {
walletId,
preferredUnit,
exchangeCurrency,
exchangeCurrency,
theme,
isOnboarded,
isStorageEncrypted,
isLocalBackupOn,
@@ -56,7 +60,8 @@ export const UserSettingsStoreModel = types
self.walletId = walletId as string
self.preferredUnit = preferredUnit as MintUnit
self.exchangeCurrency = exchangeCurrency as CurrencyCode
self.exchangeCurrency = exchangeCurrency as CurrencyCode
self.theme = theme as ThemeCode
self.isOnboarded = booleanIsOnboarded as boolean
self.isStorageEncrypted = booleanIsStorageEncrypted as boolean
self.isLocalBackupOn = booleanIsLocalBackupOn as boolean
@@ -83,6 +88,12 @@ export const UserSettingsStoreModel = types
return exchangeCurrency
},
setTheme: (theme: ThemeCode) => {
Database.updateUserSettings({...self, theme})
self.theme = theme
return theme
},
setIsOnboarded: (isOnboarded: boolean) => {
Database.updateUserSettings({...self, isOnboarded})
self.isOnboarded = isOnboarded
src/models/helpers/setupRootStore.ts
+8
View File
@@ -26,6 +26,7 @@ import AppError, { Err } from '../../utils/AppError'
import { LogLevel } from '../../services/log/logTypes'
import { MintStatus } from '../Mint'
import { CurrencyCode } from '../../services/wallet/currency'
import { ThemeCode } from '../../theme'
/**
* The key we'll be saving our state as within storage.
@@ -318,6 +319,13 @@ async function _runMigrations(rootStore: RootStore) {
rootStore.setVersion(rootStoreModelVersion)
log.info(`Completed rootStore migrations to the version v${rootStoreModelVersion}`)
}
if(currentVersion < 26) {
log.trace(`Starting rootStore migrations from version v${currentVersion} -> v26`)
userSettingsStore.setTheme(ThemeCode.DEFAULT)
rootStore.setVersion(rootStoreModelVersion)
log.info(`Completed rootStore migrations to the version v${rootStoreModelVersion}`)
}
} catch (e: any) {
throw new AppError(
Err.STORAGE_ERROR,
src/screens/BackupScreen.tsx
+2 -1
View File
@@ -138,6 +138,7 @@ export const BackupScreen: FC<SettingsStackScreenProps<'Backup'>> = observer(fun
}
const headerBg = useThemeColor('header')
const headerTitle = useThemeColor('headerTitle')
return (
<Screen preset='auto' contentContainerStyle={$screen}>
@@ -146,7 +147,7 @@ export const BackupScreen: FC<SettingsStackScreenProps<'Backup'>> = observer(fun
onLeftPress={() => navigation.goBack()}
/>
<View style={[$headerContainer, {backgroundColor: headerBg}]}>
<Text preset="heading" text="Backup" style={{color: 'white'}} />
<Text preset="heading" text="Backup" style={{color: headerTitle}} />
</View>
<View style={$contentContainer}>
<Card
src/screens/ContactDetailScreen.tsx
+1 -1
View File
@@ -176,7 +176,7 @@ export const ContactDetailScreen: FC<ContactDetailScreenProps> = observer(
const headerBg = useThemeColor('header')
const screenBg = useThemeColor('background')
const mainButtonColor = useThemeColor('card')
const mainButtonIcon = useThemeColor('button')
const mainButtonIcon = useThemeColor('mainButtonIcon')
const mainButtonText = useThemeColor('text')
src/screens/Contacts/PrivateContacts.tsx
+1 -1
View File
@@ -248,7 +248,7 @@ export const PrivateContacts = observer(function (props: {
const iconColor = useThemeColor('textDim')
const inputBg = useThemeColor('background')
const mainButtonColor = useThemeColor('card')
const mainButtonIcon = useThemeColor('button')
const mainButtonIcon = useThemeColor('mainButtonIcon')
const screenBg = useThemeColor('background')
return (
src/screens/DeveloperScreen.tsx
+2 -1
View File
@@ -160,6 +160,7 @@ export const DeveloperScreen: FC<SettingsStackScreenProps<'Developer'>> = observ
const headerBg = useThemeColor('header')
const iconSelectedColor = useThemeColor('button')
const iconColor = useThemeColor('textDim')
const headerTitle = useThemeColor('headerTitle')
return (
<Screen style={$screen} preset='auto'>
@@ -167,7 +168,7 @@ export const DeveloperScreen: FC<SettingsStackScreenProps<'Developer'>> = observ
<Text
preset="heading"
tx="developerScreen.title"
style={{color: 'white'}}
style={{color: headerTitle}}
/>
</View>
<View style={$contentContainer}>
src/screens/LightningPayScreen.tsx
+3 -1
View File
@@ -152,6 +152,8 @@ export const LightningPayScreen: FC<WalletStackScreenProps<'LightningPay'>> = fu
const inputBg = useThemeColor('background')
const contactIcon = useThemeColor('button')
const headerBg = useThemeColor('header')
const headerTitle = useThemeColor('headerTitle')
return (
<Screen preset="fixed" contentContainerStyle={$screen}>
@@ -164,7 +166,7 @@ export const LightningPayScreen: FC<WalletStackScreenProps<'LightningPay'>> = fu
<Text
preset="heading"
tx="lightningPayScreen.payHeading"
style={{color: 'white'}}
style={{color: headerTitle}}
/>
</View>
<View style={$contentContainer}>
src/screens/LocalRecoveryScreen.tsx
+3 -5
View File
@@ -380,13 +380,11 @@ export const LocalRecoveryScreen: FC<LocalRecoveryScreenProps> =
setError(e)
}
const colorScheme = useColorScheme()
const headerBg = useThemeColor('header')
const iconColor = useThemeColor('textDim')
const dateColor = useThemeColor('textDim')
const iconSelectedColor = useThemeColor('button')
const activeIconColor = useThemeColor('button')
const hintColor = colors.palette.primary200
const headerTitle = useThemeColor('headerTitle')
return (
@@ -395,7 +393,7 @@ export const LocalRecoveryScreen: FC<LocalRecoveryScreenProps> =
<Text
preset="heading"
tx="recoveryTool"
style={{color: 'white'}}
style={{color: headerTitle}}
/>
</View>
<View style={$contentContainer}>
src/screens/MintInfoScreen.tsx
+2 -1
View File
@@ -153,6 +153,7 @@ export const MintInfoScreen: FC<SettingsStackScreenProps<'MintInfo'>> = observer
const textDim = useThemeColor('textDim')
const headerBg = useThemeColor('header')
const iconColor = useThemeColor('textDim')
const headerTitle = useThemeColor('headerTitle')
return (
<Screen contentContainerStyle={$screen} preset="scroll">
@@ -173,7 +174,7 @@ export const MintInfoScreen: FC<SettingsStackScreenProps<'MintInfo'>> = observer
fill='white'
/>
</View>
<Text preset='subheading' text={mintInfo?.name ?? mint?.shortname} style={{color: 'white'}}/>
<Text preset='subheading' text={mintInfo?.name ?? mint?.shortname} style={{color: headerTitle}}/>
{mint?.units && (
<View style={{flexDirection: 'row'}}>
{mint.units.map(unit => (
src/screens/Mints/MintBalanceSelector.tsx
+1 -2
View File
@@ -76,8 +76,7 @@ export const MintBalanceSelector = observer(function (props: {
<>
<FlatList<MintBalance>
data={props.mintBalances}
renderItem={({ item, index }) => {
log.trace({index})
renderItem={({ item, index }) => {
return(
<MintListItem
key={item.mintUrl}
src/screens/Mints/MintHeader.tsx
+25 -4
View File
@@ -1,13 +1,13 @@
import React from "react"
import { TextStyle, View, ViewStyle } from "react-native"
import { Button, Header, Icon, IconTypes, ListItem, Screen, Text } from "../../components"
import { colors, spacing, typography, useThemeColor } from "../../theme"
import { Header, Text } from "../../components"
import { spacing, useThemeColor } from "../../theme"
import { Mint } from "../../models/Mint"
import { MintUnit } from "../../services/wallet/currency"
import { CurrencySign } from "../Wallet/CurrencySign"
import { CurrencyAmount } from "../Wallet/CurrencyAmount"
import { observer } from "mobx-react-lite"
import { StackNavigationProp } from "@react-navigation/stack"
import { moderateScale } from "@gocodingnow/rn-size-matters"
export const MintHeader = observer(function(props: {
unit: MintUnit,
@@ -17,6 +17,21 @@ export const MintHeader = observer(function(props: {
) {
const {mint, unit, navigation} = props
const getActiveUnitColor = () => {
switch (props.unit) {
case 'usd':
return useThemeColor('usd')
case 'eur':
return useThemeColor('eur')
default:
return useThemeColor('btc')
}
}
const tabWidth = moderateScale(80)
const headerTitle = useThemeColor('headerTitle')
return (
<Header
@@ -24,12 +39,18 @@ export const MintHeader = observer(function(props: {
<>
{mint && (<Text
text={mint && mint.shortname}
style={{color: 'white'}}
style={{color: headerTitle}}
size='xxs'
/>)}
<CurrencySign
mintUnit={unit && unit}
textStyle={{color: 'white'}}
containerStyle={{
borderBottomWidth: 2,
paddingVertical: mint ? spacing.tiny : spacing.small,
borderBottomColor: getActiveUnitColor(),
width: tabWidth
}}
/>
</>
}
src/screens/Mints/MintListItem.tsx
+1 -1
View File
@@ -23,7 +23,7 @@ export const MintListItem = observer(function(props: {
style?: ViewStyle
}) {
const iconSelectedColor = useThemeColor('button')
const iconSelectedColor = useThemeColor('mainButtonIcon')
const iconColor = useThemeColor('textDim')
const iconBlockedColor = colors.palette.angry500
src/screens/MintsScreen.tsx
+2 -1
View File
@@ -271,11 +271,12 @@ export const MintsScreen: FC<SettingsStackScreenProps<'Mints'>> = observer(funct
const headerBg = useThemeColor('header')
const iconColor = useThemeColor('textDim')
const inputBg = useThemeColor('background')
const headerTitle = useThemeColor('headerTitle')
return (
<Screen preset="scroll" contentContainerStyle={$screen}>
<View style={[$headerContainer, {backgroundColor: headerBg}]}>
<Text preset="heading" tx="manageMints" style={{color: 'white'}} />
<Text preset="heading" tx="manageMints" style={{color: headerTitle}} />
</View>
<View style={$contentContainer}>
<Card
src/screens/NwcScreen.tsx
+3 -2
View File
@@ -175,7 +175,8 @@ export const NwcScreen: FC<SettingsScreenProps> = observer(
const screenBg = useThemeColor('background')
const mainButtonIcon = useThemeColor('button')
const labelText = useThemeColor('textDim')
const $subText = {color: useThemeColor('textDim'), fontSize: 14}
const $subText = {color: useThemeColor('textDim'), fontSize: moderateVerticalScale(14)}
const headerTitle = useThemeColor('headerTitle')
return (
<Screen contentContainerStyle={$screen}>
@@ -183,7 +184,7 @@ export const NwcScreen: FC<SettingsScreenProps> = observer(
<Text
preset='heading'
text='NWC'
style={{color: 'white'}}
style={{color: headerTitle}}
/>
</View>
<View style={$contentContainer}>
src/screens/PaymentRequestsScreen.tsx
+3 -2
View File
@@ -46,12 +46,13 @@ export const PaymentRequestsScreen: FC<PaymentRequestsScreenProps> = observer(fu
)
const headerBg = useThemeColor('header')
const activeTabIndicator = colors.palette.accent400
const activeTabIndicator = colors.palette.accent400
const headerTitle = useThemeColor('headerTitle')
return (
<Screen contentContainerStyle={$screen}>
<View style={[$headerContainer, {backgroundColor: headerBg}]}>
<Text preset="heading" tx="payCommon.paymentRequests" style={{color: 'white'}} />
<Text preset="heading" tx="payCommon.paymentRequests" style={{color: headerTitle}} />
</View>
<TabView
renderTabBar={renderTabBar}
src/screens/PrivacyScreen.tsx
+2 -1
View File
@@ -222,11 +222,12 @@ export const PrivacyScreen: FC<SettingsStackScreenProps<'Privacy'>> = observer(f
const headerBg = useThemeColor('header')
const iconColor = useThemeColor('textDim')
const headerTitle = useThemeColor('headerTitle')
return (
<Screen style={$screen} preset='auto'>
<View style={[$headerContainer, {backgroundColor: headerBg}]}>
<Text preset="heading" text="Privacy" style={{color: 'white'}} />
<Text preset="heading" text="Privacy" style={{color: headerTitle}} />
</View>
<View style={$contentContainer}>
{/*<Card
src/screens/ReceiveOptionsScreen.tsx
-23
View File
@@ -167,27 +167,4 @@ const $item: ViewStyle = {
paddingLeft: 0,
}
const $iconContainer: ViewStyle = {
padding: spacing.extraSmall,
alignSelf: 'center',
marginRight: spacing.medium,
}
const $buttonContainer: ViewStyle = {
flexDirection: 'row',
alignSelf: 'center',
}
const $amountContainer: ViewStyle = {
alignItems: 'center',
justifyContent: 'center',
}
const $amountToReceive: TextStyle = {
flex: 1,
paddingTop: spacing.extraLarge + 10,
fontSize: 52,
fontWeight: '400',
textAlignVertical: 'center',
color: 'white',
}
src/screens/ReceiveScreen.tsx
+7 -7
View File
@@ -154,7 +154,7 @@ export const ReceiveScreen: FC<WalletStackScreenProps<'Receive'>> = observer(
log.trace('tokenAmounts', {tokenAmounts})
if(!decoded.unit) {
setInfo(translate("decodedMissingCurrencyUnit", { unit: CurrencyCode.SATS }))
setInfo(translate("decodedMissingCurrencyUnit", { unit: CurrencyCode.SAT }))
decoded.unit = 'sat'
}
@@ -243,7 +243,7 @@ export const ReceiveScreen: FC<WalletStackScreenProps<'Receive'>> = observer(
const headerBg = useThemeColor('header')
const iconColor = useThemeColor('textDim')
const satsColor = colors.palette.primary200
const amountInputColor = useThemeColor('amountInput')
return (
<Screen preset="auto" contentContainerStyle={$screen}>
@@ -256,8 +256,8 @@ export const ReceiveScreen: FC<WalletStackScreenProps<'Receive'>> = observer(
{toNumber(receivedAmount) > 0 ? (
<View style={$amountContainer}>
<TextInput
value={receivedAmount}
style={$amountToReceive}
value={receivedAmount}
style={[$amountInput, {color: amountInputColor}]}
maxLength={9}
editable={false}
/>
@@ -266,7 +266,7 @@ export const ReceiveScreen: FC<WalletStackScreenProps<'Receive'>> = observer(
<View style={$amountContainer}>
<TextInput
value={amountToReceive}
style={$amountToReceive}
style={[$amountInput, {color: amountInputColor}]}
maxLength={9}
editable={false}
/>
@@ -275,7 +275,7 @@ export const ReceiveScreen: FC<WalletStackScreenProps<'Receive'>> = observer(
<Text
size='sm'
tx={toNumber(receivedAmount) > 0 ? "receiveScreen.received" : "receiveScreen.toReceive"}
style={{color: 'white', textAlign: 'center'}}
style={{color: amountInputColor, textAlign: 'center'}}
/>
</View>
<View style={$contentContainer}>
@@ -505,7 +505,7 @@ const $headerContainer: TextStyle = {
const $amountContainer: ViewStyle = {
}
const $amountToReceive: TextStyle = {
const $amountInput: TextStyle = {
borderRadius: spacing.small,
margin: 0,
padding: 0,
src/screens/RelaysScreen.tsx
+2 -1
View File
@@ -154,6 +154,7 @@ export const RelaysScreen: FC<SettingsScreenProps> = observer(
const mainButtonColor = useThemeColor('card')
const screenBg = useThemeColor('background')
const mainButtonIcon = useThemeColor('button')
const headerTitle = useThemeColor('headerTitle')
return (
<Screen contentContainerStyle={$screen} preset='fixed'>
@@ -161,7 +162,7 @@ export const RelaysScreen: FC<SettingsScreenProps> = observer(
<Text
preset='heading'
text='Relays'
style={{color: 'white'}}
style={{color: headerTitle}}
/>
</View>
<View style={$contentContainer}>
src/screens/RemoteBackupScreen.tsx
+2 -1
View File
@@ -104,11 +104,12 @@ export const RemoteBackupScreen: FC<SettingsStackScreenProps<'RemoteBackup'>> =
}
const headerBg = useThemeColor('header')
const headerTitle = useThemeColor('headerTitle')
return (
<Screen style={$screen}>
<View style={[$headerContainer, {backgroundColor: headerBg}]}>
<Text preset="heading" tx='backupScreen.seedBackup' style={{color: 'white'}} />
<Text preset="heading" tx='backupScreen.seedBackup' style={{color: headerTitle}} />
</View>
<View style={$contentContainer}>
<Card
src/screens/RemoteRecoveryScreen.tsx
+2 -1
View File
@@ -613,11 +613,12 @@ export const RemoteRecoveryScreen: FC<AppStackScreenProps<'RemoteRecovery'>> = o
const numIconColor = useThemeColor('textDim')
const textHint = useThemeColor('textDim')
const inputBg = useThemeColor('background')
const headerTitle = useThemeColor('headerTitle')
return (
<Screen contentContainerStyle={$screen} preset="auto">
<View style={[$headerContainer, {backgroundColor: headerBg}]}>
<Text preset="heading" text="Wallet recovery" style={{color: 'white', zIndex: 10}} />
<Text preset="heading" text="Wallet recovery" style={{color: headerTitle, zIndex: 10}} />
</View>
<View style={$contentContainer}>
src/screens/SecurityScreen.tsx
+2 -1
View File
@@ -97,11 +97,12 @@ export const SecurityScreen: FC<SettingsStackScreenProps<'Security'>> = observer
}
const headerBg = useThemeColor('header')
const headerTitle = useThemeColor('headerTitle')
return (
<Screen style={$screen}>
<View style={[$headerContainer, {backgroundColor: headerBg}]}>
<Text preset="heading" text="Security" style={{color: 'white'}} />
<Text preset="heading" text="Security" style={{color: headerTitle}} />
</View>
<View style={$contentContainer}>
<Card
src/screens/SendOptionsScreen.tsx
-25
View File
@@ -151,28 +151,3 @@ const $item: ViewStyle = {
paddingHorizontal: spacing.small,
paddingLeft: 0,
}
const $iconContainer: ViewStyle = {
padding: spacing.extraSmall,
alignSelf: 'center',
marginRight: spacing.medium,
}
const $buttonContainer: ViewStyle = {
flexDirection: 'row',
alignSelf: 'center',
}
const $amountContainer: ViewStyle = {
alignItems: 'center',
justifyContent: 'center',
}
const $amountToReceive: TextStyle = {
flex: 1,
paddingTop: spacing.extraLarge + 10,
fontSize: 52,
fontWeight: '400',
textAlignVertical: 'center',
color: 'white',
}
src/screens/SendScreen.tsx
+3 -4
View File
@@ -634,8 +634,7 @@ export const SendScreen: FC<WalletStackScreenProps<'Send'>> = observer(
}
const headerBg = useThemeColor('header')
const satsColor = colors.palette.primary200
// const inputBg = useThemeColor('background')
const amountInputColor = useThemeColor('amountInput')
return (
<Screen preset="fixed" contentContainerStyle={$screen}>
@@ -651,7 +650,7 @@ export const SendScreen: FC<WalletStackScreenProps<'Send'>> = observer(
onChangeText={amount => setAmountToSend(amount)}
onEndEditing={onAmountEndEditing}
value={amountToSend}
style={$amountInput}
style={[$amountInput, {color: amountInputColor}]}
maxLength={9}
keyboardType="numeric"
selectTextOnFocus={true}
@@ -664,7 +663,7 @@ export const SendScreen: FC<WalletStackScreenProps<'Send'>> = observer(
<Text
size='sm'
text="Amount to send"
style={{color: 'white', textAlign: 'center'}}
style={{color: amountInputColor, textAlign: 'center'}}
/>
</View>
</View>
src/screens/SettingsScreen.tsx
+143 -89
View File
@@ -9,13 +9,13 @@ import {
CODEPUSH_PRODUCTION_DEPLOYMENT_KEY,
} from '@env'
import codePush, { RemotePackage } from 'react-native-code-push'
import {colors, spacing, useThemeColor} from '../theme'
import {ThemeCode, Themes, colors, spacing, useThemeColor} from '../theme'
import {SettingsStackScreenProps} from '../navigation' // @demo remove-current-line
import {ListItem, Screen, Text, Card, NwcIcon, Button, BottomModal} from '../components'
import {ListItem, Screen, Text, Card, NwcIcon, Button, BottomModal, InfoModal} from '../components'
import {useHeader} from '../utils/useHeader'
import {useStores} from '../models'
import {translate} from '../i18n'
import { log } from '../services'
import { Database, log } from '../services'
import {Env} from '../utils/envtypes'
import { round } from '../utils/number'
import { Currencies, CurrencyCode, getCurrency } from '../services/wallet/currency'
@@ -48,8 +48,10 @@ export const SettingsScreen: FC<SettingsScreenProps> = observer(
const [updateSize, setUpdateSize] = useState<string>('')
const [isCurrencyModalVisible, setIsCurrencyModalVisible] = useState<boolean>(false)
const [isThemeModalVisible, setIsThemeModalVisible] = useState<boolean>(false)
const [isNativeUpdateAvailable, setIsNativeUpdateAvailable] = useState<boolean>(false)
const [areNotificationsEnabled, setAreNotificationsEnabled] = useState<boolean>(false)
const [info, setInfo] = useState('')
useEffect(() => {
const checkForUpdate = async () => {
@@ -128,95 +130,110 @@ export const SettingsScreen: FC<SettingsScreenProps> = observer(
setIsCurrencyModalVisible(previousState => !previousState)
}
const handleBinaryVersionMismatchCallback = function(update: RemotePackage) {
// silent
// setIsNativeUpdateAvailable(true)
}
const toggleThemeModal = () => {
setIsThemeModalVisible(previousState => !previousState)
}
const gotoMints = function() {
navigation.navigate('Mints', {})
}
const handleBinaryVersionMismatchCallback = function(update: RemotePackage) {
// silent
// setIsNativeUpdateAvailable(true)
}
const gotoSecurity = function() {
navigation.navigate('Security')
}
const gotoPrivacy = function() {
navigation.navigate('Privacy')
}
const gotoMints = function() {
navigation.navigate('Mints', {})
}
const gotoDevOptions = function() {
navigation.navigate('Developer')
}
const gotoRelays = function() {
navigation.navigate('Relays')
}
const gotoBackupRestore = function() {
navigation.navigate('Backup')
}
const gotoUpdate = function() {
navigation.navigate('Update', {
isNativeUpdateAvailable,
isUpdateAvailable,
updateDescription,
updateSize
})
}
const gotoNwc = function() {
navigation.navigate('Nwc')
}
const openNotificationSettings = async function() {
await notifee.openNotificationSettings()
}
const gotoPreferredUnit = function() {
Alert.alert('Preferred unit is set based on your Wallet screen.')
}
const gotoSecurity = function() {
navigation.navigate('Security')
}
const gotoPrivacy = function() {
navigation.navigate('Privacy')
}
const getRateColor = function () {
const currency = userSettingsStore.exchangeCurrency
const gotoDevOptions = function() {
navigation.navigate('Developer')
}
if (currency === CurrencyCode.BTC) {
return colors.palette.orange600
}
if (currency === CurrencyCode.EUR) {
return colors.palette.blue600
}
if (currency === CurrencyCode.USD) {
return colors.palette.green400
}
return colors.palette.orange400
const gotoRelays = function() {
navigation.navigate('Relays')
}
const onSelectCurrency = function(currency: CurrencyCode) {
const currentCurrency = userSettingsStore.exchangeCurrency
if(currentCurrency !== currency) {
userSettingsStore.setExchangeCurrency(currency)
walletStore.refreshExchangeRate(currency)
}
toggleCurrencyModal()
}
const onResetCurrency = function() {
const currentCurrency = userSettingsStore.exchangeCurrency
if(currentCurrency !== null) {
userSettingsStore.setExchangeCurrency(null)
walletStore.resetExchangeRate()
}
toggleCurrencyModal()
}
const gotoBackupRestore = function() {
navigation.navigate('Backup')
}
const $itemRight = {color: useThemeColor('textDim')}
const headerBg = useThemeColor('header')
const gotoUpdate = function() {
navigation.navigate('Update', {
isNativeUpdateAvailable,
isUpdateAvailable,
updateDescription,
updateSize
})
}
const gotoNwc = function() {
navigation.navigate('Nwc')
}
const openNotificationSettings = async function() {
await notifee.openNotificationSettings()
}
const gotoPreferredUnit = function() {
Alert.alert('Preferred unit is set based on your Wallet screen.')
}
const getRateColor = function () {
const currency = userSettingsStore.exchangeCurrency
if (currency === CurrencyCode.BTC) {
return colors.palette.orange600
}
if (currency === CurrencyCode.EUR) {
return colors.palette.blue600
}
if (currency === CurrencyCode.USD) {
return colors.palette.green400
}
return colors.palette.orange400
}
const onSelectCurrency = function(currency: CurrencyCode) {
const currentCurrency = userSettingsStore.exchangeCurrency
if(currentCurrency !== currency) {
userSettingsStore.setExchangeCurrency(currency)
walletStore.refreshExchangeRate(currency)
}
toggleCurrencyModal()
}
const onResetCurrency = function() {
const currentCurrency = userSettingsStore.exchangeCurrency
if(currentCurrency !== null) {
userSettingsStore.setExchangeCurrency(null)
walletStore.resetExchangeRate()
}
toggleCurrencyModal()
}
const onSelectTheme = function(theme: ThemeCode) {
const currentTheme = userSettingsStore.theme
if(currentTheme !== theme) {
// state update causes crash because of hooks
Database.updateUserSettings({...userSettingsStore, theme})
setInfo('Restart the wallet to apply new theme.')
}
toggleThemeModal()
}
const $itemRight = {color: useThemeColor('textDim')}
const headerBg = useThemeColor('header')
const headerTitle = useThemeColor('headerTitle')
return (
<Screen contentContainerStyle={$screen} preset='auto'>
@@ -224,7 +241,7 @@ export const SettingsScreen: FC<SettingsScreenProps> = observer(
<Text
preset='heading'
tx='settingsScreen.title'
style={{color: 'white'}}
style={{color: headerTitle}}
/>
</View>
<View style={$contentContainer}>
@@ -257,15 +274,30 @@ export const SettingsScreen: FC<SettingsScreenProps> = observer(
style={$item}
RightComponent={
<View style={$rightContainer}>
<Button
preset='tertiary'
<Text
text={userSettingsStore.exchangeCurrency ?? 'None'}
onPress={toggleCurrencyModal}
style={$itemRight}
/>
</View>
}
onPress={toggleCurrencyModal}
/>
<ListItem
tx='settingsScreen.theme'
leftIcon='faPaintbrush'
leftIconColor={headerBg as string}
leftIconInverse={true}
style={$item}
RightComponent={
<View style={$rightContainer}>
<Text
text={Themes[userSettingsStore.theme]!.title}
style={$itemRight}
/>
</View>
}
bottomSeparator={false}
onPress={toggleCurrencyModal}
onPress={toggleThemeModal}
/>
</>
}
@@ -278,7 +310,7 @@ export const SettingsScreen: FC<SettingsScreenProps> = observer(
tx="pushNotifications"
subText={`Token: ${walletProfileStore.device?.slice(0, 10)}...`}
leftIcon='faPaperPlane'
leftIconColor={colors.palette.green400}
leftIconColor={colors.palette.focus200}
leftIconInverse={true}
style={$item}
RightComponent={
@@ -428,6 +460,28 @@ export const SettingsScreen: FC<SettingsScreenProps> = observer(
onBackButtonPress={toggleCurrencyModal}
onBackdropPress={toggleCurrencyModal}
/>
<BottomModal
isVisible={isThemeModalVisible ? true : false}
style={{alignItems: 'stretch'}}
ContentComponent={
<>
{[ThemeCode.DEFAULT, ThemeCode.DARK, ThemeCode.LIGHT, ThemeCode.GOLDEN].map(code =>
<ListItem
key={code}
leftIconColor={Themes[code as ThemeCode]?.color as string}
leftIconInverse={true}
leftIcon='faPaintbrush'
text={Themes[code as ThemeCode]!.title}
onPress={() => onSelectTheme(code as ThemeCode)}
bottomSeparator={true}
/>
)}
</>
}
onBackButtonPress={toggleThemeModal}
onBackdropPress={toggleThemeModal}
/>
{info && <InfoModal message={info} />}
</Screen>
)
},
src/screens/TokenReceiveScreen.tsx
+2 -3
View File
@@ -133,8 +133,7 @@ export const TokenReceiveScreen: FC<WalletStackScreenProps<'TokenReceive'>> = fu
const inputBg = useThemeColor('background')
const contactIcon = useThemeColor('button')
const headerBg = useThemeColor('header')
const headerTitle = useThemeColor('headerTitle')
return (
<Screen preset="fixed" contentContainerStyle={$screen}>
@@ -147,7 +146,7 @@ export const TokenReceiveScreen: FC<WalletStackScreenProps<'TokenReceive'>> = fu
<Text
preset="heading"
tx="payCommon.receiveEcash"
style={{color: 'white'}}
style={{color: headerTitle}}
/>
</View>
<View style={$contentContainer}>
src/screens/TopupScreen.tsx
+4 -4
View File
@@ -657,9 +657,9 @@ export const TopupScreen: FC<WalletStackScreenProps<'Topup'>> = observer(
}
}
const headerBg = useThemeColor('header')
const satsColor = colors.palette.primary200
const headerBg = useThemeColor('header')
const placeholderTextColor = useThemeColor('textDim')
const amountInputColor = useThemeColor('amountInput')
return (
<Screen preset="fixed" contentContainerStyle={$screen}>
@@ -679,7 +679,7 @@ export const TopupScreen: FC<WalletStackScreenProps<'Topup'>> = observer(
onChangeText={amount => setAmountToTopup(amount)}
onEndEditing={onAmountEndEditing}
value={amountToTopup}
style={$amountInput}
style={[$amountInput, {color: amountInputColor}]}
maxLength={9}
keyboardType="numeric"
selectTextOnFocus={true}
@@ -690,7 +690,7 @@ export const TopupScreen: FC<WalletStackScreenProps<'Topup'>> = observer(
<Text
size="sm"
text={getAmountTitle()}
style={{color: 'white', textAlign: 'center'}}
style={{color: amountInputColor, textAlign: 'center'}}
/>
</View>
</View>
src/screens/TranDetailScreen.tsx
+5 -6
View File
@@ -250,6 +250,7 @@ export const TranDetailScreen: FC<TransactionsStackScreenProps<'TranDetail'>> =
}
const colorScheme = useColorScheme()
const headerTitle = useThemeColor('headerTitle')
return (
<Screen contentContainerStyle={$screen} preset="auto">
@@ -268,12 +269,12 @@ export const TranDetailScreen: FC<TransactionsStackScreenProps<'TranDetail'>> =
>
<CurrencySign
mintUnit={transaction.unit}
textStyle={{color: 'white'}}
textStyle={{color: headerTitle}}
/>
<Text
preset="heading"
text={getFormattedAmount()}
style={$tranAmount}
style={[$tranAmount, {color: headerTitle}]}
/>
</View>
<View style={$contentContainer}>
@@ -1956,10 +1957,8 @@ const $contentContainer: TextStyle = {
const $tranAmount: TextStyle = {
fontSize: moderateVerticalScale(48),
lineHeight: moderateVerticalScale(48),
// marginTop: spacing.small,
marginLeft: -20,
color: 'white',
lineHeight: moderateVerticalScale(48),
marginLeft: -20,
}
const $actionCard: ViewStyle = {
src/screens/TranHistoryScreen.tsx
+3 -3
View File
@@ -252,8 +252,8 @@ export const TranHistoryScreen: FC<TransactionsStackScreenProps<'TranHistory'>>
const headerBg = useThemeColor('header')
const iconColor = useThemeColor('textDim')
const activeIconColor = useThemeColor('button')
const pendingBalance = proofsStore.getBalances().mintPendingBalances
const activeIconColor = useThemeColor('button')
const headerTitle = useThemeColor('headerTitle')
const sections = showPendingOnly ? Object.keys(transactionsStore.groupedPendingByTimeAgo).map((timeAgo) => ({
title: timeAgo,
@@ -266,7 +266,7 @@ export const TranHistoryScreen: FC<TransactionsStackScreenProps<'TranHistory'>>
return (
<Screen contentContainerStyle={$screen}>
<View style={[isHeaderVisible ? $headerContainer : $headerCollapsed, {backgroundColor: headerBg}]}>
<Text preset="heading" text="History" style={{color: 'white'}} />
<Text preset="heading" text="History" style={{color: headerTitle}} />
</View>
<View style={$contentContainer}>
src/screens/Transactions/TransactionListItem.tsx
+5 -1
View File
@@ -120,10 +120,14 @@ export const TransactionListItem = observer(function (
const getLeftIcon = function(tx: Transaction) {
if([TransactionStatus.ERROR, TransactionStatus.EXPIRED, TransactionStatus.BLOCKED, TransactionStatus.REVERTED].includes(tx.status)) {
if([TransactionStatus.ERROR, TransactionStatus.EXPIRED, TransactionStatus.BLOCKED].includes(tx.status)) {
return (<Icon containerStyle={$txIconContainer} icon="faBan" size={spacing.medium} color={txErrorColor}/>)
}
if([TransactionStatus.REVERTED].includes(tx.status)) {
return (<Icon containerStyle={$txIconContainer} icon="faArrowRotateLeft" size={spacing.medium} color={txErrorColor}/>)
}
if([TransactionStatus.PENDING].includes(tx.status)) {
return (<Icon containerStyle={$txIconContainer} icon="faClock" size={spacing.medium} color={txErrorColor}/>)
}
src/screens/TransferScreen.tsx
+3 -2
View File
@@ -622,6 +622,7 @@ const handleError = function(e: AppError): void {
const headerBg = useThemeColor('header')
const iconColor = useThemeColor('textDim')
const amountInputColor = useThemeColor('amountInput')
return (
@@ -642,7 +643,7 @@ const iconColor = useThemeColor('textDim')
onChangeText={amount => setAmountToTransfer(amount)}
// onEndEditing={onAmountEndEditing}
value={amountToTransfer}
style={$amountInput}
style={[$amountInput, {color: amountInputColor}]}
maxLength={9}
keyboardType="numeric"
selectTextOnFocus={true}
@@ -659,7 +660,7 @@ const iconColor = useThemeColor('textDim')
<Text
size="sm"
tx="payCommon.amountToPayLabel"
style={{color: 'white', textAlign: 'center'}}
style={{color: amountInputColor, textAlign: 'center'}}
/>
)}
</View>
src/screens/UpdateScreen.tsx
+2 -1
View File
@@ -131,11 +131,12 @@ export const UpdateScreen: FC<SettingsStackScreenProps<'Update'>> = observer(fun
}
const headerBg = useThemeColor('header')
const headerTitle = useThemeColor('headerTitle')
return (
<Screen contentContainerStyle={$screen}>
<View style={[$headerContainer, {backgroundColor: headerBg}]}>
<Text preset="heading" tx="updateScreen.updateManagerTitle" style={{color: 'white'}} />
<Text preset="heading" tx="updateScreen.updateManagerTitle" style={{color: headerTitle}} />
</View>
<View style={$contentContainer}>
<Card
src/screens/WalletScreen.tsx
+9 -8
View File
@@ -539,9 +539,10 @@ export const WalletScreen: FC<WalletScreenProps> = observer(
const headerBg = useThemeColor('header')
const balances = proofsStore.getBalances()
const screenBg = useThemeColor('background')
const mainButtonIcon = useThemeColor('button')
const mainButtonIcon = useThemeColor('mainButtonIcon')
const mainButtonColor = useThemeColor('card')
const label = useThemeColor('textDim')
const headerTitle = useThemeColor('headerTitle')
const isNwcVisible = nwcStore.all.some(c => c.remainingDailyLimit !== c.dailyLimit)
const nwcCardsData = nwcStore.all.filter(c => c.remainingDailyLimit !== c.dailyLimit)
@@ -568,8 +569,8 @@ export const WalletScreen: FC<WalletScreenProps> = observer(
style={{flexDirection: 'row', alignItems:'center', marginRight: spacing.medium}}
onPress={() => gotoPaymentRequests()}
>
<Icon icon='faPaperPlane' color={'white'}/>
<Text text={`${paymentRequestsStore.countNotExpired}`} style={{color: 'white'}} />
<Icon icon='faPaperPlane' color={headerTitle}/>
<Text text={`${paymentRequestsStore.countNotExpired}`} style={{color: headerTitle}} />
</Pressable>
)}
</>
@@ -767,11 +768,11 @@ export const WalletScreen: FC<WalletScreenProps> = observer(
const UnitBalanceBlock = observer(function (props: {
unitBalance: UnitBalance
}) {
const {walletStore, userSettingsStore} = useStores()
const balanceColor = 'white'
const convertedBalanceColor = colors.palette.primary200
const currencyColor = colors.palette.primary200
const {walletStore, userSettingsStore} = useStores()
const convertedBalanceColor = useThemeColor('headerSubTitle')
const {unitBalance} = props
const headerTitle = useThemeColor('headerTitle')
const balanceColor = headerTitle
const getConvertedBalance = function () {
return convertToFromSats(
@@ -795,7 +796,7 @@ const UnitBalanceBlock = observer(function (props: {
<CurrencyAmount
amount={getConvertedBalance() ?? 0}
currencyCode={unitBalance.unit === 'sat' ? userSettingsStore.exchangeCurrency : CurrencyCode.SAT}
symbolStyle={{color: currencyColor, marginTop: spacing.tiny}}
symbolStyle={{color: convertedBalanceColor, marginTop: spacing.tiny}}
amountStyle={{color: convertedBalanceColor}}
size='small'
/>
src/services/sqlite.ts
+19 -5
View File
@@ -17,10 +17,11 @@ import {LogLevel} from './log/logTypes'
import {BackupProof} from '../models/Proof'
import { CashuUtils } from './cashu/cashuUtils'
import { CurrencyCode } from './wallet/currency'
import { ThemeCode } from '../theme'
let _db: QuickSQLiteConnection
const _dbVersion = 14 // Update this if db changes require migrations
const _dbVersion = 15 // Update this if db changes require migrations
const getInstance = function () {
if (!_db) {
@@ -78,7 +79,8 @@ const _createOrUpdateSchema = function (db: QuickSQLiteConnection) {
id INTEGER PRIMARY KEY NOT NULL,
walletId TEXT,
preferredUnit TEXT,
exchangeCurrency TEXT,
exchangeCurrency TEXT,
theme TEXT,
isOnboarded BOOLEAN,
isStorageEncrypted BOOLEAN,
isLocalBackupOn BOOLEAN,
@@ -283,6 +285,15 @@ const _runMigrations = function (db: QuickSQLiteConnection) {
log.info(`Prepared database migrations from ${currentVersion} -> 14`)
}
if (currentVersion < 15) {
migrationQueries.push([
`ALTER TABLE usersettings
ADD COLUMN theme`,
])
log.info(`Prepared database migrations from ${currentVersion} -> 15`)
}
// Update db version as a part of migration sqls
migrationQueries.push([
`INSERT OR REPLACE INTO dbversion (id, version, createdAt)
@@ -402,6 +413,7 @@ const getUserSettings = function (): UserSettings {
walletId,
preferredUnit: 'sat',
exchangeCurrency: CurrencyCode.USD,
theme: ThemeCode.DEFAULT,
isOnboarded: 0,
isStorageEncrypted: 0,
isLocalBackupOn: 1,
@@ -431,6 +443,7 @@ const updateUserSettings = function (settings: UserSettings): UserSettings {
walletId,
preferredUnit,
exchangeCurrency,
theme,
isOnboarded,
isStorageEncrypted,
isLocalBackupOn,
@@ -441,14 +454,15 @@ const updateUserSettings = function (settings: UserSettings): UserSettings {
} = settings
const query = `
INSERT OR REPLACE INTO usersettings (id, walletId, preferredUnit, exchangeCurrency, isOnboarded, isStorageEncrypted, isLocalBackupOn, isBatchClaimOn, isTorDaemonOn, isLoggerOn, logLevel, createdAt)
VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
INSERT OR REPLACE INTO usersettings (id, walletId, preferredUnit, exchangeCurrency, theme, isOnboarded, isStorageEncrypted, isLocalBackupOn, isBatchClaimOn, isTorDaemonOn, isLoggerOn, logLevel, createdAt)
VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
`
const params = [
1,
walletId,
preferredUnit,
exchangeCurrency,
exchangeCurrency,
theme,
isOnboarded,
isStorageEncrypted,
isLocalBackupOn,
src/theme/colors.ts
+232 -2
View File
@@ -1,3 +1,20 @@
import { ColorValue, useColorScheme } from 'react-native'
export enum ThemeCode {
DEFAULT = 'default',
DARK = 'dark',
LIGHT = 'light',
GOLDEN = 'golden'
}
export interface ThemeData {
code: ThemeCode,
title: string,
color: string | ColorValue
}
export type ThemeList = Partial<Record<ThemeCode, ThemeData>>
const palette = {
neutral100: '#FFFFFF',
neutral200: '#F4F4F4',
@@ -19,6 +36,9 @@ const palette = {
primary800: '#102693',
primary900: '#091A7A',
gold100: '#E4C19B',
gold200: '#D7A068',
secondary100: '#54ACE7',
secondary200: '#318BC8',
secondary300: '#1A71AC',
@@ -70,6 +90,7 @@ const palette = {
iconViolet400: '#662482',
} as const
export const colors = {
/**
* The palette is available to use, but prefer using the name.
@@ -94,6 +115,10 @@ export const colors = {
* Color for amounts and balances.
*/
amount: palette.neutral800,
/**
* Color for amount input inside header.
*/
amountInput: palette.neutral100,
/**
* Color for amounts and balances.
*/
@@ -126,10 +151,34 @@ export const colors = {
* The default bg color of the primary button.
*/
buttonTertiaryPressed: palette.neutral200,
/**
* The default icon color of the main screen button.
*/
mainButtonIcon: palette.success300,
/**
* The default icon color of the primary button.
*/
buttonIcon: palette.neutral100,
/**
* The default icon color of the secondary button.
*/
buttonSecondaryIcon: palette.neutral100,
/**
* The default icon color of the tertiary button.
*/
buttonTertiaryIcon: palette.neutral100,
/**
* The default color of the header and status bar.
*/
header: palette.primary400,
/**
* The default color of the header title.
*/
headerTitle: palette.neutral100,
/**
* The default color of the header sub title.
*/
headerSubTitle: palette.primary200,
/**
* The default color of the bottom menu.
*/
@@ -141,7 +190,7 @@ export const colors = {
/**
* The main tinting color.
*/
tint: palette.primary400,
tint: palette.primary200,
/**
* A subtle color used for lines.
*/
@@ -193,6 +242,10 @@ export const colors = {
* Color for amounts and balances.
*/
amount: palette.neutral200,
/**
* Color for amount input inside header.
*/
amountInput: palette.neutral100,
/**
* Color for amounts and balances.
*/
@@ -225,10 +278,34 @@ export const colors = {
* The default bg color of the primary button.
*/
buttonTertiaryPressed: palette.neutral700,
/**
* The default icon color of the main screen button.
*/
mainButtonIcon: palette.success300,
/**
* The default icon color of the primary button.
*/
buttonIcon: palette.neutral100,
/**
* The default icon color of the secondary button.
*/
buttonSecondaryIcon: palette.neutral100,
/**
* The default icon color of the tertiary button.
*/
buttonTertiaryIcon: palette.neutral100,
/**
* The default color of the header and status bar.
*/
header: palette.primary600,
/**
* The default color of the header title.
*/
headerTitle: palette.neutral100,
/**
* The default color of the header sub title.
*/
headerSubTitle: palette.primary200,
/**
* The default color of the bottom menu.
*/
@@ -240,7 +317,7 @@ export const colors = {
/**
* The main tinting color.
*/
tint: palette.primary400,
tint: palette.primary200,
/**
* A subtle color used for lines.
*/
@@ -275,6 +352,159 @@ export const colors = {
usd: '#599D52',
eur: '#0002C8'
},
golden: {
/**
* A helper for making something see-thru.
*/
transparent: 'rgba(0, 0, 0, 0)',
/**
* The default text color in many components.
*/
text: palette.neutral200,
/**
* Secondary text information.
*/
textDim: palette.neutral500,
/**
* Color for amounts and balances.
*/
amount: palette.gold100,
/**
* Color for amount input inside header.
*/
amountInput: palette.gold200,
/**
* Color for amounts and balances.
*/
receivedAmount: palette.success200,
/**
* The default color of the screen background.
*/
background: palette.neutral700,
/**
* The default bg color of the primary button.
*/
button: palette.neutral900,
/**
* The default bg color of the primary button.
*/
buttonPressed: palette.success200,
/**
* The default bg color of the primary button.
*/
buttonSecondary: palette.neutral700,
/**
* The default bg color of the primary button.
*/
buttonSecondaryPressed: palette.neutral600,
/**
* The default bg color of the primary button.
*/
buttonTertiary: 'transparent',
/**
* The default bg color of the primary button.
*/
buttonTertiaryPressed: palette.neutral700,
/**
* The default icon color of the main screen button.
*/
mainButtonIcon: palette.gold200,
/**
* The default icon color of the primary button.
*/
buttonIcon: palette.gold200,
/**
* The default icon color of the secondary button.
*/
buttonSecondaryIcon: palette.gold100,
/**
* The default icon color of the tertiary button.
*/
buttonTertiaryIcon: palette.gold100,
/**
* The default color of the header and status bar.
*/
header: palette.neutral900,
/**
* The default color of the header title.
*/
headerTitle: palette.gold200,
/**
* The default color of the header sub title.
*/
headerSubTitle: palette.gold100,
/**
* The default color of the bottom menu.
*/
menu: palette.neutral700,
/**
* The default border color.
*/
border: palette.neutral400,
/**
* The main tinting color.
*/
tint: palette.gold200,
/**
* A subtle color used for lines.
*/
separator: palette.neutral700,
/**
* Error messages.
*/
error: palette.angry500,
/**
* Error Background.
*
*/
errorBackground: palette.angry100,
/**
* Info Background.
*
*/
info: palette.success200,
/**
* Warning Background.
*
*/
warn: palette.accent500,
/**
* The default card color.
*/
card: palette.neutral800,
statusBarOnModalOpen: palette.neutral900,
statusBarOnLoading: palette.neutral900,
loadingIndicator: '#ccc',
btc: '#f7931A',
usd: '#599D52',
eur: '#0002C8'
},
}
// const colorScheme = useColorScheme()
export const Themes: ThemeList = {
default: {
code: ThemeCode.DEFAULT,
title: 'Default',
color: palette.primary400
},
dark: {
code: ThemeCode.DARK,
title: 'Dark',
color: colors[ThemeCode.DARK].header
},
light: {
code: ThemeCode.LIGHT,
title: 'Light',
color: colors[ThemeCode.LIGHT].header
},
golden: {
code: ThemeCode.GOLDEN,
title: 'Golden',
color: palette.gold200
},
}
export const getRandomIconColor = () => {
src/theme/useThemeColor.tsx
+11 -4
View File
@@ -1,4 +1,5 @@
import {colors} from '../theme'
import { rootStoreInstance, useStores } from '../models'
import {ThemeCode, colors} from '../theme'
import {
ColorSchemeName,
useColorScheme as _useColorScheme,
@@ -13,8 +14,14 @@ export default function useColorScheme(): NonNullable<ColorSchemeName> {
}
export function useThemeColor(
colorName: keyof typeof colors.light & keyof typeof colors.dark,
colorName: keyof typeof colors.light & keyof typeof colors.dark & keyof typeof colors.golden,
) {
const colorScheme = useColorScheme()
return colors[colorScheme][colorName] as ColorValue
const { userSettingsStore } = rootStoreInstance
if(userSettingsStore.theme === ThemeCode.DEFAULT) {
const colorScheme = useColorScheme()
return colors[colorScheme][colorName] as ColorValue
}
return colors[userSettingsStore.theme][colorName] as ColorValue
}