Feat/transak update

webapp/package.json

@@ -22,7 +22,7 @@
     "dcl-catalyst-commons": "^9.0.1",
     "decentraland-connect": "^6.3.1",
     "decentraland-crypto-fetch": "^1.0.3",
-    "decentraland-dapps": "^23.12.0",
+    "decentraland-dapps": "^23.13.0",
     "decentraland-transactions": "^2.17.0",
     "decentraland-ui": "^6.11.0",
     "ethers": "^5.6.8",

webapp/src/components/AssetPage/SaleActionBox/BuyNFTButtons/BuyNFTButtons.container.tsx

@@ -18,7 +18,7 @@ const mapState = (state: RootState): MapStateProps => ({
 })
 
 const mapDispatch = (dispatch: MapDispatch, ownProps: OwnProps): MapDispatchProps => ({
-  onExecuteOrderWithCard: nft => dispatch(executeOrderWithCardRequest(nft)),
+  onExecuteOrderWithCard: (nft, order?: Order) => dispatch(executeOrderWithCardRequest(nft, order)),
   onBuyWithCrypto: (asset: Asset, order?: Order | null) =>
     ownProps.assetType === AssetType.NFT
       ? dispatch(

webapp/src/components/AssetPage/SaleActionBox/BuyNFTButtons/BuyNFTButtons.tsx

@@ -35,9 +35,9 @@ const BuyNFTButtons = ({
   const history = useHistory()
 
   const handleBuyWithCard = useCallback(
-    (asset: Asset) => {
+    (asset: Asset, order?: Order) => {
       analytics.track(events.CLICK_GO_TO_BUY_NFT_WITH_CARD)
-      !isNFT(asset) ? onBuyItemWithCard(asset) : onExecuteOrderWithCard(asset)
+      !isNFT(asset) ? onBuyItemWithCard(asset) : onExecuteOrderWithCard(asset, order)
     },
     [analytics, onBuyItemWithCard, onExecuteOrderWithCard]
   )
@@ -65,7 +65,7 @@ const BuyNFTButtons = ({
           return (
             <>
               <BuyWithCryptoButton asset={asset} onClick={() => handleBuyWithCrypto(asset, order)} />
-              <BuyWithCardButton className={buyWithCardClassName} onClick={() => handleBuyWithCard(asset)} />
+              <BuyWithCardButton className={buyWithCardClassName} onClick={() => handleBuyWithCard(asset, order || undefined)} />
             </>
           )
         }}

webapp/src/components/BuyPage/BuyNFTModal/BuyNFTModal.containter.ts

@@ -1,4 +1,5 @@
 import { connect } from 'react-redux'
+import { Order } from '@dcl/schemas'
 import { FETCH_AUTHORIZATIONS_REQUEST } from 'decentraland-dapps/dist/modules/authorization/actions'
 import { getLoading as getLoadingAuthorizations } from 'decentraland-dapps/dist/modules/authorization/selectors'
 import { isLoadingType } from 'decentraland-dapps/dist/modules/loading/selectors'
@@ -23,7 +24,7 @@ const mapState = (state: RootState): MapStateProps => ({
 
 const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
   onExecuteOrder: (order, nft, fingerprint, silent) => dispatch(executeOrderRequest(order, nft, fingerprint, silent)),
-  onExecuteOrderWithCard: nft => dispatch(executeOrderWithCardRequest(nft)),
+  onExecuteOrderWithCard: (nft, order?: Order) => dispatch(executeOrderWithCardRequest(nft, order)),
   onClearOrderErrors: () => dispatch(clearOrderErrors())
 })
 

webapp/src/components/BuyPage/BuyNFTModal/BuyNFTModal.tsx

@@ -57,7 +57,7 @@ const BuyNFTModal = (props: Props) => {
     (alreadyAuthorized: boolean = true) => {
       if (isBuyWithCardPage) {
         analytics.track(events.CLICK_BUY_NFT_WITH_CARD)
-        return onExecuteOrderWithCard(nft)
+        return onExecuteOrderWithCard(nft, order || undefined)
       }
 
       !!order && onExecuteOrder(order, nft, fingerprint, !alreadyAuthorized)

webapp/src/components/Modals/BuyWithCardExplanationModal/BuyWithCardExplanationModal.container.ts

@@ -1,11 +1,12 @@
 import { connect } from 'react-redux'
+import { Order } from '@dcl/schemas'
 import { Asset } from '../../../modules/asset/types'
 import { openTransak } from '../../../modules/transak/actions'
 import BuyWithCardExplanationModal from './BuyWithCardExplanationModal'
 import { MapDispatch, MapDispatchProps } from './BuyWithCardExplanationModal.types'
 
 const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
-  onContinue: (asset: Asset) => dispatch(openTransak(asset))
+  onContinue: (asset: Asset, order?: Order) => dispatch(openTransak(asset, order))
 })
 
 export default connect(null, mapDispatch)(BuyWithCardExplanationModal)

webapp/src/components/Modals/BuyWithCardExplanationModal/BuyWithCardExplanationModal.tsx

@@ -6,12 +6,12 @@ import * as events from '../../../utils/events'
 import { Props } from './BuyWithCardExplanationModal.types'
 import styles from './BuyWithCardExplanationModal.module.css'
 
-const BuyWithCardExplanationModal = ({ metadata: { asset }, onContinue, onClose }: Props) => {
+const BuyWithCardExplanationModal = ({ metadata: { asset, order }, onContinue, onClose }: Props) => {
   const analytics = getAnalytics()
 
   const handleContinue = useCallback(() => {
     analytics.track(events.CONTINUE_BUY_WITH_CARD_MODAL)
-    onContinue(asset)
+    onContinue(asset, order)
   }, [analytics, asset, onContinue])
 
   const handleGoBack = useCallback(() => {

webapp/src/components/Modals/BuyWithCardExplanationModal/BuyWithCardExplanationModal.types.ts

@@ -1,10 +1,12 @@
 import { Dispatch } from 'redux'
+import { Order } from '@dcl/schemas'
 import { ModalProps } from 'decentraland-dapps/dist/providers/ModalProvider/ModalProvider.types'
 import { Asset } from '../../../modules/asset/types'
 import { openTransak, OpenTransakAction } from '../../../modules/transak/actions'
 
 export type Metadata = {
   asset: Asset
+  order?: Order
 }
 
 export type Props = Omit<ModalProps, 'metadata'> & {

webapp/src/components/Modals/SellModal/SellModal.container.ts

@@ -9,6 +9,7 @@ import { Authorization } from 'decentraland-dapps/dist/modules/authorization/typ
 import { isLoadingType } from 'decentraland-dapps/dist/modules/loading/selectors'
 import { upsertContracts } from '../../../modules/contract/actions'
 import { getContract } from '../../../modules/contract/selectors'
+import { getIsOffchainPublicNFTOrdersEnabled } from '../../../modules/features/selectors'
 import { createOrderRequest, CREATE_ORDER_REQUEST, cancelOrderRequest, CANCEL_ORDER_REQUEST } from '../../../modules/order/actions'
 import { getLoading as getLoadingOrders } from '../../../modules/order/selectors'
 import { RootState } from '../../../modules/reducer'
@@ -26,7 +27,8 @@ const mapState = (state: RootState): MapStateProps => {
     authorizations: getAuthorizations(state),
     isCreatingOrder: isLoadingType(getLoadingOrders(state), CREATE_ORDER_REQUEST),
     isAuthorizing: isLoadingType(getLoading(state), GRANT_TOKEN_REQUEST) || isLoadingType(getLoading(state), REVOKE_TOKEN_REQUEST),
-    isCancelling: isLoadingType(getLoading(state), CANCEL_ORDER_REQUEST)
+    isCancelling: isLoadingType(getLoading(state), CANCEL_ORDER_REQUEST),
+    isOffchainPublicNFTOrdersEnabled: getIsOffchainPublicNFTOrdersEnabled(state)
   }
 }
 

webapp/src/components/Modals/SellModal/SellModal.tsx

@@ -10,7 +10,7 @@ import { toFixedMANAValue } from 'decentraland-dapps/dist/lib/mana'
 import { AuthorizationType, Authorization as Authorizations } from 'decentraland-dapps/dist/modules/authorization/types'
 import { hasAuthorization } from 'decentraland-dapps/dist/modules/authorization/utils'
 import { T, t } from 'decentraland-dapps/dist/modules/translation/utils'
-import { ContractName } from 'decentraland-transactions'
+import { ContractName, getContract as getDecentralandContract } from 'decentraland-transactions'
 import { Button, Field, Loader, Mana, Message, ModalNavigation } from 'decentraland-ui'
 import { useAuthorization } from '../../../lib/authorization'
 import { formatWeiMANA, parseMANANumber } from '../../../lib/mana'
@@ -43,6 +43,7 @@ const SellModal = ({
   error,
   onFetchAuthorizations,
   isCancelling,
+  isOffchainPublicNFTOrdersEnabled,
   onCancelOrder
 }: Props) => {
   const { orderService } = VendorFactory.build(nft.vendor)
@@ -83,9 +84,13 @@ const SellModal = ({
     network: nft.network
   })
 
+  const offchainOrdersContract = isOffchainPublicNFTOrdersEnabled
+    ? getDecentralandContract(ContractName.OffChainMarketplace, nft.chainId)
+    : null
+
   const authorization: Authorizations = {
     address: wallet?.address || '',
-    authorizedAddress: marketplace!.address,
+    authorizedAddress: !!offchainOrdersContract && isOffchainPublicNFTOrdersEnabled ? offchainOrdersContract.address : marketplace!.address,
     contractAddress: nft.contractAddress,
     contractName:
       (nft.category === NFTCategory.WEARABLE || nft.category === NFTCategory.EMOTE) && nft.network === Network.MATIC

webapp/src/components/Modals/SellModal/SellModal.types.ts

@@ -24,6 +24,7 @@ export type Props = Omit<ModalProps, 'metadata'> & {
   authorizations: Authorization[]
   isCreatingOrder: boolean
   isAuthorizing: boolean
+  isOffchainPublicNFTOrdersEnabled: boolean
   onFetchAuthorizations: typeof fetchAuthorizationsRequest
   onUpsertContracts: typeof upsertContracts
   onCancelOrder: typeof cancelOrderRequest
@@ -34,7 +35,14 @@ export type OwnProps = Pick<Props, 'metadata'>
 
 export type MapStateProps = Pick<
   Props,
-  'authorizations' | 'wallet' | 'isCreatingOrder' | 'error' | 'getContract' | 'isAuthorizing' | 'isCancelling'
+  | 'authorizations'
+  | 'wallet'
+  | 'isCreatingOrder'
+  | 'error'
+  | 'getContract'
+  | 'isAuthorizing'
+  | 'isCancelling'
+  | 'isOffchainPublicNFTOrdersEnabled'
 >
 
 export type MapDispatchProps = Pick<Props, 'onCreateOrder' | 'onFetchAuthorizations' | 'onUpsertContracts' | 'onCancelOrder'>

webapp/src/components/SettingsPage/Authorization/Authorization.container.ts

@@ -10,6 +10,7 @@ import {
 import { getData as getAuthorizations, getLoading } from 'decentraland-dapps/dist/modules/authorization/selectors'
 import { areEqual } from 'decentraland-dapps/dist/modules/authorization/utils'
 import { getContract } from '../../../modules/contract/selectors'
+import { getIsOffchainPublicNFTOrdersEnabled } from '../../../modules/features/selectors'
 import { RootState } from '../../../modules/reducer'
 import { getPendingAuthorizationTransactions } from '../../../modules/transaction/selectors'
 import { hasTransactionPending } from '../../../modules/transaction/utils'
@@ -35,7 +36,8 @@ const mapState = (state: RootState, { authorization }: OwnProps): MapStateProps
     authorizations,
     pendingTransactions,
     isLoading: isLoading || hasTransactionPending(pendingTransactions, authorizedAddress, contractAddress),
-    getContract: (query: Partial<Contract>) => getContract(state, query)
+    getContract: (query: Partial<Contract>) => getContract(state, query),
+    isOffchainPublicNFTOrdersEnabled: getIsOffchainPublicNFTOrdersEnabled(state)
   }
 }
 

webapp/src/components/SettingsPage/Authorization/Authorization.tsx

@@ -6,14 +6,24 @@ import { ChainCheck, TransactionLink } from 'decentraland-dapps/dist/containers'
 import { getChainConfiguration } from 'decentraland-dapps/dist/lib/chainConfiguration'
 import { AuthorizationType } from 'decentraland-dapps/dist/modules/authorization/types'
 import { t, T } from 'decentraland-dapps/dist/modules/translation/utils'
+import { ContractName, getContract as getDecentralandContract } from 'decentraland-transactions'
 import { Form, Radio, Loader, Popup, RadioProps } from 'decentraland-ui'
 import { isAuthorized } from '../../../lib/authorization'
 import { locations } from '../../../modules/routing/locations'
 import { Props } from './Authorization.types'
 import './Authorization.css'
 
 const Authorization = (props: Props) => {
-  const { authorization, authorizations, shouldUpdateSpendingCap, isLoading, onGrant, onRevoke, getContract } = props
+  const {
+    authorization,
+    authorizations,
+    shouldUpdateSpendingCap,
+    isLoading,
+    isOffchainPublicNFTOrdersEnabled,
+    onGrant,
+    onRevoke,
+    getContract
+  } = props
 
   const handleOnChange = useCallback(
     (isChecked: boolean) => {
@@ -39,7 +49,18 @@ const Authorization = (props: Props) => {
 
   const { contractAddress, authorizedAddress } = authorization
 
-  const contract = getContract({ address: authorizedAddress })
+  let contract
+  let name: string = ''
+  if (isOffchainPublicNFTOrdersEnabled) {
+    contract = getDecentralandContract(ContractName.OffChainMarketplace, authorization.chainId)
+    name = contract.name
+  } else {
+    contract = getContract({ address: authorizedAddress })
+    if (contract) {
+      name = contract.label || contract.name
+    }
+  }
+
   const token = getContract({ address: contractAddress })
 
   if (!contract || !token) {
@@ -76,7 +97,7 @@ const Authorization = (props: Props) => {
             values={{
               contract_link: (
                 <TransactionLink address={authorizedAddress} txHash="" chainId={authorization.chainId}>
-                  {contract.label || contract.name}
+                  {name}
                 </TransactionLink>
               ),
               symbol: token.name,

webapp/src/components/SettingsPage/Authorization/Authorization.types.ts

@@ -15,13 +15,17 @@ export type Props = {
   authorizations: Authorization[]
   pendingTransactions: Transaction[]
   isLoading: boolean
+  isOffchainPublicNFTOrdersEnabled: boolean
   shouldUpdateSpendingCap?: boolean
   getContract: (query: Partial<Contract>) => ReturnType<typeof getContract>
   onGrant: typeof grantTokenRequest
   onRevoke: typeof revokeTokenRequest
 }
 
 export type OwnProps = Pick<Props, 'authorization'>
-export type MapStateProps = Pick<Props, 'authorizations' | 'pendingTransactions' | 'isLoading' | 'getContract'>
+export type MapStateProps = Pick<
+  Props,
+  'authorizations' | 'pendingTransactions' | 'isLoading' | 'getContract' | 'isOffchainPublicNFTOrdersEnabled'
+>
 export type MapDispatchProps = Pick<Props, 'onGrant' | 'onRevoke'>
 export type MapDispatch = Dispatch<GrantTokenRequestAction | RevokeTokenRequestAction>