From e7f0208b4d2ca565086bdbd46d3bcfae148df7c7 Mon Sep 17 00:00:00 2001
From: Georges KABBOUCHI <georges.kabbouchi@gmail.com>
Date: Sun, 22 Aug 2021 17:20:28 +0300
Subject: [PATCH 1/2] Upgrade dsa-connect

---
 .../sidebar/context/aaveV2/SidebarAaveV2Supply.vue    | 11 +++++++----
 composables/swap/use1InchSwap.ts                      |  3 ++-
 composables/useDSA.ts                                 |  3 +--
 composables/useSidebar.ts                             |  3 +++
 composables/useWeb3.ts                                |  4 +++-
 package.json                                          |  2 +-
 yarn.lock                                             |  8 ++++----
 7 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/components/sidebar/context/aaveV2/SidebarAaveV2Supply.vue b/components/sidebar/context/aaveV2/SidebarAaveV2Supply.vue
index a6650b4..1671569 100644
--- a/components/sidebar/context/aaveV2/SidebarAaveV2Supply.vue
+++ b/components/sidebar/context/aaveV2/SidebarAaveV2Supply.vue
@@ -67,7 +67,7 @@
   </SidebarContextRootContainer>
 </template>
 
-<script>
+<script lang="ts">
 import { computed, defineComponent, ref } from '@nuxtjs/composition-api'
 import InputNumeric from '~/components/common/input/InputNumeric.vue'
 import { useAaveV2Position } from '~/composables/protocols/useAaveV2Position'
@@ -87,7 +87,7 @@ import { useDSA } from '~/composables/useDSA'
 import ButtonCTA from '~/components/common/input/ButtonCTA.vue'
 import Button from '~/components/Button.vue'
 import { useSidebar } from '~/composables/useSidebar'
-
+import DSA from "dsa-connect"
 export default defineComponent({
   components: { InputNumeric, ToggleButton, ButtonCTA, Button },
   props: {
@@ -102,7 +102,7 @@ export default defineComponent({
     const { formatNumber, formatUsdMax, formatUsd } = useFormatting()
     const { isZero, gt, plus } = useBigNumber()
     const { parseSafeFloat } = useParsing()
-    const { showPendingTransaction, showWarning } = useNotification()
+    const { showPendingTransaction, showWarning, showConfirmedTransaction } = useNotification()
     const { status, displayPositions, maxLiquidation, liquidationPrice, liquidationMaxPrice } = useAaveV2Position({
       overridePosition: (position) => {
         if (rootTokenKey.value !== position.key) return position
@@ -160,9 +160,12 @@ export default defineComponent({
       })
 
       try {
-        const txHash = await dsa.value.cast({
+        const txHash = await (dsa.value as DSA).cast({
           spells,
           from: account.value,
+          onReceipt: (receipt) => {
+            showConfirmedTransaction(receipt.transactionHash)
+          }
         })
 
         showPendingTransaction(txHash)
diff --git a/composables/swap/use1InchSwap.ts b/composables/swap/use1InchSwap.ts
index 43a9846..9043a5c 100644
--- a/composables/swap/use1InchSwap.ts
+++ b/composables/swap/use1InchSwap.ts
@@ -1,3 +1,4 @@
+import { Spell } from "dsa-connect";
 import { useBigNumber } from "../useBigNumber";
 import { useDSA } from "../useDSA";
 import { useFormatting } from "../useFormatting";
@@ -35,7 +36,7 @@ export const use1InchSwap = () => {
     unitAmt,
     calldata,
     setId
-  }) {
+  }): Spell {
     if (
       activeNetworkId.value === Network.Polygon ||
       activeAccount.value.version == 2
diff --git a/composables/useDSA.ts b/composables/useDSA.ts
index 8fdc30e..3bd8cd9 100644
--- a/composables/useDSA.ts
+++ b/composables/useDSA.ts
@@ -1,6 +1,5 @@
 import { computed, readonly, ref, watch } from "@nuxtjs/composition-api";
 import { useWeb3 } from "./useWeb3";
-//@ts-ignore
 import DSA from "dsa-connect";
 import addresses from "~/constant/addresses";
 import abis from "~/constant/abis";
@@ -69,7 +68,7 @@ export function useDSA() {
     try {
       const transactionHash = await dsa.value.build({ version: 2 });
 
-      accounts.value = await dsa.value.getAccounts();
+      accounts.value = await dsa.value.getAccounts(account.value);
       return transactionHash;
     } catch (error) {
     } finally {
diff --git a/composables/useSidebar.ts b/composables/useSidebar.ts
index 98fd763..a8ee8c2 100644
--- a/composables/useSidebar.ts
+++ b/composables/useSidebar.ts
@@ -80,10 +80,12 @@ export function init() {
     async ([route, active, dsa], [oldRoute, oldActive, oldDsa]) => {
       await nextTick();
 
+      //@ts-ignore
       const hasPathChanged = !oldRoute || route.path !== oldRoute.path;
       const hasIsLoggedInChanged = active !== oldActive;
       const hasDsaChanged = dsa !== oldDsa;
 
+      //@ts-ignore
       const [hash, params] = route.hash.split("?");
       
       if (hasPathChanged){
@@ -91,6 +93,7 @@ export function init() {
         return
       }
 
+       //@ts-ignore
       sidebar.value = sidebars[route.path + hash] || sidebars[hash];
         
       if (!sidebar.value) {
diff --git a/composables/useWeb3.ts b/composables/useWeb3.ts
index 813671d..0d09b48 100644
--- a/composables/useWeb3.ts
+++ b/composables/useWeb3.ts
@@ -23,7 +23,7 @@ const chains = [
 ];
 
 const active = ref(false);
-const chainId = ref<number>();
+const chainId = ref<1|137>();
 const networkName = computed<Network>(
   () => chains.find(c => c.chainId === chainId.value)?.name || Network.Mainnet
 );
@@ -60,6 +60,7 @@ export function useWeb3() {
       account.value = web3Provider.accounts[0];
     }
     let newWeb3 = new Web3(web3Provider);
+     //@ts-ignore
     chainId.value = await newWeb3.eth.getChainId();
     web3.value = newWeb3;
 
@@ -118,6 +119,7 @@ export function useWeb3() {
       return;
     }
     let newWeb3 = new Web3(web3Provider);
+     //@ts-ignore
     chainId.value = await newWeb3.eth.getChainId();
     web3.value = newWeb3;
   };
diff --git a/package.json b/package.json
index ebbc75f..5dffa14 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "bignumber.js": "^9.0.1",
     "core-js": "^3.15.1",
     "css-color-function": "^1.3.3",
-    "dsa-connect": "^0.4.3",
+    "dsa-connect": "^0.4.4-beta.2",
     "nuxt": "^2.15.7",
     "qrcode": "^1.4.4",
     "v-click-outside": "^3.1.2",
diff --git a/yarn.lock b/yarn.lock
index 35f518d..4323a84 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4675,10 +4675,10 @@ drbg.js@^1.0.1:
     create-hash "^1.1.2"
     create-hmac "^1.1.4"
 
-dsa-connect@^0.4.3:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/dsa-connect/-/dsa-connect-0.4.3.tgz#382ad7c1b1fa54f963c84adc353dea4bde2f6e80"
-  integrity sha512-kbG46cvAR2muy2P5jOTVsSZmyDewTAA0lKAeddsrVtpbmys1ujSuDjY/su4At6fAg/iF9/k+ltJAOEvoqt6g9A==
+dsa-connect@^0.4.4-beta.2:
+  version "0.4.4-beta.2"
+  resolved "https://registry.yarnpkg.com/dsa-connect/-/dsa-connect-0.4.4-beta.2.tgz#d26739c4d67176e7f29b08cb84ee4f510e0bb830"
+  integrity sha512-ZRk4OAHD0GFJW74fggNfwXCho4AdWKJdXCyGtuCxwTY7Pm1ycisa/469vD6UjcB8j2CrNDk3AsPgXs5IBmkzDQ==
 
 duplexer3@^0.1.4:
   version "0.1.4"

From 27fe5f6e944ec0c90a39e41c19cb569822c6a7a4 Mon Sep 17 00:00:00 2001
From: Georges KABBOUCHI <georges.kabbouchi@gmail.com>
Date: Sun, 22 Aug 2021 17:27:33 +0300
Subject: [PATCH 2/2] Update SidebarAaveV2Supply.vue

---
 .../context/aaveV2/SidebarAaveV2Supply.vue    | 182 ++++++++++--------
 1 file changed, 107 insertions(+), 75 deletions(-)

diff --git a/components/sidebar/context/aaveV2/SidebarAaveV2Supply.vue b/components/sidebar/context/aaveV2/SidebarAaveV2Supply.vue
index 1671569..5064fed 100644
--- a/components/sidebar/context/aaveV2/SidebarAaveV2Supply.vue
+++ b/components/sidebar/context/aaveV2/SidebarAaveV2Supply.vue
@@ -68,114 +68,146 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from '@nuxtjs/composition-api'
-import InputNumeric from '~/components/common/input/InputNumeric.vue'
-import { useAaveV2Position } from '~/composables/protocols/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'
-import { useValidation } from '~/composables/useValidation'
-import { useToken } from '~/composables/useToken'
-import { useParsing } from '~/composables/useParsing'
-import { useMaxAmountActive } from '~/composables/useMaxAmountActive'
-import { useWeb3 } from '~/composables/useWeb3'
-import atokens from '~/constant/atokens'
-import ToggleButton from '~/components/common/input/ToggleButton.vue'
-import { useDSA } from '~/composables/useDSA'
-import ButtonCTA from '~/components/common/input/ButtonCTA.vue'
-import Button from '~/components/Button.vue'
-import { useSidebar } from '~/composables/useSidebar'
-import DSA from "dsa-connect"
+import { computed, defineComponent, ref } from "@nuxtjs/composition-api";
+import InputNumeric from "~/components/common/input/InputNumeric.vue";
+import { useAaveV2Position } from "~/composables/protocols/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";
+import { useValidation } from "~/composables/useValidation";
+import { useToken } from "~/composables/useToken";
+import { useParsing } from "~/composables/useParsing";
+import { useMaxAmountActive } from "~/composables/useMaxAmountActive";
+import { useWeb3 } from "~/composables/useWeb3";
+import atokens from "~/constant/atokens";
+import ToggleButton from "~/components/common/input/ToggleButton.vue";
+import { useDSA } from "~/composables/useDSA";
+import ButtonCTA from "~/components/common/input/ButtonCTA.vue";
+import Button from "~/components/Button.vue";
+import { useSidebar } from "~/composables/useSidebar";
+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 { 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, showWarning, showConfirmedTransaction } = useNotification()
-    const { status, displayPositions, maxLiquidation, liquidationPrice, liquidationMaxPrice } = useAaveV2Position({
-      overridePosition: (position) => {
-        if (rootTokenKey.value !== position.key) return position
+    const { close } = useSidebar();
+    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,
+      showWarning,
+      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 amountParsed = computed(() => parseSafeFloat(amount.value))
+    const amount = ref("");
+    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 symbol = computed(() => token.value?.symbol)
-    const decimals = computed(() => token.value?.decimals)
-    const balance = computed(() => getBalanceByKey(rootTokenKey.value))
-    const address = computed(() => token.value?.address)
+    const token = computed(() => getTokenByKey(rootTokenKey.value));
+    const symbol = computed(() => token.value?.symbol);
+    const decimals = computed(() => token.value?.decimals);
+    const balance = computed(() => getBalanceByKey(rootTokenKey.value));
+    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 liqValid = gt(factor.value, '0') ? validateLiquidation(status.value, maxLiquidation.value) : null
+      const hasAmountValue = !isZero(amount.value);
+      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 },
-      }
-    })
-    const { errorMessages, isValid } = useValidation(errors)
+        auth: { message: validateIsLoggedIn(!!account.value), show: true }
+      };
+    });
+    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',
-        method: 'deposit',
-        args: [address.value, amount, 0, 0],
-      })
+        connector: "aave_v2",
+        method: "deposit",
+        args: [address.value, amount, 0, 0]
+      });
 
       try {
         const txHash = await (dsa.value as DSA).cast({
           spells,
           from: account.value,
-          onReceipt: (receipt) => {
-            showConfirmedTransaction(receipt.transactionHash)
-          }
-        })
+          onReceipt: async receipt => {
+            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>