cross: redo payout flow

app/assets/v2/css/bounty.css

@@ -88,6 +88,11 @@ body {
   height: 80px;
 }
 
+.avatar-small {
+  width: 25px;
+  height: 25px;
+}
+
 #status {
   color: #00A55E;
   text-transform: uppercase;
@@ -110,10 +115,6 @@ body {
   list-style-type: none;
 }
 
-.related-bounties .bounty-title {
-  color: #3E00FF;
-}
-
 .related-bounties .static-stars .far {
   font-size: 0.8rem;
 }
@@ -464,6 +465,7 @@ a.btn {
   padding: 0.5rem;
 }
 
+.related-bounties .bounty-title,
 #funder_notif_info #bounty_funded_by,
 #funder_notif_info i {
   color: #3E00FF;
@@ -750,7 +752,7 @@ a.btn {
   border-top: none;
   border-left: none;
   border-right: none;
-  max-width: 5rem;
+  max-width: 12rem;
   outline: none;
   color: #03B16B;
 }
@@ -835,6 +837,15 @@ a.btn {
   }
 }
 
+.payout-summary-container {
+  background: #F9F7FF;
+}
+
+#submit_transaction .payout-tx-container {
+  border: 1px solid #D8D8D8;
+  border-radius: 3px;
+}
+
 @media (min-width: 769px) {
   .activity-time {
     margin-left: 0.625rem !important;

app/assets/v2/css/colors.css

@@ -19,6 +19,7 @@
   --gc-grey: #fafafa;
   --gc-blue-grey: #f2f6f9;
   --gc-dark-grey: #868789;
+  --gc-medium-dark-gray: #666666;
   --gc-darker-grey: #3d3d3d;
 
   --text-light: #D8D8D8;
@@ -56,3 +57,7 @@
 .text-highlight-yellow {
   color: var(--gc-yellow);
 }
+
+.text-medium-dark-grey {
+  color: var(--gc-medium-dark-gray);
+}

app/assets/v2/js/pages/bounty_details2.js

@@ -238,15 +238,22 @@ Vue.mixin({
         });
       }
     },
-    fulfillmentComplete: function(fulfillment_id, amount, event) {
+    fulfillmentComplete: function(fulfillment_id, event) {
       let vm = this;
+
       const token_name = vm.bounty.token_name;
       const decimals = tokenNameToDetails('mainnet', token_name).decimals;
+      const amount = vm.fulfillment_context.amount;
+      const payout_tx_id = vm.fulfillment_context.payout_tx_id ? vm.fulfillment_context.payout_tx_id : null;
+      const bounty_owner_address = vm.bounty.bounty_owner_address;
+
       const payload = {
         amount: amount * 10 ** decimals,
         token_name: token_name,
-        bounty_owner_address: vm.bounty.bounty_owner_address
+        bounty_owner_address: bounty_owner_address,
+        payout_tx_id: payout_tx_id
       };
+
       const apiUrlBounty = `/api/v1/bounty/payout/${fulfillment_id}`;
 
       event.target.disabled = true;
@@ -255,8 +262,14 @@ Vue.mixin({
         event.target.disabled = false;
         if (200 <= response.status && response.status <= 204) {
           console.log('success', response);
+
           vm.fetchBounty();
           this.$refs['payout-modal'][0].closeModal();
+
+          vm.fulfillment_context = {
+            active_step: 'payout_amount'
+          };
+
         } else {
           _alert('Unable to make payout bounty. Please try again later', 'error');
           console.error(`error: bounty payment failed with status: ${response.status} and message: ${response.message}`);
@@ -404,15 +417,14 @@ Vue.mixin({
 
       return false;
     },
-    totalAmountPaid: function(inputAmount) {
+    goToStep: function(nextStep, currentStep, flow) {
       let vm = this;
-      let amount_paid = 0;
-
-      vm.bounty.fulfillments.forEach(fulfillment => {
-        amount_paid += (fulfillment.payout_amount / 10 ** vm.decimals);
-      });
 
-      vm.bounty.amount_paid = parseFloat(amount_paid) + parseFloat(inputAmount);
+      if (flow) {
+        vm.fulfillment_context.flow = flow;
+      }
+      vm.fulfillment_context.referrer = currentStep;
+      vm.fulfillment_context.active_step = nextStep;
     }
   },
   computed: {
@@ -440,7 +452,6 @@ Vue.mixin({
   }
 });
 
-
 if (document.getElementById('gc-bounty-detail')) {
   appBounty = new Vue({
     delimiters: [ '[[', ']]' ],
@@ -454,8 +465,11 @@ if (document.getElementById('gc-bounty-detail')) {
         isOwner: false,
         isOwnerAddress: false,
         is_bounties_network: is_bounties_network,
-        inputAmount: 0,
-        decimals: 18,
+        fulfillment_context: {
+          active_step: 'check_wallet_owner',
+          amount: 0
+        },
+        decimals: 18, // TODO: UPDATE BASED ON TOKEN
         inputBountyOwnerAddress: bounty.bounty_owner_address,
         contxt: document.contxt,
         quickLinks: []
@@ -518,9 +532,6 @@ var show_extend_deadline_modal = function() {
         extend_expiration(document.result['pk'], {
           deadline: extended_time
         });
-        // setTimeout(function() {
-        //   window.location.reload();
-        // }, 2000);
       });
     });
   });

app/assets/v2/js/vue-filters.js

@@ -110,3 +110,11 @@ Vue.filter('capitalize', function(value) {
   value = value.toString();
   return value.charAt(0).toUpperCase() + value.slice(1);
 });
+
+Vue.filter('toUppercase', function(value) {
+  return value.toUpperCase();
+});
+
+Vue.filter('toLower', function(value) {
+  return value.toLowerCase();
+});

app/dashboard/sync/etc.py

@@ -8,7 +8,6 @@ def find_txn_on_etc_explorer(fulfillment, network='mainnet'):
     token_name = fulfillment.token_name
     if token_name != 'ETC':
         return None
-
     funderAddress = fulfillment.bounty.bounty_owner_address
     amount = fulfillment.payout_amount
     payeeAddress = fulfillment.fulfiller_address