fix: tests

webapp/src/components/AssetPage/BestBuyingOption/BestBuyingOption.spec.tsx

@@ -67,7 +67,7 @@ describe('Best Buying Option', () => {
     tokenId: '1',
     owner: '0x92712b730b9a474f99a47bb8b1750190d5959a2b',
     buyer: null,
-    price: '10',
+    price: '100000000000000000000',
     status: ListingStatus.OPEN,
     expiresAt: 1671033414000,
     createdAt: 1671033414000,

webapp/src/components/AssetPage/BidsTable/BidsTable.container.ts

@@ -1,11 +1,21 @@
-import { MapStateProps } from './BidsTable.types'
-import { RootState } from '../../../modules/reducer'
-import { getAddress } from '../../../modules/wallet/selectors'
+import { isLoadingType } from 'decentraland-dapps/dist/modules/loading/selectors'
 import { connect } from 'react-redux'
+import { RootState } from '../../../modules/reducer'
+import { getAddress, getLoading } from '../../../modules/wallet/selectors'
+import {
+  ACCEPT_BID_REQUEST,
+  acceptBidRequest
+} from '../../../modules/bid/actions'
+import { MapDispatch, MapDispatchProps, MapStateProps } from './BidsTable.types'
 import BidsTable from './BidsTable'
 
 const mapState = (state: RootState): MapStateProps => ({
-  address: getAddress(state)
+  address: getAddress(state),
+  isAcceptingBid: isLoadingType(getLoading(state), ACCEPT_BID_REQUEST)
+})
+
+const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
+  onAccept: bid => dispatch(acceptBidRequest(bid))
 })
 
-export default connect(mapState)(BidsTable)
+export default connect(mapState, mapDispatch)(BidsTable)

webapp/src/components/AssetPage/BidsTable/BidsTable.tsx

@@ -1,18 +1,25 @@
+import { ethers } from 'ethers'
 import React, { useEffect, useState } from 'react'
-import { BidSortBy } from '@dcl/schemas'
+import { Bid, BidSortBy } from '@dcl/schemas'
+import { Mana } from 'decentraland-ui'
+import { T, t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { bidAPI } from '../../../modules/vendor/decentraland'
-import { t } from 'decentraland-dapps/dist/modules/translation/utils'
+import { formatWeiMANA } from '../../../lib/mana'
 import { TableContent } from '../../Table/TableContent'
 import { DataTableType } from '../../Table/TableContent/TableContent.types'
 import TableContainer from '../../Table/TableContainer'
+import { AssetType } from '../../../modules/asset/types'
+import { getAssetName } from '../../../modules/asset/utils'
+import { AssetProvider } from '../../AssetProvider'
+import { ConfirmInputValueModal } from '../../ConfirmInputValueModal'
 import { formatDataToTable } from './utils'
 import { Props } from './BidsTable.types'
 
 export const ROWS_PER_PAGE = 6
 const INITIAL_PAGE = 1
 
 const BidsTable = (props: Props) => {
-  const { nft, address } = props
+  const { nft, address, isAcceptingBid, onAccept } = props
 
   const tabList = [
     {
@@ -42,6 +49,13 @@ const BidsTable = (props: Props) => {
   const [totalPages, setTotalPages] = useState<number>(0)
   const [isLoading, setIsLoading] = useState(false)
   const [sortBy, setSortBy] = useState<BidSortBy>(BidSortBy.MOST_EXPENSIVE)
+  const [showConfirmationModal, setShowConfirmationModal] = useState<{
+    display: boolean
+    bid: Bid | null
+  }>({
+    display: false,
+    bid: null
+  })
 
   // We're doing this outside of redux to avoid having to store all orders when we only care about the first ROWS_PER_PAGE
   useEffect(() => {
@@ -60,7 +74,9 @@ const BidsTable = (props: Props) => {
           setTotal(response.total)
           setBids(
             formatDataToTable(
-              response.data.filter(bid => bid.bidder === address)
+              response.data.filter(bid => bid.bidder !== address),
+              bid => setShowConfirmationModal({ display: true, bid: bid }),
+              address
             )
           )
           setTotalPages(Math.ceil(response.total / ROWS_PER_PAGE) | 0)
@@ -73,24 +89,73 @@ const BidsTable = (props: Props) => {
   }, [nft, setIsLoading, setBids, page, sortBy, address])
 
   return bids.length > 0 ? (
-    <TableContainer
-      children={
-        <TableContent
-          data={bids}
-          activePage={page}
-          isLoading={isLoading}
-          setPage={setPage}
-          totalPages={totalPages}
-          empty={() => null}
-          total={total}
-          hasHeaders
-        />
-      }
-      tabsList={tabList}
-      sortbyList={sortByList}
-      handleSortByChange={(value: string) => setSortBy(value as BidSortBy)}
-      sortBy={sortBy}
-    />
+    <>
+      <TableContainer
+        children={
+          <TableContent
+            data={bids}
+            activePage={page}
+            isLoading={isLoading}
+            setPage={setPage}
+            totalPages={totalPages}
+            empty={() => null}
+            total={total}
+            hasHeaders
+          />
+        }
+        tabsList={tabList}
+        sortbyList={sortByList}
+        handleSortByChange={(value: string) => setSortBy(value as BidSortBy)}
+        sortBy={sortBy}
+      />
+      {showConfirmationModal.bid && showConfirmationModal.display ? (
+        <AssetProvider
+          type={AssetType.NFT}
+          contractAddress={showConfirmationModal.bid.contractAddress}
+          tokenId={showConfirmationModal.bid.tokenId}
+        >
+          {nft =>
+            nft &&
+            showConfirmationModal.bid && (
+              <ConfirmInputValueModal
+                open={showConfirmationModal.display}
+                headerTitle={t('bid_page.confirm.title')}
+                content={
+                  <>
+                    <T
+                      id="bid_page.confirm.accept_bid_line_one"
+                      values={{
+                        name: <b>{getAssetName(nft)}</b>,
+                        amount: (
+                          <Mana showTooltip network={nft.network} inline>
+                            {formatWeiMANA(showConfirmationModal.bid.price)}
+                          </Mana>
+                        )
+                      }}
+                    />
+                    <br />
+                    <T id="bid_page.confirm.accept_bid_line_two" />
+                  </>
+                }
+                onConfirm={() => {
+                  showConfirmationModal.bid &&
+                    onAccept(showConfirmationModal.bid)
+                }}
+                valueToConfirm={ethers.utils.formatEther(
+                  showConfirmationModal.bid.price
+                )}
+                network={nft.network}
+                onCancel={() =>
+                  setShowConfirmationModal({ display: false, bid: null })
+                }
+                loading={isAcceptingBid}
+                disabled={isAcceptingBid}
+              />
+            )
+          }
+        </AssetProvider>
+      ) : null}
+    </>
   ) : null
 }
 

webapp/src/components/AssetPage/BidsTable/BidsTable.types.ts

@@ -1,10 +1,17 @@
+import { Dispatch } from 'redux'
+import { Bid } from '@dcl/schemas'
 import { VendorName } from '../../../modules/vendor'
 import { NFT } from '../../../modules/nft/types'
+import { AcceptBidRequestAction } from '../../../modules/bid/actions'
 
 export type Props = {
   nft: NFT<VendorName.DECENTRALAND> | null
   address?: string
+  onAccept: (bid: Bid) => void
+  isAcceptingBid: boolean
 }
 
-export type MapStateProps = Pick<Props, 'address'>
-export type MapDispatchProps = {}
+export type MapStateProps = Pick<Props, 'address' | 'isAcceptingBid'>
+
+export type MapDispatchProps = Pick<Props, 'onAccept'>
+export type MapDispatch = Dispatch<AcceptBidRequestAction>

webapp/src/components/AssetPage/BidsTable/utils.tsx

@@ -1,6 +1,6 @@
 import { Bid } from '@dcl/schemas'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
-import { Mana } from 'decentraland-ui'
+import { Button, Mana } from 'decentraland-ui'
 import { formatDistanceToNow, getDateAndMonthName } from '../../../lib/date'
 import { formatWeiMANA } from '../../../lib/mana'
 import { LinkedProfile } from '../../LinkedProfile'
@@ -10,41 +10,44 @@ import styles from './BidsTable.module.css'
 
 export const formatDataToTable = (
   bids: Bid[],
-  userAddress?: string
+  setShowConfirmationModal: (bid: Bid) => void,
+  address?: string | null
 ): DataTableType[] => {
   return bids.reduce((accumulator: DataTableType[], bid: Bid) => {
-    if (bid.bidAddress !== userAddress) {
-      const value: DataTableType = {
-        [t('offers_table.from')]: (
-          <LinkedProfile
-            className={styles.linkedProfileRow}
-            address={bid.bidder}
-          />
-        ),
-        [t('offers_table.published_date')]: getDateAndMonthName(bid.createdAt),
-        [t('offers_table.expiration_date')]: formatDistanceToNow(
-          +bid.expiresAt,
-          {
-            addSuffix: true
-          }
-        ),
-        [t('listings_table.price')]: (
-          <div className={styles.viewListingContainer}>
-            <div className={styles.manaField}>
-              <Mana className="manaField" network={bid.network}>
-                {formatWeiMANA(bid.price)}
-              </Mana>{' '}
-              &nbsp;
-              {'('}
-              <ManaToFiat mana={bid.price} />
-              {')'}
-            </div>
+    const value: DataTableType = {
+      [t('offers_table.from')]: (
+        <LinkedProfile
+          className={styles.linkedProfileRow}
+          address={bid.bidder}
+        />
+      ),
+      [t('offers_table.published_date')]: getDateAndMonthName(bid.createdAt),
+      [t('offers_table.expiration_date')]: formatDistanceToNow(+bid.expiresAt, {
+        addSuffix: true
+      }),
+      [t('listings_table.price')]: (
+        <div className={styles.viewListingContainer}>
+          <div className={styles.manaField}>
+            <Mana className="manaField" network={bid.network}>
+              {formatWeiMANA(bid.price)}
+            </Mana>{' '}
+            &nbsp;
+            {'('}
+            <ManaToFiat mana={bid.price} />
+            {')'}
           </div>
-        )
-      }
-      return [...accumulator, value]
-    } else {
-      return accumulator
+          {address === bid.seller ? (
+            <Button
+              primary
+              onClick={() => setShowConfirmationModal(bid)}
+              size="small"
+            >
+              {t('offers_table.accept')}
+            </Button>
+          ) : null}
+        </div>
+      )
     }
+    return [...accumulator, value]
   }, [])
 }

webapp/src/components/AssetPage/YourOffer/YourOffer.module.css

@@ -3,6 +3,7 @@
   border-radius: 10px;
   display: flex;
   flex-direction: column;
+  margin-top: 30px;
   padding: 30px;
 }
 

webapp/src/modules/translation/locales/en.json

@@ -600,7 +600,8 @@
     "remove": "Remove",
     "most_expensive": "Highest",
     "recenty_offered": "Recently offered",
-    "recently_updated": "Recently updated"
+    "recently_updated": "Recently updated",
+    "accept": "Accept"
   },
   "listings_table": {
     "other_availbale_listings": "Other available listings",

webapp/src/modules/translation/locales/es.json

@@ -594,7 +594,8 @@
     "remove": "Eliminar",
     "most_expensive": "Más Caro",
     "recenty_offered": "Ofrecido recientemente",
-    "recently_updated": "Actualizado recientemente"
+    "recently_updated": "Actualizado recientemente",
+    "accept": "Aceptar"
   },
   "listings_table": {
     "other_availbale_listings": "Otros coleccionables disponibles",

webapp/src/modules/translation/locales/zh.json

@@ -597,7 +597,8 @@
     "remove": "刪除",
     "most_expensive": "最貴",
     "recenty_offered": "最近提供",
-    "recently_updated": "最近更新"
+    "recently_updated": "最近更新",
+    "accept": "接受"
   },
   "listings_table": {
     "other_availbale_listings": "其他可用的收藏品",

webapp/src/modules/vendor/decentraland/bid/api.spec.ts

@@ -38,7 +38,7 @@ describe('when fetching bids by nft', () => {
 
     expect(bidAPI.request).toHaveBeenCalledWith(
       'get',
-      '/bids?contractAddress=0x123&tokenId=123&status=open&first=1000'
+      '/bids?contractAddress=0x123&tokenId=123&status=open&first=1000&skip=0'
     )
   })
 })