refactor: commitment logic of RnsProcessor

src/components/GlobalErrorHandler/GlobalErrorHandlerContext.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction } from 'react'
+import { Dispatch, SetStateAction, useCallback } from 'react'
 import { FC, ReactNode, createContext, useState, useContext } from 'react'
 
 import GlobalErrorHandlerView from './GlobalErrorHandlerView'
@@ -26,10 +26,11 @@ const GlobalErrorHandlerProvider: React.FC<GlobalErrorHandlerProviderType> = ({
 }) => {
   const [globalError, setGlobalError] = useState<string | null>(null)
   const [compKey, setCompKey] = useState(0)
-  const handleReload = () => {
+
+  const handleReload = useCallback(() => {
     setGlobalError(null)
     setCompKey(curKey => curKey + 1)
-  }
+  }, [])
 
   return (
     <GlobalErrorHandlerContext.Provider

src/lib/rns/RnsProcessor.ts

@@ -154,8 +154,7 @@ export class RnsProcessor {
       // This to avoid request load
       if (
         this.index[domain]?.commitmentConfirmed ||
-        (!isWaitingForCommitmentTransaction &&
-          this.isDomainAllowedToPingRskRegistrarCanReveal(domain))
+        !isWaitingForCommitmentTransaction
       ) {
         const canReveal = await this.rskRegistrar.canReveal(
           this.index[domain].hash,
@@ -172,6 +171,7 @@ export class RnsProcessor {
       throw new Error((err as Error).message)
     }
   }
+
   public price = async (domain: string) => {
     if (this.index[domain]) {
       const alias = this.index[domain]?.domain

src/redux/slices/profileSlice/index.ts

@@ -1,18 +1,20 @@
 import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit'
 
-import { DomainRegistrationEnum, RnsProcessor } from 'lib/rns'
+import { DomainRegistrationEnum } from 'lib/rns'
 
 import { ProfileStatus } from 'navigation/profileNavigator/types'
 import { Wallet } from 'shared/wallet'
-import { AppDispatch } from 'store/store'
+import { AppDispatch, AsyncThunkWithTypes } from 'store/store'
 import {
   OnSetTransactionStatusChange,
   TransactionStatus,
 } from 'store/shared/types'
 import { abiEnhancer } from 'core/setup'
 import { handleTransactionStatusChange } from 'store/shared/utils'
+import { delay } from 'shared/utils'
 
 import {
+  CommitmentRnsProcess,
   DeleteRnsProcess,
   ProfileStore,
   PurchaseUsername,
@@ -39,14 +41,20 @@ export const handleDomainTransactionStatusChange =
     handleTransactionStatusChange(dispatch)(txTransformed)
   }
 
-export const requestUsername = createAsyncThunk(
+export const requestUsername = createAsyncThunk<
+  unknown,
+  RequestUsername,
+  AsyncThunkWithTypes
+>(
   'profile/requestUsername',
-  async ({ alias, duration, getRnsProcessor }: RequestUsername, thunkAPI) => {
+  async ({ alias, duration, getRnsProcessor }, thunkAPI) => {
     try {
       const rnsProcessor = getRnsProcessor()
+
       if (!rnsProcessor) {
         return thunkAPI.rejectWithValue('No RNS Processor created')
       }
+
       thunkAPI.dispatch(setAlias(`${alias}.rsk`))
       thunkAPI.dispatch(setDuration(duration))
 
@@ -61,12 +69,9 @@ export const requestUsername = createAsyncThunk(
       indexStatus = rnsProcessor.getStatus(alias)
 
       if (indexStatus.commitmentRequested) {
-        return await commitment(
-          rnsProcessor,
-          alias,
-          IntervalProcessOrigin.RNS_ORIGINAL_TRANSACTION,
-        )
+        return await thunkAPI.dispatch(commitment({ alias, getRnsProcessor }))
       }
+
       return null
     } catch (err) {
       return thunkAPI.rejectWithValue(err)
@@ -112,6 +117,33 @@ export const deleteRnsProcess = createAsyncThunk(
   },
 )
 
+export const commitment = createAsyncThunk<
+  DomainRegistrationEnum.COMMITMENT_READY,
+  CommitmentRnsProcess,
+  AsyncThunkWithTypes
+>('profile/commitment', async ({ alias, getRnsProcessor }, thunkAPI) => {
+  try {
+    const rnsProcessor = getRnsProcessor()
+
+    if (!rnsProcessor) {
+      return thunkAPI.rejectWithValue('No RNS Processor created')
+    }
+
+    let response = await rnsProcessor.canReveal(alias)
+
+    while (response !== DomainRegistrationEnum.COMMITMENT_READY) {
+      await delay(3000)
+      response = await rnsProcessor.canReveal(alias)
+    }
+
+    thunkAPI.dispatch(setStatus(ProfileStatus.READY_TO_PURCHASE))
+
+    return DomainRegistrationEnum.COMMITMENT_READY
+  } catch (err) {
+    return thunkAPI.dispatch(err)
+  }
+})
+
 const initialState: ProfileStore = {
   alias: '',
   phone: '',
@@ -166,48 +198,6 @@ const profileSlice = createSlice({
   },
 })
 
-export enum IntervalProcessOrigin {
-  NONE = 'NONE',
-  RNS_ORIGINAL_TRANSACTION = 'RNS_ORIGINAL_TRANSACTION',
-  PROFILE_CREATE_EFFECT = 'PROFILE_CREATE_EFFECT',
-}
-const commitmentIntervalProcess: {
-  interval?: ReturnType<typeof setInterval>
-  intervalOrigin: IntervalProcessOrigin
-} = {
-  intervalOrigin: IntervalProcessOrigin.NONE,
-}
-
-export const commitment = (
-  rnsProcessor: RnsProcessor,
-  alias: string,
-  intervalProcessOrigin: IntervalProcessOrigin,
-): Promise<ProfileStatus> => {
-  return new Promise((resolve, reject) => {
-    if (commitmentIntervalProcess.interval) {
-      reject('Interval is already running.')
-    }
-    commitmentIntervalProcess.intervalOrigin = intervalProcessOrigin
-    commitmentIntervalProcess.interval = setInterval(() => {
-      rnsProcessor
-        .canReveal(
-          alias,
-          intervalProcessOrigin ===
-            IntervalProcessOrigin.RNS_ORIGINAL_TRANSACTION,
-        )
-        .then(canRevealResponse => {
-          if (canRevealResponse === DomainRegistrationEnum.COMMITMENT_READY) {
-            clearInterval(commitmentIntervalProcess.interval)
-            commitmentIntervalProcess.interval = undefined
-            commitmentIntervalProcess.intervalOrigin =
-              IntervalProcessOrigin.NONE
-            resolve(ProfileStatus.READY_TO_PURCHASE)
-          }
-        })
-    }, 1000)
-  })
-}
-
 export const {
   setProfile,
   setStatus,

src/redux/slices/profileSlice/types.ts

@@ -25,3 +25,8 @@ export interface DeleteRnsProcess {
   getRnsProcessor: GetRnsProcessor
   domain: string
 }
+
+export interface CommitmentRnsProcess {
+  getRnsProcessor: GetRnsProcessor
+  alias: string
+}

src/screens/profile/ProfileCreateScreen.tsx

@@ -6,8 +6,6 @@ import Clipboard from '@react-native-community/clipboard'
 import Icon from 'react-native-vector-icons/FontAwesome'
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
 
-import { RnsProcessor } from 'lib/rns'
-
 import {
   BarButtonGroupContainer,
   BarButtonGroupIcon,
@@ -33,20 +31,14 @@ import {
 } from 'shared/constants'
 import { sharedStyles } from 'shared/styles'
 import { castStyle } from 'shared/utils'
-import {
-  commitment,
-  IntervalProcessOrigin,
-  setProfile,
-  setStatus,
-} from 'store/slices/profileSlice'
+import { commitment, setProfile, setStatus } from 'store/slices/profileSlice'
 import { selectProfile } from 'store/slices/profileSlice/selector'
 import { selectChainId, selectRequests } from 'store/slices/settingsSlice'
 import { useAppDispatch, useAppSelector } from 'store/storeUtils'
 import { AppSpinner } from 'components/index'
 import { AvatarIcon } from 'components/icons/AvatarIcon'
 import { rootTabsRouteNames } from 'navigation/rootNavigator'
-import { RNS_ADDRESSES_BY_CHAIN_ID } from 'screens/rnsManager/types'
-import { useWallet } from 'shared/wallet'
+import { useGetRnsProcessor, useWallet } from 'shared/wallet'
 import { useAddress } from 'shared/hooks'
 
 import { rnsManagerStyles } from '../rnsManager/rnsManagerStyles'
@@ -56,6 +48,7 @@ export const ProfileCreateScreen = ({
 }: ProfileStackScreenProps<profileStackRouteNames.ProfileCreateScreen>) => {
   const wallet = useWallet()
   const address = useAddress(wallet)
+  const getRnsProcessor = useGetRnsProcessor()
 
   const dispatch = useAppDispatch()
   const profile = useAppSelector(selectProfile)
@@ -137,36 +130,27 @@ export const ProfileCreateScreen = ({
   }, [navigation])
 
   useEffect(() => {
-    if (
-      wallet &&
-      profile.alias &&
-      profile.status === ProfileStatus.REQUESTING
-    ) {
-      const rns = new RnsProcessor({
-        wallet,
-        address,
-        rnsAddresses: RNS_ADDRESSES_BY_CHAIN_ID[chainId],
-      })
-      commitment(
-        rns,
-        profile.alias.split('.rsk')[0],
-        IntervalProcessOrigin.PROFILE_CREATE_EFFECT,
-      )
-        .then(profileStatus => dispatch(setStatus(profileStatus)))
-        .catch(error => {
-          console.log(error)
-        })
-    }
-    if (requests.length === 0) {
-      if (profile.status === ProfileStatus.WAITING_FOR_USER_COMMIT) {
-        // User got stuck in requesting the commit - set profileStatus back to 0
-        dispatch(setStatus(ProfileStatus.NONE))
+    (async () => {
+      if (profile.alias && profile.status === ProfileStatus.REQUESTING) {
+        await dispatch(
+          commitment({
+            alias: profile.alias.split('.rsk')[0],
+            getRnsProcessor,
+          }),
+        ).unwrap()
       }
-      if (profile.status === ProfileStatus.PURCHASING) {
-        // User got stuck in requesting the purchase - set profileStatus back to 3
-        dispatch(setStatus(ProfileStatus.READY_TO_PURCHASE))
+
+      if (requests.length === 0) {
+        if (profile.status === ProfileStatus.WAITING_FOR_USER_COMMIT) {
+          // User got stuck in requesting the commit - set profileStatus back to 0
+          dispatch(setStatus(ProfileStatus.NONE))
+        }
+        if (profile.status === ProfileStatus.PURCHASING) {
+          // User got stuck in requesting the purchase - set profileStatus back to 3
+          dispatch(setStatus(ProfileStatus.READY_TO_PURCHASE))
+        }
       }
-    }
+    })()
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 

src/screens/rnsManager/DomainInput.tsx

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { StyleSheet, Text } from 'react-native'
 import { FieldError } from 'react-hook-form'
+import { RSKRegistrar } from '@rsksmart/rns-sdk'
 
 import {
   AddressValidationMessage,
@@ -20,8 +21,7 @@ interface Props {
   inputName: string
   domainValue: string
   error: FieldError | undefined
-  searchAvailability: (domain: string) => Promise<string>
-  searchOwnerOf: (domain: string) => Promise<string>
+  rskRegistrar: RSKRegistrar
   onDomainAvailable: (domain: string, valid: boolean) => void
   onDomainOwned: (owned: boolean) => void
   onResetValue: () => void
@@ -47,8 +47,7 @@ export const DomainInput = ({
   address,
   inputName,
   domainValue,
-  searchAvailability,
-  searchOwnerOf,
+  rskRegistrar,
   onDomainAvailable,
   onDomainOwned,
   onResetValue,
@@ -70,10 +69,10 @@ export const DomainInput = ({
         setDomainAvailability(DomainStatus.NONE)
         onDomainAvailable(domain, false)
       } else {
-        const available = await searchAvailability(domain)
+        const available = await rskRegistrar.available(domain)
 
         if (!available) {
-          const ownerAddress = await searchOwnerOf(domain)
+          const ownerAddress = await rskRegistrar.ownerOf(domain)
 
           if (address === ownerAddress) {
             setDomainAvailability(DomainStatus.OWNED)
@@ -92,8 +91,7 @@ export const DomainInput = ({
       errorType,
       errorMessage,
       onDomainAvailable,
-      searchOwnerOf,
-      searchAvailability,
+      rskRegistrar,
       address,
       onDomainOwned,
     ],

src/screens/rnsManager/SearchDomainScreen.tsx

@@ -222,8 +222,7 @@ export const SearchDomainScreen = ({ navigation }: Props) => {
             {rnsProcessor ? (
               <DomainInput
                 address={address}
-                searchAvailability={rnsProcessor.rskRegistrar.available}
-                searchOwnerOf={rnsProcessor.rskRegistrar.ownerOf}
+                rskRegistrar={rnsProcessor.rskRegistrar}
                 inputName={'domain'}
                 error={errors.domain}
                 domainValue={domain}

src/screens/settings/SettingsScreen.tsx

@@ -85,11 +85,12 @@ export const SettingsScreen = ({
   const { t } = useTranslation()
 
   const { handleReload } = useContext(GlobalErrorHandlerContext)
-  const onSwitchChains = () => {
+
+  const onSwitchChains = useCallback(() => {
     const currentChainId = getCurrentChainId()
     setCurrentChainId(currentChainId === 31 ? 30 : 31)
     handleReload()
-  }
+  }, [handleReload])
   return (
     <ScrollView style={styles.container}>
       <View style={styles.mainView}>