Minor fixes (#87)

* update flashlist height and avoid rendering before async loading of latestKeysetIds is ready * update adaptive-icon size and app config key userInterfaceStyle: 'automatic' * update readme * add separator to readme * remove separator from readme * update README * update README * update README * update README
cashubtc · Jun 23, 2023 · dad2030 · dad2030
1 parent 635bd31
commit dad2030
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 62 deletions.
diff --git a/README.md b/README.md
@@ -2,19 +2,31 @@
   <p>
     <img src="https://i.imgur.com/EI7Uvg1.jpeg">
   </p>
-  <h1>A Cashu wallet for Android and iOS</h1>
+  <h2>A Cashu wallet for Android and iOS</h2>
   <div style="display: flex; align-items: center; justify-content: center">
 
   [![codecov](https://codecov.io/gh/cashubtc/eNuts/branch/main/graph/badge.svg?token=MGBC95KGHQ)](https://codecov.io/gh/cashubtc/eNuts)
   ![example workflow](https://github.com/cashubtc/eNuts/actions/workflows/node.js.yml/badge.svg)
-  ![ts](https://badgen.net/badge/Built%20With/TypeScript/blue)
+  ![ts](https://badgen.net/badge/Built%20with/TypeScript/blue)
+  [![runs with Expo Go](https://img.shields.io/badge/Runs%20with%20Expo%20Go-4630EB.svg?style=flat-square&logo=EXPO&labelColor=f3f3f3&logoColor=000)](https://expo.dev/client)
 
   </div>
 </div>
 
 <!-- <a  href="cashu://cashuAeyJ0b2tlbiI6W3sicHJvb2ZzIjpbeyJpZCI6InVUWTFBTE5ZZmQ2ZyIsImFtb3VudCI6MSwic2VjcmV0IjoiRnRIL2EvWUppMGtPVHAvL2R0UkxHcFk2Mjl1VzcxNHBQZE1YZmJTRTFmQT0iLCJDIjoiMDJhZTg2ZWZjODk1OWZiYmU2MzUyM2NiMGVjMDY2MDMzOGNiZjAwNDUxZmFhNTYyNDQ2NGYxNDQ0Zjc4ODhiMDFhIn0seyJpZCI6InVUWTFBTE5ZZmQ2ZyIsImFtb3VudCI6NCwic2VjcmV0IjoiS3lJTDRrOWtNZkhrMjdQeER4MGFBV3E0Qk9RMWZUYzc3RmRjdG1sZVNFRT0iLCJDIjoiMDNiYWNjMjU3ZDFlYmRlNWQ0OThiOTQxNzZkZTFlNmEyYWM5Y2I0Njg4MjYwZDJkMjE1NzU3NWFkYTM1ODFmMjQyIn0seyJpZCI6InVUWTFBTE5ZZmQ2ZyIsImFtb3VudCI6NjQsInNlY3JldCI6IjZoYmptak1ZT01LMVpaS0pmek1LR0NjeXM3TEpUeE9MQ3p2VmJSZ1dqZ289IiwiQyI6IjAyODkwMTk5ODIyOTY4YzM1NWZlZDgzOTBkMDQxOWU2MjY3MjBlNWQ1NjQzMzNjYzRlOGQyOWM2NzdjZDA1MGM1NSJ9XSwibWludCI6Imh0dHBzOi8vdGVzdG51dC5jYXNodS5zcGFjZSJ9XX0"> token</a> -->
 eNuts is a strongly typed mobile [**Cashu**](https://github.com/cashubtc) wallet that has Lightning support and can connect to multiple mints. This project uses the [**cashu-ts**](https://github.com/cashubtc/cashu-ts) library and manages proofs using SQLite. We aim to provide a great user experience by implementing features that make the usage of Ecash easier and safer at the same time. This project is in early stage and we strongly encourage you to exercise caution and only use it for **experimental** or **educational** purposes. Read more about Cashu at [https://docs.cashu.space/](https://docs.cashu.space/)
 
+## Contents
+
+- 🐿️[R&D](#%EF%B8%8F-join-the-research-and-development-groups)
+- ⚠️[Disclaimer](#%EF%B8%8F-disclaimer)
+- 🥜[Implemented NUTs](#-implemented-nuts)
+- 📋[Requirements](#-requirements)
+- 👏[Contribute](#-contribute)
+- 🚀[Getting started](#-getting-started)
+- 🎉[Releases](#-releases)
+- 📄[License](#-license)
+
 ## 🐿️ Join the research and development groups
 
 <div style="display: flex; align-items: center;">
@@ -23,17 +35,6 @@ eNuts is a strongly typed mobile [**Cashu**](https://github.com/cashubtc) wallet
 [![Cashu R&D](https://img.shields.io/badge/eNuts_R&D-Telegram-0088cc.svg)](https://t.me/eNutsWallet)
 </div>
 
-
-## Contents
-
-- [Disclaimer](#-disclaimer)
-- [Implemented NUTs](#-implemented-nuts)
-- [Requirements](#-requirements)
-- [Contribute](#-contribute)
-- [Getting started](#-getting-started)
-- [Releases](#-releases)
-- [License](#-license)
-
 ## ⚠️ Disclaimer
 
 **The author is NOT a cryptographer and this work has not been reviewed. This means that there is very likely a fatal flaw somewhere. Cashu is still experimental.**
@@ -94,9 +95,7 @@ We will implement translations ASAP and provide a clear contribution guide to ho
 
 Each of these tasks is highly impactful, and maintainers will greatly appreciate your help.
 
-If you are eager to start contributing code right away, we have a list of [good first issues](https://github.com/cashubtc/eNuts/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22) that contain bugs which have a relatively limited scope.
-
-We use GitHub [issues](https://github.com/cashubtc/eNuts/issues) and [pull requests](https://github.com/cashubtc/eNuts/pulls) to keep track of bug reports and contributions from the community. Pull request have to pass the tests and to be reviewed by a maintainer.
+If you are eager to start contributing code right away, we have a list of [good first issues](https://github.com/cashubtc/eNuts/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22) that contain bugs which have a relatively limited scope. We use GitHub [issues](https://github.com/cashubtc/eNuts/issues) and [pull requests](https://github.com/cashubtc/eNuts/pulls) to keep track of bug reports and contributions from the community. Pull request have to pass the tests and to be reviewed by a maintainer.
 
 The process of proposing a change to eNuts can be summarized as follows:
 

diff --git a/assets/adaptive-icon.png b/assets/adaptive-icon.png
diff --git a/config/app.config.ts b/config/app.config.ts
@@ -48,7 +48,7 @@ const config: ExpoConfig = {
 	scheme: 'cashu',
 	orientation: 'portrait',
 	icon: './assets/icon_transparent.png',
-	userInterfaceStyle: 'light',
+	userInterfaceStyle: 'automatic',
 	splash: {
 		image: './assets/splash.png',
 		resizeMode: 'contain',

diff --git a/src/components/screens/Lightning/modal.tsx b/src/components/screens/Lightning/modal.tsx
@@ -1,5 +1,6 @@
 import Button from '@comps/Button'
 import CoinSelectionRow from '@comps/coinSelectionRow'
+import useLoading from '@comps/hooks/Loading'
 import QR from '@comps/QR'
 import Separator from '@comps/Separator'
 import Success from '@comps/Success'
@@ -180,6 +181,7 @@ export function CoinSelectionModal({ mint, lnAmount, disableCS, proofs, setProof
 	const { color, highlight } = useContext(ThemeContext)
 	const [visible, setVisible] = useState(true)
 	const [mintKeysetId, setMintKeysetId] = useState('')
+	const { loading, startLoading, stopLoading } = useLoading()
 	const cancelCoinSelection = () => {
 		setVisible(false)
 		disableCS()
@@ -188,8 +190,11 @@ export function CoinSelectionModal({ mint, lnAmount, disableCS, proofs, setProof
 	useEffect(() => {
 		if (!mint?.mintUrl) { return }
 		void (async () => {
+			startLoading()
 			setMintKeysetId(await getMintCurrentKeySetId(mint.mintUrl))
+			stopLoading()
 		})()
+	// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [mint?.mintUrl])
 	return (
 		<MyModal type='invoiceAmount' animation='slide' visible={visible} close={cancelCoinSelection} hasNoPadding>
@@ -210,33 +215,39 @@ export function CoinSelectionModal({ mint, lnAmount, disableCS, proofs, setProof
 				<View style={{ paddingHorizontal: 20 }}>
 					<ProofListHeader />
 				</View>
-				<View
-					style={[
-						globals(color).wrapContainer,
-						styles.listWrap,
-						{ marginBottom: getSelectedAmount(proofs) >= lnAmount ? 90 : 0 }
-					]}
-				>
-					<FlashList
-						data={proofs}
-						estimatedItemSize={300}
-						showsVerticalScrollIndicator={false}
-						contentContainerStyle={{ paddingHorizontal: 20 }}
-						ItemSeparatorComponent={() => <Separator />}
-						renderItem={data => (
-							<CoinSelectionRow
-								key={data.item.secret}
-								proof={data.item}
-								isLatestKeysetId={mintKeysetId === data.item.id}
-								setChecked={() => {
-									const proofIdx = proofs.findIndex(proof => proof.secret === data.item.secret)
-									const updated = proofs.map((p, i) => proofIdx === i ? { ...p, selected: !p.selected } : p)
-									setProof(updated)
-								}}
-							/>
-						)}
-					/>
-				</View>
+				{!loading &&
+					<View
+						style={[
+							globals(color).wrapContainer,
+							{
+								paddingHorizontal: 0,
+								height: Math.floor(proofs.length * 56),
+								// adds a margin bottom if the "confirm" button is visible
+								marginBottom: getSelectedAmount(proofs) >= lnAmount ? 90 : 0
+							},
+						]}
+					>
+						<FlashList
+							data={proofs}
+							estimatedItemSize={300}
+							showsVerticalScrollIndicator={false}
+							contentContainerStyle={{ paddingHorizontal: 20 }}
+							ItemSeparatorComponent={() => <Separator />}
+							renderItem={data => (
+								<CoinSelectionRow
+									key={data.item.secret}
+									proof={data.item}
+									isLatestKeysetId={mintKeysetId === data.item.id}
+									setChecked={() => {
+										const proofIdx = proofs.findIndex(proof => proof.secret === data.item.secret)
+										const updated = proofs.map((p, i) => proofIdx === i ? { ...p, selected: !p.selected } : p)
+										setProof(updated)
+									}}
+								/>
+							)}
+						/>
+					</View>
+				}
 			</View>
 			{/* Confirm button */}
 			{getSelectedAmount(proofs) >= lnAmount &&
@@ -318,9 +329,6 @@ const styles = StyleSheet.create({
 		paddingHorizontal: 20,
 		marginBottom: 20,
 	},
-	listWrap: {
-		flex: 1,
-	},
 	overview: {
 		flexDirection: 'row',
 		justifyContent: 'space-between',

diff --git a/src/components/screens/Mints/Proofs.tsx b/src/components/screens/Mints/Proofs.tsx
@@ -1,5 +1,6 @@
 import type { Proof } from '@cashu/cashu-ts'
 import { ProofRow } from '@comps/coinSelectionRow'
+import Separator from '@comps/Separator'
 import { getProofsByMintUrl } from '@db'
 import type { TMintProofsPageProps } from '@model/nav'
 import BottomNav from '@nav/BottomNav'
@@ -37,17 +38,27 @@ export default function MintProofsPage({ navigation, route }: TMintProofsPagePro
 					<ProofListHeader />
 				</View>
 				{/* Proofs list */}
-				<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={() => <View style={{ borderBottomWidth: 1, borderColor: color.BORDER }} />}
-					/>
-				</View>
+				{proofs.length > 0 &&
+					<View
+						style={[
+							globals(color).wrapContainer,
+							{
+								paddingHorizontal: 0,
+								height: Math.floor(proofs.length * 56),
+							}
+						]}
+					>
+						<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>
@@ -63,10 +74,6 @@ const styles = StyleSheet.create({
 		marginTop: 80,
 		marginBottom: 60,
 	},
-	listWrap: {
-		flex: 1,
-		paddingHorizontal: 0,
-	},
 	mintUrl: {
 		fontSize: 16,
 		marginHorizontal: 10,