feat: add in floor price filter on click

blockchain · May 1, 2022 · a60353f · a60353f
1 parent 530bc52
commit a60353f
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Collection/Collection.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Collection/Collection.tsx
@@ -129,7 +129,12 @@ const NftsCollection: React.FC<Props> = ({ formActions, formValues, ...rest }) =
               ) : null}
             </LinksContainer>
           </CollectionInfo>
-          <Stats total_supply={collection.total_supply} stats={collection.stats} />
+          <Stats
+            formActions={formActions}
+            formValues={formValues}
+            total_supply={collection.total_supply}
+            stats={collection.stats}
+          />
         </NftBannerWrapper>
       </CollectionHeader>
       <GridWrapper>

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Collection/Stats/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Collection/Stats/index.tsx
@@ -3,11 +3,13 @@ import { FormattedMessage } from 'react-intl'
 import * as numeral from 'numeral'
 
 import { Text } from 'blockchain-info-components'
+import { actions } from 'data'
 import { CollectionsQuery } from 'generated/graphql.types'
 
 import { Stat, StatsWrapper } from '../../components'
+import { NftFilterFormValuesType } from '../../NftFilter'
 
-const Stats: React.FC<Props> = ({ stats, total_supply }) => {
+const Stats: React.FC<Props> = ({ formActions, formValues, stats, total_supply }) => {
   return (
     <div style={{ marginTop: '24px' }}>
       <StatsWrapper>
@@ -19,7 +21,7 @@ const Stats: React.FC<Props> = ({ stats, total_supply }) => {
             {numeral(total_supply).format('0,0')}
           </Text>
         </Stat>
-        <Stat>
+        <Stat onClick={() => formActions.change('nftFilter', 'forSale', true)}>
           <Text size='16px' weight={500} color='grey600'>
             <FormattedMessage id='copy.floor_price' defaultMessage='Floor Price' />
           </Text>
@@ -49,6 +51,8 @@ const Stats: React.FC<Props> = ({ stats, total_supply }) => {
 }
 
 type Props = {
+  formActions: typeof actions.form
+  formValues: NftFilterFormValuesType
   stats: CollectionsQuery['collections'][0]['stats']
   total_supply: CollectionsQuery['collections'][0]['total_supply']
 }

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/components/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/components/index.tsx
@@ -218,6 +218,7 @@ export const Stat = styled.div`
   justify-content: center;
   align-items: center;
   border-radius: 8px;
+  cursor: pointer;
   gap: 16px;
   background: rgba(255, 255, 255, 0.08);
   ${media.tabletL`