From b02b8d6d654dfb35e9277284e1d2dee2e5ddba1e Mon Sep 17 00:00:00 2001
From: Aditya Anand M C <aditya.anandmc@gmail.com>
Date: Thu, 30 Sep 2021 06:12:40 +0530
Subject: [PATCH 1/5] add claim date fields

---
 app/grants/models/grant.py | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/grants/models/grant.py b/app/grants/models/grant.py
index ec8ab8fe42a..647cf0e072e 100644
--- a/app/grants/models/grant.py
+++ b/app/grants/models/grant.py
@@ -60,6 +60,8 @@ class Meta:
     is_active = models.BooleanField(default=False, db_index=True, help_text="Is CLR Round currently active")
     start_date = models.DateTimeField(help_text="CLR Round Start Date")
     end_date = models.DateTimeField(help_text="CLR Round End Date")
+    claim_start_date = models.DateTimeField(help_text="CLR Claim Start Date", null=True)
+    claim_end_date = models.DateTimeField(help_text="CLR Claim Start Date", null=True)
     grant_filters = JSONField(
         default=dict,
         null=True, blank=True,

From 2a00fe1e19bde6a967be39ab6798c195ea026d4e Mon Sep 17 00:00:00 2001
From: Aditya Anand M C <aditya.anandmc@gmail.com>
Date: Fri, 1 Oct 2021 14:47:32 +0530
Subject: [PATCH 2/5] round / claim status  on CLR page

---
 app/assets/v2/js/grants/index.js              | 185 +++------
 app/grants/models/grant.py                    |   4 +-
 app/grants/templates/grants/explorer.html     | 361 ++++++++++--------
 .../grants/shared/landing_qf_active.html      |   9 -
 app/grants/views.py                           |   6 +
 5 files changed, 265 insertions(+), 300 deletions(-)

diff --git a/app/assets/v2/js/grants/index.js b/app/assets/v2/js/grants/index.js
index f1e9f9685c4..f6f23e56af0 100644
--- a/app/assets/v2/js/grants/index.js
+++ b/app/assets/v2/js/grants/index.js
@@ -21,76 +21,9 @@ $(document).ready(() => {
 
   });
 
-  // toggleStyle(document.current_style);
 });
 
-// Vue.component('grant-sidebar', {
-//   props: [
-//     'filter_grants', 'grant_types', 'type', 'selected_category', 'keyword', 'following', 'set_type',
-//     'idle_grants', 'show_contributions', 'query_params', 'round_num', 'sub_round_slug', 'customer_name',
-//     'featured'
-//   ],
-//   data: function() {
-//     return {
-//       search: this.keyword,
-//       show_filters: false,
-//       handle: document.contxt.github_handle
-//     };
-//   },
-//   methods: {
-//     toggleFollowing: function(state, event) {
-//       event.preventDefault;
-//       this.filter_grants({following: state});
-//     },
-//     toggleIdle: function(state, event) {
-//       event.preventDefault;
-//       this.filter_grants({idle_grants: state});
-//     },
-//     toggleContributionView: function(state, event) {
-//       event.preventDefault;
-//       this.filter_grants({show_contributions: state});
-//     },
-//     toggleMyGrants: function(state, event) {
-//       let me = state ? 'me' : 'all';
-
-//       event.preventDefault;
-//       this.filter_grants({type: me, category: '', keyword: ''});
-//     },
-//     isMobileDevice: function() {
-//       return window.innerWidth < 576;
-//     },
-//     toggleMyCollections: function(state, event) {
-//       let me = state ? {type: 'collections', keyword: this.handle} : {type: 'all', keyword: ''};
-
-//       this.filter_grants(me);
-
-//       this.search = me.keyword;
-//     },
-//     filterLink: function(params) {
-
-//       return this.filter_grants(params);
-//     },
-//     searchKeyword: function() {
-//       if (this.timeout) {
-//         clearTimeout(this.timeout);
-//       }
-
-//       this.timeout = setTimeout(() => {
-//         this.filter_grants({keyword: this.search});
-//       }, 1000);
-//     },
-//     onResize: function() {
-//       if (!this.isMobileDevice() && this.show_filters !== null) {
-//         this.show_filters = null;
-//       } else if (this.isMobileDevice() && this.show_filters === null) {
-//         this.show_filters = false;
-//       }
-//     }
-//   },
-//   mounted() {
-//     window.addEventListener('resize', this.onResize);
-//   }
-// });
+
 if (document.getElementById('grants-showcase')) {
   const baseParams = {
     page: 1,
@@ -98,7 +31,6 @@ if (document.getElementById('grants-showcase')) {
     me: false,
     sort_option: 'weighted_shuffle',
     network: 'mainnet',
-    // keyword: this.keyword,
     state: 'active',
     profile: false,
     sub_round_slug: false,
@@ -108,7 +40,6 @@ if (document.getElementById('grants-showcase')) {
     grant_tags: [],
     tenants: [],
     idle: true
-
   };
 
   const grantRegions = [
@@ -136,25 +67,6 @@ if (document.getElementById('grants-showcase')) {
     {'name': 'ALGORAND', 'label': 'Algorand'}
   ];
 
-  // const grant_tags = [
-  //   {'name': 'ETH', 'label': 'Eth'},
-  //   {'name': 'ZCASH', 'label': 'Zcash'},
-  //   {'name': 'ZIL', 'label': 'Zil'},
-  //   {'name': 'CELO', 'label': 'Celo'},
-  //   {'name': 'POLKADOT', 'label': 'Polkadot'},
-  //   {'name': 'HARMONY', 'label': 'Harmony'},
-  //   {'name': 'KUSAMA', 'label': 'Kusama'},
-  //   {'name': 'BINANCE', 'label': 'Binance'},
-  //   {'name': 'RSK', 'label': 'Rsk'},
-  //   {'name': 'ALGORAND', 'label': 'Algorand'}
-  // ];
-
-
-  // let sort = getParam('sort');
-
-  // if (!sort) {
-  //   sort = 'weighted_shuffle';
-  // }
 
   var appGrants = new Vue({
     delimiters: [ '[[', ']]' ],
@@ -190,10 +102,6 @@ if (document.getElementById('grants-showcase')) {
       sub_round_slug: false,
       cart_lock: false,
       collection_id: document.collection_id,
-      // round_num: document.round_num,
-      // clr_round_pk: document.clr_round_pk,
-      // sub_round_slug: document.sub_round_slug,
-      // customer_name: document.customer_name,
       activeCollection: null,
       grantsNumPages,
       grantsHasNext,
@@ -218,18 +126,6 @@ if (document.getElementById('grants-showcase')) {
           return;
         }
 
-        // let banner;
-
-        // if (style.bg) {
-        //   banner = `url("${style.bg }") center top / ${style.size || ''} ${style.color || ''} no-repeat`;
-        // } else {
-        //   banner = `url("${ style.banner_image }") center  no-repeat`;
-        // }
-        // $('#grant-hero-img').css('background', banner);
-        // if (style.background_image) {
-        //   $('#grant-background-image-mount-point').css('background-image', style.background_image);
-        // }
-
         if (style.inline_css) {
           $('.page-styles').last().text(style.inline_css);
         } else {
@@ -341,7 +237,6 @@ if (document.getElementById('grants-showcase')) {
 
         getGrants.grants.forEach(function(item) {
           vm.grants.unshift(item);
-
         });
 
 
@@ -375,22 +270,7 @@ if (document.getElementById('grants-showcase')) {
           vm.grants.push(item);
         });
 
-        // if (page) {
-        //   vm.fetchedPages = [page];
-        // } else {
-        // }
         vm.fetchedPages = [ ...vm.fetchedPages, Number(vm.params.page) ];
-        // if (this.params.collection_id) {
-        //   if (getGrants.collections.length > 0) {
-        //     this.activeCollection = getGrants.collections[0];
-        //   }
-        // } else if (this.current_type === 'collections') {
-        //   getGrants.collections.forEach(function(item) {
-        //     vm.collections.push(item);
-        //   });
-        // } else {
-        //   vm.collections = getGrants.collections;
-        // }
 
         vm.credentials = getGrants.credentials;
         vm.contributions = getGrants.contributions;
@@ -428,7 +308,6 @@ if (document.getElementById('grants-showcase')) {
         vm.changeQuery({tab: vm.tabSelected});
         vm.unobserveFilter();
         vm.params.profile = false;
-        // vm.updateUrlParams();
 
         if (vm.tabSelected === 'collections') {
           this.fetchCollections();
@@ -465,8 +344,6 @@ if (document.getElementById('grants-showcase')) {
         vm.loadingCollections = true;
         await vm.updateUrlParams();
 
-        // vm.updateUrlParams();
-
         let url = `/api/v0.1/grants_collections/?${(vm.params.profile ? 'profile=' + vm.params.profile : '')}`;
 
         if (vm.collectionsPage) {
@@ -619,9 +496,67 @@ if (document.getElementById('grants-showcase')) {
         if (!vm.clrData.results)
           return;
 
-        return vm.clrData?.results.find(item => {
+        const currentCLR = vm.clrData?.results.find(item => {
           return item.sub_round_slug == vm.params?.sub_round_slug;
         });
+
+        function getMDT(date) {
+          if (!date)
+            return;
+          return moment(date).tz('America/Denver').format('MMMM D (hA) z');
+        }
+
+        function getRoundStatus(start_date, end_date, claim_start_date, claim_end_date) {
+          now = moment().tz('America/Denver');
+          start_date = moment(start_date).tz('America/Denver');
+          end_date = moment(end_date).tz('America/Denver');
+
+          if (claim_start_date && claim_end_date) {
+            claim_start_date = moment(claim_start_date).tz('America/Denver');
+            claim_end_date = moment(claim_end_date).tz('America/Denver');
+          }
+
+          console.log(now);
+          console.log(claim_start_date);
+          console.log(claim_end_date);
+
+          if (now.isBefore(start_date)) {
+            // round is yet to start
+            return 'proposed';
+          } else if (now.isBetween(start_date, end_date)) {
+            // round is currently live
+            return 'live';
+          } else if (
+            claim_start_date && claim_end_date &&
+            now.isBetween(claim_start_date, claim_end_date)
+          ) {
+            // claim period is live
+            return 'claim';
+          }
+          // round has ended
+          return 'ended';
+          
+        }
+
+        if (currentCLR) {
+          const formatted_dates = {
+            start_date: getMDT(currentCLR?.start_date),
+            end_date: getMDT(currentCLR?.end_date),
+            claim_start_date: getMDT(currentCLR?.claim_start_date),
+            claim_end_date: getMDT(currentCLR?.claim_end_date),
+            status: getRoundStatus(
+              currentCLR?.start_date,
+              currentCLR?.end_date,
+              currentCLR?.claim_start_date,
+              currentCLR?.claim_end_date
+            )
+          };
+
+          currentCLR.formatted_dates = formatted_dates;
+        }
+
+        return currentCLR;
+
       },
       isGrantExplorer() {
         return (this.activePage == 'grants_explorer');
diff --git a/app/grants/models/grant.py b/app/grants/models/grant.py
index 647cf0e072e..a03c05ac676 100644
--- a/app/grants/models/grant.py
+++ b/app/grants/models/grant.py
@@ -60,8 +60,8 @@ class Meta:
     is_active = models.BooleanField(default=False, db_index=True, help_text="Is CLR Round currently active")
     start_date = models.DateTimeField(help_text="CLR Round Start Date")
     end_date = models.DateTimeField(help_text="CLR Round End Date")
-    claim_start_date = models.DateTimeField(help_text="CLR Claim Start Date", null=True)
-    claim_end_date = models.DateTimeField(help_text="CLR Claim Start Date", null=True)
+    claim_start_date = models.DateTimeField(help_text="CLR Claim Start Date", blank=True, null=True)
+    claim_end_date = models.DateTimeField(help_text="CLR Claim End Date", blank=True, null=True)
     grant_filters = JSONField(
         default=dict,
         null=True, blank=True,
diff --git a/app/grants/templates/grants/explorer.html b/app/grants/templates/grants/explorer.html
index 7f395965a6a..bcf741a2eb6 100644
--- a/app/grants/templates/grants/explorer.html
+++ b/app/grants/templates/grants/explorer.html
@@ -12,7 +12,7 @@
 along with this program. If not, see
 <http: //www.gnu.org/licenses />.
 {% endcomment %}
-{% load humanize static i18n bundle %}
+{% load humanize static i18n tz bundle %}
 <!DOCTYPE html>
 <html lang="en">
 
@@ -25,10 +25,13 @@
     <link rel="stylesheet" type="text/x-scss" href={% static "v2/scss/grants/card.scss" %} />
     <link rel="stylesheet" type="text/x-scss" href={% static "v2/scss/grants/collection.scss" %} />
     <link rel="stylesheet" type="text/x-scss" href={% static "v2/scss/activity_stream.scss" %} />
-
   {% endbundle %}
   <style>
 
+    .countdown-color {
+      color: var(--gc-blue-hover);
+    }
+
     #sidebar-quick-view header.b-sidebar-header > strong {
       font-weight: normal;
       font-family: 'Miriam Libre';
@@ -100,169 +103,205 @@
               </button>
             </div>
             <div
-                ref="filterNav"
-                id="filterNav"
-                class="position-sticky top-0 bg-white py-2 mt-2 d-flex flex-column-reverse flex-md-row justify-content-between"
-                :style="`z-index: 1; top: -1px; margin-top: 1px; ${sticky_active ? 'box-shadow: 0px 8px 10px -14px rgba(0, 0, 0, 0.5);' : ''}`"
-              >
-                <div class="flex-lg-shrink-0 mt-n2">
-
-                  <span v-if="currentCLR?.display_text" class="align-middle border-grey border-right-1 d-inline-block h-100 mt-2 mr-2 pr-2 pt-1" style="max-height: 32px;">
-                    [[currentCLR?.display_text]]
-                  </span>
+              ref="filterNav"
+              id="filterNav"
+              class="position-sticky top-0 bg-white py-2 mt-2 d-flex flex-column-reverse flex-md-row justify-content-between"
+              :style="`z-index: 1; top: -1px; margin-top: 1px; ${sticky_active ? 'box-shadow: 0px 8px 10px -14px rgba(0, 0, 0, 0.5);' : ''}`"
+            >
+              <div class="flex-lg-shrink-0 mt-n2">
+
+                <span v-if="currentCLR?.display_text" class="align-middle border-grey border-right-1 d-inline-block h-100 mt-2 mr-2 pr-2 pt-1" style="max-height: 32px;">
+                  [[currentCLR?.display_text]]
+                </span>
+
+                <!-- GRANT TYPE FILTERS -->
+                <b-dropdown @hide="fetchGrants(1)" ref="grantFlitersDropdown" size="sm" menu-class="scroll-menu p-0 mt-1" variant="outline-gc-grey" toggle-class="rounded-pill mt-2" no-caret no-flip v-if="grant_types.length">
+                  <template #button-content>
+                    Categories <span v-if="params.grant_types.length"> • [[params.grant_types.length]]</span>
+                  </template>
+                  <b-dropdown-form>
+                    <b-form-checkbox-group id="checkbox-group-types" v-model.lazy="params.grant_types" aria-describedby="ariaDescribedby" name="grant_types">
+                      <template v-for="grant_type in grant_types" v-if="grant_type.is_visible">
+                        <b-form-checkbox class="mb-3" :value="grant_type.keyword">[[grant_type.label]]</b-form-checkbox>
+                      </template>
+                    </b-form-checkbox-group>
+                    <b-dropdown-divider></b-dropdown-divider>
+                    <div>
+                      <b-button variant="link" size="sm" :class="{'disabled' : !params.grant_types.length}" @click="params.grant_types=[], closeDropdown('grantFlitersDropdown')">Clear</b-button>
+                      <b-button variant="primary" size="sm" @click="closeDropdown('grantFlitersDropdown')">Apply</b-button>
+                    </div>
+                  </b-dropdown-form>
+                </b-dropdown>
+
+                <!-- TAG FILTERS -->
+                <b-dropdown @hide="fetchGrants(1)" ref="tagFiltersDropdown" size="sm" menu-class="scroll-menu p-0 mt-1" variant="outline-gc-grey" toggle-class="rounded-pill mt-2" no-caret no-flip>
+                  <template #button-content>
+                    Tags <span v-if="params.grant_tags?.length"> • [[params.grant_tags.length]]</span>
+                  </template>
+                  <b-dropdown-form>
+                    <b-form-checkbox-group id="checkbox-group-tags" v-model="params.grant_tags" aria-describedby="ariaDescribedby" name="grant_tags">
+                      <template v-for="tag in tagsOptions">
+                        <b-form-checkbox class="mb-3" :value="tag.name">[[tag.name]]</b-form-checkbox>
+                      </template>
+                    </b-form-checkbox-group>
+                    <b-dropdown-divider></b-dropdown-divider>
+                    <div>
+                      <b-button variant="link" size="sm" :class="{'disabled' : !params.grant_tags.length}" @click="params.grant_tags=[], closeDropdown('tagFiltersDropdown')">Clear</b-button>
+                      <b-button variant="primary" size="sm" @click="closeDropdown('tagFiltersDropdown')">Apply</b-button>
+                    </div>
+                  </b-dropdown-form>
+                </b-dropdown>
+
+                <!-- REGION FILTERS -->
+                <b-dropdown @hide="fetchGrants(1)" ref="regionFiltersDropdown" size="sm" menu-class="scroll-menu p-0 mt-1" variant="outline-gc-grey" toggle-class="rounded-pill mt-2" no-caret no-flip>
+                  <template #button-content>
+                    Regions <span v-if="params.grant_regions?.length"> • [[params.grant_regions.length]]</span>
+                  </template>
+                  <b-dropdown-form>
+                    <b-form-checkbox-group id="checkbox-group-regions" v-model="params.grant_regions" aria-describedby="ariaDescribedby" name="grant_regions" stacked>
+                      <template v-for="region in grantRegions">
+                        <b-form-checkbox class="mb-3" :value="region.name">[[region.label]]</b-form-checkbox>
+                      </template>
+                    </b-form-checkbox-group>
+                    <b-dropdown-divider></b-dropdown-divider>
+                    <div>
+                      <b-button variant="link" size="sm" :class="{'disabled' : !params.grant_regions.length}" @click="params.grant_regions=[], closeDropdown('regionFiltersDropdown')">Clear</b-button>
+                      <b-button variant="primary" size="sm" @click="closeDropdown('regionFiltersDropdown')">Apply</b-button>
+                    </div>
+                  </b-dropdown-form>
+                </b-dropdown>
+
+                <!-- TENANT FILTERS -->
+                <b-dropdown @hide="fetchGrants(1)" ref="tenantFiltersDropdown" size="sm" menu-class="scroll-menu p-0 mt-1" variant="outline-gc-grey" toggle-class="rounded-pill mt-2" no-caret no-flip>
+                  <template #button-content>
+                    Blockchains <span v-if="params.tenants?.length"> • [[params.tenants.length]]</span>
+                  </template>
+                  <b-dropdown-form>
+                    <b-form-checkbox-group id="checkbox-group-tenants" v-model="params.tenants" aria-describedby="ariaDescribedby" name="tenants" stacked>
+                      <template v-for="tenant in grantTenants">
+                        <b-form-checkbox class="mb-3" :value="tenant.name">[[tenant.label]]</b-form-checkbox>
+                      </template>
+                    </b-form-checkbox-group>
+                    <b-dropdown-divider></b-dropdown-divider>
+                    <div>
+                      <b-button variant="link" size="sm" :class="{'disabled' : !params.tenants.length}" @click="params.tenants=[], closeDropdown('tenantFiltersDropdown')">Clear</b-button>
+                      <b-button variant="primary" size="sm" @click="closeDropdown('tenantFiltersDropdown')">Apply</b-button>
+                    </div>
+                  </b-dropdown-form>
+                </b-dropdown>
+
+                <!-- MORE FILTERS -->
+                <b-dropdown @hide="fetchGrants(1)" ref="moreFiltersDropdown" size="sm" menu-class="mt-1" variant="outline-gc-grey" toggle-class="rounded-pill mt-2" no-caret no-flip>
+                  <template #button-content>
+                    More Filters
+                    <span v-if="params.idle || params.only_contributions || params.me || params.following">
+                    • [[ [params.idle, params.only_contributions, params.me, params.following].filter((v)=>v).length ]]</span>
+                  </template>
+                  <b-dropdown-form>
+                    <div class="pt-2">
+                      <b-form-checkbox id="idle" v-model="params.idle" name="idle"> Show Idle Grants</b-form-checkbox>
+                      <b-dropdown-text class="font-smaller-4"style="width: 230px;">Grants not updated in 3 months</b-dropdown-text>
+                    </div>
+                    <b-dropdown-divider></b-dropdown-divider>
+                    <div>
+                      <b-dropdown-header id="dropdown-header-shortcuts">
+                        My Shortcuts
+                      </b-dropdown-header>
+                      <b-form-checkbox id="only_contributions" v-model="params.only_contributions" name="only_contributions">My Contributions</b-form-checkbox>
+                      <b-dropdown-text class="font-smaller-4 pb-2" style="width: 230px;">Grants I’ve contributed to</b-dropdown-text>
+                      <b-form-checkbox id="me" v-model="params.me" name="me"> My Grants</b-form-checkbox>
+                      <b-dropdown-text class="font-smaller-4 pb-2" style="width: 230px;">Grants I’ve created</b-dropdown-text>
+                      <b-form-checkbox id="following" v-model="params.following" name="following"> Following</b-form-checkbox>
+                      <b-dropdown-text class="font-smaller-4 pb-2" style="width: 230px;">Grants I’ve followed</b-dropdown-text>
+                    </div>
+                    <b-dropdown-divider></b-dropdown-divider>
+                    <div>
+                      <b-button variant="link" size="sm" @click="params.idle=false,params.only_contributions=false, params.me=false, params.following=false, closeDropdown('moreFiltersDropdown')">Clear</b-button>
+                      <b-button variant="primary" size="sm" @click="closeDropdown('moreFiltersDropdown')">Apply</b-button>
+                    </div>
+                  </b-dropdown-form>
+                </b-dropdown>
 
-                  <!-- GRANT TYPE FILTERS -->
-                  <b-dropdown @hide="fetchGrants(1)" ref="grantFlitersDropdown" size="sm" menu-class="scroll-menu p-0 mt-1" variant="outline-gc-grey" toggle-class="rounded-pill mt-2" no-caret no-flip v-if="grant_types.length">
-                    <template #button-content>
-                      Categories <span v-if="params.grant_types.length"> • [[params.grant_types.length]]</span>
-                    </template>
-                    <b-dropdown-form>
-                      <b-form-checkbox-group id="checkbox-group-types" v-model.lazy="params.grant_types" aria-describedby="ariaDescribedby" name="grant_types">
-                        <template v-for="grant_type in grant_types" v-if="grant_type.is_visible">
-                          <b-form-checkbox class="mb-3" :value="grant_type.keyword">[[grant_type.label]]</b-form-checkbox>
-                        </template>
-                      </b-form-checkbox-group>
-                      <b-dropdown-divider></b-dropdown-divider>
-                      <div>
-                        <b-button variant="link" size="sm" :class="{'disabled' : !params.grant_types.length}" @click="params.grant_types=[], closeDropdown('grantFlitersDropdown')">Clear</b-button>
-                        <b-button variant="primary" size="sm" @click="closeDropdown('grantFlitersDropdown')">Apply</b-button>
-                      </div>
-                    </b-dropdown-form>
-                  </b-dropdown>
-
-                  <!-- TAG FILTERS -->
-                  <b-dropdown @hide="fetchGrants(1)" ref="tagFiltersDropdown" size="sm" menu-class="scroll-menu p-0 mt-1" variant="outline-gc-grey" toggle-class="rounded-pill mt-2" no-caret no-flip>
-                    <template #button-content>
-                      Tags <span v-if="params.grant_tags?.length"> • [[params.grant_tags.length]]</span>
-                    </template>
-                    <b-dropdown-form>
-                      <!-- <v-select id="team_members" label="name" :close-on-select="false" @search="tagSearch"  :options="tagsOptions" :reduce="tag => tag.name" placeholder="Add your team Gitcoin usernames" v-model="params.grant_tags" multiple>
-                        <template slot="no-options">
-                          type to search Users..
-                        </template>
-                        <template slot="option" slot-scope="option">
-                          <div class="d-flex align-items-baseline">
-                            <div>[[ option.name ]]</div>
-                          </div>
-                        </template>
-                        <template slot="selected-option" slot-scope="option">
-                          <div class="d-flex align-items-center">
-                            <div>[[ option.name ]]</div>
-                          </div>
-                        </template>
-                      </v-select> -->
-                      <b-form-checkbox-group id="checkbox-group-tags" v-model="params.grant_tags" aria-describedby="ariaDescribedby" name="grant_tags">
-                        <template v-for="tag in tagsOptions">
-                          <b-form-checkbox class="mb-3" :value="tag.name">[[tag.name]]</b-form-checkbox>
-                        </template>
-                      </b-form-checkbox-group>
-                      <b-dropdown-divider></b-dropdown-divider>
-                      <div>
-                        <b-button variant="link" size="sm" :class="{'disabled' : !params.grant_tags.length}" @click="params.grant_tags=[], closeDropdown('tagFiltersDropdown')">Clear</b-button>
-                        <b-button variant="primary" size="sm" @click="closeDropdown('tagFiltersDropdown')">Apply</b-button>
-                      </div>
-                    </b-dropdown-form>
-                  </b-dropdown>
-
-                  <!-- REGION FILTERS -->
-                  <b-dropdown @hide="fetchGrants(1)" ref="regionFiltersDropdown" size="sm" menu-class="scroll-menu p-0 mt-1" variant="outline-gc-grey" toggle-class="rounded-pill mt-2" no-caret no-flip>
-                    <template #button-content>
-                      Regions <span v-if="params.grant_regions?.length"> • [[params.grant_regions.length]]</span>
-                    </template>
-                    <b-dropdown-form>
-                      <b-form-checkbox-group id="checkbox-group-regions" v-model="params.grant_regions" aria-describedby="ariaDescribedby" name="grant_regions" stacked>
-                        <template v-for="region in grantRegions">
-                          <b-form-checkbox class="mb-3" :value="region.name">[[region.label]]</b-form-checkbox>
-                        </template>
-                      </b-form-checkbox-group>
-                      <b-dropdown-divider></b-dropdown-divider>
-                      <div>
-                        <b-button variant="link" size="sm" :class="{'disabled' : !params.grant_regions.length}" @click="params.grant_regions=[], closeDropdown('regionFiltersDropdown')">Clear</b-button>
-                        <b-button variant="primary" size="sm" @click="closeDropdown('regionFiltersDropdown')">Apply</b-button>
-                      </div>
-                    </b-dropdown-form>
-                  </b-dropdown>
-
-                  <!-- TENANT FILTERS -->
-                  <b-dropdown @hide="fetchGrants(1)" ref="tenantFiltersDropdown" size="sm" menu-class="scroll-menu p-0 mt-1" variant="outline-gc-grey" toggle-class="rounded-pill mt-2" no-caret no-flip>
-                    <template #button-content>
-                      Blockchains <span v-if="params.tenants?.length"> • [[params.tenants.length]]</span>
-                    </template>
-                    <b-dropdown-form>
-                      <b-form-checkbox-group id="checkbox-group-tenants" v-model="params.tenants" aria-describedby="ariaDescribedby" name="tenants" stacked>
-                        <template v-for="tenant in grantTenants">
-                          <b-form-checkbox class="mb-3" :value="tenant.name">[[tenant.label]]</b-form-checkbox>
-                        </template>
-                      </b-form-checkbox-group>
-                      <b-dropdown-divider></b-dropdown-divider>
-                      <div>
-                        <b-button variant="link" size="sm" :class="{'disabled' : !params.tenants.length}" @click="params.tenants=[], closeDropdown('tenantFiltersDropdown')">Clear</b-button>
-                        <b-button variant="primary" size="sm" @click="closeDropdown('tenantFiltersDropdown')">Apply</b-button>
-                      </div>
-                    </b-dropdown-form>
-                  </b-dropdown>
-
-                  <!-- MORE FILTERS -->
-                  <b-dropdown @hide="fetchGrants(1)" ref="moreFiltersDropdown" size="sm" menu-class="mt-1" variant="outline-gc-grey" toggle-class="rounded-pill mt-2" no-caret no-flip>
-                    <template #button-content>
-                      More Filters
-                      <span v-if="params.idle || params.only_contributions || params.me || params.following">
-                      • [[ [params.idle, params.only_contributions, params.me, params.following].filter((v)=>v).length ]]</span>
-                    </template>
-                    <b-dropdown-form>
-                      <div class="pt-2">
-                        <b-form-checkbox id="idle" v-model="params.idle" name="idle"> Show Idle Grants</b-form-checkbox>
-                        <b-dropdown-text class="font-smaller-4"style="width: 230px;">Grants not updated in 3 months</b-dropdown-text>
-                      </div>
-                      <b-dropdown-divider></b-dropdown-divider>
-                      <div>
-                        <b-dropdown-header id="dropdown-header-shortcuts">
-                          My Shortcuts
-                        </b-dropdown-header>
-                        <b-form-checkbox id="only_contributions" v-model="params.only_contributions" name="only_contributions">My Contributions</b-form-checkbox>
-                        <b-dropdown-text class="font-smaller-4 pb-2" style="width: 230px;">Grants I’ve contributed to</b-dropdown-text>
-                        <b-form-checkbox id="me" v-model="params.me" name="me"> My Grants</b-form-checkbox>
-                        <b-dropdown-text class="font-smaller-4 pb-2" style="width: 230px;">Grants I’ve created</b-dropdown-text>
-                        <b-form-checkbox id="following" v-model="params.following" name="following"> Following</b-form-checkbox>
-                        <b-dropdown-text class="font-smaller-4 pb-2" style="width: 230px;">Grants I’ve followed</b-dropdown-text>
-                      </div>
-                      <b-dropdown-divider></b-dropdown-divider>
-                      <div>
-                        <b-button variant="link" size="sm" @click="params.idle=false,params.only_contributions=false, params.me=false, params.following=false, closeDropdown('moreFiltersDropdown')">Clear</b-button>
-                        <b-button variant="primary" size="sm" @click="closeDropdown('moreFiltersDropdown')">Apply</b-button>
-                      </div>
-                    </b-dropdown-form>
-                  </b-dropdown>
-
-                  <button class="btn btn-sm mt-2" @click="resetFilters()"> <i class="fal fa-times mr-1"></i> Clear</button>
-                </div>
+                <button class="btn btn-sm mt-2" @click="resetFilters()"> <i class="fal fa-times mr-1"></i> Clear</button>
+              </div>
 
-                <!-- SEARCH BAR AND CART -->
-                <div class="flex-basis-md-25 flex-nowrap d-flex bg-white" :class="{'position-md-absolute w-100': searchVisible}">
-                  <button class="btn" v-show="searchVisible" @click="searchVisible=!searchVisible"><i class="fas fa-chevron-left"></i></button>
-                  <i
-                    class="far fa-fw fa-search font-smaller-3 position-absolute text-grey-300"
-                    :style="(searchVisible ? 'top: 10px;margin-left: 7px;left: 34px;' : 'top: 19px; margin-left: 7px;')"
-                  ></i>
-                  <input class="form-control form-control-sm rounded-pill pl-4" placeholder="Search..." type="search" @click="searchVisible=!searchVisible" v-model="params.keyword" @input="changeQuery({page: 1})" @keyup.enter="changeQuery({page: 1})">
-                  <div class="navCart dropdown gc-cart" v-if="!searchVisible && sticky_active">
-                    <a href="" class="gc-cart__icon d-block" role="button" @click="$refs.navCart.init()"
-                      data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="padding: 0.3rem 1rem;">
-                      <i class="far fa-shopping-cart fa-fw fa-lg"></i>
-                      <span class="cart-notification-dot notification__dot ml-2 mt-n1" :class="{'notification__dot_active': cart_data_count}">[[ cart_data_count ]]</span>
-                    </a>
-                    <div class="dropdown-menu dropdown-menu-right gc-cart-box p-0 px-3 overflow-hidden" aria-labelledby="cartDropdown" style="margin-top: 6px; min-width: 352px;">
-                      <gc-cart-content ref="navCart"/>
-                    </div>
+              <!-- SEARCH BAR AND CART -->
+              <div class="flex-basis-md-25 flex-nowrap d-flex bg-white" :class="{'position-md-absolute w-100': searchVisible}">
+                <button class="btn" v-show="searchVisible" @click="searchVisible=!searchVisible"><i class="fas fa-chevron-left"></i></button>
+                <i
+                  class="far fa-fw fa-search font-smaller-3 position-absolute text-grey-300"
+                  :style="(searchVisible ? 'top: 10px;margin-left: 7px;left: 34px;' : 'top: 19px; margin-left: 7px;')"
+                ></i>
+                <input class="form-control form-control-sm rounded-pill pl-4" placeholder="Search..." type="search" @click="searchVisible=!searchVisible" v-model="params.keyword" @input="changeQuery({page: 1})" @keyup.enter="changeQuery({page: 1})">
+                <div class="navCart dropdown gc-cart" v-if="!searchVisible && sticky_active">
+                  <a href="" class="gc-cart__icon d-block" role="button" @click="$refs.navCart.init()"
+                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="padding: 0.3rem 1rem;">
+                    <i class="far fa-shopping-cart fa-fw fa-lg"></i>
+                    <span class="cart-notification-dot notification__dot ml-2 mt-n1" :class="{'notification__dot_active': cart_data_count}">[[ cart_data_count ]]</span>
+                  </a>
+                  <div class="dropdown-menu dropdown-menu-right gc-cart-box p-0 px-3 overflow-hidden" aria-labelledby="cartDropdown" style="margin-top: 6px; min-width: 352px;">
+                    <gc-cart-content ref="navCart"/>
                   </div>
                 </div>
-
               </div>
 
+            </div>
+
             <div class="container-fluid header dash grants_hero_img" id="grant-hero-img" style="background-image: url({{grant_bg.banner_image}});" :style="[ regex_style?.banner_image ? {backgroundImage: `url(${regex_style?.banner_image})`} : '']">
 
             </div>
 
+            <div v-if="currentCLR?.formatted_dates" class="d-flex justify-content-between countdown-color font-smaller-1 my-3">
+              <!-- Proposed -->
+              <template v-if="currentCLR?.formatted_dates?.status == 'proposed'">
+                <div>[[ currentCLR?.display_text ]] Proposed Dates</div>
+                <div>[[ currentCLR?.formatted_dates?.start_date ]] - [[ currentCLR?.formatted_dates?.end_date ]]</div>
+              </template>
+
+              <!-- Live -->
+              <template v-if="currentCLR?.formatted_dates?.status == 'live'">
+                <div>
+                  [[ currentCLR?.display_text ]]
+                  - Active - Ends in
+                  <countdown :startdate="currentCLR.start_date" :enddate="currentCLR.end_date" class="countdown gc-font-heading d-inline-block">
+                    <template v-slot="slotProps">
+                      <span>[[slotProps.time.days]]d</span>
+                      <span>[[slotProps.time.hours]]h</span>
+                      <span>[[slotProps.time.minutes]]m</span>
+                      <span>[[slotProps.time.seconds]]s</span>
+                    </template>
+                  </countdown>
+                </div>
+
+                <div>[[ currentCLR?.formatted_dates?.start_date ]] - [[ currentCLR?.formatted_dates?.end_date ]]</div>
+              </template>
+
+              <!-- Ended -->
+              <template v-if="currentCLR?.formatted_dates?.status == 'ended'">
+                <div>[[ currentCLR?.display_text ]] Round Ended</div>
+                <div>[[ currentCLR?.formatted_dates?.start_date ]] - [[ currentCLR?.formatted_dates?.end_date ]]</div>
+              </template>
+
+              <!-- Claim -->
+              <template v-if="currentCLR?.formatted_dates?.status == 'claim'">
+                <div>
+                  [[ currentCLR?.display_text ]] Claim - Active - Ends in
+
+                  <countdown :startdate="currentCLR.claim_start_date" :enddate="currentCLR.claim_end_date" class="countdown gc-font-heading d-inline-block">
+                    <template v-slot="slotProps">
+                      <span>[[slotProps.time.days]]d</span>
+                      <span>[[slotProps.time.hours]]h</span>
+                      <span>[[slotProps.time.minutes]]m</span>
+                      <span>[[slotProps.time.seconds]]s</span>
+                    </template>
+                  </countdown>
+                
+                </div>
+                <div>[[ currentCLR?.formatted_dates?.start_date ]] - [[ currentCLR?.formatted_dates?.end_date ]]</div>
+
+              </template>
+            </div>
+
             <template v-if="'activity' == current_type">
               {% include 'grants/shared/landing_activity.html' %}
             </template>
@@ -278,7 +317,6 @@
             </template>
             <template v-else>
 
-
               {% include 'grants/shared/top-filters.html' %}
 
               <div class="d-flex">
@@ -289,6 +327,7 @@
                   </button>
                 </template>
               </div>
+
               <div class="infinite-container row"  v-if="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">
@@ -296,6 +335,7 @@
                   </a>
                 </div>
               </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>
@@ -324,13 +364,8 @@ <h1 class="font-title-lg font-weight-semibold mt-4 mb-2">{% trans "This is not t
         </b-tabs>
       </div>
 
-      <!-- <div class="container-fluid header dash grants_hero_img" id="grant-hero-img" style="background-image: url({{grant_bg.banner_image}});" :style="[ regex_style?.banner_image ? {backgroundImage: `url(${regex_style?.banner_image})`} : '']">
-
-      </div> -->
         {% include 'shared/grant_thanks_modal.html' %}
 
-        <!-- {% include 'grants/shared/landing_hero.html' %} -->
-
         <div class="container grants-details-parent mx-auto">
           <div id="grants-details" :class="`no-gutters w-100 ${view == 'list' ? 'list-view' : 'grid-view'}`">
             <div style="background-size: contain;" id="grant-background-image-mount-point">
@@ -355,10 +390,8 @@ <h1 class="font-title-lg font-weight-semibold mt-4 mb-2">{% trans "This is not t
             </div>
             {% csrf_token %}
           </div>
-
         </div>
 
-
       </div>
       {% include 'grants/components/collection.html' %}
       {% include 'grants/detail/template-grant-details.html' %}
@@ -432,7 +465,7 @@ <h1 class="font-title-lg font-weight-semibold mt-4 mb-2">{% trans "This is not t
   </script>
   {% include 'shared/activity_scripts.html' %}
 
-
+  <script src="https://momentjs.com/downloads/moment-timezone-with-data-10-year-range.min.js"></script>
   <script src="{% static "v2/js/abi.js" %}"></script>
   <script src="{% static "v2/js/pages/shared_bounty_mutation_estimate_gas.js" %}"></script>
   <script src="{% static "v2/js/grants/components.js" %}"></script>
diff --git a/app/grants/templates/grants/shared/landing_qf_active.html b/app/grants/templates/grants/shared/landing_qf_active.html
index 8deecfda07b..c6f84e5d2ba 100644
--- a/app/grants/templates/grants/shared/landing_qf_active.html
+++ b/app/grants/templates/grants/shared/landing_qf_active.html
@@ -105,15 +105,6 @@ <h1>$500k Funding Pool, Now Live</h1>
 
       </div>
     </div>
-    <!-- Summary of matching pools this round -->
-    <!-- <div class="row mt-3" v-cloak>
-      <div class="col" v-for="grantType in grant_types" v-if="grantType.is_visible">
-        <a :href="`explorer/${grantType.keyword}`" class="font-bigger-1 text-success">
-          [[grantType.funding_ui]]
-          [[grantType.label]]
-        </a>
-      </div>
-    </div> -->
   </section>
 
   <!-- Ongoing matching pools (CURRENTLY HIDDEN AND NOT IMPLEMENTED) -->
diff --git a/app/grants/views.py b/app/grants/views.py
index 9d00333578e..928587189cf 100644
--- a/app/grants/views.py
+++ b/app/grants/views.py
@@ -620,6 +620,12 @@ def get_grants(request):
         'has_previous': has_previous,
         'count': paginator.count if paginator else 0,
         'num_pages': paginator.num_pages if paginator else 0,
+        'metadata': {
+            'claim_start_date': clr_round.claim_start_date if clr_round else None,
+            'claim_end_date': clr_round.claim_end_date if clr_round else None,
+            'start_date': clr_round.start_date if clr_round else None,
+            'end_date': clr_round.end_date if clr_round else None,
+        }
     })
 
 

From 876fb2525c0a42cf37e1f79fbe49bc8abcc370c9 Mon Sep 17 00:00:00 2001
From: Aditya Anand M C <aditya.anandmc@gmail.com>
Date: Fri, 1 Oct 2021 14:47:46 +0530
Subject: [PATCH 3/5] add migration

---
 .../migrations/0126_auto_20211001_0911.py     | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 app/grants/migrations/0126_auto_20211001_0911.py

diff --git a/app/grants/migrations/0126_auto_20211001_0911.py b/app/grants/migrations/0126_auto_20211001_0911.py
new file mode 100644
index 00000000000..a177dd9f1ea
--- /dev/null
+++ b/app/grants/migrations/0126_auto_20211001_0911.py
@@ -0,0 +1,28 @@
+# Generated by Django 2.2.24 on 2021-10-01 09:11
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('grants', '0125_auto_20210928_2029'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='grantclr',
+            name='claim_end_date',
+            field=models.DateTimeField(blank=True, help_text='CLR Claim End Date', null=True),
+        ),
+        migrations.AddField(
+            model_name='grantclr',
+            name='claim_start_date',
+            field=models.DateTimeField(blank=True, help_text='CLR Claim Start Date', null=True),
+        ),
+        migrations.AlterField(
+            model_name='contribution',
+            name='checkout_type',
+            field=models.CharField(blank=True, choices=[('eth_std', 'eth_std'), ('eth_zksync', 'eth_zksync'), ('eth_polygon', 'eth_polygon'), ('zcash_std', 'zcash_std'), ('celo_std', 'celo_std'), ('zil_std', 'zil_std'), ('polkadot_std', 'polkadot_std'), ('harmony_std', 'harmony_std'), ('binance_std', 'binance_std'), ('rsk_std', 'rsk_std'), ('algorand_std', 'algorand_std')], help_text='The checkout method used while making the contribution', max_length=30, null=True),
+        ),
+    ]

From 7abfd5f7597951a18985470cf62115ec82d34e43 Mon Sep 17 00:00:00 2001
From: Aditya Anand M C <aditya.anandmc@gmail.com>
Date: Mon, 4 Oct 2021 15:26:09 +0530
Subject: [PATCH 4/5] address review comments

---
 app/grants/tests/models/test_grant_clr.py | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/app/grants/tests/models/test_grant_clr.py b/app/grants/tests/models/test_grant_clr.py
index 5d0bec08a0e..e94922e6adf 100644
--- a/app/grants/tests/models/test_grant_clr.py
+++ b/app/grants/tests/models/test_grant_clr.py
@@ -236,3 +236,17 @@ def test_record_clr_prediction_curve_calls_collaborator_with_expected_parameters
             clr_prediction_curve=grant.clr_prediction_curve,
             latest=True
         )
+
+    def test_grant_clr_has_claim_start_date_attribute(self):
+        """Test claim_start_date is present."""
+
+        grant_clr = GrantCLRFactory()
+
+        assert hasattr(grant_clr, 'claim_start_date')
+
+    def test_grant_clr_has_claim_end_date_attribute(self):
+        """Test claim_end_date is present."""
+
+        grant_clr = GrantCLRFactory()
+
+        assert hasattr(grant_clr, 'claim_end_date')
\ No newline at end of file

From 36b59a81392bf068db94c9d81a59056aaf72f8b3 Mon Sep 17 00:00:00 2001
From: Chibuotu Amadi <chibuotu@gmail.com>
Date: Mon, 4 Oct 2021 14:44:45 +0100
Subject: [PATCH 5/5] remove logs

---
 app/assets/v2/js/grants/index.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/app/assets/v2/js/grants/index.js b/app/assets/v2/js/grants/index.js
index f6f23e56af0..60332ec0bfb 100644
--- a/app/assets/v2/js/grants/index.js
+++ b/app/assets/v2/js/grants/index.js
@@ -516,10 +516,6 @@ if (document.getElementById('grants-showcase')) {
             claim_end_date = moment(claim_end_date).tz('America/Denver');
           }
 
-          console.log(now);
-          console.log(claim_start_date);
-          console.log(claim_end_date);
-
           if (now.isBefore(start_date)) {
             // round is yet to start
             return 'proposed';