Merge pull request #670 from gnosis/feature/#669-display-nft-disconnected

(Fix) Collectibles not displayed while disconnected

src/logic/collectibles/sources/OpenSea.js

@@ -1,6 +1,7 @@
 // @flow
 import { RateLimit } from 'async-sema'
 
+import { ETHEREUM_NETWORK } from '~/logic/wallets/getWeb3'
 import type {
   CollectibleMetadataSource,
   CollectiblesInfo,
@@ -15,11 +16,9 @@ import { OPENSEA_API_KEY } from '~/utils/constants'
 class OpenSea implements CollectibleMetadataSource {
   _rateLimit = async () => {}
 
-  _endpointsUrls: { [key: number]: string } = {
-    // $FlowFixMe
-    1: 'https://api.opensea.io/api/v1',
-    // $FlowFixMe
-    4: 'https://rinkeby-api.opensea.io/api/v1',
+  _endpointsUrls: { [key: string]: string } = {
+    [ETHEREUM_NETWORK.MAINNET]: 'https://api.opensea.io/api/v1',
+    [ETHEREUM_NETWORK.RINKEBY]: 'https://rinkeby-api.opensea.io/api/v1',
   }
 
   _fetch = async (url: string) => {
@@ -91,12 +90,12 @@ class OpenSea implements CollectibleMetadataSource {
    * Fetches from OpenSea the list of collectibles, grouped by category,
    * for the provided Safe Address in the specified Network
    * @param {string} safeAddress
-   * @param {number} networkId
+   * @param {string} network
    * @returns {Promise<{ nftAssets: Map<string, NFTAsset>, nftTokens: Array<NFTToken> }>}
    */
-  async fetchAllUserCollectiblesByCategoryAsync(safeAddress: string, networkId: number) {
+  async fetchAllUserCollectiblesByCategoryAsync(safeAddress: string, network: string) {
     // eslint-disable-next-line no-underscore-dangle
-    const metadataSourceUrl = this._endpointsUrls[networkId]
+    const metadataSourceUrl = this._endpointsUrls[network]
     const url = `${metadataSourceUrl}/assets/?owner=${safeAddress}`
     // eslint-disable-next-line no-underscore-dangle
     const assetsResponse = await this._fetch(url)

src/logic/collectibles/store/actions/fetchCollectibles.js

@@ -1,16 +1,15 @@
 // @flow
 import type { Dispatch } from 'redux'
 
+import { getNetwork } from '~/config'
 import { getConfiguredSource } from '~/logic/collectibles/sources'
 import { addNftAssets, addNftTokens } from '~/logic/collectibles/store/actions/addCollectibles'
-import { PROVIDER_REDUCER_ID } from '~/logic/wallets/store/reducer/provider'
 import { safeParamAddressFromStateSelector } from '~/routes/safe/store/selectors'
 import type { GlobalState } from '~/store'
 
 const fetchCollectibles = () => async (dispatch: Dispatch<GlobalState>, getState) => {
-  const state = getState()
-  const { network } = state[PROVIDER_REDUCER_ID]
-  const safeAddress = safeParamAddressFromStateSelector(state)
+  const network = getNetwork()
+  const safeAddress = safeParamAddressFromStateSelector(getState()) || ''
   const source = getConfiguredSource()
   const collectibles = await source.fetchAllUserCollectiblesByCategoryAsync(safeAddress, network)
 

src/routes/safe/components/Balances/Collectibles/types.js

@@ -205,5 +205,5 @@ export type CollectiblesInfo = {
 
 export interface CollectibleMetadataSource {
   constructor(options: { rps: number }): void;
-  fetchAllUserCollectiblesByCategoryAsync(safeAddress: string, networkId: number): Promise<CollectiblesInfo>;
+  fetchAllUserCollectiblesByCategoryAsync(safeAddress: string, network: string): Promise<CollectiblesInfo>;
 }