Skip to content

Commit

Permalink
feat(nfts): buy total clean up and actions clean up
Browse files Browse the repository at this point in the history
  • Loading branch information
plondon committed Apr 29, 2022
1 parent 96c510f commit 7d61e28
Show file tree
Hide file tree
Showing 3 changed files with 104 additions and 106 deletions.
3 changes: 0 additions & 3 deletions packages/blockchain-wallet-v4-frontend/src/modals/Nfts/NftOrder/Buy/cta.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,9 +98,6 @@ const CTA: React.FC<Props> = (props) => {
{Math.max(maxBuyPossible.toNumber(), 0)}
</CoinDisplay>
</Text>
<Text size='12px' weight={500} style={{ margin: '8px 0', textAlign: 'center' }}>
Or
</Text>
<Link
weight={600}
size='14px'
Expand Down
60 changes: 31 additions & 29 deletions packages/blockchain-wallet-v4-frontend/src/modals/Nfts/NftOrder/Buy/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -241,35 +241,37 @@ const Buy: React.FC<Props> = (props) => {
</div>
<StickyCTA>
{orderToMatch ? (
<Flex alignItems='center' justifyContent='space-between'>
<Text color='black' weight={600} size='18px'>
Total
</Text>
<RightAlign>
<CoinDisplay
size='14px'
color='black'
weight={600}
coin={orderToMatch.payment_token_contract?.symbol}
>
{new BigNumber(buyFees.totalFees)
.multipliedBy(buyFees.gasPrice)
.plus(orderToMatch.base_price)
.toString()}
</CoinDisplay>
<FiatDisplay
size='14px'
color='grey600'
weight={600}
coin={orderToMatch.payment_token_contract?.symbol}
>
{new BigNumber(buyFees.totalFees)
.multipliedBy(buyFees.gasPrice)
.plus(orderToMatch.base_price)
.toString()}
</FiatDisplay>
</RightAlign>
</Flex>
<div style={{ marginBottom: '8px' }}>
<Flex alignItems='center' justifyContent='space-between'>
<Text color='black' weight={600} size='18px'>
Total
</Text>
<RightAlign>
<CoinDisplay
size='14px'
color='black'
weight={600}
coin={orderToMatch.payment_token_contract?.symbol}
>
{new BigNumber(buyFees.totalFees)
.multipliedBy(buyFees.gasPrice)
.plus(orderToMatch.base_price)
.toString()}
</CoinDisplay>
<FiatDisplay
size='14px'
color='grey600'
weight={600}
coin={orderToMatch.payment_token_contract?.symbol}
>
{new BigNumber(buyFees.totalFees)
.multipliedBy(buyFees.gasPrice)
.plus(orderToMatch.base_price)
.toString()}
</FiatDisplay>
</RightAlign>
</Flex>
</div>
) : null}
<BuyCta
{...props}
Expand Down
147 changes: 73 additions & 74 deletions packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Asset/Asset.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import CopyClipboardButton from 'components/Clipboard/CopyClipboardButton'
import CryptoAddress from 'components/CryptoAddress/CryptoAddress'
import CoinDisplay from 'components/Display/CoinDisplay'
import FiatDisplay from 'components/Display/FiatDisplay'
import { Flex } from 'components/Flex'
import { actions, selectors } from 'data'
import { NftOrderStepEnum } from 'data/components/nfts/types'
import { RootState } from 'data/rootReducer'
Expand Down Expand Up @@ -652,61 +653,53 @@ const NftAsset: React.FC<Props> = ({
</EthText>
</>
) : null}
{ownedBySelf ? (
<Button
data-e2e='openNftFlow'
nature='primary'
jumbo
style={{ width: '20em' }}
onClick={() => {
nftsActions.nftOrderFlowOpen({
asset_contract_address: contract,
step: NftOrderStepEnum.MARK_FOR_SALE,
token_id: id,
walletUserIsAssetOwnerHack: false
})
analyticsActions.trackEvent({
key: Analytics.NFT_MARK_FOR_SALE,
properties: {
collection: collectionName,
collection_id: id
}
})
}}
>
<FormattedMessage id='copy.mark_for_sale' defaultMessage='Mark For Sale' />
</Button>
) : lowest_order ? (
<div style={{ display: 'flex' }}>
<Button
data-e2e='openNftFlow'
nature='primary'
jumbo
style={{ marginRight: '1em', width: '10em' }}
onClick={() => {
nftsActions.nftOrderFlowOpen({
asset_contract_address: contract,
order: lowest_order as RawOrder,
step: NftOrderStepEnum.BUY,
token_id: id,
walletUserIsAssetOwnerHack: false
})
analyticsActions.trackEvent({
key: Analytics.NFT_BUY_NOW_CLICKED,
properties: {
collection: collectionName,
collection_id: id
}
})
}}
>
<FormattedMessage id='copy.buy_now' defaultMessage='Buy Now' />
</Button>
<Flex gap={8}>
{ownedBySelf ? (
<>
<Button
data-e2e='openNftFlow'
nature='primary'
jumbo
onClick={() => {
nftsActions.nftOrderFlowOpen({
asset_contract_address: contract,
step: NftOrderStepEnum.MARK_FOR_SALE,
token_id: id,
walletUserIsAssetOwnerHack: true
})
analyticsActions.trackEvent({
key: Analytics.NFT_MARK_FOR_SALE,
properties: {
collection: collectionName,
collection_id: id
}
})
}}
>
<FormattedMessage id='copy.mark_for_sale' defaultMessage='Mark for Sale' />
</Button>
<Button
data-e2e='acceptNftOffer'
nature='dark'
jumbo
onClick={() => {
nftsActions.nftOrderFlowOpen({
asset_contract_address: contract,
step: NftOrderStepEnum.ACCEPT_OFFER,
token_id: id,
walletUserIsAssetOwnerHack: true
})
}}
>
<FormattedMessage id='copy.accept_offer' defaultMessage='Accept Offer' />
</Button>
</>
) : null}
{!ownedBySelf ? (
<Button
data-e2e='openNftFlow'
nature='dark'
jumbo
style={{ width: '10em' }}
onClick={() => {
nftsActions.nftOrderFlowOpen({
asset_contract_address: contract,
Expand All @@ -722,29 +715,35 @@ const NftAsset: React.FC<Props> = ({
>
<FormattedMessage id='copy.make_an_offer' defaultMessage='Make an Offer' />
</Button>
</div>
) : (
<Button
data-e2e='openNftFlow'
nature='primary'
jumbo
style={{ width: '20em' }}
onClick={() => {
nftsActions.nftOrderFlowOpen({
asset_contract_address: contract,
step: NftOrderStepEnum.MAKE_OFFER,
token_id: id,
walletUserIsAssetOwnerHack: false
})
analyticsActions.trackEvent({
key: Analytics.NFT_MAKE_AN_OFFER_CLICKED,
properties: {}
})
}}
>
<FormattedMessage id='copy.make_an_offer' defaultMessage='Make an Offer' />
</Button>
)}
) : null}
{lowest_order ? (
<>
<Button
data-e2e='openNftFlow'
nature='primary'
jumbo
onClick={() => {
nftsActions.nftOrderFlowOpen({
asset_contract_address: contract,
order: lowest_order as RawOrder,
step: NftOrderStepEnum.BUY,
token_id: id,
walletUserIsAssetOwnerHack: false
})
analyticsActions.trackEvent({
key: Analytics.NFT_BUY_NOW_CLICKED,
properties: {
collection: collectionName,
collection_id: id
}
})
}}
>
<FormattedMessage id='copy.buy_now' defaultMessage='Buy Now' />
</Button>
</>
) : null}
</Flex>
</CurrentPriceBox>
<CustomTabMenu>
<TabMenuItem width='33%' onClick={() => setTab('about')} selected={Tab === 'about'}>
Expand Down

0 comments on commit 7d61e28

Please sign in to comment.