Better frontend handling when API is down

frontend/src/components/AccountReceiveTable.vue

@@ -85,7 +85,12 @@
           <div :key="props.row.id" class="col-12">
             <q-card class="card-border cursor-pointer q-pt-md col justify-center items-center">
               <q-card-section class="row justify-center items-center">
-                <img class="q-mr-md" :src="getTokenLogoUri(props.row.token, tokens)" style="width: 1.2rem" />
+                <img
+                  class="q-mr-md"
+                  :src="getTokenLogoUri(props.row.token, tokens)"
+                  style="width: 1.2rem"
+                  v-if="getTokenInfo(props.row.token)"
+                />
                 <div class="text-primary text-h6 header-black q-pb-none">
                   {{ formatAmount(props.row.amount, props.row.token, tokens) }}
                   {{ getTokenSymbol(props.row.token, tokens) }}
@@ -231,7 +236,12 @@
               <!-- Amount column -->
               <div v-else-if="col.name === 'amount'">
                 <div class="row justify-start items-center no-wrap">
-                  <img class="col-auto q-mr-md" :src="getTokenLogoUri(props.row.token, tokens)" style="width: 1.2rem" />
+                  <img
+                    class="col-auto q-mr-md"
+                    :src="getTokenLogoUri(props.row.token, tokens)"
+                    style="width: 1.2rem"
+                    v-if="getTokenInfo(props.row.token)"
+                  />
                   <div class="col-auto">
                     {{ formatAmount(col.value, props.row.token, tokens) }}
                     {{ getTokenSymbol(props.row.token, tokens) }}
@@ -729,6 +739,7 @@ function useReceivedFundsTable(userAnnouncements: Ref<UserAnnouncement[]>, spend
     formatUnits,
     getFeeEstimate,
     getSenderOrReceiverEtherscanUrl,
+    getTokenInfo,
     getTokenLogoUri,
     getTokenSymbol,
     initializeWithdraw,

frontend/src/store/wallet.ts

@@ -22,6 +22,7 @@ import { ERC20_ABI, MAINNET_PROVIDER, MULTICALL_ABI, MULTICALL_ADDRESS } from 's
 import { BigNumber, Contract, ExternalProvider, Web3Provider, parseUnits } from 'src/utils/ethers';
 import { UmbraApi } from 'src/utils/umbra-api';
 import { getChainById } from 'src/utils/utils';
+import { notifyUser } from 'src/utils/alerts';
 import useSettingsStore from 'src/store/settings';
 import enLocal from 'src/i18n/locales/en-US.json';
 import chLocal from 'src/i18n/locales/zh-CN.json';
@@ -155,7 +156,16 @@ export default function useWalletStore() {
   async function getTokenBalances() {
     // Setup
     if (!provider.value) throw new Error('Provider not connected');
-    if (!relayer.value) throw new Error('Relayer instance not found');
+
+    // No longer throwing here if we don't have a relayer, just notifying the user
+    //  because we don't need the relayer for balances as that is done via contract calls
+    if (!relayer.value) {
+      const nativeToken = currentChain.value?.nativeCurrency.symbol
+        ? currentChain.value?.nativeCurrency.symbol
+        : 'native token';
+      notifyUser('error', `Cannot connect to token relayer/API.. only ${nativeToken} transfers available.`);
+    }
+
     const multicall = new Contract(MULTICALL_ADDRESS, MULTICALL_ABI, provider.value);
 
     // Generate balance calls using Multicall contract
@@ -253,13 +263,21 @@ export default function useWalletStore() {
       signer.value = markRaw(provider.value.getSigner());
 
       // Get user and network information
-      const [_userAddress, _network, _relayer] = await Promise.all([
+      const [_userAddress, _network] = await Promise.all([
         signer.value.getAddress(), // get user's address
         provider.value.getNetwork(), // get information on the connected network
-        UmbraApi.create(provider.value), // Configure the relayer (even if not withdrawing, this gets the list of tokens we allow to send)
       ]);
       await utils.assertSupportedAddress(_userAddress);
 
+      // Configure the relayer (soft error handling, as we still want to allow the user to transfer native tokens if the relayer is down)
+      let _relayer: UmbraApi | undefined;
+      try {
+        _relayer = await UmbraApi.create(provider.value);
+      } catch (e) {
+        console.log("couldn't create relayer", e);
+        _relayer = undefined;
+      }
+
       // If nothing has changed, no need to continue configuring.
       if (_userAddress === userAddress.value && _network.chainId === chainId.value) {
         setLoading(false);

frontend/src/utils/utils.ts

@@ -165,7 +165,9 @@ export const getTokenInfo = (tokenAddress: string, tokens: TokenInfoExtended[])
 export const formatDate = (timestamp: number) => date.formatDate(timestamp, 'YYYY-MM-DD');
 
 export const formatAmount = (amount: BigNumber, tokenAddress: string, tokens: TokenInfoExtended[]) => {
-  const decimals = getTokenInfo(tokenAddress, tokens).decimals;
+  const matchedToken = getTokenInfo(tokenAddress, tokens);
+  if (!matchedToken) return 'Relayer/API Connection Issue';
+  const decimals = matchedToken.decimals;
   return Number(formatUnits(amount, decimals)).toLocaleString(undefined, {
     minimumFractionDigits: 0,
     maximumFractionDigits: 10,
@@ -177,8 +179,11 @@ export const getTokenLogoUri = (tokenAddress: string, tokens: TokenInfoExtended[
 
 export const formatTime = (timestamp: number) => date.formatDate(timestamp, 'h:mm A');
 
-export const getTokenSymbol = (tokenAddress: string, tokens: TokenInfoExtended[]) =>
-  getTokenInfo(tokenAddress, tokens).symbol;
+export const getTokenSymbol = (tokenAddress: string, tokens: TokenInfoExtended[]) => {
+  const matchedToken = getTokenInfo(tokenAddress, tokens);
+  const tokenSymbol = matchedToken ? matchedToken.symbol : '';
+  return tokenSymbol;
+};
 
 /**
  * @notice Copies the address of type to the clipboard