Feat/collections

app/assets/v2/css/grants/collection.css

@@ -0,0 +1,119 @@
+.collection-item {
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #D3D3D3;
+  background-color: var(--bg-shade-0);
+}
+
+.collection-item__content {
+  margin-top: 1.0625rem;
+}
+
+.collection-item__title {
+  line-height: 24px;
+  overflow-y: hidden;
+  font-weight: bold;
+  margin-bottom: 15px;
+  font-size: var(--fs-header);
+}
+
+.collection-item__title a {
+  color: #454545;
+}
+
+.collection-item__pitch {
+  color: #666666;
+  height: 3.8rem;
+  overflow: hidden;
+  line-height: 22px;
+  text-overflow: ellipsis;
+}
+
+.collection-item__owner {
+  align-items: center;
+  display: flex;
+}
+
+.collection-item__img--grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.collection-item__img {
+  height: 11rem;
+  background-color: #0D023B;
+  overflow: hidden;
+  padding: 10px 18px;
+}
+
+.collection-item__img__cover {
+  background: linear-gradient(0deg, #FFFFFF, #FFFFFF), linear-gradient(0deg, #FFFFFF, #FFFFFF), linear-gradient(0deg, #FFFFFF, #FFFFFF), linear-gradient(0deg, #FFFFFF, #FFFFFF), #FFFFFF;
+  border-radius: 2px;
+  height: 75px;
+  width: 96%;
+  margin: 2px;
+}
+
+.collection-item__img img {
+  width: 100%;
+  object-fit: contain;
+  height: 100%;
+}
+
+.collection-item__logo {
+  background-color: white;
+  border-radius: 10px;
+  display: inline-block;
+  margin-top: -35px;
+}
+
+.collection-item__logo img {
+  width: 65px;
+  height: 65px;
+  object-fit: cover;
+  border-radius: 50%;
+  margin: 13px;
+}
+
+.collection-item__owner-image--cover {
+  height: 60px;
+  width: 60px;
+  position: absolute;
+  top: calc(50% - 30px);
+  left: calc(50% - 30px);
+}
+
+.collection-item__owner-image {
+  height: 20px;
+  width: 20px;
+}
+
+.collection-item__owner-image img, .collection-item__owner-image--cover img {
+  width: 100%;
+  border-radius: 50%;
+}
+
+.grant-item__footer {
+  margin-top: auto;
+  background-color: rgba(156, 255, 213, 0.06);
+}
+
+.collection-item__info a {
+  border-color: white;
+  background-color: #6144FF;
+  color: white;
+}
+
+.collection-item__info a:hover {
+  color: white;
+  text-decoration: underline;
+}
+
+
+.vertica-scroll {
+  flex-direction: row;
+  overflow-x: auto;
+  flex-wrap: nowrap;
+  margin-bottom: 25px;
+}

app/assets/v2/js/cart-data.js

@@ -46,7 +46,7 @@ class CartData {
     return bulk_add_cart;
   }
 
-  static addToCart(grantData) {
+  static addToCart(grantData, no_report) {
     if (this.cartContainsGrantWithId(grantData.grant_id)) {
       return;
     }
@@ -57,7 +57,8 @@ class CartData {
     if (!network) {
       network = 'mainnet';
     }
-    const acceptsAllTokens = (grantData.grant_token_address === '0x0000000000000000000000000000000000000000');
+    const acceptsAllTokens = (grantData.grant_token_address === '0x0000000000000000000000000000000000000000' ||
+      grantData.grant_token_address === '0x0');
 
     let accptedTokenName;
 
@@ -100,10 +101,12 @@ class CartData {
     cartList.push(grantData);
     this.setCart(cartList);
 
-    fetchData(`/grants/${grantData.grant_id}/activity`, 'POST', {
-      action: 'ADD_ITEM',
-      metadata: JSON.stringify(cartList)
-    }, {'X-CSRFToken': $("input[name='csrfmiddlewaretoken']").val()});
+    if (!no_report) {
+      fetchData(`/grants/${grantData.grant_id}/activity`, 'POST', {
+        action: 'ADD_ITEM',
+        metadata: JSON.stringify(cartList)
+      }, {'X-CSRFToken': $("input[name='csrfmiddlewaretoken']").val()});
+    }
   }
 
   static removeIdFromCart(grantId) {

app/assets/v2/js/cart.js

@@ -83,7 +83,11 @@ Vue.component('grants-cart', {
       display_email_option: false,
       countDownActive: false,
       // BrightID
-      isBrightIDVerified: false
+      isBrightIDVerified: false,
+      // Collection
+      showCreateCollection: false,
+      collectionTitle: '',
+      collectionDescription: ''
     };
   },
 
@@ -2320,13 +2324,43 @@ Vue.component('grants-cart', {
       // Final processing
       await this.setInterruptStatus(null, this.userAddress);
       await this.finalizeCheckout();
-    }
+    },
 
 
     // =============================================================================================
     // ==================================== END ZKSYNC METHODS =====================================
     // =============================================================================================
+    createCollection: async function() {
+      const csrfmiddlewaretoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
+      const cart = CartData.loadCart();
+      const grantIds = cart.map(grant => grant.grant_id);
+      let response;
+
+      const body = {
+        collectionTitle: this.collectionTitle,
+        collectionDescription: this.collectionDescription,
+        grants: grantIds
+      };
+
+      try {
+
+        response = await fetchData('/grants/v1/api/collections/new', 'POST', body, {'X-CSRFToken': csrfmiddlewaretoken});
+        const redirect = `/grants/collections?collection_id=${response.collection.id}`;
 
+        _alert('Congratulations, your new collection was created successfully!', 'success');
+        this.cleanCollectionModal();
+        this.showCreateCollection = false;
+
+        window.location = redirect;
+
+      } catch (e) {
+        _alert(e.msg, 'error');
+      }
+    },
+    cleanCollectionModal: function() {
+      this.collectionTitle = '';
+      this.collectionDescription = '';
+    }
   },
 
   watch: {

app/assets/v2/js/grants/components.js

@@ -0,0 +1,67 @@
+Vue.component('grant-card', {
+  delimiters: [ '[[', ']]' ],
+  props: [ 'grant', 'cred', 'token', 'view', 'short', 'show_contributions', 'contributions', 'toggle_following' ],
+  methods: {
+    get_clr_prediction: function(indexA, indexB) {
+      if (this.grant.clr_prediction_curve && this.grant.clr_prediction_curve.length) {
+        return this.grant.clr_prediction_curve[indexA][indexB];
+      }
+    },
+    getContributions: function(grantId) {
+      return this.contributions[grantId] || [];
+    },
+    toggleFollowingGrant: async function(grantId, event) {
+      event.preventDefault();
+
+      const favorite_url = `/grants/${grantId}/favorite`;
+      let response = await fetchData(favorite_url, 'POST');
+
+      if (response.action === 'follow') {
+        this.grant.favorite = true;
+      } else {
+        this.grant.favorite = false;
+      }
+
+      return true;
+    }
+  }
+});
+
+Vue.component('grant-collection', {
+  delimiters: [ '[[', ']]' ],
+  props: ['collection'],
+  methods: {
+    shareCollection: function() {
+      let testingCodeToCopy = document.querySelector(`#collection-${this.collection.id}`);
+
+      testingCodeToCopy.setAttribute('type', 'text');
+      testingCodeToCopy.select();
+
+      try {
+        const successful = document.execCommand('copy');
+        const msg = successful ? 'successful' : 'unsuccessful';
+
+        alert(`Grant collection was copied ${msg}: ${testingCodeToCopy.value}`);
+      } catch (err) {
+        alert('Oops, unable to copy');
+      }
+
+      /* unselect the range */
+      testingCodeToCopy.setAttribute('type', 'hidden');
+      window.getSelection().removeAllRanges();
+    },
+    addToCart: async function() {
+      const collectionDetailsURL = `v1/api/collections/${this.collection.id}`;
+      const collection = await fetchData(collectionDetailsURL, 'GET');
+
+      (collection.grants || []).forEach((grant) => {
+        CartData.addToCart(grant);
+      });
+
+      showSideCart();
+    },
+    getGrantLogo(index) {
+      return this.collection.grants[index].logo;
+    }
+  }
+});