feat(rns): handles awaiting confs for buying domains

rsksmart · Jan 29, 2021 · 162b7e8 · 162b7e8
1 parent 0bd2e24
commit 162b7e8
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 42 deletions.
diff --git a/src/components/organisms/rns/sell/MyDomains.tsx b/src/components/organisms/rns/sell/MyDomains.tsx
@@ -8,6 +8,8 @@ import ROUTES from 'routes'
 import RnsDomainsContext, { RnsDomainsContextProps } from 'context/Services/rns/DomainsContext'
 import { ShortenTextTooltip } from '@rsksmart/rif-ui'
 import { MarketplaceItem } from 'components/templates/marketplace/Marketplace'
+import InfoBar from 'components/molecules/InfoBar'
+import useConfirmations from 'hooks/useConfirmations'
 
 const MyDomains: FC<{}> = () => {
   const {
@@ -18,6 +20,18 @@ const MyDomains: FC<{}> = () => {
     dispatch,
   } = useContext<RnsDomainsContextProps>(RnsDomainsContext)
   const history = useHistory()
+
+  useEffect(() => {
+    dispatch({
+      type: 'FILTER',
+      payload: {
+        status: 'owned',
+      },
+    })
+  }, [dispatch])
+
+  const buyingConfsCount = useConfirmations(['RNS_BUY']).length
+
   const routeState = history.location.state as { refresh?: boolean }
 
   if (routeState && routeState.refresh) {
@@ -30,15 +44,6 @@ const MyDomains: FC<{}> = () => {
     })
   }
 
-  useEffect(() => {
-    dispatch({
-      type: 'FILTER',
-      payload: {
-        status: 'owned',
-      },
-    })
-  }, [dispatch])
-
   const { items } = listing
 
   const headers = {
@@ -58,7 +63,12 @@ const MyDomains: FC<{}> = () => {
 
       const pseudoResolvedName = filters.name as string && (`${filters.name}.rsk`)
       const displayDomainName = name || pseudoResolvedName
-        ? <ShortenTextTooltip value={name || pseudoResolvedName} maxLength={30} />
+        ? (
+          <ShortenTextTooltip
+            value={name || pseudoResolvedName}
+            maxLength={30}
+          />
+        )
         : <AddressItem pretext="Unknown RNS:" value={tokenId} />
 
       const displayItem = {
@@ -78,22 +88,29 @@ const MyDomains: FC<{}> = () => {
                 })
                 history.push(ROUTES.RNS.SELL.CHECKOUT)
               }
-}
+            }
           />
         ),
       }
       return displayItem
     })
 
   return (
-    <MarketPageTemplate
-      filterItems={<DomainFilters />}
-      items={collection}
-      headers={headers}
-      requiresAccount
-      dispatch={dispatch}
-      outdatedCt={listing.outdatedTokens.length}
-    />
+    <>
+      <InfoBar
+        isVisible={Boolean(buyingConfsCount)}
+        text={`Awaiting confirmations for ${buyingConfsCount} domain(s)`}
+        type="info"
+      />
+      <MarketPageTemplate
+        filterItems={<DomainFilters />}
+        items={collection}
+        headers={headers}
+        requiresAccount
+        dispatch={dispatch}
+        outdatedCt={listing.outdatedTokens.length}
+      />
+    </>
   )
 }
 

diff --git a/src/components/pages/rns/buy/DomainOffersPage.tsx b/src/components/pages/rns/buy/DomainOffersPage.tsx
@@ -1,4 +1,4 @@
-import { Web3Store, ShortenTextTooltip } from '@rsksmart/rif-ui'
+import { Web3Store, ShortenTextTooltip, Spinner } from '@rsksmart/rif-ui'
 import React, { FC, useContext } from 'react'
 import { useHistory } from 'react-router-dom'
 import { AddressItem, CombinedPriceCell, SelectRowButton } from 'components/molecules'
@@ -12,6 +12,9 @@ import RnsOffersContext, { RnsOffersContextProps } from 'context/Services/rns/Of
 import { MarketplaceItem } from 'components/templates/marketplace/Marketplace'
 import { RnsSort, SORT_DIRECTION } from 'api/models/RnsFilter'
 import { TableSortLabel } from '@material-ui/core'
+import InfoBar from 'components/molecules/InfoBar'
+import useConfirmations from 'hooks/useConfirmations'
+import { BuyDomainContractData } from 'context/Confirmations/interfaces'
 
 enum SORT_TO_HEADER {
   name = 'domainName',
@@ -68,6 +71,8 @@ const DomainOffersPage: FC = () => {
     },
   } = useContext(Web3Store)
 
+  const buyingConfs = useConfirmations(['RNS_BUY'])
+
   let action1Header: JSX.Element | string = ''
 
   if (currentPage) {
@@ -142,14 +147,39 @@ const DomainOffersPage: FC = () => {
         tokenId,
       } = item
 
-      const pseudoResolvedName: string = filters.name as string && (`${filters.name}.rsk`)
+      const pseudoResolvedName = filters.name as string && (`${filters.name}.rsk`)
 
       const { rate, displayName } = crypto[paymentToken.symbol]
 
       const displayDomainName = domainName || pseudoResolvedName
-        ? <ShortenTextTooltip value={domainName || pseudoResolvedName} maxLength={30} />
+        ? (
+          <ShortenTextTooltip
+            value={domainName || pseudoResolvedName}
+            maxLength={30}
+          />
+        )
         : <AddressItem pretext="Unknown RNS:" value={tokenId} />
 
+      const isProcessingConfs = buyingConfs.some(
+        ({ contractActionData }) => (
+          (contractActionData as BuyDomainContractData).tokenId === tokenId
+        ),
+      )
+
+      const action1 = (
+        account?.toLowerCase() === ownerAddress.toLowerCase()) ? 'your offer' : (
+          <SelectRowButton
+            id={id}
+            handleSelect={(): void => {
+              dispatch({
+                type: 'SET_ORDER',
+                payload: { item },
+              })
+              history.push(ROUTES.RNS.BUY.CHECKOUT)
+            }}
+          />
+        )
+
       const displayItem = {
         id,
         domainName: displayDomainName,
@@ -162,32 +192,28 @@ const DomainOffersPage: FC = () => {
           currencyFiat={currentFiat.displayName}
           divider=""
         />,
-        action1: (account?.toLowerCase() === ownerAddress.toLowerCase()) ? 'your offer' : (
-          <SelectRowButton
-            id={id}
-            handleSelect={(): void => {
-              dispatch({
-                type: 'SET_ORDER',
-                payload: { item },
-              })
-              history.push(ROUTES.RNS.BUY.CHECKOUT)
-            }}
-          />
-        ),
+        action1: isProcessingConfs ? <Spinner /> : action1,
       }
 
       return displayItem
     })
 
   return (
-    <MarketPageTemplate
-      className="Domain Offers"
-      filterItems={<DomainOfferFilters />}
-      items={collection}
-      headers={headers}
-      dispatch={dispatch}
-      outdatedCt={outdatedTokens.length}
-    />
+    <>
+      <InfoBar
+        type="info"
+        isVisible={Boolean(buyingConfs.length)}
+        text={`Awaiting confirmations for ${buyingConfs.length} offer(s)`}
+      />
+      <MarketPageTemplate
+        className="Domain Offers"
+        filterItems={<DomainOfferFilters />}
+        items={collection}
+        headers={headers}
+        dispatch={dispatch}
+        outdatedCt={outdatedTokens.length}
+      />
+    </>
   )
 }