[C-1319] Fix native profile collectibles

packages/common/src/services/opensea-client/OpenSeaClient.ts

@@ -17,18 +17,20 @@ import {
   isNotFromNullAddress
 } from './ethCollectibleHelpers'
 
-const OPENSEA_API_URL = process.env.REACT_APP_OPENSEA_API_URL
 const OPENSEA_NUM_ASSETS_LIMIT = 1000
 
-class OpenSeaClient {
-  readonly url = OPENSEA_API_URL
+export class OpenSeaClient {
+  readonly url: string
+  constructor(url: string) {
+    this.url = url
+  }
 
   async getTransferredCollectiblesForWallet(
     wallet: string,
     limit = OPENSEA_NUM_ASSETS_LIMIT
   ): Promise<{ asset_events: OpenSeaEvent[] }> {
     return fetch(
-      `${client.url}/events?account_address=${wallet}&limit=${limit}&event_type=transfer&only_opensea=false`
+      `${this.url}/events?account_address=${wallet}&limit=${limit}&event_type=transfer&only_opensea=false`
     ).then((r) => r.json())
   }
 
@@ -38,7 +40,7 @@ class OpenSeaClient {
   ): Promise<OpenSeaEventExtended[]> {
     return Promise.allSettled(
       wallets.map((wallet) =>
-        client.getTransferredCollectiblesForWallet(wallet, limit)
+        this.getTransferredCollectiblesForWallet(wallet, limit)
       )
     ).then((results) =>
       results
@@ -65,7 +67,7 @@ class OpenSeaClient {
     limit = OPENSEA_NUM_ASSETS_LIMIT
   ): Promise<{ asset_events: OpenSeaEvent[] }> {
     return fetch(
-      `${client.url}/events?account_address=${wallet}&limit=${limit}&event_type=created&only_opensea=false`
+      `${this.url}/events?account_address=${wallet}&limit=${limit}&event_type=created&only_opensea=false`
     ).then((r) => r.json())
   }
 
@@ -75,7 +77,7 @@ class OpenSeaClient {
   ): Promise<OpenSeaEventExtended[]> {
     return Promise.allSettled(
       wallets.map((wallet) =>
-        client.getCreatedCollectiblesForWallet(wallet, limit)
+        this.getCreatedCollectiblesForWallet(wallet, limit)
       )
     ).then((results) =>
       results
@@ -101,7 +103,7 @@ class OpenSeaClient {
     wallet: string,
     limit = OPENSEA_NUM_ASSETS_LIMIT
   ): Promise<{ assets: OpenSeaAsset[] }> {
-    return fetch(`${client.url}/assets?owner=${wallet}&limit=${limit}`).then(
+    return fetch(`${this.url}/assets?owner=${wallet}&limit=${limit}`).then(
       (r) => r.json()
     )
   }
@@ -111,7 +113,7 @@ class OpenSeaClient {
     limit = OPENSEA_NUM_ASSETS_LIMIT
   ): Promise<OpenSeaAssetExtended[]> {
     return Promise.allSettled(
-      wallets.map((wallet) => client.getCollectiblesForWallet(wallet, limit))
+      wallets.map((wallet) => this.getCollectiblesForWallet(wallet, limit))
     ).then((results) =>
       results
         .map((result, i) => ({ result, wallet: wallets[i] }))
@@ -130,9 +132,9 @@ class OpenSeaClient {
 
   async getAllCollectibles(wallets: string[]): Promise<CollectibleState> {
     return Promise.all([
-      client.getCollectiblesForMultipleWallets(wallets),
-      client.getCreatedCollectiblesForMultipleWallets(wallets),
-      client.getTransferredCollectiblesForMultipleWallets(wallets)
+      this.getCollectiblesForMultipleWallets(wallets),
+      this.getCreatedCollectiblesForMultipleWallets(wallets),
+      this.getTransferredCollectiblesForMultipleWallets(wallets)
     ]).then(async ([assets, creationEvents, transferEvents]) => {
       const filteredAssets = assets.filter(
         (asset) => asset && isAssetValid(asset)
@@ -253,7 +255,3 @@ class OpenSeaClient {
 ;(function () {
   if (!Promise.allSettled) Promise.allSettled = allPromisesSettled
 })()
-
-const client = new OpenSeaClient()
-
-export default client

packages/common/src/services/opensea-client/index.ts

@@ -1,2 +1,2 @@
 export * from './ethCollectibleHelpers'
-export { default as OpenSeaClient } from './OpenSeaClient'
+export * from './OpenSeaClient'

packages/common/src/store/storeContext.ts

@@ -7,6 +7,7 @@ import { Env } from '../services/env'
 import { Explore } from '../services/explore'
 import { FingerprintClient } from '../services/fingerprint'
 import { LocalStorage } from '../services/local-storage'
+import { OpenSeaClient } from '../services/opensea-client'
 import { FeatureFlags, RemoteConfigInstance } from '../services/remote-config'
 import { SolanaClient } from '../services/solana-client'
 import { TrackDownload } from '../services/track-download'
@@ -54,4 +55,5 @@ export type CommonStoreContext = {
   instagramAppId?: string
   instagramRedirectUrl?: string
   share: (url: string, message?: string) => Promise<void> | void
+  openSeaClient: OpenSeaClient
 }

packages/mobile/ios/Podfile.lock

@@ -527,7 +527,7 @@ PODS:
     - React-Core
     - RNFBApp
   - RNFingerprintjsPro (1.0.4):
-    - FingerprintPro (~> 2.1.3)
+    - FingerprintPro (~> 2.1.2)
     - React-Core
   - RNFS (2.18.0):
     - React
@@ -921,7 +921,7 @@ SPEC CHECKSUMS:
   RNFBAnalytics: 74cd9c60531ed33e5347b2dccafa172ae1a851a4
   RNFBApp: 5bae3002117e55f3c9aa0fb38175dd16c8046c90
   RNFBCrashlytics: 33615211c6c6c4039ae71849091f6ac38ab65aba
-  RNFingerprintjsPro: 991a0049fba1c1778f8940a6360c23f6b3061075
+  RNFingerprintjsPro: 317426b3f0479c4737960f7aa90b0f8a02ac07f9
   RNFS: 3ab21fa6c56d65566d1fb26c2228e2b6132e5e32
   RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
   RNPermissions: 3e5bb8afd93c787681bbacbf54d586a6272ecc92

packages/mobile/src/screens/profile-screen/CollectiblesCard.tsx

@@ -114,7 +114,7 @@ export const CollectiblesCard = (props: CollectiblesCardProps) => {
               </View>
             ) : null}
             <View style={styles.chain}>
-              {chain !== 'eth' ? (
+              {chain === 'eth' ? (
                 <LogoEth height={18} />
               ) : (
                 <LogoSol height={16} />

packages/mobile/src/store/storeContext.ts

@@ -1,5 +1,5 @@
 import type { CommonStoreContext } from '@audius/common'
-import { SolanaClient } from '@audius/common'
+import { OpenSeaClient, SolanaClient } from '@audius/common'
 import AsyncStorage from '@react-native-async-storage/async-storage'
 import * as Sentry from '@sentry/react-native'
 import Config from 'react-native-config'
@@ -47,5 +47,6 @@ export const storeContext: CommonStoreContext = {
   trackDownload,
   instagramAppId: Config.INSTAGRAM_APP_ID,
   instagramRedirectUrl: Config.INSTAGRAM_REDIRECT_URL,
-  share: (url: string, message?: string) => share({ url, message })
+  share: (url: string, message?: string) => share({ url, message }),
+  openSeaClient: new OpenSeaClient(Config.OPENSEA_API_URL)
 }

packages/web/src/common/store/profile/sagas.js

@@ -17,8 +17,7 @@ import {
   dataURLtoFile,
   MAX_ARTIST_HOVER_TOP_SUPPORTING,
   MAX_PROFILE_SUPPORTING_TILES,
-  MAX_PROFILE_TOP_SUPPORTERS,
-  OpenSeaClient
+  MAX_PROFILE_TOP_SUPPORTERS
 } from '@audius/common'
 import { merge } from 'lodash'
 import {
@@ -98,7 +97,8 @@ function* fetchProfileCustomizedCollectibles(user) {
 }
 
 export function* fetchOpenSeaAssetsForWallets(wallets) {
-  return yield call(OpenSeaClient.getAllCollectibles, wallets)
+  const openSeaClient = yield getContext('openSeaClient')
+  return yield call([openSeaClient, openSeaClient.getAllCollectibles], wallets)
 }
 
 export function* fetchOpenSeaAssets(user) {

packages/web/src/store/storeContext.ts

@@ -1,4 +1,4 @@
-import { SolanaClient, CommonStoreContext } from '@audius/common'
+import { SolanaClient, CommonStoreContext, OpenSeaClient } from '@audius/common'
 import * as Sentry from '@sentry/browser'
 
 import * as analytics from 'services/analytics'
@@ -47,5 +47,8 @@ export const storeContext: CommonStoreContext = {
   trackDownload,
   instagramAppId: process.env.REACT_APP_INSTAGRAM_APP_ID,
   instagramRedirectUrl: process.env.REACT_APP_INSTAGRAM_REDIRECT_URL,
-  share
+  share,
+  openSeaClient: new OpenSeaClient(
+    process.env.REACT_APP_OPENSEA_API_URL as string
+  )
 }