10032718751

Committed 22 Jul 2024 12:46AM UTC coverage: 66.816% (+0.2%) from 66.605%

Build # 10032718751

Build Type

Pull #2270

github

Committed by

meelrossi

Commit Message

fix show nfts

Pull Request Pull Request #2270: feat: show correctly bids on nfts

Run Details

2658 of 5162 branches covered (51.49%)

Branch coverage included in aggregate %.

24 of 33 new or added lines in 8 files covered. (72.73%)

1 existing line in 1 file now uncovered.

7774 of 10451 relevant lines covered (74.39%)

78.27 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

25.69

/webapp/src/components/Bid/Bid.tsx

import React, { useCallback, useEffect, useState } from 'react'
import { Link, useHistory } from 'react-router-dom'
import { ethers } from 'ethers'
import { Contract } from '@dcl/schemas'
import { withAuthorizedAction } from 'decentraland-dapps/dist/containers'
import { AuthorizedAction } from 'decentraland-dapps/dist/containers/withAuthorizedAction/AuthorizationModal'
import { AuthorizationType } from 'decentraland-dapps/dist/modules/authorization'
import { T, t } from 'decentraland-dapps/dist/modules/translation/utils'
import { ContractName, getContract as getDCLContract } from 'decentraland-transactions'
import { Loader, Stats, Button } from 'decentraland-ui'
import { formatDistanceToNow } from '../../lib/date'
import { formatWeiMANA } from '../../lib/mana'
import { AssetType } from '../../modules/asset/types'
import { getAssetName } from '../../modules/asset/utils'
import { isBidTrade } from '../../modules/bid/utils'
import { locations } from '../../modules/routing/locations'
import { addressEquals } from '../../modules/wallet/utils'
import { AssetImage } from '../AssetImage'
import { AssetProvider } from '../AssetProvider'
import { ConfirmInputValueModal } from '../ConfirmInputValueModal'
import { LinkedProfile } from '../LinkedProfile'
import { Mana } from '../Mana'
import { AcceptButton } from './AcceptButton'
import { fetchContractName } from './utils'
import { WarningMessage } from './WarningMessage'
import { Props } from './Bid.types'
import './Bid.css'

const Bid = (props: Props) => {
  const {
    bid,
    wallet,
    archivedBidIds,
    isBidsOffchainEnabled,
    onAuthorizedAction,
    onAccept,
    onArchive,
    onUnarchive,
    onCancel,
    getContract,
    isArchivable,
    hasImage,
    isAcceptingBid
  } = props
  const history = useHistory()
  const [targetContractLabel, setTargetContractLabel] = useState<string | null>('')
  const [showConfirmationModal, setShowConfirmationModal] = useState(false)

  const isArchived = archivedBidIds.includes(bid.id)
  const isBidder = !!wallet && addressEquals(wallet.address, bid.bidder)
  const isSeller = !!wallet && addressEquals(wallet.address, bid.seller)
  const isNftBid = 'tokenId' in bid
  const assetType = isNftBid ? AssetType.NFT : AssetType.ITEM
  const tokenId = isNftBid ? bid.tokenId : bid.itemId

  useEffect(() => {
    let cancel = false
    if (isBidsOffchainEnabled) {
      fetchContractName(bid.contractAddress, bid.chainId)
        .then(name => {
          if (!cancel) {
            setTargetContractLabel(name)
          }
        })
        .catch(() => console.error('Could not fetch contract name'))
    }
    return () => {
      cancel = true
    }
  }, [isBidsOffchainEnabled, bid])

  const handleConfirm = useCallback(() => {
    if (isBidsOffchainEnabled && 'tradeId' in bid) {
      const assetContract = getContract({ address: bid.contractAddress, chainId: bid.chainId })
      const offchainMarketplaceContract = getDCLContract(ContractName.OffChainMarketplace, bid.chainId)

      if ('tokenId' in bid) {
        onAuthorizedAction({
          targetContractName: ContractName.ERC721,
          targetContractLabel: targetContractLabel || assetContract?.label || assetContract?.name,
          authorizedAddress: offchainMarketplaceContract.address,
          targetContract: assetContract as Contract,
          authorizationType: AuthorizationType.APPROVAL,
          authorizedContractLabel: offchainMarketplaceContract.name,
          tokenId: bid.tokenId,
          onAuthorized: () => onAccept(bid)
        })
      } else {
        console.error('Implement bid acceptance for items')
      }
    } else {
      onAccept(bid)
    }
  }, [bid, targetContractLabel, onAccept])

  const handleAccept = () => setShowConfirmationModal(true)

  return (
    <>
      <div className="Bid">
        <div className="bid-row">
          {hasImage ? (
            <div className="image">
              <AssetProvider type={assetType} contractAddress={bid.contractAddress} tokenId={tokenId}>
                {(asset, _order, _rental, isLoading) => (
                  <>
                    {!asset && isLoading ? <Loader active /> : null}
                    {asset ? (
                      <Link
                        to={isNftBid ? locations.nft(bid.contractAddress, bid.tokenId) : locations.item(bid.contractAddress, bid.itemId)}
                      >
                        <AssetImage asset={asset} />{' '}
                      </Link>
                    ) : null}
                  </>
                )}
              </AssetProvider>
            </div>
          ) : null}
          <div className="wrapper">
            <Stats className="from" title={t('bid.from')}>
              <LinkedProfile address={bid.bidder} />
            </Stats>
            <Stats className="price" title={t('bid.price')}>
              <Mana showTooltip network={bid.network}>
                {formatWeiMANA(bid.price)}
              </Mana>
            </Stats>
            <Stats title={t('bid.time_left')}>{formatDistanceToNow(+bid.expiresAt)}</Stats>
            {isBidder || isSeller ? (
              <div className="actions">
                {isBidder ? (
                  <>
                    {!isBidTrade(bid) && (
                      <Button primary onClick={() => history.push(locations.bid(bid.contractAddress, bid.tokenId))}>
                        {t('global.update')}
                      </Button>
                    )}
                    <Button onClick={() => onCancel(bid)}>{t('global.cancel')}</Button>
                  </>
                ) : null}
                {isSeller ? (
                  <>
                    <AssetProvider type={assetType} contractAddress={bid.contractAddress} tokenId={tokenId}>
                      {(asset, _order, rental) => (
                        <AcceptButton userAddress={wallet.address} asset={asset} rental={rental} bid={bid} onClick={handleAccept} />
                      )}
                    </AssetProvider>

                    {isArchivable ? (
                      !isArchived ? (
                        <Button onClick={() => onArchive(bid)}>{t('my_bids_page.archive')}</Button>
                      ) : (
                        <Button onClick={() => onUnarchive(bid)}>{t('my_bids_page.unarchive')}</Button>
                      )
                    ) : null}
                  </>
                ) : null}
              </div>
            ) : null}
          </div>
        </div>
        {isBidder ? (
          <AssetProvider type={assetType} contractAddress={bid.contractAddress} tokenId={tokenId}>
            {asset => <WarningMessage asset={asset} bid={bid} />}
          </AssetProvider>
        ) : null}
      </div>
      {showConfirmationModal ? (
        <AssetProvider type={assetType} contractAddress={bid.contractAddress} tokenId={tokenId}>
          {asset =>
            asset && (
              <ConfirmInputValueModal
                open={showConfirmationModal}
                headerTitle={t('bid_page.confirm.title')}
                content={
                  <>
                    <T
                      id="bid_page.confirm.accept_bid_line_one"
                      values={{
                        name: <b>{getAssetName(asset)}</b>,
                        amount: (
                          <Mana showTooltip network={asset.network} inline>
                            {formatWeiMANA(bid.price)}
                          </Mana>
                        )
                      }}
                    />
                    <br />
                    <T id="bid_page.confirm.accept_bid_line_two" />
                  </>
                }
                onConfirm={handleConfirm}
                valueToConfirm={ethers.utils.formatEther(bid.price)}
                network={asset.network}
                onCancel={() => setShowConfirmationModal(false)}
                loading={isAcceptingBid}
                disabled={isAcceptingBid}
              />
            )
          }
        </AssetProvider>
      ) : null}
    </>
  )
}

Bid.defaultProps = {
  isArchivable: true,
  hasImage: true
}

export default withAuthorizedAction(React.memo(Bid), AuthorizedAction.BID, {
  confirm_transaction: {
    title: 'accept_bid.authorization.confirm_transaction.title'
  },
  title: 'accept_bid.authorization.title'
})

1	import React, { useCallback, useEffect, useState } from 'react'	1✔
2	import { Link, useHistory } from 'react-router-dom'	1✔
3	import { ethers } from 'ethers'	1✔
4	import { Contract } from '@dcl/schemas'
5	import { withAuthorizedAction } from 'decentraland-dapps/dist/containers'	1✔
6	import { AuthorizedAction } from 'decentraland-dapps/dist/containers/withAuthorizedAction/AuthorizationModal'	1✔
7	import { AuthorizationType } from 'decentraland-dapps/dist/modules/authorization'	1✔
8	import { T, t } from 'decentraland-dapps/dist/modules/translation/utils'	1✔
9	import { ContractName, getContract as getDCLContract } from 'decentraland-transactions'	1✔
10	import { Loader, Stats, Button } from 'decentraland-ui'	1✔
11	import { formatDistanceToNow } from '../../lib/date'	1✔
12	import { formatWeiMANA } from '../../lib/mana'	1✔
13	import { AssetType } from '../../modules/asset/types'	1✔
14	import { getAssetName } from '../../modules/asset/utils'	1✔
15	import { isBidTrade } from '../../modules/bid/utils'	1✔
16	import { locations } from '../../modules/routing/locations'	1✔
17	import { addressEquals } from '../../modules/wallet/utils'	1✔
18	import { AssetImage } from '../AssetImage'	1✔
19	import { AssetProvider } from '../AssetProvider'	1✔
20	import { ConfirmInputValueModal } from '../ConfirmInputValueModal'	1✔
21	import { LinkedProfile } from '../LinkedProfile'	1✔
22	import { Mana } from '../Mana'	1✔
23	import { AcceptButton } from './AcceptButton'	1✔
24	import { fetchContractName } from './utils'	1✔
25	import { WarningMessage } from './WarningMessage'	1✔
26	import { Props } from './Bid.types'
27	import './Bid.css'	1✔
28
29	const Bid = (props: Props) => {	1✔
30	const {
31	bid,
32	wallet,
33	archivedBidIds,
34	isBidsOffchainEnabled,
35	onAuthorizedAction,
36	onAccept,
37	onArchive,
38	onUnarchive,
39	onCancel,
40	getContract,
41	isArchivable,
42	hasImage,
43	isAcceptingBid
44	} = props	×
45	const history = useHistory()	×
46	const [targetContractLabel, setTargetContractLabel] = useState<string \| null>('')	×
47	const [showConfirmationModal, setShowConfirmationModal] = useState(false)	×
48
49	const isArchived = archivedBidIds.includes(bid.id)	×
50	const isBidder = !!wallet && addressEquals(wallet.address, bid.bidder)	×
51	const isSeller = !!wallet && addressEquals(wallet.address, bid.seller)	×
52	const isNftBid = 'tokenId' in bid	×
53	const assetType = isNftBid ? AssetType.NFT : AssetType.ITEM	×
54	const tokenId = isNftBid ? bid.tokenId : bid.itemId	×
55
56	useEffect(() => {	×
NEW 57	let cancel = false	×
58	if (isBidsOffchainEnabled) {	×
59	fetchContractName(bid.contractAddress, bid.chainId)	×
60	.then(name => {
NEW 61	if (!cancel) {	×
NEW 62	setTargetContractLabel(name)	×
63	}
64	})
UNCOV 65	.catch(() => console.error('Could not fetch contract name'))	×
66	}
NEW 67	return () => {	×
NEW 68	cancel = true	×
69	}
70	}, [isBidsOffchainEnabled, bid])
71
72	const handleConfirm = useCallback(() => {	×
73	if (isBidsOffchainEnabled && 'tradeId' in bid) {	×
74	const assetContract = getContract({ address: bid.contractAddress, chainId: bid.chainId })	×
75	const offchainMarketplaceContract = getDCLContract(ContractName.OffChainMarketplace, bid.chainId)	×
76
77	if ('tokenId' in bid) {	×
78	onAuthorizedAction({	×
79	targetContractName: ContractName.ERC721,
80	targetContractLabel: targetContractLabel \|\| assetContract?.label \|\| assetContract?.name,	×
81	authorizedAddress: offchainMarketplaceContract.address,
82	targetContract: assetContract as Contract,
83	authorizationType: AuthorizationType.APPROVAL,
84	authorizedContractLabel: offchainMarketplaceContract.name,
85	tokenId: bid.tokenId,
86	onAuthorized: () => onAccept(bid)	×
87	})
88	} else {
89	console.error('Implement bid acceptance for items')	×
90	}
91	} else {
92	onAccept(bid)	×
93	}
94	}, [bid, targetContractLabel, onAccept])
95
96	const handleAccept = () => setShowConfirmationModal(true)	×
97
98	return (
99	<>
100	<div className="Bid">
101	<div className="bid-row">
102	{hasImage ? (	×
103	<div className="image">
104	<AssetProvider type={assetType} contractAddress={bid.contractAddress} tokenId={tokenId}>
105	{(asset, _order, _rental, isLoading) => (
106	<>
107	{!asset && isLoading ? <Loader active /> : null}	×
108	{asset ? (	×
109	<Link
110	to={isNftBid ? locations.nft(bid.contractAddress, bid.tokenId) : locations.item(bid.contractAddress, bid.itemId)}	×
111	>
112	<AssetImage asset={asset} />{' '}
113	</Link>
114	) : null}
115	</>
116	)}
117	</AssetProvider>
118	</div>
119	) : null}
120	<div className="wrapper">
121	<Stats className="from" title={t('bid.from')}>
122	<LinkedProfile address={bid.bidder} />
123	</Stats>
124	<Stats className="price" title={t('bid.price')}>
125	<Mana showTooltip network={bid.network}>
126	{formatWeiMANA(bid.price)}
127	</Mana>
128	</Stats>
129	<Stats title={t('bid.time_left')}>{formatDistanceToNow(+bid.expiresAt)}</Stats>
130	{isBidder \|\| isSeller ? (	×
131	<div className="actions">
132	{isBidder ? (	×
133	<>
134	{!isBidTrade(bid) && (	×
135	<Button primary onClick={() => history.push(locations.bid(bid.contractAddress, bid.tokenId))}>	×
136	{t('global.update')}
137	</Button>
138	)}
139	<Button onClick={() => onCancel(bid)}>{t('global.cancel')}</Button>	×
140	</>
141	) : null}
142	{isSeller ? (	×
143	<>
144	<AssetProvider type={assetType} contractAddress={bid.contractAddress} tokenId={tokenId}>
145	{(asset, _order, rental) => (
146	<AcceptButton userAddress={wallet.address} asset={asset} rental={rental} bid={bid} onClick={handleAccept} />
147	)}
148	</AssetProvider>
149
150	{isArchivable ? (	×
151	!isArchived ? (	×
152	<Button onClick={() => onArchive(bid)}>{t('my_bids_page.archive')}</Button>	×
153	) : (
154	<Button onClick={() => onUnarchive(bid)}>{t('my_bids_page.unarchive')}</Button>	×
155	)
156	) : null}
157	</>
158	) : null}
159	</div>
160	) : null}
161	</div>
162	</div>
163	{isBidder ? (	×
164	<AssetProvider type={assetType} contractAddress={bid.contractAddress} tokenId={tokenId}>
165	{asset => <WarningMessage asset={asset} bid={bid} />}
166	</AssetProvider>
167	) : null}
168	</div>
169	{showConfirmationModal ? (	×
170	<AssetProvider type={assetType} contractAddress={bid.contractAddress} tokenId={tokenId}>
171	{asset =>
172	asset && (	×
173	<ConfirmInputValueModal
174	open={showConfirmationModal}
175	headerTitle={t('bid_page.confirm.title')}
176	content={
177	<>
178	<T
179	id="bid_page.confirm.accept_bid_line_one"
180	values={{
181	name: <b>{getAssetName(asset)}</b>,
182	amount: (
183	<Mana showTooltip network={asset.network} inline>
184	{formatWeiMANA(bid.price)}
185	</Mana>
186	)
187	}}
188	/>
189	<br />
190	<T id="bid_page.confirm.accept_bid_line_two" />
191	</>
192	}
193	onConfirm={handleConfirm}
194	valueToConfirm={ethers.utils.formatEther(bid.price)}
195	network={asset.network}
196	onCancel={() => setShowConfirmationModal(false)}	×
197	loading={isAcceptingBid}
198	disabled={isAcceptingBid}
199	/>
200	)
201	}
202	</AssetProvider>
203	) : null}
204	</>
205	)
206	}
207
208	Bid.defaultProps = {	1✔
209	isArchivable: true,
210	hasImage: true
211	}
212
213	export default withAuthorizedAction(React.memo(Bid), AuthorizedAction.BID, {	1✔
214	confirm_transaction: {
215	title: 'accept_bid.authorization.confirm_transaction.title'
216	},
217	title: 'accept_bid.authorization.title'
218	})

decentraland / marketplace / 10032718751

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous