9976916820

Committed 17 Jul 2024 03:17PM UTC coverage: 66.155% (-0.5%) from 66.682%

Build # 9976916820

Build Type

Pull #2268

github

Committed by

meelrossi

Commit Message

add more tests

Pull Request Pull Request #2268: feat: add accept trade flow

Run Details

2619 of 5152 branches covered (50.83%)

Branch coverage included in aggregate %.

57 of 121 new or added lines in 10 files covered. (47.11%)

26 existing lines in 3 files now uncovered.

7678 of 10413 relevant lines covered (73.73%)

77.7 hits per line

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

26.21

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

decentraland / marketplace / 9976916820

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