From c3d5d4b854ea114fa5274b7aa5766c0b9c43caec Mon Sep 17 00:00:00 2001 From: Jimmy Date: Thu, 3 Jul 2025 08:28:59 +0200 Subject: [PATCH] Improved NFC reading state layout --- package-lock.json | 17 ++- package.json | 3 +- ...tch => react-native-webview+13.15.0.patch} | 0 src/assets/translations/en.json | 4 +- src/components/Blur/Blur.native.tsx | 47 +++++-- src/components/Blur/Blur.tsx | 2 +- src/components/Header/Header.tsx | 2 +- src/components/Text/Text.tsx | 16 ++- src/screens/Invoice/Invoice.tsx | 133 +++++++++++++----- 9 files changed, 170 insertions(+), 54 deletions(-) rename patches/{react-native-webview+13.13.2.patch => react-native-webview+13.15.0.patch} (100%) diff --git a/package-lock.json b/package-lock.json index 94f108e4..bf0408dc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,6 +26,7 @@ "@lottiefiles/react-lottie-player": "3.6.0", "@react-native-async-storage/async-storage": "2.1.1", "@react-native-clipboard/clipboard": "1.16.1", + "@react-native-community/blur": "4.4.1", "@react-native-community/checkbox": "0.5.17", "@react-native-community/slider": "4.5.5", "@react-native-picker/picker": "2.11.1", @@ -103,7 +104,7 @@ "react-native-vision-camera": "4.6.3", "react-native-web": "0.19.13", "react-native-web-linear-gradient": "1.1.2", - "react-native-webview": "13.13.2", + "react-native-webview": "13.15.0", "react-refresh": "0.16.0", "react-router-dom": "7.1.5", "react-router-native": "6.29.0", @@ -5628,6 +5629,15 @@ } } }, + "node_modules/@react-native-community/blur": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/@react-native-community/blur/-/blur-4.4.1.tgz", + "integrity": "sha512-XBSsRiYxE/MOEln2ayunShfJtWztHwUxLFcSL20o+HNNRnuUDv+GXkF6FmM2zE8ZUfrnhQ/zeTqvnuDPGw6O8A==", + "peerDependencies": { + "react": "*", + "react-native": "*" + } + }, "node_modules/@react-native-community/checkbox": { "version": "0.5.17", "license": "MIT", @@ -20824,8 +20834,9 @@ "license": "MIT" }, "node_modules/react-native-webview": { - "version": "13.13.2", - "license": "MIT", + "version": "13.15.0", + "resolved": "https://registry.npmjs.org/react-native-webview/-/react-native-webview-13.15.0.tgz", + "integrity": "sha512-Vzjgy8mmxa/JO6l5KZrsTC7YemSdq+qB01diA0FqjUTaWGAGwuykpJ73MDj3+mzBSlaDxAEugHzTtkUQkQEQeQ==", "dependencies": { "escape-string-regexp": "^4.0.0", "invariant": "2.2.4" diff --git a/package.json b/package.json index 603e7519..af291b82 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "@lottiefiles/react-lottie-player": "3.6.0", "@react-native-async-storage/async-storage": "2.1.1", "@react-native-clipboard/clipboard": "1.16.1", + "@react-native-community/blur": "4.4.1", "@react-native-community/checkbox": "0.5.17", "@react-native-community/slider": "4.5.5", "@react-native-picker/picker": "2.11.1", @@ -111,7 +112,7 @@ "react-native-vision-camera": "4.6.3", "react-native-web": "0.19.13", "react-native-web-linear-gradient": "1.1.2", - "react-native-webview": "13.13.2", + "react-native-webview": "13.15.0", "react-refresh": "0.16.0", "react-router-dom": "7.1.5", "react-router-native": "6.29.0", diff --git a/patches/react-native-webview+13.13.2.patch b/patches/react-native-webview+13.15.0.patch similarity index 100% rename from patches/react-native-webview+13.13.2.patch rename to patches/react-native-webview+13.15.0.patch diff --git a/src/assets/translations/en.json b/src/assets/translations/en.json index da5a552e..34be795e 100644 --- a/src/assets/translations/en.json +++ b/src/assets/translations/en.json @@ -162,7 +162,9 @@ "scanToWithdraw": "Scan to receive bitcoin via", "printReceipt": "Print receipt", "receipt": "Receipt", - "downloadReceipt": "Download receipt" + "downloadReceipt": "Download receipt", + "readingBoltCard": "Reading BoltCard", + "boltcardSupported": "BoltCard supported" }, "history": { "title": "Transaction history", diff --git a/src/components/Blur/Blur.native.tsx b/src/components/Blur/Blur.native.tsx index 1e3c0865..9f0db38e 100644 --- a/src/components/Blur/Blur.native.tsx +++ b/src/components/Blur/Blur.native.tsx @@ -1,4 +1,5 @@ import { View } from "@components"; +import { BlurView } from "@react-native-community/blur"; type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`; @@ -6,18 +7,38 @@ export type BlurProps = { blurRadius: number; backgroundColor?: RGBA; zIndex?: number; + realBlur?: boolean; }; -export const Blur = ({ backgroundColor, zIndex }: BlurProps) => ( - -); +export const Blur = ({ + backgroundColor, + zIndex, + blurRadius, + realBlur +}: BlurProps) => + realBlur ? ( + + ) : ( + + ); diff --git a/src/components/Blur/Blur.tsx b/src/components/Blur/Blur.tsx index 8f8dbbe6..645a2ce6 100644 --- a/src/components/Blur/Blur.tsx +++ b/src/components/Blur/Blur.tsx @@ -12,7 +12,7 @@ export const Blur = ({ style={{ backgroundColor, // @ts-ignore - backdropFilter: `blur(${blurRadius * 1.5}px)`, + backdropFilter: `blur(${blurRadius}px)`, zIndex }} /> diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 49bc6273..2999153c 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -41,7 +41,7 @@ export const Header = ({ left, right, backgroundOpacity = isWeb ? 0.25 : 0.5, - blurRadius = 6, + blurRadius = 8, ...props }: HeaderProps) => { const isLarge = useIsScreenSizeMin("large"); diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx index 5228ae08..2e048669 100644 --- a/src/components/Text/Text.tsx +++ b/src/components/Text/Text.tsx @@ -8,7 +8,16 @@ const { isNative } = platform; export type TextProps = RootTextProps & PropsWithChildren< { - [key in "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "h7" | "h8"]?: boolean; + [key in + | "h1" + | "h2" + | "h3" + | "h4" + | "h5" + | "h6" + | "h7" + | "h8" + | "h9"]?: boolean; } & { weight?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900; italic?: boolean; @@ -40,7 +49,8 @@ const StyledText = styled(RootText)` h5, h6, h7, - h8 + h8, + h9 }) => { const fontSize = (() => { switch (true) { @@ -60,6 +70,8 @@ const StyledText = styled(RootText)` return 9; case !!h8: return 8; + case !!h9: + return 6.5; default: return 19; } diff --git a/src/screens/Invoice/Invoice.tsx b/src/screens/Invoice/Invoice.tsx index 170330f5..10948d22 100644 --- a/src/screens/Invoice/Invoice.tsx +++ b/src/screens/Invoice/Invoice.tsx @@ -17,7 +17,9 @@ import { CountdownCircleTimer, Pressable, Modal, - View + View, + Blur, + Image } from "@components"; import { faArrowLeft, @@ -1021,20 +1023,83 @@ export const Invoice = () => { > {status !== "expired" && (isAlive ? ( - + + : { + icon: faGlobe + })} + ecl="M" + /> + {isNfcLoading && ( + <> + + + + {t("readingBoltCard")} + + + + + + + + + )} + ) : null)} {status === "unconfirmed" && confirmations !== undefined && @@ -1137,29 +1202,33 @@ export const Invoice = () => { } }} > - {isNfcLoading ? ( - - ) : ( - - )} + {isNfcNeedsPermission && ( )} + + {t("boltcardSupported")} + )}