Merge pull request #20 from jkup/testnet-check

Check for user being on the testnet

frontend/public/global.css

@@ -120,6 +120,13 @@ main {
   text-align: center;
 }
 
+.error {
+  background-color: #b00020;
+  color: #fff;
+  padding: 5px 0;
+  text-align: center;
+}
+
 .grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);

frontend/src/App.svelte

@@ -1,11 +1,12 @@
 <script>
-  import Contract from "./CFNFT.json";
   import { ethers } from "ethers";
+  import { onMount } from "svelte";
+  import Contract from "./CFNFT.json";
 
   const CONTRACT_ID = "0x290422EC6eADc2CC12aCd98C50333720382CA86B";
   const ethereum = window.ethereum;
 
-  let provider, signer, contract, contractWithSigner;
+  let chain, provider, signer, contract, contractWithSigner;
 
   let maxTokens = -1;
   let currentMinted = -1;
@@ -16,7 +17,11 @@
   let ownedTokens = [];
   let recentlyMintedTokens = [];
 
-  // If Metamask is insalled
+  onMount(() => {
+    chain = window.ethereum.networkVersion;
+  });
+
+  // If Metamask is installed
   if (ethereum) {
     provider = new ethers.providers.Web3Provider(ethereum);
     signer = provider.getSigner();
@@ -28,6 +33,10 @@
       account = accounts[0];
     });
 
+    ethereum.on("chainChanged", function () {
+      window.location.reload();
+    });
+
     init();
   }
 
@@ -117,9 +126,16 @@
   </ul>
 </header>
 
-<div class="warning">
-  This marketplace is connected to the Rinkeby test network.
-</div>
+{#if chain === "4"}
+  <div class="warning">
+    This marketplace is connected to the Rinkeby test network.
+  </div>
+{:else}
+  <div class="error">
+    This application requires you to be on the Rinkeby network. Use Metamask to
+    switch networks.
+  </div>
+{/if}
 
 <main>
   {#if ethereum}