Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Proofs screen: improve huge proof list using flashlist, update layout #68

Merged
merged 2 commits into from
Jun 17, 2023
Merged

Proofs screen: improve huge proof list using flashlist, update layout #68

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
07cbb43
Proofs screen: improve huge proof list using flashlist, update screen…
KKA11010 Jun 17, 2023
638c749
update style import
KKA11010 Jun 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 25 additions & 61 deletions src/components/pages/Mints/Proofs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,20 @@
import type { Proof } from '@cashu/cashu-ts'
import { ProofRow } from '@comps/coinSelectionRow'
import { CheckmarkIcon, CopyIcon, MintBoardIcon } from '@comps/Icons'
import KeysetHint from '@comps/KeysetHint'
import Separator from '@comps/Separator'
import { getProofsByMintUrl } from '@db'
import { TMintProofsPageProps } from '@model/nav'
import type { TMintProofsPageProps } from '@model/nav'
import BottomNav from '@nav/BottomNav'
import TopNav from '@nav/TopNav'
import { ProofListHeader } from '@pages/Lightning/modal'
import { FlashList } from '@shopify/flash-list'
import { ThemeContext } from '@src/context/Theme'
import { getMintCurrentKeySetId } from '@src/wallet'
import { globals, mainColors } from '@styles'
import { formatMintUrl } from '@util'
import * as Clipboard from 'expo-clipboard'
import { globals } from '@styles'
import { useContext, useEffect, useState } from 'react'
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import { ScrollView } from 'react-native-gesture-handler'
import { StyleSheet, View } from 'react-native'

export default function MintProofsPage({ navigation, route }: TMintProofsPageProps) {
const { color } = useContext(ThemeContext)
const [copied, setCopied] = useState(false)
const [proofs, setProofs] = useState<Proof[]>([])
const [mintKeysetId, setMintKeysetId] = useState('')
// initiate proofs & get the active keysetid of a mint once on initial render to compare with the proof keysets in the list
Expand All @@ -37,44 +33,22 @@ export default function MintProofsPage({ navigation, route }: TMintProofsPagePro
<View style={[styles.container, { backgroundColor: color.BACKGROUND }]}>
<TopNav screenName='Proofs' withBackBtn />
<View style={styles.content}>
{/* Header */}
<Text style={[globals(color).header, styles.header]}>
Proofs
</Text>
{/* Mint url */}
<View style={styles.subHeader}>
<MintBoardIcon width={19} height={19} color={color.TEXT_SECONDARY} />
<Text style={[styles.mintUrl, { color: color.TEXT_SECONDARY }]}>
{formatMintUrl(route.params.mintUrl)}
</Text>
{/* Copy mint url */}
<TouchableOpacity
style={{ padding: 5 }}
onPress={() => {
void Clipboard.setStringAsync(route.params.mintUrl).then(() => {
setCopied(true)
const t = setTimeout(() => {
setCopied(false)
clearTimeout(t)
}, 3000)
})
}}
>
{copied ?
<CheckmarkIcon width={20} height={20} color={mainColors.VALID} />
:
<CopyIcon color={color.TEXT_SECONDARY} />
}
</TouchableOpacity>
</View>
{/* Info about latest keyset ids highlighted in green */}
<KeysetHint />
{/* List header */}
<ProofListHeader />
<View style={{ paddingHorizontal: 20, marginTop: 20 }}>
<ProofListHeader />
</View>
{/* Proofs list */}
<ScrollView style={styles.scroll} showsVerticalScrollIndicator={false}>
{proofs.map(p => <ProofRow key={p.secret} proof={p} isLatestKeysetId={p.id === mintKeysetId} />)}
</ScrollView>
<View style={[globals(color).wrapContainer, styles.listWrap]}>
<FlashList
data={proofs}
estimatedItemSize={300}
contentContainerStyle={{ paddingHorizontal: 20 }}
renderItem={data => (
<ProofRow key={data.item.secret} proof={data.item} isLatestKeysetId={data.item.id === mintKeysetId} />
)}
ItemSeparatorComponent={() => <Separator />}
/>
</View>
</View>
<BottomNav navigation={navigation} route={route} />
</View>
Expand All @@ -85,27 +59,17 @@ const styles = StyleSheet.create({
container: {
flex: 1,
},
scrollContainer: {
marginBottom: 175,
},
content: {
marginTop: 130,
paddingHorizontal: 20,
},
header: {
marginBottom: 0,
flex: 1,
marginTop: 80,
marginBottom: 60,
},
subHeader: {
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
marginBottom: 5
listWrap: {
flex: 1,
paddingHorizontal: 0,
},
mintUrl: {
fontSize: 16,
marginHorizontal: 10,
},
scroll: {
marginBottom: 140,
},
})
7 changes: 7 additions & 0 deletions src/styles/globals.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,13 @@ export const globals = (color: TPref, h?: string) => StyleSheet.create({
textAlign: 'center',
color: color.TEXT,
},
wrapContainer: {
borderWidth: 1,
borderRadius: 20,
borderColor: color.BORDER,
backgroundColor: color.INPUT_BG,
paddingHorizontal: 20,
},
modalTxt: {
fontSize: 16,
textAlign: 'center',
Expand Down