wallet-stack 1.0.0-alpha.121

package/src/navigator/types.tsx

@@ -0,0 +1,346 @@
+import { KycSchema } from '@fiatconnect/fiatconnect-types'
+import { SendOrigin, WalletConnectPairingOrigin } from 'src/analytics/types'
+import { EarnActiveMode, EarnTabType } from 'src/earn/types'
+import { ExternalExchangeProvider } from 'src/fiatExchanges/ExternalExchanges'
+import FiatConnectQuote from 'src/fiatExchanges/quotes/FiatConnectQuote'
+import { CICOFlow, FiatExchangeFlow, SimplexQuote } from 'src/fiatExchanges/types'
+import { FiatAccount } from 'src/fiatconnect/slice'
+import { KeylessBackupFlow, KeylessBackupOrigin } from 'src/keylessBackup/types'
+import { Screens } from 'src/navigator/Screens'
+import { Nft } from 'src/nfts/types'
+import { EarnPosition } from 'src/positions/types'
+import { Recipient } from 'src/recipients/recipient'
+import { QrCode, TransactionDataInput } from 'src/send/types'
+import type { SwapTransaction } from 'src/swap/types'
+import type { SerializedTokenBalance } from 'src/tokens/slice'
+import { AssetTabType } from 'src/tokens/types'
+import { NetworkId, TokenTransaction, TokenTransfer } from 'src/transactions/types'
+import { Countries } from 'src/utils/Countries'
+import { Currency } from 'src/utils/currencies'
+import { type SerializablePreparedTransactionsPossible } from 'src/viem/preparedTransactionSerialization'
+import { ActionRequestProps } from 'src/walletConnect/screens/ActionRequest'
+import { SessionRequestProps } from 'src/walletConnect/screens/SessionRequest'
+import { WalletConnectRequestType } from 'src/walletConnect/types'
+
+// Typed nested navigator params
+type NestedNavigatorParams<ParamList> = {
+  [K in keyof ParamList]: undefined extends ParamList[K]
+    ? { screen: K; params?: ParamList[K] }
+    : { screen: K; params: ParamList[K] }
+}[keyof ParamList]
+
+interface SendConfirmationParams {
+  origin: SendOrigin
+  transactionData: TransactionDataInput
+  isFromScan: boolean
+  prepareTransactionsResult?: SerializablePreparedTransactionsPossible
+}
+
+type SendEnterAmountParams = {
+  recipient: Recipient & { address: string }
+  isFromScan: boolean
+  origin: SendOrigin
+  forceTokenId?: boolean
+  defaultTokenIdOverride?: string
+}
+
+interface ValidateRecipientParams {
+  requesterAddress?: string
+  origin: SendOrigin
+  recipient: Recipient
+  forceTokenId?: boolean
+  defaultTokenIdOverride?: string
+}
+
+export type StackParamList = {
+  [Screens.BackupComplete]: { isAccountRemoval?: boolean } | undefined
+  [Screens.BackupIntroduction]: {} | undefined
+  [Screens.AccountKeyEducation]:
+    | undefined
+    | {
+        nextScreen?: keyof StackParamList
+        origin?: 'cabOnboarding'
+      }
+  [Screens.AccounSetupFailureScreen]: undefined
+  [Screens.BackupPhrase]: { isAccountRemoval?: boolean } | undefined
+  [Screens.BackupQuiz]: { isAccountRemoval?: boolean } | undefined
+  [Screens.FiatDetailsScreen]: {
+    quote: FiatConnectQuote
+    flow: CICOFlow
+  }
+  [Screens.BidaliScreen]: { currency?: Currency }
+  [Screens.CashInSuccess]: { provider?: string }
+  [Screens.ConsumerIncentivesHomeScreen]: undefined
+  [Screens.DappShortcutsRewards]: undefined
+  [Screens.DappShortcutTransactionRequest]: {
+    rewardId: string
+  }
+  [Screens.DappsScreen]: undefined
+  [Screens.DebugImages]: undefined
+  [Screens.DemoModeAuthBlock]: undefined
+  [Screens.EarnInfoScreen]: undefined
+  [Screens.EarnEnterAmount]: {
+    pool: EarnPosition
+    mode?: Extract<EarnActiveMode, 'deposit' | 'swap-deposit' | 'withdraw'>
+  }
+  [Screens.EarnDepositConfirmationScreen]: {
+    preparedTransaction: SerializablePreparedTransactionsPossible
+    inputTokenInfo: SerializedTokenBalance
+    inputTokenAmount: string
+    pool: EarnPosition
+    mode: Extract<EarnActiveMode, 'deposit' | 'swap-deposit'>
+    swapTransaction?: SwapTransaction
+  }
+  [Screens.EarnWithdrawConfirmationScreen]:
+    | {
+        mode: Extract<EarnActiveMode, 'claim-rewards' | 'exit'>
+        pool: EarnPosition
+      }
+    | {
+        mode: Extract<EarnActiveMode, 'withdraw'>
+        pool: EarnPosition
+        inputTokenAmount: string
+        useMax: boolean
+      }
+
+  [Screens.EarnHome]: { activeEarnTab?: EarnTabType } | undefined
+  [Screens.TabEarn]: { activeEarnTab?: EarnTabType } | undefined
+  [Screens.EarnPoolInfoScreen]: { pool: EarnPosition }
+  [Screens.ErrorScreen]: {
+    errorMessage?: string
+  }
+  [Screens.ExternalExchanges]: {
+    tokenId: string
+    exchanges: ExternalExchangeProvider[]
+  }
+  [Screens.ExchangeQR]: {
+    flow: CICOFlow
+    exchanges?: ExternalExchangeProvider[]
+  }
+  [Screens.FiatExchangeAmount]: {
+    tokenId: string
+    flow: CICOFlow
+    tokenSymbol: string
+  }
+  [Screens.FiatExchangeCurrency]: {
+    flow: FiatExchangeFlow
+  }
+  [Screens.FiatExchangeCurrencyBottomSheet]: {
+    flow: FiatExchangeFlow
+    networkId?: NetworkId
+  }
+  [Screens.FiatConnectLinkAccount]: {
+    quote: FiatConnectQuote
+    flow: CICOFlow
+  }
+  [Screens.FiatConnectReview]: {
+    flow: CICOFlow
+    normalizedQuote: FiatConnectQuote
+    fiatAccount: FiatAccount
+    shouldRefetchQuote?: boolean
+  }
+  [Screens.FiatConnectRefetchQuote]: {
+    providerId: string
+    kycSchema: KycSchema
+  }
+  [Screens.FiatConnectTransferStatus]: {
+    flow: CICOFlow
+    normalizedQuote: FiatConnectQuote
+    fiatAccount: FiatAccount
+  }
+  [Screens.KeylessBackupPhoneCodeInput]: {
+    keylessBackupFlow: KeylessBackupFlow
+    e164Number: string
+    origin: KeylessBackupOrigin
+  }
+  [Screens.KeylessBackupPhoneInput]: {
+    keylessBackupFlow: KeylessBackupFlow
+    selectedCountryCodeAlpha2?: string
+    origin: KeylessBackupOrigin
+  }
+  [Screens.KeylessBackupProgress]: {
+    keylessBackupFlow: KeylessBackupFlow
+    origin: KeylessBackupOrigin
+  }
+  [Screens.KeylessBackupIntro]: {
+    keylessBackupFlow: KeylessBackupFlow
+  }
+  [Screens.KycDenied]: {
+    flow: CICOFlow
+    quote: FiatConnectQuote
+    retryable: boolean
+  }
+  [Screens.KycExpired]: {
+    flow: CICOFlow
+    quote: FiatConnectQuote
+  }
+  [Screens.KycPending]: {
+    flow: CICOFlow
+    quote: FiatConnectQuote
+  }
+  [Screens.KycInactive]: {
+    flow: CICOFlow
+    quote: FiatConnectQuote
+  }
+  [Screens.Simplex]: {
+    simplexQuote: SimplexQuote
+    tokenId: string
+  }
+  [Screens.GoldEducation]: undefined
+  [Screens.ImportSelect]: undefined
+  [Screens.ImportWallet]:
+    | {
+        clean: boolean
+        showZeroBalanceModal?: boolean
+      }
+    | undefined
+  [Screens.EnableBiometry]: undefined
+  [Screens.Language]:
+    | {
+        nextScreen: keyof StackParamList
+      }
+    | undefined
+  [Screens.LanguageModal]:
+    | {
+        nextScreen: keyof StackParamList
+      }
+    | undefined
+  [Screens.Licenses]: undefined
+  [Screens.LinkPhoneNumber]: undefined
+  [Screens.JumpstartTransactionDetailsScreen]: {
+    transaction: TokenTransfer
+  }
+  [Screens.Main]: undefined
+  [Screens.MainModal]: undefined
+  [Screens.NotificationCenter]: undefined
+  [Screens.NftsInfoCarousel]: { nfts: Nft[]; networkId: NetworkId }
+  [Screens.PincodeEnter]: {
+    withVerification?: boolean
+    onSuccess: (pin: string) => void
+    onCancel: () => void
+    account?: string
+  }
+  [Screens.PincodeSet]:
+    | {
+        changePin?: boolean
+        choseToRestoreAccount?: boolean
+        registrationStep?: { step: number; totalSteps: number }
+        showGuidedOnboarding?: boolean
+      }
+    | undefined
+  [Screens.PointsHome]: undefined
+  [Screens.PointsIntro]: undefined
+  [Screens.PrivateKey]: undefined
+  [Screens.ProtectWallet]: undefined
+  [Screens.OnboardingRecoveryPhrase]:
+    | {
+        origin?: 'cabOnboarding'
+      }
+    | undefined
+  [Screens.Profile]: undefined
+  [Screens.ProfileSubmenu]: undefined
+  [Screens.LegalSubmenu]: undefined
+  [Screens.PreferencesSubmenu]: undefined
+  [Screens.SecuritySubmenu]: { promptConfirmRemovalModal?: boolean } | undefined
+  [Screens.SettingsMenu]: undefined
+  [Screens.QRNavigator]: NestedNavigatorParams<QRTabParamList> | undefined
+  [Screens.RegulatoryTerms]: undefined
+  [Screens.SanctionedCountryErrorScreen]: undefined
+  [Screens.SelectCountry]: {
+    countries: Countries
+    selectedCountryCodeAlpha2: string
+    onSelectCountry(countryCode: string): void
+  }
+  [Screens.SelectLocalCurrency]: undefined
+  [Screens.SelectProvider]: {
+    flow: CICOFlow
+    tokenId: string
+    amount: {
+      crypto: number
+      fiat: number
+    }
+  }
+  [Screens.SendSelectRecipient]:
+    | {
+        forceTokenId?: boolean
+        defaultTokenIdOverride?: string
+      }
+    | undefined
+  [Screens.SendConfirmation]: SendConfirmationParams
+  [Screens.SendEnterAmount]: SendEnterAmountParams
+  [Screens.SignInWithEmail]: {
+    keylessBackupFlow: KeylessBackupFlow
+    origin: KeylessBackupOrigin
+  }
+  [Screens.Spend]: undefined
+  [Screens.StoreWipeRecoveryScreen]: undefined
+  [Screens.Support]: undefined
+  [Screens.SupportContact]:
+    | {
+        prefilledText: string
+      }
+    | undefined
+  [Screens.SwapScreenWithBack]:
+    | {
+        fromTokenId?: string
+        toTokenId?: string
+        toTokenNetworkId?: NetworkId
+      }
+    | undefined
+  [Screens.TabDiscover]: {} | undefined
+  [Screens.TabHome]: {} | undefined
+  [Screens.TabWallet]: { activeAssetTab?: AssetTabType } | undefined
+  [Screens.TabNavigator]:
+    | { initialScreen?: Screens.TabHome | Screens.TabWallet | Screens.TabDiscover | string }
+    | undefined
+  [Screens.TokenDetails]: { tokenId: string }
+  [Screens.TokenImport]: undefined
+  [Screens.TransactionDetailsScreen]: {
+    transaction: TokenTransaction
+  }
+  [Screens.UpgradeScreen]: undefined
+  [Screens.ValidateRecipientIntro]: ValidateRecipientParams
+  [Screens.ValidateRecipientAccount]: ValidateRecipientParams
+  [Screens.VerificationStartScreen]:
+    | {
+        hasOnboarded?: boolean
+        selectedCountryCodeAlpha2?: string
+      }
+    | undefined
+  [Screens.VerificationCodeInputScreen]: {
+    registrationStep?: { step: number; totalSteps: number }
+    e164Number: string
+    countryCallingCode: string
+    hasOnboarded?: boolean
+  }
+  [Screens.OnboardingSuccessScreen]: undefined
+  [Screens.WalletConnectRequest]:
+    | { type: WalletConnectRequestType.Loading; origin: WalletConnectPairingOrigin }
+    | ({
+        type: WalletConnectRequestType.Action
+      } & ActionRequestProps)
+    | ({
+        type: WalletConnectRequestType.Session
+      } & SessionRequestProps)
+    | { type: WalletConnectRequestType.TimeOut }
+  [Screens.WalletConnectSessions]: undefined
+  [Screens.WalletSecurityPrimer]: undefined
+  [Screens.WebViewScreen]: { uri: string }
+  [Screens.Welcome]: undefined
+  [Screens.WithdrawSpend]: undefined
+}
+
+export type QRTabParamList = {
+  [Screens.QRCode]:
+    | {
+        showSecureSendStyling?: true
+      }
+    | undefined
+  [Screens.QRScanner]:
+    | {
+        showSecureSendStyling?: true
+        onQRCodeDetected?: (qrCode: QrCode) => void
+        defaultTokenIdOverride?: string
+      }
+    | undefined
+}

package/src/networkInfo/actions.ts

@@ -0,0 +1,28 @@
+import { UserLocationData } from 'src/networkInfo/saga'
+
+export enum Actions {
+  SET_CONNECTED = 'NETWORK_INFO/SET_CONNECTED',
+  UPDATE_USER_LOCATION_DATA = 'NETWORK_INFO/UPDATE_USER_LOCATION_DATA',
+}
+
+interface SetNetworkConnected {
+  type: Actions.SET_CONNECTED
+  connected: boolean
+}
+
+interface UpdateUserLocationData {
+  type: Actions.UPDATE_USER_LOCATION_DATA
+  userLocationData: UserLocationData
+}
+
+export type ActionTypes = SetNetworkConnected | UpdateUserLocationData
+
+export const setNetworkConnectivity = (connected: boolean) => ({
+  type: Actions.SET_CONNECTED,
+  connected,
+})
+
+export const updateUserLocationData = (userLocationData: UserLocationData) => ({
+  type: Actions.UPDATE_USER_LOCATION_DATA,
+  userLocationData,
+})

package/src/networkInfo/reducer.ts

@@ -0,0 +1,44 @@
+import { REHYDRATE, RehydrateAction } from 'redux-persist'
+import { ActionTypes, Actions } from 'src/networkInfo/actions'
+import { UserLocationData } from 'src/networkInfo/saga'
+
+interface State {
+  connected: boolean // True if the phone thinks it has a data connection (cellular/Wi-Fi), false otherwise.
+  rehydrated: boolean
+  userLocationData: UserLocationData
+}
+
+const initialState = {
+  connected: false,
+  rehydrated: false,
+  userLocationData: {
+    countryCodeAlpha2: null,
+    region: null,
+    ipAddress: null,
+  },
+}
+
+export const reducer = (
+  state: State | undefined = initialState,
+  action: ActionTypes | RehydrateAction
+): State => {
+  switch (action.type) {
+    case Actions.SET_CONNECTED:
+      return {
+        ...state,
+        connected: action.connected,
+      }
+    case Actions.UPDATE_USER_LOCATION_DATA:
+      return {
+        ...state,
+        userLocationData: action.userLocationData,
+      }
+    case REHYDRATE:
+      return {
+        ...state,
+        rehydrated: true,
+      }
+    default:
+      return state
+  }
+}

package/src/networkInfo/saga.test.ts

@@ -0,0 +1,43 @@
+import { FetchMock } from 'jest-fetch-mock/types'
+import { expectSaga } from 'redux-saga-test-plan'
+import { select } from 'redux-saga/effects'
+import { defaultCountryCodeSelector } from 'src/account/selectors'
+import { updateUserLocationData } from 'src/networkInfo/actions'
+import { fetchUserLocationData } from 'src/networkInfo/saga'
+
+describe(fetchUserLocationData, () => {
+  const mockFetch = fetch as FetchMock
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockFetch.resetMocks()
+  })
+
+  it('fetches location data then correctly dispatches the action', async () => {
+    const MOCK_IP_LOCATION_DATA = {
+      countryCodeAlpha2: 'US',
+      region: 'CA',
+      ipAddress: '172.1.1.0',
+    }
+
+    mockFetch.mockResponse(JSON.stringify(MOCK_IP_LOCATION_DATA))
+
+    await expectSaga(fetchUserLocationData).put(updateUserLocationData(MOCK_IP_LOCATION_DATA)).run()
+  })
+
+  it('infers location from country code then correctly dispatches the action', async () => {
+    const singaporeCallingCode = '+65'
+
+    const MOCK_PHONE_LOCATION_DATA = {
+      countryCodeAlpha2: 'SG',
+      region: null,
+      ipAddress: null,
+    }
+
+    mockFetch.mockReject(new Error('Location data service unavailable'))
+
+    await expectSaga(fetchUserLocationData)
+      .provide([[select(defaultCountryCodeSelector), singaporeCallingCode]])
+      .put(updateUserLocationData(MOCK_PHONE_LOCATION_DATA))
+      .run()
+  })
+})

package/src/networkInfo/saga.ts

@@ -0,0 +1,100 @@
+import NetInfo, { NetInfoState } from '@react-native-community/netinfo'
+import { getIpAddress } from 'react-native-device-info'
+import { eventChannel } from 'redux-saga'
+import { defaultCountryCodeSelector } from 'src/account/selectors'
+import { isE2EEnv } from 'src/config'
+import { setNetworkConnectivity, updateUserLocationData } from 'src/networkInfo/actions'
+import Logger from 'src/utils/Logger'
+import { fetchWithTimeout } from 'src/utils/fetchWithTimeout'
+import { getRegionCodeFromCountryCode } from 'src/utils/phoneNumbers'
+import networkConfig from 'src/web3/networkConfig'
+import { call, cancelled, put, select, spawn, take } from 'typed-redux-saga'
+
+const TAG = 'networkInfo/saga'
+
+export interface UserLocationData {
+  countryCodeAlpha2: string | null
+  region: string | null
+  ipAddress: string | null
+}
+
+interface ErrorResponse {
+  error: string
+}
+
+function createNetworkStatusChannel() {
+  return eventChannel((emit) => {
+    return NetInfo.addEventListener((state) => emit(state))
+  })
+}
+
+const MOCK_USER_LOCATION = {
+  countryCodeAlpha2: 'DE',
+  region: null,
+  ipAddress: '1.1.1.7',
+}
+
+const isConnected = (connectionInfo: NetInfoState) => {
+  return connectionInfo.type !== 'none'
+}
+
+const isErrorResponse = (response: UserLocationData | ErrorResponse): response is ErrorResponse =>
+  !!(response as ErrorResponse).error
+
+function* subscribeToNetworkStatus() {
+  const networkStatusChannel = yield* call(createNetworkStatusChannel)
+  let connectionInfo = yield* call([NetInfo, 'fetch'])
+  let isNetworkConnected = isConnected(connectionInfo)
+  Logger.setIsNetworkConnected(isNetworkConnected)
+  yield* put(setNetworkConnectivity(isNetworkConnected))
+  while (true) {
+    try {
+      connectionInfo = (yield* take(networkStatusChannel)) as NetInfoState
+      isNetworkConnected = isConnected(connectionInfo)
+      Logger.setIsNetworkConnected(isNetworkConnected)
+      yield* put(setNetworkConnectivity(isNetworkConnected))
+    } catch (error) {
+      Logger.error(`${TAG}@subscribeToNetworkStatus`, 'Failed to watch network status', error)
+    } finally {
+      if (yield* cancelled()) {
+        networkStatusChannel.close()
+      }
+    }
+  }
+}
+
+export function* fetchUserLocationData() {
+  let userLocationData: UserLocationData | ErrorResponse
+  try {
+    const response: Response = yield* call(fetchWithTimeout, networkConfig.fetchUserLocationDataUrl)
+    userLocationData = yield* call([response, 'json'])
+
+    if (isErrorResponse(userLocationData)) {
+      throw new Error(
+        `IP address fetch failed with status code ${response.status}. Error: ${userLocationData.error}}`
+      )
+    }
+  } catch (error) {
+    Logger.error(`${TAG}:fetchUserLocationData`, 'Failed to fetch user location', error)
+    // If endpoint fails then use country code to determine location
+    const countryCallingCode: string | null = yield* select(defaultCountryCodeSelector)
+    const countryCodeAlpha2 = countryCallingCode
+      ? getRegionCodeFromCountryCode(countryCallingCode)
+      : null
+    let ipAddress: string | null
+    try {
+      ipAddress = yield* call(getIpAddress)
+    } catch (error) {
+      ipAddress = null
+    }
+
+    userLocationData = { countryCodeAlpha2, region: null, ipAddress }
+  }
+
+  yield* put(updateUserLocationData(isE2EEnv ? MOCK_USER_LOCATION : userLocationData))
+}
+
+export function* networkInfoSaga() {
+  yield* spawn(subscribeToNetworkStatus)
+  yield* spawn(fetchUserLocationData)
+}

package/src/networkInfo/selectors.ts

@@ -0,0 +1,4 @@
+import { RootState } from 'src/redux/reducers'
+
+export const networkConnectedSelector = (state: RootState) => state.networkInfo.connected
+export const userLocationDataSelector = (state: RootState) => state.networkInfo.userLocationData

package/src/nfts/NftMedia.test.tsx

@@ -0,0 +1,114 @@
+import { render } from '@testing-library/react-native'
+import React from 'react'
+import { Text } from 'react-native'
+import { Provider } from 'react-redux'
+import { NftEvents } from 'src/analytics/Events'
+import AppAnalytics from 'src/analytics/AppAnalytics'
+import NftMedia from 'src/nfts/NftMedia'
+import { NftOrigin } from 'src/nfts/types'
+import { createMockStore } from 'test/utils'
+import { mockNftAllFields, mockNftNullMetadata } from 'test/values'
+
+describe('Given NftMedia', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  const ErrorComponent = <Text>Some error state</Text>
+
+  describe('When mediaType is image', () => {
+    it('Then should initially display a loading state', () => {
+      const { getByTestId, queryByText } = render(
+        <Provider store={createMockStore()}>
+          <NftMedia
+            nft={mockNftAllFields}
+            origin={NftOrigin.NftsInfoCarouselMain}
+            ErrorComponent={ErrorComponent}
+            testID="NftImage"
+            mediaType="image"
+          />
+        </Provider>
+      )
+
+      expect(getByTestId('NftImage')).toBeTruthy()
+      expect(getByTestId('NftImage/ImagePlaceholder')).toBeTruthy()
+      expect(queryByText('Some error state')).toBeFalsy()
+      expect(AppAnalytics.track).not.toHaveBeenCalled()
+    })
+
+    it('Then should display an error state if there is no nft metadata', () => {
+      const { getByText, queryByTestId } = render(
+        <Provider store={createMockStore()}>
+          <NftMedia
+            nft={mockNftNullMetadata}
+            origin={NftOrigin.NftsInfoCarouselMain}
+            ErrorComponent={ErrorComponent}
+            testID="NftImage"
+            mediaType="image"
+          />
+        </Provider>
+      )
+
+      expect(queryByTestId('NftImage')).toBeFalsy()
+      expect(queryByTestId('NftImage/ImagePlaceholder')).toBeFalsy()
+      expect(getByText('Some error state')).toBeTruthy()
+      expect(AppAnalytics.track).toHaveBeenCalledTimes(1)
+      expect(AppAnalytics.track).toHaveBeenCalledWith(NftEvents.nft_media_load, {
+        contractAddress: '0x000000000000000000000000000000000000CE10',
+        error: 'No nft metadata',
+        origin: 'nftsInfoCarouselMain',
+        tokenId: '4',
+        url: undefined,
+        mediaType: 'image',
+      })
+    })
+  })
+
+  describe('When mediaType is video', () => {
+    it('should initially display a loading state', () => {
+      const { getByTestId, queryByText } = render(
+        <Provider store={createMockStore()}>
+          <NftMedia
+            nft={mockNftAllFields}
+            origin={NftOrigin.NftsInfoCarouselMain}
+            ErrorComponent={ErrorComponent}
+            testID="NftVideo"
+            mediaType="video"
+          />
+        </Provider>
+      )
+
+      expect(getByTestId('NftVideo')).toBeTruthy()
+      expect(getByTestId('NftVideo/VideoPlaceholder')).toBeTruthy()
+      expect(queryByText('Some error state')).toBeFalsy()
+      expect(AppAnalytics.track).not.toHaveBeenCalled()
+    })
+
+    it('should display an error state if there is no nft metadata', () => {
+      const { getByText, queryByTestId } = render(
+        <Provider store={createMockStore()}>
+          <NftMedia
+            nft={mockNftNullMetadata}
+            origin={NftOrigin.NftsInfoCarouselMain}
+            ErrorComponent={ErrorComponent}
+            testID="NftVideo"
+            mediaType="video"
+          />
+        </Provider>
+      )
+
+      expect(queryByTestId('NftVideo')).toBeFalsy()
+      expect(queryByTestId('NftVideo/ImagePlaceholder')).toBeFalsy()
+      expect(getByText('Some error state')).toBeTruthy()
+      expect(AppAnalytics.track).toHaveBeenCalledTimes(1)
+      expect(AppAnalytics.track).toHaveBeenCalledWith(NftEvents.nft_media_load, {
+        contractAddress: '0x000000000000000000000000000000000000CE10',
+        error: 'No nft metadata',
+        origin: 'nftsInfoCarouselMain',
+        tokenId: '4',
+        url: undefined,
+        mediaType: 'video',
+      })
+    })
+  })
+})