Disable register button if you trying to buy another domain

dappforce · Oct 10, 2023 · 004b7a1 · 004b7a1
1 parent b319a1a
commit 004b7a1
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 39 deletions.
diff --git a/src/components/domains/BuyDomainButtons.tsx b/src/components/domains/BuyDomainButtons.tsx
@@ -51,7 +51,7 @@ export const BuyByDotTxButton = ({
   close,
   price,
 }: BuyByDotTxButtonProps) => {
-  const { recipient, purchaser, setDomainToFetch, setProcessingDomains } = useManageDomainContext()
+  const { recipient, purchaser, setDomainToFetch, setProcessingDomain } = useManageDomainContext()
   const sellerConfig = useSelectSellerConfig()
   const dispatch = useAppDispatch()
   const myAddress = useMyAddress()
@@ -115,7 +115,7 @@ export const BuyByDotTxButton = ({
 
   const onSuccess = async () => {
     setDomainToFetch(domainName)
-    setProcessingDomains({ [domainName]: true })
+    setProcessingDomain(true)
 
     close()
   }
@@ -152,7 +152,7 @@ export const BuyByDotTxButton = ({
     })
 
     if (preventTx) {
-      setProcessingDomains({ [domainName]: false })
+      setProcessingDomain(false)
     } else {
       await updatePendingOrder({
         domain: domainName,
@@ -218,7 +218,7 @@ export const BuyDomainSection = ({
   price,
 }: BuyDomainSectionProps) => {
   const reloadMyDomains = useCreateReloadMyDomains()
-  const { openManageModal, setProcessingDomains, recipient } = useManageDomainContext()
+  const { openManageModal, setProcessingDomain, recipient } = useManageDomainContext()
   const { api, isApiReady } = useSubstrate()
   const reloadPendingOrders = useCreateReloadPendingOrders()
   const { purchaser } = useManageDomainContext()
@@ -241,7 +241,7 @@ export const BuyDomainSection = ({
 
     reloadMyDomains()
 
-    setProcessingDomains({ [domainName]: false })
+    setProcessingDomain(false)
 
     await pendingOrderAction({
       action: deletePendingOrder,
@@ -260,15 +260,15 @@ export const BuyDomainSection = ({
     log.error('Failed:', jsonErr)
 
     errorInfo && showErrorMessage(jsonErr)
-    setProcessingDomains({ [domainName]: false })
+    setProcessingDomain(false)
   }
 
   const onClick = async () => {
     if (!sellerConfig || !myAddress) return
 
     const { sellerApiAuthTokenManager } = sellerConfig
 
-    setProcessingDomains({ [domainName]: true })
+    setProcessingDomain(true)
 
     if (pendingOrder) {
       await pendingOrderAction({
@@ -296,7 +296,7 @@ export const BuyDomainSection = ({
     })
 
     if (preventTx) {
-      setProcessingDomains({ [domainName]: false })
+      setProcessingDomain(false)
     } else {
       await updatePendingOrder({
         domain: domainName,

diff --git a/src/components/domains/manage/ManageDomainProvider.tsx b/src/components/domains/manage/ManageDomainProvider.tsx
@@ -19,8 +19,8 @@ type ManageDomainProviderState = {
   setPurchaser: (recipient: string) => void
   domainToFetch?: string
   setDomainToFetch: (domainToFetch?: string) => void
-  processingDomains: Record<string, boolean>
-  setProcessingDomains: (processingDomains: Record<string, boolean>) => void
+  processingDomain: boolean
+  setProcessingDomain: (processingDomain: boolean) => void
 }
 
 export type DomainSellerKind = 'SUB' | 'DOT'
@@ -37,7 +37,7 @@ export const ManageDomainProvider: React.FC<{ promoCode?: string }> = ({ childre
   const [recipient, setRecipient] = useState<string>(myAddress || '')
   const [purchaser, setPurchaser] = useState<string>(myAddress || '')
   const [domainToFetch, setDomainToFetch] = useState<string>()
-  const [processingDomains, setProcessingDomains] = useState<Record<string, boolean>>({})
+  const [processingDomain, setProcessingDomain] = useState<boolean>(false)
 
   useEffect(() => {
     if (!myAddress) return
@@ -80,9 +80,8 @@ export const ManageDomainProvider: React.FC<{ promoCode?: string }> = ({ childre
     setPurchaser,
     domainToFetch,
     setDomainToFetch,
-    processingDomains,
-    setProcessingDomains: (newData: Record<string, boolean>) =>
-      setProcessingDomains({ ...processingDomains, ...newData }),
+    processingDomain,
+    setProcessingDomain: (processingDomain: boolean) => setProcessingDomain(processingDomain),
   }
 
   return (

diff --git a/src/components/domains/pendingOrders/index.tsx b/src/components/domains/pendingOrders/index.tsx
@@ -1,7 +1,6 @@
 import { InfoCircleOutlined } from '@ant-design/icons'
 import { isEmptyArray, SubDate } from '@subsocial/utils'
-import { Space, Tag, Tooltip } from 'antd'
-import clsx from 'clsx'
+import { Space, Tooltip } from 'antd'
 import dayjs from 'dayjs'
 import { useEffect, useMemo, useState } from 'react'
 import { useMyAddress } from 'src/components/auth/MyAccountsContext'
@@ -13,7 +12,7 @@ import {
 import { PendingDomainEntity } from 'src/rtk/features/domainPendingOrders/pendingOrdersSlice'
 import { useSelectSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
 import { MutedDiv } from '../../utils/MutedText'
-import { DomainSellerKind, useManageDomainContext } from '../manage/ManageDomainProvider'
+import { DomainSellerKind } from '../manage/ManageDomainProvider'
 import RegisterDomainButton from '../registerDomainModal/RegisterDomainModal'
 import { getTime, useGetDomainPrice } from '../utils'
 import styles from './Index.module.sass'
@@ -31,8 +30,6 @@ const PendingDomain = ({ pendingDomain, time }: PendingDomainProps) => {
   const myAddress = useMyAddress()
   const { price: domainPrice, loading: loadingPrice } = useGetDomainPrice(pendingDomain.id)
 
-  const { processingDomains } = useManageDomainContext()
-
   const { id, timestamp, destination, purchaseInterrupted, signer } = pendingDomain
   const { dmnRegPendingOrderExpTime } = sellerConfig || {}
 
@@ -46,13 +43,7 @@ const PendingDomain = ({ pendingDomain, time }: PendingDomainProps) => {
     return SubDate.formatDate(expiresAtValue)
   }, [time])
 
-  const isDomainProcessing = processingDomains[pendingDomain.id]
-
-  const registerButton = isDomainProcessing ? (
-    <Tag color='gold' className={clsx(styles.PendingTag)}>
-      Processing
-    </Tag>
-  ) : (
+  const registerButton = (
     <RegisterDomainButton
       domainName={id}
       label={'Continue'}

diff --git a/src/components/domains/registerDomainModal/RegisterDomainModal.tsx b/src/components/domains/registerDomainModal/RegisterDomainModal.tsx
@@ -5,7 +5,10 @@ import { useIsMyAddress, useMyAddress } from 'src/components/auth/MyAccountsCont
 import { SelectAccountInput } from 'src/components/common/inputs/SelectAccountInput'
 import { useBalancesByNetwork } from 'src/components/donate/AmountInput'
 import { useGetDecimalAndSymbol } from 'src/components/utils/useGetDecimalsAndSymbol'
-import { useSelectPendingOrderById } from 'src/rtk/features/domainPendingOrders/pendingOrdersHooks'
+import {
+  useSelectPendingOrderById,
+  useSelectPendingOrders,
+} from 'src/rtk/features/domainPendingOrders/pendingOrdersHooks'
 import { useSelectSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
 import { FormatBalance, useCreateBalance } from '../../common/balances/Balance'
 import { MutedDiv } from '../../utils/MutedText'
@@ -179,17 +182,20 @@ const RegisterDomainButton = ({
   const sellerConfig = useSelectSellerConfig()
   const myAddress = useMyAddress()
   const { sellerChain } = sellerConfig || {}
-  const { processingDomains, setDomainToFetch } = useManageDomainContext()
+  const { processingDomain, setDomainToFetch } = useManageDomainContext()
   const price = useGetPrice(domainSellerKind, domainPrice)
-  const pendingOrder = useSelectPendingOrderById(domainName)
+  const pendingOrders = useSelectPendingOrders()
 
-  const { purchaseTxStarted, purchaseInterrupted } = pendingOrder || {}
+  const isSomePurchaseTxStarted = pendingOrders.some(({ purchaseTxStarted }) => !!purchaseTxStarted)
+  const isSomePurchaseInerrupted = pendingOrders.some(
+    ({ purchaseInterrupted }) => !!purchaseInterrupted,
+  )
 
   useEffect(() => {
-    if (purchaseTxStarted && !purchaseInterrupted) {
+    if (isSomePurchaseTxStarted && !isSomePurchaseInerrupted) {
       setDomainToFetch(domainName)
     }
-  }, [purchaseTxStarted])
+  }, [isSomePurchaseTxStarted])
 
   const [open, setOpen] = useState(false)
   const { decimal, symbol } = useGetDecimalAndSymbol(sellerChain)
@@ -201,11 +207,7 @@ const RegisterDomainButton = ({
   const chainProps = isSub ? {} : { decimals: decimal, currency: symbol }
 
   const disableRegisterButton =
-    processingDomains[domainName] ||
-    loadingPrice ||
-    price === '0' ||
-    !myAddress ||
-    purchaseTxStarted
+    processingDomain || loadingPrice || price === '0' || !myAddress || isSomePurchaseTxStarted
 
   const priceValue = withPrice && (
     <div>{price ? <FormatBalance value={price} {...chainProps} /> : <>-</>}</div>

diff --git a/src/components/domains/utils.tsx b/src/components/domains/utils.tsx
@@ -134,7 +134,7 @@ const waitMessage = controlledMessage({
 
 export const useFetchNewDomains = () => {
   const myAddress = useMyAddress()
-  const { setDomainToFetch, domainToFetch, openManageModal, setProcessingDomains } =
+  const { setDomainToFetch, domainToFetch, openManageModal, setProcessingDomain } =
     useManageDomainContext()
   const upsertDomains = useCreateUpsertDomains()
   const removePendingOrder = useCreateRemovePendingOrders()
@@ -160,7 +160,7 @@ export const useFetchNewDomains = () => {
 
             setDomainToFetch(undefined)
             removePendingOrder({ domainName: domainToFetch })
-            setProcessingDomains({ [domainToFetch]: false })
+            setProcessingDomain(false)
             upsertDomains({ domain: domainEntity, address: myAddress, domainName: domainToFetch })
             waitMessage.close()
             openManageModal('success', domainToFetch)