Merge pull request #2173 from pinkiebell/crowdfund

Make It Clear Issue Has Been Crowdfunded V2

app/assets/v2/css/base.css

@@ -1639,3 +1639,47 @@ div.busyOverlay {
   background-position: center;
   background-image: url('/static/v2/images/loading_v2.gif');
 }
+
+.expandable {
+  overflow: hidden;
+  max-height: 0;
+  transition: 0.3s ease-in-out;
+}
+
+.expandable#expanded {
+  max-height: 10rem;
+}
+
+.arrow {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  vertical-align: baseline;
+  transition: 0.3s ease;
+}
+
+#expanded > .arrow {
+  transform: rotateZ(180deg);
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.middle {
+  vertical-align: middle;
+}
+
+.funding {
+  background-color: #f9f9f9;
+}
+
+.funding > div.placeholder {
+  margin-left: 8.3%;
+}
+
+@media (max-width: 768px) {
+  .funding > div.placeholder {
+    margin-left: 3px;
+  }
+}

app/assets/v2/css/bounty.css

@@ -194,11 +194,6 @@ body {
   top: 2px;
 }
 
-#bounty_details .tags {
-  float: right;
-  text-align: center;
-}
-
 #bounty_details .activity-tags {
   float: left;
   text-align: center;
@@ -212,10 +207,6 @@ body {
   display: inline-block;
 }
 
-#bounty_details .tag p {
-  padding: 5px;
-}
-
 .issue-url > a {
   color: #ffffff;
 }

app/assets/v2/css/dashboard.css

@@ -74,7 +74,9 @@ body {
 .title-row {
   display: flex;
   margin-top: 2em;
+  margin-right: 8px;
   padding-bottom: 5px;
+  float: right;
   border-bottom: 2px solid #3E24FB;
 }
 
@@ -178,6 +180,11 @@ body {
   display: flex;
 }
 
+.tags.fixed {
+  float: right;
+  padding-bottom: 1rem;
+}
+
 #onboard-footer {
   text-align: center;
   background: #F2F6F9;
@@ -208,13 +215,6 @@ body {
   }
 }
 
-@media (min-width: 768px) {
-
-  .tag.shift_left {
-    margin-left: -100px;
-  }
-}
-
 @media (max-width: 768px) {
 
   #onboard-dashboard .col-12 {
@@ -254,4 +254,8 @@ body {
   .bounty-detail {
     margin-right: 4rem;
   }
-}
+}
+
+.hiring {
+  content: url('/static/v2/images/hiring.svg');
+}

app/assets/v2/css/tag.css

@@ -1,35 +1,47 @@
 .tag {
   text-align: center;
-  min-width: 90px;
   border-radius: 2px;
   margin: 4px;
-}
-
-.tag span {
-  margin-left: 2px;
+  padding: 3px 6px;
+  font-size: 11px;
+  font-weight: 400;
+  white-space: nowrap;
+  cursor: pointer;
 }
 
 .tag p {
-  padding: 5px 2px;
-  margin-bottom: 0;
+  margin-bottom: 1px;
 }
 
 .tag.usd {
   background-color: #d6fbeb;
   color: #00A55E;
 }
 
+.tag.usd:hover {
+  background-color: #c6ebdb;
+}
+
 .tag.network_warning {
   background-color: #fbaf95;
   color: #fff;
 }
 
 .tag.token {
   background-color: #e7f0fa;
-  color: #775EC7;
+  color: var(--gc-blue);
+}
+
+.tag.token:hover {
+  background-color: #d7e0ea;
 }
 
 .tag.hiring {
   background-color: #3a9ced;
   color: #fff;
 }
+
+.tag.token > a {
+  position: absolute;
+  margin-top: 0.3rem;
+}

app/assets/v2/js/pages/bounty_details.js

@@ -2,10 +2,6 @@
 /* eslint no-redeclare: "warn" */
 /* eslint no-loop-func: "warn" */
 
-const normalizeAmount = function(amount, decimals) {
-  return Math.round(amount * 10 ** decimals) / 10 ** decimals;
-};
-
 const _truthy = function(val) {
   if (!val || val == '0x0000000000000000000000000000000000000000') {
     return false;
@@ -225,60 +221,70 @@ var callbacks = {
     return [ 'network', warning ];
   },
   'additional_funding_summary': function(key, val, result) {
-    if (typeof val == 'undefined' || Object.keys(val['tokens']).length == 0) {
-      $('.additional_funding_summary').addClass('hidden');
-      return [ 'additional_funding_summary', '' ];
-    }
-    const usd_value = val['usd_value'];
-    const tokens = val['tokens'];
-    const decimals = 3;
-
-    let crowdfunded_tokens = [];
-    let tooltip_info = [];
-
-    crowdfunded_tokens.push({
-      amount: token_value_to_display(result['value_in_token'], decimals),
-      token: result['token_name']
-    });
 
-    tooltip_info.push('<p class="font-weight-bold m-0 pb-1" style="color:#775EC7;">Intial : ' +
-      $('#value_in_token').html() + '</p>');
+    const tokens = Object.keys(val);
 
-    if (usd_value) {
-      tooltip_info.push('<p class="m-0" style="margin-top: 3px;">Crowdfunding worth $' + usd_value + '</p>');
-      $('#value_in_usdt').html(parseFloat(result['value_in_usdt']) + usd_value);
+    if (tokens.length === 0) {
+      return [ key, val ];
     }
 
-    for (var token in tokens) {
-      if (token) {
-        const val = tokens[token];
-        const funding = normalizeAmount(val, decimals);
-
-        if (crowdfunded_tokens.filter(fund => fund.token === token).length > 0) {
-          crowdfunded_tokens.map((fund, index) => {
-            if (fund.token === token) {
-              crowdfunded_tokens[index].amount += funding;
-            }
-          });
-        } else {
-          crowdfunded_tokens.push({
-            amount: funding,
-            token: token
-          });
-        }
-        const template = '<p class="m-0" style="color:#fb9470">+' + funding + ' ' + token + ' in crowdfunding</p>';
-
-        tooltip_info.push(template);
-      }
+    const tokenDecimals = 3;
+    const dollarDecimals = 2;
+    const bountyTokenName = result['token_name'];
+    const bountyTokenAmount = token_value_to_display(result['value_in_token'], tokenDecimals);
+    const dateNow = new Date();
+    const dateTokenValue = new Date(result['token_value_time_peg']);
+    const timePeg = timeDifference(dateNow, dateTokenValue > dateNow ? dateNow : dateTokenValue, false, 60 * 60);
+    const usdTagElement = document.querySelector('#value_in_usdt_wrapper');
+    const container = document.querySelector('.tags');
+
+    let leftHtml = '';
+    let rightHtml = '';
+
+    leftHtml += '<p class="m-0">&nbsp;&nbsp;&nbsp;' +
+      bountyTokenAmount + ' ' + bountyTokenName + '</p>';
+
+    rightHtml += '<p class="m-0">@ $' +
+      result['token_value_in_usdt'] + ' ' + bountyTokenName + ' as of ' + timePeg + '</p>';
+
+    let totalUSDValue = parseFloat(result['value_in_usdt']) || 0.0;
+
+    while (tokens.length) {
+      const tokenName = tokens.shift();
+      const obj = val[tokenName];
+      const ratio = obj['ratio'];
+      const amount = obj['amount'];
+      const usd = amount * ratio;
+      const funding = normalizeAmount(amount, tokenDecimals);
+      const tokenValue = normalizeAmount(1.0 * ratio, dollarDecimals);
+      const timestamp = new Date(obj['timestamp']);
+      const timePeg = timeDifference(dateNow, timestamp > dateNow ? dateNow : timestamp, false, 60 * 60);
+      const tooltip = '$' + normalizeAmount(usd, dollarDecimals) + ' ' + tokenName + ' in crowdfunding';
+
+      leftHtml += '<p class="m-0">+ ' + funding + ' ' + tokenName + '</p>';
+      rightHtml += '<p class="m-0">@ $' + tokenValue + ' ' + tokenName + ' as of ' + timePeg + '</p>';
+
+      totalUSDValue += usd;
+
+      container.insertBefore(
+        newTokenTag(funding, tokenName, tooltip, true),
+        usdTagElement
+      );
     }
 
-    const token_tag = crowdfunded_tokens.map(fund => fund.amount + ' ' + fund.token);
+    $('#value_in_usdt').html(normalizeAmount(totalUSDValue, dollarDecimals));
 
-    $('#value_in_token').html('<i class="fas fa-users mr-2"></i>' +
-      token_tag.join(' <i class="fas fa-plus mx-1" style="font-size: 0.5rem; position: relative; top: -1px;"></i> '));
-    $('#value_in_token').attr('title', '<div class="tooltip-info tooltip-sm">' + tooltip_info.join('') + '</div>');
+    $('#value_in_usdt_wrapper').attr('title',
+      '<div class="tooltip-info tooltip-sm">' +
+      '<p class="text-highlight-gc-purple">How did we calculate this?</p>' +
+      '<div style="float:left; text-align:left;">' +
+      leftHtml +
+      '</div><div style="margin-left: .5rem; float:right; text-align:left;">' +
+      rightHtml +
+      '</div></div>'
+    );
 
-    return [ 'additional_funding_summary', val ];
+    return [ key, val ];
   },
   'token_value_time_peg': function(key, val, result) {
     if (val === null || typeof val == 'undefined') {

app/assets/v2/js/pages/dashboard.js

@@ -442,72 +442,9 @@ var refreshBounties = function(event, offset, append) {
 
     document.last_bounty_rendered = 0;
 
-    for (var i = 0; i < results.length; i++) {
-      // setup
-      var result = results[i];
-      var related_token_details = tokenAddressToDetailsByNetwork(result['token_address'], result['network']);
-      var decimals = 18;
-
-      if (related_token_details && related_token_details.decimals) {
-        decimals = related_token_details.decimals;
-      }
-
-      var divisor = Math.pow(10, decimals);
-
-      result['rounded_amount'] = Math.round(result['value_in_token'] / divisor * 100) / 100;
-      var is_expired = new Date(result['expires_date']) < new Date() && !result['is_open'];
-
-      // setup args to go into template
-      if (typeof web3 != 'undefined' && web3.eth.coinbase == result['bounty_owner_address']) {
-        result['my_bounty'] = '<a class="btn font-smaller-2 btn-sm btn-outline-dark" role="button" href="#">mine</span></a>';
-      } else if (result['fulfiller_address'] !== '0x0000000000000000000000000000000000000000') {
-        result['my_bounty'] = '<a class="btn font-smaller-2 btn-sm btn-outline-dark" role="button" href="#">' + result['status'] + '</span></a>';
-      }
-
-      result.action = result['url'];
-      result['title'] = result['title'] ? result['title'] : result['github_url'];
-
-      var project_type = ucwords(result['project_type']) + ' &bull; ';
-
-      result['p'] = project_type + (result['experience_level'] ? result['experience_level'] + ' &bull; ' : '');
-
-      if (result['status'] === 'done')
-        result['p'] += 'Done';
-      if (result['fulfillment_accepted_on']) {
-        result['p'] += ' ' + timeDifference(new Date(), new Date(result['fulfillment_accepted_on']), false, 60 * 60);
-      } else if (result['status'] === 'started') {
-        result['p'] += 'Started';
-        result['p'] += ' ' + timeDifference(new Date(), new Date(result['fulfillment_started_on']), false, 60 * 60);
-      } else if (result['status'] === 'submitted') {
-        result['p'] += 'Submitted';
-        if (result['fulfillment_submitted_on']) {
-          result['p'] += ' ' + timeDifference(new Date(), new Date(result['fulfillment_submitted_on']), false, 60 * 60);
-        }
-      } else if (result['status'] == 'cancelled') {
-        result['p'] += 'Cancelled';
-        if (result['canceled_on']) {
-          result['p'] += ' ' + timeDifference(new Date(), new Date(result['canceled_on']), false, 60 * 60);
-        }
-      } else if (is_expired) {
-        var time_ago = timeDifference(new Date(), new Date(result['expires_date']), true);
-
-        result['p'] += (' Expired ' + time_ago + ' ago');
-      } else {
-        var opened_when = timeDifference(new Date(), new Date(result['web3_created']), true);
-
-        var timeLeft = timeDifference(new Date(), new Date(result['expires_date']));
-        var expiredExpires = new Date() < new Date(result['expires_date']) ? 'Expires' : 'Expired';
-
-        result['p'] += ('Opened ' + opened_when + ' ago, ' + expiredExpires + ' ' + timeLeft);
-      }
-
-
-      result['watch'] = 'Watch';
-
-      // render the template
-      var tmpl = $.templates('#result');
-      var html = tmpl.render(result);
+    var html = renderBountyRowsFromResults(results, true);
 
+    if (html) {
       $('#bounties').append(html);
     }