From bc10f44d4ecece1b662a67eeca723bdbd36905bf Mon Sep 17 00:00:00 2001
From: giangnamnabka <giangnam.na.bka@gmail.com>
Date: Wed, 2 Aug 2023 15:16:12 +0700
Subject: [PATCH 1/2] update review issues

---
 src/daemon/firod.ts                           | 39 +++------
 .../AnimatedTable/AddressBookItemAddress.vue  | 16 +++-
 .../AddressBookItemAddressType.vue            | 17 ++--
 .../AnimatedTableInputPrivacy.vue             | 37 +++++++++
 .../components/AnimatedTable/TxAmount.vue     |  2 +-
 .../components/AnimatedTable/TxId.vue         |  2 +-
 .../components/AnimatedTable/UTXOLocker.vue   | 26 +++---
 .../components/AnimatedTable/UTXOSelector.vue | 21 +----
 .../AwaitingAnonymizationHeader.vue           | 59 ++-----------
 .../components/LelantusToSparkDialog.vue      | 82 +++++++++++++++++++
 src/renderer/components/ReceivePage.vue       | 13 +--
 src/renderer/components/SendPage.vue          | 11 +--
 .../components/SendPage/GoPrivate.vue         | 26 +++++-
 .../components/SendPage/InputSelection.vue    |  3 +-
 .../components/SendPage/LelantusToSpark.vue   | 47 +++++++----
 src/renderer/components/SendPage/SendFlow.vue | 38 ++++-----
 src/renderer/components/Sidebar/Balance.vue   |  6 --
 src/renderer/components/TransactionsPage.vue  |  9 +-
 .../shared/PrivatePublicBalance.vue           |  3 +-
 src/store/modules/ApiStatus.ts                |  3 +-
 src/store/modules/Balance.ts                  |  9 +-
 src/store/modules/Transactions.ts             |  4 +-
 22 files changed, 281 insertions(+), 192 deletions(-)
 create mode 100644 src/renderer/components/AnimatedTable/AnimatedTableInputPrivacy.vue
 create mode 100644 src/renderer/components/LelantusToSparkDialog.vue

diff --git a/src/daemon/firod.ts b/src/daemon/firod.ts
index 1ded165c..5f271dad 100644
--- a/src/daemon/firod.ts
+++ b/src/daemon/firod.ts
@@ -1752,7 +1752,7 @@ export class Firod {
     }
 
     async mintSpark(auth: string, label: string, recipient: string, amount: number, feePerKb: number,
-        subtractFeeFromAmount: boolean, coinControl?: CoinControl): Promise<{txid: string}> {
+        subtractFeeFromAmount: boolean, coinControl?: CoinControl): Promise<{txids: string[]}> {
         const data = await this.send(auth, 'create', 'mintSpark', {
         label,
         recipient,
@@ -1763,8 +1763,17 @@ export class Firod {
             selected: coinControlToString(coinControl)
         }
         });
-        function isValidResponse(x: any): x is {txid: string} {
-            return x !== null && typeof x === 'object' && typeof x.txid === 'string';
+        function isValidResponse(x: any): x is {txids: string[]} {
+            if (x === null ||
+                typeof x !== 'object') {
+                return false;
+            }
+            for (const v of x.txids) {
+                if (typeof v !== 'string') {
+                    return false;
+                }
+            }
+            return true;
         }
         if (isValidResponse(data)) {
             return data;
@@ -1810,28 +1819,4 @@ export class Firod {
             throw new UnexpectedFirodResponse('create/validateSparkAddress', data);
         }
     }
-
-    async getAvailableSparkBalance(): Promise<{amount: number}> {
-        const data = await this.send('', 'create', 'getAvailableSparkBalance', {});
-        function isValidResponse(x: any): x is {amount: number} {
-            return x !== null && typeof x === 'object' && typeof x.amount === 'number';
-        }
-        if (isValidResponse(data)) {
-            return data;
-        } else {
-            throw new UnexpectedFirodResponse('create/getAvailableSparkBalance', data);
-        }
-    }
-    
-    async getUncomfirmedSparkBalance(): Promise<{amount: number}> {
-        const data = await this.send('', 'create', 'getUncomfirmedSparkBalance', {});
-        function isValidResponse(x: any): x is {amount: number} {
-            return x !== null && typeof x === 'object' && typeof x.amount === 'number';
-        }
-        if (isValidResponse(data)) {
-            return data;
-        } else {
-            throw new UnexpectedFirodResponse('create/getUncomfirmedSparkBalance', data);
-        }
-    }
 }
diff --git a/src/renderer/components/AnimatedTable/AddressBookItemAddress.vue b/src/renderer/components/AnimatedTable/AddressBookItemAddress.vue
index 68d571b0..4a39f3b9 100644
--- a/src/renderer/components/AnimatedTable/AddressBookItemAddress.vue
+++ b/src/renderer/components/AnimatedTable/AddressBookItemAddress.vue
@@ -4,7 +4,9 @@
     </th>
 
     <td v-else class="address">
-        {{ rowData.address }}
+        <div class="inner-address">
+            {{ rowData.address }}
+        </div>
     </td>
 </template>
 
@@ -21,4 +23,16 @@ export default {
 </script>
 
 <style scoped lang="scss">
+
+td.address {
+    width: available;
+    max-width: 1px;
+
+    .inner-address {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin-right: 5px;
+    }
+}
 </style>
\ No newline at end of file
diff --git a/src/renderer/components/AnimatedTable/AddressBookItemAddressType.vue b/src/renderer/components/AnimatedTable/AddressBookItemAddressType.vue
index 2b9bc861..484b2d5e 100644
--- a/src/renderer/components/AnimatedTable/AddressBookItemAddressType.vue
+++ b/src/renderer/components/AnimatedTable/AddressBookItemAddressType.vue
@@ -3,8 +3,10 @@
         Type
     </th>
     
-    <td v-else class="address-book-item-label">
-        {{ rowData.inputPrivacy || rowData.addressType.toLowerCase() }}
+    <td v-else class="address-type">
+        <div class="inner-address-type">
+            {{ rowData.addressType.toLowerCase() }}
+        </div>
     </td>
 </template>
 
@@ -21,10 +23,15 @@ export default {
 </script>
 
 <style scoped lang="scss">
-td.address-book-item-label {
+td.address-type {
     width: 180px;
     max-width: 180px;
-    overflow: hidden;
-    white-space: nowrap;
+
+    .inner-address-type {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin-right: 5px;
+    }
 }
 </style>
diff --git a/src/renderer/components/AnimatedTable/AnimatedTableInputPrivacy.vue b/src/renderer/components/AnimatedTable/AnimatedTableInputPrivacy.vue
new file mode 100644
index 00000000..499991a6
--- /dev/null
+++ b/src/renderer/components/AnimatedTable/AnimatedTableInputPrivacy.vue
@@ -0,0 +1,37 @@
+<template>
+    <th v-if="isHeader">
+        Type
+    </th>
+    
+    <td v-else class="input-privacy">
+        <div class="inner-input-privacy">
+            {{ rowData.inputPrivacy }}
+        </div>
+    </td>
+</template>
+
+<script>
+import VuetableFieldMixin from 'vue3-vuetable/src/components/VuetableFieldMixin.vue';
+
+export default {
+    name: "AnimatedTableInputPrivacy",
+
+    mixins: [
+        VuetableFieldMixin
+    ]
+}
+</script>
+
+<style scoped lang="scss">
+td.input-privacy {
+    width: 180px;
+    max-width: 180px;
+
+    .inner-input-privacy {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin-right: 5px;
+    }
+}
+</style>
diff --git a/src/renderer/components/AnimatedTable/TxAmount.vue b/src/renderer/components/AnimatedTable/TxAmount.vue
index ed222e85..ba46a6d2 100644
--- a/src/renderer/components/AnimatedTable/TxAmount.vue
+++ b/src/renderer/components/AnimatedTable/TxAmount.vue
@@ -13,7 +13,7 @@ import VuetableFieldMixin from 'vue3-vuetable/src/components/VuetableFieldMixin.
 import {bigintToString} from "lib/convert";
 
 export default {
-    name: 'TxAmount',
+    name: 'Amount',
 
     mixins: [
         VuetableFieldMixin
diff --git a/src/renderer/components/AnimatedTable/TxId.vue b/src/renderer/components/AnimatedTable/TxId.vue
index 4b84e5a2..b1e258fa 100644
--- a/src/renderer/components/AnimatedTable/TxId.vue
+++ b/src/renderer/components/AnimatedTable/TxId.vue
@@ -13,7 +13,7 @@
 import VuetableFieldMixin from 'vue3-vuetable/src/components/VuetableFieldMixin.vue'
 
 export default {
-    name: 'UTXOSelector',
+    name: 'TxId',
 
     mixins: [
         VuetableFieldMixin
diff --git a/src/renderer/components/AnimatedTable/UTXOLocker.vue b/src/renderer/components/AnimatedTable/UTXOLocker.vue
index 5747e8db..566a032f 100644
--- a/src/renderer/components/AnimatedTable/UTXOLocker.vue
+++ b/src/renderer/components/AnimatedTable/UTXOLocker.vue
@@ -2,37 +2,30 @@
     <th v-if="isHeader"></th>
     <td v-else>
         <div class="buttons">
-            <button v-if="!rowData.isLocked" class="solid-button recommended" @click="isLock(rowData)" style="width: 70px; height: 25px; min-width: 20px;">
+            <button v-if="!rowData.isLocked" class="solid-button recommended lock-button" @click="changeLock(rowData)">
                 Lock
             </button>
-            <button v-else class="solid-button unrecommended" @click="isLock(rowData)" style="width: 70px; height: 25px; min-width: 20px;">UnLock</button>
+            <button v-else class="solid-button unrecommended lock-button" @click="changeLock(rowData)">UnLock</button>
         </div>
     </td>
 </template>
 
 <script>
-import Vue from 'vue';
+
 import VuetableFieldMixin from 'vue3-vuetable/src/components/VuetableFieldMixin.vue';
 
 export default {
-    name: 'UTXOSelector',
+    name: 'UTXOLocker',
 
     mixins: [VuetableFieldMixin],
 
-    props: { locked: Boolean },
-
     methods: {
-        isLock(rowData) {
+        changeLock(rowData) {
             const coincontrol = [rowData.txid, rowData.index];
             rowData.isLocked == false ? $daemon.updateCoinLocks('', [coincontrol], []) : $daemon.updateCoinLocks('', [], [coincontrol]);
             rowData.isLocked = !rowData.isLocked;
-        },
-
-        lock() {
-            return this.locked;
-        },
-        unlock() {
-            return !this.locked;
+            let txidIndex = `${rowData.txid}-${rowData.index}`;
+            if(rowData.isLocked) this.vuetable.globalData[txidIndex] = false;
         }
     }
 };
@@ -42,4 +35,9 @@ export default {
 td {
     padding-right: var(--padding-base);
 }
+.lock-button {
+    width: 70px;
+    height: 25px;
+    min-width: 20px;
+}
 </style>
diff --git a/src/renderer/components/AnimatedTable/UTXOSelector.vue b/src/renderer/components/AnimatedTable/UTXOSelector.vue
index e8b3a01a..193be976 100644
--- a/src/renderer/components/AnimatedTable/UTXOSelector.vue
+++ b/src/renderer/components/AnimatedTable/UTXOSelector.vue
@@ -1,8 +1,8 @@
 <template>
     <th v-if="isHeader"></th>
     <td v-else>
-        <input v-if="!rowData.isLocked"  :id="`utxo-selector-${this.txidIndex}`" class="utxo-selector" type="checkbox" v-model="checkbox"/>
-        <input v-else :disabled="true" :id="`utxo-selector-${this.txidIndex}`" class="disable-checkbox" type="checkbox" v-model="checkbox" :checked="false"/>
+        <input v-if="!rowData.isLocked" :id="`utxo-selector-${this.txidIndex}`" class="utxo-selector" type="checkbox" v-model="vuetable.globalData[this.txidIndex]"/>
+        <input v-else :disabled="true" :id="`utxo-selector-${this.txidIndex}`" class="disable-checkbox" type="checkbox" v-model="vuetable.globalData[this.txidIndex]" :checked='false'/>
     </td>
 </template>
 
@@ -16,26 +16,10 @@ export default {
         VuetableFieldMixin
     ],
 
-    data() {
-        return {
-            checkbox: false
-        }
-    },
-
     computed: {
         txidIndex() {
             return `${this.rowData.txid}-${this.rowData.index}`;
         }
-    },
-
-    watch: {
-        rowData() {
-            this.checkbox = !!this.vuetable.globalData[this.txidIndex];
-        },
-
-        checkbox() {
-            this.vuetable.globalData[this.txidIndex] = this.checkbox;
-        }
     }
 }
 
@@ -46,6 +30,7 @@ td {
     padding-right: var(--padding-base);
 }
 input[type=checkbox].disable-checkbox {
+    padding-right: var(--padding-base);
     background-color: rgba(0,0,0,0.1);
     border: 1px solid rgba(0,0,0,0.1);
 }
diff --git a/src/renderer/components/AwaitingAnonymizationHeader.vue b/src/renderer/components/AwaitingAnonymizationHeader.vue
index 50df27f0..deb91382 100644
--- a/src/renderer/components/AwaitingAnonymizationHeader.vue
+++ b/src/renderer/components/AwaitingAnonymizationHeader.vue
@@ -1,9 +1,9 @@
 <template>
     <div>
         <div class="warning-header">
-            <div v-if="this.isSparkAllowed && availableLelantus > 0 && currentBlockHeight < lelantusGracefulPeriod">
+            <div v-if="isSparkAllowed && availableLelantus > 0 && currentBlockHeight < lelantusGracefulPeriod">
                 Firo is migrating to Spark. Redemption of coins in Lelantus will be disabled at block {{ lelantusGracefulPeriod }}. Current block is {{ currentBlockHeight }}.
-                <a id="anonymize-firo-link" href="#" @click="show = 'lelantustospark'">Click here</a> to migrate {{ bigintToString(availableLelantus) }} FIRO from Lelantus.
+                <a id="anonymize-firo-link" @click="showLelantusToSparkDialog = true">Click here</a> to migrate {{ bigintToString(availableLelantus) }} FIRO from Lelantus.
             </div>
             <div v-else>
                 <span v-if="availablePublic && nTokensNeedingAnonymization > 1">
@@ -27,18 +27,13 @@
             </div>
         </div>
 
-        <Popup v-if="show === 'lelantustospark'" >
-             <LelantusToSpark
-                @migrate="goToPassphraseStep()"
-                @ignore="cancel()"
+        <Popup v-if="showLelantusToSparkDialog" >
+             <LelantusToSparkDialog
+                @migrate="showLelantusToSparkDialog = false"
+                @ignore="showLelantusToSparkDialog = false"
             />
         </Popup>
 
-        <Popup v-if="show === 'passphrase'" >
-            <WaitOverlay v-if="waiting" />
-            <PassphraseInput v-else-if = "!waiting" v-model="passphrase" :error="error" @cancel="cancel()" @confirm="attemptSend" />
-        </Popup>
-
         <Popup v-if="showAnonymizeDialog" >
             <AnonymizeDialog
                 @cancel="showAnonymizeDialog = false"
@@ -53,7 +48,7 @@ import {mapGetters} from "vuex";
 import {bigintToString} from "lib/convert";
 import Popup from "renderer/components/shared/Popup";
 import AnonymizeDialog from "renderer/components/AnonymizeDialog";
-import LelantusToSpark from "renderer/components/SendPage/LelantusToSpark";
+import LelantusToSparkDialog from "renderer/components/LelantusToSparkDialog";
 import PassphraseInput from "renderer/components/shared/PassphraseInput";
 import {IncorrectPassphrase, FirodErrorResponse} from "daemon/firod";
 import WaitOverlay from "renderer/components/shared/WaitOverlay";
@@ -64,7 +59,7 @@ export default {
     components: {
         Popup,
         AnonymizeDialog,
-        LelantusToSpark,
+        LelantusToSparkDialog,
         PassphraseInput,
         WaitOverlay
     },
@@ -72,6 +67,7 @@ export default {
     data() {
         return {
             showAnonymizeDialog: false,
+            showLelantusToSparkDialog: false,
             passphrase: '',
             show: 'button',
             waiting: false,
@@ -101,43 +97,6 @@ export default {
 
         closeDialog() {
             this.showAnonymizeDialog = false;
-        },
-
-        cancel() {
-            this.passphrase = '';
-            this.error = null;
-            this.lelantustospark = false;
-            this.show = 'button';
-            this.$emit('cancel')
-        },
-
-        goToPassphraseStep() {
-            this.show = 'passphrase';
-        },
-
-        async attemptSend () {
-            const passphrase = this.passphrase;
-            this.passphrase = '';
-            this.waiting = true;
-            try {
-                await $daemon.lelantusToSpark(passphrase);
-            } catch (e) {
-                if (e instanceof IncorrectPassphrase) {
-                    this.error = 'Incorrect Passphrase';
-                } else if (e instanceof FirodErrorResponse) {
-                    this.error = e.errorMessage;
-                } else {
-                    this.error = `${e}`;
-                }
-                this.waiting = false;
-                this.show = 'passphrase';
-                return;
-            }
-
-            this.error = null;
-            this.waiting = false;
-            this.show = 'button';
-            this.$emit('success');
         }
     }
 }
diff --git a/src/renderer/components/LelantusToSparkDialog.vue b/src/renderer/components/LelantusToSparkDialog.vue
new file mode 100644
index 00000000..7cad9020
--- /dev/null
+++ b/src/renderer/components/LelantusToSparkDialog.vue
@@ -0,0 +1,82 @@
+<template>
+    <div>
+        <div>
+            <WaitOverlay v-if="waiting" />
+            <LelantusToSpark v-else :error="error" @ignore="cancel()" @migrate="goToPassphraseStep()" />
+        </div>
+
+        <Popup v-if="show === 'passphrase'" >
+            <WaitOverlay v-if="waiting" />
+            <PassphraseInput v-else v-model="passphrase" :error="error" @cancel="cancel()" @confirm="tryMigrate()" />
+        </Popup>
+    </div>
+</template>
+
+<script>
+
+import LelantusToSpark from "renderer/components/SendPage/LelantusToSpark";
+import PassphraseInput from "renderer/components/shared/PassphraseInput";
+import WaitOverlay from "renderer/components/shared/WaitOverlay";
+import Popup from "renderer/components/shared/Popup";
+
+export default {
+    name: 'LelantusToSparkDialog',
+
+    components: {
+        LelantusToSpark,
+        WaitOverlay,
+        PassphraseInput,
+        Popup
+    },
+
+    data() {
+        return {
+            error: null,
+            passphrase: '',
+            waiting: false,
+            show: 'button',
+        };
+    },
+
+    methods: {
+        cancel() {
+            this.passphrase = '';
+            this.error = null;
+            this.show = 'button';
+            this.$emit('ignore')
+        },
+
+        goToPassphraseStep() {
+            this.show = 'passphrase';
+        },
+
+        async tryMigrate() {
+            const passphrase = this.passphrase;
+            this.passphrase = '';
+            this.waiting = true;
+            try {
+                await $daemon.lelantusToSpark(passphrase);
+            } catch (e) {
+                if (e instanceof IncorrectPassphrase) {
+                    this.error = 'Incorrect Passphrase';
+                } else if (e instanceof FirodErrorResponse) {
+                    this.error = e.errorMessage;
+                } else {
+                    this.error = `${e}`;
+                }
+                this.waiting = false;
+                this.show = 'passphrase';
+                return;
+            }
+            this.error = null;
+            this.waiting = false;
+            this.show = 'button';
+            this.$emit('success');
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/renderer/components/ReceivePage.vue b/src/renderer/components/ReceivePage.vue
index d8e41822..002318e4 100644
--- a/src/renderer/components/ReceivePage.vue
+++ b/src/renderer/components/ReceivePage.vue
@@ -22,7 +22,7 @@
                         <input ref="label" id="receive-address-label" type="text" placeholder="Unlabelled" v-model="label" @change="changeLabel" />
                     </InputFrame>
                 </div>
-                <div class="select-option" style="margin-top:12px">
+                <div class="select-option extra-select-option">
                     <select class="selector" v-model="selectOption">
                         <option value="Spark">Spark</option>
                         <option value="Transparent">Transparent</option>
@@ -62,7 +62,6 @@ import InputFrame from "renderer/components/shared/InputFrame";
 import RefreshAddressIcon from "renderer/components/Icons/RefreshAddressIcon";
 import CopyAddressIcon from "renderer/components/Icons/CopyAddressIcon";
 import Popup from "renderer/components/shared/Popup";
-import {IncorrectPassphrase} from "daemon/firod";
 import AddressBookItemAddressType from "renderer/components/AnimatedTable/AddressBookItemAddressType";
 
 export default {
@@ -77,10 +76,8 @@ export default {
     },
 
     data() {
-        let check = this.selectOption ? this.selectOption : 'Spark';
-        let addr = $store.getters['AddressBook/receiveAddresses'].filter(a => a.addressType === check)[0];
         return {
-            address: (addr || {address: null}).address,
+            address: ($store.getters['AddressBook/receiveAddresses'].filter(a => a.addressType === this.selectOption ? this.selectOption : 'Spark')[0] || {address: null}).address,
             label: '',
             _quickLabel: null,
             qrCode: null,
@@ -183,7 +180,7 @@ export default {
                 let check = this.selectOption ? this.selectOption : 'Spark';
                 this.address = $store.getters['AddressBook/receiveAddresses'].filter(a => a.addressType === check)[0].address;
                 this.option = this.selectOption;
-            } 
+            }
         },
 
         async changeLabel(ev) {
@@ -283,6 +280,10 @@ export default {
                     }
                 }
             }
+
+            .extra-select-option {
+                margin-top:12px;
+            }
         }
 
         .qr-code-container {
diff --git a/src/renderer/components/SendPage.vue b/src/renderer/components/SendPage.vue
index b608c2c9..1d8219bc 100644
--- a/src/renderer/components/SendPage.vue
+++ b/src/renderer/components/SendPage.vue
@@ -180,6 +180,9 @@
                         :computed-tx-fee="transactionFee"
                         :subtract-fee-from-amount="subtractFeeFromAmount"
                         :coin-control="coinControl"
+                        :isSparkAllowed="isSparkAllowed"
+                        :isSparkAddr="isSparkAddr"
+                        :isTransparentAddress="() => isTransparentAddress()"
                         @success="() => cleanupForm()"
                         @reset="() => cleanupForm()"
                     />
@@ -261,7 +264,6 @@ export default {
             showConnectionTransaction: false,
             connectionTransaction: null,
             selectOption: 'Spark',
-            availableSparkFiro: 0,
             isSparkAddr: null
         }
     },
@@ -274,7 +276,6 @@ export default {
             isSparkAllowed: 'ApiStatus/isSparkAllowed',
             isBlockchainSynced: 'ApiStatus/isBlockchainSynced',
             availablePrivate: 'Balance/availablePrivate',
-            availableLelantus: 'Balance/availableLelantus',
             availablePublic: 'Balance/availablePublic',
             sendAddresses: 'AddressBook/sendAddresses',
             addressBook: 'AddressBook/addressBook',
@@ -357,7 +358,7 @@ export default {
             return (value) => {
                 if (!value) return '';
 
-                if (isValidAddress(value, this.network) || isValidPaymentCode(value, this.network))
+                if (isValidAddress(value, this.network) || isValidPaymentCode(value, this.network) || this.validateSparkAddress())
                     return true;
 
                 return 'The Firo address you entered is invalid';
@@ -421,8 +422,8 @@ export default {
         filteredSendAddresses () {
             this.$nextTick(() => this.$refs.animatedTable && this.$refs.animatedTable.reload());
             return this.sendAddresses
-                .filter(address => address.label.includes(this.filter) || address.address.includes(this.filter))
-                .map(address => ({ isSelected: address.address === this.address, ...address })).filter(address => address.addressType === this.selectOption);
+                .filter(address => (address.label.includes(this.filter) || address.address.includes(this.filter)) && address.addressType === this.selectOption)
+                .map(address => ({ isSelected: address.address === this.address, ...address }));
         },
 
         showAddToAddressBook () {
diff --git a/src/renderer/components/SendPage/GoPrivate.vue b/src/renderer/components/SendPage/GoPrivate.vue
index ed4af4f2..67c28993 100644
--- a/src/renderer/components/SendPage/GoPrivate.vue
+++ b/src/renderer/components/SendPage/GoPrivate.vue
@@ -1,6 +1,6 @@
 <template>
-    <div class="info-popup confirm-step" style="width: 500px; height: 250px;">
-        <div class="title" style="margin-bottom:30px">
+    <div class="info-popup confirm-step goprivate-popup">
+        <div class="title goprivate-title">
             Make this a private transaction
         </div>
         <div class="info-item">
@@ -9,8 +9,7 @@
                 You are using a transparent transaction, please go private. If this is a masternode transaction, you do not have to go private
             </label>
         </div>
-
-        <div class="buttons"  style="width: 500px; height: 60px;margin-top: 35px;margin-left: -15px">
+        <div class="goprivate-buttons">
             <button class="solid-button unrecommended" @click="$emit('ignore')">Ignore</button>
             <button class="solid-button recommended" @click="$emit('go_private')">Go Private</button>
         </div>
@@ -35,6 +34,16 @@ export default {
 
 <style scoped lang="scss">
 @import "src/renderer/styles/info-popup";
+
+.goprivate-popup {
+    width: 500px;
+    height: 250px;
+}
+
+.goprivate-title{
+    margin-bottom:30px;
+}
+
 .info-item {
     word-wrap: break-word;
     background-color: #FEF3C7;
@@ -54,4 +63,13 @@ export default {
     }
 
 }
+
+.goprivate-buttons{
+    width: 500px !important;
+    height: 60px;
+    display: flex;
+    justify-content: space-evenly;
+    margin-top: 35px;
+    margin-left: -15px;
+}
 </style>
diff --git a/src/renderer/components/SendPage/InputSelection.vue b/src/renderer/components/SendPage/InputSelection.vue
index 19cbdca2..7d4590c4 100644
--- a/src/renderer/components/SendPage/InputSelection.vue
+++ b/src/renderer/components/SendPage/InputSelection.vue
@@ -80,8 +80,7 @@ export default {
         ourUnspentUTXOs() {
             return this.availableUTXOsWithLock
                 .filter(tx => tx.isPrivate === this.isPrivate)
-                .sort((a, b) => Number(b.amount - a.amount) || a.txid.localeCompare(b.txid) || a.index - b.index)
-                .map(tx => ({...tx, uniqId: `${tx.txid}-${tx.index}`}));
+                .sort((a, b) => Number(b.amount - a.amount) || a.txid.localeCompare(b.txid) || a.index - b.index);
         }
     },
 
diff --git a/src/renderer/components/SendPage/LelantusToSpark.vue b/src/renderer/components/SendPage/LelantusToSpark.vue
index 8569fd8f..a2439f15 100644
--- a/src/renderer/components/SendPage/LelantusToSpark.vue
+++ b/src/renderer/components/SendPage/LelantusToSpark.vue
@@ -1,6 +1,6 @@
 <template>
-    <div class="info-popup confirm-step" style="width: 500px; height: 250px;">
-        <div class="title" style="margin-bottom:30px">
+    <div class="info-popup confirm-step lelantustospark-popup">
+        <div class="title lelantustospark-title">
             Migrate funds from Lelantus to Spark
         </div>
         <div class="info">
@@ -9,8 +9,7 @@
                 Firo is migrating to Spark. Please migrate your funds.
             </label>
         </div>
-
-        <div class="buttons"  style="width: 500px; height: 60px;margin-top: 35px;margin-left: -15px">
+        <div class="lelantustospark-buttons">
             <button class="solid-button unrecommended" @click="$emit('ignore')">Ignore</button>
             <button class="solid-button recommended" @click="$emit('migrate')">Migrate</button>
         </div>
@@ -35,6 +34,16 @@ export default {
 
 <style scoped lang="scss">
 @import "src/renderer/styles/info-popup";
+
+.lelantustospark-popup {
+    width: 500px;
+    height: 250px;
+}
+
+.lelantustospark-title {
+    margin-bottom: 30px;
+}
+
 .info {
     word-wrap: break-word;
     background-color: #FEF3C7;
@@ -47,15 +56,25 @@ export default {
     display: flex;
     align-items: center;
 }
-    .info-item {
-        margin-right: 45px;
-    }
 
-    .info-icon {
-        height: 18px;
-        width: 18px;
-        margin-left: 40px;
-        margin-right: 5px;
-        margin-top: -4px;
-    }
+.info-item {
+    margin-right: 45px;
+}
+
+.info-icon {
+    height: 18px;
+    width: 18px;
+    margin-left: 40px;
+    margin-right: 5px;
+    margin-top: -4px;
+}
+
+.lelantustospark-buttons {
+    width: 500px !important;
+    height: 60px;
+    display: flex;
+    justify-content: space-evenly;
+    margin-top: 35px;
+    margin-left: -15px;
+}
 </style>
diff --git a/src/renderer/components/SendPage/SendFlow.vue b/src/renderer/components/SendPage/SendFlow.vue
index 2a5abd07..d592ccb6 100644
--- a/src/renderer/components/SendPage/SendFlow.vue
+++ b/src/renderer/components/SendPage/SendFlow.vue
@@ -5,15 +5,15 @@
                 Reset
             </button>
 
-            <button v-if= "this.isSpark && this.$parent.availableLelantus > 0 && currentBlockHeight < lelantusGracefulPeriod" id="send-button" class="solid-button recommended" :disabled="disabled" @click="show = 'lelantustospark'">
+            <button v-if= "isSparkAllowed && availableLelantus > 0 && currentBlockHeight < lelantusGracefulPeriod" id="send-button" class="solid-button recommended" :disabled="disabled" @click="show = 'lelantustospark'">
                 Send
             </button>
 
-            <button v-else-if= "!this.isPrivate && !this.$parent.isSparkAddr && this.isSpark && !this.goprivate" id="send-button" class="solid-button recommended" :disabled="disabled" @click="show = 'goprivate'">
+            <button v-else-if= "!isPrivate && !isSparkAddr && isSparkAllowed && !goprivate" id="send-button" class="solid-button recommended" :disabled="disabled" @click="show = 'goprivate'">
                 Send
             </button>
 
-            <button v-else= "" id="send-button" class="solid-button recommended" :disabled="disabled" @click="show = 'confirm'">
+            <button v-else id="send-button" class="solid-button recommended" :disabled="disabled" @click="show = 'confirm'">
                 Send
             </button>
         </div>
@@ -42,7 +42,7 @@
             <GoPrivate
                 v-else-if="show === 'goprivate'"
                 @ignore="goToConfirmStep()"
-                @go_private="goToPrivate()"
+                @go_private="reset()"
             />
             <LelantusToSpark
                 v-else-if="show === 'lelantustospark'"
@@ -104,7 +104,10 @@ export default {
         subtractFeeFromAmount: Boolean,
         isPrivate: Boolean,
         coinControl: Array,
-        asset: String | Number
+        asset: String | Number,
+        isSparkAllowed: Boolean,
+        isSparkAddr: Boolean,
+        isTransparentAddress: Function,
     },
 
     computed: {
@@ -116,14 +119,11 @@ export default {
             tokenData: 'Elysium/tokenData',
             currentBlockHeight: 'ApiStatus/currentBlockHeight',
             lelantusGracefulPeriod: 'ApiStatus/lelantusGracefulPeriod',
+            availableLelantus: 'Balance/availableLelantus',
         }),
 
         totalAmount() {
             return this.subtractFeeFromAmount ? this.amount : this.amount + this.computedTxFee;
-        },
-
-        isSpark() {
-            return this.$parent.isSparkAllowed
         }
     },
 
@@ -138,7 +138,7 @@ export default {
         },
 
         goToConfirmStepWithCheckingPrivate() {
-            if(!this.isPrivate && !this.$parent.isSparkAddr && this.isSpark && !this.goprivate) {
+            if(!this.isPrivate && !this.isSparkAddr && this.isSparkAllowed && !this.goprivate) {
                 this.show = 'goprivate';
                 this.goprivate = true;
             } else {
@@ -156,11 +156,6 @@ export default {
             this.show = 'button';
         },
 
-        goToPrivate() {
-            this.$parent.cleanupForm();
-            this.cancel();
-        },
-
         reset() {
             this.cancel();
             this.$emit('reset');
@@ -171,7 +166,7 @@ export default {
             const passphrase = this.passphrase;
             this.passphrase = '';
             this.goprivate = false;
-
+            const coinControl = this.coinControl || this.selectInputs(this.isPrivate, this.isSparkAllowed, this.isTransparentAddress(), this.amount, this.txFeePerKb, this.subtractFeeFromAmount);
             try {
                 if (this.migrate) {
                     await $daemon.lelantusToSpark(passphrase);
@@ -187,22 +182,19 @@ export default {
                         await $daemon.recoverElysium(passphrase);
                         await $daemon.sendElysium(passphrase, id, this.address, this.amount);
                     }
-                } else if (this.isPrivate && !this.isSpark) {
+                } else if (this.isPrivate && !this.isSparkAllowed) {
                     // Under the hood we'll always use coin control because the daemon uses a very  complex stochastic
                     // algorithm that interferes with fee calculation.
-                    const coinControl = this.coinControl || this.selectInputs(true, false, this.$parent.isTransparentAddress, this.amount, this.txFeePerKb, this.subtractFeeFromAmount);
                     await $daemon.sendLelantus(passphrase, this.address, this.amount, this.txFeePerKb,
                         this.subtractFeeFromAmount, coinControl);
-                } else if (this.isPrivate && this.isSpark) {
+                } else if (this.isPrivate && this.isSparkAllowed) {
                     // Under the hood we'll always use coin control because the daemon uses a very  complex stochastic
                     // algorithm that interferes with fee calculation.
-                    const coinControl = this.coinControl || this.selectInputs(true, true, this.$parent.isTransparentAddress, this.amount, this.txFeePerKb, this.subtractFeeFromAmount);
                     await $daemon.spendSpark(passphrase, this.label, this.address, this.amount, this.txFeePerKb,
                         this.subtractFeeFromAmount, coinControl);
-                } else if (!this.isPrivate && this.isSpark && this.$parent.isSparkAddr) {
+                } else if (!this.isPrivate && this.isSparkAllowed && this.isSparkAddr) {
                     // Under the hood we'll always use coin control because the daemon uses a very  complex stochastic
                     // algorithm that interferes with fee calculation.
-                    const coinControl = this.coinControl || this.selectInputs(false, true, this.$parent.isTransparentAddress, this.amount, this.txFeePerKb, this.subtractFeeFromAmount);
                     await $daemon.mintSpark(passphrase, this.label, this.address, this.amount, this.txFeePerKb,
                         this.subtractFeeFromAmount, coinControl);
                 } else {
@@ -216,7 +208,7 @@ export default {
 
                     // Under the hood we'll always use coin control because the daemon uses a very  complex stochastic
                     // algorithm that interferes with fee calculation.
-                    const coinControl = this.coinControl || this.selectInputs(false, false, this.$parent.isTransparentAddress, this.amount, this.txFeePerKb, this.subtractFeeFromAmount);
+                    const coinControl = this.coinControl || this.selectInputs(this.isPrivate, this.isSparkAllowed, this.isTransparentAddress(), this.amount, this.txFeePerKb, this.subtractFeeFromAmount);
                     try {
                         await $daemon.publicSend(passphrase, this.label, this.address, this.amount, this.txFeePerKb,
                             this.subtractFeeFromAmount, coinControl);
diff --git a/src/renderer/components/Sidebar/Balance.vue b/src/renderer/components/Sidebar/Balance.vue
index d40fbda5..390ff7a3 100644
--- a/src/renderer/components/Sidebar/Balance.vue
+++ b/src/renderer/components/Sidebar/Balance.vue
@@ -43,12 +43,6 @@ export default {
         Amount
     },
 
-    data () {
-        return {
-            availableSparkFiro: 0
-        }
-    },
-
     computed: {
         ...mapGetters({
             availablePrivate: 'Balance/availablePrivate',
diff --git a/src/renderer/components/TransactionsPage.vue b/src/renderer/components/TransactionsPage.vue
index 53a097c8..ea02ae23 100644
--- a/src/renderer/components/TransactionsPage.vue
+++ b/src/renderer/components/TransactionsPage.vue
@@ -6,6 +6,7 @@
 
                 <div class="select-option" style="margin-top:12px;margin-bottom:12px">
                     <select class="selector" v-model="selectOption">
+                        <option value="all">All</option>
                         <option value="sparkmint">SparkMint</option>
                         <option value="sparkspend">SparkSpend</option>
                         <option value="public">Public</option>
@@ -57,12 +58,12 @@ import Label from 'renderer/components/AnimatedTable/AnimatedTableLabel';
 import Popup from "renderer/components/shared/Popup";
 import { bigintToString } from "lib/convert";
 import SearchInput from "renderer/components/shared/SearchInput";
-import AddressType from "renderer/components/AnimatedTable/AddressBookItemAddressType";
+import InputPrivacy from "renderer/components/AnimatedTable/AnimatedTableInputPrivacy";
 
 const tableFields = [
     {name: markRaw(RelativeDate), width: '160pt'},
     {name: markRaw(Label)},
-    {name: markRaw(AddressType)},
+    {name: markRaw(InputPrivacy)},
     {name: markRaw(Amount), width: '160pt'},
 ];
 
@@ -84,7 +85,7 @@ export default {
             newTableData: [],
             currentPage: 1,
             selectedTx: null,
-            selectOption: 'sparkmint'
+            selectOption: 'all'
         }
     },
 
@@ -123,7 +124,7 @@ export default {
 
         latestTableData () {
             const tableData = [];
-            let txos = this.userVisibleTransactions.filter(a => a.inputPrivacy === this.selectOption);
+            let txos = this.userVisibleTransactions.filter(a => this.selectOption === 'all' ? true : a.inputPrivacy === this.selectOption);
             for (const txo of txos) {
                 tableData.push({
                     id: `${txo.blockHash}-${txo.txid}-${txo.index}`,
diff --git a/src/renderer/components/shared/PrivatePublicBalance.vue b/src/renderer/components/shared/PrivatePublicBalance.vue
index 56fbfbfb..7cde9ece 100644
--- a/src/renderer/components/shared/PrivatePublicBalance.vue
+++ b/src/renderer/components/shared/PrivatePublicBalance.vue
@@ -38,8 +38,7 @@ export default {
 
     data() {
         return {
-            isPrivate: true,
-            availableSparkFiro: 0
+            isPrivate: true
         };
     },
 
diff --git a/src/store/modules/ApiStatus.ts b/src/store/modules/ApiStatus.ts
index b58d7776..27b0ab54 100644
--- a/src/store/modules/ApiStatus.ts
+++ b/src/store/modules/ApiStatus.ts
@@ -44,7 +44,8 @@ const getters = {
     isLocked: (state): boolean | undefined => state.apiStatus.walletLock,
     isReindexing: (state): boolean => state.apiStatus.reindexing,
     isLelantusAllowed: (state): boolean => !state.apiStatus.disabledSporks.includes("lelantus"),
-    isSparkAllowed: (state, getters): boolean => getters.apiStatus.isSpark,
+    isSparkAllowed: (state): boolean => state.apiStatus.isSpark,
+    lelantusGracefulPeriod: (state): number => state.apiStatus.lelantusGracefulPeriod,
     smartFeePerKb: (state): bigint => state.apiStatus.smartFeePerKb,
     isBlockchainSynced: (state): boolean => ['regtest', 'regtest-ql'].includes(state.apiStatus.network) || state.apiStatus.synced,
     connections: (state): number => state.apiStatus.connections
diff --git a/src/store/modules/Balance.ts b/src/store/modules/Balance.ts
index f3c3b597..c436db7e 100644
--- a/src/store/modules/Balance.ts
+++ b/src/store/modules/Balance.ts
@@ -6,7 +6,6 @@ const getters = {
             unconfirmedPublicChange, locked, immature, availableLelantus, unconfirmedLelantus, unconfirmedLelantusChange, 
             availableSpark, unconfirmedSpark, unconfirmedSparkChange] = [0n, 0n, 0n, 0n, 0n, 0n, 0n, 0n, 0n, 0n, 0n, 0n, 0n, 0n];
         let nextHeight: number = rootGetters['ApiStatus/currentBlockHeight'] + 1;
-        let isSparkAllowed: boolean = rootGetters['ApiStatus/isSparkAllowed'];
 
         for (const txo of <TXO[]>rootGetters['Transactions/UTXOs']) {
             if (!txo.isToMe || txo.isSpent) continue;
@@ -24,9 +23,9 @@ const getters = {
             else unconfirmedPublic += txo.amount;
         }
 
-        availablePrivate = isSparkAllowed ? availableSpark : availableLelantus;
-        unconfirmedPrivate = isSparkAllowed ? unconfirmedSpark : unconfirmedLelantus;
-        unconfirmedPrivateChange = isSparkAllowed ? unconfirmedSparkChange : unconfirmedLelantusChange;
+        availablePrivate = availableSpark + availableLelantus;
+        unconfirmedPrivate = unconfirmedSpark + unconfirmedLelantus;
+        unconfirmedPrivateChange = unconfirmedSparkChange + unconfirmedLelantusChange;
 
         return {
             availablePrivate,
@@ -50,7 +49,7 @@ const getters = {
     locked: (state, getters) => getters.balances.locked,
     immature: (state, getters) => getters.balances.immature,
     pendingChange: (state, getters) => getters.balances.unconfirmedPrivateChange + getters.balances.unconfirmedPrivate + getters.balances.unconfirmedPublicChange,
-    incoming: (dtate, getters) =>  getters.balances.unconfirmedPublic,
+    incoming: (state, getters) =>  getters.balances.unconfirmedPublic,
 }
 
 export default {
diff --git a/src/store/modules/Transactions.ts b/src/store/modules/Transactions.ts
index 581e5c08..e059a2bc 100644
--- a/src/store/modules/Transactions.ts
+++ b/src/store/modules/Transactions.ts
@@ -141,7 +141,7 @@ const mutations = {
 };
 
 function selectUTXOs(isPrivate: boolean, isSpark: boolean, istransparentaddress: boolean, amount: bigint, feePerKb: bigint, subtractFeeFromAmount: boolean, availableUTXOs: TXO[], coinControl: boolean): [bigint, TXO[]] {
-    let constantSize;
+    let constantSize = 0n;
     if(!isPrivate && istransparentaddress) {
         constantSize = 78n;
     } else if (isPrivate && !isSpark) {
@@ -195,7 +195,6 @@ function selectUTXOs(isPrivate: boolean, isSpark: boolean, istransparentaddress:
         .sort((a, b) => Number(b.amount - a.amount));
 
     let gathered = 0n;
-
     const selectedUTXOs = [];
     if (!isPrivate && isSpark && !istransparentaddress) {
         let destinations = [];
@@ -278,7 +277,6 @@ const getters = {
         )
     },
     lockedUTXOs: (state, getters) => getters.UTXOs.filter((txo: TXO) => txo.isLocked),
-
     availableUTXOsWithLock: (state, getters, rootState, rootGetters): TXO[] => {
         let isSparkAllowed: boolean = rootGetters['ApiStatus/isSparkAllowed'];
         return getters.UTXOs.filter((txo: TXO) =>

From c62f5fa57ba57bb1c3fa226dfce7b1bec9e56cb3 Mon Sep 17 00:00:00 2001
From: giangnamnabka <giangnam.na.bka@gmail.com>
Date: Wed, 2 Aug 2023 15:29:39 +0700
Subject: [PATCH 2/2] update review issues

---
 src/renderer/components/SendPage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/SendPage.vue b/src/renderer/components/SendPage.vue
index 1d8219bc..d35a0c81 100644
--- a/src/renderer/components/SendPage.vue
+++ b/src/renderer/components/SendPage.vue
@@ -512,11 +512,11 @@ export default {
         },
 
         address() {
+            this.validateSparkAddress();
             const a = this.addressBook[this.address];
             if (a && a.purpose === 'send' && a.label !== this.label) {
                 this.addToAddressBook();
             }
-            this.validateSparkAddress();
         },
 
         selectedAsset() {