Merge pull request #244 from decentraland/feat/pending-failure-buy-ma…

…na-feedback-modal

feat: Open Buy MANA with FIAT modal using the openModal action

package.json

@@ -27,9 +27,9 @@
     "case-sensitive-paths-webpack-plugin": "2.3.0",
     "connected-react-router": "^6.9.1",
     "css-loader": "4.3.0",
-    "decentraland-dapps": "^13.21.0",
+    "decentraland-dapps": "^13.25.0",
     "decentraland-transactions": "^1.22.2",
-    "decentraland-ui": "^3.66.0",
+    "decentraland-ui": "^3.69.2",
     "dotenv": "8.2.0",
     "dotenv-expand": "5.1.0",
     "eslint": "^7.11.0",

src/components/HomePage/AccountCard/AccountCardHeader/AccountCardHeader.container.tsx

@@ -1,13 +1,15 @@
-import { getAddress } from 'decentraland-dapps/dist/modules/wallet/selectors'
 import { connect } from 'react-redux'
+import { Network } from '@dcl/schemas'
+import { getAddress } from 'decentraland-dapps/dist/modules/wallet/selectors'
+import { openBuyManaWithFiatModalRequest } from 'decentraland-dapps/dist/modules/manaFiatGateway/actions'
 import { openModal } from '../../../../modules/modal/actions'
 import { RootState } from '../../../../modules/reducer'
-import AccountCardHeader from './AccountCardHeader'
 import {
   MapDispatch,
   MapDispatchProps,
   MapStateProps,
 } from './AccountCardHeader.types'
+import AccountCardHeader from './AccountCardHeader'
 
 const mapState = (state: RootState): MapStateProps => ({
   address: getAddress(state),
@@ -20,6 +22,8 @@ const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
   onImportWithdrawal: () => dispatch(openModal('ImportWithdrawalModal')),
   onReceive: (network, address) =>
     dispatch(openModal('ReceiveManaModal', { network, address })),
+  onAddTokens: (selectedNetwork: Network) =>
+    dispatch(openBuyManaWithFiatModalRequest(selectedNetwork)),
 })
 
 export default connect(mapState, mapDispatch)(AccountCardHeader)

src/components/HomePage/AccountCard/AccountCardHeader/AccountCardHeader.tsx

@@ -1,9 +1,8 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { Network } from '@dcl/schemas'
 import { Button, Dropdown, Popup } from 'decentraland-ui'
 import { getAnalytics } from 'decentraland-dapps/dist/modules/analytics/utils'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
-import BuyManaWithFiatModal from 'decentraland-dapps/dist/containers/BuyManaWithFiatModal'
 import { Props } from './AccountCardHeader.types'
 import './AccountCardHeader.css'
 
@@ -16,12 +15,10 @@ const AccountCardHeader = ({
   onReceive,
   onConvert,
   onImportWithdrawal,
+  onAddTokens,
 }: Props) => {
   const analytics = getAnalytics()
 
-  const [isOpenBuyManaWithFiatModal, setIsOpenBuyManaWithFiatModal] =
-    useState(false)
-
   const handleTransferMana = () => onTransfer(network)
 
   const handleReceiveMana = () => {
@@ -36,11 +33,7 @@ const AccountCardHeader = ({
 
   const handleAddTokens = () => {
     analytics.track('Open BUY MANA modal')
-    setIsOpenBuyManaWithFiatModal(true)
-  }
-
-  const handleCloseBuyManaWithFiatModal = () => {
-    setIsOpenBuyManaWithFiatModal(!isOpenBuyManaWithFiatModal)
+    onAddTokens(network)
   }
 
   const handleConvert = () => onConvert(network)
@@ -53,11 +46,6 @@ const AccountCardHeader = ({
 
   return (
     <>
-      <BuyManaWithFiatModal
-        open={isOpenBuyManaWithFiatModal}
-        selectedNetwork={network}
-        onClose={handleCloseBuyManaWithFiatModal}
-      />
       <div className="AccountCardHeader">
         <div className="title">
           <div className="title-text-container">

src/components/HomePage/AccountCard/AccountCardHeader/AccountCardHeader.types.tsx

@@ -1,7 +1,11 @@
-import { Network } from '@dcl/schemas'
 import { Dispatch } from 'redux'
+import { Network } from '@dcl/schemas'
+import {
+  openBuyManaWithFiatModalRequest,
+  OpenBuyManaWithFiatModalRequestAction,
+  OpenManaFiatGatewayRequestAction,
+} from 'decentraland-dapps/dist/modules/manaFiatGateway/actions'
 import { OpenModalAction } from '../../../../modules/modal/actions'
-import { OpenManaFiatGatewayRequestAction } from 'decentraland-dapps/dist/modules/manaFiatGateway/actions'
 
 export type Props = {
   address?: string
@@ -12,13 +16,22 @@ export type Props = {
   onReceive: (network: Network, address: string) => void
   onConvert: (network: Network) => void
   onImportWithdrawal: () => void
+  onAddTokens: (
+    selectedNetwork: Network
+  ) => ReturnType<typeof openBuyManaWithFiatModalRequest>
 }
 
 export type MapStateProps = Pick<Props, 'address'>
 export type MapDispatchProps = Pick<
   Props,
-  'onTransfer' | 'onReceive' | 'onConvert' | 'onImportWithdrawal'
+  | 'onTransfer'
+  | 'onReceive'
+  | 'onConvert'
+  | 'onImportWithdrawal'
+  | 'onAddTokens'
 >
 export type MapDispatch = Dispatch<
-  OpenModalAction | OpenManaFiatGatewayRequestAction
+  | OpenModalAction
+  | OpenBuyManaWithFiatModalRequestAction
+  | OpenManaFiatGatewayRequestAction
 >

src/components/Modals/index.ts

@@ -1,3 +1,4 @@
+export { default as BuyManaWithFiatModal } from 'decentraland-dapps/dist/containers/BuyManaWithFiatModal'
 export { BuyManaWithFiatFeedbackModal } from 'decentraland-dapps/dist/containers/BuyManaWithFiatModal/BuyManaWithFiatFeedbackModal'
 export { default as TestModal } from './TestModal'
 export { default as TransactionDetailModal } from './TransactionDetailModal'