diff --git a/components/DualCurrencyInput.tsx b/components/DualCurrencyInput.tsx index b18958d..373524e 100644 --- a/components/DualCurrencyInput.tsx +++ b/components/DualCurrencyInput.tsx @@ -82,6 +82,6 @@ export function DualCurrencyInput({ const styles = StyleSheet.create({ amountInput: { fontSize: 80, - height: 90, + height: 100, }, }); diff --git a/components/FocusableCamera.tsx b/components/FocusableCamera.tsx index 8407cbd..6721156 100644 --- a/components/FocusableCamera.tsx +++ b/components/FocusableCamera.tsx @@ -19,7 +19,6 @@ export function FocusableCamera({ onScanned }: FocusableCameraProps) { const handleBarCodeScanned = ({ data }: BarcodeScanningResult) => { onScanned(data); }; - return ( void; -}; + startScanning: boolean; +} -function QRCodeScanner({ onScanned }: QRCodeScannerProps) { - const [isScanning, setScanning] = React.useState(false); +function QRCodeScanner({ onScanned, startScanning = true }: QRCodeScannerProps) { + const [isScanning, setScanning] = React.useState(startScanning); const [isLoading, setLoading] = React.useState(false); const [permissionStatus, setPermissionStatus] = React.useState(PermissionStatus.UNDETERMINED); useEffect(() => { // Add some timeout to allow the screen transition to finish before // starting the camera to avoid stutters - setLoading(true); - window.setTimeout(async () => { - await scan(); - setLoading(false); - }, 200); - }, []); + if (startScanning) { + setLoading(true); + window.setTimeout(async () => { + await scan(); + setLoading(false); + }, 200); + } + }, [startScanning]); async function scan() { const { status } = await Camera.requestCameraPermissionsAsync(); @@ -59,9 +62,7 @@ function QRCodeScanner({ onScanned }: QRCodeScannerProps) { } {isScanning && ( - <> - - + )} } diff --git a/pages/send/Send.tsx b/pages/send/Send.tsx index 095f1ba..313c401 100644 --- a/pages/send/Send.tsx +++ b/pages/send/Send.tsx @@ -23,10 +23,22 @@ export function Send() { const [isLoading, setLoading] = React.useState(false); const [keyboardOpen, setKeyboardOpen] = React.useState(false); const [keyboardText, setKeyboardText] = React.useState(""); + const [startScanning, setStartScanning] = React.useState(false); + // Delay starting the QR scanner if url has no valid payment info useEffect(() => { if (url) { - loadPayment(url); + (async () => { + try { + const result = await loadPayment(url); + setStartScanning(!result); + } catch (error) { + console.error("failed to load payment", url, error); + errorToast(error); + } + })(); + } else { + setStartScanning(true); } }, [url]); @@ -55,10 +67,10 @@ export function Send() { // TODO: Add a property for the human readable version of the url // and use it across different send / receive screens (e.g. without "lightning:") - async function loadPayment(text: string) { + async function loadPayment(text: string): Promise { if (!text) { errorToast(new Error("Your clipboard is empty.")); - return; + return false; } console.log("loading payment", text); const originalText = text; @@ -92,6 +104,8 @@ export function Send() { originalText, }, }); + + return true; } else { // Check if this is a valid invoice new Invoice({ @@ -102,12 +116,17 @@ export function Send() { pathname: "/send/confirm", params: { invoice: text, originalText }, }); + + return true; } } catch (error) { console.error("failed to load payment", originalText, error); errorToast(error); + } finally { setLoading(false); } + + return false; } return ( @@ -122,7 +141,7 @@ export function Send() { <> {!keyboardOpen && ( <> - +