Fix fetching new domain after page reload

.github/workflows/feature-based.yaml

@@ -64,9 +64,9 @@ jobs:
             GH_HCAPTCHA_SITE_KEY=3beeddac-2dce-41cc-8e18-338118426c38
             GH_AMP_ID=71bf5a46800fedba5e9a01243b988164
             GH_OFFCHAIN_SIGNER_URL=https://signer.subsocial.network
-            GH_CONNECTION_KIND=main
-            GH_SELLER_CLIENT_ID=${{ secrets.SELLER_CLIENT_ID }}
-            GH_SELLER_TOKEN_SIGNER=${{ secrets.SELLER_TOKEN_SIGNER }}
+            GH_CONNECTION_KIND=staging
+            GH_SELLER_CLIENT_ID=5DYm3Wk4aa1BbfhH1ajmY6MNEELXoicmKRnP4tzHYjSKnD9K
+            GH_SELLER_TOKEN_SIGNER=retire strong pole intact cool music high path salt praise stadium spatial
           tags: |
             ${{ env.image }}
           cache-from: type=local,src=/tmp/.buildx-cache

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,14 @@ export const BuyByDotTxButton = ({
     })
 
     if (preventTx) {
-      setProcessingDomains({ [domainName]: false })
+      setProcessingDomain(false)
+    } else {
+      await updatePendingOrder({
+        domain: domainName,
+        interrupted: false,
+        txStarted: true,
+        sellerApiAuthTokenManager,
+      })
     }
 
     return preventTx
@@ -163,7 +170,12 @@ export const BuyByDotTxButton = ({
 
     const { sellerApiAuthTokenManager } = sellerConfig
 
-    await updatePendingOrder(domainName, true, sellerApiAuthTokenManager)
+    await updatePendingOrder({
+      domain: domainName,
+      interrupted: true,
+      txStarted: false,
+      sellerApiAuthTokenManager,
+    })
 
     dispatch(fetchPendingOrdersByAccount({ id: myAddress, reload: true }))
   }
@@ -206,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()
@@ -229,7 +241,7 @@ export const BuyDomainSection = ({
 
     reloadMyDomains()
 
-    setProcessingDomains({ [domainName]: false })
+    setProcessingDomain(false)
 
     await pendingOrderAction({
       action: deletePendingOrder,
@@ -248,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({
@@ -284,7 +296,14 @@ export const BuyDomainSection = ({
     })
 
     if (preventTx) {
-      setProcessingDomains({ [domainName]: false })
+      setProcessingDomain(false)
+    } else {
+      await updatePendingOrder({
+        domain: domainName,
+        interrupted: false,
+        txStarted: true,
+        sellerApiAuthTokenManager,
+      })
     }
 
     return preventTx
@@ -295,7 +314,12 @@ export const BuyDomainSection = ({
 
     const { sellerApiAuthTokenManager } = sellerConfig
 
-    await updatePendingOrder(domainName, true, sellerApiAuthTokenManager)
+    await updatePendingOrder({
+      domain: domainName,
+      interrupted: true,
+      txStarted: false,
+      sellerApiAuthTokenManager,
+    })
 
     dispatch(fetchPendingOrdersByAccount({ id: myAddress, reload: true }))
   }

src/components/domains/dot-seller/seller-queries.ts

@@ -7,6 +7,7 @@ export const PENDING_ORDERS_BY_IDS = gql`
         id
         createdByAccount
         purchaseInterrupted
+        purchaseTxStarted
         signer
         target
         timestamp
@@ -23,6 +24,7 @@ export const PENDING_ORDERS_BY_SIGNER = gql`
         id
         createdByAccount
         purchaseInterrupted
+        purchaseTxStarted
         signer
         target
         timestamp
@@ -39,6 +41,7 @@ export const PENDING_ORDERS_BY_ACCOUNT = gql`
         id
         createdByAccount
         purchaseInterrupted
+        purchaseTxStarted
         signer
         target
         timestamp
@@ -111,7 +114,11 @@ export const DELETE_PENDING_ORDER = gql`
 `
 
 export const UPDATE_PENDING_ORDER = gql`
-  mutation updatePendingOrderPurchaseStatusById($id: String!, $interrupted: Boolean!) {
-    updatePendingOrderPurchaseStatusById(id: $id, interrupted: $interrupted)
+  mutation updatePendingOrderPurchaseStatus(
+    $id: String!
+    $interrupted: Boolean
+    $txStarted: Boolean
+  ) {
+    updatePendingOrderPurchaseStatus(id: $id, interrupted: $interrupted, txStarted: $txStarted)
   }
 `

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 (

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'}

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,8 +182,20 @@ const RegisterDomainButton = ({
   const sellerConfig = useSelectSellerConfig()
   const myAddress = useMyAddress()
   const { sellerChain } = sellerConfig || {}
-  const { processingDomains } = useManageDomainContext()
+  const { processingDomain, setDomainToFetch } = useManageDomainContext()
   const price = useGetPrice(domainSellerKind, domainPrice)
+  const pendingOrders = useSelectPendingOrders()
+
+  const isSomePurchaseTxStarted = pendingOrders.some(({ purchaseTxStarted }) => !!purchaseTxStarted)
+  const isSomePurchaseInerrupted = pendingOrders.some(
+    ({ purchaseInterrupted }) => !!purchaseInterrupted,
+  )
+
+  useEffect(() => {
+    if (isSomePurchaseTxStarted && !isSomePurchaseInerrupted) {
+      setDomainToFetch(domainName)
+    }
+  }, [isSomePurchaseTxStarted])
 
   const [open, setOpen] = useState(false)
   const { decimal, symbol } = useGetDecimalAndSymbol(sellerChain)
@@ -192,7 +207,7 @@ const RegisterDomainButton = ({
   const chainProps = isSub ? {} : { decimals: decimal, currency: symbol }
 
   const disableRegisterButton =
-    processingDomains[domainName] || loadingPrice || price === '0' || !myAddress
+    processingDomain || loadingPrice || price === '0' || !myAddress || isSomePurchaseTxStarted
 
   const priceValue = withPrice && (
     <div>{price ? <FormatBalance value={price} {...chainProps} /> : <>-</>}</div>

src/components/domains/utils.tsx

@@ -134,14 +134,14 @@ 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()
 
   useSubsocialEffect(
     ({ substrate }) => {
-      if (!myAddress || !domainToFetch || !domainToFetch) return
+      if (!myAddress || !domainToFetch) return
 
       let unsub: any
 
@@ -159,9 +159,9 @@ export const useFetchNewDomains = () => {
             }
 
             setDomainToFetch(undefined)
-            upsertDomains({ domain: domainEntity, address: myAddress, domainName: domainToFetch })
             removePendingOrder({ domainName: domainToFetch })
-            setProcessingDomains({ [domainToFetch]: false })
+            setProcessingDomain(false)
+            upsertDomains({ domain: domainEntity, address: myAddress, domainName: domainToFetch })
             waitMessage.close()
             openManageModal('success', domainToFetch)
           }

src/components/utils/OffchainUtils.ts

@@ -120,11 +120,24 @@ export const deletePendingOrder = async (domain: string, sellerApiAuthTokenManag
   return res.data
 }
 
-export const updatePendingOrder = async (domain: string, interrupted: boolean, sellerApiAuthTokenManager: string) => {
+type UpdatePendingOrderProps = {
+  domain: string
+  interrupted?: boolean
+  txStarted?: boolean
+  sellerApiAuthTokenManager: string
+}
+
+export const updatePendingOrder = async ({
+  domain,
+  interrupted,
+  txStarted,
+  sellerApiAuthTokenManager,
+}: UpdatePendingOrderProps) => {
   const res = await axios.post('/api/pending-order/update', {
     domain,
     sellerApiAuthTokenManager,
-    interrupted
+    interrupted,
+    txStarted,
   })
 
   return res.data

src/pages/api/pending-order/update.ts

@@ -8,7 +8,7 @@ import { pendingOrdersWrapper } from 'src/server/pendingOrders'
 dayjs.extend(utc)
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-  const { sellerApiAuthTokenManager, domain, interrupted } = req.body
+  const { sellerApiAuthTokenManager, domain, interrupted, txStarted } = req.body
 
   await pendingOrdersWrapper({
     req,
@@ -20,6 +20,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         {
           id: domain,
           interrupted,
+          txStarted,
         },
         requestHeaders,
       ),

src/rtk/features/domainPendingOrders/pendingOrdersSlice.ts

@@ -34,6 +34,7 @@ export type PendingDomainEntity = {
   createdByAccount: string
   destination: string
   purchaseInterrupted: boolean
+  purchaseTxStarted: boolean
   signer: string
   target: string
   timestamp: string