feat(search): preliminary nft search stuff

packages/blockchain-info-components/src/Form/SelectInput/template.js

@@ -194,8 +194,10 @@ const SelectInput = (props) => {
     items,
     menuIsOpen,
     menuPlacement,
+    noOptionsMessage,
     onBlur,
     onFocus,
+    onInputChange,
     onKeyDown,
     openMenuOnClick = true,
     openMenuOnFocus,
@@ -223,6 +225,7 @@ const SelectInput = (props) => {
           Option,
           ValueContainer
         }}
+        noOptionsMessage={noOptionsMessage}
         focusedBorderColor={selectFocusBorderColor(errorState)}
         filterOption={filterOption}
         height={height}
@@ -237,6 +240,7 @@ const SelectInput = (props) => {
         onFocus={onFocus}
         onKeyDown={onKeyDown}
         openMenuOnClick={openMenuOnClick}
+        onInputChange={onInputChange}
         openMenuOnFocus={openMenuOnFocus}
         options={options}
         placeholder={defaultDisplay}

packages/blockchain-wallet-v4-frontend/src/data/components/nfts/sagaRegister.ts

@@ -27,7 +27,7 @@ export default ({ api }) => {
     yield takeLatest(actions.fetchOpenseaStatus, nftsSagas.fetchOpenseaStatus)
     yield takeLatest(actions.nftOrderFlowClose, nftsSagas.nftOrderFlowClose)
     yield takeLatest(actions.nftOrderFlowOpen, nftsSagas.nftOrderFlowOpen)
-    yield takeLatest(actions.searchNftAssetContract, nftsSagas.searchNftAssetContract)
+    yield takeLatest(actions.nftSearch, nftsSagas.nftSearch)
     yield takeLatest(routerActionTypes.LOCATION_CHANGE, nftsSagas.handleRouterChange)
     yield takeEvery(actionTypes.CHANGE, nftsSagas.formChanged)
   }

packages/blockchain-wallet-v4-frontend/src/data/components/nfts/sagas.ts

@@ -544,28 +544,6 @@ export default ({ api }: { api: APIType }) => {
     yield put(actions.modals.closeAllModals())
   }
 
-  const searchNftAssetContract = function* (action: ReturnType<typeof A.searchNftAssetContract>) {
-    try {
-      if (action.payload.search) {
-        const res: ReturnType<typeof api.searchNftCollectionInfo> = yield call(
-          api.searchNftCollectionInfo,
-          action.payload.search
-        )
-        yield put(A.setCollectionSearch(res))
-      } else if (action.payload.asset_contract_address) {
-        if (ethers.utils.isAddress(action.payload.asset_contract_address)) {
-          const res = yield call(api.getAssetContract, action.payload.asset_contract_address)
-          yield put(actions.form.change('nftMarketplace', 'collection', res.collection.slug))
-        }
-      }
-    } catch (e) {
-      const error = errorHandler(e)
-      yield put(actions.form.stopSubmit('nftSearch'))
-      yield put(actions.alerts.displayError('Sorry! We had an issue searching that collection.'))
-      actions.form.setSubmitFailed('nftSearch', error)
-    }
-  }
-
   // watch router change so we know if we need to reset nft trait filter form
   const handleRouterChange = function* (action) {
     if (action.payload.location.pathname.includes('/nfts/')) {
@@ -583,6 +561,17 @@ export default ({ api }: { api: APIType }) => {
     }
   }
 
+  const nftSearch = function* (action: ReturnType<typeof A.nftSearch>) {
+    try {
+      yield put(A.nftSearchLoading())
+      const search = yield call(api.searchNfts, action.payload.search)
+      yield put(A.nftSearchSuccess(search))
+    } catch (e) {
+      const error = errorHandler(e)
+      yield put(A.nftSearchFailure(error))
+    }
+  }
+
   return {
     acceptOffer,
     cancelListing,
@@ -603,6 +592,6 @@ export default ({ api }: { api: APIType }) => {
     handleRouterChange,
     nftOrderFlowClose,
     nftOrderFlowOpen,
-    searchNftAssetContract
+    nftSearch
   }
 }

packages/blockchain-wallet-v4-frontend/src/data/components/nfts/selectors.ts

@@ -3,7 +3,7 @@ import { RootState } from 'data/rootReducer'
 export const getActiveSlug = (state: RootState) => state.components.nfts.activeSlug
 export const getNftCollection = (state: RootState) => state.components.nfts.collection
 export const getNftCollections = (state: RootState) => state.components.nfts.collections
-export const getCollectionSearch = (state: RootState) => state.components.nfts.collectionSearch
+export const getNftSearch = (state: RootState) => state.components.nfts.search
 export const getOffersMade = (state: RootState) => state.components.nfts.offersMade
 export const getOpenSeaAsset = (state: RootState) => state.components.nfts.openSeaAsset
 export const getOpenSeaOrders = (state: RootState) => state.components.nfts.openSeaOrders

packages/blockchain-wallet-v4-frontend/src/data/components/nfts/slice.ts

@@ -34,7 +34,6 @@ const initialState: NftsStateType = {
     page: 0
   },
   collection: Remote.NotAsked,
-  collectionSearch: [],
   collections: Remote.NotAsked,
   offersMade: {
     atBound: false,
@@ -62,7 +61,8 @@ const initialState: NftsStateType = {
     walletUserIsAssetOwnerHack: false,
 
     wrapEthFees: Remote.NotAsked
-  }
+  },
+  search: Remote.NotAsked
 }
 
 const nftsSlice = createSlice({
@@ -327,6 +327,16 @@ const nftsSlice = createSlice({
         state.orderFlow.orderToMatch = action.payload.order
       }
     },
+    nftSearch: (state, action: PayloadAction<{ search: string }>) => {},
+    nftSearchFailure: (state, action: PayloadAction<string>) => {
+      state.search = Remote.Failure(action.payload)
+    },
+    nftSearchLoading: (state) => {
+      state.search = Remote.Loading
+    },
+    nftSearchSuccess: (state, action) => {
+      state.search = Remote.Success(action.payload)
+    },
     resetNftAssets: (state) => {
       state.assets.atBound = false
       state.assets.page = 0
@@ -343,10 +353,6 @@ const nftsSlice = createSlice({
       state.offersMade.isLoading = true
       state.offersMade.list = []
     },
-    searchNftAssetContract: (
-      state,
-      action: PayloadAction<{ asset_contract_address?: string; search?: string }>
-    ) => {},
     setActiveSlug: (state, action: PayloadAction<{ slug: string }>) => {
       state.activeSlug = action.payload.slug
     },
@@ -357,9 +363,6 @@ const nftsSlice = createSlice({
       state.assets.collection = action.payload.collection || 'all'
       state.assets.page = action.payload.page || 0
     },
-    setCollectionSearch: (state, action: PayloadAction<ExplorerGatewayNftCollectionType[]>) => {
-      state.collectionSearch = action.payload
-    },
     setListingToCancel: (state, action: PayloadAction<{ order: RawOrder }>) => {
       state.orderFlow.listingToCancel = action.payload.order
     },

packages/blockchain-wallet-v4-frontend/src/data/components/nfts/types.ts

@@ -43,7 +43,6 @@ export type NftsStateType = {
     page: number
   }
   collection: RemoteDataType<string, NftCollection>
-  collectionSearch: ExplorerGatewayNftCollectionType[]
   collections: RemoteDataType<string, ExplorerGatewayNftCollectionType[]>
   offersMade: {
     atBound?: boolean
@@ -83,4 +82,5 @@ export type NftsStateType = {
     walletUserIsAssetOwnerHack: boolean
     wrapEthFees: RemoteDataType<string, Await<ReturnType<typeof calculateGasFees>>>
   }
+  search: RemoteDataType<string, any>
 }

packages/blockchain-wallet-v4-frontend/src/layouts/Explore/Header/NftSearch/NftSearch.tsx

@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from 'react'
+import { connect, ConnectedProps } from 'react-redux'
+import { bindActionCreators } from 'redux'
+import { Field } from 'redux-form'
+
+import { SpinningLoader } from 'blockchain-info-components'
+import { SelectBox } from 'components/Form'
+import { actions, selectors } from 'data'
+import { RootState } from 'data/rootReducer'
+import { debounce } from 'utils/helpers'
+
+const NftSearch: React.FC<Props> = ({ formValues, nftActions, nftSearch }) => {
+  const [input, setInput] = useState('')
+
+  const handleInputChange = (e: any) => {
+    setInput(e)
+  }
+
+  useEffect(() => {
+    if (input) {
+      nftActions.nftSearch({ search: input })
+    }
+  }, [input])
+
+  return (
+    <Field
+      component={SelectBox}
+      elements={[
+        {
+          group: '',
+          items: []
+        }
+      ]}
+      hideIndicator
+      name='search'
+      onInputChange={debounce((e) => handleInputChange(e), 500)}
+      label='Collections or items'
+      cursor='initial'
+      noOptionsMessage={() => {
+        return nftSearch.cata({
+          Failure: () => null,
+          Loading: () => <SpinningLoader width='14px' height='14px' borderWidth='3px' />,
+          NotAsked: () => null,
+          Success: () => null
+        })
+      }}
+      placeholder='Collections or items'
+    />
+  )
+}
+
+const mapStateToProps = (state: RootState) => ({
+  formValues: selectors.form.getFormValues('nftSearch')(state),
+  nftSearch: selectors.components.nfts.getNftSearch(state)
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  nftActions: bindActionCreators(actions.components.nfts, dispatch)
+})
+
+const connector = connect(mapStateToProps, mapDispatchToProps)
+
+type Props = ConnectedProps<typeof connector>
+
+export default connector(NftSearch)

packages/blockchain-wallet-v4-frontend/src/layouts/Explore/Header/index.tsx

@@ -14,7 +14,7 @@ import { Logo, NavContainer, NavLeft, NavRight } from 'components/NavbarV2/Navba
 import { ModalName } from 'data/types'
 
 import { Props as OwnProps } from '..'
-import NftSearch from '../NftSearch'
+import NftSearch from './NftSearch'
 
 export const FIXED_HEADER_HEIGHT = 56
 
@@ -49,6 +49,7 @@ const NavLinkButton = styled(NavLink)`
 
 const ExploreHeader: React.FC<Props> = ({
   ethAddress,
+  formValues,
   isAuthenticated,
   modalActions,
   pathname,

packages/blockchain-wallet-v4-frontend/src/layouts/Explore/index.tsx

@@ -32,6 +32,7 @@ class ExploreLayoutContainer extends React.PureComponent<Props> {
 
 const mapStateToProps = (state) => ({
   ethAddress: selectors.core.kvStore.eth.getDefaultAddress(state).getOrElse(''),
+  formValues: selectors.form.getFormValues('nftSearch')(state) as { search: string },
   isAuthenticated: selectors.auth.isAuthenticated(state),
   pathname: selectors.router.getPathname(state)
 })

packages/blockchain-wallet-v4/src/network/api/nfts/index.ts

@@ -47,10 +47,7 @@ export default ({ apiUrl, get, openSeaApi, post }) => {
     })
   }
 
-  // TODO
-  // const getOffersReceived = () => {}
-
-  const searchNftCollectionInfo = (slug: string): ExplorerGatewayNftCollectionType[] => {
+  const searchNfts = (slug: string): ExplorerGatewayNftCollectionType[] => {
     return get({
       endPoint: `/collection/search?query=${slug}`,
       ignoreQueryParams: true,
@@ -104,6 +101,6 @@ export default ({ apiUrl, get, openSeaApi, post }) => {
     getOpenSeaOrders,
     getOpenSeaStatus,
     postNftOrder,
-    searchNftCollectionInfo
+    searchNfts
   }
 }