Add 1% fee to front end

src/components/Payments.vue

@@ -10,7 +10,7 @@
       <div v-if="length">
         <v-expansion-panels accordion v-model="selected">
           <v-expansion-panel
-            v-for="({
+            v-for="{
               account,
               color,
               confirmed,
@@ -29,7 +29,7 @@
               sign,
               tip,
               updatedAt,
-            }) in filteredPayments()"
+            } in filteredPayments()"
             :key="id"
           >
             <v-expansion-panel-header
@@ -38,7 +38,7 @@
               expand-icon=""
             >
               <network-icon class="flex-grow-0 mr-2 mt-1" :network="network" />
-              <div class="flex-grow-1" style="white-space: nowrap;">
+              <div class="flex-grow-1" style="white-space: nowrap">
                 <span
                   :class="{
                     'body-1': $vuetify.breakpoint.xsOnly,
@@ -72,7 +72,7 @@
                     >UNCONFIRMED</span
                   >
                 </v-chip>
-                    {{ updatedAt | format }}
+                {{ updatedAt | format }}
               </div>
             </v-expansion-panel-header>
             <v-expansion-panel-content class="text-left" :eager="true">
@@ -102,7 +102,7 @@
                 </v-text-field>
                 <v-textarea
                   v-if="fee"
-                  label="Fee"
+                  label="Network Fee"
                   :value="fee"
                   readonly
                   rows="1"
@@ -114,6 +114,21 @@
                     </v-btn>
                   </template>
                 </v-textarea>
+
+                <v-textarea
+                  v-if="['bitcoin', 'liquid'].includes(network)"
+                  label="Coinos Fee (1%)"
+                  :value="amount / 100"
+                  readonly
+                  rows="1"
+                  auto-grow
+                >
+                  <template v-slot:append>
+                    <v-btn @click="copy(amount / 100)" class="ml-1" icon>
+                      <v-icon>$copy</v-icon>
+                    </v-btn>
+                  </template>
+                </v-textarea>
                 <v-textarea
                   v-if="preimage"
                   label="Preimage"
@@ -181,7 +196,6 @@ import colors from 'vuetify/lib/util/colors';
 import Copy from '../mixins/Copy';
 import NetworkIcon from './NetworkIcon';
 
-
 let bs = 'https://blockstream.info';
 const SATS = 100000000;
 
@@ -308,8 +322,7 @@ export default {
         .filter((p) => p.amount < 0 || p.received)
         .filter(
           (p) => !this.user.account || p.account_id === this.user.account.id
-        )
-      ;
+        );
     },
 
     explore(link) {

src/components/Sent.vue

@@ -26,7 +26,9 @@
         <div class="mb-4 text-center">
           <div class="d-flex justify-center">
             <div class="mr-2">
-              <span class="headline grey--text text--lighten-2">+ Fee: </span>
+              <span class="headline grey--text text--lighten-2"
+                >+ Network Fee:
+              </span>
               <span class="display-1">{{ fee }}</span>
               {{ user.unit }}
             </div>
@@ -42,11 +44,39 @@
           </div>
         </div>
 
-        <v-btn @click="clearPayment" class="mr-2">
-          <v-icon left>$left</v-icon><span>Send Another</span>
+        <div
+          class="mb-4 text-center"
+          v-if="['bitcoin', 'liquid'].includes(payment.network)"
+        >
+          <div class="d-flex justify-center">
+            <div class="mr-2">
+              <span class="headline grey--text text--lighten-2"
+                >+ Coinos Fee (1%):
+              </span>
+              <span class="display-1">{{
+                $format(total, precision) / 100
+              }}</span>
+              {{ user.unit }}
+            </div>
+            <div>
+              <span
+                v-if="payment.account.ticker === 'BTC'"
+                class="primary--text"
+              >
+                <span class="display-1">{{
+                  fiat($format(total, precision) / 100)
+                }}</span>
+                {{ payment.currency }}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <v-btn @click="home" class="mr-2">
+          <v-icon left>$wallet</v-icon><span>Home</span>
         </v-btn>
         <v-btn
-          v-if="['BTC', 'LBTC'].includes(payment.network)"
+          v-if="['bitcoin', 'liquid'].includes(payment.network)"
           @click.native="explore"
         >
           <v-icon left>$open</v-icon><span>Explore</span>
@@ -87,7 +117,9 @@ export default {
   },
 
   methods: {
-    clearPayment: call('clearPayment'),
+    home() {
+      this.$go('/home');
+    },
 
     fiat(n) {
       if (!n || isNaN(n)) return '0.00';

src/components/Transaction.vue

@@ -55,7 +55,7 @@
     </v-textarea>
     <v-select
       label="Asset"
-      v-if="payment.network === 'LBTC'"
+      v-if="payment.network === 'liquid'"
       v-model="user.account_id"
       @input="shiftAccount"
       :items="accounts"
@@ -71,7 +71,7 @@
     <v-text-field
       v-if="payment.address"
       :loading="loadingFee"
-      label="Fee"
+      label="Network Fee"
       v-model="displayFee"
       readonly
       @click="setFee"
@@ -90,6 +90,25 @@
     </v-text-field>
     <set-fee :adjusting="adjusting" @closed="$emit('feeRate')" />
 
+    <v-text-field
+      v-if="['bitcoin', 'liquid'].includes(payment.network)"
+      label="Coinos Fee (1%)"
+      v-model="coinosFee"
+      readonly
+    >
+      <template v-slot:append>
+        <v-btn
+          class="toggle black--text mt-auto"
+          :color="color(feeUnit)"
+          @click.prevent="toggleUnit"
+          >{{ feeUnit }}</v-btn
+        >
+        <v-btn icon @click="copy(coinosFee)" class="ml-1" text>
+          <v-icon>$copy</v-icon>
+        </v-btn>
+      </template>
+    </v-text-field>
+
     <v-textarea label="Memo" v-model="payment.memo" rows="1" auto-grow />
 
     <v-switch
@@ -101,7 +120,7 @@
     <div class="d-flex" v-if="psbt">
       <v-btn @click="copy(psbt)" class="ml-auto">
         <v-icon left>$copy</v-icon>
-        Copy {{ payment.network === 'BTC' ? 'PSBT' : 'PSET' }}
+        Copy {{ payment.network === 'bitcoin' ? 'PSBT' : 'PSET' }}
       </v-btn>
     </div>
   </v-card>
@@ -142,12 +161,24 @@ export default {
       return address;
     },
     accounts() {
-      return this.user.accounts.map(a => ({ text: a.name, value: a.id }));
+      return this.user.accounts.map((a) => ({ text: a.name, value: a.id }));
     },
     currency() {
       if (this.user.account.ticker === 'BTC') return null;
       else return this.user.account.ticker;
     },
+    coinosFee() {
+      let coinosFee = this.user.fiat
+        ? this.coinosFiatFee
+        : this.user.unit === 'SAT'
+        ? this.payment.amount / 100
+        : this.$format(this.payment.amount / 100, 8);
+
+      return coinosFee;
+    },
+    coinosFiatFee() {
+      return (((this.payment.amount / 100) * this.rate) / SATS).toFixed(2);
+    },
     displayFee() {
       let fee = this.user.fiat
         ? this.fiatFee
@@ -190,7 +221,7 @@ export default {
       this.toggleFiat();
     },
     explore() {
-      this.$nextTick(function() {
+      this.$nextTick(function () {
         if (this.payment.network === 'bitcoin')
           window.open(`${bs}/address/${this.payment.address}`);
         else window.open(`${bs}/liquid/address/${this.payment.address}`);

src/store/index.js

@@ -1010,7 +1010,6 @@ export default new Vuex.Store({
                   await dispatch('shiftAccount', data.account_id);
                   if (getters.user.unit === 'SAT') await dispatch('toggleUnit');
                 }
-                await go('/home');
               }
               commit('addPayment', data);
               commit('selected', 0);
@@ -1215,7 +1214,7 @@ export default new Vuex.Store({
 
                 const pair = ECPair.fromPrivateKey(hd.privateKey, {
                   compressed: true,
-                  network: { ...network, assetHash: "", confidentialPrefix: 1 },
+                  network: { ...network, assetHash: '', confidentialPrefix: 1 },
                 });
 
                 try {
@@ -1714,8 +1713,10 @@ export default new Vuex.Store({
         let [name, domain] = text.split('@');
         try {
           clearTimeout(debounce);
-          await new Promise((r) => debounce = setTimeout(r, 1500));
-          ({ data: text } = await Vue.axios.get(`/encode?domain=${domain}&name=${name}`));
+          await new Promise((r) => (debounce = setTimeout(r, 1500)));
+          ({ data: text } = await Vue.axios.get(
+            `/encode?domain=${domain}&name=${name}`
+          ));
         } catch (e) {}
       }
 
@@ -1845,7 +1846,11 @@ export default new Vuex.Store({
       }
 
       try {
-        let ecpair = ECPair.fromWIF(text, { ...this._vm.$network, confidentialPrefix: 1, assetHash: "" });
+        let ecpair = ECPair.fromWIF(text, {
+          ...this._vm.$network,
+          confidentialPrefix: 1,
+          assetHash: '',
+        });
         commit('ecpair', ecpair);
         go('/sweep');
       } catch (e) {