From 4ea2d212bfa9a7ecd0c2cedba67c8c3b5aeaa6f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alvaro=20Fari=C3=B1a?= Date: Mon, 1 Feb 2021 13:20:40 -0300 Subject: [PATCH] refactor(rns-buy): reduces component complexity --- .../rns/buy/DomainOffersCheckoutPage.tsx | 171 +++++++++--------- 1 file changed, 86 insertions(+), 85 deletions(-) diff --git a/src/components/pages/rns/buy/DomainOffersCheckoutPage.tsx b/src/components/pages/rns/buy/DomainOffersCheckoutPage.tsx index 8723d4701..a9341b5fc 100644 --- a/src/components/pages/rns/buy/DomainOffersCheckoutPage.tsx +++ b/src/components/pages/rns/buy/DomainOffersCheckoutPage.tsx @@ -1,4 +1,3 @@ -import Login from 'components/atoms/Login' import RifAddress from 'components/molecules/RifAddress' import CombinedPriceCell from 'components/molecules/CombinedPriceCell' import CheckoutPageTemplate from 'components/templates/CheckoutPageTemplate' @@ -15,8 +14,8 @@ import MarketContext from 'context/Market' import RnsOffersContext from 'context/Services/rns/OffersContext' import Logger from 'utils/Logger' import { - Card, CardActions, CardContent, CardHeader, createStyles, makeStyles, Table, TableBody, - TableCell, TableRow, Theme, + Card, CardActions, CardContent, CardHeader, createStyles, makeStyles, Table, + TableBody, TableCell, TableRow, Theme, } from '@material-ui/core' import Typography from '@material-ui/core/Typography' import { @@ -31,6 +30,8 @@ import Web3 from 'web3' import ProgressOverlay from 'components/templates/ProgressOverlay' import RoundBtn from 'components/atoms/RoundBtn' import networkConfig from 'config' +import WithLoginCard from 'components/hoc/WithLoginCard' +import NotEnoughFunds from 'components/atoms/NotEnoughFunds' const { rnsManagerUrl } = networkConfig @@ -119,7 +120,7 @@ const DomainOffersCheckoutPage: FC = () => { // check funds useEffect(() => { - if (account && !isFundsConfirmed && order) { + if (!isFundsConfirmed && order) { const { item: { paymentToken: { symbol: tokenSymbol }, @@ -175,7 +176,6 @@ const DomainOffersCheckoutPage: FC = () => { } const { tokenId } = order.item - const { item: { ownerAddress, @@ -186,73 +186,68 @@ const DomainOffersCheckoutPage: FC = () => { } = order const isOwnDomain = account?.toLowerCase() === ownerAddress.toLowerCase() const currency = crypto[symbol] - - const priceCellProps = { - price: price.toString(), - priceFiat: price.mul(currency.rate).toString(), - currency: currency.displayName, - currencyFiat: currentFiat.displayName, - divider: ' ', - } - const PriceCell = - const displayName = domainName ? : - const details = { NAME: displayName, SELLER: , 'RENEWAL DATE': expirationDate.toLocaleDateString(), - PRICE: PriceCell, + PRICE: ( + + ), } const handleBuyDomain = async (): Promise => { - if (web3 && account && domainName) { - try { - setProcessingTx(true) - - const rnsContract = RNSContract.getInstance(web3, currency.symbol) - // GET PLACEMENT PRICE FROM CONTRACT - const tokenPrice = await rnsContract.getPriceString(tokenId, account) - .catch((error) => { - throw new UIError({ - error, - id: 'contract-marketplace-getPlacement', - text: `Could not retrieve placement for ${domainName} from contract.`, - }) - }) - - const transferReceipt = await rnsContract.buy( - marketPlaceAddress, tokenPrice, domainName, - tokenId, { from: account }, - ).catch((error) => { + try { + setProcessingTx(true) + const rnsContract = RNSContract.getInstance( + web3 as Web3, currency.symbol, + ) + // GET PLACEMENT PRICE FROM CONTRACT + const tokenPrice = await rnsContract.getPriceString(tokenId, account) + .catch((error) => { throw new UIError({ error, - id: 'contract-rns-buy', - text: `Could not buy domain ${domainName} from contract.`, + id: 'contract-marketplace-getPlacement', + text: `Could not retrieve placement for ${domainName} from contract.`, }) }) - logger.info('transferReceipt:', transferReceipt) + const transferReceipt = await rnsContract.buy( + marketPlaceAddress, tokenPrice, domainName as string, + tokenId, { from: account }, + ).catch((error) => { + throw new UIError({ + error, + id: 'contract-rns-buy', + text: `Could not buy domain ${domainName} from contract.`, + }) + }) - if (transferReceipt) { - setTxOperationDone(true) - confirmationsDispatch({ - type: 'NEW_REQUEST', - payload: { - contractAction: 'RNS_BUY', - txHash: transferReceipt.transactionHash, - contractActionData: { tokenId }, - }, - }) - } - } catch (e) { - logger.error(e) - reportError(e) - } finally { - setProcessingTx(false) + logger.info('transferReceipt:', transferReceipt) + + if (transferReceipt) { + setTxOperationDone(true) + confirmationsDispatch({ + type: 'NEW_REQUEST', + payload: { + contractAction: 'RNS_BUY', + txHash: transferReceipt.transactionHash, + contractActionData: { tokenId }, + }, + }) } + } catch (e) { + logger.error(e) + reportError(e) + } finally { + setProcessingTx(false) } } @@ -260,6 +255,15 @@ const DomainOffersCheckoutPage: FC = () => { ? shortenString(domainName, 30, 25) : shortChecksumAddress(tokenId) + const renderNotEnoughFunds = (): JSX.Element | undefined => { + if (isFundsConfirmed && !hasFunds) { + return ( + + ) + } + return undefined + } + return ( { - {account && isFundsConfirmed && !hasFunds && ( - - You do not have enough - {' '} - {currency.displayName} - . - - )} - {account - && ( - - {isOwnDomain &&

You cannot purchase your own offer.

} - { - !isOwnDomain && hasFunds - &&

Your wallet will open and you will be asked to confirm the transaction for buying the domain.

- } - - - )} - {!account && } + { + renderNotEnoughFunds() + } + + {isOwnDomain &&

You cannot purchase your own offer.

} + { + !isOwnDomain && hasFunds + &&

Your wallet will open and you will be asked to confirm the transaction for buying the domain.

+ } + + { isDone={txOperationDone} buttons={[ history.push(ROUTES.RNS.BUY.BASE)} > Buy another domain , { @@ -355,4 +352,8 @@ const DomainOffersCheckoutPage: FC = () => { ) } -export default DomainOffersCheckoutPage +export default WithLoginCard({ + WrappedComponent: DomainOffersCheckoutPage, + title: 'Connect your wallet to buy the domain', + contentText: 'Please, connect your wallet in order to buy a new domain.', +})