Merge branch 'release/1.18.0'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@balancer-labs/frontend-v2",
-  "version": "1.17.7",
+  "version": "1.18.0",
   "engines": {
     "node": "14.x",
     "npm": ">=7"

src/App.vue

@@ -3,7 +3,7 @@
   <div id="app">
     <AppNav />
     <AppHero v-if="isHomePage" />
-    <div class="pb-12">
+    <div class="pb-16">
       <router-view :key="$route.path" class="flex-auto" />
     </div>
     <AppFooterNav v-if="upToLargeBreakpoint" />
@@ -27,12 +27,13 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onBeforeMount, computed } from 'vue';
+import { defineComponent, onBeforeMount, computed, watch } from 'vue';
 import { VueQueryDevTools } from 'vue-query/devtools';
 import { useStore } from 'vuex';
 import BigNumber from 'bignumber.js';
 import { useRoute } from 'vue-router';
 import SafeAppsSDK from '@gnosis.pm/safe-apps-sdk';
+import { useI18n } from 'vue-i18n';
 
 import useDarkMode from './composables/useDarkMode';
 import useWeb3Watchers from '@/composables/useWeb3Watchers';
@@ -45,6 +46,8 @@ import { DEFAULT_TOKEN_DECIMALS } from './constants/tokens';
 import Notifications from '@/components/notifications/Notifications.vue';
 import useBreakpoints from './composables/useBreakpoints';
 import { tryPromiseWithTimeout } from './lib/utils/promise';
+import useTokens from './composables/useTokens';
+import useAlerts, { AlertPriority, AlertType } from './composables/useAlerts';
 
 BigNumber.config({ DECIMAL_PLACES: DEFAULT_TOKEN_DECIMALS });
 
@@ -80,10 +83,20 @@ export default defineComponent({
       connectWallet,
       toggleWalletSelectModal
     } = useWeb3();
+    const {
+      priceQueryError,
+      refetchPrices,
+      balancesQueryError,
+      refetchBalances,
+      allowancesQueryError,
+      refetchAllowances
+    } = useTokens();
     const store = useStore();
     const route = useRoute();
     const { upToLargeBreakpoint } = useBreakpoints();
     const { darkMode, toggleDarkMode } = useDarkMode();
+    const { addAlert, removeAlert } = useAlerts();
+    const { t } = useI18n();
 
     // COMPUTED
     const isHomePage = computed(() => route.path === '/');
@@ -101,6 +114,54 @@ export default defineComponent({
       store.dispatch('app/init');
     });
 
+    watch(priceQueryError, () => {
+      if (priceQueryError.value) {
+        addAlert({
+          id: 'price-fetch-error',
+          label: t('alerts.price-fetch-error'),
+          type: AlertType.ERROR,
+          persistent: true,
+          action: refetchPrices.value,
+          actionLabel: t('alerts.retry-label'),
+          priority: AlertPriority.MEDIUM
+        });
+      } else {
+        removeAlert('price-fetch-error');
+      }
+    });
+
+    watch(balancesQueryError, () => {
+      if (balancesQueryError.value) {
+        addAlert({
+          id: 'balances-fetch-error',
+          label: t('alerts.balances-fetch-error'),
+          type: AlertType.ERROR,
+          persistent: true,
+          action: refetchBalances.value,
+          actionLabel: t('alerts.retry-label'),
+          priority: AlertPriority.MEDIUM
+        });
+      } else {
+        removeAlert('balances-fetch-error');
+      }
+    });
+
+    watch(allowancesQueryError, () => {
+      if (allowancesQueryError.value) {
+        addAlert({
+          id: 'allowances-fetch-error',
+          label: t('alerts.allowances-fetch-error'),
+          type: AlertType.ERROR,
+          persistent: true,
+          action: refetchAllowances.value,
+          actionLabel: t('alerts.retry-label'),
+          priority: AlertPriority.MEDIUM
+        });
+      } else {
+        removeAlert('allowances-fetch-error');
+      }
+    });
+
     return {
       // computed
       isWalletSelectVisible,

src/components/_global/BalCard/BalCard.vue

@@ -1,5 +1,6 @@
 <template>
   <div :class="['bal-card', cardClasses]">
+    <div v-if="imgSrc" class="feature" :style="featureStyles" />
     <div v-if="!!title || $slots.header" :class="['header', headerClasses]">
       <component :is="titleTag" v-if="!!title" v-text="title" />
       <div v-if="$slots.header" class="flex-1 flex items-center">
@@ -23,12 +24,15 @@ export default defineComponent({
 
   props: {
     title: { type: String, default: '' },
-    titleTag: { type: String, default: 'h5' },
+    titleTag: { type: String, default: 'h4' },
     square: { type: Boolean, default: false },
     noPad: { type: Boolean, default: false },
     noContentPad: { type: Boolean, default: false },
     noBorder: { type: Boolean, default: false },
     darkBgColor: { type: String, default: '850' },
+    imgSrc: { type: String, default: '' },
+    hFull: { type: Boolean, default: false },
+    growContent: { type: Boolean, default: false },
     shadow: {
       type: String,
       default: '',
@@ -48,47 +52,59 @@ export default defineComponent({
         'rounded-lg': !props.square,
         [`bg-white dark:bg-gray-${props.darkBgColor}`]: true,
         [`shadow${props.shadow ? '-' : ''}${props.shadow}`]: true,
-        [borderClasses.value]: !props.noBorder
+        [borderClasses.value]: !props.noBorder,
+        'h-full': props.hFull
       };
     });
 
     const headerClasses = computed(() => {
       return {
-        'p-4 pb-3': !props.noPad
+        'p-4 pb-0': !props.noPad
       };
     });
 
     const contentClasses = computed(() => {
       return {
-        'p-4 pt-3': !props.noPad && !props.noContentPad
+        'p-4': !props.noPad && !props.noContentPad,
+        'flex-grow': props.growContent
       };
     });
 
     const footerClasses = computed(() => {
       return {
         'rounded-b-lg': !props.square,
-        'p-4 pt-3': !props.noPad
+        'p-4 pt-0': !props.noPad
       };
     });
 
+    const featureStyles = computed(() => ({
+      backgroundImage: `url('${props.imgSrc}')`
+    }));
+
     return {
       cardClasses,
       contentClasses,
       headerClasses,
-      footerClasses
+      footerClasses,
+      featureStyles
     };
   }
 });
 </script>
 
 <style scoped>
+.bal-card {
+  @apply overflow-hidden flex flex-col;
+}
 .header {
   @apply flex items-center;
 }
 
 .footer {
   @apply flex items-center;
-  @apply bg-gray-50 dark:bg-gray-850;
-  @apply border-t border-gray-100 dark:border-gray-900;
+}
+
+.feature {
+  @apply w-full h-40 bg-center;
 }
 </style>

src/components/navs/AppNav/AppNav.vue

@@ -1,5 +1,5 @@
 <template>
-  <AppNavAlert v-if="alert" :alert="alert" />
+  <AppNavAlert v-if="currentAlert" :alert="currentAlert" />
   <nav id="app-nav" ref="appNav" class="h-20 px-4 lg:px-6 sticky top-0">
     <div class="h-full flex items-center justify-between">
       <div class="w-2/3 lg:w-1/3 flex items-center">
@@ -30,7 +30,6 @@
 
 <script>
 import { computed, defineComponent, onMounted, onUnmounted, ref } from 'vue';
-import { useStore } from 'vuex';
 import useBreakpoints from '@/composables/useBreakpoints';
 import AppLogo from '@/components/images/AppLogo.vue';
 import AppIcon from '@/components/images/AppIcon.vue';
@@ -41,6 +40,7 @@ import AppNavNetworkSelect from './AppNavNetworkSelect.vue';
 import useFathom from '@/composables/useFathom';
 import useWeb3 from '@/services/web3/useWeb3';
 import DarkModeToggle from '@/components/btns/DarkModeToggle.vue';
+import useAlerts from '@/composables/useAlerts';
 
 export default defineComponent({
   components: {
@@ -55,16 +55,15 @@ export default defineComponent({
 
   setup() {
     // COMPOSABLES
-    const store = useStore();
     const { bp, upToLargeBreakpoint } = useBreakpoints();
     const { trackGoal, Goals } = useFathom();
     const { connector } = useWeb3();
+    const { currentAlert } = useAlerts();
 
     // DATA
     const appNav = ref(null);
 
     // COMPUTED
-    const alert = computed(() => store.state.alerts.current);
     const hideNetworkSelect = computed(() => connector.value?.id === 'gnosis');
 
     // METHODS
@@ -90,7 +89,7 @@ export default defineComponent({
       appNav,
       // computed
       bp,
-      alert,
+      currentAlert,
       upToLargeBreakpoint,
       hideNetworkSelect,
       // methods

src/components/navs/AppNav/AppNavAlert.vue

@@ -13,16 +13,15 @@
         @click="alert.action"
       />
     </div>
-    <div v-if="!alert.persistant" class="w-8">
+    <div v-if="!alert.persistent" class="w-8">
       <BalIcon name="x" class="cursor-pointer" @click="handleClose" />
     </div>
   </div>
 </template>
 
 <script lang="ts">
+import useAlerts, { Alert, AlertType } from '@/composables/useAlerts';
 import { computed, defineComponent, PropType } from 'vue';
-import { Alert } from '@/store/modules/alerts';
-import { useStore } from 'vuex';
 
 export default defineComponent({
   name: 'NavAlert',
@@ -32,11 +31,11 @@ export default defineComponent({
   },
 
   setup(props) {
-    const store = useStore();
+    const { removeAlert } = useAlerts();
 
     const colorClass = computed(() => {
       switch (props.alert.type) {
-        case 'error':
+        case AlertType.ERROR:
           return 'bg-red-500 text-white';
         default:
           return 'bg-black text-white';
@@ -45,7 +44,7 @@ export default defineComponent({
 
     const iconName = computed(() => {
       switch (props.alert.type) {
-        case 'error':
+        case AlertType.ERROR:
           return 'alert-triangle';
         default:
           return 'info';
@@ -59,7 +58,7 @@ export default defineComponent({
     });
 
     function handleClose() {
-      store.commit('alerts/setCurrent', null);
+      removeAlert(props.alert.id);
     }
 
     return { classes, iconName, handleClose };