feat: PoC UI changes + Request Bluetooth permission on app startup (#318)

* feat: request Bluetooth permission on app startup

- Add Bluetooth permission request in _layout.tsx for both poc-pos-app and pos-app
- Permission is requested on first app load (Android only)
- Enables printer availability check as soon as app is installed

* chore: add log in case user rejects bluetooth permissions

Author: ignaciosantise

dapps/poc-pos-app/app/_layout.tsx

@@ -24,8 +24,11 @@ import * as Sentry from "@sentry/react-native";
 
 import { WalletConnectLoading } from "@/components/walletconnect-loading";
 import { Spacing } from "@/constants/spacing";
+import { useLogsStore } from "@/store/useLogsStore";
 import { useSettingsStore } from "@/store/useSettingsStore";
 import { getDeviceIdentifier } from "@/utils/misc";
+import { requestBluetoothPermission } from "@/utils/printer";
+import { showInfoToast } from "@/utils/toast";
 import { toastConfig } from "@/utils/toasts";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import React, { useEffect } from "react";
@@ -77,6 +80,37 @@ export default Sentry.wrap(function RootLayout() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [deviceId]);
 
+  // Request Bluetooth permission on first app load (Android only)
+  useEffect(() => {
+    async function checkBluetoothPermission() {
+      if (Platform.OS !== "android") return;
+
+      try {
+        const granted = await requestBluetoothPermission();
+        if (!granted) {
+          useLogsStore
+            .getState()
+            .addLog(
+              "error",
+              "Bluetooth permission denied",
+              "layout",
+              "checkBluetoothPermission",
+            );
+          showInfoToast("Bluetooth permission is needed to connect to printer");
+        }
+      } catch (error) {
+        const errorMessage =
+          error instanceof Error ? error.message : String(error);
+        useLogsStore
+          .getState()
+          .addLog("error", errorMessage, "layout", "checkBluetoothPermission", {
+            error,
+          });
+      }
+    }
+    checkBluetoothPermission();
+  }, []);
+
   if (!_hasHydrated || !fontsLoaded) {
     return (
       <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>

dapps/poc-pos-app/assets/images/brand.png

@@ -10,7 +10,8 @@ interface HeaderImageProps {
 
 export default function HeaderImage({ tintColor, padding }: HeaderImageProps) {
   const variant = useSettingsStore((state) => state.variant);
-  const brandLogo = Variants[variant].brandLogo;
+  const brandLogo = Variants[variant].brandLogo as string;
+
   return (
     <Image
       source={brandLogo}
@@ -20,7 +21,7 @@ export default function HeaderImage({ tintColor, padding }: HeaderImageProps) {
       tintColor={tintColor}
       style={{
         height: 18,
-        width: 185,
+        width: Variants[variant].brandLogoWidth ?? 185,
         marginTop: Spacing["spacing-1"],
         tintColor: tintColor,
         marginRight: padding ? Spacing["spacing-2"] : 0,

dapps/poc-pos-app/components/header-image.tsx

@@ -17,7 +17,7 @@ export const Colors = {
     "bg-primary": "#FFFFFF",
     "bg-invert": "#202020",
     "bg-accent-primary": "#0988F0",
-    "bg-payment-success": "#30A46B",
+    "bg-payment-success": "#0988F0",
 
     // Text colors
     "text-primary": "#202020",
@@ -47,7 +47,7 @@ export const Colors = {
     "bg-primary": "#202020",
     "bg-invert": "#FFFFFF",
     "bg-accent-primary": "#0988F0",
-    "bg-payment-success": "#30A46B",
+    "bg-payment-success": "#0988F0",
 
     // Text colors
     "text-primary": "#FFFFFF",

dapps/poc-pos-app/constants/printer-logos.ts

@@ -19,6 +19,7 @@ type VariantColorOverrides = Partial<typeof Colors.light>;
 interface Variant {
   name: string;
   brandLogo: ReturnType<typeof require>; // require() asset
+  brandLogoWidth?: number;
   printerLogo: string; // base64 string
   defaultTheme?: "light" | "dark";
   colors: {
@@ -31,6 +32,7 @@ export const Variants: Record<VariantName, Variant> = {
   default: {
     name: "Default",
     brandLogo: require("@/assets/images/brand.png"),
+    brandLogoWidth: 60,
     printerLogo: DEFAULT_LOGO_BASE64,
     colors: {
       light: {},

dapps/poc-pos-app/constants/theme.ts

@@ -106,9 +106,10 @@ export const printReceipt = async (
     const normal = { size: 10 } as TextOptions;
     const normalCenter = { size: 10, align: "CENTER" } as TextOptions;
     const bold = { size: 10, bold: true } as TextOptions;
+    const idStyle = { size: 9, bold: true } as TextOptions;
 
     await ReactNativePosPrinter.printText("ID        ", normal);
-    await ReactNativePosPrinter.printText(`${txnId}\n`, bold);
+    await ReactNativePosPrinter.printText(`${txnId}\n`, idStyle);
 
     await ReactNativePosPrinter.printText("DATE      ", normal);
     await ReactNativePosPrinter.printText(`${date}\n`, bold);
@@ -134,7 +135,7 @@ export const printReceipt = async (
     await ReactNativePosPrinter.newLine(2);
 
     await ReactNativePosPrinter.printText(
-      "Thank you for your purchase!\n",
+      "Thank you for your payment!\n",
       normalCenter,
     );
 

dapps/poc-pos-app/constants/variants.ts

@@ -24,9 +24,12 @@ import * as Sentry from "@sentry/react-native";
 
 import { WalletConnectLoading } from "@/components/walletconnect-loading";
 import { Spacing } from "@/constants/spacing";
+import { useLogsStore } from "@/store/useLogsStore";
 import { useSettingsStore } from "@/store/useSettingsStore";
 import { getDeviceIdentifier } from "@/utils/misc";
+import { requestBluetoothPermission } from "@/utils/printer";
 import { clearStaleSecureStorage } from "@/utils/secure-storage";
+import { showInfoToast } from "@/utils/toast";
 import { toastConfig } from "@/utils/toasts";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import React, { useEffect } from "react";
@@ -82,6 +85,37 @@ export default Sentry.wrap(function RootLayout() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [deviceId]);
 
+  // Request Bluetooth permission on first app load (Android only)
+  useEffect(() => {
+    async function checkBluetoothPermission() {
+      if (Platform.OS !== "android") return;
+
+      try {
+        const granted = await requestBluetoothPermission();
+        if (!granted) {
+          useLogsStore
+            .getState()
+            .addLog(
+              "error",
+              "Bluetooth permission denied",
+              "layout",
+              "checkBluetoothPermission",
+            );
+          showInfoToast("Bluetooth permission is needed to connect to printer");
+        }
+      } catch (error) {
+        const errorMessage =
+          error instanceof Error ? error.message : String(error);
+        useLogsStore
+          .getState()
+          .addLog("error", errorMessage, "layout", "checkBluetoothPermission", {
+            error,
+          });
+      }
+    }
+    checkBluetoothPermission();
+  }, []);
+
   if (!_hasHydrated || !fontsLoaded) {
     return (
       <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>