Update SidebarAaveV2Supply.vue

components/sidebar/context/aaveV2/SidebarAaveV2Supply.vue

@@ -68,114 +68,146 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from '@nuxtjs/composition-api'
+import { computed, defineComponent, ref } from "@nuxtjs/composition-api";
-import InputNumeric from '~/components/common/input/InputNumeric.vue'
+import InputNumeric from "~/components/common/input/InputNumeric.vue";
-import { useAaveV2Position } from '~/composables/protocols/useAaveV2Position'
+import { useAaveV2Position } from "~/composables/protocols/useAaveV2Position";
-import { useBalances } from '~/composables/useBalances'
+import { useBalances } from "~/composables/useBalances";
-import { useNotification } from '~/composables/useNotification'
+import { useNotification } from "~/composables/useNotification";
-import { useBigNumber } from '~/composables/useBigNumber'
+import { useBigNumber } from "~/composables/useBigNumber";
-import { useFormatting } from '~/composables/useFormatting'
+import { useFormatting } from "~/composables/useFormatting";
-import { useValidators } from '~/composables/useValidators'
+import { useValidators } from "~/composables/useValidators";
-import { useValidation } from '~/composables/useValidation'
+import { useValidation } from "~/composables/useValidation";
-import { useToken } from '~/composables/useToken'
+import { useToken } from "~/composables/useToken";
-import { useParsing } from '~/composables/useParsing'
+import { useParsing } from "~/composables/useParsing";
-import { useMaxAmountActive } from '~/composables/useMaxAmountActive'
+import { useMaxAmountActive } from "~/composables/useMaxAmountActive";
-import { useWeb3 } from '~/composables/useWeb3'
+import { useWeb3 } from "~/composables/useWeb3";
-import atokens from '~/constant/atokens'
+import atokens from "~/constant/atokens";
-import ToggleButton from '~/components/common/input/ToggleButton.vue'
+import ToggleButton from "~/components/common/input/ToggleButton.vue";
-import { useDSA } from '~/composables/useDSA'
+import { useDSA } from "~/composables/useDSA";
-import ButtonCTA from '~/components/common/input/ButtonCTA.vue'
+import ButtonCTA from "~/components/common/input/ButtonCTA.vue";
-import Button from '~/components/Button.vue'
+import Button from "~/components/Button.vue";
-import { useSidebar } from '~/composables/useSidebar'
+import { useSidebar } from "~/composables/useSidebar";
-import DSA from "dsa-connect"
+import DSA from "dsa-connect";
 export default defineComponent({
   components: { InputNumeric, ToggleButton, ButtonCTA, Button },
   props: {
-    tokenKey: { type: String, required: true },
+    tokenKey: { type: String, required: true }
   },
   setup(props) {
-    const { close } = useSidebar()
+    const { close } = useSidebar();
-    const { networkName, account } = useWeb3()
+    const { networkName, account } = useWeb3();
-    const { dsa } = useDSA()
+    const { dsa } = useDSA();
-    const { getTokenByKey, valInt } = useToken()
+    const { getTokenByKey, valInt } = useToken();
-    const { getBalanceByKey, fetchBalances } = useBalances()
+    const { getBalanceByKey, fetchBalances } = useBalances();
-    const { formatNumber, formatUsdMax, formatUsd } = useFormatting()
+    const { formatNumber, formatUsdMax, formatUsd } = useFormatting();
-    const { isZero, gt, plus } = useBigNumber()
+    const { isZero, gt, plus } = useBigNumber();
-    const { parseSafeFloat } = useParsing()
+    const { parseSafeFloat } = useParsing();
-    const { showPendingTransaction, showWarning, showConfirmedTransaction } = useNotification()
+    const {
-    const { status, displayPositions, maxLiquidation, liquidationPrice, liquidationMaxPrice } = useAaveV2Position({
+      showPendingTransaction,
-      overridePosition: (position) => {
+      showWarning,
-        if (rootTokenKey.value !== position.key) return position
+      showConfirmedTransaction
+    } = useNotification();
+    const {
+      status,
+      displayPositions,
+      maxLiquidation,
+      liquidationPrice,
+      liquidationMaxPrice,
+      refreshPosition
+    } = useAaveV2Position({
+      overridePosition: position => {
+        if (rootTokenKey.value !== position.key) return position;
 
         return {
           ...position,
-          supply: plus(position.supply, amountParsed.value).toFixed(),
+          supply: plus(position.supply, amountParsed.value).toFixed()
-        }
+        };
-      },
+      }
-    })
+    });
 
-    const amount = ref('')
+    const amount = ref("");
-    const amountParsed = computed(() => parseSafeFloat(amount.value))
+    const amountParsed = computed(() => parseSafeFloat(amount.value));
 
-    const rootTokenKey = computed(() => atokens[networkName.value].rootTokens.includes(props.tokenKey) ? props.tokenKey : 'eth')
+    const rootTokenKey = computed(() =>
+      atokens[networkName.value].rootTokens.includes(props.tokenKey)
+        ? props.tokenKey
+        : "eth"
+    );
 
-    const token = computed(() => getTokenByKey(rootTokenKey.value))
+    const token = computed(() => getTokenByKey(rootTokenKey.value));
-    const symbol = computed(() => token.value?.symbol)
+    const symbol = computed(() => token.value?.symbol);
-    const decimals = computed(() => token.value?.decimals)
+    const decimals = computed(() => token.value?.decimals);
-    const balance = computed(() => getBalanceByKey(rootTokenKey.value))
+    const balance = computed(() => getBalanceByKey(rootTokenKey.value));
-    const address = computed(() => token.value?.address)
+    const address = computed(() => token.value?.address);
 
     const factor = computed(
-      () => displayPositions.value?.find((position) => rootTokenKey.value === position.key)?.factor
+      () =>
-    )
+        displayPositions.value?.find(
+          position => rootTokenKey.value === position.key
+        )?.factor
+    );
 
-    const { toggle, isMaxAmount } = useMaxAmountActive(amount, balance)
+    const { toggle, isMaxAmount } = useMaxAmountActive(amount, balance);
 
-    const { validateAmount, validateLiquidation, validateIsLoggedIn } = useValidators()
+    const {
+      validateAmount,
+      validateLiquidation,
+      validateIsLoggedIn
+    } = useValidators();
     const errors = computed(() => {
-      const hasAmountValue = !isZero(amount.value)
+      const hasAmountValue = !isZero(amount.value);
-      const liqValid = gt(factor.value, '0') ? validateLiquidation(status.value, maxLiquidation.value) : null
+      const liqValid = gt(factor.value, "0")
+        ? validateLiquidation(status.value, maxLiquidation.value)
+        : null;
 
       return {
-        amount: { message: validateAmount(amountParsed.value, balance.value), show: hasAmountValue },
+        amount: {
+          message: validateAmount(amountParsed.value, balance.value),
+          show: hasAmountValue
+        },
         liquidation: { message: liqValid, show: hasAmountValue },
-        auth: { message: validateIsLoggedIn(!!account.value), show: true },
+        auth: { message: validateIsLoggedIn(!!account.value), show: true }
-      }
+      };
-    })
+    });
-    const { errorMessages, isValid } = useValidation(errors)
+    const { errorMessages, isValid } = useValidation(errors);
 
-    const pending = ref(false)
+    const pending = ref(false);
 
     async function cast() {
-      pending.value = true
+      pending.value = true;
 
-      const amount = isMaxAmount.value ? dsa.value.maxValue : valInt(amountParsed.value, decimals.value)
+      const amount = isMaxAmount.value
+        ? dsa.value.maxValue
+        : valInt(amountParsed.value, decimals.value);
 
-      const spells = dsa.value.Spell()
+      const spells = dsa.value.Spell();
 
       spells.add({
-        connector: 'aave_v2',
+        connector: "aave_v2",
-        method: 'deposit',
+        method: "deposit",
-        args: [address.value, amount, 0, 0],
+        args: [address.value, amount, 0, 0]
-      })
+      });
 
       try {
         const txHash = await (dsa.value as DSA).cast({
           spells,
           from: account.value,
-          onReceipt: (receipt) => {
+          onReceipt: async receipt => {
-            showConfirmedTransaction(receipt.transactionHash)
+            showConfirmedTransaction(receipt.transactionHash);
-          }
-        })
 
-        showPendingTransaction(txHash)
+            await fetchBalances(true);
+            await refreshPosition();
+          }
+        });
+
+        showPendingTransaction(txHash);
       } catch (error) {
-        showWarning(error.message)
+        showWarning(error.message);
       }
 
-      pending.value = false
+      pending.value = false;
 
-      close()
+      close();
     }
 
     return {
@@ -198,7 +230,7 @@ export default defineComponent({
       liquidationMaxPrice,
       errorMessages,
       isValid
-    }
+    };
-  },
+  }
-})
+});
 </script>