feat(nfts): style search

blockchain · Apr 28, 2022 · 143f58d · 143f58d
1 parent 7bbd48a
commit 143f58d
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 5 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Nfts/NftsHeader/NftsSearch/NftsSearch.tsx b/packages/blockchain-wallet-v4-frontend/src/layouts/Nfts/NftsHeader/NftsSearch/NftsSearch.tsx
@@ -1,23 +1,30 @@
 import React, { useEffect, useState } from 'react'
 import { connect, ConnectedProps } from 'react-redux'
+import { routerActions } from 'connected-react-router'
 import { bindActionCreators } from 'redux'
 import { Field } from 'redux-form'
+import styled from 'styled-components'
 
 import { Remote } from '@core'
 import { ExplorerGatewaySearchType } from '@core/network/api/nfts/types'
+import { Image, Text } from 'blockchain-info-components'
+import { Flex } from 'components/Flex'
 import SelectBox from 'components/Form/SelectBox'
 import { actions, selectors } from 'data'
 import { RootState } from 'data/rootReducer'
 import { debounce } from 'utils/helpers'
 
 const Wrapper = styled.div`
+  width: 100%;
   .bc__group-heading {
+    margin: 4px 0px 8px 0px;
+    padding-left: 0;
     display: block;
     text-transform: capitalize;
   }
 `
 
-const NftsSearch: React.FC<Props> = ({ formValues, nftActions, nftSearch }) => {
+const NftsSearch: React.FC<Props> = ({ formValues, nftActions, nftSearch, routerActions }) => {
   const [input, setInput] = useState('')
 
   const handleInputChange = (e: any) => {
@@ -30,13 +37,41 @@ const NftsSearch: React.FC<Props> = ({ formValues, nftActions, nftSearch }) => {
     }
   }, [input, nftActions])
 
+  const handleSelect = (
+    item:
+      | ExplorerGatewaySearchType['accounts'][0]
+      | ExplorerGatewaySearchType['assets'][0]
+      | ExplorerGatewaySearchType['collections'][0]
+      | ExplorerGatewaySearchType['contracts'][0]
+  ) => {
+    if ('profile_img_url' in item) {
+      routerActions.push(`/nfts/address/${item.address}`)
+    } else if ('contract_address' in item) {
+      routerActions.push(`/nfts/asset/${item.contract_address}/${item.token_id}`)
+    } else if ('num_owners' in item) {
+      routerActions.push(`/nfts/collection/${item.slug}`)
+    } else if ('asset_contract_type' in item) {
+      routerActions.push(`/nfts/collection/${item.address}`)
+    }
+  }
+
   const elements = Object.keys(nftSearch.getOrElse({} as ExplorerGatewaySearchType))
     .map((key) => {
       return {
         label: key,
         options: nftSearch
           .getOrElse({} as ExplorerGatewaySearchType)
-          [key].map((item) => ({ label: item.name, value: item }))
+          [key].map((item) => ({
+            label: (
+              <Flex alignItems='center' gap={8}>
+                <img alt='url' height='18px' src={item.image_url || item.profile_img_url} />
+                <Text weight={600} size='14px'>
+                  {item.name}
+                </Text>
+              </Flex>
+            ),
+            value: item
+          }))
           .slice(0, 5)
       }
     })
@@ -46,13 +81,15 @@ const NftsSearch: React.FC<Props> = ({ formValues, nftActions, nftSearch }) => {
     <Wrapper>
       <Field
         component={SelectBox}
+        // @ts-ignore
         elements={elements}
         grouped
         hideIndicator
         name='search'
         label='Collections or items'
         cursor='initial'
         filterOption={() => true}
+        onChange={(e) => handleSelect(e)}
         onInputChange={debounce((e) => handleInputChange(e), 500)}
         isLoading={Remote.Loading.is(nftSearch)}
         placeholder='Collections or items'
@@ -67,7 +104,8 @@ const mapStateToProps = (state: RootState) => ({
 })
 
 const mapDispatchToProps = (dispatch) => ({
-  nftActions: bindActionCreators(actions.components.nfts, dispatch)
+  nftActions: bindActionCreators(actions.components.nfts, dispatch),
+  routerActions: bindActionCreators(actions.router, dispatch)
 })
 
 const connector = connect(mapStateToProps, mapDispatchToProps)

diff --git a/packages/blockchain-wallet-v4/src/network/api/nfts/types.ts b/packages/blockchain-wallet-v4/src/network/api/nfts/types.ts
@@ -910,7 +910,7 @@ export type ExplorerGatewaySearchType = {
     date_ingested: string
     profile_img_url: string
     username: string | null
-  }
+  }[]
   assets: {
     collection_slug: string
     contract_address: string
@@ -920,12 +920,14 @@ export type ExplorerGatewaySearchType = {
     image_thumbnail_url: string
     image_url: string
     name: string
+    token_id: string
   }[]
   collections: {
     image_url: string | null
     name: string
     num_owners: null
     safelist_request_status: string
+    slug: string
   }[]
   contracts: {
     address: string
@@ -937,5 +939,5 @@ export type ExplorerGatewaySearchType = {
     schema_name: string
     symbol: string
     total_supply: string
-  }
+  }[]
 }