feat: bump dcl dapps and also put minium meta tx check to bids (#2333)

decentraland · Dec 10, 2024 · d358a8b · d358a8b
1 parent 0b8f1ae
commit d358a8b
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 14 deletions.
diff --git a/webapp/package-lock.json b/webapp/package-lock.json
diff --git a/webapp/package.json b/webapp/package.json
@@ -22,8 +22,8 @@
     "dcl-catalyst-commons": "^9.0.1",
     "decentraland-connect": "^7.3.2",
     "decentraland-crypto-fetch": "^1.0.3",
-    "decentraland-dapps": "^23.15.0",
-    "decentraland-transactions": "^2.17.0",
+    "decentraland-dapps": "^23.16.0",
+    "decentraland-transactions": "^2.18.0",
     "decentraland-ui": "^6.12.1",
     "ethers": "^5.6.8",
     "graphql": "^14.7.0",

diff --git a/webapp/src/components/BidPage/BidModal/BidModal.css b/webapp/src/components/BidPage/BidModal/BidModal.css
@@ -9,7 +9,6 @@
 .BidPage .form-fields {
   margin-top: 32px;
   max-width: 420px;
-  margin-bottom: 20px;
 }
 
 .BidPage .fields .dcl.field {
@@ -34,6 +33,33 @@
   width: 100% !important;
 }
 
+.BidPage .warning {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0px;
+  text-align: center;
+  color: #ff8362;
+  margin-top: auto;
+}
+
+.BidPage .rememberFreeTxs {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  text-align: center;
+  color: #a09ba8;
+  margin-top: auto;
+}
+
+.BidPage .feeCoveredFree {
+  color: #36d41d;
+}
+
+.BidPage .buttons {
+  margin-top: 20px;
+}
+
 .clndr-control .ui.compact.icon.button,
 .clndr-control .ui.compact.icon.buttons .button {
   width: 20px !important;

diff --git a/webapp/src/components/BidPage/BidModal/BidModal.tsx b/webapp/src/components/BidPage/BidModal/BidModal.tsx
@@ -1,6 +1,6 @@
-import React, { useState, useCallback } from 'react'
+import React, { useState, useCallback, useMemo } from 'react'
 import { ethers } from 'ethers'
-import { Contract, NFTCategory } from '@dcl/schemas'
+import { ChainId, Contract, NFTCategory } from '@dcl/schemas'
 import { withAuthorizedAction, ChainButton } from 'decentraland-dapps/dist/containers'
 import { AuthorizedAction } from 'decentraland-dapps/dist/containers/withAuthorizedAction/AuthorizationModal'
 import { toFixedMANAValue } from 'decentraland-dapps/dist/lib/mana'
@@ -18,6 +18,7 @@ import { getRentalEndDate, hasRentalEnded, isRentalListingExecuted } from '../..
 import { locations } from '../../../modules/routing/locations'
 import { getContractNames } from '../../../modules/vendor'
 import { AssetAction } from '../../AssetAction'
+import { isPriceTooLow } from '../../BuyPage/utils'
 import { ConfirmInputValueModal } from '../../ConfirmInputValueModal'
 import ErrorBanner from '../../ErrorBanner'
 import { Mana } from '../../Mana'
@@ -80,13 +81,22 @@ const BidModal = (props: Props) => {
   const isInvalidDate = +new Date(`${expiresAt} 00:00:00`) < Date.now()
   const hasInsufficientMANA = !!price && !!wallet && parseMANANumber(price) > wallet.networks[asset.network].mana
 
+  // Compute if the price is too low for meta tx
+  const hasLowPriceForMetaTx = useMemo(
+    () =>
+      (wallet?.chainId as ChainId) !== ChainId.MATIC_MAINNET && !!price && isPriceTooLow(ethers.utils.parseEther(price || '0').toString()), // not connected to polygon AND has price < minimum for meta tx
+    [price, wallet?.chainId]
+  )
+  console.log('hasLowPriceForMetaTx: ', hasLowPriceForMetaTx)
+
   const isDisabled =
     isOwnedBy(asset, wallet) ||
     isInvalidPrice ||
     isInvalidDate ||
     hasInsufficientMANA ||
     isLoadingFingerprint ||
     isPlacingBid ||
+    hasLowPriceForMetaTx ||
     (!fingerprint && asset.category === NFTCategory.ESTATE) ||
     contractFingerprint !== fingerprint
 
@@ -140,6 +150,29 @@ const BidModal = (props: Props) => {
               <ErrorBanner info={t('atlas_updated_warning.fingerprint_missmatch')} />
             ) : null}
           </div>
+          {hasLowPriceForMetaTx ? (
+            <span className="warning">
+              {' '}
+              {t('buy_with_crypto_modal.price_too_low', {
+                learn_more: (
+                  <a
+                    href="https://docs.decentraland.org/player/blockchain-integration/transactions-in-polygon/#why-do-i-have-to-cover-the-tra[…]ems-that-cost-less-than-1-mana"
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    {/* TODO: add this URL */}
+                    <u> {t('buy_with_crypto_modal.learn_more')} </u>
+                  </a>
+                )
+              })}
+            </span>
+          ) : (
+            <span className="rememberFreeTxs">
+              {t('buy_with_crypto_modal.remember_transaction_fee_covered', {
+                covered: <span className="feeCoveredFree">{t('buy_with_crypto_modal.covered_for_you_by_dao')}</span>
+              })}
+            </span>
+          )}
           <div className="buttons">
             <Button
               as="div"