wallet-stack 1.0.0-alpha.121

package/src/account/zendesk.test.ts

@@ -0,0 +1,166 @@
+import { FetchMock } from 'jest-fetch-mock/types'
+import {
+  SupportRequestUserProperties,
+  _generateCustomFields,
+  sendSupportRequest,
+} from 'src/account/zendesk'
+import { getAppConfig } from 'src/appConfig'
+import { APP_NAME } from 'src/config'
+
+const mockFetch = fetch as FetchMock
+
+async function areBlobsEqual(blob1: Blob, blob2: Blob) {
+  return !Buffer.from(await blob1.arrayBuffer()).compare(Buffer.from(await blob2.arrayBuffer()))
+}
+
+expect.extend({
+  async toEqualBlob(received, expected) {
+    return {
+      message: () =>
+        this.utils.printDiffOrStringify(expected, received, 'Expected', 'Received', true),
+      pass: await areBlobsEqual(received, expected),
+    }
+  },
+})
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace jest {
+    interface Matchers<R> {
+      toEqualBlob(blob: Blob): R
+    }
+  }
+}
+
+describe('Zendesk', () => {
+  beforeEach(() => {
+    mockFetch.resetMocks()
+    jest.mocked(getAppConfig).mockReturnValue({
+      displayName: 'Test App',
+      deepLinkUrlScheme: 'testapp',
+      registryName: 'test',
+      experimental: {
+        zendeskConfig: {
+          apiKey: 'some-api-key',
+          projectName: 'someprojectname',
+        },
+      },
+    })
+  })
+  it('uploads files and creates a ticket', async () => {
+    const args = {
+      message: 'message for support',
+      userProperties: {
+        appName: APP_NAME,
+        version: '1.57.0',
+        buildNumber: '123590',
+        apiLevel: 29,
+        os: 'android',
+        country: 'US',
+        region: 'CA',
+        deviceId: '1234',
+        deviceBrand: 'Samsung',
+        deviceModel: 'Galaxy S10',
+        address: '0x1234',
+        sessionId: '1234',
+        numberVerifiedCentralized: true,
+        network: 'mainnet',
+        systemVersion: '10',
+      } satisfies SupportRequestUserProperties,
+      logFiles: [
+        { path: 'path1', type: 'type1', name: 'name1' },
+        { path: 'path2', type: 'type2', name: 'name2' },
+      ],
+      userEmail: 'foo@what.com',
+      userName: 'foo',
+      subject: 'subject of ticket',
+    }
+    mockFetch.mockResponse(async (req) => {
+      switch (req.url) {
+        case 'file://path1/':
+          return 'path1 contents'
+        case 'file://path2/':
+          return 'path2 contents'
+        case `https://someprojectname.zendesk.com/api/v2/uploads.json?filename=name1&binary=false`:
+          return { status: 201, body: JSON.stringify({ upload: { token: 'uploadToken' } }) }
+        case `https://someprojectname.zendesk.com/api/v2/uploads.json?filename=name2&binary=false`:
+          return { status: 201, body: JSON.stringify({ upload: { token: 'uploadToken2' } }) }
+        case `https://someprojectname.zendesk.com/api/v2/requests`:
+          return JSON.stringify({ request: { id: 1234 } })
+        default:
+          throw new Error(`unexpected url: ${req.url}`)
+      }
+    })
+
+    await sendSupportRequest(args)
+    expect(mockFetch.mock.calls.length).toEqual(5)
+    expect(mockFetch).toHaveBeenCalledWith(
+      `https://someprojectname.zendesk.com/api/v2/uploads.json?filename=name1&binary=false`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'text/plain',
+          Authorization: `Basic ${Buffer.from(`${args.userEmail}/token:some-api-key`).toString(
+            'base64'
+          )}`,
+        },
+        body: expect.anything(),
+      }
+    )
+
+    const callName1 = mockFetch.mock.calls.find(
+      (call) =>
+        call[0] ===
+        `https://someprojectname.zendesk.com/api/v2/uploads.json?filename=name1&binary=false`
+    )
+    expect(callName1?.[1]?.body).toEqualBlob(new Blob(['path1 contents']))
+
+    expect(mockFetch).toHaveBeenCalledWith(
+      `https://someprojectname.zendesk.com/api/v2/uploads.json?filename=name2&binary=false`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'text/plain',
+          Authorization: `Basic ${Buffer.from(`${args.userEmail}/token:some-api-key`).toString(
+            'base64'
+          )}`,
+        },
+        body: expect.anything(),
+      }
+    )
+
+    const callName2 = mockFetch.mock.calls.find(
+      (call) =>
+        call[0] ===
+        `https://someprojectname.zendesk.com/api/v2/uploads.json?filename=name2&binary=false`
+    )
+    expect(callName2?.[1]?.body).toEqualBlob(new Blob(['path2 contents']))
+
+    expect(mockFetch).toHaveBeenCalledWith(`https://someprojectname.zendesk.com/api/v2/requests`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Basic ${Buffer.from(`${args.userEmail}/token:some-api-key`).toString(
+          'base64'
+        )}`,
+      },
+      body: JSON.stringify({
+        request: {
+          subject: args.subject,
+          custom_fields: _generateCustomFields(args.userProperties),
+          comment: {
+            body: `${args.message}
+    
+    ${JSON.stringify(args.userProperties, null, 2)}
+    `,
+            uploads: ['uploadToken', 'uploadToken2'],
+          },
+          requester: {
+            email: args.userEmail,
+            name: args.userName,
+          },
+        },
+      }),
+    })
+  })
+})

package/src/account/zendesk.ts

@@ -0,0 +1,199 @@
+import { getAppConfig } from 'src/appConfig'
+import { APP_NAME } from 'src/config'
+import Logger from 'src/utils/Logger'
+
+export interface SupportRequestUserProperties {
+  appName: string
+  version: string
+  systemVersion: string
+  buildNumber: string
+  apiLevel: number
+  os: 'ios' | 'android' | 'windows' | 'macos' | 'web'
+  country: string | null
+  region: string | null
+  deviceId: string
+  deviceBrand: string
+  deviceModel: string
+  address: string | null
+  sessionId: string
+  numberVerifiedCentralized: boolean
+  network: string
+}
+
+const TAG = 'account/zendesk'
+
+// Send zendesk support request and upload attachments
+export async function sendSupportRequest({
+  message,
+  userProperties,
+  logFiles,
+  userEmail,
+  userName,
+  subject,
+}: {
+  message: string
+  userProperties: SupportRequestUserProperties
+  logFiles: { path: string; type: string; name: string }[]
+  userEmail: string
+  userName: string
+  subject: string
+}) {
+  const zendeskConfig = getAppConfig().experimental?.zendeskConfig
+  if (!zendeskConfig) {
+    Logger.error(TAG, 'No zendesk config found')
+    return
+  }
+
+  Logger.info(TAG, 'Sending support request')
+  const uploadTokens = await Promise.all(
+    logFiles.map((fileInfo) => _uploadFile(fileInfo, userEmail, zendeskConfig))
+  )
+  const customFields = _generateCustomFields(userProperties)
+  await _createRequest({
+    message: `${message}
+    
+    ${JSON.stringify(userProperties, null, 2)}
+    `,
+    userEmail,
+    userName,
+    uploadTokens,
+    subject,
+    customFields,
+    zendeskConfig,
+  })
+}
+
+// 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: SupportRequestUserProperties) {
+  return [
+    {
+      id: 11693576426253,
+      value: deviceInfo.deviceBrand,
+    },
+    {
+      id: 11693574091917,
+      value: deviceInfo.deviceId,
+    },
+    {
+      id: 11693603050381,
+      value: deviceInfo.deviceModel,
+    },
+    {
+      id: 5381831861005,
+      value: deviceInfo.os === 'ios' ? 'iOS' : 'Android',
+    },
+    {
+      id: 5381862498317,
+      value: deviceInfo.apiLevel.toString(),
+    },
+    {
+      id: 20129806706445,
+      value: deviceInfo.systemVersion,
+    },
+    {
+      id: 15494972694029,
+      value: deviceInfo.version,
+    },
+    {
+      id: 5341510571021,
+      value: deviceInfo.address ?? '',
+    },
+    {
+      id: 15314444792973,
+      value: deviceInfo.country ?? '',
+    },
+    {
+      id: 30339618708877,
+      value: APP_NAME,
+    },
+  ]
+}
+
+async function _createRequest({
+  message,
+  userEmail,
+  userName,
+  uploadTokens,
+  subject,
+  customFields,
+  zendeskConfig,
+}: {
+  message: string
+  userEmail: string
+  userName: string
+  uploadTokens: string[]
+  subject: string
+  customFields: { id: number; value: string }[]
+  zendeskConfig: {
+    apiKey: string
+    projectName: string
+  }
+}) {
+  const resp = await fetch(`https://${zendeskConfig.projectName}.zendesk.com/api/v2/requests`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Basic ${Buffer.from(`${userEmail}/token:${zendeskConfig.apiKey}`).toString(
+        'base64'
+      )}`,
+    },
+    body: JSON.stringify({
+      request: {
+        subject,
+        custom_fields: customFields,
+        comment: {
+          body: message,
+          uploads: uploadTokens,
+        },
+        requester: {
+          email: userEmail,
+          name: userName,
+        },
+      },
+    }),
+  })
+  if (resp.status >= 400) {
+    const jsonResponse = await resp.json()
+    Logger.error(
+      TAG,
+      '_createRequest returned response greater than 400',
+      new Error(JSON.stringify(jsonResponse))
+    )
+  }
+}
+
+async function _uploadFile(
+  { path, name }: { path: string; type: string; name: string },
+  userEmail: string,
+  zendeskConfig: {
+    apiKey: string
+    projectName: string
+  }
+) {
+  // This reads the file into a blob, the actual data is kept on the native side
+  // and is not copied into JS memory, which is good for large files.
+  const blob = await fetch(`file://${path}`).then((r) => r.blob())
+  const uploadFileResponse = await fetch(
+    `https://${zendeskConfig.projectName}.zendesk.com/api/v2/uploads.json?filename=${name}&binary=false`,
+    {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'text/plain',
+        Authorization: `Basic ${Buffer.from(`${userEmail}/token:${zendeskConfig.apiKey}`).toString(
+          'base64'
+        )}`,
+      },
+      body: blob,
+    }
+  )
+  const resp = await uploadFileResponse.json()
+  if (uploadFileResponse.status >= 400) {
+    Logger.error(
+      TAG,
+      '_uploadFile returned response greater than 400',
+      new Error(JSON.stringify(resp))
+    )
+  }
+  return resp.upload?.token
+}

package/src/alert/AlertBanner.test.tsx

@@ -0,0 +1,123 @@
+import { fireEvent, render, within } from '@testing-library/react-native'
+import * as React from 'react'
+import { Provider } from 'react-redux'
+import { AlertTypes } from 'src/alert/actions'
+import AlertBanner from 'src/alert/AlertBanner'
+import { ErrorDisplayType } from 'src/alert/reducer'
+import { createMockStore } from 'test/utils'
+
+describe('AlertBanner', () => {
+  describe('when message passed in', () => {
+    it('renders message', () => {
+      const { getByTestId } = render(
+        <Provider
+          store={createMockStore({
+            alert: {
+              type: AlertTypes.MESSAGE,
+              displayMethod: ErrorDisplayType.BANNER,
+              message: 'This is your shadow speaking',
+              dismissAfter: 0,
+            },
+          })}
+        >
+          <AlertBanner />
+        </Provider>
+      )
+      expect(
+        within(getByTestId('infoBanner')).getByText('This is your shadow speaking')
+      ).toBeTruthy()
+    })
+  })
+
+  describe('when message and title passed in', () => {
+    it('renders title with message', () => {
+      const { getByTestId } = render(
+        <Provider
+          store={createMockStore({
+            alert: {
+              type: AlertTypes.MESSAGE,
+              displayMethod: ErrorDisplayType.BANNER,
+              title: 'Declaration',
+              message: 'This is your shadow speaking',
+              dismissAfter: 0,
+            },
+          })}
+        >
+          <AlertBanner />
+        </Provider>
+      )
+      const banner = getByTestId('infoBanner')
+
+      expect(banner).toHaveTextContent('Declaration', { exact: false })
+      expect(banner).toHaveTextContent('This is your shadow speaking', { exact: false })
+    })
+  })
+
+  describe('when error message passed in', () => {
+    it('renders error message', () => {
+      const { getByTestId } = render(
+        <Provider
+          store={createMockStore({
+            alert: {
+              type: AlertTypes.ERROR,
+              displayMethod: ErrorDisplayType.BANNER,
+              message: 'This is an error',
+              dismissAfter: 0,
+            },
+          })}
+        >
+          <AlertBanner />
+        </Provider>
+      )
+
+      expect(within(getByTestId('errorBanner')).getByText('This is an error')).toBeTruthy()
+    })
+  })
+
+  describe('when an action is provided', () => {
+    it('dispatches the action when pressed', () => {
+      const store = createMockStore({
+        alert: {
+          type: AlertTypes.MESSAGE,
+          displayMethod: ErrorDisplayType.BANNER,
+          message: 'My message',
+          dismissAfter: 0,
+          action: { type: 'MY_ACTION' },
+        },
+      })
+      const { getByTestId } = render(
+        <Provider store={store}>
+          <AlertBanner />
+        </Provider>
+      )
+
+      fireEvent.press(getByTestId('SmartTopAlertTouchable'))
+      expect(store.getActions()).toEqual([{ type: 'MY_ACTION' }])
+    })
+  })
+
+  describe('bottom toast with action alert', () => {
+    it('displays and dispatches the action', () => {
+      const store = createMockStore({
+        alert: {
+          type: AlertTypes.TOAST,
+          displayMethod: ErrorDisplayType.BANNER,
+          message: 'My precious toast',
+          buttonMessage: 'Some button label',
+          action: { type: 'MY_ACTION' },
+        },
+      })
+      const { getByText, queryByTestId } = render(
+        <Provider store={store}>
+          <AlertBanner />
+        </Provider>
+      )
+
+      expect(getByText('My precious toast')).toBeTruthy()
+      expect(queryByTestId('SmartTopAlertTouchable')).toBeFalsy()
+
+      fireEvent.press(getByText('Some button label'))
+      expect(store.getActions()).toEqual([{ type: 'MY_ACTION' }])
+    })
+  })
+})

package/src/alert/AlertBanner.tsx

@@ -0,0 +1,84 @@
+import { noop } from 'lodash'
+import React, { memo, useMemo, useState } from 'react'
+import { StyleSheet, View } from 'react-native'
+import { AlertTypes, hideAlert } from 'src/alert/actions'
+import { Alert, ErrorDisplayType } from 'src/alert/reducer'
+import { NotificationVariant } from 'src/components/InLineNotification'
+import SmartTopAlert from 'src/components/SmartTopAlert'
+import Toast from 'src/components/Toast'
+import { useDispatch, useSelector } from 'src/redux/hooks'
+
+function AlertBanner() {
+  const [toastAlert, setToastAlert] = useState<(Alert & { isActive: boolean }) | null>(null)
+  const alert = useSelector((state) => state.alert)
+  const dispatch = useDispatch()
+
+  const onPressToast = () => {
+    if (toastAlert?.action) {
+      dispatch(toastAlert.action ?? hideAlert())
+    }
+  }
+
+  const displayAlert = useMemo(() => {
+    setToastAlert((prev) => {
+      if (alert?.type === AlertTypes.TOAST) {
+        return { ...alert, isActive: true }
+      }
+
+      return prev === null ? null : { ...prev, isActive: false }
+    })
+
+    if (alert?.displayMethod === ErrorDisplayType.BANNER && (alert.title || alert.message)) {
+      const onPress = () => {
+        const action = alert?.action ?? hideAlert()
+        dispatch(action)
+      }
+
+      const { type, title, message, buttonMessage, dismissAfter } = alert
+
+      return {
+        type,
+        title,
+        message,
+        buttonMessage,
+        dismissAfter,
+        onPress,
+      }
+    } else {
+      return null
+    }
+  }, [alert])
+
+  // avoid conditionally rendering the Toast component to preserve the dismiss animation
+  return (
+    <>
+      <View style={styles.floating}>
+        <SmartTopAlert alert={displayAlert} />
+      </View>
+
+      <Toast
+        showToast={!!toastAlert?.isActive}
+        title={toastAlert?.title || ''}
+        variant={NotificationVariant.Warning}
+        description={toastAlert?.message || ''}
+        ctaLabel={toastAlert?.buttonMessage || ''}
+        onPressCta={toastAlert?.isActive ? onPressToast : noop}
+        swipeable
+        onDismiss={() => {
+          dispatch(hideAlert())
+        }}
+      />
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  floating: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+  },
+})
+
+export default memo(AlertBanner)

package/src/alert/actions.ts

@@ -0,0 +1,127 @@
+import { TOptions } from 'i18next'
+import { ErrorDisplayType } from 'src/alert/reducer'
+import { AppEvents } from 'src/analytics/Events'
+import AppAnalytics from 'src/analytics/AppAnalytics'
+import { OpenUrlAction } from 'src/app/actions'
+import { ErrorMessages } from 'src/app/ErrorMessages'
+import { ALERT_BANNER_DURATION } from 'src/config'
+import { RefreshBalancesBalancesAction } from 'src/home/actions'
+import i18n from 'src/i18n'
+
+export enum Actions {
+  SHOW = 'ALERT/SHOW',
+  HIDE = 'ALERT/HIDE',
+}
+
+export enum AlertTypes {
+  MESSAGE = 'message',
+  ERROR = 'error',
+  TOAST = 'toast',
+}
+
+// Possible actions to dispatch when tapping the alert (or its button)
+// Could be any redux action, but limiting for now
+// As we don't yet have a type encompassing all redux actions
+type AlertAction = OpenUrlAction | RefreshBalancesBalancesAction
+
+export interface ShowAlertAction {
+  type: Actions.SHOW
+  alertType: AlertTypes
+  displayMethod: ErrorDisplayType
+  message: string
+  dismissAfter?: number | null
+  buttonMessage?: string | null
+  action?: AlertAction | null
+  title?: string | null
+  underlyingError?: ErrorMessages | null
+}
+
+export const showMessage = (
+  message: string,
+  dismissAfter?: number | null,
+  buttonMessage?: string | null,
+  action?: AlertAction | null,
+  title?: string | null
+): ShowAlertAction => {
+  return showAlert(AlertTypes.MESSAGE, message, dismissAfter, buttonMessage, action, title)
+}
+
+export const showToast = (
+  message: string,
+  buttonMessage: string | null,
+  action: AlertAction | null,
+  title: string | null
+): ShowAlertAction => {
+  return showAlert(AlertTypes.TOAST, message, null, buttonMessage, action, title)
+}
+
+export const showError = (
+  error: ErrorMessages,
+  dismissAfter?: number | null | undefined,
+  i18nOptions?: object
+): ShowAlertAction => {
+  AppAnalytics.track(AppEvents.error_displayed, { error })
+  return showAlert(
+    AlertTypes.ERROR,
+    i18n.t(error, { ...(i18nOptions || {}) }),
+    dismissAfter,
+    null,
+    null,
+    null,
+    error
+  )
+}
+
+export const showErrorInline = (error: ErrorMessages, i18nOptions?: TOptions): ShowAlertAction => ({
+  type: Actions.SHOW,
+  alertType: AlertTypes.ERROR,
+  displayMethod: ErrorDisplayType.INLINE,
+  message: i18n.t(error, { ...(i18nOptions || {}) }),
+  underlyingError: error,
+})
+
+// Useful for showing a more specific error if its a documented one, with
+// a fallback to something more generic
+export function showErrorOrFallback(error: any, fallback: ErrorMessages) {
+  if (error && Object.values(ErrorMessages).includes(error.message)) {
+    return showError(error.message)
+  }
+
+  AppAnalytics.track(AppEvents.error_fallback, {
+    error: fallback,
+  })
+
+  return showError(fallback)
+}
+
+const showAlert = (
+  alertType: AlertTypes,
+  message: string,
+  dismissAfter: number | null = ALERT_BANNER_DURATION,
+  buttonMessage?: string | null,
+  action?: AlertAction | null,
+  title?: string | null,
+  underlyingError?: ErrorMessages | null
+): ShowAlertAction => {
+  return {
+    type: Actions.SHOW,
+    alertType,
+    displayMethod: ErrorDisplayType.BANNER,
+    message,
+    dismissAfter,
+    buttonMessage,
+    action,
+    title,
+    underlyingError,
+  }
+}
+
+interface HideAlertAction {
+  type: Actions.HIDE
+}
+
+export const hideAlert = (): HideAlertAction => ({
+  type: Actions.HIDE,
+})
+
+export type ActionTypes = ShowAlertAction | HideAlertAction