better check if user is connected and if network is correct

iggy-social · Apr 11, 2024 · 3787fab · 3787fab
1 parent f497fb0
commit 3787fab
Show file tree

Hide file tree

Showing 7 changed files with 124 additions and 52 deletions.
diff --git a/components/names/NameMintWidget.vue b/components/names/NameMintWidget.vue
@@ -29,16 +29,16 @@
     </p>
 
     <div class="text-center">
-      <button v-if="isActivated" class="btn btn-outline-primary mt-2 mb-2" :disabled="paused || domainNotValid.invalid || balanceTooLow">
+      <button v-if="isActivated && isSupportedChain" class="btn btn-outline-primary mt-2 mb-2" :disabled="paused || domainNotValid.invalid || balanceTooLow">
         <span v-if="loadingMint || loadingData" class="spinner-border spinner-border-sm mx-1" role="status" aria-hidden="true"></span>
         <span v-if="loadingData">Loading data...</span>
         <span v-if="!loadingMint && !loadingData && balanceTooLow">Balance too low</span>
         <span v-if="!loadingMint && !loadingData && !balanceTooLow" @click="mintName">Mint username</span>
       </button>
-    </div>
 
-    <ConnectWalletButton v-if="!isActivated" class="btn btn-outline-primary mt-2 mb-2" btnText="Connect Wallet" />
-
+      <ConnectWalletButton v-if="!isActivated" class="btn btn-outline-primary mt-2 mb-2" btnText="Connect Wallet" />
+      <SwitchChainButton v-if="isActivated && !isSupportedChain" />
+    </div>
   </div>
 </div>
 </template>
@@ -49,6 +49,7 @@ import { ethers } from 'ethers';
 import { useToast } from "vue-toastification/dist/index.mjs";
 import WaitingToast from "~/components/WaitingToast";
 import ConnectWalletButton from "~/components/ConnectWalletButton";
+import SwitchChainButton from '~/components//SwitchChainButton.vue';
 import { useUserStore } from '~/store/user';
 import { getDomainName } from '~/utils/domainUtils';
 import { fetchReferrer, fetchUsername, storeUsername } from '~/utils/storageUtils';
@@ -74,6 +75,7 @@ export default {
 
   components: { 
     ConnectWalletButton,
+    SwitchChainButton,
     WaitingToast
   },
 
@@ -198,7 +200,15 @@ export default {
       } else {
         return this.price5char;
       }
-    }
+    },
+
+    isSupportedChain() {
+      if (this.chainId === this.$config.supportedChainId) {
+        return true;
+      } else {
+        return false;
+      }
+    },
   },
 
   methods: {
@@ -367,11 +377,11 @@ export default {
   }, 
 
   setup() {
-    const { address, balance, isActivated, signer } = useEthers();
+    const { address, balance, chainId, isActivated, signer } = useEthers();
     const toast = useToast();
     const userStore = useUserStore();
 
-    return { address, balance, isActivated, signer, toast, userStore };
+    return { address, balance, chainId, isActivated, signer, toast, userStore };
   }
 }
 </script>
diff --git a/components/navbars/NavbarMobile.vue b/components/navbars/NavbarMobile.vue
@@ -15,16 +15,41 @@
         <span v-if="sidebarStore.showRightSidebar" class="bi bi-x-lg"></span>
       </button>
     </div>
-    </nav>
+  </nav>
+
+  <div v-if="!isSupportedChain || !isActivated" class="card border m-3">
+    <div class="card-body d-flex justify-content-center">
+      <ConnectWalletButton v-if="!isActivated" class="btn btn-primary" btnText="Connect wallet" />
+      <SwitchChainButton v-if="isActivated && !isSupportedChain" />
+    </div>
+  </div>
 </template>
 
 <script>
+import { useEthers } from 'vue-dapp';
 import { useSidebarStore } from '~/store/sidebars';
+import ConnectWalletButton from '~/components/ConnectWalletButton.vue';
+import SwitchChainButton from '~/components/SwitchChainButton.vue';
 
 export default {
   name: "NavbarMobile",
   props: ["lSidebar", "rSidebar"],
 
+  components: {
+    ConnectWalletButton,
+    SwitchChainButton,
+  },
+
+  computed: {
+    isSupportedChain() {
+      if (this.chainId === this.$config.supportedChainId) {
+        return true;
+      } else {
+        return false;
+      }
+    },
+  },
+
   methods: {
     toggleLeftSidebar() {
       this.sidebarStore.setRightSidebar(false);
@@ -58,8 +83,9 @@ export default {
   },
 
   setup() {
+    const { chainId, isActivated } = useEthers();
     const sidebarStore = useSidebarStore();
-    return { sidebarStore }
+    return { chainId, isActivated, sidebarStore }
   },
 }
 </script>
diff --git a/components/send-tokens/SendTokensComponent.vue b/components/send-tokens/SendTokensComponent.vue
@@ -98,14 +98,7 @@
       </button>
 
       <!-- Wrong network button -->
-      <button
-        v-if="isActivated && !isSupportedNetwork"
-        :disabled="true" 
-        class="btn btn-outline-primary" 
-        type="button"
-      >
-        Wrong network
-      </button>
+      <SwitchChainButton v-if="isActivated && !isSupportedChain" />
 
     </div>
 
@@ -120,6 +113,7 @@ import { getTokenBalance } from '~/utils/balanceUtils';
 import { hasTextBlankCharacters } from '~/utils/textUtils';
 import WaitingToast from "~/components/WaitingToast";
 import ConnectWalletButton from '~/components/ConnectWalletButton.vue';
+import SwitchChainButton from '~/components/SwitchChainButton.vue';
 import Erc20Abi from "~/assets/abi/Erc20Abi.json";
 
 export default {
@@ -141,7 +135,8 @@ export default {
   },
 
   components: {
-    ConnectWalletButton
+    ConnectWalletButton,
+    SwitchChainButton
   },
 
   mounted() {

diff --git a/components/swap/SimpleSwap.vue b/components/swap/SimpleSwap.vue
@@ -92,27 +92,19 @@
         ({{ siteStore.getSlippage }}% slippage).
       </em>
     </small>
-
-    <!-- Wrong Network button -->
-    <div class="d-flex justify-content-center mt-4" v-if="!isSupportedChain">
-      <button
-        disabled="true"
-        class="btn btn-primary" 
-        type="button"
-      >
-        Wrong network
-      </button>
-    </div>
 
     <!-- BUTTONS -->
-    <div class="d-flex justify-content-center mt-4" v-if="isSupportedChain">
+    <div class="d-flex justify-content-center mt-4">
 
       <!-- Connect Wallet button -->
-      <ConnectWalletButton v-if="!isActivated" class="btn btn-outline-primary" btnText="Connect wallet" />
+      <ConnectWalletButton v-if="!isActivated && !isSupportedChain" class="btn btn-outline-primary" btnText="Connect wallet" />
+
+      <!-- Switch Chain button -->
+      <SwitchChainButton v-if="isActivated && !isSupportedChain" />
 
       <!-- Disabled Swap tokens button (if not input amount is entered) -->
       <button
-        v-if="isActivated && !inputTokenAmount"
+        v-if="isActivated && isSupportedChain && !inputTokenAmount"
         :disabled="true" 
         class="btn btn-outline-primary" 
         type="button"
@@ -122,7 +114,7 @@
 
       <!-- Approve token button -->
       <button
-        v-if="isActivated && inputTokenAmount && inputAmountLessThanBalance && !bothTokensAreTheSame && allowanceTooLow && !unwrappingWrappedNativeCoin && !priceImpactTooHigh" 
+        v-if="isActivated && isSupportedChain && inputTokenAmount && inputAmountLessThanBalance && !bothTokensAreTheSame && allowanceTooLow && !unwrappingWrappedNativeCoin && !priceImpactTooHigh" 
         class="btn btn-outline-primary" 
         type="button"
         data-bs-toggle="modal" 
@@ -142,7 +134,7 @@
 
       <!-- Swap tokens button (and fetch the output token amount again) -->
       <button
-        v-if="isActivated && inputTokenAmount && inputAmountLessThanBalance && !bothTokensAreTheSame && !priceImpactTooHigh && !priceImpactTooHigh && (!allowanceTooLow || unwrappingWrappedNativeCoin)"
+        v-if="isActivated && isSupportedChain && inputTokenAmount && inputAmountLessThanBalance && !bothTokensAreTheSame && !priceImpactTooHigh && !priceImpactTooHigh && (!allowanceTooLow || unwrappingWrappedNativeCoin)"
         :disabled="!inputToken || !outputToken || !inputTokenAmount || !outputTokenAmount || !isActivated || bothTokensAreTheSame || !inputAmountLessThanBalance" 
         class="btn btn-outline-primary" 
         type="button"
@@ -167,7 +159,7 @@
 
       <!-- Balance too low button -->
       <button
-        v-if="isActivated && inputTokenAmount && !inputAmountLessThanBalance && !bothTokensAreTheSame && !priceImpactTooHigh"
+        v-if="isActivated && isSupportedChain && inputTokenAmount && !inputAmountLessThanBalance && !bothTokensAreTheSame && !priceImpactTooHigh"
         :disabled="true" 
         class="btn btn-outline-primary" 
         type="button"
@@ -177,7 +169,7 @@
 
       <!-- Both tokens are the same button -->
       <button
-        v-if="isActivated && inputTokenAmount && bothTokensAreTheSame && !priceImpactTooHigh"
+        v-if="isActivated && isSupportedChain && inputTokenAmount && bothTokensAreTheSame && !priceImpactTooHigh"
         :disabled="true" 
         class="btn btn-outline-primary" 
         type="button"
@@ -187,7 +179,7 @@
 
       <!-- Price impact too high -->
       <button
-        v-if="isActivated && inputTokenAmount && priceImpactTooHigh"
+        v-if="isActivated && isSupportedChain && inputTokenAmount && priceImpactTooHigh"
         :disabled="true" 
         class="btn btn-outline-primary" 
         type="button"
@@ -213,6 +205,7 @@ import { getTokenAllowance, getTokenBalance } from '~/utils/balanceUtils';
 import { getOutputTokenAmount, getPriceImpactBps } from '~/utils/simpleSwapUtils';
 import { ethers } from 'ethers';
 import ConnectWalletButton from '~/components/ConnectWalletButton.vue';
+import SwitchChainButton from '~/components/SwitchChainButton.vue';
 import TokenApprovalModal from '~/components/approvals/TokenApprovalModal.vue';
 import SwapTokensModal from '~/components/swap/SwapTokensModal.vue';
 import { useSiteStore } from '~/store/site';
@@ -243,6 +236,7 @@ export default {
   components: {
     ConnectWalletButton,
     SwapTokensModal,
+    SwitchChainButton,
     TokenApprovalModal
   },
 

diff --git a/pages/keys.vue b/pages/keys.vue
@@ -34,12 +34,13 @@
             </button>
           </div>
 
-          <div v-if="!isActivated" class="d-flex justify-content-center mt-4">
+          <div v-if="!isActivated || !isSupportedChain" class="d-flex justify-content-center mt-4">
             <ConnectWalletButton v-if="!isActivated" class="btn btn-outline-primary" btnText="Connect wallet" />
+            <SwitchChainButton v-if="isActivated && !isSupportedChain" />
           </div>
 
           <!-- Get Data button -->
-          <div v-if="isActivated && !showBuySellButtons" class="d-flex justify-content-center mt-4">
+          <div v-if="isActivated && isSupportedChain && !showBuySellButtons" class="d-flex justify-content-center mt-4">
             <button 
               :disabled="waitingData || !domainName"
               class="btn btn-outline-primary" 
@@ -53,7 +54,7 @@
           </div>
 
           <!-- Buy & Sell buttons -->
-          <div v-if="isActivated && showBuySellButtons && !domainNotExists" class="d-flex justify-content-center mt-4 mb-4">
+          <div v-if="isActivated && isSupportedChain && showBuySellButtons && !domainNotExists" class="d-flex justify-content-center mt-4 mb-4">
 
             <button 
               :disabled="waitingBuy || !domainName"
@@ -215,6 +216,7 @@ import WaitingToast from "~/components/WaitingToast";
 import ChatFeed from "~/components/chat/ChatFeed.vue";
 import KeysList from "~/components/keys/KeysList.vue";
 import ConnectWalletButton from "~/components/ConnectWalletButton.vue";
+import SwitchChainButton from '~/components/SwitchChainButton.vue';
 import { fetchReferrer } from '~/utils/storageUtils';
 
 export default {
@@ -239,7 +241,8 @@ export default {
   components: {
     ChatFeed,
     ConnectWalletButton,
-    KeysList
+    KeysList,
+    SwitchChainButton
   },
 
   mounted() {
@@ -279,6 +282,14 @@ export default {
       return this.$route.query.username;
     },
 
+    isSupportedChain() {
+      if (this.chainId === this.$config.supportedChainId) {
+        return true;
+      } else {
+        return false;
+      }
+    },
+
     sellKeyPrice() {
       if (this.sellKeyPriceWei) {
         const kPrice = Number(ethers.utils.formatEther(this.sellKeyPriceWei));
@@ -567,11 +578,12 @@ export default {
   },
 
   setup() {
-    const { address, isActivated, signer } = useEthers();
+    const { address, chainId, isActivated, signer } = useEthers();
     const toast = useToast();
 
     return {
       address,
+      chainId,
       isActivated,
       signer,
       toast

diff --git a/pages/nft/collection.vue b/pages/nft/collection.vue
@@ -118,18 +118,19 @@
           <!-- Buttons -->
           <div class="row mb-3">
 
-            <div v-if="!isActivated" class="d-grid gap-2 col">
-              <ConnectWalletButton class="btn btn-primary" btnText="Connect wallet" />
+            <div v-if="!isActivated || !isSupportedChain" class="d-grid gap-2 col">
+              <ConnectWalletButton v-if="!isActivated" class="btn btn-primary" btnText="Connect wallet" />
+              <SwitchChainButton v-if="isActivated && !isSupportedChain" />
             </div>
 
-            <div v-if="isActivated" class="d-grid gap-2 col">
+            <div v-if="isActivated && isSupportedChain" class="d-grid gap-2 col">
               <button @click="buyNft" class="btn btn-primary" type="button" :disabled="waitingData || waitingBuy" >
                 <span v-if="waitingBuy" class="spinner-border spinner-border-sm mx-1" role="status" aria-hidden="true"></span>
                 Buy for {{ formatPrice(priceBuyWei) }} {{ $config.tokenSymbol }}
               </button>
             </div>
 
-            <div v-if="isActivated" class="d-grid gap-2 col">
+            <div v-if="isActivated && isSupportedChain" class="d-grid gap-2 col">
               <button @click="sellNft" class="btn btn-primary" type="button" :disabled="waitingData || waitingSell || !userTokenId || priceSellWei == 0" >
                 <span v-if="waitingSell" class="spinner-border spinner-border-sm mx-1" role="status" aria-hidden="true"></span>
                 Sell for {{ formatPrice(priceSellWei) }} {{ $config.tokenSymbol }}
@@ -138,7 +139,7 @@
 
           </div>
 
-          <small v-if="isActivated">
+          <small v-if="isActivated && isSupportedChain">
             <em>
               (Price may still change after pressing the button, so make sure to check the {{ $config.tokenSymbol }} amount in wallet.)
             </em>
@@ -201,6 +202,7 @@ import { useEthers, shortenAddress } from 'vue-dapp';
 import { useToast } from "vue-toastification/dist/index.mjs";
 import ChatFeed from "~/components/chat/ChatFeed.vue";
 import ConnectWalletButton from "~/components/ConnectWalletButton.vue";
+import SwitchChainButton from '~/components/SwitchChainButton.vue';
 import WaitingToast from "~/components/WaitingToast";
 import AddImageToCollectionModal from "~/components/nft/collection/AddImageToCollectionModal";
 import ChangeCollectionPreviewModal from "~/components/nft/collection/ChangeCollectionPreviewModal";
@@ -242,6 +244,7 @@ export default {
     ChatFeed,
     ConnectWalletButton,
     RemoveImageFromCollectionModal,
+    SwitchChainButton,
     WaitingToast
   },
 
@@ -282,7 +285,15 @@ export default {
       }
 
       return false;
-    }
+    },
+
+    isSupportedChain() {
+      if (this.chainId === this.$config.supportedChainId) {
+        return true;
+      } else {
+        return false;
+      }
+    },
   },
 
   methods: {