laantungir/minibits_wallet
1
0
Fork 0
mirror of https://github.com/minibits-cash/minibits_wallet.git synced 2026-10-05 19:28:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Walle screen redesign WIP

Browse Source
This commit is contained in:
minibits-cash
2024-09-17 18:13:45 +02:00
parent a333d5f5b6
commit 51eb985fe4
6 changed files with 1158 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/ContactsScreen.tsx
+1
View File
@@ -80,6 +80,7 @@ export const ContactsScreen: FC<ContactsScreenProps> = observer(function Contact
const renderTabBar = (props: any) => (
<TabBar
key={props.key}
{...props}
indicatorStyle={{ backgroundColor: activeTabIndicator }}
style={{ backgroundColor: headerBg }}
src/screens/PaymentRequestsScreen.tsx
+1
View File
@@ -38,6 +38,7 @@ export const PaymentRequestsScreen: FC<PaymentRequestsScreenProps> = observer(fu
const renderTabBar = (props: any) => (
<TabBar
key={props.key}
{...props}
indicatorStyle={{ backgroundColor: activeTabIndicator }}
style={{ backgroundColor: headerBg }}
src/screens/WalletNameScreen.tsx
+2 -1
View File
@@ -1,7 +1,7 @@
import {observer} from 'mobx-react-lite'
import React, {FC, useCallback, useState} from 'react'
import {TextStyle, View, ViewStyle } from 'react-native'
import { TabView, SceneMap, Route, TabBarProps, TabBarItemProps, TabBar } from 'react-native-tab-view'
import { TabView, Route, TabBar } from 'react-native-tab-view'
import {colors, spacing, useThemeColor} from '../theme'
import {Screen, Text} from '../components'
import {RandomName} from './Contacts/RandomName'
@@ -43,6 +43,7 @@ export const WalletNameScreen: FC<WalletNameScreenProps> = observer(function Wal
const renderTabBar = (props: any) => (
<TabBar
key={props.key}
{...props}
indicatorStyle={{ backgroundColor: activeTabIndicator }}
style={{ backgroundColor: headerBg }}
src/screens/WalletScreen.tsx
+100 -142
View File
@@ -16,7 +16,7 @@ import {
ScrollView
} from 'react-native'
import codePush, { RemotePackage } from 'react-native-code-push'
import {moderateVerticalScale, verticalScale} from '@gocodingnow/rn-size-matters'
import {moderateScale, moderateVerticalScale, verticalScale} from '@gocodingnow/rn-size-matters'
import { SvgXml } from 'react-native-svg'
import {getUnixTime} from 'date-fns'
import PagerView, { PagerViewOnPageScrollEventData } from 'react-native-pager-view'
@@ -59,11 +59,12 @@ import { round } from '../utils/number'
import { IncomingParser } from '../services/incomingParser'
import useIsInternetReachable from '../utils/useIsInternetReachable'
import { CurrencySign } from './Wallet/CurrencySign'
import { MintUnit } from "../services/wallet/currency"
import { Currencies, MintUnit, getCurrency } from "../services/wallet/currency"
import { CurrencyAmount } from './Wallet/CurrencyAmount'
import { LeftProfileHeader } from './ContactsScreen'
import { maxTransactionsByUnit } from '../models/TransactionsStore'
import { NotificationService } from '../services/notificationService'
import { TabBar, TabView } from 'react-native-tab-view'
const AnimatedPagerView = Animated.createAnimatedComponent(PagerView)
const deploymentKey = APP_ENV === Env.PROD ? CODEPUSH_PRODUCTION_DEPLOYMENT_KEY : CODEPUSH_STAGING_DEPLOYMENT_KEY
@@ -306,13 +307,6 @@ export const WalletScreen: FC<WalletScreenProps> = observer(
const newMintUrl = scannedMintUrl || defaultMintUrl
log.trace('newMintUrl', newMintUrl)
// if(newMintUrl.includes('.onion')) {
// if(!userSettingsStore.isTorDaemonOn) {
// setInfo('Please enable Tor daemon in Privacy settings before connecting to the mint using .onion address.')
// return
// }
// }
if (mintsStore.alreadyExists(newMintUrl)) {
const msg = translate('walletScreen.mintExists')
@@ -367,144 +361,39 @@ export const WalletScreen: FC<WalletScreenProps> = observer(
const gotoProfile = function () {
navigation.navigate('ContactsNavigator', {screen: 'Profile', params: {}, initial: false})
}
/* Mints pager */
const width = spacing.screenWidth
const scrollOffsetAnimatedValue = React.useRef(new Animated.Value(0)).current
const positionAnimatedValue = React.useRef(new Animated.Value(0)).current
const inputRange = [0, groupedMints.length]
const scrollX = Animated.add(
scrollOffsetAnimatedValue,
positionAnimatedValue
).interpolate({
inputRange,
outputRange: [0, groupedMints.length * width],
})
const onPageScroll = React.useMemo(
() =>
Animated.event<PagerViewOnPageScrollEventData>(
[
{
nativeEvent: {
offset: scrollOffsetAnimatedValue,
position: positionAnimatedValue,
},
},
],
{
useNativeDriver: false,
}
),
// eslint-disable-next-line react-hooks/exhaustive-deps
[]
)
const onPageSelected = (e: any) => {
if(groupedMints.length === 0) {
return
}
const currentUnit = groupedMints[e.nativeEvent.position]?.unit
log.trace('[onPageSelected] currentUnit', currentUnit)
setCurrentUnit(currentUnit)
const preferredUnit = userSettingsStore.preferredUnit
if(currentUnit !== preferredUnit) { // prevents db write on first load
userSettingsStore.setPreferredUnit(currentUnit)
}
}
const handleError = function (e: AppError) {
setIsLoading(false)
setError(e)
}
const balances = proofsStore.getBalances()
const screenBg = useThemeColor('background')
const mainButtonIcon = useThemeColor('button')
const mainButtonColor = useThemeColor('card')
// Tab view by unit
const [routes] = useState(
groupedMints.map((mintUnit) => ({
key: mintUnit.unit,
title: getCurrency(mintUnit.unit).code,
}))
)
return (
<Screen contentContainerStyle={$screen}>
<Header
LeftActionComponent={<LeftProfileHeader
gotoProfile={gotoProfile}
isAvatarVisible={false}
/>}
/*leftIcon='faListUl'
leftIconColor={colors.palette.primary100}
onLeftPress={gotoTranHistory}*/
TitleActionComponent={!isInternetReachable ? (
<Text
tx={'common.offline'}
style={$offline}
size='xxs'
/>
) : (
groupedMints.length > 1 ? (
<ScalingDot
testID={'sliding-border'}
data={groupedMints}
inActiveDotColor={colors.palette.primary300}
activeDotColor={colors.palette.primary100}
activeDotScale={1}
containerStyle={{marginBottom: -spacing.tiny}}
//@ts-ignore
scrollX={scrollX}
dotSize={25}
/>
) : undefined
)}
RightActionComponent={
<>
{paymentRequestsStore.countNotExpired > 0 && (
<Pressable
style={{flexDirection: 'row', alignItems:'center', marginRight: spacing.medium}}
onPress={() => gotoPaymentRequests()}
>
<Icon icon='faPaperPlane' color={'white'}/>
<Text text={`${paymentRequestsStore.countNotExpired}`} style={{color: 'white'}} />
</Pressable>
)}
</>
}
/>
{groupedMints.length === 0 && (
<>
<ZeroBalanceBlock/>
<View style={$contentContainer}>
<PromoBlock addMint={addMint} />
</View>
</>
)}
<AnimatedPagerView
initialPage={0}
ref={pagerRef}
style={{flexGrow: 1}}
onPageScroll={onPageScroll}
onPageSelected={onPageSelected}
>
{groupedMints.map((mints) => (
<View key={mints.unit}>
const renderScene = function ({ route }: { route: { key: string } }) {
const unitMints = groupedMints.find((mintUnit) => mintUnit.unit === route.key);
if (unitMints) {
return (
<View key={unitMints.unit}>
<UnitBalanceBlock
unitBalance={balances.unitBalances.find(balance => balance.unit === mints.unit)!}
unitBalance={balances.unitBalances.find(balance => balance.unit === unitMints.unit)!}
/>
<View style={$contentContainer}>
<MintsByUnitListItem
mintsByUnit={mints}
mintsByUnit={unitMints}
navigation={navigation}
/>
{transactionsStore.recentByUnit(mints.unit).length > 0 && mints.mints.length < 4 && (
{transactionsStore.recentByUnit(unitMints.unit).length > 0 && unitMints.mints.length < 4 && (
<Card
ContentComponent={
<FlatList
data={transactionsStore.recentByUnit(mints.unit, maxTransactionsByUnit - mints.mints.length) as Transaction[]}
data={transactionsStore.recentByUnit(unitMints.unit, maxTransactionsByUnit - unitMints.mints.length) as Transaction[]}
renderItem={({item, index}) => {
return (<TransactionListItem
key={item.id}
@@ -522,9 +411,82 @@ export const WalletScreen: FC<WalletScreenProps> = observer(
/>
)}
</View>
</View>
))}
</AnimatedPagerView>
</View>
)
}
return null;
}
const tabWidth = moderateScale(80)
const renderTabBar = (props: any) => (
<View style={{backgroundColor: headerBg, marginTop: -spacing.extraSmall}}>
<View style={{width: routes.length * tabWidth, alignSelf: 'center', backgroundColor: headerBg}}>
<TabBar
key={props.key}
{...props}
tabStyle={{width: tabWidth}}
indicatorStyle={{ backgroundColor: activeTabIndicator }}
style={{backgroundColor: headerBg, shadowColor: 'transparent'}}
/>
</View>
</View>
)
const [index, setIndex] = useState(0)
const headerBg = useThemeColor('header')
const activeTabIndicator = colors.palette.accent400
const balances = proofsStore.getBalances()
const screenBg = useThemeColor('background')
const mainButtonIcon = useThemeColor('button')
const mainButtonColor = useThemeColor('card')
return (
<Screen contentContainerStyle={$screen}>
<Header
LeftActionComponent={<LeftProfileHeader
gotoProfile={gotoProfile}
isAvatarVisible={false}
/>}
TitleActionComponent={!isInternetReachable ? (
<Text
tx={'common.offline'}
style={$offline}
size='xxs'
/>
) : ( undefined )
}
RightActionComponent={
<>
{paymentRequestsStore.countNotExpired > 0 && (
<Pressable
style={{flexDirection: 'row', alignItems:'center', marginRight: spacing.medium}}
onPress={() => gotoPaymentRequests()}
>
<Icon icon='faPaperPlane' color={'white'}/>
<Text text={`${paymentRequestsStore.countNotExpired}`} style={{color: 'white'}} />
</Pressable>
)}
</>
}
/>
{groupedMints.length === 0 ? (
<>
<ZeroBalanceBlock/>
<View style={$contentContainer}>
<PromoBlock addMint={addMint} />
</View>
</>
) : (
<TabView
renderTabBar={renderTabBar}
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={{ width: routes.length * 100 }}
/>
)}
<View style={$bottomContainer}>
<View style={$buttonContainer}>
<Button
@@ -659,17 +621,13 @@ const UnitBalanceBlock = observer(function (props: {
// log.trace('[UnitBalanceBlock]', {unitBalance})
return (
<View style={[$headerContainer, {backgroundColor: headerBg}]}>
<CurrencySign
mintUnit={unitBalance.unit}
size='small'
textStyle={{color: balanceColor}}
/>
<View style={[$headerContainer, {backgroundColor: headerBg, paddingTop: spacing.medium}]}>
<CurrencyAmount
amount={unitBalance.unitBalance || 0}
mintUnit={unitBalance.unit}
symbolStyle={{display: 'none'}}
symbolStyle={{fontSize: moderateVerticalScale(14), color: currencyColor, marginTop: spacing.small}}
amountStyle={[$unitBalance, {color: balanceColor, marginTop: spacing.small}]}
containerStyle={{marginLeft: -spacing.medium}}
/>
</View>
)
@@ -933,7 +891,7 @@ const $screen: ViewStyle = {
const $headerContainer: TextStyle = {
alignItems: 'center',
// padding: spacing.tiny,
height: spacing.screenHeight * 0.20,
height: spacing.screenHeight * 0.30,
}
const $contentContainer: TextStyle = {
src/screens/WalletScreenBC.tsx
+1052
View File
File diff suppressed because it is too large Load Diff
src/services/wallet/currency.ts
+2 -2
View File
@@ -34,7 +34,7 @@ export type CurrencyList = Partial<Record<CurrencyCode, CurrencyData>>
export const Currencies: CurrencyList = {
SATS: {
symbol: 'SATS',
symbol: 'SAT',
title: 'Satoshis',
code: CurrencyCode.SATS,
mintUnit: 'sat',
@@ -43,7 +43,7 @@ export const Currencies: CurrencyList = {
mantissa: 0,
},
mSATS: {
symbol: 'mSATS',
symbol: 'mSAT',
title: 'Milisatoshis',
code: CurrencyCode.MSATS,
mintUnit: 'msat',