get readable error from contract

src/components/@molecules/NameListView/NameListView.tsx

@@ -99,8 +99,6 @@ export const NameListView = ({ address, isSelf, setError, setLoading }: NameList
     },
   })
 
-  console.log(names)
-
   useEffect(() => {
     setError?.(isError)
     // eslint-disable-next-line react-hooks/exhaustive-deps

src/components/@molecules/TransactionDialogManager/stage/TransactionStageModal.tsx

@@ -38,6 +38,7 @@ import {
   UniqueTransaction,
 } from '@app/transaction-flow/types'
 import { BasicTransactionRequest, PublicClientWithChain } from '@app/types'
+import { getReadableError } from '@app/utils/errors'
 import { makeEtherscanLink } from '@app/utils/utils'
 
 import { DisplayItems } from '../DisplayItems'
@@ -627,6 +628,7 @@ export const TransactionStageModal = ({
         await publicClient.call({ ...a, to: a.to! })
         return 'transaction.dialog.error.gasLimit'
       } catch (err: unknown) {
+        return getReadableError(err)
         // TODO: get revert reason through viem
         // const code = err.data.replace('Reverted ', '')
         // const reason = toUtf8String(`0x${code.substr(138)}`)
@@ -640,14 +642,10 @@ export const TransactionStageModal = ({
 
   const lowerError = useMemo(() => {
     if (stage === 'complete' || stage === 'sent') return null
-    if (transactionError) {
-      if (!(transactionError instanceof BaseError)) return t('transaction.error.unknown')
-      return transactionError.shortMessage
-    }
-    if (requestError) {
-      if (!(requestError instanceof BaseError)) return t('transaction.error.unknown')
-      return requestError.shortMessage
-    }
+    const err = transactionError || requestError
+    if (!(err instanceof BaseError)) return t('transaction.error.unknown')
+    const readableError = getReadableError(err)
+    return readableError || err.shortMessage
   }, [t, stage, transactionError, requestError])
 
   return (

src/hooks/useProfileActions.ts

@@ -38,28 +38,34 @@ type Props = {
   enabled?: boolean
 }
 
-export const useProfileActions = ({ name, enabled = true }: Props) => {
+export const useProfileActions = ({ name, enabled: enabled_ = true }: Props) => {
   const { t } = useTranslation('profile')
   const { createTransactionFlow, usePreparedDataInput } = useTransactionFlow()
 
   const { address } = useAccountSafely()
+
+  const enabled = enabled_ && !!address
+
   const { data: abilities, isLoading: isAbilitiesLoading } = useAbilities({ name, enabled })
 
-  const { data: profile, isLoading: isProfileLoading } = useProfile({ name })
-  const { data: ownerData, isLoading: isOwnerLoading } = useOwner({ name })
-  const { data: wrapperData, isLoading: isWrapperDataLoading } = useWrapperData({ name })
-  const { data: expiryData, isLoading: isExpiryLoading } = useExpiry({ name })
+  const { data: profile, isLoading: isProfileLoading } = useProfile({ name, enabled })
+  const { data: ownerData, isLoading: isOwnerLoading } = useOwner({ name, enabled })
+  const { data: wrapperData, isLoading: isWrapperDataLoading } = useWrapperData({ name, enabled })
+  const { data: expiryData, isLoading: isExpiryLoading } = useExpiry({ name, enabled })
   const expiryDate = expiryData?.expiry?.date
 
   const { data: resolverStatus, isLoading: isResolverStatusLoading } = useResolverStatus({
     name,
     migratedRecordsMatch: address
       ? { type: 'address', match: { id: 60, value: address } }
       : undefined,
-    enabled: !!ownerData,
+    enabled: enabled && !!ownerData,
   })
 
-  const { data: primaryData, isLoading: isPrimaryNameLoading } = usePrimaryName({ address })
+  const { data: primaryData, isLoading: isPrimaryNameLoading } = usePrimaryName({
+    address,
+    enabled,
+  })
 
   const isAvailablePrimaryName = checkAvailablePrimaryName(
     primaryData?.name,

src/utils/errors.ts

@@ -0,0 +1,22 @@
+import { BaseError, decodeErrorResult, RawContractError } from 'viem'
+
+import { ethRegistrarControllerErrors, nameWrapperErrors } from '@ensdomains/ensjs/contracts'
+
+export const getViemRevertErrorData = (err: unknown) => {
+  if (!(err instanceof BaseError)) return undefined
+  const error = err.walk() as RawContractError
+  return typeof error.data === 'object' ? error.data.data : error.data
+}
+
+export const allContractErrors = [...ethRegistrarControllerErrors, ...nameWrapperErrors]
+
+export const getReadableError = (err: unknown) => {
+  const data = getViemRevertErrorData(err)
+  if (!data) return null
+  const decodedError = decodeErrorResult({
+    abi: allContractErrors,
+    data,
+  })
+  if (!decodedError) return null
+  return decodedError.errorName
+}