Skip to content

Commit

Permalink
feat: sell order flyout
Browse files Browse the repository at this point in the history
  • Loading branch information
@rsteubs-bc
rsteubs-bc committed Apr 26, 2022
1 parent ccedd4d commit 88692ca
Show file tree
Hide file tree
Showing 4 changed files with 145 additions and 54 deletions.
2 changes: 1 addition & 1 deletion packages/blockchain-wallet-v4-frontend/src/modals/Nfts/NftOrder/MakeOffer/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -330,7 +330,7 @@ const MakeOffer: React.FC<Props> = (props) => {
</Row>
<Row>
<Value>
<NetworkFeesComponent {...props} {...[val]} />
<NetworkFeesComponent isMakeOffer title='Network Fees' {...props} {...[val]} />
</Value>
</Row>
</Form>
Expand Down
127 changes: 89 additions & 38 deletions packages/blockchain-wallet-v4-frontend/src/modals/Nfts/NftOrder/MarkForSale/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,13 @@ import { Field, reduxForm } from 'redux-form'
import styled from 'styled-components'

import { convertCoinToCoin, convertCoinToFiat, convertFiatToCoin } from '@core/exchange'
import { GasCalculationOperations } from '@core/network/api/nfts/types'
import { GasCalculationOperations, GasDataI } from '@core/network/api/nfts/types'
import { getRatesSelector } from '@core/redux/data/misc/selectors'
import { RatesType } from '@core/types'
import { Button, HeartbeatLoader, Icon, SpinningLoader, Text } from 'blockchain-info-components'
import FiatDisplay from 'components/Display/FiatDisplay'
import { Title } from 'components/Flyout'
import { StickyHeaderWrapper, Title } from 'components/Flyout'
import FlyoutHeader from 'components/Flyout/Header'
import { Row, Value } from 'components/Flyout/model'
import { DateBoxDebounced, Form, NumberBox, SelectBox } from 'components/Form'
import AmountFieldInput from 'components/Form/AmountFieldInput'
Expand All @@ -25,6 +26,7 @@ import { required, validDecliningPrice } from 'services/forms'
import { media } from 'services/styles'

import { AssetDesc, FullAssetImage, StickyCTA } from '../../components'
import NetworkFeesComponent from '../../components/networkFees'
import { Props as OwnProps } from '..'
import SellFees from '../ShowAsset/Sell/fees'

Expand Down Expand Up @@ -62,8 +64,10 @@ const EndDateLabel = styled(DateLabel)`
const MarkForSale: React.FC<Props> = (props) => {
const { close, formValues, nftActions, orderFlow, rates } = props
const coin = formValues.timedAuctionType === 'highestBidder' ? 'WETH' : 'ETH'
const wrapEthFees = orderFlow.wrapEthFees.getOrElse({ gasPrice: 0, totalFees: 0 } as GasDataI)
const { amount, fix } = formValues
const [saleType, setSaleType] = useState('fixed-price')
const [open, setOpen] = useState(true)
const disabled =
saleType === 'fixed-price'
? // Fixed Price
Expand Down Expand Up @@ -123,30 +127,45 @@ const MarkForSale: React.FC<Props> = (props) => {
NotAsked: () => null,
Success: (val) => (
<>
<div style={{ position: 'relative' }}>
<Icon
<StickyHeaderWrapper>
<FlyoutHeader
data-e2e='wrapEthHeader'
mode='back'
onClick={() => nftActions.setOrderFlowStep({ step: NftOrderStepEnum.SHOW_ASSET })}
name='arrow-left'
cursor
role='button'
style={{ left: '40px', position: 'absolute', top: '40px' }}
/>
<Icon
onClick={() => close()}
name='close'
cursor
role='button'
style={{ position: 'absolute', right: '40px', top: '40px' }}
/>
<FullAssetImage cropped backgroundImage={val?.image_url.replace(/=s\d*/, '')} />
</div>
>
Sell Item
</FlyoutHeader>
</StickyHeaderWrapper>
<AssetDesc>
<Text size='16px' color='grey900' weight={600}>
{val?.collection?.name}
</Text>
<Text style={{ marginTop: '4px' }} size='20px' color='grey900' weight={600}>
{val?.name}
</Text>
<img
style={{
borderRadius: '8px',
height: '64px',
marginRight: '12px',
width: 'auto'
}}
alt='nft-asset'
src={val.image_url.replace(/=s\d*/, '')}
/>
<div>
<Text style={{ marginTop: '4px' }} size='20px' color='grey900' weight={600}>
{val?.name}
</Text>
<Text
size='14px'
weight={600}
color='orange600'
style={{
background: colors.orange100,
borderRadius: '8px',
padding: '5px 8px',
textAlign: 'center',
width: 'fit-content'
}}
>
Not Verified
</Text>
</div>
</AssetDesc>
<Form>
{saleType === 'fixed-price' ? (
Expand Down Expand Up @@ -442,24 +461,56 @@ const MarkForSale: React.FC<Props> = (props) => {
</Value>
</Row>
<Row>
<Value asTitle>
<FormattedMessage id='copy.service_fees' defaultMessage='Service Fees' />
<Value>
<NetworkFeesComponent
isMakeOffer={false}
title='Selling Fees'
{...props}
{...[val]}
/>
</Value>
<Title asValue>
<FormattedMessage
id='copy.opensea_service_fee'
defaultMessage='OpenSea Service Fee'
/>{' '}
{val.asset_contract.opensea_seller_fee_basis_points / 100}%
</Title>
<Title asValue>
<FormattedMessage id='copy.creator_royalty' defaultMessage='Creator Royalty' />{' '}
{Number(val.collection.dev_seller_fee_basis_points) / 100}%
</Title>
</Row>
<Row>
{open && (
<>
<Icon
onClick={() => {
setOpen(false)
}}
name='close'
cursor
role='button'
style={{
background: 'lightgrey',
borderRadius: '12px',
color: 'grey',
fontSize: '16px',
marginTop: '1.1em',
padding: '0.3em',
position: 'absolute',
right: '3.5em'
}}
/>
<div
style={{ background: colors.grey000, borderRadius: '8px', padding: '1em' }}
>
<Text weight={600} style={{ padding: '0.5em 0em' }}>
Listing Is Free
</Text>
<Text size='14px' weight={500} style={{ paddingBottom: '1em' }}>
Once sold, the above fees will be deducted from the sale. Learn more about
our fees.
</Text>
</div>
</>
)}
</Row>
</Form>
<StickyCTA>
<SellFees {...props} asset={val} />
<div style={wrapEthFees.totalFees > 0 ? {} : { display: 'none' }}>
<SellFees {...props} asset={val} />
</div>

{props.orderFlow.fees.cata({
Failure: () => (
<Button jumbo nature='sent' fullwidth data-e2e='sellNft' disabled>
Expand Down
3 changes: 2 additions & 1 deletion packages/blockchain-wallet-v4-frontend/src/modals/Nfts/components/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ export const FullAssetImage = styled.div<{ backgroundImage; cropped?: boolean }>
`

export const AssetDesc = styled.div`
padding: 40px;
padding: 0px 40px 20px;
display: flex;
`

export const StickyTableHeader = styled(TableHeader)`
Expand Down
67 changes: 53 additions & 14 deletions packages/blockchain-wallet-v4-frontend/src/modals/Nfts/components/networkFees.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
import React, { useState } from 'react'
import { FormattedMessage } from 'react-intl'
import { connect, ConnectedProps } from 'react-redux'
import { colors } from '@blockchain-com/constellation'
import BigNumber from 'bignumber.js'
import styled from 'styled-components'

import { Icon, Text } from 'blockchain-info-components'
import FiatDisplay from 'components/Display/FiatDisplay'
import { Title } from 'components/Flyout'

import MakeOfferFees from '../NftOrder/MakeOffer/fees'
import WrapEthFees from '../NftOrder/WrapEth/fees'
Expand Down Expand Up @@ -43,12 +45,13 @@ const Total = styled(FiatDisplay)`
`

const NetworkFeesComponent: React.FC<Props> = (props: any, val) => {
const { isMakeOffer, orderFlow, title } = props
const [moreFees, setMoreFees] = useState(false)
const toggleDropdown = () => {
setMoreFees(!moreFees)
}

const getTotalFees = () => {
const getMakeOfferTotalFees = () => {
const totalFees = new BigNumber(props?.orderFlow?.wrapEthFees?.data?.approvalFees)
.multipliedBy(props?.orderFlow?.wrapEthFees?.data?.gasPrice)
.plus(
Expand All @@ -59,17 +62,30 @@ const NetworkFeesComponent: React.FC<Props> = (props: any, val) => {
return !totalFees.isNaN() ? totalFees.toString() : 0
}

const getBasisPoints = () => {
return `${String(
Number(orderFlow?.asset?.data?.collection?.dev_seller_fee_basis_points) +
Number(orderFlow?.asset?.data?.asset_contract?.opensea_seller_fee_basis_points) / 100
)}%`
}

return (
<>
<Wrapper>
<Top onClick={toggleDropdown}>
<Text weight={500} color='#353F52' lineHeight='24px' size='15px'>
Network Fees
<Text weight={500} color='#353F52' lineHeight='24px'>
{title}
</Text>
<Text style={{ marginLeft: '2.6em' }} lineHeight='24px'>
<Total color={colors.grey600} weight={600} size='14px' coin='ETH'>
{getTotalFees()}
</Total>
{isMakeOffer ? (
<Total color={colors.grey600} weight={500} size='14px' coin='ETH'>
{getMakeOfferTotalFees()}
</Total>
) : (
<Text weight={500} style={{ paddingLeft: '10em' }} lineHeight='24px'>
{getBasisPoints()}
</Text>
)}
</Text>
{!moreFees && (
<ChevronArea>
Expand All @@ -82,12 +98,35 @@ const NetworkFeesComponent: React.FC<Props> = (props: any, val) => {
</ChevronArea>
)}
</Top>
<Fees style={moreFees ? {} : { display: 'none' }}>
{/* @ts-ignore */}
<MakeOfferFees {...props} asset={val} />
{/* @ts-ignore */}
<WrapEthFees {...props} />
</Fees>
{isMakeOffer ? (
<Fees style={moreFees ? {} : { display: 'none' }}>
{/* @ts-ignore */}
<MakeOfferFees {...props} asset={val} />
{/* @ts-ignore */}
<WrapEthFees {...props} />
</Fees>
) : (
<Fees style={moreFees ? {} : { display: 'none' }}>
{orderFlow?.asset?.data?.asset_contract?.opensea_seller_fee_basis_points > 0 && (
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<Text weight={500}>OpenSea Service Fee</Text>
<Text weight={500} style={{ paddingRight: '1.5em' }}>
{orderFlow.asset.data.asset_contract.opensea_seller_fee_basis_points / 100}%
</Text>
</div>
)}
{orderFlow?.asset?.data?.collection?.dev_seller_fee_basis_points > 0 && (
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<Text weight={500} style={{ paddingRight: '2em' }}>
Creator Royalty
</Text>
<Text weight={500}>
{Number(orderFlow.asset.data.collection.dev_seller_fee_basis_points) / 100}%
</Text>
</div>
)}
</Fees>
)}
</Wrapper>
{/* {moreFees && (
<Total>
Expand All @@ -100,7 +139,7 @@ const NetworkFeesComponent: React.FC<Props> = (props: any, val) => {
}

const connector = connect()

type Props = ConnectedProps<typeof connector>
type OwnProps = { isMakeOffer: boolean; title: string }
type Props = OwnProps & ConnectedProps<typeof connector>

export default connector(NetworkFeesComponent)

0 comments on commit 88692ca

Please sign in to comment.