Merge branch 'main' into dependabot/npm_and_yarn/tanstack/react-query…

…-5.56.2
inrupt · Sep 23, 2024 · 4a68980 · 4a68980
2 parents 203ba53 + 4765d04
commit 4a68980
Show file tree

Hide file tree

Showing 29 changed files with 621 additions and 360 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -1,4 +1,4 @@
-name: Wallet Frontend Application CI
+name: Inrupt Data Wallet CI
 
 on:
   pull_request: {}
@@ -15,22 +15,21 @@ jobs:
   lint:
     uses: inrupt/typescript-sdk-tools/.github/workflows/reusable-lint.yml@v3
 
-  build:
-    runs-on: ${{ matrix.os }}
-    strategy:
-      matrix:
-        os: [ ubuntu-latest, windows-latest ]
-        node-version: [ "20.x" ]
+  unit-test:
+    runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
+        with:
+            node-version-file: ".nvmrc"
+            cache: npm
       - run: npm ci
       - run: npm run test:snapshot
 
   sonarqube:
     name: run sonarqube
     if: ${{ github.actor != 'dependabot[bot]' }}
-    needs: [build]
+    needs: [unit-test]
     runs-on: ubuntu-latest
     steps:
       - name: Checking out

diff --git a/README.md b/README.md
@@ -1,40 +1,68 @@
-# Data Wallet Front-end Application
+# Inrupt Data Wallet
 
-This project produces a front-end react native application for use with the Inrupt Data Wallet.
+This project produces a mobile React Native application for use with the Inrupt Data Wallet service.
 This README provides information on:
 
-* [Setup](#setup)
+* [Setup and configuration](#setup-and-configuration)
   * [Prerequisites](#prerequisites)
   * [Install dependencies](#install-dependencies)
   * [Configure build environment](#configure-build-environment)
-    * [Create keystore](#create-keystore)
-* [Running](#running)
-  * [Configure test environment](#configure-test-environment)
-  * [Test native versions](#test-native-versions)
-    * [iOS app](#ios-app)
-    * [Android app](#android-app)
+    * [Create keystore for Android](#create-keystore-for-android)
+    * [Make the keystore available to CI](#make-the-keystore-available-to-ci)
+* [Running the application locally](#running-the-application-locally)
+  * [On a device with Expo Go](#on-a-device-with-expo-go)
+  * [On an Android emulator](#on-an-android-emulator)
+  * [On an iOS simulator](#on-an-ios-simulator)
+* [Build the app on EAS](#build-the-app-on-eas)
+* [Testing with Detox](#testing-with-detox)
+  * [On Android](#on-android)
+  * [On iOS](#on-ios)
 * [UI overview](#ui-overview)
   * [Home](#home)
   * [Profile](#profile)
   * [Requests](#requests)
   * [Access](#access)
+* [Issues & Help](#issues--help)
+  * [Bugs and Feature Requests](#bugs-and-feature-requests)
+  * [Documentation](#documentation)
+  * [Changelog](#changelog)
+  * [License](#license)
 
-
-## Build the app locally
+## Setup and configuration
 
 ### Prerequisites
 
+In order to log into the Wallet, and for it to be able to persist data, you will need a [Podspaces Account](https://start.inrupt.com).
 Ensure that you have the following dependencies installed and configured:
-- Xcode
-- iOS simulators
+
+##### On the mobile device
+
+- [Expo Go](https://expo.dev/go) - app to be installed on a real device (iOS and Android supported)
+
+##### On the dev machine (iOS)
+
+If you are only running the app in Expo Go:
+- [NodeJS and NPM](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
+
+If you are building the app locally, you'll also need:
+- [Xcode](https://apps.apple.com/us/app/xcode/id497799835)
+- [iOS simulators](https://developer.apple.com/documentation/safari-developer-tools/installing-xcode-and-simulators)
+
+#### On the dev machine (Android)
+
+If you are only running the app in Expo Go:
+- [NodeJS and NPM](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
+
+If you are building the app locally, you'll also need:
+- A Java JDK
 - [Android emulators](https://developer.android.com/studio/install)
 
 ### Install dependencies
 
-First, install any react native dependencies.
+First, install all the project dependencies.
 
 ```bash
-npm install
+npm ci
 ```
 
 ### Configure build environment
@@ -47,15 +75,38 @@ EXPO_PUBLIC_LOGIN_URL=
 EXPO_PUBLIC_WALLET_API=
 ```
 
-#### Create keystore
+Automated testing also requires access credentials for the Data Wallet:
+```bash
+TEST_ACCOUNT_USERNAME=<Wallet username>
+TEST_ACCOUNT_PASSWORD=<Wallet password>
+```
+
+For testing with iOS simulators, you will need:
+```bash
+IOS_BINARY_PATH=<Path to the built iOS binary>
+TEST_IOS_SIM=<Name of the iOS simulator on your device>
+```
+
+For testing with Android emulators, you will need:
+```bash
+ANDROID_BINARY_PATH=<Path to the main Android binary>
+ANDROID_TEST_BINARY_PATH=<Path to the test Android binary>
+TEST_ANDROID_EMU=<Name of the Android emulator on your device>
+```
+Ensure that the ``TEST_ANDROID_EMU`` configuration aligns with a device emulator in Android Studio.
+For example: ``TEST_ANDROID_EMU=Android_34``. If the emulated device is called "Test Emulator 33",
+the EMU name will be ``Test_Emulator_33``.
+
+#### Create keystore for Android
 
 The Android app will need to be signed for it to be installed. See: https://reactnative.dev/docs/signed-apk-android
 for more information on this.
 
 __WARNING:__ The following is only to be used for development. In production the keystore should
 be generated and configured in a more secure manner.
 
-To generate a keystore with a key and cert run the following from the root of the project:
+To generate a keystore with a key and cert run the following from the root of the project (this requires a Java JDK
+installation):
 
 ```bash
 keytool -genkeypair -v -storetype PKCS12 \
@@ -70,105 +121,79 @@ KEYSTORE_PATH=<path>/inrupt-data-wallet/android/app/wallet.keystore
 KEYSTORE_PASSWORD=<keystore password>
 ```
 
-#### Make the keystore available to CI
-
-In order to make the keystore available to CI, it has to be present in the repository secret.
-To 
-- Encrypting the keystore with a GPG key to get a Base64 representation: `gpg -c --armor wallet.keystore`
-- Create Github repository secrets:
-  - ENCRYPTED_KEYSTORE with the Base64-encoded encrypted keystore
-  - KEYSTORE_DECRYPTION_KEY with the GPG key
-  - KEYSTORE_PASSWORD with the keystore password
-- In CI, decrypt the keystore back: `gpg -d --passphrase "..." --batch wallet.keystore.asc > wallet.keystore`
-
-## Build the app on EAS
-
-Both the Android and the iOS versions of the app can be built using the Expo Application Service (EAS). To do so, follow
-the instructions from the [EAS documentation](https://docs.expo.dev/build/setup/).
-
-Note that the project ID is not hard-coded in the `app.config.ts`, but provided as an environment variable instead.
-In order to trigger an EAS build, please add the appropriate project ID in your environment, e.g.
-
-```
-EAS_PROJECT_ID="..." eas build --platform android --local --profile preview
-```
-
-## Running the application
-
-If you are going to run the application in an emulator or simulator, you need to build the development version using
-one of the following:
-   ```bash
-    npm run android
-    npm run ios
-   ```
+## Running the application locally
 
 Start the application:
 
-   ```bash
-    npx expo start
-   ```
+```bash
+npx expo start
+```
 
 In the output, you'll find options to open the app in a
-
-- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
+- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo.
+- [Development build](https://docs.expo.dev/develop/development-builds/introduction/)
 - [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
 - [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
-- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
 
-Note: When running on the android emulator, there is a special loopback IP, 10.0.2.2, which points to the host machine 127.0.0.1. You can use it if the emulator complains about cleartext communication to the local network IP of the host.
-
-## Running the UI-based tests
+### On a device with Expo Go
 
-### Configure test environment
+After expo has started, make sure it targets the Expo Go environment (as opposed to "development build").
+This will display a QR code which you will need to scan from your device's Expo Go application.
 
-The tests require access credentials for a Pod which will be used by this instance of the wallet.
-Make a copy of the provided `.env.sample` named `.env`, and replace placeholders with actual values
-specific to your setup.
+The Wallet application will then build and install into your device for you to test & debug.
 
-### Running the tests on iOS
+### On an Android emulator
 
-To build the iOS wallet app in an iOS simulator, just run the following command:
+For Android, ensure that a virtual device has been added to the Android emulator by opening the new Device Manager with
+the following actions: 
+* Go to the Android Studio Welcome screen
+* Select **More Actions > Virtual Device Manager.**
 
 ```bash
-npm run ios
+npm run android
 ```
+Note: When running on the android emulator, there is a special loopback IP, 10.0.2.2, which points to the host machine 127.0.0.1. You can use it if the emulator complains about cleartext communication to the local network IP of the host.
 
-This will install the necessary CocoaPods and compile the application. Upon completion, the iOS simulator should be open and the wallet app running.
+### On an iOS simulator
 
-If you want to generate the iOS binary as well, run the following commands. Note that this process may take around 30 minutes to complete.
+To build the iOS wallet app in an iOS simulator, run the following command:
 
 ```bash
-npx expo run:ios
-xcodebuild -workspace ios/inruptwalletfrontend.xcworkspace -scheme inruptwalletfrontend -configuration Release -sdk iphonesimulator -derivedDataPath ios/build
+npm run ios
 ```
 
-After completion, the iOS binary should be located at:
-
-```bash
-inrupt-data-wallet/ios/build/Build/Products/inruptwalletfrontend.app
-```
+This will install the necessary CocoaPods and compile the application. Upon completion, the iOS simulator should be open and the wallet app running.
 
-You can share the .app file with others who need to run the Detox tests without building the iOS app locally.
+## Build the app on the Expo Application Service (EAS)
 
-Execute the command below to start Detox test on iOS.
-```bash
-npx detox test --configuration=ios.sim.release
-```
+**Prerequisite**: All the following instructions are only applicable if you have an EAS account. By default,
+the project is configured to be built on an Inrupt EAS project. In order to build a custom version in your
+own EAS account, you'll need to create a new EAS project, and make sure that EAS project and the data (e.g. 
+`name`, `slug`, `project-id`...) in your copy of `app.config.ts` are aligned.
 
-### Running the tests on Android
+Both the Android and the iOS versions of the app can be built using EAS. To do so, follow the instructions
+from the [EAS documentation](https://docs.expo.dev/build/setup/) to setup your environment.
 
-Ensure that a virtual device has been added to the Android emulator.
+By default, the EAS CLI will trigger a build on the EAS infrastructure. It is also possible to 
+[run a build locally](https://docs.expo.dev/build-reference/local-builds/), which results in the built binary
+being available on the developer machine. This requires all the environment setup for being able to build
+the app locally, similar to `npx expo run:<android | ios>`.
 
-First, you'll need to generate the app metadata with the following command:
+The project ID is not hard-coded in the `app.config.ts`, but provided as an environment variable instead.
+In order to trigger an EAS build, please add the appropriate project ID in your environment variables, e.g.
 
-```bash
-npx expo prebuild --platform android
+```
+EAS_PROJECT_ID="..." eas build --platform android --local --profile preview
 ```
 
+## Testing with Detox
+
+### On Android
+
 Run the following command to build the Android app. This process may take up to 30 minutes to complete.
 
 ```bash
-npx detox build --configuration android.emu.release
+npx detox build --configuration=android.emu.release
 ```
 
 For local development (a back-end server running on localhost or at an alternative location), use
@@ -178,7 +203,7 @@ development server (`npx expo start`).
 Once built, run the detox tests for the relevant configuration:
 
 ```bash
-npx detox test --configuration android.emu.release
+npx detox test --configuration=android.emu.release
 ```
 
 After completion, the binary apps will be located in:
@@ -188,6 +213,27 @@ After completion, the binary apps will be located in:
 
 You can share the .apk files with others who need to run the Detox tests without building the Android app locally.
 
+### On iOS
+
+If you want to generate the iOS binary, run the following commands. Note that this process may take around 30 minutes to complete.
+
+```bash
+xcodebuild -workspace ios/inruptwalletfrontend.xcworkspace -scheme inruptwalletfrontend -configuration Release -sdk iphonesimulator -derivedDataPath ios/build
+```
+
+After completion, the iOS binary should be located at:
+
+```bash
+inrupt-data-wallet/ios/build/Build/Products/inruptwalletfrontend.app
+```
+
+You can share the .app file with others who need to run the Detox tests without building the iOS app locally.
+
+Execute the command below to start Detox test on iOS.
+```bash
+npx detox test --configuration=ios.sim.release
+```
+
 ## UI overview
 
 Upon execution, the application prompts the user to log in. After successful authentication, the wallet app presents various views, located in the `app/(tabs)` directory: 
@@ -219,3 +265,25 @@ From here, the user can view all the requests along with their details (requesto
 This page shows what access has been granted to other agents.
 
 For each authorized agent, there is a list of the wallet resources to which they have access. Users also have the option to revoke access to each resource from this page.
+
+## Issues & Help
+
+### Bugs and Feature Requests
+
+- For public feedback, bug reports, and feature requests please file an issue
+  via [Github](https://github.com/inrupt/inrupt-data-wallet/issues/).
+- For non-public feedback or support inquiries please use the
+  [Inrupt Service Desk](https://inrupt.atlassian.net/servicedesk).
+
+### Documentation
+
+- [Inrupt Data Wallet](https://docs.inrupt.com/data-wallet/)
+- [Homepage](https://docs.inrupt.com/)
+
+### Changelog
+
+See [the release notes](https://github.com/inrupt/inrupt-data-wallet/releases).
+
+### License
+
+Apache 2.0 © [Inrupt](https://inrupt.com)
diff --git a/api/apiRequest.ts b/api/apiRequest.ts
@@ -23,7 +23,8 @@ export const makeApiRequest = async <T>(
   endpoint: string,
   method: string = "GET",
   body: unknown = null,
-  contentType: string | null = "application/json"
+  contentType: string | null = "application/json",
+  isBlob: boolean = false
 ): Promise<T> => {
   const session = await SecureStore.getItemAsync(SESSION_KEY);
   if (!session) return {} as T;
@@ -49,7 +50,7 @@ export const makeApiRequest = async <T>(
   );
 
   if (response.status === 401) {
-    router.replace("/login?logout=true");
+    router.replace(`/login?logout=${Date.now()}`);
     throw new Error(`Unauthorized: ${response.status}`);
   }
 
@@ -61,6 +62,10 @@ export const makeApiRequest = async <T>(
     );
   }
 
+  if (isBlob) {
+    return (await response.blob()) as unknown as T;
+  }
+
   const responseType = response.headers.get("content-type");
   if (
     responseType?.includes("application/json") ||