@luxexchange/lx 1.0.0

package/src/features/language/hooks.tsx

@@ -0,0 +1,304 @@
+import { ForceUpgradeTranslations } from '@luxexchange/gating'
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useSelector } from 'react-redux'
+import { AppTFunction } from '@luxfi/ui/src/i18n/types'
+import { useUrlContext } from '@luxexchange/lx/src/contexts/UrlContext'
+import { Language, Locale } from '@luxexchange/lx/src/features/language/constants'
+import { getLocale, parseLocale } from '@luxexchange/lx/src/features/language/navigatorLocale'
+import { selectCurrentLanguage } from '@luxexchange/lx/src/features/settings/selectors'
+import { isWebApp } from '@luxfi/utilities/src/platform'
+
+export type LanguageInfo = {
+  displayName: string
+  originName: string // name of language in that language
+  loggingName: string // internal only name to be used in logging
+  locale: Locale
+}
+
+/**
+ * Returns all relevant info for the target language, including the translated name of
+ * that language in that language (not a typo).
+ * @param language target language
+ * @returns all relevant language info
+ */
+export function getLanguageInfo(t: AppTFunction, language: Language): LanguageInfo {
+  const languageToLanguageInfo: Record<Language, LanguageInfo> = {
+    [Language.ChineseSimplified]: {
+      displayName: t('language.chineseSimplified'),
+      originName: t('language.chineseSimplified', { lng: getLocale(Language.ChineseSimplified) }),
+      loggingName: 'Chinese, Simplified',
+      locale: getLocale(Language.ChineseSimplified),
+    },
+    [Language.ChineseTraditional]: {
+      displayName: t('language.chineseTraditional'),
+      originName: t('language.chineseTraditional', {
+        lng: getLocale(Language.ChineseTraditional),
+      }),
+      loggingName: 'Chinese, Traditional',
+      locale: getLocale(Language.ChineseTraditional),
+    },
+    [Language.Dutch]: {
+      displayName: t('language.dutch'),
+      originName: t('language.dutch', { lng: getLocale(Language.Dutch) }),
+      loggingName: 'Dutch',
+      locale: getLocale(Language.Dutch),
+    },
+    [Language.English]: {
+      displayName: t('language.english'),
+      originName: t('language.english', { lng: getLocale(Language.English) }),
+      loggingName: 'English',
+      locale: getLocale(Language.English),
+    },
+    [Language.French]: {
+      displayName: t('language.french'),
+      originName: t('language.french', { lng: getLocale(Language.French) }),
+      loggingName: 'French',
+      locale: getLocale(Language.French),
+    },
+    [Language.Indonesian]: {
+      displayName: t('language.indonesian'),
+      originName: t('language.indonesian', { lng: getLocale(Language.Indonesian) }),
+      loggingName: 'Indonesian',
+      locale: getLocale(Language.Indonesian),
+    },
+    [Language.Japanese]: {
+      displayName: t('language.japanese'),
+      originName: t('language.japanese', { lng: getLocale(Language.Japanese) }),
+      loggingName: 'Japanese',
+      locale: getLocale(Language.Japanese),
+    },
+    [Language.Korean]: {
+      displayName: t('language.korean'),
+      originName: t('language.korean', { lng: getLocale(Language.Korean) }),
+      loggingName: 'Korean',
+      locale: getLocale(Language.Korean),
+    },
+    [Language.Portuguese]: {
+      displayName: t('language.portuguese'),
+      originName: t('language.portuguese', { lng: getLocale(Language.Portuguese) }),
+      loggingName: 'Portuguese',
+      locale: getLocale(Language.Portuguese),
+    },
+    [Language.Russian]: {
+      displayName: t('language.russian'),
+      originName: t('language.russian', { lng: getLocale(Language.Russian) }),
+      loggingName: 'Russian',
+      locale: getLocale(Language.Russian),
+    },
+    [Language.SpanishSpain]: {
+      displayName: t('language.spanishSpain'),
+      originName: t('language.spanishSpain', { lng: getLocale(Language.SpanishSpain) }),
+      loggingName: 'Spanish (Spain)',
+      locale: getLocale(Language.SpanishSpain),
+    },
+    [Language.SpanishLatam]: {
+      displayName: t('language.spanishLatam'),
+      originName: t('language.spanishLatam', { lng: getLocale(Language.SpanishLatam) }),
+      loggingName: 'Spanish (Latin America)',
+      locale: getLocale(Language.SpanishLatam),
+    },
+    [Language.SpanishBelize]: {
+      displayName: t('language.spanishBelize'),
+      originName: t('language.spanishBelize', { lng: getLocale(Language.SpanishBelize) }),
+      loggingName: 'Spanish (Belize)',
+      locale: getLocale(Language.SpanishBelize),
+    },
+    [Language.SpanishCuba]: {
+      displayName: t('language.spanishCuba'),
+      originName: t('language.spanishCuba', { lng: getLocale(Language.SpanishCuba) }),
+      loggingName: 'Spanish (Cuba)',
+      locale: getLocale(Language.SpanishCuba),
+    },
+    [Language.SpanishDominicanRepublic]: {
+      displayName: t('language.spanishDominicanRepublic'),
+      originName: t('language.spanishDominicanRepublic', { lng: getLocale(Language.SpanishDominicanRepublic) }),
+      loggingName: 'Spanish (Dominican Republic)',
+      locale: getLocale(Language.SpanishDominicanRepublic),
+    },
+    [Language.SpanishGuatemala]: {
+      displayName: t('language.spanishGuatemala'),
+      originName: t('language.spanishGuatemala', { lng: getLocale(Language.SpanishGuatemala) }),
+      loggingName: 'Spanish (Guatemala)',
+      locale: getLocale(Language.SpanishGuatemala),
+    },
+    [Language.SpanishHonduras]: {
+      displayName: t('language.spanishHonduras'),
+      originName: t('language.spanishHonduras', { lng: getLocale(Language.SpanishHonduras) }),
+      loggingName: 'Spanish (Honduras)',
+      locale: getLocale(Language.SpanishHonduras),
+    },
+    [Language.SpanishMexico]: {
+      displayName: t('language.spanishMexico'),
+      originName: t('language.spanishMexico', { lng: getLocale(Language.SpanishMexico) }),
+      loggingName: 'Spanish (Mexico)',
+      locale: getLocale(Language.SpanishMexico),
+    },
+    [Language.SpanishNicaragua]: {
+      displayName: t('language.spanishNicaragua'),
+      originName: t('language.spanishNicaragua', { lng: getLocale(Language.SpanishNicaragua) }),
+      loggingName: 'Spanish (Nicaragua)',
+      locale: getLocale(Language.SpanishNicaragua),
+    },
+    [Language.SpanishPanama]: {
+      displayName: t('language.spanishPanama'),
+      originName: t('language.spanishPanama', { lng: getLocale(Language.SpanishPanama) }),
+      loggingName: 'Spanish (Panama)',
+      locale: getLocale(Language.SpanishPanama),
+    },
+    [Language.SpanishPeru]: {
+      displayName: t('language.spanishPeru'),
+      originName: t('language.spanishPeru', { lng: getLocale(Language.SpanishPeru) }),
+      loggingName: 'Spanish (Peru)',
+      locale: getLocale(Language.SpanishPeru),
+    },
+    [Language.SpanishPuertoRico]: {
+      displayName: t('language.spanishPuertoRico'),
+      originName: t('language.spanishPuertoRico', { lng: getLocale(Language.SpanishPuertoRico) }),
+      loggingName: 'Spanish (Puerto Rico)',
+      locale: getLocale(Language.SpanishPuertoRico),
+    },
+    [Language.SpanishElSalvador]: {
+      displayName: t('language.spanishElSalvador'),
+      originName: t('language.spanishElSalvador', { lng: getLocale(Language.SpanishElSalvador) }),
+      loggingName: 'Spanish (El Salvador)',
+      locale: getLocale(Language.SpanishElSalvador),
+    },
+    [Language.SpanishUnitedStates]: {
+      displayName: t('language.spanishUs'),
+      originName: t('language.spanishUs', { lng: getLocale(Language.SpanishUnitedStates) }),
+      loggingName: 'Spanish (US)',
+      locale: getLocale(Language.SpanishUnitedStates),
+    },
+    [Language.SpanishArgentina]: {
+      displayName: t('language.spanishArgentina'),
+      originName: t('language.spanishArgentina', { lng: getLocale(Language.SpanishArgentina) }),
+      loggingName: 'Spanish (Argentina)',
+      locale: getLocale(Language.SpanishArgentina),
+    },
+    [Language.SpanishBolivia]: {
+      displayName: t('language.spanishBolivia'),
+      originName: t('language.spanishBolivia', { lng: getLocale(Language.SpanishBolivia) }),
+      loggingName: 'Spanish (Bolivia)',
+      locale: getLocale(Language.SpanishBolivia),
+    },
+    [Language.SpanishChile]: {
+      displayName: t('language.spanishChile'),
+      originName: t('language.spanishChile', { lng: getLocale(Language.SpanishChile) }),
+      loggingName: 'Spanish (Chile)',
+      locale: getLocale(Language.SpanishChile),
+    },
+    [Language.SpanishColombia]: {
+      displayName: t('language.spanishColombia'),
+      originName: t('language.spanishColombia', { lng: getLocale(Language.SpanishColombia) }),
+      loggingName: 'Spanish (Colombia)',
+      locale: getLocale(Language.SpanishColombia),
+    },
+    [Language.SpanishCostaRica]: {
+      displayName: t('language.spanishCostaRica'),
+      originName: t('language.spanishCostaRica', { lng: getLocale(Language.SpanishCostaRica) }),
+      loggingName: 'Spanish (Costa Rica)',
+      locale: getLocale(Language.SpanishCostaRica),
+    },
+    [Language.SpanishEcuador]: {
+      displayName: t('language.spanishEcuador'),
+      originName: t('language.spanishEcuador', { lng: getLocale(Language.SpanishEcuador) }),
+      loggingName: 'Spanish (Ecuador)',
+      locale: getLocale(Language.SpanishEcuador),
+    },
+    [Language.SpanishParaguay]: {
+      displayName: t('language.spanishParaguay'),
+      originName: t('language.spanishParaguay', { lng: getLocale(Language.SpanishParaguay) }),
+      loggingName: 'Spanish (Paraguay)',
+      locale: getLocale(Language.SpanishParaguay),
+    },
+    [Language.SpanishUruguay]: {
+      displayName: t('language.spanishUruguay'),
+      originName: t('language.spanishUruguay', { lng: getLocale(Language.SpanishUruguay) }),
+      loggingName: 'Spanish (Uruguay)',
+      locale: getLocale(Language.SpanishUruguay),
+    },
+    [Language.SpanishVenezuela]: {
+      displayName: t('language.spanishVenezuela'),
+      originName: t('language.spanishVenezuela', { lng: getLocale(Language.SpanishVenezuela) }),
+      loggingName: 'Spanish (Venezuela)',
+      locale: getLocale(Language.SpanishVenezuela),
+    },
+    [Language.Turkish]: {
+      displayName: t('language.turkish'),
+      originName: t('language.turkish', { lng: getLocale(Language.Turkish) }),
+      loggingName: 'Turkish',
+      locale: getLocale(Language.Turkish),
+    },
+    [Language.Vietnamese]: {
+      displayName: t('language.vietnamese'),
+      originName: t('language.vietnamese', { lng: getLocale(Language.Vietnamese) }),
+      loggingName: 'Vietnamese',
+      locale: getLocale(Language.Vietnamese),
+    },
+  }
+
+  return languageToLanguageInfo[language]
+}
+
+// Language
+
+/**
+ * Hook used to get the currently selected language for the app
+ * @returns currently selected language enum
+ */
+export function useCurrentLanguage(): Language {
+  return useSelector(selectCurrentLanguage)
+}
+
+export function useLanguageInfo(language: Language): LanguageInfo {
+  const { t } = useTranslation()
+  return getLanguageInfo(t, language)
+}
+
+/**
+ * Hook used to get all relevant info for the currently selected language in the app
+ * @returns all relevant language info
+ */
+export function useCurrentLanguageInfo(): LanguageInfo {
+  const currentLanguage = useCurrentLanguage()
+  return useLanguageInfo(currentLanguage)
+}
+
+type SupportedLocale = keyof ForceUpgradeTranslations
+
+/**
+ * Retrieves the Statsig key for a given locale from the i18n resources.
+ * @returns The Statsig key if available, otherwise null.
+ */
+export function useLocalizedStatsigLanguage(): SupportedLocale | null {
+  const { i18n } = useTranslation()
+  const parsedLocale = parseLocale(i18n.resolvedLanguage)
+  const resources = i18n.services.backendConnector.options.resources as Record<string, { statsigKey?: SupportedLocale }>
+
+  if (typeof parsedLocale !== 'string' || !(parsedLocale in resources)) {
+    return null
+  }
+
+  return resources[parsedLocale]?.statsigKey ?? null
+}
+
+/**
+ * Hook used to get the locale for the currently selected language in the app
+ * @returns locale for the currently selected language
+ */
+export function useCurrentLocale(): Locale {
+  const { useParsedQueryString } = useUrlContext()
+  const parsedQueryString = useParsedQueryString()
+  const urlLocale = parseLocale(parsedQueryString['lng'])
+  const currentLanguage = useCurrentLanguage()
+  const currentLocale = getLocale(currentLanguage)
+
+  return useMemo(() => {
+    if (isWebApp) {
+      return urlLocale ?? currentLocale
+    } else {
+      return currentLocale
+    }
+  }, [urlLocale, currentLocale])
+}

package/src/features/language/localizedDayjs.ts

@@ -0,0 +1,106 @@
+import dayjs, { Dayjs } from 'dayjs'
+import localizedFormat from 'dayjs/plugin/localizedFormat'
+
+import 'dayjs/locale/en'
+import 'dayjs/locale/es'
+import 'dayjs/locale/fr'
+import 'dayjs/locale/id'
+import 'dayjs/locale/ja'
+import 'dayjs/locale/nl'
+import 'dayjs/locale/pt'
+import 'dayjs/locale/ru'
+import 'dayjs/locale/tr'
+import 'dayjs/locale/vi'
+import 'dayjs/locale/zh-cn'
+import 'dayjs/locale/zh-tw'
+import { Locale } from '@luxexchange/lx/src/features/language/constants'
+import { useCurrentLanguageInfo } from '@luxexchange/lx/src/features/language/hooks'
+
+dayjs.extend(localizedFormat)
+
+export type DateFormat = 'l' | 'll' | 'LL'
+export const FORMAT_DATE_SHORT: DateFormat = 'l' // M/D/YYYY e.g. 8/16/2018
+export const FORMAT_DATE_MEDIUM: DateFormat = 'll' // MMM D, YYYY	e.g. Aug 16, 2018
+export const FORMAT_DATE_LONG: DateFormat = 'LL' // MMMM D, YYYY	e.g. August 16, 2018
+export const FORMAT_DATE_MONTH = 'MMMM' // January-December
+export const FORMAT_DATE_MONTH_YEAR = 'MMMM YYYY'
+export const FORMAT_DATE_MONTH_DAY = 'MMM D' // Jan-Dec 1-31
+
+export type TimeFormat = 'LT' | 'LTS'
+export const FORMAT_TIME_SHORT: TimeFormat = 'LT' // h:mm A	e.g. 8:02 PM
+export const FORMAT_TIME_MEDIUM: TimeFormat = 'LTS' // h:mm:ss A e.g. 8:02:18 PM
+
+export type DateTimeFormat = 'lll' | 'LLL' | 'llll' | 'LLLL'
+export const FORMAT_DATE_TIME_SHORT = 'lll' // MMM D, YYYY h:mm A	e.g. Aug 16, 2018 8:02 PM
+export const FORMAT_DATE_TIME_MEDIUM = 'LLL' // MMMM D, YYYY h:mm A	e.g. August 16, 2018 8:02 PM
+export const FORMAT_DATE_TIME_LONG = 'llll' // ddd, MMM D, YYYY h:mm A e.g. Thu, Aug 16, 2018 8:02 PM
+export const FORMAT_DATE_TIME_FULL = 'LLLL' // dddd, MMMM D, YYYY h:mm A e.g. Thursday, August 16, 2018 8:02 PM
+
+export type LocalizedDayjs = typeof dayjs
+
+// Supported ones found here https://github.com/iamkun/dayjs/tree/dev/src/locale
+const mapLocaleToSupportedDayjsLocale: Record<Locale, string> = {
+  [Locale.ChineseSimplified]: 'zh-cn',
+  [Locale.ChineseTraditional]: 'zh-tw',
+  [Locale.DutchNetherlands]: 'nl',
+  [Locale.EnglishUnitedStates]: 'en-us',
+  [Locale.FrenchFrance]: 'fr',
+  [Locale.IndonesianIndonesia]: 'id',
+  [Locale.JapaneseJapan]: 'ja',
+  [Locale.KoreanKorea]: 'ko',
+  [Locale.PortugueseBrazil]: 'pt-br',
+  [Locale.PortuguesePortugal]: 'pt',
+  [Locale.RussianRussia]: 'ru',
+  [Locale.SpanishSpain]: 'es-es',
+  [Locale.SpanishLatam]: 'es-mx',
+  [Locale.SpanishArgentina]: 'es-mx',
+  [Locale.SpanishBelize]: 'es-mx',
+  [Locale.SpanishBolivia]: 'es-mx',
+  [Locale.SpanishChile]: 'es-mx',
+  [Locale.SpanishColombia]: 'es-mx',
+  [Locale.SpanishCostaRica]: 'es-mx',
+  [Locale.SpanishCuba]: 'es-mx',
+  [Locale.SpanishDominicanRepublic]: 'es-mx',
+  [Locale.SpanishEcuador]: 'es-mx',
+  [Locale.SpanishElSalvador]: 'es-mx',
+  [Locale.SpanishGuatemala]: 'es-mx',
+  [Locale.SpanishHonduras]: 'es-mx',
+  [Locale.SpanishMexico]: 'es-mx',
+  [Locale.SpanishNicaragua]: 'es-mx',
+  [Locale.SpanishPanama]: 'es-mx',
+  [Locale.SpanishParaguay]: 'es-mx',
+  [Locale.SpanishPeru]: 'es-mx',
+  [Locale.SpanishPuertoRico]: 'es-mx',
+  [Locale.SpanishUruguay]: 'es-mx',
+  [Locale.SpanishVenezuela]: 'es-mx',
+  [Locale.SpanishUnitedStates]: 'es-us',
+  [Locale.TurkishTurkey]: 'tr',
+  [Locale.VietnameseVietnam]: 'vi',
+}
+
+/**
+ * Utility hook to ensure that the date formatted by dayjs is up to date with the current locale.
+ * Does not currently lead to rerender when language is changed, but this isn't needed when language is controlled
+ * in system settings.s
+ * @returns dayjs instance for ease of use, same as instance imported from library
+ */
+export function useLocalizedDayjs(): LocalizedDayjs {
+  const { locale } = useCurrentLanguageInfo()
+  dayjs.locale(mapLocaleToSupportedDayjsLocale[locale])
+  return dayjs
+}
+
+export function useFormattedDate(date: Dayjs, format: DateFormat): string {
+  const { locale } = useCurrentLanguageInfo()
+  return date.locale(mapLocaleToSupportedDayjsLocale[locale]).format(format).toString()
+}
+
+export function useFormattedTime(date: Dayjs, format: TimeFormat): string {
+  const { locale } = useCurrentLanguageInfo()
+  return date.locale(mapLocaleToSupportedDayjsLocale[locale]).format(format).toString()
+}
+
+export function useFormattedDateTime(date: Dayjs, format: DateTimeFormat): string {
+  const { locale } = useCurrentLanguageInfo()
+  return date.locale(locale).format(format).toString()
+}

package/src/features/language/navigatorLocale.ts

@@ -0,0 +1,49 @@
+import {
+  Language,
+  Locale,
+  mapLanguageToLocale,
+  PLATFORM_SUPPORTED_LANGUAGES,
+} from '@luxexchange/lx/src/features/language/constants'
+
+/**
+ * Helper function used get the locale from the language. They're strongly associated,
+ * but they have different ISO values and are used differently. Locale is what's mainly
+ * used for integrations with other libraries, while language is more internal
+ * @param language target language
+ * @returns associated locale
+ */
+export function getLocale(language: Language): Locale {
+  return mapLanguageToLocale[language]
+}
+
+/**
+ * Given a locale string (e.g. from user agent), return the best match for corresponding Locale enum object
+ * @param maybeSupportedLocale the fuzzy locale identifier
+ */
+export function parseLocale(maybeSupportedLocale: unknown): Locale | undefined {
+  if (typeof maybeSupportedLocale !== 'string') {
+    return undefined
+  }
+  const lowerMaybeSupportedLocale = maybeSupportedLocale.toLowerCase()
+  return PLATFORM_SUPPORTED_LANGUAGES.map((lang) => getLocale(lang)).find(
+    (locale) =>
+      locale.toLowerCase() === lowerMaybeSupportedLocale || locale.split('-')[0] === lowerMaybeSupportedLocale,
+  )
+}
+
+/**
+ * Returns the supported locale read from the user agent (navigator)
+ */
+export function navigatorLocale(): Locale | undefined {
+  if (!navigator.language) {
+    return undefined
+  }
+
+  const [language, region] = navigator.language.split('-')
+
+  if (region) {
+    return parseLocale(`${language}-${region.toUpperCase()}`) ?? parseLocale(language)
+  }
+
+  return parseLocale(language)
+}

package/src/features/language/utils.ts

@@ -0,0 +1,8 @@
+import { Language, mapLocaleToLanguage } from '@luxexchange/lx/src/features/language/constants'
+import { navigatorLocale } from '@luxexchange/lx/src/features/language/navigatorLocale'
+
+// Determines the current language based on the user's locale settings, falling back to English if no mapping exists.
+export function getCurrentLanguageFromNavigator(): Language {
+  const locale = navigatorLocale()
+  return locale ? mapLocaleToLanguage[locale] : Language.English
+}

package/src/features/nfts/constants.ts

@@ -0,0 +1,5 @@
+export const HIDDEN_NFTS_ROW = 'HIDDEN_NFTS_ROW'
+export const EMPTY_NFT_ITEM = 'EMPTY_NFT_ITEM'
+
+export const MAX_NFT_IMAGE_SIZE = 375
+export const ESTIMATED_NFT_LIST_ITEM_SIZE = 251 // heuristic provided by FlashList

package/src/features/nfts/hooks/useGroupNftsByVisibility.ts

@@ -0,0 +1,58 @@
+import { useMemo } from 'react'
+import { useSelector } from 'react-redux'
+import { NFTItem } from '@luxexchange/lx/src/features/nfts/types'
+import { buildNftsArray, getIsNftHidden } from '@luxexchange/lx/src/features/nfts/utils'
+import { selectNftsVisibility } from '@luxexchange/lx/src/features/visibility/selectors'
+
+// Apply to NFTs fetched from API hidden filter, which is stored in Redux
+export function useGroupNftsByVisibility({
+  nftDataItems,
+  showHidden,
+  allPagesFetched,
+}: {
+  nftDataItems: Array<NFTItem> | undefined
+  showHidden: boolean
+  allPagesFetched: boolean
+}): {
+  nfts: Array<NFTItem | string>
+  numHidden: number
+  numShown: number
+  hiddenNfts: NFTItem[]
+  shownNfts: NFTItem[]
+} {
+  const nftVisibility = useSelector(selectNftsVisibility)
+  return useMemo(() => {
+    const { shown, hidden } = (nftDataItems ?? []).reduce<{
+      shown: NFTItem[]
+      hidden: NFTItem[]
+    }>(
+      (acc, item) => {
+        const isNftHidden = getIsNftHidden({
+          contractAddress: item.contractAddress,
+          tokenId: item.tokenId,
+          isSpam: item.isSpam,
+          nftVisibility,
+        })
+        if (isNftHidden) {
+          acc.hidden.push(item)
+        } else {
+          acc.shown.push(item)
+        }
+        return acc
+      },
+      { shown: [], hidden: [] },
+    )
+    return {
+      nfts: buildNftsArray({
+        shownNfts: shown,
+        hiddenNfts: hidden,
+        showHidden,
+        allPagesFetched,
+      }),
+      numHidden: hidden.length,
+      numShown: shown.length,
+      hiddenNfts: hidden,
+      shownNfts: shown,
+    }
+  }, [nftDataItems, nftVisibility, showHidden, allPagesFetched])
+}

package/src/features/nfts/hooks/useNFT.ts

@@ -0,0 +1,31 @@
+import { GqlResult, GraphQLApi } from '@luxfi/api'
+import { useMemo } from 'react'
+import { PollingInterval } from '@luxexchange/lx/src/constants/misc'
+import { GQLNftAsset } from '@luxexchange/lx/src/features/nfts/types'
+
+export function useNFT({
+  owner = '',
+  address,
+  tokenId,
+}: {
+  owner?: Address
+  address?: Address
+  tokenId?: string
+}): GqlResult<GQLNftAsset> {
+  // TODO: [MOB-227] do a direct cache lookup in Apollo using id instead of re-querying
+  const { data, loading, refetch } = GraphQLApi.useNftsQuery({
+    variables: { ownerAddress: owner },
+    pollInterval: PollingInterval.Slow,
+    skip: !owner,
+  })
+
+  const nft = useMemo(
+    () =>
+      data?.portfolios?.[0]?.nftBalances?.find(
+        (balance) => balance?.ownedAsset?.nftContract?.address === address && balance?.ownedAsset?.tokenId === tokenId,
+      )?.ownedAsset ?? undefined,
+    [data, address, tokenId],
+  )
+
+  return { data: nft, loading, refetch }
+}

package/src/features/nfts/hooks/useNavigateToNftExplorerLink.ts

@@ -0,0 +1,7 @@
+import { NavigateToNftItemArgs } from '@luxexchange/lx/src/contexts/LuxContext'
+import { getNftExplorerLink, openUri } from '@luxexchange/lx/src/utils/linking'
+import { useEvent } from '@luxfi/utilities/src/react/hooks'
+
+export function useNavigateToNftExplorerLink(): (args: NavigateToNftItemArgs) => void {
+  return useEvent((args: NavigateToNftItemArgs): Promise<void> => openUri({ uri: getNftExplorerLink(args) }))
+}