From 110b8d63d3de805e611649e00178f17e16587245 Mon Sep 17 00:00:00 2001
From: Miguel Angel G <miguel@gordian.dev>
Date: Mon, 7 Sep 2020 05:37:53 -0500
Subject: [PATCH 1/7] add list view for grants and migrate to vue

---
 app/assets/v2/css/grants/card.css             |  58 +++-
 app/assets/v2/css/grants/grant.css            |  14 +-
 app/assets/v2/js/grants/index.js              | 204 +++++++++++++-
 app/dashboard/models.py                       |   5 +-
 app/grants/models.py                          |   6 +-
 app/grants/templates/grants/card/front.html   | 134 ---------
 app/grants/templates/grants/card/index.html   |  21 --
 .../templates/grants/components/card.html     | 211 ++++++++++++++
 .../grants/components/clr_estimate.html       |  50 ++++
 .../grants/components/hidden_inputs.html      |  19 ++
 .../templates/grants/detail/funding.html      |  14 +-
 app/grants/templates/grants/index.html        |  70 +++--
 .../grants/shared/landing_grants.html         |  51 ++--
 .../grants/shared/landing_navbar.html         |   3 +
 .../grants/shared/landing_subnav.html         |  27 +-
 .../grants/shared/sidebar_search.html         | 179 ++++++------
 app/grants/templatetags/grants_extra.py       |   8 +
 app/grants/urls.py                            |   5 +-
 app/grants/views.py                           | 265 ++++++++++++------
 .../migrations/0023_auto_20200907_0657.py     |  25 ++
 app/townsquare/models.py                      |   9 +-
 app/townsquare/views.py                       |   4 +-
 22 files changed, 965 insertions(+), 417 deletions(-)
 delete mode 100644 app/grants/templates/grants/card/front.html
 delete mode 100644 app/grants/templates/grants/card/index.html
 create mode 100644 app/grants/templates/grants/components/card.html
 create mode 100644 app/grants/templates/grants/components/clr_estimate.html
 create mode 100644 app/grants/templates/grants/components/hidden_inputs.html
 create mode 100644 app/townsquare/migrations/0023_auto_20200907_0657.py

diff --git a/app/assets/v2/css/grants/card.css b/app/assets/v2/css/grants/card.css
index b1ef5d4d7ba..957db211f57 100644
--- a/app/assets/v2/css/grants/card.css
+++ b/app/assets/v2/css/grants/card.css
@@ -9,10 +9,22 @@
   margin-top: 1.0625rem;
 }
 
+.grant-item--list {
+  padding-bottom: 10px;
+}
+
+.grant-item--list:hover {
+  background-color: #EFEAFD;
+}
+
 .flip-card__flipper {
   border: 1px solid #D3D3D3;
 }
 
+.grant-item--list .grant-item__content {
+  margin-top: 0.938rem;
+}
+
 .grant-item__title {
   line-height: 24px;
   overflow-y: hidden;
@@ -25,6 +37,11 @@
   color: #454545;
 }
 
+.grant-item--list .grant-item__title {
+  font-size: 1rem;
+  margin-bottom: 2px;
+}
+
 .grant-item__pitch {
   color: #666666;
   height: 3.8rem;
@@ -65,6 +82,12 @@
   margin: 13px;
 }
 
+.grant-item--list .grant-item__img {
+  height: 3.1rem;
+  overflow: hidden;
+  margin: 10px 12px;
+}
+
 .grant-item__owner-image,
 .flip-card__flipper .grant__stakeholders-item {
   height: 35px;
@@ -97,6 +120,11 @@
   color: #0D0764;
 }
 
+.grant-item--list .grant-item__owner-image {
+  height: 20px;
+  width: 20px;
+}
+
 .grant-item__funding-label {
   color: #BBBDBF;
 }
@@ -208,6 +236,34 @@
   color: #040404;
 }
 
+.match__round--inline {
+  color: #069953;
+}
 .clr-prediction .amount {
   margin-top: 7px;
-}
\ No newline at end of file
+}
+
+.star-action:hover {
+  color: var(--gc-blue-hover) !important;
+}
+
+@media (max-width: 500px) {
+  .grant-item--list .grant-item__owner {
+    align-items: baseline;
+    display: flex;
+    flex-direction: column;
+  }
+  .grant-item--list .match, .grant-item--list .star-action {
+    margin-top: 5px !important;
+    margin-left: 0 !important;
+  }
+
+  .grant-item--list .match {
+    flex-direction: column;
+  }
+
+  .grant-item--list .grant-action {
+    padding-top: 5px !important;
+    padding-bottom: 5px !important;
+  }
+}
diff --git a/app/assets/v2/css/grants/grant.css b/app/assets/v2/css/grants/grant.css
index ac8bc22c7ba..2a12b4d9b0a 100644
--- a/app/assets/v2/css/grants/grant.css
+++ b/app/assets/v2/css/grants/grant.css
@@ -392,7 +392,7 @@
 }
 
 .grants-hero .title-round{
-  font-size: 24px; 
+  font-size: 24px;
 }
 
 .grants-hero .font-header,
@@ -450,7 +450,7 @@
   background: transparent !important;
 }
 
-#search_form .select2-container {
+#top-filters .select2-container, #search_form .select2-container {
   width: auto !important;
   font-weight: normal;
   text-align: left;
@@ -462,22 +462,22 @@
 
 }
 
-#search_form .select2-network-container {
+#top-filters .select2-network-container, #search_form .select2-network-container {
   width: 5rem !important;
 }
 
-#search_form .network-container .select2-container {
+#top-filters .select2-container, #search_form .network-container .select2-container {
   min-width: 5rem;
 }
 
-#search_form .select2-selection {
+#top-filters .select2-selection, #search_form .select2-selection {
   background: none;
   outline: none;
   border: none !important;
   color: var(--gc-blue);
 }
 
-#search_form .select2-selection span {
+#top-filters .select2-selection span, #search_form .select2-selection span {
   color: #3E00FF;
   font-weight: bold;
 }
@@ -634,10 +634,12 @@ background: linear-gradient(85.75deg, #03008D -17.8%, #000000 139.56%); /* W3C,
     height: 0;
     display: none;
   }
+
   #sidebar_container form#search_form {
     display: inline-block;
     width: 95%;
   }
+}
 
 /* sidebar_search.css */
 
diff --git a/app/assets/v2/js/grants/index.js b/app/assets/v2/js/grants/index.js
index f2ebb79a39a..5c8b65ff40a 100644
--- a/app/assets/v2/js/grants/index.js
+++ b/app/assets/v2/js/grants/index.js
@@ -1,3 +1,15 @@
+Vue.component('grant-card', {
+  delimiters: [ '[[', ']]' ],
+  props: [ 'grant', 'cred', 'token', 'view', 'short'],
+  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];
+      }
+    }
+  }
+});
+
 $(document).ready(() => {
   $('#sort_option').select2({
     minimumResultsForSearch: Infinity
@@ -59,6 +71,170 @@ $(document).ready(() => {
 
   });
 
+  if (document.getElementById('grants-showcase')) {
+    Vue.component('grant-sidebar', {
+      name: 'grant-sidebar',
+      props: [ 'filter_grants', 'grant_types', 'type', 'selected_category', 'keyword', 'following', 'set_type' ],
+      data: function() {
+        return {
+          search: this.keyword
+        };
+      },
+      methods: {
+        toggleFollowing: function(state, event) {
+          event.preventDefault;
+          this.filter_grants({following: state});
+        }
+      }
+    });
+
+    var app = new Vue({
+      delimiters: [ '[[', ']]' ],
+      el: '#grants-showcase',
+      components: ['grant-sidebar'],
+      data: {
+        grants: [],
+        page: 1,
+        limit: 6,
+        sort: 'weighted_shuffle',
+        network: 'mainnet',
+        keyword: document.keyword,
+        current_type: document.current_type,
+        following: document.following,
+        state: 'active',
+        category: document.selected_category,
+        credentials: false,
+        grant_types: [],
+        lock: false,
+        view: 'list',
+        shortView: true
+      },
+      methods: {
+        setView: function(mode, event) {
+          event.preventDefault();
+          this.view = mode;
+        },
+        setCurrentType: function(currentType, q) {
+          this.current_type = currentType;
+          if ([ 'about', 'stats', 'activity' ].indexOf(currentType) !== -1) {
+            // window.location = `/grants/${currentType}`;
+          }
+
+          if (this.current_type === 'all') {
+            window.history.pushState('', '', `/grants/?${q || ''}`);
+          } else {
+            window.history.pushState('', '', `/grants/${this.current_type}?${q || ''}`);
+          }
+        },
+        filter_grants: function(filters) {
+          if (filters.type !== null && filters.type !== undefined) {
+            this.current_type = filters.type;
+          }
+          if (filters.category !== null && filters.category !== undefined) {
+            this.category = filters.category;
+          }
+          if (filters.keyword !== null && filters.keyword !== undefined) {
+            this.keyword = filters.keyword;
+          }
+          if (filters.following !== null && filters.following !== undefined) {
+            this.following = filters.following;
+          }
+          if (filters.sort !== null && filters.sort !== undefined) {
+            this.sort = filters.sort;
+          }
+
+          this.page = 1;
+          const query_elements = {};
+
+          if (this.category && this.current_type !== 'all') {
+            query_elements['category'] = this.category;
+          }
+
+          if (this.keyword) {
+            query_elements['keyword'] = this.keyword;
+          }
+
+          if (this.following) {
+            query_elements['following'] = this.following;
+          }
+          if (this.sort !== 'weighted_shuffle') {
+            query_elements['sort'] = this.sort;
+          }
+          const q = $.param(query_elements);
+
+          this.setCurrentType(this.current_type, q);
+          this.fetchGrants(this.page);
+        },
+        fetchGrants: async function(page, append_mode) {
+          if (this.lock)
+            return;
+
+          this.lock = true;
+
+          const base_params = {
+            page: page || this.page,
+            limit: this.limit,
+            sort_option: this.sort,
+            network: this.network,
+            keyword: this.keyword,
+            state: this.state,
+            category: this.category,
+            type: this.current_type
+          };
+
+          if (this.following) {
+            base_params['following'] = this.following;
+          }
+
+          const params = new URLSearchParams(base_params).toString();
+          const response = await fetchData(`/grants/cards_info?${params}`);
+
+          if (append_mode) {
+            this.grants = this.grants.concat(response.grants);
+          } else {
+            this.grants = response.grants;
+          }
+
+          this.credentials = response.credentials;
+          this.grant_types = response.grant_types;
+
+          this.lock = false;
+          return this.grants;
+        },
+        scroll: async function(event) {
+          let vm = this;
+
+
+          const scrollHeight = $(document).height();
+          const scrollPos = $(window).height() + $(window).scrollTop();
+
+          if (((scrollHeight - 300) >= scrollPos) / scrollHeight == 0) {
+            const grants = await vm.fetchGrants(vm.page + 1, true);
+
+            if (grants && grants.length) {
+              vm.page = vm.page + 1;
+            }
+          }
+        }
+      },
+      mounted() {
+        let vm = this;
+
+        this.fetchGrants(this.page);
+        this.scroll();
+
+        $('#sort_option2').select2({
+          minimumResultsForSearch: Infinity,
+          templateSelection: function(data, container) {
+            // Add custom attributes to the <option> tag for the selected option
+            vm.filter_grants({sort: data.id});
+
+            return data.text;
+          }
+        });
+      }
+    });
+  }
 });
 
 const etherscanUrlConvert = (elem, network) => {
@@ -102,7 +278,7 @@ $('.grants_nav a').on('click', function(event) {
     document.location.href = $(this).attr('href');
     return;
   }
-  
+
   const typeValue = $(this).data('type');
   const categoryValue = $(this).data('category');
   const params = { 'type': typeValue, 'category': categoryValue};
@@ -144,3 +320,29 @@ $('#minimize').on('click', () => {
   });
 });
 
+$(document).on('click', '.star-action', async(e) => {
+  e.preventDefault();
+  const element = (e.target.tagName === 'BUTTON') ? $(e.target) : $(e.target.parentElement);
+  const grantId = element.data('grant');
+  const favorite_url = `/grants/${grantId}/favorite`;
+
+  let response = await fetchData(favorite_url, 'POST');
+
+  if (response.action === 'follow') {
+    element.find('i').addClass('fa');
+    element.find('i').removeClass('far');
+    element.find('span').text('Following');
+    element.removeClass('text-muted');
+  } else {
+    element.find('i').removeClass('fa');
+    element.find('i').addClass('far');
+    element.find('span').text('Follow');
+    element.addClass('text-muted');
+
+    if (window.location.pathname === '/grants/following') {
+      element.closest('.grant-card').hide();
+    }
+  }
+
+  console.log(response);
+});
diff --git a/app/dashboard/models.py b/app/dashboard/models.py
index 722e2c2e820..bd37ad80f41 100644
--- a/app/dashboard/models.py
+++ b/app/dashboard/models.py
@@ -2437,11 +2437,14 @@ def view_props_for(self, user):
         if self.likes.exists():
             vp.metadata['liked'] = self.likes.filter(profile=user.profile).exists()
             vp.metadata['likes_title'] = "Liked by " + ",".join(self.likes.values_list('profile__handle', flat=True)) + '. '
-        vp.metadata['favorite'] = self.favorite_set.filter(user=user).exists()
+        vp.metadata['favorite'] = self.favorites(user).exists()
         vp.metadata['poll_answered'] = self.has_voted(user)
 
         return vp
 
+    def favorites(self, user):
+        self.favorite_set.filter(user=user, grant=None)
+
     @property
     def tip_count_usd(self):
         network = 'rinkeby' if settings.DEBUG else 'mainnet'
diff --git a/app/grants/models.py b/app/grants/models.py
index 9ab19191165..659c1e1c762 100644
--- a/app/grants/models.py
+++ b/app/grants/models.py
@@ -39,6 +39,8 @@
 from grants.utils import get_upload_filename
 from web3 import Web3
 
+from townsquare.models import Favorite
+
 logger = logging.getLogger(__name__)
 
 
@@ -543,6 +545,8 @@ def contract(self):
         grant_contract = web3.eth.contract(Web3.toChecksumAddress(self.contract_address), abi=self.abi)
         return grant_contract
 
+    def favorite(self, user):
+        return Favorite.objects.filter(user=user, grant=self).exists()
 
 class SubscriptionQuerySet(models.QuerySet):
     """Define the Subscription default queryset and manager."""
@@ -1331,7 +1335,7 @@ def presave_contrib(sender, instance, **kwargs):
 
 def next_month():
     """Get the next month time."""
-    return localtime(timezone.now() + timedelta(days=30))
+    return (timezone.now() + timedelta(days=30))
 
 
 class CLRMatch(SuperModel):
diff --git a/app/grants/templates/grants/card/front.html b/app/grants/templates/grants/card/front.html
deleted file mode 100644
index 1d427826ee9..00000000000
--- a/app/grants/templates/grants/card/front.html
+++ /dev/null
@@ -1,134 +0,0 @@
-{% comment %}
-  Copyright (C) 2020 Gitcoin Core
-
-  This program is free software: you can redistribute it and/or modify
-  it under the terms of the GNU Affero General Public License as published
-  by the Free Software Foundation, either version 3 of the License, or
-  (at your option) any later version.
-
-  This program is distributed in the hope that it will be useful,
-  but WITHOUT ANY WARRANTY; without even the implied warranty of
-  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-  GNU Affero General Public License for more details.
-
-  You should have received a copy of the GNU Affero General Public License
-  along with this program. If not, see <http://www.gnu.org/licenses/>.
-{% endcomment %}
-{% load i18n static humanize grants_extra %}
-<a href="{% url 'grants:details' grant.id grant.slug %}">
-  <div class="grant-item__img">
-    <img src="{% if grant.logo and grant.logo.url %}{{ grant.logo.url }}{% else %}{% with grant_logo='v2/images/grants/logos/' id=grant.id|modulo:3 %} {% static grant_logo|addstr:id|add:'.png' %} {% endwith %} {% endif %}">
-  </div>
-  {% comment %}
-  <div class="grant-item__logo ml-3">
-    <img src="{% if grant.logo and grant.logo.url %}{{ grant.logo.url }}{% else %}{% with grant_logo='v2/images/grants/logos/' id=grant.id|modulo:3 %} {% static grant_logo|addstr:id|add:'.png' %} {% endwith %} {% endif %}">
-  </div>
-  {% endcomment %}
-
-  <div class="grant-item__content px-3">
-    <h2 class="grant-item__title font-subheader"><a href="{% url 'grants:details' grant.id grant.slug %}">{{ grant.title|truncatechars:60 }}</a></h2>
-    <p class="grant-item__pitch font-caption mb-2">{{ grant.description|truncatechars:145 }}</p>
-    <p class="grant-item__pitch font-caption mb-0" style="height:2rem;"  data-toggle="tooltip" data-placement="top" title="The last time the grant admin updated the grant." >
-      <span class="font-smaller-5">
-        {% if grant.last_update %}
-          <i style="width: 14px;" class="fas fa-clock mt-2 mb-0 text-center"></i>
-          Last Update: {{ grant.last_update|naturaltime }}
-        {% elif grant.round_num %}
-          <i style="width: 14px;" class="fas fa-clock mt-2 mb-0 text-center"></i>
-          Last Update: Before Round {{ grant.round_num }}
-        {% endif %}
-      </span>
-      {% if is_staff %}
-        <hr class="my-2">
-        <p class="font-caption font-weight-semibold">
-          <i class="fa fa-lock mr-2" aria-hidden="true"></i>
-          SybilScore ™️: {{ grant.sybil_score }}
-          <span class="mx-2">|</span>
-          RiskScore ™️: {{ grant.weighted_risk_score }}
-        </p>
-      {% endif %}
-
-    </p>
-
-    <div class="grant-item__owner">
-        <span class="grant-item__owner-handle font-body">{% trans 'by' %}</span>
-        <a href="{% url 'profile' grant.admin_profile.handle %}" data-usercard="{{ grant.admin_profile.handle }}" target="_blank" rel="noopener noreferrer">
-          <div class="grant-item__owner mt-3 mb-4">
-            <div class="grant-item__owner-image ml-2">
-              <img src="{% if grant.admin_profile.avatar_url %}{{ grant.admin_profile.avatar_url }}{% else %}https://c.gitcoin.co/avatars/57e79c0ae763bb27095f6b265a1a8bf3/thelostone-mc.svg{% endif %}">
-            </div>
-            <div class="grant-item__owner-handle font-body">
-              <span class="ml-2">
-                {{ grant.admin_profile.handle|default:'anonymous' }}
-              </span>
-            </div>
-          </div>
-        </a>
-      </div>
-  </div>
-  <div class="grant-item__footer">
-      <div class="clr mb-3">
-        <div class="match__round pb-1 pt-2 mb-2">
-          <h2 class="title col-8 font-caption g-bold">
-            {% if grant.clr_round_num %}
-              {{grant.clr_round_num}} CLR MATCH ROUND
-            {% endif %}
-          </h2>
-        </div>
-        <div class="col-6 float-right px-0">
-          <h2 class="font-title font-weight-bold amount pt-1 mb-2">
-            {{grant.amount_received_in_round|floatformat:2}} DAI
-          </h2>
-          <p class="amount mb-2 font-caption font-weight-semibold">
-          raised from {{grant.positive_round_contributor_count}} contributors
-          </p>
-        </div>
-        <div class="col-6">
-          {% if grant.is_clr_eligible %}
-            <h2 class="font-title font-weight-bold amount pt-1 mb-2">
-              {{ grant.clr_prediction_curve.0.1|floatformat:0|intcomma|default:0 }} DAI
-            </h2>
-            <p class="amount mb-2 font-caption font-weight-semibold">
-            {% if grant.id in round_5_5_grants %}
-              Current Round 5.5 Match
-            {% else %}
-              Final CLR Match
-            {% endif %}
-            </p>
-          {% else %}
-            <h2 class="font-title font-weight-bold amount pt-1 mb-2">
-              {{ grant.amount_received|floatformat:0|intcomma }} DAI
-            </h2>
-            <p class="amount mb-2 font-caption font-weight-semibold">All Time Funding</p>
-          {% endif %}
-        </div>
-      </div>
-      {% if grant.is_clr_active %}
-        {% if grant.is_clr_eligible %}
-          <div class="col-12 pb-3">
-            {% include 'grants/card/clr_estimate.html' with short=True %}
-          </div>
-        {% else %}
-          <h2 class="font-subheader text-center amount pt-4 mb-3" style="color:#069953">
-            NOT ELIGIBLE FOR CLR
-          </h2>
-        {% endif%}
-      {% endif %}
-
-      <div class="col-12 pb-4">
-        {% is_team_member grant profile as is_on_team %}
-        {% if not is_on_team %}
-        <form class="js-addDetailToCart-form">
-          {% include 'grants/shared/hidden_inputs.html' %}
-          <button class="btn btn-gc-blue cart-btn large font-body font-weight-semibold mt-1 mr-1">
-            + Add to Cart
-          </button>
-        </form>
-        {% else %}
-          <button class="btn btn-gc-grey cart-btn large font-body font-weight-semibold mt-1 mr-1">
-            <i class="fa fa-stop" aria-hidden="true"></i> Cannot Fund your Own Grant
-          </button>
-        {% endif %}
-      </div>
-  </div>
-</a>
\ No newline at end of file
diff --git a/app/grants/templates/grants/card/index.html b/app/grants/templates/grants/card/index.html
deleted file mode 100644
index c617e91e9a6..00000000000
--- a/app/grants/templates/grants/card/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-{% comment %}
-  Copyright (C) 2020 Gitcoin Core
-
-  This program is free software: you can redistribute it and/or modify
-  it under the terms of the GNU Affero General Public License as published
-  by the Free Software Foundation, either version 3 of the License, or
-  (at your option) any later version.
-
-  This program is distributed in the hope that it will be useful,
-  but WITHOUT ANY WARRANTY; without even the implied warranty of
-  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-  GNU Affero General Public License for more details.
-
-  You should have received a copy of the GNU Affero General Public License
-  along with this program. If not, see <http://www.gnu.org/licenses/>.
-{% endcomment %}
-{% load i18n static humanize grants_extra %}
-
-<div class="grant-item">
-    {% include 'grants/card/front.html' %}
-</div>
diff --git a/app/grants/templates/grants/components/card.html b/app/grants/templates/grants/components/card.html
new file mode 100644
index 00000000000..8a44b0e6f82
--- /dev/null
+++ b/app/grants/templates/grants/components/card.html
@@ -0,0 +1,211 @@
+  {% comment %}
+  Copyright (C) 2020 Gitcoin Core
+
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU Affero General Public License as published
+  by the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU Affero General Public License for more details.
+
+  You should have received a copy of the GNU Affero General Public License
+  along with this program. If not, see <http://www.gnu.org/licenses/>.
+{% endcomment %}
+{% load i18n static humanize grants_extra %}
+<grant-card inline-template :grant="grant" :cred="credentials" :view="view" :short="shortView">
+  <template>
+    <div class="grant-item grant-item--list flex-md-row flex-column" v-if="view == 'list'">
+      <div class="grant-item__img col-md-1 d-md-block d-none">
+        <img :src="grant.logo_url" />
+      </div>
+      <div class="grant-item__content col-md-8 px-3">
+        <h2 class="grant-item__title font-subheader">
+          <a :href="grant.details_url">[[ grant.title.slice(0,60) ]][[ grant.title.length > 60 ? '...' : '']]</a>
+        </h2>
+        <div>
+          <p class="text-muted font-smaller-5 mb-0" style="height:2rem;"  data-toggle="tooltip" data-placement="top" title="The last time the grant admin updated the grant." >
+            <i style="width: 14px;" class="fas fa-clock mt-2 mb-0 text-center"></i>
+            Last Update: [[ grant.last_update ?  grant.last_update_natural : `Before Round ${grant.round_num}` ]]
+            <template v-if="cred.is_staff">
+              <span class="ml-3" >
+                <i class="fa fa-lock" aria-hidden="true"></i> SybilScore ™️: [[ grant.sybil_score ]]
+                <span class="mx-2">|</span> RiskScore ™️: [[ grant.weighted_risk_score ]]
+              </span>
+            </template>
+          </p>
+          <div class="grant-item__owner">
+            <div class="d-flex">
+              <span class="grant-item__owner-handle font-smaller-3">{% trans 'by' %}</span>
+              <a :href="grant.admin_profile.url" :data-usercard="grant.admin_profile.handle" target="_blank" rel="noopener noreferrer">
+                <div class="d-flex align-center">
+                  <div class="grant-item__owner-image ml-2">
+                    <img :src="grant.admin_profile.avatar_url || 'https://c.gitcoin.co/avatars/57e79c0ae763bb27095f6b265a1a8bf3/thelostone-mc.svg'">
+                  </div>
+                  <div class="grant-item__owner-handle font-smaller-3">
+                    <span class="ml-2">
+                      [[ grant.admin_profile.handle || 'anonymous' ]]
+                    </span>
+                  </div>
+                </div>
+              </a>
+            </div>
+            <div class="d-flex match ml-3">
+              <div class="match__round--inline mr-3">
+                <template v-if="grant.is_clr_eligible">
+                  <span class="font-subheader font-weight-bold amount pt-1 mb-2">
+                    [[ get_clr_prediction(0, 1) || 0 ]] DAI
+                  </span>
+                  <span class="amount mb-2 font-smaller-3">
+                    Final CLR Match
+                  </span>
+                </template>
+                <template v-else>
+                  <span class="font-subheader font-weight-bold amount pt-1 mb-2">
+                    [[ grant.monthly_amount_subscribed ]] DAI
+                  </span>
+                  <span class="amount mb-2 font-smaller-3">MONTHLY RECURRING</span>
+                </template>
+              </div>
+              <div>
+                <span class="font-subheader font-weight-bold amount pt-1 mb-2">
+                  [[ grant.amount_received_in_round ]] DAI
+                </span>
+                <span class="amount mb-2 font-smaller-3">
+                  raised from
+                </span>
+                <span class="amount mb-2 font-smaller-3 font-weight-semibold">
+                 [[ grant.positive_round_contributor_count ]] contributors
+                </span>
+              </div>
+            </div>
+            <template v-if="cred.is_authenticated">
+              <button :class="`ml-3 text-decoration-none btn btn-link star-action m-0 p-0 font-smaller-3 gc-text-blue ${!grant.favorite ? 'text-muted' : ''}`" :data-grant="grant.id">
+                <i :class="`${!grant.favorite ? 'far' : 'fa' } fa-star`" ></i>
+                <span class="ml-1 font-body">[[ !grant.favorite ? 'Follow' : 'Following' ]]</span>
+              </button>
+            </template>
+          </div>
+        </div>
+      </div>
+      <div class="col-md-3 col-sm-12 py-4 pr-md-5 pl-md-0 grant-action">
+        <form class="js-addDetailToCart-form" v-if="!grant.is_on_team">
+          {% include 'grants/components/hidden_inputs.html' %}
+          <button class="btn btn-gc-blue cart-btn large font-body font-weight-semibold mt-1 mr-1">
+            + Add to Cart
+          </button>
+        </form>
+        <button class="btn btn-gc-grey cart-btn large font-body font-weight-semibold mt-1 mr-1" v-else>
+          <i class="fa fa-stop" aria-hidden="true"></i> Cannot Fund your Own Grant
+        </button>
+      </div>
+    </div>
+    <div class="grant-item" v-else>
+      <div class="grant-item__img">
+        <img :src="grant.logo_url">
+      </div>
+      <div class="grant-item__content px-3">
+        <h2 class="grant-item__title font-subheader">
+          <a :href="grant.details_url">[[ grant.title.slice(0,60) ]][[ grant.title.length > 60 ? '...' : '']]</a>
+        </h2>
+        <p class="grant-item__pitch font-caption mb-2">[[ grant.description.slice(0, 145) ]][[ grant.description.length > 145 ? '...' : '']]</p>
+        <p class="grant-item__pitch font-caption mb-0" style="height:2rem;"  data-toggle="tooltip" data-placement="top" title="The last time the grant admin updated the grant." >
+          <span class="font-smaller-5">
+            <i style="width: 14px;" class="fas fa-clock mt-2 mb-0 text-center"></i>
+            Last Update: [[ grant.last_update ?  grant.last_update_natural : `Before Round ${grant.round_num}` ]]
+          </span>
+          <template v-if="cred.is_staff">
+            <hr class="my-2">
+            <p class="font-caption font-weight-semibold">
+              <i class="fa fa-lock mr-2" aria-hidden="true"></i>
+              SybilScore ™️: [[ grant.sybil_score ]]
+              <span class="mx-2">|</span>
+              RiskScore ™️: [[ grant.weighted_risk_score ]]
+            </p>
+          </template>
+        </p>
+
+        <div class="grant-item__owner justify-content-between">
+          <div>
+            <span class="grant-item__owner-handle font-body">{% trans 'by' %}</span>
+            <a :href="grant.admin_profile.url" :data-usercard="grant.admin_profile.handle" target="_blank" rel="noopener noreferrer">
+              <div class="grant-item__owner mt-3 mb-4">
+                <div class="grant-item__owner-image ml-2">
+                  <img :src="grant.admin_profile.avatar_url || 'https://c.gitcoin.co/avatars/57e79c0ae763bb27095f6b265a1a8bf3/thelostone-mc.svg'">
+                </div>
+                <div class="grant-item__owner-handle font-body">
+                  <span class="ml-2">
+                    [[ grant.admin_profile.handle || 'anonymous' ]]
+                  </span>
+                </div>
+              </div>
+            </a>
+          </div>
+          <template v-if="cred.is_authenticated">
+            <button :class="`text-decoration-none btn btn-link star-action m-0 p-0 mr-4 mt-3 gc-text-blue ${!grant.favorite ? 'text-muted' : ''}`" :data-grant="grant.id">
+              <i :class="`${!grant.favorite ? 'far' : 'fa' } fa-star`" ></i>
+              <span class="ml-1 font-body">[[ !grant.favorite ? 'Follow' : 'Following' ]]</span>
+            </button>
+          </template>
+        </div>
+      </div>
+      <div class="grant-item__footer">
+          <div class="clr mb-3">
+            <div class="match__round pb-1 pt-2 mb-2">
+              <h2 class="title col-8 font-caption g-bold" v-if="grant.clr_round_num">
+                [[grant.clr_round_num]] CLR MATCH ROUND
+              </h2>
+            </div>
+            <div class="col-6 float-right px-0">
+              <h2 class="font-title font-weight-bold amount pt-1 mb-2">
+                [[ grant.amount_received_in_round ]] DAI
+              </h2>
+              <p class="amount mb-2 font-caption font-weight-semibold">
+              raised from [[ grant.positive_round_contributor_count ]] contributors
+              </p>
+            </div>
+            <div class="col-6">
+
+              <template v-if="grant.is_clr_eligible">
+                <h2 class="font-title font-weight-bold amount pt-1 mb-2">
+                  [[ get_clr_prediction(0, 1) || 0 ]] DAI DAI
+                </h2>
+                <p class="amount mb-2 font-caption font-weight-semibold">
+                  Final CLR Match
+                </p>
+              </template>
+              <template>
+                <h2 class="font-title font-weight-bold amount pt-1 mb-2">
+                  [[ grant.amount_received ]] DAI
+                </h2>
+                <p class="amount mb-2 font-caption font-weight-semibold">All Time Funding</p>
+              </template>
+            </div>
+          </div>
+          {% if grant.is_clr_active %}
+            <div class="col-12 pb-3" v-if="grant.is_clr_eligible">
+              {% include 'grants/components/clr_estimate.html' %}
+            </div>
+            <h2 class="font-subheader text-center amount pt-4 mb-3" style="color:#069953" v-else>
+              NOT ELIGIBLE FOR CLR
+            </h2>
+          {% endif %}
+
+          <div class="col-12 pb-4">
+            <form class="js-addDetailToCart-form" v-if="!grant.is_on_team">
+              {% include 'grants/components/hidden_inputs.html' %}
+              <button class="btn btn-gc-blue cart-btn large font-body font-weight-semibold mt-1 mr-1">
+                + Add to Cart
+              </button>
+            </form>
+
+            <button class="btn btn-gc-grey cart-btn large font-body font-weight-semibold mt-1 mr-1" v-else>
+              <i class="fa fa-stop" aria-hidden="true"></i> Cannot Fund your Own Grant
+            </button>
+          </div>
+      </div>
+    </div>
+  </template>
+</grant-card>
diff --git a/app/grants/templates/grants/components/clr_estimate.html b/app/grants/templates/grants/components/clr_estimate.html
new file mode 100644
index 00000000000..a4df62c59b3
--- /dev/null
+++ b/app/grants/templates/grants/components/clr_estimate.html
@@ -0,0 +1,50 @@
+{% load i18n static humanize grants_extra %}
+
+<div class="clr clr-prediction arrow_box" v-if="clr_active">
+  <p class="title">
+    Your contribution goes a long way!
+    <img class="float-right" src="{% static "v2/images/diamonds_high_fiving.gif" %}" >
+  </p>
+  <div class="row mx-1">
+    <div class="col-6 px-2 mb-2">
+      <p class="predict-label mb-0"><span class="font-weight-semibold">1 DAI</span> contribution</p>
+      <p class="amount mb-0">
+        <i class="fas fa-arrow-circle-right"></i>
+        <span class="font-weight-bold"> + [[ get_clr_prediction(1, 2) ]] DAI</span> match
+      </p>
+    </div>
+
+    <div class="col-6 px-2 mb-2" v-if="!short">
+      <p class="predict-label mb-0"><span class="font-weight-semibold">10 DAI</span> contribution</p>
+      <p class="amount mb-0">
+        <i class="fas fa-arrow-circle-right"></i>
+        <span class="font-weight-bold"> + [[ get_clr_prediction(2, 2) ]] DAI</span> match
+      </p>
+    </div>
+
+    <div class="col-6 px-2 mb-2">
+      <p class="predict-label mb-0"><span class="font-weight-semibold">100 DAI</span> contribution</p>
+      <p class="amount mb-0">
+        <i class="fas fa-arrow-circle-right"></i>
+        <span class="font-weight-bold"> +  [[ get_clr_prediction(3, 2) || 0 ]] DAI</span> match
+      </p>
+    </div>
+
+    <div class="col-6 px-2 mb-2" v-if="!short">
+      <p class="predict-label mb-0"><span class="font-weight-semibold">1,000 DAI</span> contribution</p>
+      <p class="amount mb-0">
+        <i class="fas fa-arrow-circle-right"></i>
+        <span class="font-weight-bold"> + [[ get_clr_prediction(4, 2) || 0 ]] DAI</span> match
+      </p>
+    </div>
+
+  </div>
+
+  <div class="row mx-0" style="font-size: 9px;" v-if="grant.last_clr_calc_date">
+    <div class="w-100 text-center text-black-70 pb-1">
+      Next update : [[ grant.safe_next_clr_calc_date ]]
+      <span class="mx-1">|</span>
+      Last updated : [[ grant.last_clr_calc_date ]]
+    </div>
+  </div>
+</div>
diff --git a/app/grants/templates/grants/components/hidden_inputs.html b/app/grants/templates/grants/components/hidden_inputs.html
new file mode 100644
index 00000000000..4e58375524a
--- /dev/null
+++ b/app/grants/templates/grants/components/hidden_inputs.html
@@ -0,0 +1,19 @@
+<input type="hidden" id="grant_id" name="grant_id" :value="grant.id">
+<input type="hidden" id="grant_slug" name="grant_slug" :value="grant.slug">
+<input type="hidden" id="grant_url" name="grant_url" :value="grant.url">
+<input type="hidden" id="grant_title" name="grant_title" :value="grant.title">
+<input type="hidden" id="grant_contract_version" name="grant_contract_version" :value="grant.contract_version">
+<input type="hidden" id="grant_contract_address" name="grant_contract_address" :value="grant.contract_address">
+<input type="hidden" id="grant_token_symbol" name="grant_token_symbol" :value="grant.token_symbol">
+<input type="hidden" id="grant_admin_address" name="grant_admin_address" :value="grant.admin_address">
+<input type="hidden" id="grant_token_address" name="grant_token_address" :value="grant.token_address">
+<input type="hidden" id="grant_logo" name="grant_logo" :value="grant.logo_url">
+<input type="hidden" id="grant_clr_prediction_curve" name="grant_clr_prediction_curve" :value="grant.clr_prediction_curve">
+<input type="hidden" id="grant_image_css" name="grant_image_css" :value="grant.image_css">
+<input type="hidden" id="is_clr_eligible" name="is_clr_eligible" :value="grant.is_clr_eligible ? grant.is_clr_eligible : ''">
+<input type="hidden" id="grant_donation_amount" name="grant_donation_amount" :value="amount" v-if="grant.amount">
+
+<template v-if="token">
+  <input type="hidden" id="grant_donation_currency" name="grant_donation_currency" :value="token.symbol">
+  <input type="hidden" id="token_local_id" name="token_local_id" :value="token.id">
+</template>
diff --git a/app/grants/templates/grants/detail/funding.html b/app/grants/templates/grants/detail/funding.html
index 232d3fefa46..5049b802beb 100644
--- a/app/grants/templates/grants/detail/funding.html
+++ b/app/grants/templates/grants/detail/funding.html
@@ -56,6 +56,18 @@ <h2 class="font-title font-weight-bold amount pt-1 mb-0">
         </button>
 
       {% elif not is_team_member %}
+        <div class="pt-2 mb-1 d-flex justify-content-between">
+          {% is_favorite grant profile.user as is_grant_favorite %}
+          {% if profile.user.is_authenticated %}
+            <button class="text-decoration-none btn btn-link star-action m-0 p-0 mr-4 gc-text-blue {% if not is_grant_favorite %}text-muted{% endif %}" data-grant="{{ grant.id }}">
+                {% if not is_grant_favorite %}
+                  <i class="far fa-star" ></i><span class="ml-1 font-body">Follow</span>
+                {% else %}
+                  <i class="fa fa-star" ></i><span class="ml-1 font-body">Following</span>
+                {% endif %}
+            </button>
+          {% endif %}
+        </div>
 
         {% if user_non_errored_subscription %}
           <a href="{% url 'grants:subscription_cancel' grant.id grant.slug user_subscription.id %}">
@@ -92,4 +104,4 @@ <h2 class="font-title font-weight-bold amount pt-1 mb-0">
       {% endif %}
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/grants/templates/grants/index.html b/app/grants/templates/grants/index.html
index 22d4b5477f0..aae4b88372c 100644
--- a/app/grants/templates/grants/index.html
+++ b/app/grants/templates/grants/index.html
@@ -25,6 +25,16 @@
   <link rel="stylesheet" href="{% static "v2/css/activity_stream.css" %}">
   <link rel="stylesheet" href="{% static "v2/css/sidebar_search.css" %}" />
   <link rel="stylesheet" href="{% static "v2/css/grants/side-cart.css" %}">
+  <style>
+    .select2-selection .select2-selection--single {
+      background: none;
+      outline: none;
+      border: none !important;
+      color: var(--gc-blue);
+      padding: 0;
+      max-width: 136px;
+    }
+  </style>
 </head>
 
 <body class="interior {{type}}_grants {{ active }} grant g-font-muli">
@@ -35,7 +45,7 @@
 
     {% include 'shared/grant_thanks_modal.html' %}
     {% include 'grants/shared/landing_hero.html' %}
-    <div class="row">
+    <div class="row" style="width: 100vw">
       <div id="grants-details" class="col-12 pr-0">
         <div style="background-image: url('/static/v2/images/bg/{{bottom_back}}'); background-size: contain;">
           <div
@@ -56,35 +66,33 @@
               </div>
             </div>
             {% endif %}
-            <div class="row">
-              <div class="col-12 col-lg-3 col-xl-2" id="sidebar_container">
-                {% include 'grants/shared/sidebar_search.html' %}
-              </div>
+            <div id="grants-showcase" v-cloak>
+              <div class="row" style="max-width: 99vw">
+                <div class="col-12 col-lg-3 col-xl-2" id="sidebar_container">
+                  {% include 'grants/shared/sidebar_search.html' %}
+                </div>
+
+                <div class="col-12 col-lg-9 col-xl-10 px-4 px-lg-0">
+                  {% include 'grants/shared/landing_navbar.html' %}
+                  {% include 'grants/shared/landing_clr.html' %}
 
-              <div class="col-12 col-lg-9 col-xl-10 px-4 px-lg-0">
-                {% include 'grants/shared/landing_navbar.html' %}
-                {% include 'grants/shared/landing_clr.html' %}
-                {% if type == 'activity' %}
-                {% include 'grants/shared/landing_activity.html' %}
-                {% elif type == 'about' %}
-                {% include 'grants/shared/landing_announce.html' %}
-                {% elif type == 'stats' %}
-                <div id="insert_iframe">
+                  <template v-if="'activity' == current_type">
+                    {% include 'grants/shared/landing_activity.html' %}
+                  </template>
+                  <template v-else-if="'about' == current_type">
+                    {% include 'grants/shared/landing_announce.html' %}
+                  </template>
+                  <template v-else-if="'stats' == current_type">
+                    <div id="insert_iframe">
+                      <iframe :src="`/grants/getstats/?category=${category}`" style="width: 100%; height: 100%; min-height: 1000px;">
+                      </iframe>
+                    </div>
+                  </template>
+                  <template v-else>
+                    {% include 'grants/shared/landing_subnav.html' %}
+                    {% include 'grants/shared/landing_grants.html' %}
+                  </template>
                 </div>
-                <script>
-                  var insert_iframe = function () {
-                    if (typeof $ != 'undefined') {
-                      $('#insert_iframe').html('<iframe src="/grants/getstats/?category={{selected_category}}" style="width: 100%; height: 100%; min-height: 1000px;">')
-                    } else {
-                      setTimeout(insert_iframe, 100);
-                    }
-                  };
-                  setTimeout(insert_iframe, 100);
-                </script>
-                {% else %}
-                {% include 'grants/shared/landing_subnav.html' %}
-                {% include 'grants/shared/landing_grants.html' %}
-                {% endif %}
               </div>
             </div>
           </div>
@@ -102,6 +110,12 @@
     {% include 'shared/footer_scripts.html' with ignore_inject_web3=1 %}
     {% include 'shared/footer.html' %}
     {% include 'grants/shared/shared_scripts.html' %}
+    <script>
+      document.current_type = "{{ type|default:'all' }}";
+      document.selected_category = "{{ selected_category }}";
+      document.keyword = "{{ keyword }}";
+      document.following = {{ following|yesno:'true,false' }};
+    </script>
 </body>
 <script src="{% static "v2/js/lib/jquery.waypoints.min.js" %}"></script>
 <script src="{% static "v2/js/lib/infinite.min.js" %}"></script>
diff --git a/app/grants/templates/grants/shared/landing_grants.html b/app/grants/templates/grants/shared/landing_grants.html
index 2120687a6c6..7fda0f89f4d 100644
--- a/app/grants/templates/grants/shared/landing_grants.html
+++ b/app/grants/templates/grants/shared/landing_grants.html
@@ -2,38 +2,25 @@
 
     <div class="container-fluid grants-container">
       <div class="container">
-        {% if grants %}
-          <div class="infinite-container row">
-            {% for grant in grants %}
-              <div class="col-12 col-md-6 col-xl-4 mb-4 infinite-item">
-                {% include 'grants/card/index.html' %}
-              </div>
-            {% endfor %}
-          </div>
-          {% if grants.has_next %}
-            <p class="mb-0 text-center py-4">
-              <a class="infinite-more-link text-center text-black-70 cursor-pointer"
-                href="?network={{network}}&type={{type}}&keyword={{keyword}}&sort_option={{sort}}&page={{ grants.next_page_number }}"
-              >
-                <i class="fas fa-spinner fa-spin mr-2"></i>
-                Collecting more exciting grants
-              </a>
-            </p>
-          {% endif %}
-        {% else %}
-          <div class="col-12 mb-3 mx-auto col-md-6 text-center">
-            <img class="obiwan my-4" src="{% static "v2/images/obiwan-bot.svg" %}">
-            <h1 class="font-title-lg font-weight-semibold mt-4 mb-2">{% trans "This is not the grant you’re looking for." %}</h1>
-            <p class="font-subheader text">
-              {% trans "We couldn't match with any grants on Gitcoin." %}</br>
-              {% trans "Please try another search term or browse for a grant." %}
-            </p>
-          </div>
-          <div class="col-12 pt-4 pb-2 mx-auto text-center">
-            <a class="button-lg btn-gc btn-gc-blue py-3 px-5 font-weight-semibold" href="{% url 'grants:grants' %}">
-              {% trans "Browse Grants" %}
+        <div class="infinite-container row" @scroll.passive="onScroll($event)" v-if="grants">
+          <div :class="`col-12 ${view == 'grid' ? 'col-md-6 col-xl-4' : ''} mb-4 infinite-item grant-card`" v-for="grant in grants">
+            <a class="text-decoration-none" :href="grant.details_url">
+              {% include 'grants/components/card.html' %}
             </a>
           </div>
-        {% endif %}
+        </div>
+        <div class="col-12 mb-3 mx-auto col-md-6 text-center" v-else>
+          <img class="obiwan my-4" src="{% static "v2/images/obiwan-bot.svg" %}">
+          <h1 class="font-title-lg font-weight-semibold mt-4 mb-2">{% trans "This is not the grant you’re looking for." %}</h1>
+          <p class="font-subheader text">
+            {% trans "We couldn't match with any grants on Gitcoin." %}</br>
+            {% trans "Please try another search term or browse for a grant." %}
+          </p>
+        </div>
+        <div class="col-12 pt-4 pb-2 mx-auto text-center">
+          <a class="button-lg btn-gc btn-gc-blue py-3 px-5 font-weight-semibold" href="{% url 'grants:grants' %}">
+            {% trans "Browse Grants" %}
+          </a>
+        </div>
       </div>
-    </div>
\ No newline at end of file
+    </div>
diff --git a/app/grants/templates/grants/shared/landing_navbar.html b/app/grants/templates/grants/shared/landing_navbar.html
index abf0d34f864..f22dabe9a70 100644
--- a/app/grants/templates/grants/shared/landing_navbar.html
+++ b/app/grants/templates/grants/shared/landing_navbar.html
@@ -59,3 +59,6 @@
           {% endif %}
         </div>
       </div>
+    </form>
+  </div>
+</div>
diff --git a/app/grants/templates/grants/shared/landing_subnav.html b/app/grants/templates/grants/shared/landing_subnav.html
index cd72a0e1582..7816c68520e 100644
--- a/app/grants/templates/grants/shared/landing_subnav.html
+++ b/app/grants/templates/grants/shared/landing_subnav.html
@@ -1,22 +1,13 @@
 {% load humanize static i18n %}
-          <div class="row">
-
-            <div class="col-12 col-xl-8" style="display: none;">
-              <ul class="grants_nav grants_keyword_nav pl-0 mb-0 pb-1 pt-2 mt-2 mt-xl-0 text-center text-xl-left font-body font-weight-semibold">
-                <a data-type="category" data-value="" class="mr-3 mr-md-2 mr-lg-3 {% if selected_category == '' %} selected {% endif %}">
-                  All
-                </a>
-                {% for category in categories %}
-                  <a data-type="category" data-value="{{category}}" class="mr-3 mr-md-2 mr-lg-3 {% if selected_category == category %} selected {% endif %}">
-                    {{category|title}}
-                  </a>
-                {% endfor %}
-              </ul>
-            </div>
-
+          <div id="top-filters" class="row">
             <div class="col-12 col-xl-12 mt-2 mt-xl-0 font-caption text-center text-xl-right font-weight-semibold order_by sort_container">
-              <div class="heading">{% trans "Sort by" %}</div>
-              <select name="sort_option" id="sort_option">
+              <div class="mr-4">
+                <span class="heading mr-2">View</span>
+                <a href="#" :class="`font-weight-bold ${view == 'list' ? 'gc-text-blue' : 'text-black'}`" @click="setView('list', $event)">List</a> |
+                <a href="#" :class="`font-weight-bold ${view == 'grid' ? 'gc-text-blue' : 'text-black'}`" @click="setView('grid', $event)">Grid</a>
+              </div>
+              <span class="heading">{% trans "Sort by" %}</span>
+              <select @change="filter_grants({sort: sort})" v-model="sort" name="sort_option" id="sort_option2">
                 <option value="weighted_shuffle">{% trans "Weighted Shuffle" %}</option>
                 {% if is_staff %}
                 <option value="-weighted_risk_score">{% trans "Weighted Risk Score" %}</option>
@@ -37,4 +28,4 @@
 
         </form>
       </div>
-    </div>
\ No newline at end of file
+    </div>
diff --git a/app/grants/templates/grants/shared/sidebar_search.html b/app/grants/templates/grants/shared/sidebar_search.html
index e255ead99e2..8d384113eeb 100644
--- a/app/grants/templates/grants/shared/sidebar_search.html
+++ b/app/grants/templates/grants/shared/sidebar_search.html
@@ -15,102 +15,101 @@
     along with this program. If not, see <http://www.gnu.org/licenses/>.
 {% endcomment %}
 {% load i18n static get_categories_from_list %}
-<div class="sidebar_search font-body pr-0 pl-4">
-  <div class="search font-caption mb-4" style="width: 110%;">
-    <div class="search-area col-12">
-      <form method="POST" id="search_form">
-        {% csrf_token %}
-        <input class="form__input form__input_lg" type="search" id="keyword" name="keyword" style="font-family: 'Font Awesome 5 Pro', 'Muli', sans-serif; font-weight: 900;" placeholder="&#xF002; Search Grant" />
-      </form>
+<grant-sidebar :grant_types="grant_types" :filter_grants="filter_grants" :type="current_type" :selected_category="category" :keyword="keyword" :following="following"  :set_type="setCurrentType" inline-template>
+  <div class="sidebar_search font-body pr-0 pl-4" >
+    <div class="search font-caption mb-4" style="width: 110%;">
+      <div class="search-area col-12">
+        <input @keyup="filter_grants({keyword: search})" class="form__input form__input_lg" type="search" v-model="search" id="keyword" name="keyword" style="font-family: 'Font Awesome 5 Pro', 'Muli', sans-serif; font-weight: 900;" placeholder="&#xF002; Search Grant" />
+      </div>
     </div>
-  </div>
 
-  <p id="expand" class="text-right font-caption font-weight-semibold">
-    {% trans "Expand Filter" %}
-    <i class="fas fa-chevron-down"></i>
-  </p>
-  <p id="minimize" class="text-right font-caption font-weight-semibold">
-    {% trans "Minimize Filter" %}
-    <i class="fas fa-chevron-up"></i>
-  </p>
+    <p id="expand" class="text-right font-caption font-weight-semibold">
+      {% trans "Expand Filter" %}
+      <i class="fas fa-chevron-down"></i>
+    </p>
+    <p id="minimize" class="text-right font-caption font-weight-semibold">
+      {% trans "Minimize Filter" %}
+      <i class="fas fa-chevron-up"></i>
+    </p>
 
-  <form id="filters">
+    <form id="filters">
+      {% if profile %}
+        <span @click="toggleFollowing(!following, $event)" :class="`btn btn-link font-smaller-1 font-weight-semibold text-decoration-none ${ following ? 'gc-text-blue' : 'text-black'}`">
+          <i :class="`${ following ? 'fas' : 'far'} fa-star`" ></i> Following [[ following ? 'x' : '']]
+        </span>
+      {% endif %}
+      <div class="col border-top-0">
+        <div class="subheading">
+          {% trans "Categories" as cats %}{{ cats|upper }}
+        </div>
+        <ul class="nav d-inline-block font-body mb-2 grants_nav grants_type_nav pl-0 mb-0 pb-2 mt-2 text-left font-smaller-1 font-weight-semibold">
+          <li class="mr-1 ">
+            <a @click="filter_grants({type: 'all', category: ''})" data-type="all" data-category="" :class="`mr-1 ${ type == 'all'? 'selected':''}`">
+              All Categories
+            </a>
+          </li>
+          <template v-for="grant_type in grant_types">
+            <li class="mr-1 accordion">
+              <a @click="filter_grants({type: grant_type.keyword, category: ''})" :data-type="grant_type.keyword" data-category="" :class="`mr-1  ${type == grant_type.keyword ? 'selected' : ''}`">
+                [[grant_type.label]] <sup>([[grant_type.count]])</sup>
+              </a>
+            </li>
+            <div class="panel">
+              <div class="col-12 options">
+                <ul class="nav d-inline-block font-body mb-2 grants_nav grants_keyword_nav pl-0 mb-0 pb-1 pt-2 mt-2 mt-xl-0 text-xl-left font-body font-weight-semibold">
+                  <li class="mr-1 ">
+                    <a @click="filter_grants({type: grant_type.keyword, category: ''})" :data-type="grant_type.keyword" data-category="" :class="`mr-3 mr-md-2 mr-lg-3 ${ type == grant_type.keyword && selected_category == '' ? 'selected': ''}`">
+                      All [[grant_type.label]]
+                    </a>
+                  </li>
+                  <li class="mr-1" v-for="category in grant_type.sub_categories">
+                    <a @click="filter_grants({type: grant_type.keyword, category: category})" :data-type="grant_type.keyword" data-category="category" :class="`mr-3 mr-md-2 mr-lg-3 ${ selected_category == category ? 'selected' : '' }`">
+                      [[category]]
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </template>
 
-    <div class="col border-top-0">
-      <div class="subheading">
-        {% trans "Categories" as cats %}{{ cats|upper }}
+          <hr>
+          <li>
+            <a @click="set_type('about')" data-type="about" data-category="" :class="`mr-1  px-1 ${ type == 'about'? 'selected':''}`">
+              About
+            </a>
+          </li>
+          <li>
+            <a @click="set_type('stats')" data-type="stats" data-category="" :class="`mr-1  px-1 ${ type == 'stats'? 'selected':''}`">
+              Stats
+            </a>
+          </li>
+          <li>
+            <a @click="set_type('activity')" data-type="activity" data-category="" :class="`mr-1  px-1 ${ type == 'activity'? 'selected':''}`">
+              Activity
+            </a>
+          </li>
+          {% if github_handle %}
+          <li>
+            <a target="new" href='/{{github_handle}}/grants' class="mr-1 px-1 ">
+              My Grants <i class="fas fa-external-link-alt"></i>
+            </a>
+          </li>
+          {% endif %}
+          <li>
+            <a target="new" href='/wiki/grants' class="mr-1 px-1 ">
+              FAQ <i class="fas fa-external-link-alt"></i>
+            </a>
+          </li>
+        </ul>
       </div>
-      <ul class="nav d-inline-block font-body mb-2 grants_nav grants_type_nav pl-0 mb-0 pb-2 mt-2 text-left font-smaller-1 font-weight-semibold">
-        <li class="mr-1 ">
-        <a data-type="all" data-category="" class="mr-1 {% if type == 'all' %}selected{% endif %} ">
-          All Categories
-        </a>
-      </li>
 
-        {% for grant_type in grant_types %}
-        <li class="mr-1 accordion">
-          <a data-type="{{grant_type.keyword}}" data-category="" class="mr-1 {% if type == grant_type.keyword %}selected{% endif %}">
-            {{grant_type.label}} <sup>({{grant_type.count}})</sup>
-          </a>
-        </li>
+    </form>
 
-        <div class="panel">
-          <div class="col-12 options">
-              <ul class="nav d-inline-block font-body mb-2 grants_nav grants_keyword_nav pl-0 mb-0 pb-1 pt-2 mt-2 mt-xl-0 text-xl-left font-body font-weight-semibold">
-                <li class="mr-1 ">
-                <a data-type="{{grant_type.keyword}}" data-category="" class="mr-3 mr-md-2 mr-lg-3 {% if type == grant_type.keyword and selected_category == '' %} selected {% endif %}">
-                  All {{grant_type.label}}
-                </a>
-              </li>
-
-                {% for category in sub_categories|get_categories_from_list:grant_type.keyword %}
-                <li class="mr-1 ">
-                  <a data-type="{{grant_type.keyword}}" data-category="{{category}}" class="mr-3 mr-md-2 mr-lg-3 {% if selected_category == category %} selected {% endif %}">
-                    {{category|title}}
-                  </a>
-                </li>
-                {% endfor %}
-              </ul>
-          </div>
+      <div class="col p-0">
+        <div class="info-box p-2 mt-4">
+          <p class="mb-1"><b>💡Did you know?</b></p>
+          <span class="font-smaller-3">You can now add grants to your cart & come back to checkout later.  Just make sure to checkout by {{round_end|date:'Y-m-d'}} in order to get your contributions matched. </span>
         </div>
-        {% endfor %}
-        <hr>
-        <li>
-          <a data-type="about" data-category="" class="mr-1 px-1 {% if type == 'about' %}selected{% endif %}">
-            About
-          </a>
-        </li>
-        <li>
-          <a data-type="stats" data-category="" class="mr-1 px-1 {% if type == 'stats' %}selected{% endif %}">
-            Stats
-          </a>
-        </li>
-        <li>
-          <a data-type="activity" data-category="" class="mr-1 px-1 {% if type == 'activity' %}selected{% endif %}">
-            Activity
-          </a>
-        </li>
-        {% if github_handle %}
-        <li>
-          <a target="new" href='/{{github_handle}}/grants' class="mr-1 px-1 ">
-            My Grants <i class="fas fa-external-link-alt"></i>
-          </a>
-        </li>
-        {% endif %}
-        <li>
-          <a target="new" href='/wiki/grants' class="mr-1 px-1 ">
-            FAQ <i class="fas fa-external-link-alt"></i>
-          </a>
-        </li>
-      </ul>
-    </div>
-
-  </form>
-
-    <div class="col p-0">
-      <div class="info-box p-2 mt-4">
-        <p class="mb-1"><b>💡Did you know?</b></p>
-        <span class="font-smaller-3">You can now add grants to your cart & come back to checkout later.  Just make sure to checkout by {{round_end|date:'Y-m-d'}} in order to get your contributions matched. </span> 
       </div>
-    </div>
-</div>
+  </div>
+</grant-sidebar>
diff --git a/app/grants/templatetags/grants_extra.py b/app/grants/templatetags/grants_extra.py
index 79d3b818f5e..f65fbe34a24 100644
--- a/app/grants/templatetags/grants_extra.py
+++ b/app/grants/templatetags/grants_extra.py
@@ -57,6 +57,7 @@ def modulo(num, val):
         int: The modulo of number and value.
 
     """
+
     return num % val
 
 @register.simple_tag
@@ -66,3 +67,10 @@ def is_team_member(grant, profile):
 @register.simple_tag
 def is_grants_path(path):
     return path.lower().startswith('/grants')
+
+@register.simple_tag
+def is_favorite(grant, profile):
+    if profile:
+        return grant.favorite(profile)
+
+    return False
diff --git a/app/grants/urls.py b/app/grants/urls.py
index b864cf17f36..3210ca296fd 100644
--- a/app/grants/urls.py
+++ b/app/grants/urls.py
@@ -22,7 +22,8 @@
 from grants.views import (
     bulk_fund, flag, grant_activity, grant_categories, grant_details, grant_fund, grant_new, grant_new_whitelabel,
     grants, grants_addr_as_json, grants_bulk_add, grants_by_grant_type, grants_cart_view, grants_clr, grants_stats_view,
-    invoice, leaderboard, new_matching_partner, profile, quickstart, subscription_cancel,
+    invoice, leaderboard, new_matching_partner, profile, quickstart, subscription_cancel, get_grants,
+    toggle_grant_favorite,
 )
 
 app_name = 'grants'
@@ -31,7 +32,9 @@
     path('getstats/', grants_stats_view, name='grants_stats'),
     path('grants.json', grants_addr_as_json, name='grants_json'),
     path('flag/<int:grant_id>', flag, name='grantflag'),
+    path('cards_info', get_grants, name='grant_cards_info'),
     path('<int:grant_id>/activity', grant_activity, name='log_activity'),
+    path('<int:grant_id>/favorite', toggle_grant_favorite, name='favorite_grant'),
     path('activity', grant_activity, name='log_activity'),
     path('<int:grant_id>/<slug:grant_slug>', grant_details, name='details'),
     path('<int:grant_id>/<slug:grant_slug>/', grant_details, name='details2'),
diff --git a/app/grants/views.py b/app/grants/views.py
index b7a2b664fc6..32119322846 100644
--- a/app/grants/views.py
+++ b/app/grants/views.py
@@ -27,10 +27,10 @@
 from django.conf import settings
 from django.contrib import messages
 from django.contrib.auth.decorators import login_required
-from django.contrib.humanize.templatetags.humanize import intword
+from django.contrib.humanize.templatetags.humanize import intword, naturaltime
 from django.core.paginator import Paginator
 from django.db import connection
-from django.db.models import Avg, Count, Max, Q
+from django.db.models import Avg, Count, Max, Q, Subquery
 from django.http import Http404, JsonResponse
 from django.shortcuts import get_object_or_404, redirect
 from django.template.response import TemplateResponse
@@ -69,7 +69,7 @@
 from perftools.models import JSONStore
 from ratelimit.decorators import ratelimit
 from retail.helpers import get_ip
-from townsquare.models import Comment, PinnedPost
+from townsquare.models import Comment, PinnedPost, Favorite
 from townsquare.utils import can_pin
 from web3 import HTTPProvider, Web3
 
@@ -248,8 +248,9 @@ def grants(request):
     _type = request.GET.get('type', 'all')
     return grants_by_grant_type(request, _type)
 
-def grants_by_grant_type(request, grant_type):
-    """Handle grants explorer."""
+
+def get_grants(request):
+    grant_type = request.GET.get('type', 'all')
 
     limit = request.GET.get('limit', 6)
     page = request.GET.get('page', 1)
@@ -258,10 +259,131 @@ def grants_by_grant_type(request, grant_type):
     keyword = request.GET.get('keyword', '')
     state = request.GET.get('state', 'active')
     category = request.GET.get('category', '')
-    if keyword:
-        category = ''
-    profile = get_profile(request)
-    _grants = None
+
+    following = request.GET.get('following', '') != ''
+
+    _grants = build_grants_by_type(request, grant_type, sort, network, keyword, state, category, following)
+
+    paginator = Paginator(_grants, limit)
+    grants = paginator.get_page(page)
+
+    grant_amount = 0
+    grant_stats = Stat.objects.filter(key='grants').order_by('-pk')
+    if grant_stats.exists():
+        grant_amount = lazy_round_number(grant_stats.first().val)
+
+    return JsonResponse({
+        'grant_types': get_grant_types(network),
+        'current_type': grant_type,
+        'category': category,
+        'grants': [{
+            'id': grant.id,
+            'logo_url': grant.logo.url if grant.logo and grant.logo.url else f'v2/images/grants/logos/{grant.id % 3}.png',
+            'details_url': reverse('grants:details', args=(grant.id, grant.slug)),
+            'title': grant.title,
+            'description': grant.description,
+            'last_update': grant.last_update,
+            'last_update_natural': naturaltime(grant.last_update),
+            'sybil_score': grant.sybil_score,
+            'weighted_risk_score': grant.weighted_risk_score,
+            'is_clr_active': grant.is_clr_active,
+            'clr_round_num': grant.clr_round_num,
+            'admin_profile': {
+                'url': grant.admin_profile.url,
+                'handle': grant.admin_profile.handle,
+                'avatar_url': grant.admin_profile.avatar_url
+            },
+            'favorite': grant.favorite(request.user) if request.user.is_authenticated else False,
+            'is_on_team': is_grant_team_member(grant, request.user.profile) if request.user.is_authenticated else False,
+            'amount': grant_amount,
+            'clr_prediction_curve': grant.clr_prediction_curve,
+            'last_clr_calc_date': grant.last_clr_calc_date,
+            'safe_next_clr_calc_date': naturaltime(grant.safe_next_clr_calc_date) if grant.last_clr_calc_date else None,
+            'amount_received_in_round': grant.amount_received_in_round,
+            'positive_round_contributor_count': grant.positive_round_contributor_count,
+            'monthly_amount_subscribed': grant.monthly_amount_subscribed,
+            'is_clr_eligible': grant.is_clr_eligible
+        } for grant in grants],
+        'credentials': {
+            'is_staff': request.user.is_staff,
+            'is_authenticated': request.user.is_authenticated
+        }
+    })
+
+
+def build_grants_by_type(request, grant_type='', sort='weighted_shuffle', network='mainnet', keyword='', state='active', category='', following=False):
+    sort_by_clr_pledge_matching_amount = None
+    if 'match_pledge_amount_' in sort:
+        sort_by_clr_pledge_matching_amount = int(sort.split('amount_')[1])
+
+    _grants = Grant.objects.filter(
+        network=network, hidden=False
+    ).keyword(keyword)
+
+    _grants = _grants.order_by(sort, 'pk')
+    _grants.first()
+
+    if state == 'active':
+        _grants = _grants.active()
+
+    if grant_type != 'all':
+        _grants = _grants.filter(grant_type__name=grant_type)
+
+    if following and request.user.is_authenticated:
+        favorite_grants = Favorite.grants().filter(user=request.user).values('grant_id')
+        _grants = _grants.filter(id__in=Subquery(favorite_grants))
+
+    clr_prediction_curve_schema_map = {10**x: x+1 for x in range(0, 5)}
+    if sort_by_clr_pledge_matching_amount in clr_prediction_curve_schema_map.keys():
+        sort_by_index = clr_prediction_curve_schema_map.get(sort_by_clr_pledge_matching_amount, 0)
+        field_name = f'clr_prediction_curve__{sort_by_index}__2'
+        _grants = _grants.order_by(f"-{field_name}")
+
+    if category:
+        _grants = _grants.filter(Q(categories__category__icontains=category))
+
+    _grants = _grants.prefetch_related('categories')
+
+    for grant in _grants:
+        clr_round = None
+
+        if grant.in_active_clrs.count() > 0:
+            clr_round = grant.in_active_clrs.first()
+
+        if clr_round:
+            grant.is_clr_active = True
+            grant.clr_round_num = clr_round.round_num
+        else:
+            grant.is_clr_active = False
+            grant.clr_round_num = 'LAST'
+
+    return _grants
+
+
+def get_grant_types(network):
+    all_grants_count = 0
+    grant_types = []
+    for _grant_type in GrantType.objects.all():
+
+        count = Grant.objects.filter(
+            network=network, hidden=False, active=True, grant_type=_grant_type
+        ).count()
+
+        if count > 0:
+            all_grants_count += count
+
+            grant_types.append({
+                'label': _grant_type.label, 'keyword': _grant_type.name, 'count': count
+            })
+
+    for grant_type in grant_types:
+        _keyword = grant_type['keyword']
+        grant_type['sub_categories'] = [tuple[0] for tuple in basic_grant_categories(_keyword)]
+
+    return grant_types
+
+
+def get_bg(grant_type):
     bg = 4
     bg = f"{bg}.jpg"
     mid_back = 'bg14.png'
@@ -277,47 +399,53 @@ def grants_by_grant_type(request, grant_type):
         bg = 'health2.jpg'
     if grant_type in ['about', 'activity']:
         bg = '3.jpg'
+
+    return bg, mid_back, bottom_back
+
+
+def grants_by_grant_type(request, grant_type):
+    """Handle grants explorer."""
+
+    limit = request.GET.get('limit', 6)
+    page = request.GET.get('page', 1)
+    sort = request.GET.get('sort_option', 'weighted_shuffle')
+    network = request.GET.get('network', 'mainnet')
+    keyword = request.GET.get('keyword', '')
+    state = request.GET.get('state', 'active')
+    category = request.GET.get('category', '')
+    following = request.GET.get('following', '') == 'true'
+
+    if keyword:
+        category = ''
+    profile = get_profile(request)
+    _grants = None
+    bg, mid_back, bottom_back = get_bg(grant_type)
     show_past_clr = False
 
     sort_by_index = None
-    sort_by_clr_pledge_matching_amount = None
-    if 'match_pledge_amount_' in sort:
-        sort_by_clr_pledge_matching_amount = int(sort.split('amount_')[1])
 
-    _grants = Grant.objects.filter(
-        network=network, hidden=False
-    ).keyword(keyword)
+    grant_amount = 0
+    grant_stats = Stat.objects.filter(key='grants').order_by('-pk')
+    if grant_stats.exists():
+        grant_amount = lazy_round_number(grant_stats.first().val)
 
+    _grants = None
     try:
-        _grants = _grants.order_by(sort, 'pk')
-        ____ = _grants.first()
+        _grants = build_grants_by_type(request, grant_type, sort, network, keyword, state, category)
     except Exception as e:
         print(e)
         return redirect('/grants')
 
-    if state == 'active':
-        _grants = _grants.active()
-    if keyword:
-        grant_type = ''
-    else:
-        if grant_type != 'all':
-            _grants = _grants.filter(grant_type__name=grant_type)
+    all_grants_count = Grant.objects.filter(
+        network=network, hidden=False
+    ).count()
 
-    clr_prediction_curve_schema_map = {10**x:x+1 for x in range(0, 5)}
-    if sort_by_clr_pledge_matching_amount in clr_prediction_curve_schema_map.keys():
-        sort_by_index = clr_prediction_curve_schema_map.get(sort_by_clr_pledge_matching_amount, 0)
-        field_name = f'clr_prediction_curve__{sort_by_index}__2'
-        _grants = _grants.order_by(f"-{field_name}")
+    partners = MatchPledge.objects.filter(active=True, pledge_type=grant_type) if grant_type else MatchPledge.objects.filter(active=True)
 
-    if category:
-        _grants = _grants.filter(Q(categories__category__icontains = category))
+    now = datetime.datetime.now()
 
-    _grants = _grants.prefetch_related('categories')
     paginator = Paginator(_grants, limit)
     grants = paginator.get_page(page)
-    partners = MatchPledge.objects.filter(active=True, pledge_type=grant_type) if grant_type else MatchPledge.objects.filter(active=True)
-
-    now = datetime.datetime.now()
 
     # record view
     pks = list([grant.pk for grant in grants])
@@ -332,34 +460,8 @@ def grants_by_grant_type(request, grant_type):
     for partner in current_partners:
         current_partners_fund += partner.amount
 
-    grant_amount = 0
-    grant_stats = Stat.objects.filter(key='grants').order_by('-pk')
-    if grant_stats.exists():
-        grant_amount = lazy_round_number(grant_stats.first().val)
-
-    grant_types = []
-    all_grants_count = 0
-
-    for _grant_type in GrantType.objects.all():
-
-        count = Grant.objects.filter(
-            network=network, hidden=False, active=True, grant_type=_grant_type
-        ).count()
-
-        if count > 0:
-            all_grants_count += count
-
-            grant_types.append({
-                'label': _grant_type.label, 'keyword': _grant_type.name, 'count': count
-            })
-
     categories = [_category[0] for _category in basic_grant_categories(grant_type)]
-
-    sub_categories = []
-    for _keyword in [grant_type['keyword'] for grant_type in grant_types]:
-        sub_category = {}
-        sub_category[_keyword] = [tuple[0] for tuple in basic_grant_categories(_keyword)]
-        sub_categories.append(sub_category)
+    grant_types = get_grant_types(network)
 
     cht = []
     chart_list = ''
@@ -372,26 +474,13 @@ def grants_by_grant_type(request, grant_type):
 
     prev_grants = Grant.objects.none()
     if request.user.is_authenticated:
+        grants_following = Favorite.objects.filter(user=request.user, activity=None).count()
         prev_grants = request.user.profile.grant_contributor.filter(created_on__gt=last_round_start, created_on__lt=last_round_end).values_list('grant', flat=True)
         prev_grants = Grant.objects.filter(pk__in=prev_grants)
 
 
     active_rounds = GrantCLR.objects.filter(is_active=True)
 
-    for grant in grants:
-        clr_round = None
-
-        if grant.in_active_clrs.count() > 0:
-            clr_round = grant.in_active_clrs.first()
-
-        if clr_round:
-            grant.is_clr_active = True
-            grant.clr_round_num = clr_round.round_num
-        else:
-            grant.is_clr_active = False
-            grant.clr_round_num = 'LAST'
-
-
     # populate active round info
     total_clr_pot = None
     if active_rounds:
@@ -424,7 +513,6 @@ def grants_by_grant_type(request, grant_type):
         'chart_list': chart_list,
         'bottom_back': bottom_back,
         'categories': categories,
-        'sub_categories': sub_categories,
         'prev_grants': prev_grants,
         'grant_types': grant_types,
         'current_partners_fund': current_partners_fund,
@@ -448,7 +536,9 @@ def grants_by_grant_type(request, grant_type):
         'show_past_clr': show_past_clr,
         'is_staff': request.user.is_staff,
         'selected_category': category,
-        'profile': profile
+        'profile': profile,
+        'grants_following': grants_following,
+        'following': following
     }
 
     # log this search, it might be useful for matching purposes down the line
@@ -1432,3 +1522,22 @@ def grants_clr(request):
         'grants': grants
     }
     return JsonResponse(response)
+
+
+@login_required
+@csrf_exempt
+def toggle_grant_favorite(request, grant_id):
+    grant = get_object_or_404(Grant, pk=grant_id)
+    favorite = Favorite.objects.filter(user=request.user, grant_id=grant_id)
+    if favorite.exists():
+        favorite.delete()
+
+        return JsonResponse({
+            'action': 'unfollow'
+        })
+
+    Favorite.objects.create(user=request.user, grant=grant)
+
+    return JsonResponse({
+        'action': 'follow'
+    })
diff --git a/app/townsquare/migrations/0023_auto_20200907_0657.py b/app/townsquare/migrations/0023_auto_20200907_0657.py
new file mode 100644
index 00000000000..25f8bc26dca
--- /dev/null
+++ b/app/townsquare/migrations/0023_auto_20200907_0657.py
@@ -0,0 +1,25 @@
+# Generated by Django 2.2.4 on 2020-09-07 06:57
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('grants', '0076_matchpledge_data'),
+        ('townsquare', '0022_auto_20200528_1629'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='favorite',
+            name='grant',
+            field=models.ForeignKey(null=True, on_delete=django.db.models.deletion.CASCADE, related_name='grant_favorites', to='grants.Grant'),
+        ),
+        migrations.AlterField(
+            model_name='favorite',
+            name='activity',
+            field=models.ForeignKey(null=True, on_delete=django.db.models.deletion.CASCADE, to='dashboard.Activity'),
+        ),
+    ]
diff --git a/app/townsquare/models.py b/app/townsquare/models.py
index e4b36360a85..286e2b6a4f0 100644
--- a/app/townsquare/models.py
+++ b/app/townsquare/models.py
@@ -394,9 +394,14 @@ def __str__(self):
 class Favorite(SuperModel):
     """Model for each favorite."""
     user = models.ForeignKey(get_user_model(), on_delete=models.CASCADE, related_name='favorites')
-    activity = models.ForeignKey('dashboard.Activity', on_delete=models.CASCADE)
+    grant = models.ForeignKey('grants.Grant', on_delete=models.CASCADE, related_name='grant_favorites', null=True)
+    activity = models.ForeignKey('dashboard.Activity', on_delete=models.CASCADE, null=True)
     created = models.DateTimeField(auto_now=True)
 
+    @staticmethod
+    def grants():
+        return Favorite.objects.filter(activity=None)
+
     def __str__(self):
         return f"Favorite {self.activity.activity_type}:{self.activity_id} by {self.user}"
 
@@ -406,7 +411,7 @@ class PinnedPost(SuperModel):
 
     user = models.ForeignKey('dashboard.Profile',
         on_delete=models.CASCADE, related_name='pins')
-    activity = models.ForeignKey('dashboard.Activity', 
+    activity = models.ForeignKey('dashboard.Activity',
         on_delete=models.CASCADE, related_name='pin')
     what = models.CharField(max_length=100, default='', unique=True)
     created = models.DateTimeField(auto_now=True)
diff --git a/app/townsquare/views.py b/app/townsquare/views.py
index d98449a0bc9..f4ad4a396fd 100644
--- a/app/townsquare/views.py
+++ b/app/townsquare/views.py
@@ -142,7 +142,7 @@ def get_sidebar_tabs(request):
             tabs = [new_tab] + tabs
             default_tab = 'grants'
 
-        num_favorites = request.user.favorites.all().count()
+        num_favorites = request.user.favorites.filter(grant=None).all().count()
         if num_favorites:
             key = 'my_favorites'
             activities = get_specific_activities(key, False, request.user, request.session.get(key, 0)).count()
@@ -224,7 +224,7 @@ def get_offers(request):
     offer_pks = []
     offers_by_category = {}
     available_offers = Offer.objects.current()
-    
+
     if request.user.is_authenticated:
         available_offers = available_offers.exclude(actions__profile=request.user.profile, actions__what__in=['click', 'decline', 'go'])
     for key in ['top', 'secret', 'random', 'daily', 'weekly', 'monthly']:

From 95871ee472ac1270ebb8f15bdcc7a991c72a99d0 Mon Sep 17 00:00:00 2001
From: Miguel Angel G <miguel@gordian.dev>
Date: Tue, 8 Sep 2020 23:01:33 -0500
Subject: [PATCH 2/7] hide idle grants by default

---
 app/assets/v2/css/grants/grant.css            |  2 +-
 app/assets/v2/js/grants/index.js              | 22 ++++++++++++++++---
 app/grants/admin.py                           |  3 ++-
 app/grants/templates/grants/index.html        |  1 +
 .../grants/shared/sidebar_search.html         | 11 ++++++----
 app/grants/views.py                           | 14 ++++++++----
 6 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/app/assets/v2/css/grants/grant.css b/app/assets/v2/css/grants/grant.css
index 2a12b4d9b0a..191cc66cfd8 100644
--- a/app/assets/v2/css/grants/grant.css
+++ b/app/assets/v2/css/grants/grant.css
@@ -630,7 +630,7 @@ background: linear-gradient(85.75deg, #03008D -17.8%, #000000 139.56%); /* W3C,
 }
 
 @media (max-width: 991.98px) {
-  #sidebar_container form#filters {
+  .hide_filters {
     height: 0;
     display: none;
   }
diff --git a/app/assets/v2/js/grants/index.js b/app/assets/v2/js/grants/index.js
index 5c8b65ff40a..2b1cb9427ee 100644
--- a/app/assets/v2/js/grants/index.js
+++ b/app/assets/v2/js/grants/index.js
@@ -74,16 +74,22 @@ $(document).ready(() => {
   if (document.getElementById('grants-showcase')) {
     Vue.component('grant-sidebar', {
       name: 'grant-sidebar',
-      props: [ 'filter_grants', 'grant_types', 'type', 'selected_category', 'keyword', 'following', 'set_type' ],
+      props: [ 'filter_grants', 'grant_types', 'type', 'selected_category', 'keyword', 'following', 'set_type', 'idle_grants' ],
       data: function() {
         return {
-          search: this.keyword
+          search: this.keyword,
+          show_filters: true
         };
       },
       methods: {
         toggleFollowing: function(state, event) {
           event.preventDefault;
           this.filter_grants({following: state});
+        },
+        toggleIdle: function(state, event) {
+          event.preventDefault;
+          console.log(state)
+          this.filter_grants({idle_grants: state});
         }
       }
     });
@@ -100,6 +106,7 @@ $(document).ready(() => {
         network: 'mainnet',
         keyword: document.keyword,
         current_type: document.current_type,
+        idle_grants: document.idle_grants,
         following: document.following,
         state: 'active',
         category: document.selected_category,
@@ -139,6 +146,9 @@ $(document).ready(() => {
           if (filters.following !== null && filters.following !== undefined) {
             this.following = filters.following;
           }
+          if (filters.idle_grants !== null && filters.idle_grants !== undefined) {
+            this.idle_grants = filters.idle_grants;
+          }
           if (filters.sort !== null && filters.sort !== undefined) {
             this.sort = filters.sort;
           }
@@ -153,7 +163,9 @@ $(document).ready(() => {
           if (this.keyword) {
             query_elements['keyword'] = this.keyword;
           }
-
+          if (this.idle_grants) {
+            query_elements['idle'] = this.idle_grants;
+          }
           if (this.following) {
             query_elements['following'] = this.following;
           }
@@ -186,6 +198,10 @@ $(document).ready(() => {
             base_params['following'] = this.following;
           }
 
+          if (this.idle_grants) {
+            base_params['idle'] = this.idle_grants;
+          }
+
           const params = new URLSearchParams(base_params).toString();
           const response = await fetchData(`/grants/cards_info?${params}`);
 
diff --git a/app/grants/admin.py b/app/grants/admin.py
index a3cd8788941..319d2fd24d0 100644
--- a/app/grants/admin.py
+++ b/app/grants/admin.py
@@ -94,7 +94,8 @@ class GrantAdmin(GeneralAdmin):
         'logo_asset', 'created_on', 'modified_on', 'team_member_list',
         'subscriptions_links', 'contributions_links', 'logo', 'logo_svg', 'image_css',
         'link', 'clr_prediction_curve', 'hidden', 'grant_type', 'next_clr_calc_date', 'last_clr_calc_date',
-        'metadata', 'categories', 'twitter_handle_1', 'twitter_handle_2', 'view_count', 'is_clr_eligible', 'in_active_clrs'
+        'metadata', 'categories', 'twitter_handle_1', 'twitter_handle_2', 'view_count', 'is_clr_eligible', 'in_active_clrs',
+        'last_update'
     ]
     readonly_fields = [
         'logo_svg_asset', 'logo_asset',
diff --git a/app/grants/templates/grants/index.html b/app/grants/templates/grants/index.html
index aae4b88372c..008f01996cd 100644
--- a/app/grants/templates/grants/index.html
+++ b/app/grants/templates/grants/index.html
@@ -115,6 +115,7 @@
       document.selected_category = "{{ selected_category }}";
       document.keyword = "{{ keyword }}";
       document.following = {{ following|yesno:'true,false' }};
+      document.idle_grants = {{ idle_grants|yesno:'true,false' }};
     </script>
 </body>
 <script src="{% static "v2/js/lib/jquery.waypoints.min.js" %}"></script>
diff --git a/app/grants/templates/grants/shared/sidebar_search.html b/app/grants/templates/grants/shared/sidebar_search.html
index 8d384113eeb..1c465ef354a 100644
--- a/app/grants/templates/grants/shared/sidebar_search.html
+++ b/app/grants/templates/grants/shared/sidebar_search.html
@@ -15,7 +15,7 @@
     along with this program. If not, see <http://www.gnu.org/licenses/>.
 {% endcomment %}
 {% load i18n static get_categories_from_list %}
-<grant-sidebar :grant_types="grant_types" :filter_grants="filter_grants" :type="current_type" :selected_category="category" :keyword="keyword" :following="following"  :set_type="setCurrentType" inline-template>
+<grant-sidebar :grant_types="grant_types" :filter_grants="filter_grants" :type="current_type" :selected_category="category" :keyword="keyword" :following="following"  :set_type="setCurrentType" :idle_grants="idle_grants" inline-template>
   <div class="sidebar_search font-body pr-0 pl-4" >
     <div class="search font-caption mb-4" style="width: 110%;">
       <div class="search-area col-12">
@@ -23,21 +23,24 @@
       </div>
     </div>
 
-    <p id="expand" class="text-right font-caption font-weight-semibold">
+    <p @click="show_filters = !show_filters" class="d-md-none text-right font-caption font-weight-semibold" v-if="show_filters">
       {% trans "Expand Filter" %}
       <i class="fas fa-chevron-down"></i>
     </p>
-    <p id="minimize" class="text-right font-caption font-weight-semibold">
+    <p @click="show_filters = !show_filters" class="d-md-none text-right font-caption font-weight-semibold" v-if="!show_filters">
       {% trans "Minimize Filter" %}
       <i class="fas fa-chevron-up"></i>
     </p>
 
-    <form id="filters">
+    <form id="filters" :class="{hide_filters: !show_filters }">
       {% if profile %}
         <span @click="toggleFollowing(!following, $event)" :class="`btn btn-link font-smaller-1 font-weight-semibold text-decoration-none ${ following ? 'gc-text-blue' : 'text-black'}`">
           <i :class="`${ following ? 'fas' : 'far'} fa-star`" ></i> Following [[ following ? 'x' : '']]
         </span>
       {% endif %}
+      <span @click="toggleIdle(!idle_grants, $event)" :class="`btn btn-link font-smaller-1 font-weight-semibold text-decoration-none ${ idle_grants ? 'gc-text-blue' : 'text-black'}`">
+        <i :class="`${ idle_grants ? 'fas' : 'far'} fa-clock`" ></i> Show Idle grants [[ idle_grants ? 'x' : '']]
+      </span>
       <div class="col border-top-0">
         <div class="subheading">
           {% trans "Categories" as cats %}{{ cats|upper }}
diff --git a/app/grants/views.py b/app/grants/views.py
index 32119322846..20b9530914a 100644
--- a/app/grants/views.py
+++ b/app/grants/views.py
@@ -259,10 +259,10 @@ def get_grants(request):
     keyword = request.GET.get('keyword', '')
     state = request.GET.get('state', 'active')
     category = request.GET.get('category', '')
-
+    idle_grants = request.GET.get('idle', '') == 'true'
     following = request.GET.get('following', '') != ''
 
-    _grants = build_grants_by_type(request, grant_type, sort, network, keyword, state, category, following)
+    _grants = build_grants_by_type(request, grant_type, sort, network, keyword, state, category, following, idle_grants)
 
     paginator = Paginator(_grants, limit)
     grants = paginator.get_page(page)
@@ -311,7 +311,7 @@ def get_grants(request):
     })
 
 
-def build_grants_by_type(request, grant_type='', sort='weighted_shuffle', network='mainnet', keyword='', state='active', category='', following=False):
+def build_grants_by_type(request, grant_type='', sort='weighted_shuffle', network='mainnet', keyword='', state='active', category='', following=False, idle_grants=False):
     sort_by_clr_pledge_matching_amount = None
     if 'match_pledge_amount_' in sort:
         sort_by_clr_pledge_matching_amount = int(sort.split('amount_')[1])
@@ -323,6 +323,10 @@ def build_grants_by_type(request, grant_type='', sort='weighted_shuffle', networ
     _grants = _grants.order_by(sort, 'pk')
     _grants.first()
 
+    three_months_ago = timezone.now() - datetime.timedelta(days=90)
+    if not idle_grants:
+        _grants = _grants.filter(last_update__gt=three_months_ago)
+
     if state == 'active':
         _grants = _grants.active()
 
@@ -414,6 +418,7 @@ def grants_by_grant_type(request, grant_type):
     state = request.GET.get('state', 'active')
     category = request.GET.get('category', '')
     following = request.GET.get('following', '') == 'true'
+    idle_grants = request.GET.get('idle', '') == 'true'
 
     if keyword:
         category = ''
@@ -538,7 +543,8 @@ def grants_by_grant_type(request, grant_type):
         'selected_category': category,
         'profile': profile,
         'grants_following': grants_following,
-        'following': following
+        'following': following,
+        'idle_grants': idle_grants
     }
 
     # log this search, it might be useful for matching purposes down the line

From ec954f49797ae5eb8427eb1a81b5d0521c789b18 Mon Sep 17 00:00:00 2001
From: Miguel Angel G <miguel@gordian.dev>
Date: Wed, 9 Sep 2020 03:08:25 -0500
Subject: [PATCH 3/7] Add contributions on grants

---
 app/assets/v2/css/sidebar_search.css          |   5 -
 app/assets/v2/js/grants/index.js              |  34 +++-
 .../templates/grants/components/card.html     | 163 ++++++++++--------
 app/grants/templates/grants/index.html        |   4 +
 .../grants/shared/landing_grants.html         |   2 +-
 .../grants/shared/sidebar_search.html         |   8 +-
 app/grants/views.py                           | 112 ++++++++----
 7 files changed, 208 insertions(+), 120 deletions(-)

diff --git a/app/assets/v2/css/sidebar_search.css b/app/assets/v2/css/sidebar_search.css
index 86278af8f92..9ec2a4e425d 100644
--- a/app/assets/v2/css/sidebar_search.css
+++ b/app/assets/v2/css/sidebar_search.css
@@ -92,11 +92,6 @@
 }
 
 @media (max-width: 991.98px) {
-  #sidebar_container form {
-    height: 0;
-    display: none;
-  }
-
   #expand {
     display: inherit;
   }
diff --git a/app/assets/v2/js/grants/index.js b/app/assets/v2/js/grants/index.js
index 2b1cb9427ee..3cbbc44940a 100644
--- a/app/assets/v2/js/grants/index.js
+++ b/app/assets/v2/js/grants/index.js
@@ -1,11 +1,14 @@
 Vue.component('grant-card', {
   delimiters: [ '[[', ']]' ],
-  props: [ 'grant', 'cred', 'token', 'view', 'short'],
+  props: [ 'grant', 'cred', 'token', 'view', 'short', 'show_contributions', 'contributions' ],
   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] || [];
     }
   }
 });
@@ -74,7 +77,9 @@ $(document).ready(() => {
   if (document.getElementById('grants-showcase')) {
     Vue.component('grant-sidebar', {
       name: 'grant-sidebar',
-      props: [ 'filter_grants', 'grant_types', 'type', 'selected_category', 'keyword', 'following', 'set_type', 'idle_grants' ],
+      props: [ 'filter_grants', 'grant_types', 'type', 'selected_category', 'keyword', 'following', 'set_type',
+        'idle_grants', 'show_contributions'
+      ],
       data: function() {
         return {
           search: this.keyword,
@@ -88,8 +93,11 @@ $(document).ready(() => {
         },
         toggleIdle: function(state, event) {
           event.preventDefault;
-          console.log(state)
           this.filter_grants({idle_grants: state});
+        },
+        toggleContributionView: function(state, event) {
+          event.preventDefault;
+          this.filter_grants({show_contributions: state});
         }
       }
     });
@@ -112,13 +120,16 @@ $(document).ready(() => {
         category: document.selected_category,
         credentials: false,
         grant_types: [],
+        contributions: {},
+        show_contributions: document.show_contributions,
         lock: false,
-        view: 'list',
+        view: localStorage.getItem('grants_view') || 'grid',
         shortView: true
       },
       methods: {
         setView: function(mode, event) {
           event.preventDefault();
+          localStorage.setItem('grants_view', mode);
           this.view = mode;
         },
         setCurrentType: function(currentType, q) {
@@ -152,6 +163,9 @@ $(document).ready(() => {
           if (filters.sort !== null && filters.sort !== undefined) {
             this.sort = filters.sort;
           }
+          if (filters.show_contributions !== null && filters.show_contributions !== undefined) {
+            this.show_contributions = filters.show_contributions;
+          }
 
           this.page = 1;
           const query_elements = {};
@@ -169,6 +183,9 @@ $(document).ready(() => {
           if (this.following) {
             query_elements['following'] = this.following;
           }
+          if (this.show_contributions) {
+            query_elements['only_contributions'] = this.show_contributions;
+          }
           if (this.sort !== 'weighted_shuffle') {
             query_elements['sort'] = this.sort;
           }
@@ -202,6 +219,10 @@ $(document).ready(() => {
             base_params['idle'] = this.idle_grants;
           }
 
+          if (this.show_contributions) {
+            base_params['only_contributions'] = this.show_contributions;
+          }
+
           const params = new URLSearchParams(base_params).toString();
           const response = await fetchData(`/grants/cards_info?${params}`);
 
@@ -213,16 +234,15 @@ $(document).ready(() => {
 
           this.credentials = response.credentials;
           this.grant_types = response.grant_types;
+          this.contributions = response.contributions;
 
           this.lock = false;
           return this.grants;
         },
         scroll: async function(event) {
-          let vm = this;
-
-
           const scrollHeight = $(document).height();
           const scrollPos = $(window).height() + $(window).scrollTop();
+          let vm = this;
 
           if (((scrollHeight - 300) >= scrollPos) / scrollHeight == 0) {
             const grants = await vm.fetchGrants(vm.page + 1, true);
diff --git a/app/grants/templates/grants/components/card.html b/app/grants/templates/grants/components/card.html
index 8a44b0e6f82..f3250a36863 100644
--- a/app/grants/templates/grants/components/card.html
+++ b/app/grants/templates/grants/components/card.html
@@ -15,91 +15,103 @@
   along with this program. If not, see <http://www.gnu.org/licenses/>.
 {% endcomment %}
 {% load i18n static humanize grants_extra %}
-<grant-card inline-template :grant="grant" :cred="credentials" :view="view" :short="shortView">
+<grant-card inline-template :grant="grant" :cred="credentials" :view="view" :short="shortView"
+            :contributions='contributions' :show_contributions="show_contributions">
   <template>
-    <div class="grant-item grant-item--list flex-md-row flex-column" v-if="view == 'list'">
-      <div class="grant-item__img col-md-1 d-md-block d-none">
-        <img :src="grant.logo_url" />
-      </div>
-      <div class="grant-item__content col-md-8 px-3">
-        <h2 class="grant-item__title font-subheader">
-          <a :href="grant.details_url">[[ grant.title.slice(0,60) ]][[ grant.title.length > 60 ? '...' : '']]</a>
-        </h2>
-        <div>
-          <p class="text-muted font-smaller-5 mb-0" style="height:2rem;"  data-toggle="tooltip" data-placement="top" title="The last time the grant admin updated the grant." >
-            <i style="width: 14px;" class="fas fa-clock mt-2 mb-0 text-center"></i>
-            Last Update: [[ grant.last_update ?  grant.last_update_natural : `Before Round ${grant.round_num}` ]]
-            <template v-if="cred.is_staff">
-              <span class="ml-3" >
-                <i class="fa fa-lock" aria-hidden="true"></i> SybilScore ™️: [[ grant.sybil_score ]]
-                <span class="mx-2">|</span> RiskScore ™️: [[ grant.weighted_risk_score ]]
-              </span>
-            </template>
-          </p>
-          <div class="grant-item__owner">
-            <div class="d-flex">
-              <span class="grant-item__owner-handle font-smaller-3">{% trans 'by' %}</span>
-              <a :href="grant.admin_profile.url" :data-usercard="grant.admin_profile.handle" target="_blank" rel="noopener noreferrer">
-                <div class="d-flex align-center">
-                  <div class="grant-item__owner-image ml-2">
-                    <img :src="grant.admin_profile.avatar_url || 'https://c.gitcoin.co/avatars/57e79c0ae763bb27095f6b265a1a8bf3/thelostone-mc.svg'">
+    <div v-if="view == 'list'">
+      <div class="grant-item grant-item--list flex-md-row flex-column" >
+        <div class="grant-item__img col-md-1 d-md-block d-none">
+          <img :src="grant.logo_url" />
+        </div>
+        <div class="grant-item__content col-md-8 px-3">
+          <h2 class="grant-item__title font-subheader">
+            <a :href="grant.details_url">[[ grant.title.slice(0,60) ]][[ grant.title.length > 60 ? '...' : '']]</a>
+          </h2>
+          <div>
+            <p class="text-muted font-smaller-5 mb-0" style="height:2rem;"  data-toggle="tooltip" data-placement="top" title="The last time the grant admin updated the grant." >
+              <i style="width: 14px;" class="fas fa-clock mt-2 mb-0 text-center"></i>
+              Last Update: [[ grant.last_update ?  grant.last_update_natural : `Before Round ${grant.round_num}` ]]
+              <template v-if="cred.is_staff">
+                <span class="ml-3" >
+                  <i class="fa fa-lock" aria-hidden="true"></i> SybilScore ™️: [[ grant.sybil_score ]]
+                  <span class="mx-2">|</span> RiskScore ™️: [[ grant.weighted_risk_score ]]
+                </span>
+              </template>
+            </p>
+            <div class="grant-item__owner">
+              <div class="d-flex">
+                <span class="grant-item__owner-handle font-smaller-3">{% trans 'by' %}</span>
+                <a :href="grant.admin_profile.url" :data-usercard="grant.admin_profile.handle" target="_blank" rel="noopener noreferrer">
+                  <div class="d-flex align-center">
+                    <div class="grant-item__owner-image ml-2">
+                      <img :src="grant.admin_profile.avatar_url || 'https://c.gitcoin.co/avatars/57e79c0ae763bb27095f6b265a1a8bf3/thelostone-mc.svg'">
+                    </div>
+                    <div class="grant-item__owner-handle font-smaller-3">
+                      <span class="ml-2">
+                        [[ grant.admin_profile.handle || 'anonymous' ]]
+                      </span>
+                    </div>
                   </div>
-                  <div class="grant-item__owner-handle font-smaller-3">
-                    <span class="ml-2">
-                      [[ grant.admin_profile.handle || 'anonymous' ]]
+                </a>
+              </div>
+              <div class="d-flex match ml-3">
+                <div class="match__round--inline mr-3">
+                  <template v-if="grant.is_clr_eligible">
+                    <span class="font-subheader font-weight-bold amount pt-1 mb-2">
+                      [[ get_clr_prediction(0, 1) || 0 ]] DAI
                     </span>
-                  </div>
+                    <span class="amount mb-2 font-smaller-3">
+                      Final CLR Match
+                    </span>
+                  </template>
+                  <template v-else>
+                    <span class="font-subheader font-weight-bold amount pt-1 mb-2">
+                      [[ grant.monthly_amount_subscribed ]] DAI
+                    </span>
+                    <span class="amount mb-2 font-smaller-3">MONTHLY RECURRING</span>
+                  </template>
                 </div>
-              </a>
-            </div>
-            <div class="d-flex match ml-3">
-              <div class="match__round--inline mr-3">
-                <template v-if="grant.is_clr_eligible">
+                <div>
                   <span class="font-subheader font-weight-bold amount pt-1 mb-2">
-                    [[ get_clr_prediction(0, 1) || 0 ]] DAI
+                    [[ grant.amount_received_in_round ]] DAI
                   </span>
                   <span class="amount mb-2 font-smaller-3">
-                    Final CLR Match
+                    raised from
                   </span>
-                </template>
-                <template v-else>
-                  <span class="font-subheader font-weight-bold amount pt-1 mb-2">
-                    [[ grant.monthly_amount_subscribed ]] DAI
+                  <span class="amount mb-2 font-smaller-3 font-weight-semibold">
+                   [[ grant.positive_round_contributor_count ]] contributors
                   </span>
-                  <span class="amount mb-2 font-smaller-3">MONTHLY RECURRING</span>
-                </template>
-              </div>
-              <div>
-                <span class="font-subheader font-weight-bold amount pt-1 mb-2">
-                  [[ grant.amount_received_in_round ]] DAI
-                </span>
-                <span class="amount mb-2 font-smaller-3">
-                  raised from
-                </span>
-                <span class="amount mb-2 font-smaller-3 font-weight-semibold">
-                 [[ grant.positive_round_contributor_count ]] contributors
-                </span>
+                </div>
               </div>
+              <template v-if="cred.is_authenticated">
+                <button :class="`ml-3 text-decoration-none btn btn-link star-action m-0 p-0 font-smaller-3 gc-text-blue ${!grant.favorite ? 'text-muted' : ''}`" :data-grant="grant.id">
+                  <i :class="`${!grant.favorite ? 'far' : 'fa' } fa-star`" ></i>
+                  <span class="ml-1 font-body">[[ !grant.favorite ? 'Follow' : 'Following' ]]</span>
+                </button>
+              </template>
             </div>
-            <template v-if="cred.is_authenticated">
-              <button :class="`ml-3 text-decoration-none btn btn-link star-action m-0 p-0 font-smaller-3 gc-text-blue ${!grant.favorite ? 'text-muted' : ''}`" :data-grant="grant.id">
-                <i :class="`${!grant.favorite ? 'far' : 'fa' } fa-star`" ></i>
-                <span class="ml-1 font-body">[[ !grant.favorite ? 'Follow' : 'Following' ]]</span>
-              </button>
-            </template>
           </div>
         </div>
-      </div>
-      <div class="col-md-3 col-sm-12 py-4 pr-md-5 pl-md-0 grant-action">
-        <form class="js-addDetailToCart-form" v-if="!grant.is_on_team">
-          {% include 'grants/components/hidden_inputs.html' %}
-          <button class="btn btn-gc-blue cart-btn large font-body font-weight-semibold mt-1 mr-1">
-            + Add to Cart
+        <div class="col-md-3 col-sm-12 py-4 pr-md-5 pl-md-0 grant-action">
+          <form class="js-addDetailToCart-form" v-if="!grant.is_on_team">
+            {% include 'grants/components/hidden_inputs.html' %}
+            <button class="btn btn-gc-blue cart-btn large font-body font-weight-semibold mt-1 mr-1">
+              + Add to Cart
+            </button>
+          </form>
+          <button class="btn btn-gc-grey cart-btn large font-body font-weight-semibold mt-1 mr-1" v-else>
+            <i class="fa fa-stop" aria-hidden="true"></i> Cannot Fund your Own Grant
           </button>
-        </form>
-        <button class="btn btn-gc-grey cart-btn large font-body font-weight-semibold mt-1 mr-1" v-else>
-          <i class="fa fa-stop" aria-hidden="true"></i> Cannot Fund your Own Grant
-        </button>
+        </div>
+      </div>
+      <div style="background-color: #FAFAFA">
+        <div class="clr col-12 mb-3" v-if="show_contributions">
+          <div :class="`match__round pb-1 pt-2 ${ (index + 1) % 2 === 0  ? 'no-bg' : ''}`" v-for="(contribution, index) in getContributions(grant.id)">
+            <p class="col-12 amount mb-2 font-caption font-weight-semibold"> [[ index + 1 ]]. Contributed
+              <span class="font-weight-bold">[[ contribution.amount_per_period ]] [[ contribution.token_symbol ]]</span> at [[ contribution.created_on ]].
+            </p>
+          </div>
+        </div>
       </div>
     </div>
     <div class="grant-item" v-else>
@@ -205,6 +217,15 @@ <h2 class="font-subheader text-center amount pt-4 mb-3" style="color:#069953" v-
               <i class="fa fa-stop" aria-hidden="true"></i> Cannot Fund your Own Grant
             </button>
           </div>
+
+          <div class="clr mb-3" v-if="show_contributions">
+            <div :class="`match__round pb-1 pt-2 ${ (index + 1) % 2 === 0  ? 'no-bg' : ''}`" v-for="(contribution, index) in getContributions(grant.id)">
+              <p class="col-12 amount mb-2 font-caption font-weight-semibold"> [[ index + 1 ]]. Contributed
+                <span class="font-weight-bold">[[ contribution.amount_per_period ]] [[ contribution.token_symbol ]]</span> at [[ contribution.created_on ]].
+              </p>
+            </div>
+          </div>
+
       </div>
     </div>
   </template>
diff --git a/app/grants/templates/grants/index.html b/app/grants/templates/grants/index.html
index 008f01996cd..94801823a47 100644
--- a/app/grants/templates/grants/index.html
+++ b/app/grants/templates/grants/index.html
@@ -34,6 +34,9 @@
       padding: 0;
       max-width: 136px;
     }
+    .no-bg {
+      background: none !important;
+    }
   </style>
 </head>
 
@@ -116,6 +119,7 @@
       document.keyword = "{{ keyword }}";
       document.following = {{ following|yesno:'true,false' }};
       document.idle_grants = {{ idle_grants|yesno:'true,false' }};
+      document.show_contributions = {{ show_contributions|yesno:'true,false' }}
     </script>
 </body>
 <script src="{% static "v2/js/lib/jquery.waypoints.min.js" %}"></script>
diff --git a/app/grants/templates/grants/shared/landing_grants.html b/app/grants/templates/grants/shared/landing_grants.html
index 7fda0f89f4d..0de6aba81b2 100644
--- a/app/grants/templates/grants/shared/landing_grants.html
+++ b/app/grants/templates/grants/shared/landing_grants.html
@@ -3,7 +3,7 @@
     <div class="container-fluid grants-container">
       <div class="container">
         <div class="infinite-container row" @scroll.passive="onScroll($event)" v-if="grants">
-          <div :class="`col-12 ${view == 'grid' ? 'col-md-6 col-xl-4' : ''} mb-4 infinite-item grant-card`" v-for="grant in grants">
+          <div :class="`col-12 ${view == 'grid' ? 'col-md-6 col-xl-4' : ''} mb-4 infinite-item grant-card`" v-for="(grant, id) in grants">
             <a class="text-decoration-none" :href="grant.details_url">
               {% include 'grants/components/card.html' %}
             </a>
diff --git a/app/grants/templates/grants/shared/sidebar_search.html b/app/grants/templates/grants/shared/sidebar_search.html
index 1c465ef354a..65a25e8d1cd 100644
--- a/app/grants/templates/grants/shared/sidebar_search.html
+++ b/app/grants/templates/grants/shared/sidebar_search.html
@@ -15,7 +15,10 @@
     along with this program. If not, see <http://www.gnu.org/licenses/>.
 {% endcomment %}
 {% load i18n static get_categories_from_list %}
-<grant-sidebar :grant_types="grant_types" :filter_grants="filter_grants" :type="current_type" :selected_category="category" :keyword="keyword" :following="following"  :set_type="setCurrentType" :idle_grants="idle_grants" inline-template>
+<grant-sidebar :grant_types="grant_types" :filter_grants="filter_grants" :type="current_type"
+               :selected_category="category" :keyword="keyword" :following="following"
+               :set_type="setCurrentType" :idle_grants="idle_grants" :show_contributions="show_contributions"
+               inline-template>
   <div class="sidebar_search font-body pr-0 pl-4" >
     <div class="search font-caption mb-4" style="width: 110%;">
       <div class="search-area col-12">
@@ -41,6 +44,9 @@
       <span @click="toggleIdle(!idle_grants, $event)" :class="`btn btn-link font-smaller-1 font-weight-semibold text-decoration-none ${ idle_grants ? 'gc-text-blue' : 'text-black'}`">
         <i :class="`${ idle_grants ? 'fas' : 'far'} fa-clock`" ></i> Show Idle grants [[ idle_grants ? 'x' : '']]
       </span>
+      <span @click="toggleContributionView(!show_contributions, $event)" :class="`btn btn-link font-smaller-1 font-weight-semibold text-decoration-none ${ show_contributions ? 'gc-text-blue' : 'text-black'}`">
+        <i :class="`${ show_contributions ? 'fas' : 'far'} fa-donate`" ></i> My contributions [[ show_contributions ? 'x' : '']]
+      </span>
       <div class="col border-top-0">
         <div class="subheading">
           {% trans "Categories" as cats %}{{ cats|upper }}
diff --git a/app/grants/views.py b/app/grants/views.py
index 20b9530914a..b83a5de72b6 100644
--- a/app/grants/views.py
+++ b/app/grants/views.py
@@ -261,8 +261,22 @@ def get_grants(request):
     category = request.GET.get('category', '')
     idle_grants = request.GET.get('idle', '') == 'true'
     following = request.GET.get('following', '') != ''
+    only_contributions = request.GET.get('only_contributions', '') == 'true'
 
-    _grants = build_grants_by_type(request, grant_type, sort, network, keyword, state, category, following, idle_grants)
+
+    filters = {
+        'request': request,
+        'grant_type': grant_type,
+        'sort': sort,
+        'network': network,
+        'keyword': keyword,
+        'state': state,
+        'category': category,
+        'following': following,
+        'idle_grants': idle_grants,
+        'only_contributions': only_contributions
+    }
+    _grants = build_grants_by_type(**filters)
 
     paginator = Paginator(_grants, limit)
     grants = paginator.get_page(page)
@@ -272,53 +286,79 @@ def get_grants(request):
     if grant_stats.exists():
         grant_amount = lazy_round_number(grant_stats.first().val)
 
+    contributions = Contribution.objects.filter(
+        id__in=request.user.profile.grant_contributor.filter(subscription_contribution__success=True).values(
+            'subscription_contribution__id')).prefetch_related('subscription')
+
+    contributions_by_grant = {}
+    for contribution in contributions:
+        grant_id = str(contribution.subscription.grant_id)
+        group = contributions_by_grant.get(grant_id, [])
+
+        group.append({
+            **contribution.normalized_data,
+            'id': contribution.id,
+            'grant_id': contribution.subscription.grant_id,
+            'created_on': contribution.created_on.strftime("%Y-%m-%d %H:%M")
+        })
+
+        contributions_by_grant[grant_id] = group
+
     return JsonResponse({
         'grant_types': get_grant_types(network),
         'current_type': grant_type,
         'category': category,
-        'grants': [{
-            'id': grant.id,
-            'logo_url': grant.logo.url if grant.logo and grant.logo.url else f'v2/images/grants/logos/{grant.id % 3}.png',
-            'details_url': reverse('grants:details', args=(grant.id, grant.slug)),
-            'title': grant.title,
-            'description': grant.description,
-            'last_update': grant.last_update,
-            'last_update_natural': naturaltime(grant.last_update),
-            'sybil_score': grant.sybil_score,
-            'weighted_risk_score': grant.weighted_risk_score,
-            'is_clr_active': grant.is_clr_active,
-            'clr_round_num': grant.clr_round_num,
-            'admin_profile': {
-                'url': grant.admin_profile.url,
-                'handle': grant.admin_profile.handle,
-                'avatar_url': grant.admin_profile.avatar_url
-            },
-            'favorite': grant.favorite(request.user) if request.user.is_authenticated else False,
-            'is_on_team': is_grant_team_member(grant, request.user.profile) if request.user.is_authenticated else False,
-            'amount': grant_amount,
-            'clr_prediction_curve': grant.clr_prediction_curve,
-            'last_clr_calc_date': grant.last_clr_calc_date,
-            'safe_next_clr_calc_date': naturaltime(grant.safe_next_clr_calc_date) if grant.last_clr_calc_date else None,
-            'amount_received_in_round': grant.amount_received_in_round,
-            'positive_round_contributor_count': grant.positive_round_contributor_count,
-            'monthly_amount_subscribed': grant.monthly_amount_subscribed,
-            'is_clr_eligible': grant.is_clr_eligible
-        } for grant in grants],
+        'grants': {
+            str(grant.id): {
+                'id': grant.id,
+                'logo_url': grant.logo.url if grant.logo and grant.logo.url else f'v2/images/grants/logos/{grant.id % 3}.png',
+                'details_url': reverse('grants:details', args=(grant.id, grant.slug)),
+                'title': grant.title,
+                'description': grant.description,
+                'last_update': grant.last_update,
+                'last_update_natural': naturaltime(grant.last_update),
+                'sybil_score': grant.sybil_score,
+                'weighted_risk_score': grant.weighted_risk_score,
+                'is_clr_active': grant.is_clr_active,
+                'clr_round_num': grant.clr_round_num,
+                'admin_profile': {
+                    'url': grant.admin_profile.url,
+                    'handle': grant.admin_profile.handle,
+                    'avatar_url': grant.admin_profile.avatar_url
+                },
+                'favorite': grant.favorite(request.user) if request.user.is_authenticated else False,
+                'is_on_team': is_grant_team_member(grant, request.user.profile) if request.user.is_authenticated else False,
+                'amount': grant_amount,
+                'clr_prediction_curve': grant.clr_prediction_curve,
+                'last_clr_calc_date': grant.last_clr_calc_date,
+                'safe_next_clr_calc_date': naturaltime(grant.safe_next_clr_calc_date) if grant.last_clr_calc_date else None,
+                'amount_received_in_round': grant.amount_received_in_round,
+                'positive_round_contributor_count': grant.positive_round_contributor_count,
+                'monthly_amount_subscribed': grant.monthly_amount_subscribed,
+                'is_clr_eligible': grant.is_clr_eligible
+            } for grant in grants
+        },
         'credentials': {
             'is_staff': request.user.is_staff,
             'is_authenticated': request.user.is_authenticated
-        }
+        },
+        'contributions': contributions_by_grant
     })
 
 
-def build_grants_by_type(request, grant_type='', sort='weighted_shuffle', network='mainnet', keyword='', state='active', category='', following=False, idle_grants=False):
+def build_grants_by_type(request, grant_type='', sort='weighted_shuffle', network='mainnet', keyword='', state='active',
+                         category='', following=False, idle_grants=False, only_contributions=False):
     sort_by_clr_pledge_matching_amount = None
     if 'match_pledge_amount_' in sort:
         sort_by_clr_pledge_matching_amount = int(sort.split('amount_')[1])
 
-    _grants = Grant.objects.filter(
-        network=network, hidden=False
-    ).keyword(keyword)
+    if only_contributions:
+        contributions = request.user.profile.grant_contributor.filter(subscription_contribution__success=True).values('grant_id')
+        _grants = Grant.objects.filter(id__in=Subquery(contributions), hidden=False)
+    else:
+        _grants = Grant.objects.filter(network=network, hidden=False)
+
+    _grants = _grants.keyword(keyword)
 
     _grants = _grants.order_by(sort, 'pk')
     _grants.first()
@@ -419,6 +459,7 @@ def grants_by_grant_type(request, grant_type):
     category = request.GET.get('category', '')
     following = request.GET.get('following', '') == 'true'
     idle_grants = request.GET.get('idle', '') == 'true'
+    only_contributions = request.GET.get('only_contributions', '') == 'true'
 
     if keyword:
         category = ''
@@ -544,7 +585,8 @@ def grants_by_grant_type(request, grant_type):
         'profile': profile,
         'grants_following': grants_following,
         'following': following,
-        'idle_grants': idle_grants
+        'idle_grants': idle_grants,
+        'only_contributions': only_contributions
     }
 
     # log this search, it might be useful for matching purposes down the line

From 8eac59b73ca1de08303b4ec3cf25d9ae95d88fdb Mon Sep 17 00:00:00 2001
From: Miguel Angel G <miguel@gordian.dev>
Date: Wed, 9 Sep 2020 04:00:54 -0500
Subject: [PATCH 4/7] add my grants

---
 app/assets/v2/js/grants/index.js              |  3 ---
 .../templates/grants/components/card.html     |  4 ++--
 .../grants/shared/sidebar_search.html         |  4 ++--
 app/grants/views.py                           | 23 +++++++++++--------
 4 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/app/assets/v2/js/grants/index.js b/app/assets/v2/js/grants/index.js
index 3cbbc44940a..8485ce52730 100644
--- a/app/assets/v2/js/grants/index.js
+++ b/app/assets/v2/js/grants/index.js
@@ -134,9 +134,6 @@ $(document).ready(() => {
         },
         setCurrentType: function(currentType, q) {
           this.current_type = currentType;
-          if ([ 'about', 'stats', 'activity' ].indexOf(currentType) !== -1) {
-            // window.location = `/grants/${currentType}`;
-          }
 
           if (this.current_type === 'all') {
             window.history.pushState('', '', `/grants/?${q || ''}`);
diff --git a/app/grants/templates/grants/components/card.html b/app/grants/templates/grants/components/card.html
index f3250a36863..55050b5e8d8 100644
--- a/app/grants/templates/grants/components/card.html
+++ b/app/grants/templates/grants/components/card.html
@@ -66,9 +66,9 @@ <h2 class="grant-item__title font-subheader">
                   </template>
                   <template v-else>
                     <span class="font-subheader font-weight-bold amount pt-1 mb-2">
-                      [[ grant.monthly_amount_subscribed ]] DAI
+                      [[ grant.amount_received ]] DAI
                     </span>
-                    <span class="amount mb-2 font-smaller-3">MONTHLY RECURRING</span>
+                    <span class="amount mb-2 font-smaller-3">All Time Funding</span>
                   </template>
                 </div>
                 <div>
diff --git a/app/grants/templates/grants/shared/sidebar_search.html b/app/grants/templates/grants/shared/sidebar_search.html
index 65a25e8d1cd..009b4c73ff6 100644
--- a/app/grants/templates/grants/shared/sidebar_search.html
+++ b/app/grants/templates/grants/shared/sidebar_search.html
@@ -99,8 +99,8 @@
           </li>
           {% if github_handle %}
           <li>
-            <a target="new" href='/{{github_handle}}/grants' class="mr-1 px-1 ">
-              My Grants <i class="fas fa-external-link-alt"></i>
+            <a @click="filter_grants({type: 'me', category: ''})"  :class="`mr-1  px-1 ${ type == 'me'? 'selected':''}`">
+              My Grants
             </a>
           </li>
           {% endif %}
diff --git a/app/grants/views.py b/app/grants/views.py
index b83a5de72b6..cbfc528600a 100644
--- a/app/grants/views.py
+++ b/app/grants/views.py
@@ -349,28 +349,31 @@ def get_grants(request):
 def build_grants_by_type(request, grant_type='', sort='weighted_shuffle', network='mainnet', keyword='', state='active',
                          category='', following=False, idle_grants=False, only_contributions=False):
     sort_by_clr_pledge_matching_amount = None
+    profile = request.user.profile
+    three_months_ago = timezone.now() - datetime.timedelta(days=90)
+    _grants = Grant.objects.filter(network=network, hidden=False)
+
     if 'match_pledge_amount_' in sort:
         sort_by_clr_pledge_matching_amount = int(sort.split('amount_')[1])
 
-    if only_contributions:
-        contributions = request.user.profile.grant_contributor.filter(subscription_contribution__success=True).values('grant_id')
-        _grants = Grant.objects.filter(id__in=Subquery(contributions), hidden=False)
-    else:
-        _grants = Grant.objects.filter(network=network, hidden=False)
+    if grant_type == 'me':
+        grants_id = list(profile.grant_teams.all().values_list('pk', flat=True)) + \
+                    list(profile.grant_admin.all().values_list('pk', flat=True))
+        _grants = _grants.filter(id__in=grants_id)
+    elif only_contributions:
+        contributions = profile.grant_contributor.filter(subscription_contribution__success=True).values('grant_id')
+        _grants = _grants.filter(id__in=Subquery(contributions))
 
-    _grants = _grants.keyword(keyword)
-
-    _grants = _grants.order_by(sort, 'pk')
+    _grants = _grants.keyword(keyword).order_by(sort, 'pk')
     _grants.first()
 
-    three_months_ago = timezone.now() - datetime.timedelta(days=90)
     if not idle_grants:
         _grants = _grants.filter(last_update__gt=three_months_ago)
 
     if state == 'active':
         _grants = _grants.active()
 
-    if grant_type != 'all':
+    if grant_type != 'all' and grant_type != 'me':
         _grants = _grants.filter(grant_type__name=grant_type)
 
     if following and request.user.is_authenticated:

From d5931eb3ccb01e94d12622d469b8afedb84ab208 Mon Sep 17 00:00:00 2001
From: Miguel Angel G <miguel@gordian.dev>
Date: Wed, 9 Sep 2020 04:49:48 -0500
Subject: [PATCH 5/7] Minor fix

---
 app/grants/views.py | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/app/grants/views.py b/app/grants/views.py
index cbfc528600a..d48cd937748 100644
--- a/app/grants/views.py
+++ b/app/grants/views.py
@@ -410,11 +410,10 @@ def build_grants_by_type(request, grant_type='', sort='weighted_shuffle', networ
 def get_grant_types(network):
     all_grants_count = 0
     grant_types = []
-    for _grant_type in GrantType.objects.all():
+    active_grants = Grant.objects.filter(network=network, hidden=False, active=True)
 
-        count = Grant.objects.filter(
-            network=network, hidden=False, active=True, grant_type=_grant_type
-        ).count()
+    for _grant_type in GrantType.objects.all():
+        count = active_grants.filter(grant_type=_grant_type).count()
 
         if count > 0:
             all_grants_count += count

From 6ab9f12085b82e13037f86273dd78e0b72abc9f8 Mon Sep 17 00:00:00 2001
From: Miguel Angel G <miguel@gordian.dev>
Date: Wed, 9 Sep 2020 10:41:58 -0500
Subject: [PATCH 6/7] Implement follow in vuejs

---
 app/assets/v2/js/grants/index.js              | 19 +++++++++++++++++--
 app/grants/models.py                          |  2 +-
 .../templates/grants/components/card.html     |  8 ++++----
 .../templates/grants/detail/funding.html      |  2 +-
 4 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/app/assets/v2/js/grants/index.js b/app/assets/v2/js/grants/index.js
index 8485ce52730..074b1d6b212 100644
--- a/app/assets/v2/js/grants/index.js
+++ b/app/assets/v2/js/grants/index.js
@@ -1,6 +1,6 @@
 Vue.component('grant-card', {
   delimiters: [ '[[', ']]' ],
-  props: [ 'grant', 'cred', 'token', 'view', 'short', 'show_contributions', 'contributions' ],
+  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) {
@@ -248,6 +248,21 @@ $(document).ready(() => {
               vm.page = vm.page + 1;
             }
           }
+        },
+        toggleFollowingGrant: async function(grantId, event) {
+          event.preventDefault();
+
+          const favorite_url = `/grants/${grantId}/favorite`;
+          let response = await fetchData(favorite_url, 'POST');
+
+          console.log(favorite_url);
+          if (response.action === 'follow') {
+            this.$set(this.grants[grantId], 'favorite', true);
+          } else {
+            this.$set(this.grants[grantId], 'favorite', false);
+          }
+
+          return true;
         }
       },
       mounted() {
@@ -353,7 +368,7 @@ $('#minimize').on('click', () => {
   });
 });
 
-$(document).on('click', '.star-action', async(e) => {
+$(document).on('click', '.following-action', async(e) => {
   e.preventDefault();
   const element = (e.target.tagName === 'BUTTON') ? $(e.target) : $(e.target.parentElement);
   const grantId = element.data('grant');
diff --git a/app/grants/models.py b/app/grants/models.py
index 659c1e1c762..6d548d3420d 100644
--- a/app/grants/models.py
+++ b/app/grants/models.py
@@ -1335,7 +1335,7 @@ def presave_contrib(sender, instance, **kwargs):
 
 def next_month():
     """Get the next month time."""
-    return (timezone.now() + timedelta(days=30))
+    return localtime(timezone.now() + timedelta(days=30))
 
 
 class CLRMatch(SuperModel):
diff --git a/app/grants/templates/grants/components/card.html b/app/grants/templates/grants/components/card.html
index 55050b5e8d8..418b77074f9 100644
--- a/app/grants/templates/grants/components/card.html
+++ b/app/grants/templates/grants/components/card.html
@@ -16,7 +16,7 @@
 {% endcomment %}
 {% load i18n static humanize grants_extra %}
 <grant-card inline-template :grant="grant" :cred="credentials" :view="view" :short="shortView"
-            :contributions='contributions' :show_contributions="show_contributions">
+            :contributions='contributions' :show_contributions="show_contributions" :toggle_following="toggleFollowingGrant">
   <template>
     <div v-if="view == 'list'">
       <div class="grant-item grant-item--list flex-md-row flex-column" >
@@ -84,7 +84,7 @@ <h2 class="grant-item__title font-subheader">
                 </div>
               </div>
               <template v-if="cred.is_authenticated">
-                <button :class="`ml-3 text-decoration-none btn btn-link star-action m-0 p-0 font-smaller-3 gc-text-blue ${!grant.favorite ? 'text-muted' : ''}`" :data-grant="grant.id">
+                <button @click="toggle_following(grant.id, $event)" :class="`ml-3 text-decoration-none btn btn-link star-action m-0 p-0 font-smaller-3 gc-text-blue ${!grant.favorite ? 'text-muted' : ''}`" :data-grant="grant.id">
                   <i :class="`${!grant.favorite ? 'far' : 'fa' } fa-star`" ></i>
                   <span class="ml-1 font-body">[[ !grant.favorite ? 'Follow' : 'Following' ]]</span>
                 </button>
@@ -156,8 +156,8 @@ <h2 class="grant-item__title font-subheader">
             </a>
           </div>
           <template v-if="cred.is_authenticated">
-            <button :class="`text-decoration-none btn btn-link star-action m-0 p-0 mr-4 mt-3 gc-text-blue ${!grant.favorite ? 'text-muted' : ''}`" :data-grant="grant.id">
-              <i :class="`${!grant.favorite ? 'far' : 'fa' } fa-star`" ></i>
+            <button @click="toggle_following(grant.id, $event)" :class="`text-decoration-none btn btn-link star-action m-0 p-0 mr-4 mt-3 gc-text-blue ${!grant.favorite ? 'text-muted' : ''}`" :data-grant="grant.id">
+              <i :class="`${!grant.favorite ? 'far' : 'fa' } fa-star`" ></i> [[ toggleFollowingGrant ]]
               <span class="ml-1 font-body">[[ !grant.favorite ? 'Follow' : 'Following' ]]</span>
             </button>
           </template>
diff --git a/app/grants/templates/grants/detail/funding.html b/app/grants/templates/grants/detail/funding.html
index 5049b802beb..7dd553de569 100644
--- a/app/grants/templates/grants/detail/funding.html
+++ b/app/grants/templates/grants/detail/funding.html
@@ -59,7 +59,7 @@ <h2 class="font-title font-weight-bold amount pt-1 mb-0">
         <div class="pt-2 mb-1 d-flex justify-content-between">
           {% is_favorite grant profile.user as is_grant_favorite %}
           {% if profile.user.is_authenticated %}
-            <button class="text-decoration-none btn btn-link star-action m-0 p-0 mr-4 gc-text-blue {% if not is_grant_favorite %}text-muted{% endif %}" data-grant="{{ grant.id }}">
+            <button class="text-decoration-none btn btn-link following-action m-0 p-0 mr-4 gc-text-blue {% if not is_grant_favorite %}text-muted{% endif %}" data-grant="{{ grant.id }}">
                 {% if not is_grant_favorite %}
                   <i class="far fa-star" ></i><span class="ml-1 font-body">Follow</span>
                 {% else %}

From 2a27def2744c96806a7dc9952657ccae04d8a743 Mon Sep 17 00:00:00 2001
From: Miguel Angel G <miguel@gordian.dev>
Date: Wed, 9 Sep 2020 12:31:24 -0500
Subject: [PATCH 7/7] remove duplicated ids

---
 .../grants/components/hidden_inputs.html      | 32 +++++++++----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/app/grants/templates/grants/components/hidden_inputs.html b/app/grants/templates/grants/components/hidden_inputs.html
index 4e58375524a..684372a4d1c 100644
--- a/app/grants/templates/grants/components/hidden_inputs.html
+++ b/app/grants/templates/grants/components/hidden_inputs.html
@@ -1,19 +1,19 @@
-<input type="hidden" id="grant_id" name="grant_id" :value="grant.id">
-<input type="hidden" id="grant_slug" name="grant_slug" :value="grant.slug">
-<input type="hidden" id="grant_url" name="grant_url" :value="grant.url">
-<input type="hidden" id="grant_title" name="grant_title" :value="grant.title">
-<input type="hidden" id="grant_contract_version" name="grant_contract_version" :value="grant.contract_version">
-<input type="hidden" id="grant_contract_address" name="grant_contract_address" :value="grant.contract_address">
-<input type="hidden" id="grant_token_symbol" name="grant_token_symbol" :value="grant.token_symbol">
-<input type="hidden" id="grant_admin_address" name="grant_admin_address" :value="grant.admin_address">
-<input type="hidden" id="grant_token_address" name="grant_token_address" :value="grant.token_address">
-<input type="hidden" id="grant_logo" name="grant_logo" :value="grant.logo_url">
-<input type="hidden" id="grant_clr_prediction_curve" name="grant_clr_prediction_curve" :value="grant.clr_prediction_curve">
-<input type="hidden" id="grant_image_css" name="grant_image_css" :value="grant.image_css">
-<input type="hidden" id="is_clr_eligible" name="is_clr_eligible" :value="grant.is_clr_eligible ? grant.is_clr_eligible : ''">
-<input type="hidden" id="grant_donation_amount" name="grant_donation_amount" :value="amount" v-if="grant.amount">
+<input type="hidden" name="grant_id" :value="grant.id">
+<input type="hidden" name="grant_slug" :value="grant.slug">
+<input type="hidden" name="grant_url" :value="grant.url">
+<input type="hidden" name="grant_title" :value="grant.title">
+<input type="hidden" name="grant_contract_version" :value="grant.contract_version">
+<input type="hidden" name="grant_contract_address" :value="grant.contract_address">
+<input type="hidden" name="grant_token_symbol" :value="grant.token_symbol">
+<input type="hidden" name="grant_admin_address" :value="grant.admin_address">
+<input type="hidden" name="grant_token_address" :value="grant.token_address">
+<input type="hidden" name="grant_logo" :value="grant.logo_url">
+<input type="hidden" name="grant_clr_prediction_curve" :value="grant.clr_prediction_curve">
+<input type="hidden" name="grant_image_css" :value="grant.image_css">
+<input type="hidden" name="is_clr_eligible" :value="grant.is_clr_eligible ? grant.is_clr_eligible : ''">
+<input type="hidden" name="grant_donation_amount" :value="amount" v-if="grant.amount">
 
 <template v-if="token">
-  <input type="hidden" id="grant_donation_currency" name="grant_donation_currency" :value="token.symbol">
-  <input type="hidden" id="token_local_id" name="token_local_id" :value="token.id">
+  <input type="hidden" name="grant_donation_currency" :value="token.symbol">
+  <input type="hidden" name="token_local_id" :value="token.id">
 </template>