Clr backend

app/app/settings.py

@@ -120,7 +120,7 @@
     'django.middleware.security.SecurityMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
     'app.middleware.drop_accept_langauge',
-    'app.middleware.bleach_requests',
+    # 'app.middleware.bleach_requests',
     'django.middleware.locale.LocaleMiddleware',
     'django.middleware.common.CommonMiddleware',
     'django.middleware.csrf.CsrfViewMiddleware',

app/assets/v2/css/grants/card.css

@@ -30,6 +30,20 @@
   display: flex;
 }
 
+.clr {
+  right: 1.25rem;
+}
+
+.clr h2 {
+  background: #10cd7a;
+  color: #fff;
+  border-radius: 3px;
+}
+
+.clr p {
+  font-size: 10px;
+}
+
 .grant-item__img {
   height: 11rem;
   overflow: hidden;

app/assets/v2/css/grants/fund.css

@@ -8,6 +8,7 @@
 #grant-link {
   color: #0D0764;
 }
+
 .tab_target{
   width: 100%;
 }
@@ -23,6 +24,12 @@
   object-fit: cover;
 }
 
+#grants_form .nav-link {
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  color: #000;
+}
+
 #grants_form .form__input.valid,
 #grants_form .form__input.error {
   background-position: top 0.5rem right 0.5rem;
@@ -146,22 +153,101 @@
   bottom: -1.2rem;
 }
 
-.nav{
+.nav {
   text-align: center;
 }
-.nav-link{
+
+.nav-link {
   border-right: 1px solid black;
   border-top: 1px solid black;
   border-left: 1px solid black;
   margin-right: 10px;
 }
-.nav-link:visited{
+
+.nav-link:visited {
   color: black;
 }
-.nav-item.active{
+
+.nav-item.active {
   text-decoration: underline;
 }
 
+.clr_estimate {
+  background-color: white;
+  border-radius: 5px;
+  border: 2px solid #10cd7a;
+  text-align: left;
+  width: 250px;
+  padding: 1rem 15px;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+}
+
+.clr_estimate.extraleft {
+  left: -270px;
+}
+
+.clr_estimate:after {
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 30%;
+  width: 0;
+  height: 0;
+  border: 20px solid transparent;
+  border-left-color: #10cd7a;
+  border-right: 0;
+  border-bottom: 0;
+  margin-top: -10px;
+  margin-right: -20px;
+}
+
+.clr_estimate img {
+  float: right;
+  width: 50px;
+}
+
+.clr_estimate h3 {
+  text-align: left;
+  color: white;
+  font-size: 12px;
+  text-transform: uppercase;
+  width: 150px;
+}
+
+.clr_estimate h3 span {
+  background-color: #10cd7a;
+  border-radius: 3px;
+  padding: 4px 6px;
+
+}
+
+.clr_estimate h4 {
+  padding-top: 0px;
+  text-align: left;
+  color: #10cd7a;
+  font-size: 10px;
+  font-weight: bold;
+}
+
+.clr_estimate h4 span {
+  font-size: 16px;
+}
+
+.clr_estimate p {
+  text-align: left;
+  color: #10cd7a;
+  font-size: 12px;
+  color: #959595;
+}
+
+#phantom_fund .description i {
+  font-size: 10px;
+  position: relative;
+  top: -1px;
+}
+
 @media (min-width:1140px) and (max-width: 1600px) {
 
   #gitcoin-grant-section .fee-slider,
@@ -188,3 +274,9 @@
     max-width: 100%;
   }
 }
+
+@media (max-width: 1199.98px) {
+  .clr_estimate {
+    display: none;
+  }
+}

app/assets/v2/js/grants/fund.js

@@ -10,6 +10,14 @@ let gitcoinDonationAddress;
 
 
 $(document).ready(function() {
+
+  predictPhantomCLRMatch();
+  predictCLRMatch();
+
+  $('#amount').on('input', () => {
+    predictCLRMatch();
+  });
+
   gitcoinDonationAddress = $('#gitcoin_donation_address').val();
   splitterAddress = $('#splitter_contract_address').val();
 
@@ -23,7 +31,7 @@ $(document).ready(function() {
 
   updateSummary();
 
-  $('.nav-item').click(function(e) {
+  $('#grants_form .nav-item').click(function(e) {
     $('.nav-item a').removeClass('active');
     $(this).find('a').addClass('active');
     var targetid = $(this).find('a').data('target');
@@ -489,6 +497,90 @@ const splitGrantAmount = () => {
   }
 
   $('.gitcoin-grant-percent').html(percent);
-  $('.summary-gitcoin-amount').html(gitcoin_grant_amount);
+  $('.summary-gitcoin-amount').html(gitcoin_grant_amount.toFixed(2));
   $('#summary-amount').html(grant_amount);
 };
+
+const lerp = (x_lower, x_upper, y_lower, y_upper, x) => {
+  return y_lower + (((y_upper - y_lower) * (x - x_lower)) / (x_upper - x_lower));
+};
+
+const predictPhantomCLRMatch = () => {
+
+  let amount = phantom_value;
+
+  if (0 < amount && amount < 1) {
+    x_lower = 0;
+    x_upper = 1;
+    y_lower = clr_prediction_curve[0];
+    y_upper = clr_prediction_curve[1];
+  } else if (1 < amount && amount < 10) {
+    x_lower = 1;
+    x_upper = 10;
+    y_lower = clr_prediction_curve[1];
+    y_upper = clr_prediction_curve[2];
+  }
+
+  let predicted_clr = lerp(x_lower, x_upper, y_lower, y_upper, amount);
+
+  $('.phantom_clr_increase').html((predicted_clr - clr_prediction_curve[0]).toFixed(2));
+};
+
+const predictCLRMatch = () => {
+
+  let amount = Number.parseFloat($('#amount').val());
+
+  if (amount > 10000) {
+    amount = 10000;
+  }
+
+  let predicted_clr = 0;
+
+  const contributions_axis = [ 0, 1, 10, 100, 1000, 10000 ];
+
+  let index = 0;
+
+  if (isNaN(amount)) {
+    predicted_clr = clr_prediction_curve[index];
+  } else if (contributions_axis.indexOf(amount) >= 0) {
+    index = contributions_axis.indexOf(amount);
+    predicted_clr = clr_prediction_curve[index];
+  } else {
+    let x_lower = 0;
+    let x_upper = 0;
+    let y_lower = 0;
+    let y_upper = 0;
+
+    if (0 < amount && amount < 1) {
+      x_lower = 0;
+      x_upper = 1;
+      y_lower = clr_prediction_curve[0];
+      y_upper = clr_prediction_curve[1];
+    } else if (1 < amount && amount < 10) {
+      x_lower = 1;
+      x_upper = 10;
+      y_lower = clr_prediction_curve[1];
+      y_upper = clr_prediction_curve[2];
+    } else if (10 < amount && amount < 100) {
+      x_lower = 10;
+      x_upper = 100;
+      y_lower = clr_prediction_curve[2];
+      y_upper = clr_prediction_curve[3];
+    } else if (100 < amount && amount < 1000) {
+      x_lower = 100;
+      x_upper = 1000;
+      y_lower = clr_prediction_curve[3];
+      y_upper = clr_prediction_curve[4];
+    } else {
+      x_lower = 1000;
+      x_upper = 10000;
+      y_lower = clr_prediction_curve[4];
+      y_upper = clr_prediction_curve[5];
+    }
+
+    predicted_clr = lerp(x_lower, x_upper, y_lower, y_upper, amount);
+  }
+
+  $('.clr_match_prediction').html(predicted_clr.toFixed(2));
+  $('.clr_increase').html((predicted_clr - clr_prediction_curve[0]).toFixed(2));
+};

app/grants/admin.py

@@ -47,12 +47,12 @@ class GrantAdmin(GeneralAdmin):
         'token_address', 'contract_address', 'contract_version', 'network', 'required_gas_price', 'logo_svg_asset',
         'logo_asset', 'created_on', 'modified_on', 'team_member_list',
         'subscriptions_links', 'contributions_links', 'logo', 'logo_svg', 'image_css',
-         'link', 'clr_matching', 'hidden'
+         'link', 'clr_matching', 'clr_prediction_curve', 'hidden'
     ]
     readonly_fields = [
         'logo_svg_asset', 'logo_asset',
         'team_member_list',
-        'subscriptions_links', 'contributions_links', 'link', 
+        'subscriptions_links', 'contributions_links', 'link',
     ]
     raw_id_fields = ['admin_profile']
 
@@ -179,7 +179,7 @@ class ContributionAdmin(GeneralAdmin):
     """Define the Contribution administration layout."""
     raw_id_fields = ['subscription']
 
-    
+
 admin.site.register(PhantomFunding, GeneralAdmin)
 admin.site.register(MatchPledge, MatchPledgeAdmin)
 admin.site.register(Grant, GrantAdmin)