fixes

components/Notification.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex w-full pl-4 overflow-hidden border border-opacity-75 shadow-lg dark:bg-dark-300 border-grey-light">
+  <div class="flex w-full pl-4 overflow-hidden bg-white border border-opacity-75 shadow-lg dark:bg-dark-300 border-grey-light">
     <div class="flex items-center w-full py-4">
       <IconNotification :icon="icon" />
 
@@ -32,7 +32,7 @@
         class="h-full px-3 py-3 focus:outline-none text-grey-pure hover:text-brand dark:hover:text-light"
         @click="dismiss"
       >
-        <Icon name="x" class="w-full" />
+        <CloseIcon class="w-full" />
       </button>
     </div>
   </div>
@@ -41,10 +41,12 @@
 <script>
 import { defineComponent, onMounted } from '@nuxtjs/composition-api'
 import SVGExternalLink from '@/assets/icons/external-link.svg?inline'
+import CloseIcon from '@/assets/img/icons/heroicons/solid/x.svg?inline'
 
 export default defineComponent({
   components: {
     SVGExternalLink,
+    CloseIcon
   },
   props: {
     title: { type: String, deafult: '' },

components/NotificationBar.vue

@@ -14,11 +14,7 @@
       <Notification
         v-for="item in queue"
         :key="item.key"
-        :title="item.title"
+        v-bind="item"
-        :body="item.body"
-        :href="item.href"
-        :icon="item.icon"
-        :duration="item.duration"
         class="mr-2"
         @dismiss="close(item.key)"
       />
@@ -30,16 +26,20 @@
       style="top: 0px; font-size: 13px"
       @click="closeAll"
     >
-      <Icon name="x" class="w-4 h-4 mr-1" />Clear all
+      <CloseIcon class="w-4 h-4 mr-1" />Clear all
     </button>
   </div>
 </template>
 
 <script>
-import { defineComponent } from '@nuxtjs/composition-api'
+import { defineComponent, onErrorCaptured } from '@nuxtjs/composition-api'
 import { useNotification } from '~/composables/useNotification'
+import CloseIcon from '@/assets/img/icons/heroicons/solid/x.svg?inline'
 
 export default defineComponent({
+  components :{
+    CloseIcon
+  },
   setup() {
     const { queue, close, closeAll } = useNotification()
 

components/sidebar/context/SidebarContext.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="absolute inset-y-0 right-0 z-10 flex flex-col w-full overflow-hidden transform shadow bg-white"
+    class="absolute inset-y-0 right-0 z-10 flex max-h-screen flex-col w-full overflow-hidden transform shadow bg-white"
     style="max-width: clamp(var(--min-width-app), var(--width-sidebar-context), 100%)"
     :class="{
       'translate-x-0 duration-300': isOpen,

components/sidebar/context/aaveV2/SidebarAaveV2Borrow.vue

@@ -106,11 +106,10 @@ export default defineComponent({
     const { networkName, account } = useWeb3()
     const { dsa } = useDSA()
     const { getTokenByKey, valInt } = useToken()
-    const { getBalanceByKey, fetchBalances } = useBalances()
     const { formatNumber, formatUsdMax, formatUsd } = useFormatting()
     const { isZero, gt, plus } = useBigNumber()
     const { parseSafeFloat } = useParsing()
-
+    const { showPendingTransaction } = useNotification()
     const { status, displayPositions, liquidation, maxLiquidation, liquidationPrice, liquidationMaxPrice, annualPercentageRateTypes } = useAaveV2Position({
       overridePosition: (position) => {
         if (rootTokenKey.value !== position.key) return position
@@ -195,7 +194,7 @@ export default defineComponent({
         from: account.value,
       })
 
-      fetchBalances(true)
+      showPendingTransaction(txHash)
 
       pending.value = false
 

components/sidebar/context/aaveV2/SidebarAaveV2Payback.vue

@@ -122,7 +122,7 @@ export default defineComponent({
     const { formatNumber, formatUsdMax, formatUsd } = useFormatting()
     const { isZero, gt, plus, max, minus } = useBigNumber()
     const { parseSafeFloat } = useParsing()
-
+const { showPendingTransaction } = useNotification()
     const { status, displayPositions, liquidation, maxLiquidation, liquidationPrice, liquidationMaxPrice, annualPercentageRateTypes } = useAaveV2Position({
       overridePosition: (position) => {
         if (rootTokenKey.value !== position.key) return position
@@ -214,7 +214,7 @@ export default defineComponent({
         from: account.value,
       })
 
-      fetchBalances(true)
+      showPendingTransaction(txHash)
 
       pending.value = false
 

components/sidebar/context/aaveV2/SidebarAaveV2Supply.vue

@@ -70,6 +70,7 @@ import { computed, defineComponent, ref } from '@nuxtjs/composition-api'
 import InputNumeric from '~/components/common/input/InputNumeric.vue'
 import { useAaveV2Position } from '~/composables/useAaveV2Position'
 import { useBalances } from '~/composables/useBalances'
+import { useNotification } from '~/composables/useNotification'
 import { useBigNumber } from '~/composables/useBigNumber'
 import { useFormatting } from '~/composables/useFormatting'
 import { useValidators } from '~/composables/useValidators'
@@ -99,7 +100,7 @@ export default defineComponent({
     const { formatNumber, formatUsdMax, formatUsd } = useFormatting()
     const { isZero, gt, plus } = useBigNumber()
     const { parseSafeFloat } = useParsing()
-
+  const { showPendingTransaction } = useNotification()
     const { status, displayPositions, maxLiquidation, liquidationPrice, liquidationMaxPrice } = useAaveV2Position({
       overridePosition: (position) => {
         if (rootTokenKey.value !== position.key) return position
@@ -161,7 +162,7 @@ export default defineComponent({
         from: account.value,
       })
 
-      fetchBalances(true)
+      showPendingTransaction(txHash)
 
       pending.value = false
 

components/sidebar/context/aaveV2/SidebarAaveV2Withdraw.vue

@@ -68,7 +68,7 @@
 </template>
 
 <script>
-import { computed, defineComponent, ref } from '@nuxtjs/composition-api'
+import { computed, defineComponent, onMounted, ref } from '@nuxtjs/composition-api'
 import InputNumeric from '~/components/common/input/InputNumeric.vue'
 import { useAaveV2Position } from '~/composables/useAaveV2Position'
 import { useBalances } from '~/composables/useBalances'
@@ -102,6 +102,7 @@ export default defineComponent({
     const { formatNumber, formatUsdMax, formatUsd } = useFormatting()
     const { isZero, gt, plus, max, minus } = useBigNumber()
     const { parseSafeFloat } = useParsing()
+    const { showPendingTransaction } = useNotification()
 
     const { stats, status, displayPositions, maxLiquidation, liquidationPrice, liquidationMaxPrice } = useAaveV2Position({
       overridePosition: (position) => {
@@ -114,7 +115,6 @@ export default defineComponent({
       },
     })
 
-
     const availableLiquidity = computed(
       () => displayPositions.value.find((position) => position.key === rootTokenKey.value)?.availableLiquidity || '0'
     )
@@ -180,7 +180,7 @@ export default defineComponent({
         from: account.value,
       })
 
-      fetchBalances(true)
+      showPendingTransaction(txHash)
 
       pending.value = false
 

components/sidebar/context/overview/SidebarOverview.vue

@@ -13,25 +13,8 @@
               <search-input
                 v-model.trim="search"
                 placeholder="Search Currency"
-                class="w-full mr-2"
+                class="w-full"
               />
-              <Menu>
-                <template v-slot:activator="{ on }">
-                  <menu-button size="38" v-on="on" />
-                </template>
-                <template>
-                  <list :items="menuActions">
-                    <template v-slot:default="{ item }">
-                      <menu-list-item
-                        :item="item.text"
-                        :icon="item.icon"
-                        :disabled="item.disabled"
-                        @click="item.onClick"
-                      ></menu-list-item>
-                    </template>
-                  </list>
-                </template>
-              </Menu>
             </div>
 
             <div class="flex flex-col flex-grow mt-2 sm:mt-4 overflow-y-scroll">
@@ -72,21 +55,9 @@ export default defineComponent({
   components: { SVGAdd, CurrencyList, List, Menu, MenuButton, MenuListItem },
   setup() {
 
-    const menuActions = computed(() => [
-      {
-        text: 'Add custom token',
-        onClick: startAddingCustomToken,
-        icon: SVGAdd,
-        disabled: false,
-      },
-    ])
-
-    function startAddingCustomToken() {
-    }
-
     const search = ref(null)
 
-    return { search, menuActions }
+    return { search }
   },
 })
 </script>

composables/useSidebar.ts

@@ -73,8 +73,6 @@ export function init() {
         return
       }
 
-      console.log(hash, sidebars[route.path + hash], sidebars[hash]);
-      
       sidebar.value = sidebars[route.path + hash] || sidebars[hash];
         
       if (!sidebar.value) {

layouts/default.vue

@@ -50,7 +50,7 @@
 </template>
 
 <script>
-import { defineComponent, nextTick, useContext, useRoute, watch } from "@nuxtjs/composition-api";
+import { defineComponent, nextTick, onErrorCaptured, useContext, useRoute, watch } from "@nuxtjs/composition-api";
 import MakerDAOIcon from '~/assets/icons/makerdao.svg?inline'
 import CompoundIcon from '~/assets/icons/compound.svg?inline'
 import AaveIcon from '~/assets/icons/aave.svg?inline'
@@ -104,6 +104,11 @@ export default defineComponent({
       }
     }, { immediate: true })
 
+    onErrorCaptured(() => {
+      
+      return false
+    })
+
     return {
       active,
       activate,