chore: pos sample improvements (#259)

Author: ignaciosantise

dapps/W3MWagmi/ios/W3MWagmi.xcodeproj/project.pbxproj

@@ -1047,7 +1047,7 @@
 				PRODUCT_BUNDLE_IDENTIFIER = com.walletconnect.web3modal.rnsample;
 				PRODUCT_NAME = W3MWagmi;
 				PROVISIONING_PROFILE_SPECIFIER = "";
-				"PROVISIONING_PROFILE_SPECIFIER[sdk=iphoneos*]" = "match AppStore com.walletconnect.web3modal.rnsample 1757428944";
+				"PROVISIONING_PROFILE_SPECIFIER[sdk=iphoneos*]" = "matchAppStore com.walletconnect.web3modal.rnsample";
 				SUPPORTED_PLATFORMS = "iphoneos iphonesimulator";
 				SUPPORTS_MACCATALYST = NO;
 				SUPPORTS_MAC_DESIGNED_FOR_IPHONE_IPAD = NO;
@@ -1167,7 +1167,7 @@
 				PRODUCT_BUNDLE_IDENTIFIER = com.walletconnect.web3modal.rnsample;
 				PRODUCT_NAME = W3MWagmi;
 				PROVISIONING_PROFILE_SPECIFIER = "";
-				"PROVISIONING_PROFILE_SPECIFIER[sdk=iphoneos*]" = "match AppStore com.walletconnect.web3modal.rnsample 1757428944";
+				"PROVISIONING_PROFILE_SPECIFIER[sdk=iphoneos*]" = "matchAppStore com.walletconnect.web3modal.rnsample";
 				SUPPORTED_PLATFORMS = "iphoneos iphonesimulator";
 				SUPPORTS_MACCATALYST = NO;
 				SUPPORTS_MAC_DESIGNED_FOR_IPHONE_IPAD = NO;
@@ -1422,7 +1422,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = "AppIcon-Internal";
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_ENTITLEMENTS = W3MWagmi/W3MWagmi.entitlements;
-				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Distribution";
+				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
 				CODE_SIGN_STYLE = Manual;
 				CURRENT_PROJECT_VERSION = 114;
 				DEVELOPMENT_TEAM = W5R8AG9K22;
@@ -1524,8 +1524,8 @@
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_DEBUG";
 				PRODUCT_BUNDLE_IDENTIFIER = com.walletconnect.web3modal.rnsample.internal;
 				PRODUCT_NAME = "$(TARGET_NAME)";
-				PROVISIONING_PROFILE_SPECIFIER = "match AppStore com.walletconnect.web3modal.rnsample.internal";
-				"PROVISIONING_PROFILE_SPECIFIER[sdk=iphoneos*]" = "match AppStore com.walletconnect.web3modal.rnsample.internal 1757428937";
+				PROVISIONING_PROFILE_SPECIFIER = "";
+				"PROVISIONING_PROFILE_SPECIFIER[sdk=iphoneos*]" = "match Development com.walletconnect.web3modal.rnsample.internal";
 				SUPPORTED_PLATFORMS = "iphoneos iphonesimulator";
 				SUPPORTS_MACCATALYST = NO;
 				SUPPORTS_MAC_DESIGNED_FOR_IPHONE_IPAD = NO;
@@ -1543,7 +1543,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = "AppIcon-Internal";
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_ENTITLEMENTS = W3MWagmi/W3MWagmi.entitlements;
-				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Distribution";
+				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
 				CODE_SIGN_STYLE = Manual;
 				CURRENT_PROJECT_VERSION = 114;
 				DEVELOPMENT_TEAM = W5R8AG9K22;
@@ -1644,8 +1644,8 @@
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE";
 				PRODUCT_BUNDLE_IDENTIFIER = com.walletconnect.web3modal.rnsample.internal;
 				PRODUCT_NAME = "$(TARGET_NAME)";
-				PROVISIONING_PROFILE_SPECIFIER = "match AppStore com.walletconnect.web3modal.rnsample.internal";
-				"PROVISIONING_PROFILE_SPECIFIER[sdk=iphoneos*]" = "match AppStore com.walletconnect.web3modal.rnsample.internal 1757428937";
+				PROVISIONING_PROFILE_SPECIFIER = "";
+				"PROVISIONING_PROFILE_SPECIFIER[sdk=iphoneos*]" = "match Development com.walletconnect.web3modal.rnsample.internal";
 				SUPPORTED_PLATFORMS = "iphoneos iphonesimulator";
 				SUPPORTS_MACCATALYST = NO;
 				SUPPORTS_MAC_DESIGNED_FOR_IPHONE_IPAD = NO;

dapps/pos-app/.gitignore

@@ -42,4 +42,3 @@ app-example
 
 ios/*
 android/*
-.env.local

dapps/pos-app/README.md

@@ -25,15 +25,103 @@ In the output, you'll find options to open the app in a
 
 You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
 
-## Get a fresh project
+## Sentry Configuration
 
-When you're ready, run:
+This project uses [Sentry](https://sentry.io/) for error tracking and monitoring. Before building the app, you need to configure Sentry authentication.
+
+### Option 1: Using Sentry Wizard (Recommended)
+
+Run the Sentry wizard to automatically configure your project:
+
+```bash
+npx @sentry/wizard@latest -i reactNative
+```
+
+This will:
+- Create/update the `sentry.properties` file in the `android/` and `ios/` directories
+- Set up your authentication token
+- Configure source map uploading
+
+### Option 2: Manual Configuration
+
+If you prefer to configure manually, you can set the `SENTRY_AUTH_TOKEN` environment variable:
+
+```bash
+# DO NOT COMMIT YOUR AUTH TOKEN
+export SENTRY_AUTH_TOKEN=sntrys_YOUR_TOKEN_HERE
+```
+
+Alternatively, you can add the token directly to the `sentry.properties` files:
+
+**android/sentry.properties** and **ios/sentry.properties**:
+```properties
+defaults.url=https://sentry.io/
+defaults.org=walletconnect
+defaults.project=mobile-pos-react-native
+auth.token=YOUR_AUTH_TOKEN_HERE
+```
+
+> **⚠️ Security Note**: Never commit your Sentry auth token to version control. Add `sentry.properties` to your `.gitignore` file.
+
+### Getting Your Auth Token
+
+1. Log in to [sentry.io](https://sentry.io/)
+2. Go to Settings → Account → API → Auth Tokens
+3. Create a new token with the following scopes:
+   - `project:read`
+   - `project:releases`
+   - `org:read`
+
+For more information on source maps and Expo integration, see the [Sentry Expo Documentation](https://docs.sentry.io/platforms/react-native/sourcemaps/uploading/expo/).
+
+## Android Release Configuration
+
+To build Android release versions of the app, you need to create a `secrets.properties` file in the `android/` directory with your keystore credentials.
+
+### Option 1: Testing with Debug Signing (Recommended for Development)
+
+For testing purposes, you can use the debug signing configuration. In `android/app/build.gradle`, ensure the release build type uses the debug signing config:
+
+```gradle
+buildTypes {
+    release {
+        signingConfig signingConfigs.debug
+        // ... other release configurations
+    }
+}
+```
+
+This allows you to build release APKs without setting up a production keystore.
+
+### Option 2: Production Signing with secrets.properties
+
+For production releases, create a file at `android/secrets.properties` with the following content:
+
+```properties
+WC_FILENAME_UPLOAD=path/to/your-keystore.keystore
+WC_STORE_PASSWORD_UPLOAD=your_store_password
+WC_KEYSTORE_ALIAS=your_key_alias
+WC_KEY_PASSWORD_UPLOAD=your_key_password
+```
+
+Then update the release signing config in `android/app/build.gradle` to use the release signing configuration instead of debug.
+
+### Generating a Keystore
+
+If you don't have a keystore file yet, you can generate one using the following command:
 
 ```bash
-npm run reset-project
+keytool -genkeypair -v -storetype PKCS12 -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
 ```
 
-This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
+This will prompt you to create passwords for the keystore and key. Make sure to:
+- Store the keystore file in a secure location
+- Remember the passwords you set
+- Never commit the keystore file or `secrets.properties` to version control
+
+> **⚠️ Security Note**: The `secrets.properties` file is already excluded in the `.gitignore`. Never commit this file or your keystore to version control.
+
+For more information on Android app signing, see the [React Native documentation](https://reactnative.dev/docs/signed-apk-android).
 
 ## Learn more
 

dapps/pos-app/app.json

@@ -16,10 +16,13 @@
         "usesNonExemptEncryption": false
       },
       "infoPlist": {
-        "NFCReaderUsageDescription": "This app requires NFC to send messages"
+        "NFCReaderUsageDescription": "This app requires NFC to send messages",
+        "NSLocationWhenInUseUsageDescription": "This app requires location when using the camera"
       },
       "entitlements": {
-        "com.apple.developer.nfc.readersession.formats": ["TAG"]
+        "com.apple.developer.nfc.readersession.formats": [
+          "TAG"
+        ]
       }
     },
     "android": {
@@ -32,8 +35,10 @@
       "edgeToEdgeEnabled": true,
       "predictiveBackGestureEnabled": false,
       "package": "com.reown.mobilepos",
-      "permissions": ["android.permission.NFC"],
-      "versionCode": 2
+      "permissions": [
+        "android.permission.NFC"
+      ],
+      "versionCode": 3
     },
     "web": {
       "output": "static",
@@ -54,6 +59,7 @@
         "@sentry/react-native/expo",
         {
           "url": "https://sentry.io/",
+          "note": "Use SENTRY_AUTH_TOKEN env to authenticate with Sentry.",
           "project": "mobile-pos-react-native",
           "organization": "walletconnect"
         }
@@ -62,7 +68,11 @@
       [
         "expo-font",
         {
-          "fonts": ["./assets/fonts/KHTeka-Light.otf", "./assets/fonts/KHTeka-Regular.otf", "./assets/fonts/KHTeka-Medium.otf"],
+          "fonts": [
+            "./assets/fonts/KHTeka-Light.otf",
+            "./assets/fonts/KHTeka-Regular.otf",
+            "./assets/fonts/KHTeka-Medium.otf"
+          ],
           "android": {
             "fonts": [
               {
@@ -85,9 +95,20 @@
             ]
           },
           "ios": {
-            "fonts": ["./assets/fonts/KHTeka-Light.otf", "./assets/fonts/KHTeka-Regular.otf", "./assets/fonts/KHTeka-Medium.otf"]
+            "fonts": [
+              "./assets/fonts/KHTeka-Light.otf",
+              "./assets/fonts/KHTeka-Regular.otf",
+              "./assets/fonts/KHTeka-Medium.otf"
+            ]
           }
         }
+      ],
+      [
+        "react-native-vision-camera",
+        {
+          "cameraPermissionText": "$(PRODUCT_NAME) needs access to your Camera.",
+          "enableLocation": false
+        }
       ]
     ],
     "experiments": {

dapps/pos-app/app/_layout.tsx

@@ -17,6 +17,11 @@ import { useColorScheme } from "@/hooks/use-color-scheme";
 import { useInitializePOS } from "@/hooks/use-initialize-pos";
 import { useTheme } from "@/hooks/use-theme-color";
 import { appKit, wagmiAdapter } from "@/utils/appkit";
+import {
+  getHeaderBackgroundColor,
+  getHeaderTintColor,
+  shouldCenterHeaderTitle,
+} from "@/utils/navigation";
 import { AppKit, AppKitProvider } from "@reown/appkit-react-native";
 import * as Sentry from "@sentry/react-native";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
@@ -28,15 +33,15 @@ Sentry.init({
 
   // Adds more context data to events (IP address, cookies, user, etc.)
   // For more information, visit: https://docs.sentry.io/platforms/react-native/data-management/data-collected/
-  sendDefaultPii: true,
+  sendDefaultPii: false,
 
   // Enable Logs
-  enableLogs: true,
+  enableLogs: __DEV__ ? true : false,
 
   // Configure Session Replay
-  replaysSessionSampleRate: 0.1,
-  replaysOnErrorSampleRate: 1,
-  integrations: [Sentry.mobileReplayIntegration()],
+  replaysSessionSampleRate: 0,
+  replaysOnErrorSampleRate: 0,
+  integrations: [],
 
   // uncomment the line below to enable Spotlight (https://spotlightjs.com)
   spotlight: __DEV__,
@@ -59,7 +64,7 @@ export default Sentry.wrap(function RootLayout() {
       url: "https://reown.com/appkit",
     },
     loggerOptions: {
-      posLevel: "debug",
+      posLevel: __DEV__ ? "debug" : "silent",
     },
   });
 
@@ -74,17 +79,11 @@ export default Sentry.wrap(function RootLayout() {
               <POSProvider posClient={posClient} isInitialized={isInitialized}>
                 <Stack
                   screenOptions={({ route }) => {
-                    const centerTitle =
-                      route.name === "index" ||
-                      route.name === "payment-success";
-                    const isPaymentSuccess = route.name === "payment-success";
-                    const headerBackgroundColor = isPaymentSuccess
-                      ? Theme["text-success"]
-                      : Theme["bg-primary"];
-
-                    const headerTintColor = isPaymentSuccess
-                      ? Theme["text-invert"]
-                      : Theme["text-primary"];
+                    const centerTitle = shouldCenterHeaderTitle(route.name);
+                    const headerTintColor = getHeaderTintColor(route.name);
+                    const headerBackgroundColor = getHeaderBackgroundColor(
+                      route.name,
+                    );
 
                     return {
                       headerTitle: centerTitle ? HeaderImage : "",
@@ -94,12 +93,11 @@ export default Sentry.wrap(function RootLayout() {
                           )
                         : undefined,
                       headerShadowVisible: false,
-                      headerTintColor,
+                      headerTintColor: Theme[headerTintColor],
                       headerBackButtonDisplayMode: "minimal",
                       headerTitleAlign: "center",
-                      headerBackImageSource: require("@/assets/images/arrow-left.png"),
                       headerStyle: {
-                        backgroundColor: headerBackgroundColor,
+                        backgroundColor: Theme[headerBackgroundColor],
                       },
                       contentStyle: {
                         backgroundColor: Theme["bg-primary"],
@@ -109,12 +107,6 @@ export default Sentry.wrap(function RootLayout() {
                   }}
                 >
                   <Stack.Screen name="index" />
-                  <Stack.Screen
-                    name="settings"
-                    options={{
-                      title: "",
-                    }}
-                  />
                   <Stack.Screen name="amount" />
                   <Stack.Screen name="payment-method" />
                   <Stack.Screen name="payment-token" />
@@ -127,6 +119,12 @@ export default Sentry.wrap(function RootLayout() {
                       headerBackVisible: false,
                     }}
                   />
+                  <Stack.Screen name="address-not-set" />
+                  <Stack.Screen name="settings" />
+                  <Stack.Screen name="settings-address-list" />
+                  <Stack.Screen name="settings-update-address" />
+                  <Stack.Screen name="settings-scan-address" />
+                  <Stack.Screen name="settings-networks" />
                 </Stack>
                 <StatusBar style="auto" />
                 <AppKit />