chore: add app name to support requests (valora-inc#6029)

### Description


[Context](https://valora-app.slack.com/archives/C07KBTP7RC2/p1726606329650329)
- the ask is to add the app name in the support request body and also
add it as a zendesk property so that it can be tracked more easily.

### Test plan

n/a

### Related issues

n/a

### Backwards compatibility

Y

### Network scalability

If a new NetworkId and/or Network are added in the future, the changes
in this PR will:

- [ ] Continue to work without code changes, OR trigger a compilation
error (guaranteeing we find it when a new network is added)

src/account/SupportContact.test.tsx

@@ -71,7 +71,8 @@ describe('Contact', () => {
 
     expect(sendSupportRequest).toHaveBeenCalledWith({
       message: 'Test Message',
-      deviceInfo: {
+      userProperties: {
+        appName: APP_NAME,
         address: '0x0000000000000000000000000000000000007e57',
         apiLevel: -1,
         buildNumber: '1',

src/account/SupportContact.tsx

@@ -88,7 +88,8 @@ function SupportContact({ route }: Props) {
 
   const onPressSendEmail = useCallback(async () => {
     setInProgress(true)
-    const deviceInfo = {
+    const userProperties = {
+      appName: APP_NAME,
       version: DeviceInfo.getVersion(),
       systemVersion: DeviceInfo.getSystemVersion(),
       buildNumber: DeviceInfo.getBuildNumber(),
@@ -111,7 +112,7 @@ function SupportContact({ route }: Props) {
     try {
       await sendSupportRequest({
         message,
-        deviceInfo,
+        userProperties,
         logFiles: attachments,
         userEmail: email,
         userName: name,

src/account/zendesk.test.ts

@@ -1,6 +1,10 @@
 import { FetchMock } from 'jest-fetch-mock/types'
-import { DeviceInfo, _generateCustomFields, sendSupportRequest } from 'src/account/zendesk'
-import { ZENDESK_API_KEY, ZENDESK_PROJECT_NAME } from 'src/config'
+import {
+  SupportRequestUserProperties,
+  _generateCustomFields,
+  sendSupportRequest,
+} from 'src/account/zendesk'
+import { APP_NAME, ZENDESK_API_KEY, ZENDESK_PROJECT_NAME } from 'src/config'
 
 const mockFetch = fetch as FetchMock
 
@@ -34,7 +38,8 @@ describe('Zendesk', () => {
   it('uploads files and creates a ticket', async () => {
     const args = {
       message: 'message for support',
-      deviceInfo: {
+      userProperties: {
+        appName: APP_NAME,
         version: '1.57.0',
         buildNumber: '123590',
         apiLevel: 29,
@@ -48,7 +53,8 @@ describe('Zendesk', () => {
         sessionId: '1234',
         numberVerifiedCentralized: true,
         network: 'mainnet',
-      } as DeviceInfo,
+        systemVersion: '10',
+      } satisfies SupportRequestUserProperties,
       logFiles: [
         { path: 'path1', type: 'type1', name: 'name1' },
         { path: 'path2', type: 'type2', name: 'name2' },
@@ -131,11 +137,11 @@ describe('Zendesk', () => {
         body: JSON.stringify({
           request: {
             subject: args.subject,
-            custom_fields: _generateCustomFields(args.deviceInfo),
+            custom_fields: _generateCustomFields(args.userProperties),
             comment: {
               body: `${args.message}
     
-    ${JSON.stringify(args.deviceInfo)}
+    ${JSON.stringify(args.userProperties, null, 2)}
     `,
               uploads: ['uploadToken', 'uploadToken2'],
             },

src/account/zendesk.ts

@@ -1,7 +1,8 @@
-import { ZENDESK_API_KEY, ZENDESK_PROJECT_NAME } from 'src/config'
+import { APP_NAME, ZENDESK_API_KEY, ZENDESK_PROJECT_NAME } from 'src/config'
 import Logger from 'src/utils/Logger'
 
-export interface DeviceInfo {
+export interface SupportRequestUserProperties {
+  appName: string
   version: string
   systemVersion: string
   buildNumber: string
@@ -23,14 +24,14 @@ const TAG = 'account/zendesk'
 // Send zendesk support request and upload attachments
 export async function sendSupportRequest({
   message,
-  deviceInfo,
+  userProperties,
   logFiles,
   userEmail,
   userName,
   subject,
 }: {
   message: string
-  deviceInfo: DeviceInfo
+  userProperties: SupportRequestUserProperties
   logFiles: { path: string; type: string; name: string }[]
   userEmail: string
   userName: string
@@ -40,11 +41,11 @@ export async function sendSupportRequest({
   const uploadTokens = await Promise.all(
     logFiles.map((fileInfo) => _uploadFile(fileInfo, userEmail))
   )
-  const customFields = _generateCustomFields(deviceInfo)
+  const customFields = _generateCustomFields(userProperties)
   await _createRequest({
     message: `${message}
     
-    ${JSON.stringify(deviceInfo)}
+    ${JSON.stringify(userProperties, null, 2)}
     `,
     userEmail,
     userName,
@@ -56,7 +57,7 @@ export async function sendSupportRequest({
 
 // These custom fields auto-populate fields in zendesk
 // Id's come from https://valoraapp.zendesk.com/admin/objects-rules/tickets/ticket-fields (only admins can view)
-export function _generateCustomFields(deviceInfo: DeviceInfo) {
+export function _generateCustomFields(deviceInfo: SupportRequestUserProperties) {
   return [
     {
       id: 11693576426253,
@@ -94,6 +95,10 @@ export function _generateCustomFields(deviceInfo: DeviceInfo) {
       id: 15314444792973,
       value: deviceInfo.country ?? '',
     },
+    {
+      id: 30339618708877,
+      value: APP_NAME,
+    },
   ]
 }