GITC-622: move under button errors to top

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

@@ -182,13 +182,15 @@ Vue.component('grantsCartEthereumPolygon', {
       this.cart.unsupportedTokens = this.cart.tokenList.filter(
         (token) => !this.supportedTokens.includes(token)
       );
+      if (this.cart.unsupportedTokens.length > 0) {
+        _alert(`Polygon checkout not supported due to the use of the token ${this.cart.unsupportedTokens[0]}`, 'danger');
+      }
 
       // Update the fee estimate and gas cost based on changes
       this.polygon.estimatedGasCost = await this.estimateGasCost();
 
       // Emit event so cart.js can update state accordingly to display info to user
       this.$emit('polygon-data-updated', {
-        polygonUnsupportedTokens: this.cart.unsupportedTokens,
         polygonEstimatedGasCost: this.polygon.estimatedGasCost
       });
     },

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

@@ -138,6 +138,10 @@ Vue.component('grantsCartEthereumZksync', {
         (token) => !this.supportedTokens.includes(token)
       );
 
+      if (this.cart.unsupportedTokens.length > 0) {
+        _alert(`zkSync checkout not supported due to the use of the token ${this.cart.unsupportedTokens[0]}`, 'danger');
+      }
+
       // If currently selected fee token is still in the cart, don't change it. Otherwise, set
       // fee token to the token used for the first item in the cart
       if (!this.cart.tokenList.includes(this.zksync.feeTokenSymbol)) {
@@ -170,7 +174,6 @@ 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
       });
     },

app/grants/templates/grants/cart/eth.html

@@ -502,7 +502,7 @@ <h1 class="font-weight-bold mt-2">Pay with zkSync</h1>
 
           <b-tooltip target="zksync-tooltip" triggers="hover">
             <p v-if="grantsByTenant.length > maxCartItems">
-              Zksync checkout supports checkout for [[maxCartItems]] items.
+              zkSync checkout supports checkout for [[maxCartItems]] items.
               Please remove [[ grantsByTenant.length - maxCartItems ]] grant
               <span v-if="grantsByTenant.length - maxCartItems > 1">s</span>
               from your cart to use zkSync checkout.
@@ -511,21 +511,9 @@ <h1 class="font-weight-bold mt-2">Pay with zkSync</h1>
         </div>
 
         <!-- Checkout recommendation -->
-        <div class="text-center mt-2" v-if="
-          (zkSyncUnsupportedTokens.length > 0 || polygonUnsupportedTokens.length > 0) ||
-          polygonUnsupportedTokens.length > 0 ||
-          !isNaN(checkoutRecommendation.savingsInPercent)
-        ">
+        <div class="text-center mt-2" v-if="!isNaN(checkoutRecommendation.savingsInPercent)">
           <div class="font-smaller-3 bg-lightpurple p-3 rounded w-100">
-            <template v-if="zkSyncUnsupportedTokens.length > 0 || polygonUnsupportedTokens.length > 0">
-              <template v-if="zkSyncUnsupportedTokens.length > 0">
-                zkSync checkout not supported due to [[ zkSyncUnsupportedTokens.join(', ') ]]
-              </template>
-              <template v-if="polygonUnsupportedTokens.length > 0">
-                Polygon checkout not supported due to [[ polygonUnsupportedTokens.join(', ') ]]
-              </template>
-            </template>
-            <template v-else-if="!isNaN(checkoutRecommendation.savingsInPercent)">
+            <template v-if="!isNaN(checkoutRecommendation.savingsInPercent)">
               💡 Save <span class="text-primary">~[[ checkoutRecommendation.savingsInPercent ]]%</span>
               on gas fees with [[ checkoutRecommendation.name ]]!
             </template>