feat: Use manual contract authorization modal on operations that require gas (#2381)

Author: LautaroPetaccio

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

@@ -5,12 +5,13 @@ import { getLoading } from 'decentraland-dapps/dist/modules/wallet/selectors'
 import { ACCEPT_BID_REQUEST, acceptBidRequest } from '../../../../modules/bid/actions'
 import { getIsBidsOffChainEnabled } from '../../../../modules/features/selectors'
 import { RootState } from '../../../../modules/reducer'
-import { getAddress } from '../../../../modules/wallet/selectors'
+import { getAddress, getWallet } from '../../../../modules/wallet/selectors'
 import BidsTableContent from './BidsTableContent'
 import { MapDispatchProps, MapStateProps } from './BidsTableContent.types'
 
 const mapState = (state: RootState): MapStateProps => ({
   address: getAddress(state),
+  connectedNetwork: getWallet(state)?.network,
   isAcceptingBid: isLoadingType(getLoading(state), ACCEPT_BID_REQUEST),
   isBidsOffchainEnabled: getIsBidsOffChainEnabled(state)
 })

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

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import { useHistory } from 'react-router-dom'
 import { ethers } from 'ethers'
-import { Bid, ListingStatus } from '@dcl/schemas'
+import { Bid, ListingStatus, Network } from '@dcl/schemas'
 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'
@@ -32,6 +32,7 @@ export function BidsTableContent({
   asset,
   isBidsOffchainEnabled,
   address,
+  connectedNetwork,
   sortBy,
   isAcceptingBid,
   onAccept,
@@ -119,9 +120,11 @@ export function BidsTableContent({
   }, [asset, setIsLoading, setBids, page, sortBy, address, isMobileOrTablet])
 
   const handleConfirm = (bid: Bid) => {
+    const isAuthorizationCostingGas =
+      bid.network === Network.ETHEREUM || (bid.network as Network.ETHEREUM | Network.MATIC) === connectedNetwork
     const options = getAcceptBidAuthorizationOptions(bid, () => onAccept(bid), targetContractLabel)
     if (isBidsOffchainEnabled && options) {
-      onAuthorizedAction(options)
+      onAuthorizedAction({ ...options, manual: isAuthorizationCostingGas })
       return
     }
     onAccept(bid)

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

@@ -1,15 +1,16 @@
-import { Bid, BidSortBy } from '@dcl/schemas'
+import { Bid, BidSortBy, Network } from '@dcl/schemas'
 import { WithAuthorizedActionProps } from 'decentraland-dapps/dist/containers/withAuthorizedAction'
 import { Asset } from '../../../../modules/asset/types'
 
 export type Props = WithAuthorizedActionProps & {
   address?: string
+  connectedNetwork?: Network
   asset: Asset
   isBidsOffchainEnabled: boolean
   onAccept: (bid: Bid) => void
   isAcceptingBid: boolean
   sortBy: BidSortBy
 }
 
-export type MapStateProps = Pick<Props, 'isBidsOffchainEnabled' | 'address' | 'isAcceptingBid'>
+export type MapStateProps = Pick<Props, 'isBidsOffchainEnabled' | 'address' | 'isAcceptingBid' | 'connectedNetwork'>
 export type MapDispatchProps = Pick<Props, 'onAccept'>

webapp/src/components/Bid/Bid.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useState } from 'react'
 import { Link, useHistory } from 'react-router-dom'
 import { ethers } from 'ethers'
+import { Network } from '@dcl/schemas'
 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'
@@ -51,11 +52,13 @@ const Bid = (props: Props) => {
   const isNftBid = 'tokenId' in bid
   const assetType = isNftBid ? AssetType.NFT : AssetType.ITEM
   const tokenId = isNftBid ? bid.tokenId : bid.itemId
+  const isAuthorizationCostingGas =
+    bid.network === Network.ETHEREUM || (bid.network as Network.ETHEREUM | Network.MATIC) === wallet?.network
 
   const handleConfirm = useCallback(() => {
     const options = getAcceptBidAuthorizationOptions(bid, () => onAccept(bid), targetContractLabel)
     if (isBidsOffchainEnabled && options) {
-      onAuthorizedAction(options)
+      onAuthorizedAction({ ...options, manual: isAuthorizationCostingGas })
     } else {
       onAccept(bid)
     }

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

@@ -1,6 +1,6 @@
 import React, { useState, useCallback, useMemo } from 'react'
 import { ethers } from 'ethers'
-import { ChainId, Contract, NFTCategory } from '@dcl/schemas'
+import { ChainId, Contract, Network, 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'
@@ -76,8 +76,11 @@ const BidModal = (props: Props) => {
 
   const handleConfirmBid = () => {
     const { onAuthorizedAction, onClearBidError } = props
+    const isAuthorizationCostingGas =
+      asset.network === Network.ETHEREUM || (asset.network as Network.ETHEREUM | Network.MATIC) === wallet?.network
     onClearBidError()
     onAuthorizedAction({
+      manual: isAuthorizationCostingGas,
       targetContractName: ContractName.MANAToken,
       authorizedAddress: isBidsOffchainEnabled && !!offchainBidsContract ? offchainBidsContract.address : bids.address,
       targetContract: mana as Contract,

webapp/src/components/Modals/ConfirmRentModal/ConfirmRentModal.tsx

@@ -69,6 +69,7 @@ const ConfirmRentModal = ({
     if (operatorAddress && mana && rentals) {
       onClearRentalErrors()
       onAuthorizedAction({
+        manual: true,
         targetContractName: ContractName.MANAToken,
         authorizedAddress: rentals.address,
         targetContract: mana as Contract,

webapp/src/components/Modals/RentalListingModal/AuthorizationStep/AuthorizationStep.container.ts

@@ -7,25 +7,31 @@ import {
 } from 'decentraland-dapps/dist/modules/authorization/actions'
 import { getError, getLoading as getAuthorizationLoading } from 'decentraland-dapps/dist/modules/authorization/selectors'
 import { isLoadingType } from 'decentraland-dapps/dist/modules/loading/selectors'
+import { isWeb2Wallet } from 'decentraland-dapps/dist/modules/wallet/utils'
 import { ContractName, getContract } from 'decentraland-transactions'
+import { getIsMagicAutoSignEnabled } from '../../../../modules/features/selectors'
 import { RootState } from '../../../../modules/reducer'
 import { getPendingAuthorizationTransactions } from '../../../../modules/transaction/selectors'
 import { hasTransactionPending } from '../../../../modules/transaction/utils'
-import { getAddress } from '../../../../modules/wallet/selectors'
+import { getAddress, getWallet } from '../../../../modules/wallet/selectors'
 import AuthorizationStep from './AuthorizationStep'
 import { MapStateProps, MapDispatchProps, MapDispatch, OwnProps } from './AuthorizationStep.types'
 
-const mapState = (state: RootState, { nft }: OwnProps): MapStateProps => ({
-  address: getAddress(state)!,
-  isAuthorizing: hasTransactionPending(
-    getPendingAuthorizationTransactions(state),
-    getContract(ContractName.Rentals, nft.chainId).address,
-    nft.contractAddress
-  ),
-  isConfirmingAuthorization: isLoadingType(getAuthorizationLoading(state), GRANT_TOKEN_REQUEST),
-  error: getError(state),
-  isFetchingAuthorizations: isLoadingType(getAuthorizationLoading(state), FETCH_AUTHORIZATIONS_REQUEST)
-})
+const mapState = (state: RootState, { nft }: OwnProps): MapStateProps => {
+  const wallet = getWallet(state)
+  return {
+    address: getAddress(state)!,
+    isWeb2AutoSigning: getIsMagicAutoSignEnabled(state) && wallet !== null && isWeb2Wallet(wallet),
+    isAuthorizing: hasTransactionPending(
+      getPendingAuthorizationTransactions(state),
+      getContract(ContractName.Rentals, nft.chainId).address,
+      nft.contractAddress
+    ),
+    isConfirmingAuthorization: isLoadingType(getAuthorizationLoading(state), GRANT_TOKEN_REQUEST),
+    error: getError(state),
+    isFetchingAuthorizations: isLoadingType(getAuthorizationLoading(state), FETCH_AUTHORIZATIONS_REQUEST)
+  }
+}
 
 const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
   onAuthorize: authorization => dispatch(grantTokenRequest(authorization)),

webapp/src/components/Modals/RentalListingModal/AuthorizationStep/AuthorizationStep.tsx

@@ -14,6 +14,7 @@ const AuthorizationStep = (props: Props) => {
     onCancel,
     address,
     isAuthorizing,
+    isWeb2AutoSigning,
     isConfirmingAuthorization,
     nft,
     error,
@@ -121,7 +122,7 @@ const AuthorizationStep = (props: Props) => {
             {isConfirmingAuthorization ? (
               <div className={styles.confirmTransaction}>
                 <Loader active size="small" className={styles.confirmTransactionLoader} />
-                <p>{t('rental_modal.authorization_step.confirm')}</p>
+                <p>{!isWeb2AutoSigning ? t('rental_modal.authorization_step.confirm') : null}</p>
               </div>
             ) : (
               <Button primary fluid loading={isLoading} onClick={handleSubmit} disabled={isLoading}>

webapp/src/components/Modals/RentalListingModal/AuthorizationStep/AuthorizationStep.types.ts

@@ -11,6 +11,7 @@ export type Props = {
   nft: NFT
   isAuthorizing: boolean
   isConfirmingAuthorization: boolean
+  isWeb2AutoSigning: boolean
   address: string
   error: string | null
   isFetchingAuthorizations: boolean
@@ -19,7 +20,10 @@ export type Props = {
   onFetchAuthorizations: typeof fetchAuthorizationsRequest
 }
 
-export type MapStateProps = Pick<Props, 'address' | 'isAuthorizing' | 'isConfirmingAuthorization' | 'error' | 'isFetchingAuthorizations'>
+export type MapStateProps = Pick<
+  Props,
+  'address' | 'isAuthorizing' | 'isConfirmingAuthorization' | 'error' | 'isFetchingAuthorizations' | 'isWeb2AutoSigning'
+>
 export type MapDispatchProps = Pick<Props, 'onAuthorize' | 'onFetchAuthorizations'>
 export type MapDispatch = Dispatch<GrantTokenRequestAction | FetchAuthorizationsRequestAction>
 export type OwnProps = Pick<Props, 'nft' | 'onCancel'>

webapp/src/components/SellPage/SellModal/SellModal.tsx

@@ -123,7 +123,10 @@ const SellModal = (props: Props) => {
 
   const handleSubmit = () => {
     onClearOrderErrors()
+    const isAuthorizationCostingGas =
+      nft.network === Network.ETHEREUM || (nft.network as Network.ETHEREUM | Network.MATIC) === wallet.network
     onAuthorizedAction({
+      manual: isAuthorizationCostingGas,
       authorizationType: AuthorizationType.APPROVAL,
       authorizedAddress:
         !!offchainOrdersContract && isOffchainPublicNFTOrdersEnabled ? offchainOrdersContract.address : marketplace.address,