🐞 Connect minor fixes

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <AppHeader />
-  <div class="router-wrap" v-if="checkInProcess">
+  <div class="router-wrap" :style="pageBackground">
     <img
       class="mim-top-bg"
       src="@/assets/images/main-mim-top-bg.png"
@@ -56,7 +56,6 @@ export default {
 
   computed: {
     ...mapGetters({
-      checkInProcess: "getWalletIsConnected",
       signer: "getSigner",
     }),
   },

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,14 @@ export default {
     ...mapGetters({
       chainId: "getChainId",
       account: "getAccount",
+      isWalletCheckInProcess: "getIsWalletCheckInProcess",
       ensName: "getEnsName",
     }),
 
     walletBtnText() {
-      if (this.account) {
+      if (this.isWalletCheckInProcess) {
+        return "Connecting...";
+      } else if (this.account) {
         if (this.ensName) return this.ensName;
         return `${this.account.slice(0, 6)}...${this.account.slice(-6)}`;
       } else {

src/helpers/cauldron/validators.ts

@@ -4,7 +4,7 @@ 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 = {
   DEPOSIT_ALLOWANCE: 0,
@@ -58,15 +58,17 @@ export const validateCookByAction = (
   cauldron: CauldronInfo,
   actionConfig: ActionConfig,
   action: "borrow" | "repay",
-  chainId: number
+  chainId: number,
+  account: Address
 ) => {
   const cookType = getCookTypeByAction(actionConfig, action);
 
   const expectedPosition = getExpectedPostition(cauldron, actionConfig, action);
 
   let validationErrors: any = [];
 
-  validationErrors = validateConnection(validationErrors);
+  validationErrors = validateConnection(account, validationErrors);
+
   validationErrors = validateChain(validationErrors, cauldron, chainId);
 
   validationErrors = validatePosition(
@@ -450,10 +452,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;
 };

src/helpers/validators/swap/validationActions.ts

@@ -1,16 +1,19 @@
 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 = validateConnection(account);
+
   if (connectedError.btnText) return connectedError;
 
   const chainError = validateChain(selectedNetwork, chainId);
@@ -59,4 +62,4 @@ const validateChain = (
     };
 
   return { btnText: "", isAllowed: true };
-};
+};

src/helpers/validators/validateConnection.ts

@@ -1,13 +1,12 @@
-import { getAccountHelper } from "@/helpers/walletClienHelper";
+import type { 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 };
 };

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);
 

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) => {

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,
   },
 };

src/views/MimSwap.vue

@@ -198,6 +198,7 @@ export default {
         this.actionConfig,
         this.selectedNetwork,
         this.chainId,
+        this.account,
         this.isApproving
       );
     },

src/views/MyPositions.vue

@@ -37,13 +37,13 @@
         />
       </div>
 
-      <div class="loader-wrap" v-if="positionsIsLoading || showEmptyBlock">
-        <BaseLoader v-if="positionsIsLoading" large text="Loading Positions" />
-        <BaseSearchEmpty
-          v-if="showEmptyBlock && account"
-          text="There are no Positions"
-        />
-        <ConnectWalletBlock v-if="!account" />
+      <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>
 
@@ -111,6 +111,7 @@ export default {
   computed: {
     ...mapGetters({
       account: "getAccount",
+      isWalletCheckInProcess: "getIsWalletCheckInProcess",
       chainId: "getChainId",
       provider: "getProvider",
       signer: "getSigner",
@@ -122,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() {
@@ -186,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;
       }
     },
 

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);