From 9cec9afa0a976009b8311d27e07e8346d8b94c15 Mon Sep 17 00:00:00 2001
From: 5450L <susalafamilia@gmail.com>
Date: Wed, 18 Sep 2024 16:27:25 +0300
Subject: [PATCH 1/5] asyncronous connecting and loading info + connect button
 'checking' status

---
 src/App.vue                                   |  3 +--
 src/components/ui/buttons/ConnectButton.vue   | 12 ++++++++++-
 src/helpers/cauldron/validators.ts            |  8 ++++++--
 .../validators/swap/validationActions.ts      | 12 +++++++++--
 src/mixins/temp.js                            |  9 +++------
 src/plugins/walletConnect/initConnect.ts      | 20 ++++++++++++++++---
 src/store/modules/connectProvider.js          |  8 ++++----
 src/views/MimSwap.vue                         |  1 +
 src/views/MyPositions.vue                     |  9 +++++++--
 src/views/PotionPoints.vue                    |  2 ++
 10 files changed, 62 insertions(+), 22 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index e094a0993..d0b031840 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <AppHeader />
-  <div class="router-wrap" :style="pageBackground" v-if="checkInProcess">
+  <div class="router-wrap" :style="pageBackground">
     <img
       class="mim-top-bg"
       src="@/assets/images/main-mim-top-bg.png"
@@ -58,7 +58,6 @@ export default {
 
   computed: {
     ...mapGetters({
-      checkInProcess: "getWalletIsConnected",
       signer: "getSigner",
     }),
 
diff --git a/src/components/ui/buttons/ConnectButton.vue b/src/components/ui/buttons/ConnectButton.vue
index 05e24a16e..46a9da4a4 100644
--- a/src/components/ui/buttons/ConnectButton.vue
+++ b/src/components/ui/buttons/ConnectButton.vue
@@ -2,6 +2,7 @@
   <button
     class="connect-btn"
     :class="{ connected: !!account }"
+    :disabled="isWalletCheckInProcess"
     @click="walletBtnHandler"
   >
     <div class="account-image-wrap" v-if="walletBtnIcon">
@@ -30,11 +31,20 @@ export default {
     ...mapGetters({
       chainId: "getChainId",
       account: "getAccount",
+      isWalletCheckInProcess: "getIsWalletCheckInProcess",
       ensName: "getEnsName",
     }),
 
     walletBtnText() {
-      if (this.account) {
+      console.log(
+        "isWalletCheckInProcess",
+        this.isWalletCheckInProcess,
+        this.account
+      );
+
+      if (this.isWalletCheckInProcess) {
+        return "Checking...";
+      } else if (this.account) {
         if (this.ensName) return this.ensName;
         return `${this.account.slice(0, 6)}...${this.account.slice(-6)}`;
       } else {
diff --git a/src/helpers/cauldron/validators.ts b/src/helpers/cauldron/validators.ts
index 5db7d919d..8bcf87148 100644
--- a/src/helpers/cauldron/validators.ts
+++ b/src/helpers/cauldron/validators.ts
@@ -5,6 +5,7 @@ import { expandDecimals } from "../gm/fee/expandDecials";
 import { getMaxToBorrow, getMaxCollateralToRemove } from "./utils";
 import { PERCENT_PRESITION } from "@/helpers/cauldron/utils";
 import { getAccountHelper } from "@/helpers/walletClienHelper";
+import type { Address } from "viem";
 
 export const WARNING_TYPES = {
   DEPOSIT_ALLOWANCE: 0,
@@ -58,7 +59,8 @@ export const validateCookByAction = (
   cauldron: CauldronInfo,
   actionConfig: ActionConfig,
   action: "borrow" | "repay",
-  chainId: number
+  chainId: number,
+  account: Address
 ) => {
   const cookType = getCookTypeByAction(actionConfig, action);
 
@@ -66,7 +68,9 @@ export const validateCookByAction = (
 
   let validationErrors: any = [];
 
-  validationErrors = validateConnection(validationErrors);
+  if (!account) {
+    validationErrors.push(WARNING_TYPES.CONNECTION);
+  }
   validationErrors = validateChain(validationErrors, cauldron, chainId);
 
   validationErrors = validatePosition(
diff --git a/src/helpers/validators/swap/validationActions.ts b/src/helpers/validators/swap/validationActions.ts
index d04707d32..9f2f7e906 100644
--- a/src/helpers/validators/swap/validationActions.ts
+++ b/src/helpers/validators/swap/validationActions.ts
@@ -1,16 +1,24 @@
 import type { ActionConfig } from "@/helpers/pools/swap/getSwapInfo";
 import { validateConnection } from "@/helpers/validators/validateConnection";
+import type { Address } from "viem";
 const SUPPORTED_CHAINS = [1, 42161, 2222, 81457]; //TODO: Import from config
 
 export const validationActions = (
   actionConfig: ActionConfig,
   selectedNetwork: number,
   chainId: number,
+  account: Address,
   isApproving: boolean
 ) => {
   const { fromToken, toToken, fromInputValue, toInputValue } = actionConfig;
 
-  const connectedError = validateConnection();
+  const connectedError = account
+    ? { btnText: false, isAllowed: true }
+    : {
+        btnText: "Connect Wallet",
+        isAllowed: true,
+        method: "connectWallet",
+      };
   if (connectedError.btnText) return connectedError;
 
   const chainError = validateChain(selectedNetwork, chainId);
@@ -59,4 +67,4 @@ const validateChain = (
     };
 
   return { btnText: "", isAllowed: true };
-};
\ No newline at end of file
+};
diff --git a/src/mixins/temp.js b/src/mixins/temp.js
index 79d6557b6..dc6c7cded 100644
--- a/src/mixins/temp.js
+++ b/src/mixins/temp.js
@@ -46,7 +46,8 @@ export default {
         this.cauldron,
         this.actionConfig,
         this.action,
-        this.chainId
+        this.chainId,
+        this.account
       );
     },
     useNoDeleverageConfirmationPopup() {
@@ -219,11 +220,7 @@ export default {
       this.isOpenGMPopup = true;
       this.$emit("clearData");
     },
-    async gmDeleverageHandler(
-      cookPayload,
-      cauldronObject,
-      notificationId
-    ) {
+    async gmDeleverageHandler(cookPayload, cauldronObject, notificationId) {
       const { cauldron } = cauldronObject.contracts;
       const cauldronActiveOrder = await cauldron.orders(cookPayload.to);
 
diff --git a/src/plugins/walletConnect/initConnect.ts b/src/plugins/walletConnect/initConnect.ts
index 0ed8f5c64..40bfe2a6c 100644
--- a/src/plugins/walletConnect/initConnect.ts
+++ b/src/plugins/walletConnect/initConnect.ts
@@ -10,19 +10,33 @@ import { getAccount } from "@wagmi/core";
 import type { Config } from "@wagmi/core";
 import { watchAccount, watchChainId } from "@wagmi/core";
 import { getEthersProvider } from "@/helpers/chains/getChainsInfo";
+import store from "@/store";
 
 export const initWalletConect = async (wagmiConfig: Config) => {
+  const account = getAccount(wagmiConfig).address;
+
+  if (!account) {
+    await initWithoutConnect(wagmiConfig);
+  } else {
+    await initConnect(wagmiConfig);
+  }
+
   watchAccount(wagmiConfig, {
-    onChange({ isConnected, isConnecting }) {
+    async onChange({ isConnected, isConnecting }) {
+      store.commit("setIsWalletCheckInProcess", true);
+
       if (!isConnected && !isConnecting) {
-        initWithoutConnect(wagmiConfig);
+        await initWithoutConnect(wagmiConfig);
       }
 
       if (isConnected && !isConnecting) {
-        initConnect(wagmiConfig);
+        await initConnect(wagmiConfig);
       }
+
+      store.commit("setIsWalletCheckInProcess", false);
     },
   });
+  store.commit("setIsWalletCheckInProcess", false);
 };
 
 const initConnect = async (wagmiConfig: Config) => {
diff --git a/src/store/modules/connectProvider.js b/src/store/modules/connectProvider.js
index 67d47ccfc..5dc4c04e2 100644
--- a/src/store/modules/connectProvider.js
+++ b/src/store/modules/connectProvider.js
@@ -7,7 +7,7 @@ export default {
     isMetamaskActive: false,
     isCoinbase: false,
     isWalletConnected: false,
-    walletCheckInProcess: true,
+    isWalletCheckInProcess: true,
     wagmiConfig: null,
   },
   mutations: {
@@ -35,9 +35,8 @@ export default {
     setMetamaskActive(state, payload) {
       state.isMetamaskActive = payload;
     },
-
-    SET_WALLET_CHECK_IN_PROCCESS(state, payload) {
-      state.walletCheckInProcess = payload;
+    setIsWalletCheckInProcess(state, payload) {
+      state.isWalletCheckInProcess = payload;
     },
   },
   getters: {
@@ -47,6 +46,7 @@ export default {
     getAccount: (state) => state.account,
     getEnsName: (state) => state.ensName,
     getWalletIsConnected: (state) => state.isWalletConnected,
+    getIsWalletCheckInProcess: (state) => state.isWalletCheckInProcess,
     getMetamaskActive: (state) => state.isMetamaskActive,
   },
 };
diff --git a/src/views/MimSwap.vue b/src/views/MimSwap.vue
index 82c9e8380..e03584e59 100644
--- a/src/views/MimSwap.vue
+++ b/src/views/MimSwap.vue
@@ -198,6 +198,7 @@ export default {
         this.actionConfig,
         this.selectedNetwork,
         this.chainId,
+        this.account,
         this.isApproving
       );
     },
diff --git a/src/views/MyPositions.vue b/src/views/MyPositions.vue
index 457e7b248..dc1890e5a 100644
--- a/src/views/MyPositions.vue
+++ b/src/views/MyPositions.vue
@@ -38,12 +38,16 @@
       </div>
 
       <div class="loader-wrap" v-if="positionsIsLoading || showEmptyBlock">
-        <BaseLoader v-if="positionsIsLoading" large text="Loading Positions" />
+        <BaseLoader
+          v-if="positionsIsLoading || isWalletCheckInProcess"
+          large
+          text="Loading Positions"
+        />
         <BaseSearchEmpty
           v-if="showEmptyBlock && account"
           text="There are no Positions"
         />
-        <ConnectWalletBlock v-if="!account" />
+        <ConnectWalletBlock v-if="!account && !isWalletCheckInProcess" />
       </div>
     </div>
 
@@ -111,6 +115,7 @@ export default {
   computed: {
     ...mapGetters({
       account: "getAccount",
+      isWalletCheckInProcess: "getIsWalletCheckInProcess",
       chainId: "getChainId",
       provider: "getProvider",
       signer: "getSigner",
diff --git a/src/views/PotionPoints.vue b/src/views/PotionPoints.vue
index 28c030a0b..bb9a64a26 100644
--- a/src/views/PotionPoints.vue
+++ b/src/views/PotionPoints.vue
@@ -196,6 +196,8 @@ export default {
     ...mapMutations({ deleteNotification: "notifications/delete" }),
 
     async fetchUserInfo() {
+      if (!this.account) return;
+
       this.fetching = true;
       const publicClient = getPublicClient(ARBITRUM_CHAIN_ID);
 

From e1f2f88b365c69a05a6be9f20b949235b473153f Mon Sep 17 00:00:00 2001
From: 5450L <susalafamilia@gmail.com>
Date: Thu, 26 Sep 2024 11:01:54 +0300
Subject: [PATCH 2/5] MyPositions loader/connection/empty state bug fix

---
 src/components/ui/buttons/ConnectButton.vue |  6 ----
 src/views/MyPositions.vue                   | 32 +++++++++++++--------
 2 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/components/ui/buttons/ConnectButton.vue b/src/components/ui/buttons/ConnectButton.vue
index 46a9da4a4..95fb8af2a 100644
--- a/src/components/ui/buttons/ConnectButton.vue
+++ b/src/components/ui/buttons/ConnectButton.vue
@@ -36,12 +36,6 @@ export default {
     }),
 
     walletBtnText() {
-      console.log(
-        "isWalletCheckInProcess",
-        this.isWalletCheckInProcess,
-        this.account
-      );
-
       if (this.isWalletCheckInProcess) {
         return "Checking...";
       } else if (this.account) {
diff --git a/src/views/MyPositions.vue b/src/views/MyPositions.vue
index dc1890e5a..dda524106 100644
--- a/src/views/MyPositions.vue
+++ b/src/views/MyPositions.vue
@@ -37,17 +37,13 @@
         />
       </div>
 
-      <div class="loader-wrap" v-if="positionsIsLoading || showEmptyBlock">
-        <BaseLoader
-          v-if="positionsIsLoading || isWalletCheckInProcess"
-          large
-          text="Loading Positions"
-        />
-        <BaseSearchEmpty
-          v-if="showEmptyBlock && account"
-          text="There are no Positions"
-        />
-        <ConnectWalletBlock v-if="!account && !isWalletCheckInProcess" />
+      <div
+        class="loader-wrap"
+        v-if="showConnectionBlock || showEmptyBlock || showLoader"
+      >
+        <ConnectWalletBlock v-if="showConnectionBlock" />
+        <BaseLoader v-if="showLoader" large text="Loading Positions" />
+        <BaseSearchEmpty v-if="showEmptyBlock" text="There are no Positions" />
       </div>
     </div>
 
@@ -127,8 +123,18 @@ export default {
       return this.selectedChains.length === this.activeChains.length;
     },
 
+    showConnectionBlock() {
+      return !this.account;
+    },
+
+    showLoader() {
+      return (
+        this.account && (this.positionsIsLoading || this.isWalletCheckInProcess)
+      );
+    },
+
     showEmptyBlock() {
-      return !this.positionsIsLoading && !this.sortedCauldrons.length;
+      return !this.showConnectionBlock && !this.showLoader;
     },
 
     sortedCauldrons() {
@@ -191,9 +197,11 @@ export default {
         this.totalAssets = null;
         this.userElixirInfo = null;
       } else {
+        this.positionsIsLoading = true;
         await this.getElixirInfo();
         this.checkLocalData();
         await this.createOpenPositions();
+        this.positionsIsLoading = false;
       }
     },
 

From 31f431f6c7a6dae8f0f0877e4baa9cddaa01ed74 Mon Sep 17 00:00:00 2001
From: Andrey <onipchenko.andrey.90@gmail.com>
Date: Wed, 23 Oct 2024 15:48:53 +0300
Subject: [PATCH 3/5] updated validateConnection

---
 src/helpers/cauldron/validators.ts               | 11 ++++-------
 src/helpers/validators/swap/validationActions.ts |  9 ++-------
 src/helpers/validators/validateConnection.ts     | 11 +++++------
 3 files changed, 11 insertions(+), 20 deletions(-)

diff --git a/src/helpers/cauldron/validators.ts b/src/helpers/cauldron/validators.ts
index 8bcf87148..1a9be9dd9 100644
--- a/src/helpers/cauldron/validators.ts
+++ b/src/helpers/cauldron/validators.ts
@@ -68,9 +68,8 @@ export const validateCookByAction = (
 
   let validationErrors: any = [];
 
-  if (!account) {
-    validationErrors.push(WARNING_TYPES.CONNECTION);
-  }
+  validationErrors = validateConnection(account, validationErrors);
+
   validationErrors = validateChain(validationErrors, cauldron, chainId);
 
   validationErrors = validatePosition(
@@ -454,10 +453,8 @@ const validateChain = (
   return validationErrors;
 };
 
-const validateConnection = (validationErrors: any) => {
-  const { isConnected } = getAccountHelper();
-
-  if (!isConnected) validationErrors.push(WARNING_TYPES.CONNECTION);
+const validateConnection = (account: Address, validationErrors: any) => {
+  if (!account) validationErrors.push(WARNING_TYPES.CONNECTION);
 
   return validationErrors;
 };
diff --git a/src/helpers/validators/swap/validationActions.ts b/src/helpers/validators/swap/validationActions.ts
index 9f2f7e906..85d7ad7af 100644
--- a/src/helpers/validators/swap/validationActions.ts
+++ b/src/helpers/validators/swap/validationActions.ts
@@ -12,13 +12,8 @@ export const validationActions = (
 ) => {
   const { fromToken, toToken, fromInputValue, toInputValue } = actionConfig;
 
-  const connectedError = account
-    ? { btnText: false, isAllowed: true }
-    : {
-        btnText: "Connect Wallet",
-        isAllowed: true,
-        method: "connectWallet",
-      };
+  const connectedError = validateConnection(account);
+
   if (connectedError.btnText) return connectedError;
 
   const chainError = validateChain(selectedNetwork, chainId);
diff --git a/src/helpers/validators/validateConnection.ts b/src/helpers/validators/validateConnection.ts
index 8216db7b9..07b6cbb5e 100644
--- a/src/helpers/validators/validateConnection.ts
+++ b/src/helpers/validators/validateConnection.ts
@@ -1,13 +1,12 @@
-import { getAccountHelper } from "@/helpers/walletClienHelper";
+import { Address } from "viem";
 
-export const validateConnection = () => {
-  const { isConnected } = getAccountHelper();
-
-  if (!isConnected)
+export const validateConnection = (account: Address) => {
+  if (!account)
     return {
       btnText: "Connect Wallet",
       isAllowed: true,
       method: "connectWallet",
     };
-  return { btnText: false, isAllowed: true };
+
+  return { btnText: "", isAllowed: true };
 };

From a7c31d7c7a8197b15197e1319240fef31a4d35c5 Mon Sep 17 00:00:00 2001
From: Andrey <onipchenko.andrey.90@gmail.com>
Date: Wed, 23 Oct 2024 15:50:52 +0300
Subject: [PATCH 4/5] fixed wrong import type

---
 src/helpers/cauldron/validators.ts           | 1 -
 src/helpers/validators/validateConnection.ts | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/helpers/cauldron/validators.ts b/src/helpers/cauldron/validators.ts
index 1a9be9dd9..2e8028b32 100644
--- a/src/helpers/cauldron/validators.ts
+++ b/src/helpers/cauldron/validators.ts
@@ -4,7 +4,6 @@ import { getExpectedPostition } from "./getExpectedPosition";
 import { expandDecimals } from "../gm/fee/expandDecials";
 import { getMaxToBorrow, getMaxCollateralToRemove } from "./utils";
 import { PERCENT_PRESITION } from "@/helpers/cauldron/utils";
-import { getAccountHelper } from "@/helpers/walletClienHelper";
 import type { Address } from "viem";
 
 export const WARNING_TYPES = {
diff --git a/src/helpers/validators/validateConnection.ts b/src/helpers/validators/validateConnection.ts
index 07b6cbb5e..9240ed177 100644
--- a/src/helpers/validators/validateConnection.ts
+++ b/src/helpers/validators/validateConnection.ts
@@ -1,4 +1,4 @@
-import { Address } from "viem";
+import type { Address } from "viem";
 
 export const validateConnection = (account: Address) => {
   if (!account)

From 5df2c4159c60d2818b2664d7a89065787e940dcf Mon Sep 17 00:00:00 2001
From: Andrey <onipchenko.andrey.90@gmail.com>
Date: Thu, 24 Oct 2024 10:36:02 +0300
Subject: [PATCH 5/5] updated walletBtnText

---
 src/components/ui/buttons/ConnectButton.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ui/buttons/ConnectButton.vue b/src/components/ui/buttons/ConnectButton.vue
index 95fb8af2a..9eeed4d65 100644
--- a/src/components/ui/buttons/ConnectButton.vue
+++ b/src/components/ui/buttons/ConnectButton.vue
@@ -37,7 +37,7 @@ export default {
 
     walletBtnText() {
       if (this.isWalletCheckInProcess) {
-        return "Checking...";
+        return "Connecting...";
       } else if (this.account) {
         if (this.ensName) return this.ensName;
         return `${this.account.slice(0, 6)}...${this.account.slice(-6)}`;