10113815734

Committed 26 Jul 2024 03:31PM UTC coverage: 66.726% (+0.07%) from 66.658%

Build # 10113815734

Build Type

Pull #2276

github

Committed by

meelrossi

Commit Message

fix: bid placed toast position

Pull Request Pull Request #2276: fix: bid placed toast position

Run Details

2659 of 5176 branches covered (51.37%)

Branch coverage included in aggregate %.

4 of 12 new or added lines in 2 files covered. (33.33%)

2 existing lines in 1 file now uncovered.

7791 of 10485 relevant lines covered (74.31%)

78.52 hits per line

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

30.68

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

import React, { useCallback, useState } from 'react'
import { Link, useHistory } from 'react-router-dom'
import { ethers } from 'ethers'
import { withAuthorizedAction } from 'decentraland-dapps/dist/containers'
import { AuthorizedAction } from 'decentraland-dapps/dist/containers/withAuthorizedAction/AuthorizationModal'
import { T, t } from 'decentraland-dapps/dist/modules/translation/utils'
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 { getAcceptBidStatus, getError } from '../../modules/bid/selectors'
import { getAcceptBidAuthorizationOptions, isBidTrade } from '../../modules/bid/utils'
import { useERC721ContractName } from '../../modules/contract/hooks'
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 { 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,
    isArchivable,
    hasImage,
    isAcceptingBid
  } = props
  const history = useHistory()
  const [showConfirmationModal, setShowConfirmationModal] = useState(false)
  const targetContractLabel = useERC721ContractName(bid.contractAddress, bid.chainId)

  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

  const handleConfirm = useCallback(() => {
    const options = getAcceptBidAuthorizationOptions(bid, () => onAccept(bid), targetContractLabel)
    if (isBidsOffchainEnabled && options) {
      onAuthorizedAction(options)
    } 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.created_at')}>
              {formatDistanceToNow(+bid.createdAt, { addSuffix: true })}
            </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 size="small" onClick={() => history.push(locations.bid(bid.contractAddress, bid.tokenId))}>
                        {t('global.update')}
                      </Button>
                    )}
                    <Button size="small" 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 size="small" onClick={() => onArchive(bid)}>
                          {t('my_bids_page.archive')}
                        </Button>
                      ) : (
                        <Button size="small" 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'
  },
  getAcceptBidStatus,
  getError
)

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

decentraland / marketplace / 10113815734

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