Limit zkSync checkout to 45 items in cart (#8145)

gitcoinco · Dec 17, 2020 · b2b5983 · b2b5983
1 parent 1fd6a89
commit b2b5983
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/app/assets/v2/js/cart-ethereum-zksync.js b/app/assets/v2/js/cart-ethereum-zksync.js
@@ -11,6 +11,7 @@ Vue.component('grantsCartEthereumZksync', {
   props: {
     currentTokens: { type: Array, required: true }, // Array of available tokens for the selected web3 network
     donationInputs: { type: Array, required: true }, // donationInputs computed property from cart.js
+    grantsByTenant: { type: Array, required: true }, // Array of grants in cart
     network: { type: String, required: true } // web3 network to use
   },
 
@@ -27,7 +28,8 @@ Vue.component('grantsCartEthereumZksync', {
 
       cart: {
         tokenList: [], // array of tokens in the cart
-        unsupportedTokens: [] // tokens in cart which are not supported by zkSync
+        unsupportedTokens: [], // tokens in cart which are not supported by zkSync
+        maxItems: 45 // zkSync only supports up to 50 transfers in a batch, so we limit it to 45 cart items to account for automatic tips
       },
 
       user: {
@@ -152,7 +154,8 @@ Vue.component('grantsCartEthereumZksync', {
       // Emit event so cart.js can update state accordingly to display info to user
       this.$emit('zksync-data-updated', {
         zkSyncUnsupportedTokens: this.cart.unsupportedTokens,
-        zkSyncEstimatedGasCost: estimatedGasCost
+        zkSyncEstimatedGasCost: estimatedGasCost,
+        zkSyncMaxCartItems: this.cart.maxItems
       });
     },
 

diff --git a/app/assets/v2/js/cart.js b/app/assets/v2/js/cart.js
@@ -59,6 +59,7 @@ Vue.component('grants-cart', {
       // Checkout, zkSync
       zkSyncUnsupportedTokens: [], // Used to inform user which tokens in their cart are not on zkSync
       zkSyncEstimatedGasCost: undefined, // Used to tell user which checkout method is cheaper
+      zkSyncMaxCartItems: 45, // Max supported items by zkSync, defaults to 45 unless zkSync component says otherwise
       isZkSyncDown: false, // disable zkSync when true
       // verification
       isFullyVerified: false,
@@ -337,6 +338,7 @@ Vue.component('grants-cart', {
     onZkSyncUpdate: function(data) {
       this.zkSyncUnsupportedTokens = data.zkSyncUnsupportedTokens;
       this.zkSyncEstimatedGasCost = data.zkSyncEstimatedGasCost;
+      this.zkSyncMaxCartItems = data.zkSyncMaxCartItems;
     },
 
     tabChange: async function(input) {

diff --git a/app/grants/templates/grants/cart-vue.html b/app/grants/templates/grants/cart-vue.html
@@ -392,22 +392,23 @@ <h1 class="col-auto text-left font-bigger-2 black" style="font-weight: bold; mar
                                 on gas costs with [[ checkoutRecommendation.name ]]
                               </div>
                             </div>
-                            <div class="row align-items-center justify-content-between">
+                            <div class="row align-items-center justify-content-start">
                               <div v-if="!isZkSyncDown" class="col-auto">
                                 {% comment %} HTML Template for cart-ethereum-zksync.js {% endcomment %}
                                 <grants-cart-ethereum-zksync
                                   inline-template
                                   @zksync-data-updated="onZkSyncUpdate"
                                   :current-tokens="currentTokens"
                                   :donation-inputs="donationInputs"
+                                  :grants-by-tenant="grantsByTenant"
                                   :network="network"
                                 >
                                   <div>
                                   {% comment %} Checkout with zkSync button {% endcomment %}
                                     <button
                                       @click="zksync.showModal = true"
                                       class="btn btn-gc-blue button--full shadow-none py-3 mt-1"
-                                      :disabled="cart.unsupportedTokens.length > 0"
+                                      :disabled="cart.unsupportedTokens.length > 0 || grantsByTenant.length > cart.maxItems"
                                       id='js-zkSyncfundGrants-button'
                                       v-b-tooltip.hover.top="'zkSync is a scaling solution for Ethereum. It enables extremely low cost transfers of ETH and ERC20 tokens but requires locking funds in layer 2 (cheaper option).'"
                                     >
@@ -513,6 +514,9 @@ <h1 class="font-bigger-4 font-weight-bold mt-2">Pay with zkSync</h1>
                             <p v-if="isZkSyncDown" class="font-smaller-1 mt-2">
                               zkSync is down at the moment, so if you'd like to checkout now you'll have to use standard checkout!
                             </p>
+                            <p v-else-if="grantsByTenant.length > zkSyncMaxCartItems" class="font-smaller-1 mt-2">
+                              Must have a maximum of [[zkSyncMaxCartItems]] items in your cart to checkout with zkSync
+                            </p>
                           </div>
                         </div>
                       </div>