feat: improve error handling (#119)

components/AppLoader.vue

@@ -0,0 +1,7 @@
+<template>
+  <lukso-icon
+    name="progress-indicator-alt"
+    size="x-large"
+    class="fixed top-1/2 left-1/2 transform"
+  ></lukso-icon>
+</template>

composables/useBrowserExtension.ts

@@ -50,51 +50,13 @@ const connect = async () => {
     setStatus('isConnected', true)
     setConnectionExpiry()
     await navigateTo(profileRoute(address))
-  } catch (error: any) {
+  } catch (error: unknown) {
     console.error(error)
     disconnect()
 
-    // known errors
-    if (error instanceof EoAError) {
-      return showModal({
-        title: formatMessage('web3_connect_error_title'),
-        message: formatMessage('web3_eoa_error_message'),
-      })
-    }
-
-    if (error instanceof InterfaceError) {
-      return showModal({
-        title: formatMessage('web3_connect_error_title'),
-        message: formatMessage('web3_interface_error_message'),
-      })
-    }
-
-    // errors that have a code or message
-    if (error && error.code) {
-      switch (error.code) {
-        case 4001:
-          return showModal({
-            title: formatMessage('web3_connect_error_title'),
-            message: formatMessage('web3_connect_error_rejected_request'),
-          })
-
-        case -32005:
-          return showModal({
-            title: formatMessage('web3_connect_error_title'),
-            message: formatMessage('web3_connect_error_pending_request'),
-          })
-        default:
-          return showModal({
-            title: formatMessage('web3_connect_error_title'),
-            message: error.message,
-          })
-      }
-    }
-
-    // unknowns errors
-    return showModal({
+    showModal({
       title: formatMessage('web3_connect_error_title'),
-      message: formatMessage('web3_connect_error'),
+      message: getConnectionErrorMessage(error),
     })
   } finally {
     setStatus('isConnecting', false)

pages/[profileAddress]/index.vue

@@ -98,11 +98,6 @@ const showProfileDetails = computed(
         </div>
       </div>
     </div>
-    <lukso-icon
-      name="progress-indicator-alt"
-      size="x-large"
-      v-if="status.isAssetLoading || status.isProfileLoading"
-      class="absolute top-1/2 left-1/2 transform"
-    ></lukso-icon>
+    <AppLoader v-if="status.isAssetLoading || status.isProfileLoading" />
   </div>
 </template>

pages/[profileAddress]/lyx-details.vue

@@ -86,11 +86,6 @@ const handleSendLyx = () => {
         />
       </div>
     </div>
-    <lukso-icon
-      name="progress-indicator-alt"
-      size="x-large"
-      v-if="profileStatus.isAssetLoading"
-      class="absolute top-1/2 left-1/2 transform"
-    ></lukso-icon>
+    <AppLoader v-if="profileStatus.isAssetLoading" />
   </div>
 </template>

pages/[profileAddress]/nft/[nftAddress]/tokenId/[tokenId].vue

@@ -105,11 +105,6 @@ const handleSendAsset = (event: Event) => {
         />
       </div>
     </div>
-    <lukso-icon
-      name="progress-indicator-alt"
-      size="x-large"
-      v-if="profileStatus.isAssetLoading"
-      class="absolute top-1/2 left-1/2 transform"
-    ></lukso-icon>
+    <AppLoader v-if="profileStatus.isAssetLoading" />
   </div>
 </template>

pages/[profileAddress]/send.vue

@@ -143,30 +143,13 @@ const handleSend = async () => {
     }
 
     setStatus('success')
-  } catch (error: any) {
+  } catch (error: unknown) {
     console.error(error)
     setStatus('draft')
 
-    // errors that have a code or message
-    if (error && error.code) {
-      switch (error.code) {
-        case 4001:
-          return showModal({
-            title: formatMessage('send_error_title'),
-            message: formatMessage('send_error_rejected_request'),
-          })
-        default:
-          showModal({
-            title: formatMessage('send_error_title'),
-            message: formatMessage('send_error_message'),
-          })
-      }
-    }
-
-    // unknowns errors
     showModal({
-      title: formatMessage('send_error_title'),
-      message: formatMessage('send_error_message'),
+      title: formatMessage('web3_connect_error_title'),
+      message: getSendErrorMessage(error),
     })
   }
 }

pages/[profileAddress]/token/[tokenAddress].vue

@@ -106,11 +106,6 @@ const handleSendAsset = (event: Event) => {
         />
       </div>
     </div>
-    <lukso-icon
-      name="progress-indicator-alt"
-      size="x-large"
-      v-if="profileStatus.isAssetLoading"
-      class="absolute top-1/2 left-1/2 transform"
-    ></lukso-icon>
+    <AppLoader v-if="profileStatus.isAssetLoading" />
   </div>
 </template>

pages/index.vue

@@ -80,11 +80,6 @@ watchEffect(() => {
         </div>
       </div>
     </div>
-    <lukso-icon
-      v-if="status.isProfileLoading"
-      name="progress-indicator-alt"
-      size="x-large"
-      class="absolute top-1/2 left-1/2 transform"
-    ></lukso-icon>
+    <AppLoader v-if="status.isProfileLoading" />
   </div>
 </template>

translations/en_US.json

@@ -24,6 +24,7 @@
   "token_details_token_id": "Token ID",
   "send_button": "Send {amount} {symbol}",
   "asset_supply_title": "Total Token Supply",
+  "send_error_same_address": "You cannot send {lyxSymbol} to yourself",
   "header_discovery": "Discovery",
   "not_found_text": "We can’t seem to find the page you’re looking for!",
   "asset_filter_owned_assets": "Owned assets",

utils/getErrorMessage.ts

@@ -0,0 +1,49 @@
+export const getConnectionErrorMessage = (error: unknown) => {
+  const { formatMessage } = useIntl()
+
+  // known error types
+  if (error instanceof EoAError) {
+    return formatMessage('web3_eoa_error_message')
+  }
+
+  if (error instanceof InterfaceError) {
+    return formatMessage('web3_interface_error_message')
+  }
+
+  // errors that have a code or message
+  if (error && typeof error === 'object' && 'code' in error) {
+    switch (error.code) {
+      case 4001:
+        return formatMessage('web3_connect_error_rejected_request')
+      case -32005:
+        return formatMessage('web3_connect_error_pending_request')
+      default:
+        break
+    }
+  }
+
+  // generic message for unknowns errors
+  return formatMessage('web3_connect_error')
+}
+
+export const getSendErrorMessage = (error: unknown): string => {
+  const { formatMessage } = useIntl()
+  const appStore = useAppStore()
+
+  // errors that have a code or message
+  if (error && typeof error === 'object' && 'code' in error) {
+    switch (error.code) {
+      case 4001:
+        return formatMessage('send_error_rejected_request')
+      case -32602:
+        return formatMessage('send_error_same_address', {
+          lyxSymbol: appStore.currentNetwork.token.symbol,
+        })
+      default:
+        break
+    }
+  }
+
+  // generic message for unknowns errors
+  return formatMessage('send_error_message')
+}