-
Notifications
You must be signed in to change notification settings - Fork 504
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(firehose): initial work for firehose
- Loading branch information
plondon
committed
Apr 28, 2022
1 parent
859f74e
commit 5761fe2
Showing
17 changed files
with
2,920 additions
and
34 deletions.
There are no files selected for viewing
2,639 changes: 2,639 additions & 0 deletions
2,639
packages/blockchain-wallet-v4-frontend/src/generated/graphql.ts
Large diffs are not rendered by default.
Oops, something went wrong.
20 changes: 20 additions & 0 deletions
20
packages/blockchain-wallet-v4-frontend/src/graphql/fragments/AssetItemResultFragment.graphql
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| fragment AssetItemResultFragment on Asset { | ||
| name | ||
| token_id | ||
| contract { | ||
| address | ||
| } | ||
| image_url | ||
| permalink | ||
| owners { | ||
| address | ||
| } | ||
| listings { | ||
| payment_token_symbol | ||
| starting_price | ||
| } | ||
| collection { | ||
| name | ||
| image_url | ||
| } | ||
| } |
19 changes: 1 addition & 18 deletions
19
packages/blockchain-wallet-v4-frontend/src/graphql/queries/NftAssets.graphql
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,22 +1,5 @@ | ||
| query Assets($filter: [AssetFilter], $traitFilter: [TraitFilter], $sort: AssetSort, $forSale: Boolean, $limit: Int, $offset: Int) { | ||
| assets(filter: $filter, traitFilter: $traitFilter, sort: $sort, forSale: $forSale, limit: $limit, offset: $offset) { | ||
| name | ||
| token_id | ||
| contract { | ||
| address | ||
| } | ||
| image_url | ||
| permalink | ||
| owners { | ||
| address | ||
| } | ||
| listings { | ||
| payment_token_symbol | ||
| starting_price | ||
| } | ||
| collection { | ||
| name | ||
| image_url | ||
| } | ||
| ...AssetItemResultFragment | ||
| } | ||
| } |
23 changes: 23 additions & 0 deletions
23
packages/blockchain-wallet-v4-frontend/src/graphql/queries/NftFirehose.graphql
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| query Firehose($filter: [EventFilter], $sort: EventSort, $limit:Int, $offset: Int) { | ||
| events(filter: $filter, sort: $sort, limit: $limit, offset: $offset) { | ||
| event_type | ||
| asset { | ||
| ...AssetItemResultFragment | ||
| } | ||
| total_price | ||
| bid_amount | ||
| from { | ||
| address | ||
| } | ||
| to { | ||
| address | ||
| } | ||
| winner { | ||
| address | ||
| } | ||
| seller { | ||
| address | ||
| } | ||
| created_date | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
138 changes: 138 additions & 0 deletions
138
packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Firehose/Firehose.results.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,138 @@ | ||
| import React, { useEffect } from 'react' | ||
| import { FormattedMessage } from 'react-intl' | ||
| import { LinkContainer } from 'react-router-bootstrap' | ||
| import { CombinedError } from 'urql' | ||
|
|
||
| import { NFT_ORDER_PAGE_LIMIT } from '@core/network/api/nfts' | ||
| import { Button, Text, TooltipHost, TooltipIcon } from 'blockchain-info-components' | ||
| import CoinDisplay from 'components/Display/CoinDisplay' | ||
| import FiatDisplay from 'components/Display/FiatDisplay' | ||
| import { EventSortFields, useFirehoseQuery } from 'generated/graphql' | ||
| import { EventFilterFields, SortDirection } from 'generated/graphql.types' | ||
|
|
||
| import { Asset, AssetCollection, AssetDetails, AssetImageContainer, PriceCTA } from '../components' | ||
| import { NftFilterFormValuesType } from '../NftFilter' | ||
|
|
||
| const NftFirehoseResults: React.FC<Props> = ({ | ||
| page, | ||
| setIsFetchingNextPage, | ||
| setMaxItemsFetched, | ||
| setNextPageFetchError | ||
| }) => { | ||
| const [result] = useFirehoseQuery({ | ||
| variables: { | ||
| limit: NFT_ORDER_PAGE_LIMIT, | ||
| offset: page * NFT_ORDER_PAGE_LIMIT, | ||
| sort: { by: EventSortFields.CreatedDate, direction: SortDirection.Desc } | ||
| } | ||
| }) | ||
|
|
||
| useEffect(() => { | ||
| setNextPageFetchError(result.error) | ||
| }, [result.error]) | ||
|
|
||
| useEffect(() => { | ||
| setIsFetchingNextPage(result.fetching) | ||
| }, [result.fetching]) | ||
|
|
||
| useEffect(() => { | ||
| if (result.data?.events.length !== undefined) { | ||
| setMaxItemsFetched(result.data.events.length < NFT_ORDER_PAGE_LIMIT) | ||
| } | ||
| }, [result.data?.events?.length, setMaxItemsFetched]) | ||
|
|
||
| return ( | ||
| <> | ||
| {result?.data?.events?.map((event) => { | ||
| const lowestListing = event.asset?.listings | ||
| ? event.asset?.listings.sort( | ||
| (a, b) => Number(a?.starting_price) - Number(b?.starting_price) | ||
| )[0] | ||
| : null | ||
|
|
||
| return event.asset ? ( | ||
| <Asset key={event.asset.token_id}> | ||
| <LinkContainer | ||
| to={`/nfts/asset/${event.asset.contract?.address}/${event.asset.token_id}`} | ||
| > | ||
| <AssetImageContainer | ||
| background={`url(${event.asset.image_url?.replace(/=s\d*/, '')})`} | ||
| /> | ||
| </LinkContainer> | ||
| <AssetDetails> | ||
| <div> | ||
| <AssetCollection> | ||
| <Text style={{ whiteSpace: 'nowrap' }} size='14px' color='grey800' weight={600}> | ||
| {event.asset.collection?.name} | ||
| </Text> | ||
| </AssetCollection> | ||
| <Text style={{ marginTop: '4px' }} size='16px' color='black' weight={600}> | ||
| {event.asset.name} | ||
| </Text> | ||
| </div> | ||
|
|
||
| <PriceCTA> | ||
| <div> | ||
| <Text size='12px' color='black' weight={600}> | ||
| <FormattedMessage id='copy.price' defaultMessage='Price' /> | ||
| </Text> | ||
| {lowestListing && lowestListing.starting_price ? ( | ||
| <Text color='black' style={{ marginTop: '4px', textAlign: 'left' }}> | ||
| <CoinDisplay | ||
| size='14px' | ||
| color='black' | ||
| weight={600} | ||
| coin={lowestListing.payment_token_symbol || 'ETH'} | ||
| > | ||
| {lowestListing.starting_price} | ||
| </CoinDisplay> | ||
| <FiatDisplay | ||
| size='12px' | ||
| color='grey600' | ||
| weight={600} | ||
| currency='USD' | ||
| coin={lowestListing.payment_token_symbol || 'ETH'} | ||
| > | ||
| {lowestListing.starting_price} | ||
| </FiatDisplay> | ||
| </Text> | ||
| ) : ( | ||
| <Text | ||
| size='12px' | ||
| color='grey600' | ||
| weight={600} | ||
| style={{ display: 'flex', marginBottom: '4px', marginTop: '6px' }} | ||
| > | ||
| <FormattedMessage id='copy.not_for_sale' defaultMessage='Not for sale' /> | ||
| <TooltipHost id='tooltip.nft_asset_not_for_sale'> | ||
| <TooltipIcon name='question-in-circle-filled' /> | ||
| </TooltipHost> | ||
| </Text> | ||
| )} | ||
| </div> | ||
| <LinkContainer | ||
| to={`/nfts/asset/${event.asset.contract?.address}/${event.asset.token_id}`} | ||
| > | ||
| <Button data-e2e='nftAssetPage' nature='primary' small> | ||
| <FormattedMessage id='copy.view_details' defaultMessage='View Details' /> | ||
| </Button> | ||
| </LinkContainer> | ||
| </PriceCTA> | ||
| </AssetDetails> | ||
| </Asset> | ||
| ) : null | ||
| })} | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| type Props = { | ||
| formValues: NftFilterFormValuesType | ||
| page: number | ||
| setIsFetchingNextPage: (isFetching: boolean) => void | ||
| setMaxItemsFetched: (maxItemsFetched: boolean) => void | ||
| setNextPageFetchError: (error: CombinedError | undefined) => void | ||
| slug: string | ||
| } | ||
|
|
||
| export default NftFirehoseResults |
70 changes: 70 additions & 0 deletions
70
packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Firehose/Firehose.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| import React, { useEffect, useState } from 'react' | ||
| import { CombinedError } from 'urql' | ||
|
|
||
| import LazyLoadContainer from 'components/LazyLoadContainer' | ||
|
|
||
| import { Grid } from '../components' | ||
| import NftError from '../components/NftError' | ||
| import NftGridLoading from '../components/NftGridLoading' | ||
| import NftPageLazyLoadWrapper from '../components/NftPageLazyLoadWrapper' | ||
| import { NftFilterFormValuesType } from '../NftFilter' | ||
| import NftFirehoseResults from './Firehose.results' | ||
|
|
||
| const NftFirehose: React.FC<Props> = ({ formValues, slug }) => { | ||
| const [pageVariables, setPageVariables] = useState([{ page: 0 }]) | ||
| const [maxItemsFetched, setMaxItemsFetched] = useState(false) | ||
| const [isFetchingNextPage, setIsFetchingNextPage] = useState(true) | ||
| const [errorFetchingNextPage, setNextPageFetchError] = useState<CombinedError | undefined>( | ||
| undefined | ||
| ) | ||
|
|
||
| useEffect(() => { | ||
| setIsFetchingNextPage(true) | ||
| setPageVariables([]) | ||
| setMaxItemsFetched(false) | ||
| setTimeout(() => { | ||
| setPageVariables([{ page: 0 }]) | ||
| }, 100) | ||
| }, [slug, formValues]) | ||
|
|
||
| const isFetching = isFetchingNextPage | ||
|
|
||
| return ( | ||
| <NftPageLazyLoadWrapper> | ||
| <LazyLoadContainer | ||
| triggerDistance={50} | ||
| onLazyLoad={() => | ||
| isFetching || maxItemsFetched | ||
| ? null | ||
| : setPageVariables((pages) => [...pages, { page: pages.length + 1 }]) | ||
| } | ||
| > | ||
| <Grid> | ||
| {pageVariables.length | ||
| ? pageVariables.map(({ page }) => ( | ||
| <NftFirehoseResults | ||
| page={page} | ||
| // @ts-ignore | ||
| formValues={formValues} | ||
| key={page} | ||
| slug={slug} | ||
| setMaxItemsFetched={setMaxItemsFetched} | ||
| setNextPageFetchError={setNextPageFetchError} | ||
| setIsFetchingNextPage={setIsFetchingNextPage} | ||
| /> | ||
| )) | ||
| : null} | ||
| {isFetching ? <NftGridLoading /> : null} | ||
| </Grid> | ||
| {errorFetchingNextPage ? <NftError error={errorFetchingNextPage} /> : null} | ||
| </LazyLoadContainer> | ||
| </NftPageLazyLoadWrapper> | ||
| ) | ||
| } | ||
|
|
||
| type Props = { | ||
| formValues: NftFilterFormValuesType | ||
| slug: string | ||
| } | ||
|
|
||
| export default NftFirehose |
1 change: 1 addition & 0 deletions
1
packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Firehose/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { default } from './Firehose' |
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
1 change: 1 addition & 0 deletions
1
packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Home/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { default } from './Home' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters