Merge pull request #24 from Expensify/@Skalakid/update-README

Update README

Author: AndrewGable

README.md

@@ -1,7 +1,7 @@
-# react-native-wallet
+<img src="./assets/hero-image.png" alt="@expensify/react-native-wallet" />
 
 ## Features
-- ⚛️ Card Push Provisioning seamless integration
+- ⚛️ Card In-App Provisioning seamless integration
 - ♻️ Universal solution (Apple Wallet and Google Wallet)
 - 💳 Easy and secure addition of payment cards from your app directly
 
@@ -111,8 +111,8 @@ Here you can find data elements used in the library, essential to work with Goog
 
 ### Android
 - **Opaque Payment Card** (OPC) - a binary blob of information Google Pay receives from the issuer app that could be presented to TSP to receive a token.
--  **Token Service Provider** (TSP) - a service that enhances payment security by replacing a credit card number during transactions with a unique digital identifier - token. The TSP specifies the tokenization service used to create a given token e.g. Visa, MasterCard, American Express. 
--  **Token Reference ID** - a unique identifying number to refer to a DPAN (Dynamic Personal Account Number). Token Providers will assign each DPAN an issuer token ID at the time of tokenization.
+- **Token Service Provider** (TSP) - a service that enhances payment security by replacing a credit card number during transactions with a unique digital identifier - token. The TSP specifies the tokenization service used to create a given token e.g. Visa, MasterCard, American Express. 
+- **Token Reference ID** - a unique identifying number to refer to a DPAN (Dynamic Personal Account Number). Token Providers will assign each DPAN an issuer token ID at the time of tokenization.
 
 ### iOS
 - **Nonce** - a one-time nonce value generated by Apple’s servers. This nonce must be included in the add payment request’s encrypted data.
@@ -126,27 +126,27 @@ The library offers five functions for seamless integration and use of the Apple
 
 ## Functions
 
-| Function | Description | Parameters | Returns / Type | iOS | Andorid |
+| Function | Description | Parameters | Returns / Type | iOS | Android |
 |----------|-------------|------------|----------------|:---:|:-------:|
 | **getSecureWalletInfo** | Returns necessary platform-specific wallet information for secure transactions. | None | `WalletData` | ✅ | ❌ |
 | **checkWalletAvailability** | Checks if the wallet is ready and initializes it if possible. | None | `boolean` | ✅ | ✅ |
 | **getCardStatusBySuffix** | Retrieves the current status of a card in the wallet. | `lastDigits: string`<br>(The last few digits of the card number) | `CardStatus` | ✅ | ✅ |
-| **getCardStatusByIdentifier** | Returns the state of a card based on a platform-specific identifier. On Android, it's `Token Reference ID` and on iOS, it's `Primary Account Identifier`. | `identifier: string`<br>`tsp: string` | `CardStatus` |  ✅ | ✅ |
-| **addCardToGoogleWallet** | Initiates native Push Provisioning flow for adding a card to the Google Wallet. | `data`: `AndroidCardData` | `TokenizationStatus` | ❌ | ✅  |
-| **addCardToAppleWallet** | Initiates native Push Provisioning flow for adding a card to the Apple Wallet. | `data`: `IOSCardData`<br>`issuerEncryptPayloadCallback: IOSIssuerCallback` | `void` | ✅ | ❌ |
+| **getCardStatusByIdentifier** | Returns the state of a card based on a platform-specific identifier. On Android, it's `Token Reference ID` and on iOS, it's `Primary Account Identifier`. | `identifier: string`,<br>`tsp: string` | `CardStatus` | ✅ | ✅ |
+| **addCardToGoogleWallet** | Initiates native Push Provisioning flow for adding a card to the Google Wallet. | `data`: `AndroidCardData` | `TokenizationStatus` | ❌ | ✅ |
+| **addCardToAppleWallet** | Initiates native Push Provisioning flow for adding a card to the Apple Wallet. | `data`: `IOSCardData`,<br>`issuerEncrypt-`<br>`PayloadCallback: IOSIssuerCallback` | `void` | ✅ | ❌ |
 
 
 ## Data Types
 
 | Type | Description | Fields |
 |------|-------------|--------|
-| **AndroidWalletData** | Specific information for Android devices required for wallet transactions. | `deviceID: string`<br>`walletAccountID: string` |
-| **AndroidCardData** | Data related to a card that is to be added on Android platform wallets. | `network: string`<br>`opaquePaymentCard: string`<br>`cardHolderName: string`<br>`lastDigits: string`<br>`userAddress: UserAddress` |
-| **UserAddress** | Structured address used for cardholder verification. | `name: string`<br>`addressOne: string`<br>`addressTwo: string`<br>`city: string`<br>`administrativeArea: string`<br>`countryCode: string`<br>`postalCode: string`<br>`phoneNumber: string` |
-| **IOSCardData** | Data related to a card that is to be added on iOS platform. | `network: string`<br>`activationData: string`<br>`encryptedPassData: string`<br>`ephemeralPublicKey: string`<br>`cardHolderTitle: string`<br>`cardHolderName: string`<br>`lastDigits: string`<br>`cardDescription: string`<br>`cardDescriptionComment: string` |
-| **onCardActivatedPayload** | Data used by listener to notice when a card’s status changes.  | `tokenId:  string`<br> `actionStatus:  'activated' \|  'canceled'`<br> |
-| **IOSIssuerCallback** | This callback is invoked with a nonce, its signature, and a certificate array obtained from Apple. It is expected that you will forward these details to your server or the card issuer's API to securely encrypt the payload required for adding cards to the Apple Wallet.  | `(nonce: string, nonceSignature: string, certificate: string[]) => IOSEncryptPayload` |
-| **IOSEncryptPayload** | An object containing the necessary elements to complete the addition of a card to Apple Wallet. | `encryptedPassData: string`<br>`activationData: string`<br>`ephemeralPublicKey: string` |
+| **AndroidWalletData** | Specific information for Android devices required for wallet transactions. | `deviceID: string`,<br>`walletAccountID: string` |
+| **AndroidCardData** | Data related to a card that is to be added on Android platform wallets. | `network: string`,<br>`opaquePaymentCard: string`,<br>`cardHolderName: string`,<br>`lastDigits: string`,<br>`userAddress: UserAddress` |
+| **UserAddress** | Structured address used for cardholder verification. | `name: string`,<br>`addressOne: string`,<br>`addressTwo: string`,<br>`city: string`,<br>`administrativeArea: string`,<br>`countryCode: string`,<br>`postalCode: string`,<br>`phoneNumber: string` |
+| **IOSCardData** | Data related to a card that is to be added on iOS platform. | `network: string`,<br>`activationData: string`,<br>`encryptedPassData: string`,<br>`ephemeralPublicKey: string`,<br>`cardHolderTitle: string`,<br>`cardHolderName: string`,<br>`lastDigits: string`,<br>`cardDescription: string`,<br>`cardDescriptionComment: string` |
+| **onCardActivatedPayload** | Data used by listener to notice when a card’s status changes. | `tokenId: string`,<br> `actionStatus: 'activated' \| 'canceled'`<br> |
+| **IOSIssuerCallback** | This callback is invoked with a nonce, its signature, and a certificate array obtained from Apple. It is expected that you will forward these details to your server or the card issuer's API to securely encrypt the payload required for adding cards to the Apple Wallet. | `(nonce: string, nonceSignature: string, certificate: string[]) => IOSEncryptPayload` |
+| **IOSEncryptPayload** | An object containing the necessary elements to complete the addition of a card to Apple Wallet. | `encryptedPassData: string`,<br>`activationData: string`,<br>`ephemeralPublicKey: string` |
 
 ## Card Status
 
@@ -158,17 +158,19 @@ The library offers five functions for seamless integration and use of the Apple
 
 | Listener | Event Description | Register Function | Unregister Function |
 |----------|-------------------|-------------------|---------------------|
-| **_cardActivation_** | Notifies when a card's status changes to activated. | `addListener(event:  string, callback: (data:  onCardActivatedPayload) =>  void): EmitterSubscription` | `removeListener(subscription:  EmitterSubscription): void` |
+| **_cardActivation_** | Notifies when a card's status changes to activated. | `addListener(event: string, callback: (data: onCardActivatedPayload) => void): EmitterSubscription` | `removeListener(subscription: EmitterSubscription): void` |
 
 ## Components
 
 ### `AddToWalletButton`
 
 A ready-to-use component that simplifies the addition of payment cards to Google Wallet and Apple Wallet. The button automatically adapts its appearance according to the platform and language specified.
+It uses official assets provided by [Google](https://developers.google.com/wallet/generic/resources/brand-guidelines) and [Apple](https://developer.apple.com/wallet/add-to-apple-wallet-guidelines/) in their Wallet-related branding guidelines. 
 
-> [!NOTE]
-> Please bear in mind the brand rules provided by [Google](https://developers.google.com/wallet/generic/resources/brand-guidelines) and [Apple](https://developer.apple.com/wallet/add-to-apple-wallet-guidelines/) when adding this component to your application.
+> [!IMPORTANT]
+> Please bear in mind the brand rules provided by [Google](https://developers.google.com/wallet/generic/resources/brand-guidelines) and [Apple](https://developer.apple.com/wallet/add-to-apple-wallet-guidelines/) when adding this component to your application. 
 
+Adhering to these guidelines is crucial not only to comply with legal requirements but also to reassure users of the authenticity and security of your application.
 
 | Property | Type | Required | Description |
 |----------|------|----------|-------------|
@@ -188,6 +190,9 @@ A ready-to-use component that simplifies the addition of payment cards to Google
 />
 ```
 
+| Android | iOS |
+|:----:|:---------------:|
+| <img src="./assets/buttons/android/en.svg" height="50" /> | <img src="./assets/buttons/apple/en.svg" height="50" /> |
 
 # Publishing your app
 
@@ -227,27 +232,27 @@ Additionally, when submitting your app to the App Store, you must include:
 - A demo account for testing.
 - A demo video showcasing the In-App Provisioning experience.
 
+# Compatibility
+
+`@expensify/react-native-wallet` supports the three latest minor releases of react-native (0.76.0+)
+
 
 # Contributing
 
-Right now, contributions to this library are done under [https://github.com/Expensify/App](https://github.com/Expensify/App). Please refer to that repo and all it's guidelines for contributing.
+Contributions to this library are done under [https://github.com/Expensify/App](https://github.com/Expensify/App). Please refer to that repo and all its guidelines for contributing.
 
 ## License
 
 MIT
 
 ----------
 
-<p align="center">
-
-<picture>
+This library is co-developed by [**Software Mansion**](https://swmansion.com/), React Native core contributors and experts in buildind high-performing mobile solutions, in collaboration with [**Expensify**](https://www.expensify.com/), a leader in streamlining business expenses, travel, and invoice management for clearer financial oversight.
 
-<source media="(prefers-color-scheme: light)" srcset="./assets/signature-light.png" />
-
-<source media="(prefers-color-scheme: dark)" srcset="./assets/signature-dark.png" />
-
-<img alt="Brought to you by Software Mansion + Expensify" src="./assets/signature-light.png" width="600" />
-
-</picture>
-
-</p>
+<p align="center">
+  <picture>
+    <source media="(prefers-color-scheme: light)" srcset="./assets/signature-light.png" />
+    <source media="(prefers-color-scheme: dark)" srcset="./assets/signature-dark.png" />
+    <img alt="Brought to you by Software Mansion + Expensify" src="./assets/signature-light.png" width="600" />
+  </picture>
+</p>