9975404641

Committed 17 Jul 2024 01:43PM UTC coverage: 66.349% (-0.3%) from 66.682%

Build # 9975404641

Build Type

Pull #2268

github

Committed by

meelrossi

Commit Message

fix types

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

Run Details

2630 of 5154 branches covered (51.03%)

Branch coverage included in aggregate %.

44 of 102 new or added lines in 8 files covered. (43.14%)

3 existing lines in 2 files now uncovered.

7690 of 10400 relevant lines covered (73.94%)

77.8 hits per line

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

24.55

/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 isArchived = archivedBidIds.includes(bid.id)
  const isBidder = !!wallet && addressEquals(wallet.address, bid.bidder)
  const isSeller = !!wallet && addressEquals(wallet.address, bid.seller)
  const nftContract = getContract({ address: bid.contractAddress, chainId: bid.chainId })

  useEffect(() => {
    fetchContractName(nftContract)
      .then(name => setTargetContractLabel(name))
      .catch(() => console.error('Could not fetch contract name'))
  }, [nftContract])

  const [showConfirmationModal, setShowConfirmationModal] = useState(false)
  const handleConfirm = useCallback(() => {
    if (isBidsOffchainEnabled && 'tradeId' in bid) {
      const offchainMarketplaceContract = getDCLContract(ContractName.OffChainMarketplace, bid.chainId)

      if ('tokenId' in bid) {
        onAuthorizedAction({
          targetContractName: ContractName.ERC721,
          targetContractLabel: targetContractLabel || nftContract?.label || nftContract?.name,
          authorizedAddress: offchainMarketplaceContract.address,
          targetContract: nftContract 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, onAccept])
  const handleAccept = () => setShowConfirmationModal(true)
  const isNftBid = 'tokenId' in bid

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

decentraland / marketplace / 9975404641

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