zksync version update with our own ethers provider (#8082)

Co-authored-by: Aditya Anand M C <aditya.anandmc@gmail.com>

app/assets/v2/js/cart-ethereum-zksync.js

@@ -17,6 +17,8 @@ Vue.component('grantsCartEthereumZksync', {
 
   data: function() {
     return {
+      ethersProvider: undefined,
+
       zksync: {
         checkoutManager: undefined, // zkSync API CheckoutManager class
         feeTokenSymbol: undefined, // token symbol to pay zksync fee with, e.g. 'DAI'
@@ -106,6 +108,15 @@ Vue.component('grantsCartEthereumZksync', {
         // Update state and data that frontend needs
         await this.onChangeHandler(donations);
       }
+    },
+
+    // When network changes we need to update zkSync config, fetch new balances, etc.
+    network: { 
+      immediate: true,
+      async handler() {
+        await this.setupZkSync();
+        await this.onChangeHandler(this.donationInputs);
+      }
     }
   },
 
@@ -139,7 +150,7 @@ Vue.component('grantsCartEthereumZksync', {
 
       // Check if user has enough balance
       this.zksync.checkoutManager
-        .checkEnoughBalance(this.transfers, this.zksync.feeTokenSymbol, this.user.address)
+        .checkEnoughBalance(this.transfers, this.zksync.feeTokenSymbol, this.user.address, this.ethersProvider)
         .then((hasEnoughBalance) => {
           this.user.hasEnoughBalance = hasEnoughBalance;
           // If they have insufficient balance but modal is already visible, alert user.
@@ -178,13 +189,20 @@ Vue.component('grantsCartEthereumZksync', {
 
     // Called on page load to initialize zkSync
     async setupZkSync() {
+      const network = this.network || 'mainnet'; // fallback to mainnet if no wallet is connected
 
       if (!web3) {
         return; // exit if web3 isn't defined, and we'll run this function later
       }
 
       this.user.address = (await web3.eth.getAccounts())[0];
-      this.zksync.checkoutManager = new ZkSyncCheckout.CheckoutManager(this.network || 'mainnet');
+      this.ethersProvider = ethers.getDefaultProvider(network, {
+        infura: document.contxt.INFURA_V3_PROJECT_ID,
+        // etherscan: YOUR_ETHERSCAN_API_KEY,
+        // alchemy: YOUR_ALCHEMY_API_KEY,
+        // pocket: YOUR_POCKET_APPLICATION_KEY
+      });
+      this.zksync.checkoutManager = new ZkSyncCheckout.CheckoutManager(network);
       this.user.zksyncState = await this.zksync.checkoutManager.getState(this.user.address);
     },
 

app/grants/templates/grants/cart-vue.html

@@ -192,7 +192,7 @@ <h2 class="middle-line mb-3"><span class="text-muted font-body">or</span></h2>
 
     {% comment %} ===================== START ZKSYNC SCRIPTS ====================== {% endcomment %}
     <script type="text/javascript" src="https://cdn.ethers.io/lib/ethers-5.0.umd.min.js"></script>
-    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/zksync-checkout@0.0.10/dist/main.js"></script>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/zksync-checkout@0.0.11/dist/main.js"></script>
     {% comment %} ====================== END ZKSYNC SCRIPTS ======================= {% endcomment %}
 
     <script src="{% static "v2/js/lib/bootstrap-vue.min.js" %}"></script>