feat: added support for bids on polygon (decentraland#485)

* feat: added support for bids on polygon

* fix: correct mana logo on tx details

* fix: accept bid

* fix: wrong chainId

* chore: added tests

webapp/.vscode/settings.json

@@ -1,4 +1,4 @@
 {
   "editor.formatOnSave": true,
   "typescript.tsdk": "node_modules/typescript/lib"
-}
+}

webapp/package.json

@@ -2,14 +2,14 @@
   "name": "marketplace-ui",
   "version": "0.4.0",
   "dependencies": {
-    "@dcl/schemas": "^1.5.1",
+    "@dcl/schemas": "^3.0.0",
     "apollo-boost": "^0.4.7",
     "bn.js": "^5.2.0",
     "classnames": "^2.3.1",
     "connected-react-router": "^6.9.1",
     "date-fns": "^2.23.0",
     "decentraland-dapps": "^12.32.0",
-    "decentraland-transactions": "^1.23.1",
+    "decentraland-transactions": "^1.29.0",
     "decentraland-ui": "^3.15.0",
     "dotenv": "^10.0.0",
     "graphql": "^14.7.0",

webapp/src/components/ActivityPage/Transaction/Transaction.tsx

@@ -253,7 +253,11 @@ const Transaction = (props: Props) => {
                         {nft ? getAssetName(nft) : ''}
                       </Link>
                     ),
-                    price: <Mana inline>{price.toLocaleString()}</Mana>
+                    price: (
+                      <Mana network={nft?.network} inline>
+                        {price.toLocaleString()}
+                      </Mana>
+                    )
                   }}
                 />
               }
@@ -283,7 +287,11 @@ const Transaction = (props: Props) => {
                         {nft ? getAssetName(nft) : ''}
                       </Link>
                     ),
-                    price: <Mana inline>{price.toLocaleString()}</Mana>
+                    price: (
+                      <Mana inline network={nft?.network}>
+                        {price.toLocaleString()}
+                      </Mana>
+                    )
                   }}
                 />
               }
@@ -313,7 +321,11 @@ const Transaction = (props: Props) => {
                         {nft ? getAssetName(nft) : ''}
                       </Link>
                     ),
-                    price: <Mana inline>{price.toLocaleString()}</Mana>
+                    price: (
+                      <Mana inline network={nft?.network}>
+                        {price.toLocaleString()}
+                      </Mana>
+                    )
                   }}
                 />
               }

webapp/src/components/AssetPage/Actions/Actions.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
 import { Link } from 'react-router-dom'
-import { Network } from '@dcl/schemas'
 import { Modal, Button } from 'decentraland-ui'
 import { T, t } from 'decentraland-dapps/dist/modules/translation/utils'
 
@@ -25,7 +24,6 @@ const Actions = (props: Props) => {
   const canBid =
     !isOwner &&
     isBiddable &&
-    nft.network === Network.ETHEREUM &&
     (!wallet || !bids.some(bid => bid.bidder === wallet.address))
 
   return (

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

@@ -1,7 +1,7 @@
+import { Bid } from '@dcl/schemas'
 import { Wallet } from 'decentraland-dapps/dist/modules//wallet/types'
 import { NFT } from '../../../modules/nft/types'
 import { Order } from '../../../modules/order/types'
-import { Bid } from '../../../modules/bid/types'
 
 export type Props = {
   wallet: Wallet | null

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

@@ -1,6 +1,6 @@
 import { Dispatch } from 'redux'
+import { Bid } from '@dcl/schemas'
 import { NFT } from '../../../modules/nft/types'
-import { Bid } from '../../../modules/bid/types'
 import {
   fetchBidsByNFTRequest,
   FetchBidsByNFTRequestAction

webapp/src/components/AssetPage/TransactionHistory/TransactionHistory.tsx

@@ -1,5 +1,6 @@
 import { Link } from 'react-router-dom'
 import React, { useState, useEffect } from 'react'
+import { Bid } from '@dcl/schemas'
 import { Header, Table, Responsive } from 'decentraland-ui'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { Profile } from 'decentraland-dapps/dist/containers'
@@ -8,11 +9,10 @@ import dateFnsFormat from 'date-fns/format'
 import { Mana } from '../../Mana'
 import { locations } from '../../../modules/routing/locations'
 import { VendorFactory } from '../../../modules/vendor'
-import { Bid } from '../../../modules/bid/types'
 import { Order, OrderStatus } from '../../../modules/order/types'
 import { formatDistanceToNow } from '../../../lib/date'
 import { formatMANA } from '../../../lib/mana'
-import { Props, HistoryEvent, UnionOrderBid } from './TransactionHistory.types'
+import { Props, HistoryEvent } from './TransactionHistory.types'
 import './TransactionHistory.css'
 
 const INPUT_FORMAT = 'PPP'
@@ -32,7 +32,7 @@ const formatDateTitle = (updatedAt: number) => {
 const sortByUpdatedAt = (a: { updatedAt: number }, b: { updatedAt: number }) =>
   a.updatedAt > b.updatedAt ? -1 : 1
 
-const toEvent = (orderOrBid: UnionOrderBid): HistoryEvent => ({
+const toEvent = (orderOrBid: any): HistoryEvent => ({
   from: orderOrBid.owner! || orderOrBid.seller!,
   to: orderOrBid.buyer! || orderOrBid.bidder!,
   price: orderOrBid.price!,

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

@@ -1,5 +1,5 @@
+import { Bid } from '@dcl/schemas'
 import { NFT } from '../../../modules/nft/types'
-import { Bid } from '../../../modules/bid/types'
 import { Order } from '../../../modules/order/types'
 
 export type Props = {

webapp/src/components/Bid/AcceptButton/AcceptButton.types.ts

@@ -1,4 +1,4 @@
-import { Bid } from '../../../modules/bid/types'
+import { Bid } from '@dcl/schemas'
 import { NFT } from '../../../modules/nft/types'
 
 export type Props = {

webapp/src/components/Bid/Bid.tsx

@@ -67,7 +67,7 @@ const Bid = (props: Props) => {
               </Link>
             </Stats>
             <Stats title={t('bid.price')}>
-              <Mana>{formatMANA(bid.price)}</Mana>
+              <Mana network={bid.network}>{formatMANA(bid.price)}</Mana>
             </Stats>
             <Stats title={t('bid.time_left')}>
               {formatDistanceToNow(+bid.expiresAt)}

webapp/src/components/Bid/Bid.types.ts

@@ -1,7 +1,7 @@
 import { Dispatch } from 'redux'
 import { CallHistoryMethodAction } from 'connected-react-router'
+import { Bid } from '@dcl/schemas'
 import { Wallet } from 'decentraland-dapps/dist/modules/wallet/types'
-import { Bid } from '../../modules/bid/types'
 import {
   CancelBidRequestAction,
   ArchiveBidAction,

webapp/src/components/Bid/WarningMessage/WarningMessage.types.ts

@@ -1,4 +1,4 @@
-import { Bid } from '../../../modules/bid/types'
+import { Bid } from '@dcl/schemas'
 import { NFT } from '../../../modules/nft/types'
 
 export type Props = {

webapp/src/components/BidPage/BidModal/BidModal.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useCallback } from 'react'
-import { Network } from '@dcl/schemas'
 import { Header, Form, Field, Button } from 'decentraland-ui'
 import { ContractName } from 'decentraland-transactions'
 import { t, T } from 'decentraland-dapps/dist/modules/translation/utils'
@@ -81,9 +80,7 @@ const BidModal = (props: Props) => {
 
   const isInvalidDate = +new Date(expiresAt) < Date.now()
   const hasInsufficientMANA =
-    !!price &&
-    !!wallet &&
-    fromMANA(price) > wallet.networks[Network.ETHEREUM].mana
+    !!price && !!wallet && fromMANA(price) > wallet.networks[nft.network].mana
 
   return (
     <AssetAction asset={nft}>
@@ -99,7 +96,7 @@ const BidModal = (props: Props) => {
       <Form onSubmit={handleSubmit}>
         <div className="form-fields">
           <ManaField
-            network={Network.ETHEREUM}
+            network={nft.network}
             label={t('bid_page.price')}
             placeholder={toMANA(1000)}
             value={price}
@@ -113,7 +110,7 @@ const BidModal = (props: Props) => {
             }
           />
           <Field
-            network={Network.ETHEREUM}
+            network={nft.network}
             label={t('bid_page.expiration_date')}
             type="date"
             value={expiresAt}

webapp/src/components/MyBidsPage/MyBidsPage.types.ts

@@ -1,7 +1,7 @@
 import { Dispatch } from 'redux'
 import { CallHistoryMethodAction } from 'connected-react-router'
+import { Bid } from '@dcl/schemas'
 import { Wallet } from 'decentraland-dapps/dist/modules/wallet/types'
-import { Bid } from '../../modules/bid/types'
 import {
   fetchBidsByAddressRequest,
   FetchBidsByAddressRequestAction

webapp/src/modules/bid/actions.ts

@@ -1,8 +1,7 @@
 import { action } from 'typesafe-actions'
-import { ChainId } from '@dcl/schemas'
+import { Bid, ChainId } from '@dcl/schemas'
 import { buildTransactionPayload } from 'decentraland-dapps/dist/modules/transaction/utils'
 import { NFT } from '../nft/types'
-import { Bid } from './types'
 import { formatMANA } from '../../lib/mana'
 
 // Place Bid

webapp/src/modules/bid/reducer.ts

@@ -1,9 +1,9 @@
+import { Bid } from '@dcl/schemas'
 import {
   LoadingState,
   loadingReducer
 } from 'decentraland-dapps/dist/modules/loading/reducer'
 import { toBidObject } from './utils'
-import { Bid } from './types'
 import {
   FetchBidsByAddressRequestAction,
   FetchBidsByAddressSuccessAction,

webapp/src/modules/bid/sagas.ts

@@ -1,6 +1,5 @@
 import { push } from 'connected-react-router'
-import { ChainId } from '@dcl/schemas'
-import { getChainId } from 'decentraland-dapps/dist/modules/wallet/selectors'
+import { Bid } from '@dcl/schemas'
 import { takeEvery, put, select, call } from 'redux-saga/effects'
 import {
   PLACE_BID_REQUEST,
@@ -29,7 +28,6 @@ import { locations } from '../routing/locations'
 import { VendorFactory } from '../vendor/VendorFactory'
 import { getContract } from '../contract/utils'
 import { VendorName } from '../vendor/types'
-import { Bid } from './types'
 
 export function* bidSaga() {
   yield takeEvery(PLACE_BID_REQUEST, handlePlaceBidRequest)
@@ -51,13 +49,12 @@ function* handlePlaceBidRequest(action: PlaceBidRequestAction) {
     const txHash: string = yield call(() =>
       bidService!.place(wallet, nft, price, expiresAt, fingerprint)
     )
-    const chainId: ChainId = yield select(getChainId)
     yield put(
       placeBidSuccess(
         nft,
         price,
         expiresAt,
-        chainId,
+        nft.chainId,
         txHash,
         wallet!.address,
         fingerprint
@@ -83,8 +80,7 @@ function* handleAcceptBidRequest(action: AcceptBidRequestAction) {
     const wallet: ReturnType<typeof getWallet> = yield select(getWallet)
     const txHash: string = yield call(() => bidService!.accept(wallet, bid))
 
-    const chainId: ChainId = yield select(getChainId)
-    yield put(acceptBidSuccess(bid, chainId, txHash))
+    yield put(acceptBidSuccess(bid, bid.chainId, txHash))
     yield put(push(locations.activity()))
   } catch (error) {
     yield put(acceptBidFailure(bid, error.message))
@@ -103,10 +99,9 @@ function* handleCancelBidRequest(action: CancelBidRequestAction) {
     const { bidService } = VendorFactory.build(contract.vendor)
 
     const wallet: ReturnType<typeof getWallet> = yield select(getWallet)
-    const chainId: ChainId = yield select(getChainId)
     const txHash: string = yield call(() => bidService!.cancel(wallet, bid))
 
-    yield put(cancelBidSuccess(bid, chainId, txHash))
+    yield put(cancelBidSuccess(bid, bid.chainId, txHash))
     yield put(push(locations.activity()))
   } catch (error) {
     yield put(cancelBidFailure(bid, error.message))

webapp/src/modules/bid/utils.ts

@@ -1,9 +1,8 @@
 import { Address } from 'web3x/address'
 import { Eth } from 'web3x/eth'
 import { getConnectedProvider } from 'decentraland-dapps/dist/lib/eth'
-import { Network } from '@dcl/schemas'
+import { Bid, Network } from '@dcl/schemas'
 import { MANA } from '../../contracts/MANA'
-import { Bid } from './types'
 import { getContractNames } from '../vendor'
 import { getContract } from '../contract/utils'
 

webapp/src/modules/ui/nft/bid/selectors.ts

@@ -1,8 +1,8 @@
 import { createSelector } from 'reselect'
+import { Bid } from '@dcl/schemas'
 import { getData as getBidData } from '../../../bid/selectors'
 import { RootState } from '../../../reducer'
 import { BidState } from '../../../bid/reducer'
-import { Bid } from '../../../bid/types'
 import { BidUIState } from './reducer'
 
 export const getState = (state: RootState) => state.ui.nft.bid