From 7ea4ab654b5acb52f15010e038e1fb32413e3f7d Mon Sep 17 00:00:00 2001
From: Duddino <duddino@duddino.com>
Date: Mon, 2 Dec 2024 10:03:36 +0100
Subject: [PATCH 1/2] Governance vue (#375)

* Initial rewrite

* Desktop governance page

* Finish governance table for mobile

* Change useSettings to store

* Add use_masternode

* Split masternode component and implement CreateMasternode

* Move import wallet inside RestoreWallet component

* Add import masternode form

* Add import wallet box

* Fix masternode import page

* Add controller

* Finish mn controller

* Add create proposal modal

* Add automatic proposal confirmation

* Fix start error

* Add Create Proposal row

* Add proposal finalisation

* Add vote popup

* Flipdown reactive

* Split BudgetAllocated and MonthlyBudget components

Split BudgetAllocated and MonthlyBudget components
Fix the render for mobile

* Clean up some dom elements

* Fix over budget calculation

* Add i18n mock

* Add governance tests and test-ids.

Fixed some inconsistencies found when testing

* Remove unused component

* Fix stake balance clearing mocks instead of returing function

* Improve translation mock

* Add masternode component tests

* Re-apply #394 to vue (Remove governance dots on mobile)

* Fix minor merge errors

* Fix local proposal status

* Add actual currency

* Add finalizeProposalButton v-if to tests

* Clean up code

* Remove should be fine

* Clean up masternode code and update when tab is clicked

* Update governance when tab is clicked

* Remove legacy exports

* Add mastenrode and governance tab to tests

* Fix test not passing on machines with different timezones

* Fix eslint warnings

* Apply #392 to vue

* Remove console.logs

* Fix eslint

* Fix tests

* Change createAlert

* Fix overbudget bug

* Fix undefined alert

* Fix post-merge import

* Add alert when trying to vote without a masternode

* Open explorer when clicking on address

* Remove openExplorer event

* Update test

* Revert createMasternode logic

* Teleport confirmVoteModal and style cancel button

* Fix teleport test

* Fix mn starting not working

* Fix button height being different

* Fix close bug

* Fix vote

* Readd getBlockbookUrl

* Update possible UTXOs on tab click and when creating mn

* Add missing import

* Fix buttons

* Try remove this idk

---------

Co-authored-by: Duddino Gatto <duddinogatto@pm.me>
Co-authored-by: JSKitty <mail@jskitty.cat>
---
 assets/icons/icon-arrow.svg                   |    9 +
 assets/style/style.css                        |    3 +-
 index.template.html                           |  302 +---
 locale/en/translation.toml                    |    1 +
 locale/template/translation.toml              |    1 +
 package-lock.json                             |   20 +-
 package.json                                  |    1 +
 scripts/__mocks__/i18n.js                     |   29 +
 scripts/composables/use_masternode.js         |   50 +
 scripts/composables/use_settings.js           |    5 +-
 scripts/composables/use_wallet.js             |   14 +
 scripts/dashboard/Dashboard.vue               |   20 +-
 scripts/dashboard/RestoreWallet.vue           |   20 +-
 scripts/dashboard/WalletButtons.vue           |    4 +-
 scripts/global.js                             | 1245 +----------------
 scripts/governance/BudgetAllocated.vue        |   67 +
 scripts/governance/Flipdown.vue               |   34 +
 scripts/governance/Governance.vue             |  298 ++++
 scripts/governance/LocalProposalStatus.vue    |   64 +
 scripts/governance/MobileProposalPayment.vue  |   60 +
 scripts/governance/MobileProposalRow.vue      |   34 +
 scripts/governance/MobileProposalVote.vue     |   28 +
 scripts/governance/MobileProposalVotes.vue    |   39 +
 scripts/governance/MonthlyBudget.vue          |   79 ++
 scripts/governance/ProposalCreateModal.vue    |  172 +++
 scripts/governance/ProposalName.vue           |   44 +
 scripts/governance/ProposalPayment.vue        |   54 +
 scripts/governance/ProposalRow.vue            |  124 ++
 scripts/governance/ProposalStatus.vue         |   93 ++
 scripts/governance/ProposalVotes.vue          |   34 +
 scripts/governance/ProposalsTable.vue         |  138 ++
 scripts/governance/status.js                  |   48 +
 scripts/index.js                              |    7 -
 scripts/masternode.js                         |    8 +-
 scripts/masternode/CreateMasternode.vue       |  216 +++
 scripts/masternode/Masternode.vue             |  177 +++
 scripts/masternode/MasternodeController.vue   |  161 +++
 scripts/masternode/NewMasternodeList.vue      |  204 +++
 scripts/misc.js                               |   43 +
 scripts/network/network.js                    |    5 +-
 scripts/settings.js                           |    2 -
 scripts/stake/Stake.vue                       |   17 +-
 scripts/utils.js                              |   10 +
 test_setup.js                                 |   14 +-
 tests/components/StakeBalance.test.js         |    2 +-
 .../governance/BudgetAllocated.test.js        |   24 +
 tests/components/governance/Flipdown.test.js  |   25 +
 .../governance/LocalProposalStatus.test.js    |   61 +
 .../governance/MonthlyBudget.spec.js          |   20 +
 .../governance/ProposalCreateModal.spec.js    |   56 +
 .../governance/ProposalName.spec.js           |   48 +
 .../governance/ProposalPayment.spec.js        |   49 +
 .../components/governance/ProposalRow.spec.js |   96 ++
 .../governance/ProposalStatus.spec.js         |   80 ++
 .../governance/ProposalVotes.spec.js          |   34 +
 .../masternode/CreateMasternode.spec.js       |  117 ++
 .../masternode/MasternodeController.spec.js   |   66 +
 .../proposal_validator/dummy_proposals.json   |  555 ++++++++
 .../proposal_validator.spec.js                |   14 +
 59 files changed, 3646 insertions(+), 1599 deletions(-)
 create mode 100644 assets/icons/icon-arrow.svg
 create mode 100644 scripts/__mocks__/i18n.js
 create mode 100644 scripts/composables/use_masternode.js
 create mode 100644 scripts/governance/BudgetAllocated.vue
 create mode 100644 scripts/governance/Flipdown.vue
 create mode 100644 scripts/governance/Governance.vue
 create mode 100644 scripts/governance/LocalProposalStatus.vue
 create mode 100644 scripts/governance/MobileProposalPayment.vue
 create mode 100644 scripts/governance/MobileProposalRow.vue
 create mode 100644 scripts/governance/MobileProposalVote.vue
 create mode 100644 scripts/governance/MobileProposalVotes.vue
 create mode 100644 scripts/governance/MonthlyBudget.vue
 create mode 100644 scripts/governance/ProposalCreateModal.vue
 create mode 100644 scripts/governance/ProposalName.vue
 create mode 100644 scripts/governance/ProposalPayment.vue
 create mode 100644 scripts/governance/ProposalRow.vue
 create mode 100644 scripts/governance/ProposalStatus.vue
 create mode 100644 scripts/governance/ProposalVotes.vue
 create mode 100644 scripts/governance/ProposalsTable.vue
 create mode 100644 scripts/governance/status.js
 create mode 100644 scripts/masternode/CreateMasternode.vue
 create mode 100644 scripts/masternode/Masternode.vue
 create mode 100644 scripts/masternode/MasternodeController.vue
 create mode 100644 scripts/masternode/NewMasternodeList.vue
 create mode 100644 tests/components/governance/BudgetAllocated.test.js
 create mode 100644 tests/components/governance/Flipdown.test.js
 create mode 100644 tests/components/governance/LocalProposalStatus.test.js
 create mode 100644 tests/components/governance/MonthlyBudget.spec.js
 create mode 100644 tests/components/governance/ProposalCreateModal.spec.js
 create mode 100644 tests/components/governance/ProposalName.spec.js
 create mode 100644 tests/components/governance/ProposalPayment.spec.js
 create mode 100644 tests/components/governance/ProposalRow.spec.js
 create mode 100644 tests/components/governance/ProposalStatus.spec.js
 create mode 100644 tests/components/governance/ProposalVotes.spec.js
 create mode 100644 tests/components/masternode/CreateMasternode.spec.js
 create mode 100644 tests/components/masternode/MasternodeController.spec.js
 create mode 100644 tests/unit/proposal_validator/dummy_proposals.json
 create mode 100644 tests/unit/proposal_validator/proposal_validator.spec.js

diff --git a/assets/icons/icon-arrow.svg b/assets/icons/icon-arrow.svg
new file mode 100644
index 000000000..2fb54d81f
--- /dev/null
+++ b/assets/icons/icon-arrow.svg
@@ -0,0 +1,9 @@
+<!-- Fuck why doesn't prettier beautify this? -->
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+     viewBox="0 0 32 32"
+    >
+                            <path
+                                d="M23.328 16.707L13.121 26.914a.5.5 0 01-.707 0l-2.828-2.828a.5.5 0 010-.707L16.964 16 9.586 8.621a.5.5 0 010-.707l2.828-2.828a.5.5 0 01.707 0l10.207 10.207a1 1 0 010 1.414z"
+                            ></path>
+                        </svg>
diff --git a/assets/style/style.css b/assets/style/style.css
index ad0f13031..220809070 100644
--- a/assets/style/style.css
+++ b/assets/style/style.css
@@ -2227,7 +2227,6 @@ a {
     }
 
     .row {
-        margin-left: 1px;
         margin-right: 1px;
     }
 
@@ -4294,4 +4293,4 @@ textarea::placeholder {
     .mobileVote .pivx-button-outline {
         margin-right:7px;
     }
-}
\ No newline at end of file
+}
diff --git a/index.template.html b/index.template.html
index 775177f0e..d0ffa2ab9 100644
--- a/index.template.html
+++ b/index.template.html
@@ -157,44 +157,6 @@ <h3 class="modal-title" id="confirmModalTitle" style="text-align: center; width:
           </div>
         </div>
 
-        <!-- Create Masternode -->
-        <div class="modal fade" id="createMasternodeModal" tabindex="-1" aria-labelledby="createMasternodeModalLabel" role="dialog" aria-hidden="true">
-          <div class="modal-mask black-text" style="z-index: 2000;background-color: rgba(32, 20, 54, 0.86);">
-            <div class="modal-dialog masternodeModalDialog modal-dialog-centered" role="document">
-              <div class="modal-content exportKeysModalColor">
-                <div class="modal-header" style="z-index: 101;">
-                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <i class="fa-solid fa-xmark closeCross"></i>
-                  </button>
-                </div>
-                <div class="modal-body center-text" style="z-index:100; margin-top: -35px; padding-bottom: 35px;">
-                  
-                  <div class="container">
-                    <h4>Create a masternode</h4>
-                    <span style="color: #af9cc6; margin-bottom: 23px; display: block;">This action requires <b>10,000 PIV</b> in collateral.</span>
-                    <input class="hide-element" type="text" />
-                    <div style="display: block; text-align: left;">
-                      <p style="margin-bottom: 6px; color: #af9cc6;">Choose your Masternode type</p>
-                      <select id="mnCreateType" style="display: block; text-align: left;" placeholder="Masternode collateral tx" class="form-control">
-                        <option value="VPS"> Self-hosted (a masternode server ran by you)</option>
-                        <option value="Third Party"> Third Party (a masternode server ran by someone else)</option>
-                      </select>
-                      <br />
-                      <br />
-                    </div>
-
-                    <button onclick="MPW.createMasternode()" class="pivx-button-small" style="height: 42px; width: 228px;">
-                      <span class="buttoni-text">
-                        <span id="plus-icon2" class="plus-icon"></span>
-                        Create Masternode</span>
-                    </button>
-                  </div>
-
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
 
         <div class="container containerMobileApp">
           <div class="row no-gutters">
@@ -217,268 +179,8 @@ <h1 class="pivx-bold-title center-text">
 
               <div id="DashboardTab"> </div>
               <div id="StakingTab" class="tabcontent"> </div>
-              <div id="Governance" class="tabcontent">
-                <div class="col-md-12 title-section float-left rm-pd">
-                  <span style="font: 23px 'Montserrat Regular'; text-align: center; display: block; font-weight: 300;">Vote on Governance</span>
-                  <h3 data-i18n="navGovernance" class="pivx-bold-title center-text">Proposals</h3>
-                  <p data-i18n="govSubtext" class="center-text">From this tab you can check the proposals and, if you have a masternode, be a part of the <b>DAO</b> and vote!</p>
-                </div>
-
-
-                <div class="row mb-5">
-                  <div class="col-6 col-lg-3 text-center governBudgetCard">
-                    <span data-i18n="govMonthlyBudget" style="font-weight:400; color:#E9DEFF; font-size: 18px;">Monthly Budget</span>
-
-                    <div style="width: 180px; background-color:#3b1170; margin-top:11px; border-radius: 9px; padding-left: 13px; padding-right: 13px; padding-bottom: 6px; padding-top: 4px;">
-                      <span style="font-size: 19px; color:#E9DEFF;"><span id="totalGovernanceBudget">-</span> <span style="color:#9131ea; font-size: 16px; position: relative; top: 1px;">PIV</span></span>
-                      <hr style="border-top-width: 2px; background-color: #201431; margin-top: 5px; margin-bottom: -2px; margin-left: -13px; margin-right: -13px;">
-                      <span style="font-size: 12px; color:#AF9CC6;"><span id="totalGovernanceBudgetValue">-</span></span>
-                    </div>
-                  </div>
-                  <div class="col-6 col-lg-3 text-center governBudgetCard for-mobile">
-                    <span data-i18n="govAllocBudget" style="font-weight:400; color:#E9DEFF; font-size: 18px;">Budget Allocated</span>
-
-                    <div style="width: 180px; background-color:#3b1170; margin-top:11px; border-radius: 9px; padding-left: 13px; padding-right: 13px; padding-bottom: 6px; padding-top: 4px;">
-                      <span style="font-size: 19px; color:#E9DEFF;"><span id="allocatedGovernanceBudget">-</span> <span style="color:#9131ea; font-size: 16px; position: relative; top: 1px;">PIV</span></span>
-                      <hr style="border-top-width: 2px; background-color: #201431; margin-top: 5px; margin-bottom: -2px; margin-left: -13px; margin-right: -13px;">
-                      <span style="font-size: 12px; color:#AF9CC6;"><span id="allocatedGovernanceBudgetValue">-</span>
-                    </div>
-                  </div>
-                  <div class="col-12 col-lg-6 text-center governPayoutTime for-desktopTime">
-                    <span data-i18n="govNextPayout" style="font-weight:400; color:#E9DEFF; font-size: 20px;">Next Treasury Payout</span>
-                    <div id="flipdown" class="flipdown"></div>
-                  </div>
-                  <div class="col-12 col-lg-3 text-center governBudgetCard for-desktop">
-                    <span data-i18n="govAllocBudget" style="font-weight:400; color:#E9DEFF; font-size: 18px;">Budget Allocated</span>
-
-                    <div style="width: 180px; background-color:#3b1170; margin-top:11px; border-radius: 9px; padding-left: 13px; padding-right: 13px; padding-bottom: 6px; padding-top: 4px;">
-                      <span style="font-size: 19px; color:#E9DEFF;"><span id="allocatedGovernanceBudget2">-</span> <span style="color:#9131ea; font-size: 16px; position: relative; top: 1px;">PIV</span></span>
-                      <hr style="border-top-width: 2px; background-color: #201431; margin-top: 5px; margin-bottom: -2px; margin-left: -13px; margin-right: -13px;">
-                      <span style="font-size: 12px; color:#AF9CC6;"><span id="allocatedGovernanceBudgetValue2">-</span>
-                    </div>
-                  </div>
-                </div>
-
-
-                <div class="pivx-button-small governAdd" onclick="MPW.createProposal()"><i class="fas fa-plus"></i></div>
-                
-                <div class="dcWallet-activity" style="padding: 16px;">
-                  <table id="proposalsTable" class="table table-hover table-dark bg-transparent governTable" style="width: 100%; margin-bottom: 0px;">
-                    <thead>
-                      <td class="text-center btlr-7p"><b data-i18n="govTableStatus"> Status </b></td>
-                      <td class="text-center"><b data-i18n="govTableName"> Name </b></td>
-                      <td class="text-center for-desktop"><b data-i18n="govTablePayment"> Payment </b></td>
-                      <td class="text-center for-desktop"><b data-i18n="govTableVotes"> Votes </b></td>
-                      <td class="text-center for-desktop btrr-7p"><b data-i18n="govTableVote"> Vote </b></td>
-                    </thead>
-                    <tbody id="proposalsTableBody" style="text-align: center; vertical-align: middle;"></tbody>
-                  </table>
-                </div>
-
-                <hr>
-                <br>
-                <h3 data-i18n="contestedProposalsTitle" style="width: 100%;text-align: center;">Contested Proposals</h3>
-                <p data-i18n="contestedProposalsDesc" style="width: 100%;text-align: center;">These are proposals that received an overwhelming amount of downvotes, making it likely spam or a highly contestable proposal.</p>
-                <br>
-                <table id="proposalsContestedTable" class="table table-hover table-dark bg-transparent governTable" style="width: 100%; opacity: 0.8;">
-                  <thead>
-                    <td class="text-center btlr-7p"><b data-i18n="govTableStatus"> STATUS </b></td>
-                    <td class="text-center"><b data-i18n="govTableName"> NAME </b></td>
-                    <td class="text-center for-desktop"><b data-i18n="govTablePayment"> PAYMENT </b></td>
-                    <td class="text-center for-desktop"><b data-i18n="govTableVotes"> VOTES </b></td>
-                    <td class="text-center for-desktop btrr-7p"><b data-i18n="govTableVote"> VOTE </b></td>
-                  </thead>
-                  <tbody id="proposalsContestedTableBody" style="text-align: center; vertical-align: middle;"></tbody>
-                </table>
-              </div>
-              <div id="Masternode" class="tabcontent">
-                <!-- New Masternode list -->
-                <div class="d-none">
-                  <div class="dcWallet-activity">
-                    <h4 class="mnTopConfigured">4 Masternodes Configured</h4>
-
-                    <div class="scrollTable">
-                      <div>
-                        <table class="table table-responsive table-sm stakingTx masternodeTable table-mobile-scroll">
-                          <thead>
-                            <tr>
-                              <th scope="col" style="width: 400px;">Status</th>
-                              <th scope="col" style="width: 400px;">IP Address</th>
-                              <th scope="col" style="width: 400px;">Last Seen</th>
-                              <th scope="col" style="width: 400px;"></th>
-                            </tr>
-                          </thead>
-                          <tbody>
-                            <tr>
-                              <td><span class="masternodeBadges enabledBadge">ENABLED</span></td>
-                              <td><code class="wallet-code text-center active ptr" style="padding: 4px 9px;">127.0.0.1:12345</code></td>
-                              <td><span class="mnLastSeen">27/02/24</span></td>
-                              <td class="text-right" style="padding:0px; padding-top:11px;">
-                                <button class="pivx-button-small" style="height: 43px; width: 43px; padding-left: 13px;">
-                                  <span class="buttoni-text">
-                                    <span class="plus-icon">
-                                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-                                        <path d="M32,15.8c0.1,8.5-6.5,15.7-15,16.2c-0.3,0-0.7,0-1,0c-3.4,0-6.8-1.1-9.6-3.2l-1.9,2.1
-                                          c-0.2,0.3-0.7,0.3-0.9,0.1c-0.1-0.1-0.2-0.2-0.2-0.3l-2-8.1c-0.1-0.4,0.1-0.7,0.5-0.8c0.1,0,0.2,0,0.2,0l8.2,1
-                                          c0.4,0,0.6,0.4,0.6,0.7c0,0.1-0.1,0.3-0.2,0.4l-1.8,2c5.4,3.8,12.9,2.5,16.7-2.9c1.5-2.1,2.3-4.6,2.2-7.2c0-0.4,0.1-0.8,0.4-1.1
-                                          c0.3-0.3,0.7-0.4,1.1-0.3l1.3,0.2c0.3,0,0.6,0.2,0.8,0.4C31.9,15.1,32,15.4,32,15.8z M3.6,17.4C3.9,17.1,4,16.7,4,16.3
-                                          C3.9,9.6,9.1,4.2,15.7,4c2.6-0.1,5.1,0.7,7.2,2.2l-1.8,2c-0.2,0.3-0.2,0.7,0.1,0.9c0.1,0.1,0.2,0.1,0.4,0.2l8.2,1
-                                          c0.4,0,0.7-0.2,0.7-0.6c0-0.1,0-0.2,0-0.2l-2-8.1c-0.1-0.4-0.4-0.6-0.8-0.5c-0.1,0-0.3,0.1-0.3,0.2l-1.9,2.1C22.8,1.1,19.5,0,16,0
-                                          c-0.3,0-0.6,0-1,0C6.5,0.5-0.1,7.7,0,16.2c0,0.3,0.1,0.7,0.3,0.9c0.2,0.2,0.5,0.4,0.8,0.4l1.3,0.2C2.9,17.8,3.3,17.6,3.6,17.4z"/>
-                                        </svg>                                        
-                                    </span>
-                                  </span>
-                                </button>
-                                <button class="pivx-button-small" style="height: 43px; width: 43px; padding-left: 13px;">
-                                  <span class="buttoni-text">
-                                    <span class="plus-icon">
-                                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-                                        <path d="M4.5,29.4C4.5,30.9,5.6,32,7,32H25c1.4,0,2.6-1.1,2.6-2.6V9h-23V29.4z M21.1,14.1c0-0.7,0.6-1.3,1.3-1.3
-                                          c0.7,0,1.3,0.6,1.3,1.3v12.8c0,0.7-0.6,1.3-1.3,1.3c-0.7,0-1.3-0.6-1.3-1.3V14.1z M14.7,14.1c0-0.7,0.6-1.3,1.3-1.3
-                                          c0.7,0,1.3,0.6,1.3,1.3v12.8c0,0.7-0.6,1.3-1.3,1.3c-0.7,0-1.3-0.6-1.3-1.3V14.1z M8.3,14.1c0-0.7,0.6-1.3,1.3-1.3
-                                          c0.7,0,1.3,0.6,1.3,1.3v12.8c0,0.7-0.6,1.3-1.3,1.3c-0.7,0-1.3-0.6-1.3-1.3V14.1z M28.8,3.8v2.6H3.2V3.8c0-0.7,0.6-1.3,1.3-1.3h7.7
-                                          V1.3c0-0.7,0.6-1.3,1.3-1.3h5.1c0.7,0,1.3,0.6,1.3,1.3v1.3h7.7C28.2,2.6,28.8,3.1,28.8,3.8z"/>
-                                        </svg>                                        
-                                    </span>
-                                  </span>
-                                </button>
-                              </td>
-                            </tr>
-                            <tr>
-                              <td><span class="masternodeBadges missingBadge">MISSING</span></td>
-                              <td><code class="wallet-code text-center active ptr" style="padding: 4px 9px;">127.0.0.1:12345</code></td>
-                              <td><span class="mnLastSeen">27/02/24</span></td>
-                              <td>Btns</td>
-                            </tr>
-                            <tr>
-                              <td><span class="masternodeBadges preEnabledBadge">PRE_ENABLED</span></td>
-                              <td><code class="wallet-code text-center active ptr" style="padding: 4px 9px;">127.0.0.1:12345</code></td>
-                              <td><span class="mnLastSeen">27/02/24</span></td>
-                              <td>Btns</td>
-                            </tr>
-                          </tbody>
-                        </table>
-                      </div>
-                    </div>
-                  </div>
-
-                  <div style="display: flex; justify-content: center; width: 100%; margin-top: 25px; margin-bottom: 50px;">
-                    <button class="pivx-button-small" style="height: 42px; width: 228px;" data-toggle="modal" data-target="#createMasternodeModal">
-                      <span class="buttoni-text">
-                        <span id="plus-icon3" class="plus-icon"></span>
-                        Add Masternode</span>
-                    </button>
-                  </div>
-
-                  
-                  <div class="dcWallet-activity">
-                    <span style="color: rgb(233, 222, 255); display: flex; justify-content: center; margin-bottom: 24px; margin-top: 20px;">
-                      <span data-i18n="rewardHistory" style="font-size: 24px;">Reward History</span>
-                      <span class="rewardsBadge" style="font-size: 20px;">
-                        0<span style="opacity: 0.55; font-size: 15px">.00</span> <span style="font-size:15px; opacity: 0.55;">tPIV</span>
-                      </span>
-                    </span>
-                    <div class="scrollTable">
-                      <table class="table table-responsive table-sm stakingTx table-mobile-scroll">
-                        <thead>
-                          <tr>
-                            <th scope="col" class="tx1">Time</th>
-                            <th scope="col" class="tx2">ID</th>
-                            <th scope="col" class="tx3">Amount</th>
-                            <th scope="col" class="tx4"></th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                        </tbody>
-                      </table>
-                    </div>
-                  </div>
-                </div>
-
-                <div class="">
-                  <div class="col-md-12 title-section float-left rm-pd center-text" style="padding-bottom: 0px;">
-                    <h3 style="margin-bottom: -2px;">
-                      <span data-i18n="mnControlYour" style="font-weight: 300;">Control your</span>
-                    </h3>
-                    <h3 data-i18n="navMasternode" class="pivx-bold-title"> Masternode</h3>
-                    <p data-i18n="mnSubtext" style="color:#beaed0;">From this tab you can create and access one or more masternodes</p>
-                  </div>
-
-                  <div style="display: block;">
-                    <br />
-                    <p id="mnTextErrors" class="center-text"></p>
-                  </div>
-
-                  <!-- IMPORT MASTERNODE -->
-                  <div id="accessMasternode" class="dashboard-item" style="display: none; width: 100%;">
-                    <div class="container">
-                      <div id="accessMasternodeText"></div>
-                      <br />
-                      <input class="hide-element" type="text" />
-                      <div style="display: block;">
-                        <input type="password" id="mnPrivateKey" placeholder="Masternode Private Key" />
-                        <input type="text" id="mnIP" placeholder="Masternode ip address" />
-                        <select id="mnTxId" style="display: block;" placeholder="Masternode collateral tx" class="form-control"> </select>
-                        <button class="pivx-button-big" onclick="MPW.importMasternode()">
-                          <span class="buttoni-icon"><i class="fas fa-file-upload fa-tiny-margin"></i></span>
-                          <span class="buttoni-text" id="importMnText">Access Masternode</span>
-                          <span class="buttoni-arrow">
-                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-                              <path d="M23.328 16.707L13.121 26.914a.5.5 0 01-.707 0l-2.828-2.828a.5.5 0 010-.707L16.964 16 9.586 8.621a.5.5 0 010-.707l2.828-2.828a.5.5 0 01.707 0l10.207 10.207a1 1 0 010 1.414z"></path>
-                            </svg>
-                          </span>
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-                  <!-- // IMPORT MASTERNODE -->
-                  <br />
-
-                  <div id="createMasternode" style="display: flex; justify-content: center; width: 100%;">
-                    <button class="pivx-button-small" style="height: 42px; width: 228px;" data-toggle="modal" data-target="#createMasternodeModal">
-                      <span class="buttoni-text">
-                        <span id="plus-icon" class="plus-icon"></span>
-                        Create Masternode</span>
-                    </button>
-                  </div>
-
-                  <div id="mnDashboard" class="staking-banner-bottom">
-                    <div class="stake-box large-box col-md-4">
-                      <h4 class="stake-balances" style="background-color: #2c0044; border-radius: 10px;">Status <small id="mnProtocol" style="opacity: 0.5;"></small></h4>
-                      <h2 id="mnStatus" class="stake-balances" style="overflow-wrap: anywhere; top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; width: 100%; padding: 10px;" id="mnStatus"></h2>
-                    </div>
-                    <div class="stake-box large-box col-md-4">
-                      <h4 id="mnNetType" class="stake-balances" style="background-color: #2c0044; border-radius: 10px;"></h4>
-                      <h2
-                        id="mnNetIP"
-                        class="stake-balances"
-                        style="overflow-wrap: anywhere; top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; width: 100%; padding: 10px; font-family: mono !important; font-size: x-large;"
-                        id="mnStatus"
-                      ></h2>
-                    </div>
-                    <div class="stake-box large-box col-md-4">
-                      <h4 class="stake-balances" style="background-color: #2c0044; border-radius: 10px;">
-                        Last Seen
-                      </h4>
-                      <h2 id="mnLastSeen" class="stake-balances" style="overflow-wrap: anywhere; top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; width: 100%; padding: 10px; font-size: xx-large;" id="mnStatus"></h2>
-                    </div>
-                  </div>
-
-                  <br />
-
-                  <center id="controlMasternode" style="display: none; width: 100%;">
-                    <button class="pivx-button-big" onclick="MPW.destroyMasternode()" style="margin: 20px; font-weight: 550 !important;">
-                      <span class="buttoni-icon"><i class="fas fa-burn fa-tiny-margin"></i></span>
-                      <span class="buttoni-text" id="importMnText">Destroy Masternode</span>
-                    </button>
-
-                    <button class="pivx-button-big" onclick="MPW.startMasternode(true)" style="margin: 20px; font-weight: 550 !important;">
-                      <span class="buttoni-icon"><i class="fas fa-redo-alt fa-tiny-margin"></i></span>
-                      <span class="buttoni-text" id="importMnText">Restart Masternode</span>
-                    </button>
-                  </center>
-                </div>
-              </div>
+	      <div id="Masternode" class="tabcontent"> </div>
+	      <div id="Governance" class="tabcontent"> </div>
 
               <div id="Settings" class="tabcontent">
                 <div class="row">
diff --git a/locale/en/translation.toml b/locale/en/translation.toml
index c07a78f6c..1446a431f 100644
--- a/locale/en/translation.toml
+++ b/locale/en/translation.toml
@@ -258,6 +258,7 @@ MN_BAD_IP = "The IP address is invalid!" # The IP address is invalid!
 MN_BAD_PRIVKEY = "The private key is invalid" # The private key is invalid
 MN_NOT_ENOUGH_COLLAT = "You need <b>{amount} more {ticker}</b> to create a Masternode!" # You need <b>{amount} more {ticker}</b> to create a Masternode!
 MN_ENOUGH_BUT_NO_COLLAT = "You have enough balance for a Masternode, but no valid collateral UTXO of {amount} {ticker}" # You have enough balance for a Masternode, but no valid collateral UTXO of {amount} {ticker}
+MN_UNLOCK_WALLET = "Please import your <b> COLLATERAL WALLET</b> first."
 MN_COLLAT_NOT_SUITABLE = "This is not a suitable UTXO for a Masternode" # This is not a suitable UTXO for a Masternode
 MN_CANT_CONNECT = "Unable to connect to RPC node!" # Unable to connect to RPC node!
 CONTACTS_ENCRYPT_FIRST = "You need to hit \"{button}\" before you can use Contacts!" # You need to hit "{button}" before you can use Contacts!
diff --git a/locale/template/translation.toml b/locale/template/translation.toml
index 12e848767..d32aedb25 100644
--- a/locale/template/translation.toml
+++ b/locale/template/translation.toml
@@ -284,6 +284,7 @@ MN_BAD_IP = "The IP address is invalid!"
 MN_BAD_PRIVKEY = "The private key is invalid"
 MN_NOT_ENOUGH_COLLAT = "You need <b>{amount} more {ticker}</b> to create a Masternode!"
 MN_ENOUGH_BUT_NO_COLLAT = "You have enough balance for a Masternode, but no valid collateral UTXO of {amount} {ticker}"
+MN_UNLOCK_WALLET = "Please import your <b> COLLATERAL WALLET</b> first."
 MN_COLLAT_NOT_SUITABLE = "This is not a suitable UTXO for a Masternode"
 MN_CANT_CONNECT = "Unable to connect to RPC node!"
 CONTACTS_ENCRYPT_FIRST = "You need to hit \"{button}\" before you can use Contacts!"
diff --git a/package-lock.json b/package-lock.json
index 1b67dddf6..b5f938fd3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -40,6 +40,7 @@
                 "pivx-shield-rust-multicore": "^1.2.0-7",
                 "qr-scanner": "^1.4.2",
                 "qrcode-generator": "^1.4.4",
+                "uuid": "^10.0.0",
                 "vue": "^3.3.4",
                 "vue-router": "^4.2.4"
             },
@@ -10161,6 +10162,19 @@
             "integrity": "sha512-oH/q5Tfz641mvOGhWES+l0u3EkwmI3C7UMEWX8H3QrKlR/RGOebP2fQTIOodEFCmIECx2ViLivDFZJO75M/qNw==",
             "license": "MIT"
         },
+        "node_modules/pivx-shield/node_modules/uuid": {
+            "version": "9.0.1",
+            "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+            "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+            "funding": [
+                "https://github.com/sponsors/broofa",
+                "https://github.com/sponsors/ctavan"
+            ],
+            "license": "MIT",
+            "bin": {
+                "uuid": "dist/bin/uuid"
+            }
+        },
         "node_modules/pkg-dir": {
             "version": "4.2.0",
             "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -13217,9 +13231,9 @@
             }
         },
         "node_modules/uuid": {
-            "version": "9.0.1",
-            "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
-            "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+            "version": "10.0.0",
+            "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
+            "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==",
             "funding": [
                 "https://github.com/sponsors/broofa",
                 "https://github.com/sponsors/ctavan"
diff --git a/package.json b/package.json
index c496c03c9..5764db7ca 100644
--- a/package.json
+++ b/package.json
@@ -101,6 +101,7 @@
         "pivx-shield-rust-multicore": "^1.2.0-7",
         "qr-scanner": "^1.4.2",
         "qrcode-generator": "^1.4.4",
+        "uuid": "^10.0.0",
         "vue": "^3.3.4",
         "vue-router": "^4.2.4"
     },
diff --git a/scripts/__mocks__/i18n.js b/scripts/__mocks__/i18n.js
new file mode 100644
index 000000000..74ce4b804
--- /dev/null
+++ b/scripts/__mocks__/i18n.js
@@ -0,0 +1,29 @@
+export const ALERTS = new Proxy(
+    {},
+    {
+        get(_target, prop) {
+            // Return the proxy itself if trying to access ALERTS
+            if (prop === 'ALERTS') return translation;
+            // Return key in tests so they aren't affected by translation changes
+            return prop;
+        },
+    }
+);
+
+export const translation = ALERTS;
+
+export const tr = (message, vars) => {
+    return (
+        message +
+        ' ' +
+        vars
+            .map((v) => {
+                let varStr = '';
+                for (const key in v) {
+                    varStr += key + ' ' + v[key];
+                }
+                return varStr;
+            })
+            .join(' ')
+    );
+};
diff --git a/scripts/composables/use_masternode.js b/scripts/composables/use_masternode.js
new file mode 100644
index 000000000..403c0f00d
--- /dev/null
+++ b/scripts/composables/use_masternode.js
@@ -0,0 +1,50 @@
+import { ref, watch, toRaw } from 'vue';
+import { defineStore } from 'pinia';
+import { Database } from '../database.js';
+import { getEventEmitter } from '../event_bus.js';
+
+export const useMasternode = defineStore('masternode', () => {
+    /**
+     * @type{import('vue').Ref<import('../masternode.js').default?>}
+     */
+    const masternode = ref(null);
+    const localProposals = ref([]);
+    watch(
+        localProposals,
+        async () => {
+            const database = await Database.getInstance();
+            const account = await database.getAccount();
+            if (account) {
+                account.localProposals = toRaw(localProposals.value);
+                await database.updateAccount(account);
+            }
+        },
+        {
+            // We need deep reactivity to detect proposal changes e.g. proposalHeight update when it gets confirmed
+            deep: true,
+        }
+    );
+    const fetchProposalsFromDatabase = async () => {
+        const database = await Database.getInstance();
+        const account = await database.getAccount();
+        localProposals.value = account?.localProposals ?? [];
+    };
+
+    const fetchMasternodeFromDatabase = async () => {
+        const database = await Database.getInstance();
+        masternode.value = await database.getMasternode();
+    };
+
+    watch(masternode, async () => {
+        const database = await Database.getInstance();
+        await database.addMasternode(toRaw(masternode.value));
+    });
+
+    fetchProposalsFromDatabase().then(() => {});
+    fetchMasternodeFromDatabase().then(() => {});
+    getEventEmitter().on('toggle-network', () => {
+        fetchProposalsFromDatabase().then(() => {});
+        fetchMasternodeFromDatabase().then(() => {});
+    });
+    return { masternode, localProposals };
+});
diff --git a/scripts/composables/use_settings.js b/scripts/composables/use_settings.js
index d20498d2c..75424cec4 100644
--- a/scripts/composables/use_settings.js
+++ b/scripts/composables/use_settings.js
@@ -1,3 +1,4 @@
+import { defineStore } from 'pinia';
 import { getEventEmitter } from '../event_bus.js';
 import { ref, watch } from 'vue';
 import { watchIgnorable } from '@vueuse/core';
@@ -11,7 +12,7 @@ import {
 } from '../settings.js';
 import { cChainParams } from '../chain_params.js';
 
-export function useSettings() {
+export const useSettings = defineStore('settings', () => {
     const advancedMode = ref(fAdvancedMode);
     const displayDecimals = ref(0);
     const autoLockWallet = ref(false);
@@ -59,4 +60,4 @@ export function useSettings() {
         debug,
         isTestnet,
     };
-}
+});
diff --git a/scripts/composables/use_wallet.js b/scripts/composables/use_wallet.js
index 7d9327780..db15abe0f 100644
--- a/scripts/composables/use_wallet.js
+++ b/scripts/composables/use_wallet.js
@@ -6,6 +6,7 @@ import { cOracle } from '../prices.js';
 import { ledgerSignTransaction } from '../ledger.js';
 import { defineStore } from 'pinia';
 import { lockableFunction } from '../lock.js';
+import { blockCount as rawBlockCount } from '../global.js';
 import { doms } from '../global.js';
 import {
     RECEIVE_TYPES,
@@ -30,6 +31,8 @@ export const useWallet = defineStore('wallet', () => {
     const getKeyToExport = () => wallet.getKeyToExport();
     const isEncrypted = ref(true);
     const hasShield = ref(wallet.hasShield());
+    const getNewAddress = (nReceiving) => wallet.getNewAddress(nReceiving);
+    const blockCount = ref(0);
 
     const setMasterKey = async ({ mk, extsk }) => {
         await wallet.setMasterKey({ mk, extsk });
@@ -132,9 +135,12 @@ export const useWallet = defineStore('wallet', () => {
     });
 
     const isCreatingTransaction = () => createAndSendTransaction.isLocked();
+    const getMasternodeUTXOs = () => wallet.getMasternodeUTXOs();
+    const getPath = (script) => wallet.getPath(script);
 
     getEventEmitter().on('toggle-network', async () => {
         isEncrypted.value = await hasEncryptedWallet();
+        blockCount.value = rawBlockCount;
     });
 
     getEventEmitter().on('wallet-import', async () => {
@@ -153,6 +159,10 @@ export const useWallet = defineStore('wallet', () => {
         price.value = cOracle.getCachedPrice(strCurrency);
     });
 
+    getEventEmitter().on('new-block', () => {
+        blockCount.value = rawBlockCount;
+    });
+
     return {
         publicMode,
         isImported,
@@ -167,6 +177,7 @@ export const useWallet = defineStore('wallet', () => {
         isHardwareWallet,
         checkDecryptPassword,
         encrypt,
+        getNewAddress,
         getNewChangeAddress,
         wipePrivateData: () => {
             wallet.wipePrivateData();
@@ -184,5 +195,8 @@ export const useWallet = defineStore('wallet', () => {
         sync,
         createAndSendTransaction,
         coldBalance,
+        getMasternodeUTXOs,
+        getPath,
+        blockCount,
     };
 });
diff --git a/scripts/dashboard/Dashboard.vue b/scripts/dashboard/Dashboard.vue
index 5dc4dbda9..4569831e9 100644
--- a/scripts/dashboard/Dashboard.vue
+++ b/scripts/dashboard/Dashboard.vue
@@ -53,7 +53,9 @@ const needsToEncrypt = computed(() => {
     }
 });
 const showTransferMenu = ref(false);
-const { advancedMode, displayDecimals, autoLockWallet } = useSettings();
+const { advancedMode, displayDecimals, autoLockWallet } = storeToRefs(
+    useSettings()
+);
 const showExportModal = ref(false);
 const showEncryptModal = ref(false);
 const keyToBackup = ref('');
@@ -186,20 +188,6 @@ async function restoreWallet(strReason) {
     });
 }
 
-async function importWif(wif, extsk) {
-    const secret = await ParsedSecret.parse(wif);
-    if (secret.masterKey) {
-        await wallet.setMasterKey({ mk: secret.masterKey, extsk });
-        if (wallet.hasShield && !extsk) {
-            createAlert(
-                'warning',
-                'Could not decrypt sk even if password is correct, please contact a developer'
-            );
-        }
-        createAlert('success', ALERTS.WALLET_UNLOCKED, 1500);
-    }
-}
-
 /**
  * Lock the wallet by deleting masterkey private data, after user confirmation
  */
@@ -993,7 +981,7 @@ defineExpose({
     <RestoreWallet
         :show="showRestoreWallet"
         :reason="restoreWalletReason"
+        :wallet="wallet"
         @close="showRestoreWallet = false"
-        @import="importWif"
     />
 </template>
diff --git a/scripts/dashboard/RestoreWallet.vue b/scripts/dashboard/RestoreWallet.vue
index adcbbc84a..5cb98fd0b 100644
--- a/scripts/dashboard/RestoreWallet.vue
+++ b/scripts/dashboard/RestoreWallet.vue
@@ -5,14 +5,17 @@ import Password from '../Password.vue';
 import { ALERTS, translation } from '../i18n.js';
 import { Database } from '../database.js';
 import { decrypt } from '../aes-gcm';
+import { ParsedSecret } from '../parsed_secret';
 import { useAlerts } from '../composables/use_alerts.js';
+
 const { createAlert } = useAlerts();
 
 const props = defineProps({
     show: Boolean,
     reason: String,
+    wallet: Object,
 });
-const { show, reason } = toRefs(props);
+const { show, reason, wallet } = toRefs(props);
 const emit = defineEmits(['close', 'import']);
 const password = ref('');
 const passwordInput = ref(null);
@@ -24,12 +27,27 @@ watch(show, (show) => {
     if (!show) password.value = '';
 });
 
+async function importWif(wif, extsk) {
+    const secret = await ParsedSecret.parse(wif);
+    if (secret.masterKey) {
+        await wallet.value.setMasterKey({ mk: secret.masterKey, extsk });
+        if (wallet.value.hasShield && !extsk) {
+            createAlert(
+                'warning',
+                'Could not decrypt sk even if password is correct, please contact a developer'
+            );
+        }
+        createAlert('success', ALERTS.WALLET_UNLOCKED, 1500);
+    }
+}
+
 async function submit() {
     const db = await Database.getInstance();
     const account = await db.getAccount();
     const wif = await decrypt(account.encWif, password.value);
     const extsk = await decrypt(account.encExtsk, password.value);
     if (wif) {
+        await importWif(wif, extsk);
         emit('import', wif, extsk);
     } else {
         createAlert('warning', ALERTS.INVALID_PASSWORD);
diff --git a/scripts/dashboard/WalletButtons.vue b/scripts/dashboard/WalletButtons.vue
index 0b76559b0..c6c48c1da 100644
--- a/scripts/dashboard/WalletButtons.vue
+++ b/scripts/dashboard/WalletButtons.vue
@@ -8,13 +8,13 @@ import pAddressBook from '../../assets/icons/icon-address-book.svg';
 import pGift from '../../assets/icons/icon-gift.svg';
 import { useNetwork } from '../composables/use_network.js';
 import { useWallet } from '../composables/use_wallet.js';
+import { getBlockbookUrl } from '../utils.js';
 
 const wallet = useWallet();
 const network = useNetwork();
 
 function getWalletUrl() {
-    const urlPart = wallet.isHD ? '/xpub/' : '/address/';
-    return network.explorerUrl + urlPart + wallet.getKeyToExport();
+    return getBlockbookUrl(network.explorerUrl, wallet.getKeyToExport());
 }
 </script>
 
diff --git a/scripts/global.js b/scripts/global.js
index 7f5797b0b..3338589b0 100644
--- a/scripts/global.js
+++ b/scripts/global.js
@@ -1,7 +1,5 @@
-import { COutpoint } from './transaction.js';
 import { TransactionBuilder } from './transaction_builder.js';
-import Masternode from './masternode.js';
-import { ALERTS, tr, start as i18nStart, translation } from './i18n.js';
+import { ALERTS, start as i18nStart, translation } from './i18n.js';
 import { wallet, hasEncryptedWallet, Wallet } from './wallet.js';
 import { getNetwork } from './network/network_manager.js';
 import {
@@ -15,16 +13,15 @@ import { confirmPopup, sanitizeHTML } from './misc.js';
 import { cChainParams, COIN } from './chain_params.js';
 import { sleep } from './utils.js';
 import { registerWorker } from './native.js';
-import { Address6 } from 'ip-address';
 import { getEventEmitter } from './event_bus.js';
-import { Database } from './database.js';
 import { checkForUpgrades } from './changelog.js';
-import { FlipDown } from './flipdown.js';
 import { createApp } from 'vue';
 import Dashboard from './dashboard/Dashboard.vue';
 import Alerts from './alerts/Alerts.vue';
 import { loadDebug, debugLog, DebugTopics, debugError } from './debug.js';
 import Stake from './stake/Stake.vue';
+import MasternodeComponent from './masternode/Masternode.vue';
+import Governance from './governance/Governance.vue';
 import { createPinia } from 'pinia';
 import { cOracle } from './prices.js';
 
@@ -50,6 +47,8 @@ const pinia = createPinia();
 
 export const dashboard = createApp(Dashboard).use(pinia).mount('#DashboardTab');
 createApp(Stake).use(pinia).mount('#StakingTab');
+createApp(MasternodeComponent).use(pinia).mount('#Masternode');
+createApp(Governance).use(pinia).mount('#Governance');
 createApp(SideNavbar).use(pinia).mount('#SideNavbar');
 createApp(Alerts).use(pinia).mount('#Alerts');
 
@@ -78,53 +77,6 @@ export async function start() {
             'walletBreakdownLegend'
         ),
         domGenHardwareWallet: document.getElementById('generateHardwareWallet'),
-        //GOVERNANCE ELEMENTS
-        domGovTab: document.getElementById('governanceTab'),
-        domGovProposalsTable: document.getElementById('proposalsTable'),
-        domGovProposalsTableBody: document.getElementById('proposalsTableBody'),
-        domTotalGovernanceBudget: document.getElementById(
-            'totalGovernanceBudget'
-        ),
-        domTotalGovernanceBudgetValue: document.getElementById(
-            'totalGovernanceBudgetValue'
-        ),
-        domAllocatedGovernanceBudget: document.getElementById(
-            'allocatedGovernanceBudget'
-        ),
-        domAllocatedGovernanceBudgetValue: document.getElementById(
-            'allocatedGovernanceBudgetValue'
-        ),
-        domAllocatedGovernanceBudget2: document.getElementById(
-            'allocatedGovernanceBudget2'
-        ),
-        domAllocatedGovernanceBudgetValue2: document.getElementById(
-            'allocatedGovernanceBudgetValue2'
-        ),
-        domGovProposalsContestedTable: document.getElementById(
-            'proposalsContestedTable'
-        ),
-        domGovProposalsContestedTableBody: document.getElementById(
-            'proposalsContestedTableBody'
-        ),
-        //MASTERNODE ELEMENTS
-        domCreateMasternode: document.getElementById('createMasternode'),
-        domControlMasternode: document.getElementById('controlMasternode'),
-        domAccessMasternode: document.getElementById('accessMasternode'),
-        domMnAccessMasternodeText: document.getElementById(
-            'accessMasternodeText'
-        ),
-        domMnCreateType: document.getElementById('mnCreateType'),
-        domMnTextErrors: document.getElementById('mnTextErrors'),
-        domMnIP: document.getElementById('mnIP'),
-        domMnTxId: document.getElementById('mnTxId'),
-        domMnPrivateKey: document.getElementById('mnPrivateKey'),
-        domMnDashboard: document.getElementById('mnDashboard'),
-        domMnProtocol: document.getElementById('mnProtocol'),
-        domMnStatus: document.getElementById('mnStatus'),
-        domMnNetType: document.getElementById('mnNetType'),
-        domMnNetIP: document.getElementById('mnNetIP'),
-        domMnLastSeen: document.getElementById('mnLastSeen'),
-
         domEncryptWalletLabel: document.getElementById('encryptWalletLabel'),
         domEncryptPasswordCurrent: document.getElementById(
             'changePassword-current'
@@ -175,11 +127,6 @@ export async function start() {
         domConfirmModalCancelButton: document.getElementById(
             'confirmModalCancelButton'
         ),
-
-        masternodeLegacyAccessText:
-            'Access the masternode linked to this address<br> Note: the masternode MUST have been already created (however it can be online or offline)<br>  If you want to create a new masternode access with a HD wallet',
-        masternodeHDAccessText:
-            "Access your masternodes if you have any! If you don't you can create one",
         // Aggregate menu screens and links for faster switching
         arrDomScreens: document.getElementsByClassName('tabcontent'),
         arrDomScreenLinks: document.getElementsByClassName('tablinks'),
@@ -204,7 +151,6 @@ export async function start() {
         domWalletSettingsBtn: document.getElementById('settingsWalletBtn'),
         domDisplaySettingsBtn: document.getElementById('settingsDisplayBtn'),
         domVersion: document.getElementById('version'),
-        domFlipdown: document.getElementById('flipdown'),
         domTestnetToggler: document.getElementById('testnetToggler'),
         domAdvancedModeToggler: document.getElementById('advancedModeToggler'),
         domAutoLockModeToggler: document.getElementById('autoLockModeToggler'),
@@ -294,11 +240,6 @@ async function refreshPriceDisplay() {
 function subscribeToNetworkEvents() {
     getEventEmitter().on('new-block', (block) => {
         debugLog(DebugTopics.GLOBAL, `New block detected! ${block}`);
-
-        // If it's open: update the Governance Dashboard
-        if (doms.domGovTab.classList.contains('active')) {
-            updateGovernanceTab();
-        }
     });
 
     getEventEmitter().on('transaction-sent', (success, result) => {
@@ -326,15 +267,6 @@ function subscribeToNetworkEvents() {
     });
 }
 
-// WALLET STATE DATA
-
-let isTestnetLastState = cChainParams.current.isTestnet;
-
-/**
- * @type {FlipDown | null}
- */
-let governanceFlipdown = null;
-
 /**
  * Open a UI 'tab' menu, and close all other tabs, intended for frontend use
  * @param {Event} evt - The click event target
@@ -357,12 +289,6 @@ export function openTab(evt, tabName) {
     // Close the navbar if it's not already closed
     if (!doms.domNavbarToggler.className.includes('collapsed'))
         doms.domNavbarToggler.click();
-
-    if (tabName === 'Governance') {
-        updateGovernanceTab();
-    } else if (tabName === 'Masternode') {
-        updateMasternodeTab();
-    }
 }
 
 /**
@@ -396,25 +322,9 @@ export function optimiseCurrencyLocale(nAmount) {
     return { nValue, cLocale };
 }
 
-/**
- * //TODO: remove in Governance VUE PR
- * Open the Explorer in a new tab for the current wallet, or a specific address
- * @param {string?} strAddress - Optional address to open, if void, the master key is used
- */
-export async function openExplorer(strAddress = '') {
-    const network = useNetwork();
-    const toExport = wallet.getKeyToExport();
-    if (wallet.isLoaded() && wallet.isHD() && !strAddress) {
-        window.open(network.explorerUrl + '/xpub/' + toExport, '_blank');
-    } else {
-        window.open(network.explorerUrl + '/address/' + toExport, '_blank');
-    }
-}
-
 async function loadImages() {
     const images = [
         ['mpw-main-logo', import('../assets/logo.png')],
-        ['plus-icon', import('../assets/icons/icon-plus.svg')],
         ['plus-icon2', import('../assets/icons/icon-plus.svg')],
         ['plus-icon3', import('../assets/icons/icon-plus.svg')],
         ['del-wallet-icon', import('../assets/icons/icon-bin.svg')],
@@ -506,214 +416,6 @@ export function toClipboard(source, caller) {
     }, 1000);
 }
 
-export async function govVote(hash, voteCode) {
-    if (
-        (await confirmPopup({
-            title: ALERTS.CONFIRM_POPUP_VOTE,
-            html: ALERTS.CONFIRM_POPUP_VOTE_HTML,
-        })) === true
-    ) {
-        const database = await Database.getInstance();
-        const cMasternode = await database.getMasternode();
-        if (cMasternode) {
-            if ((await cMasternode.getStatus()) !== 'ENABLED') {
-                createAlert('warning', ALERTS.MN_NOT_ENABLED, 6000);
-                return;
-            }
-            const result = await cMasternode.vote(hash.toString(), voteCode); //1 yes 2 no
-            if (result.includes('Voted successfully')) {
-                //good vote
-                cMasternode.storeVote(hash.toString(), voteCode);
-                await updateGovernanceTab();
-                createAlert('success', ALERTS.VOTE_SUBMITTED, 6000);
-            } else if (result.includes('Error voting :')) {
-                //If you already voted return an alert
-                createAlert('warning', ALERTS.VOTED_ALREADY, 6000);
-            } else if (result.includes('Failure to verify signature.')) {
-                //wrong masternode private key
-                createAlert('warning', ALERTS.VOTE_SIG_BAD, 6000);
-            } else {
-                //this could be everything
-                debugError(DebugTopics.GOVERNANCE, result);
-                createAlert('warning', ALERTS.INTERNAL_ERROR, 6000);
-            }
-        } else {
-            createAlert('warning', ALERTS.MN_ACCESS_BEFORE_VOTE, 6000);
-        }
-    }
-}
-
-/**
- * Start a Masternode via a signed network broadcast
- * @param {boolean} fRestart - Whether this is a Restart or a first Start
- */
-export async function startMasternode(fRestart = false) {
-    const database = await Database.getInstance();
-    const cMasternode = await database.getMasternode(wallet.getMasterKey());
-    if (cMasternode) {
-        if (
-            wallet.isViewOnly() &&
-            !(await restoreWallet(translation.walletUnlockMNStart))
-        )
-            return;
-        if (await cMasternode.start()) {
-            const strMsg = fRestart ? ALERTS.MN_RESTARTED : ALERTS.MN_STARTED;
-            createAlert('success', strMsg, 4000);
-        } else {
-            const strMsg = fRestart
-                ? ALERTS.MN_RESTART_FAILED
-                : ALERTS.MN_START_FAILED;
-            createAlert('warning', strMsg, 4000);
-        }
-    }
-}
-
-export async function destroyMasternode() {
-    const database = await Database.getInstance();
-    const cMasternode = await database.getMasternode(wallet.getMasterKey());
-    if (cMasternode) {
-        // Unlock the coin and update the balance
-        wallet.unlockCoin(
-            new COutpoint({
-                txid: cMasternode.collateralTxId,
-                n: cMasternode.outidx,
-            })
-        );
-
-        database.removeMasternode(wallet.getMasterKey());
-        createAlert('success', ALERTS.MN_DESTROYED, 5000);
-        updateMasternodeTab();
-    }
-}
-
-/**
- * Takes an ip address and adds the port.
- * If it's a tor address, ip.onion:port will be used (e.g. expyuzz4wqqyqhjn.onion:12345)
- * If it's an IPv4 address, ip:port will be used, (e.g. 127.0.0.1:12345)
- * If it's an IPv6 address, [ip]:port will be used, (e.g. [::1]:12345)
- * @param {String} ip - Ip address with or without port
- * @returns {String}
- */
-function parseIpAddress(ip) {
-    // IPv4 or tor without port
-    if (ip.match(/\d+\.\d+\.\d+\.\d+/) || ip.match(/\w+\.onion/)) {
-        return `${ip}:${cChainParams.current.MASTERNODE_PORT}`;
-    }
-
-    // IPv4 or tor with port
-    if (ip.match(/\d+\.\d+\.\d+\.\d+:\d+/) || ip.match(/\w+\.onion:\d+/)) {
-        return ip;
-    }
-
-    // IPv6 without port
-    if (Address6.isValid(ip)) {
-        return `[${ip}]:${cChainParams.current.MASTERNODE_PORT}`;
-    }
-
-    const groups = /\[(.*)\]:\d+/.exec(ip);
-    if (groups !== null && groups.length > 1) {
-        // IPv6 with port
-        if (Address6.isValid(groups[1])) {
-            return ip;
-        }
-    }
-
-    // If we haven't returned yet, the address was invalid.
-    return null;
-}
-
-export async function importMasternode() {
-    const mnPrivKey = doms.domMnPrivateKey.value;
-    const address = parseIpAddress(doms.domMnIP.value);
-    if (!address) {
-        createAlert('warning', ALERTS.MN_BAD_IP, 5000);
-        return;
-    }
-    if (!mnPrivKey) {
-        createAlert('warning', ALERTS.MN_BAD_PRIVKEY, 5000);
-        return;
-    }
-
-    let collateralTxId;
-    let outidx;
-    let collateralPrivKeyPath;
-    doms.domMnIP.value = '';
-    doms.domMnPrivateKey.value = '';
-
-    if (!wallet.isHD()) {
-        // Find the first UTXO matching the expected collateral size
-        const cCollaUTXO = wallet.getMasternodeUTXOs()[0];
-        const balance = wallet.balance;
-        // If there's no valid UTXO, exit with a contextual message
-        if (!cCollaUTXO) {
-            if (balance < cChainParams.current.collateralInSats) {
-                // Not enough balance to create an MN UTXO
-                const amount =
-                    (cChainParams.current.collateralInSats - balance) / COIN;
-                const ticker = cChainParams.current.TICKER;
-                createAlert(
-                    'warning',
-                    tr(ALERTS.MN_NOT_ENOUGH_COLLAT, [
-                        { amount: amount },
-                        { ticker: ticker },
-                    ]),
-                    10000
-                );
-            } else {
-                // Balance is capable of a masternode, just needs to be created
-                // TODO: this UX flow is weird, is it even possible? perhaps we can re-design this entire function accordingly
-                const amount = cChainParams.current.collateralInSats / COIN;
-                const ticker = cChainParams.current.TICKER;
-                createAlert(
-                    'warning',
-                    tr(ALERTS.MN_ENOUGH_BUT_NO_COLLAT, [
-                        { amount },
-                        { ticker },
-                    ]),
-                    10000
-                );
-            }
-            return;
-        }
-
-        collateralTxId = cCollaUTXO.outpoint.txid;
-        outidx = cCollaUTXO.outpoint.n;
-        collateralPrivKeyPath = 'legacy';
-    } else {
-        const path = doms.domMnTxId.value;
-        let masterUtxo;
-        const utxos = wallet.getMasternodeUTXOs();
-        for (const u of utxos) {
-            if (
-                u.value === cChainParams.current.collateralInSats &&
-                wallet.getPath(u.script) === path
-            ) {
-                masterUtxo = u;
-            }
-        }
-
-        // sanity check:
-        if (masterUtxo.value !== cChainParams.current.collateralInSats) {
-            return createAlert('warning', ALERTS.MN_COLLAT_NOT_SUITABLE, 10000);
-        }
-        collateralTxId = masterUtxo.outpoint.txid;
-        outidx = masterUtxo.outpoint.n;
-        collateralPrivKeyPath = path;
-    }
-    doms.domMnTxId.value = '';
-
-    const cMasternode = new Masternode({
-        walletPrivateKeyPath: collateralPrivKeyPath,
-        mnPrivateKey: mnPrivKey,
-        collateralTxId: collateralTxId,
-        outidx: outidx,
-        addr: address,
-    });
-
-    await refreshMasternodeData(cMasternode, true);
-    await updateMasternodeTab();
-}
-
 export async function accessOrImportWallet() {
     // Hide and Reset the Vanity address input
 
@@ -791,943 +493,6 @@ export async function restoreWallet(strReason = '') {
     return await dashboard.restoreWallet(strReason);
 }
 
-/** A lock to prevent rendering the Governance Dashboard multiple times */
-let fRenderingGovernance = false;
-
-/**
- * Fetch Governance data and re-render the Governance UI
- */
-export async function updateGovernanceTab() {
-    if (fRenderingGovernance) return;
-    fRenderingGovernance = true;
-
-    // Setup the Superblock countdown (if not already done), no need to block thread with await, either.
-    if (isTestnetLastState !== cChainParams.current.isTestnet) {
-        // Reset flipdown
-        governanceFlipdown = null;
-        doms.domFlipdown.innerHTML = '';
-    }
-
-    // Update governance counter when testnet/mainnet has been switched
-    if (!governanceFlipdown && blockCount > 0) {
-        getNetwork()
-            .getNextSuperblock()
-            .then((nSuperblock) => {
-                // The estimated time to the superblock (using the block target and remaining blocks)
-                const nTimestamp =
-                    Date.now() / 1000 + (nSuperblock - blockCount) * 60;
-                governanceFlipdown = new FlipDown(nTimestamp).start();
-            });
-        isTestnetLastState = cChainParams.current.isTestnet;
-    }
-
-    // Fetch all proposals from the network
-    const arrProposals = await getNetwork().getProposals();
-
-    /* Sort proposals into two categories
-        - Standard (Proposal is either new with <100 votes, or has a healthy vote count)
-        - Contested (When a proposal may be considered spam, malicious, or simply highly contestable)
-    */
-    const arrStandard = arrProposals.filter(
-        (a) => a.Yeas + a.Nays < 100 || a.Ratio > 0.25
-    );
-    const arrContested = arrProposals.filter(
-        (a) => a.Yeas + a.Nays >= 100 && a.Ratio <= 0.25
-    );
-
-    // Render Proposals
-    await Promise.all([
-        renderProposals(arrStandard, false),
-        renderProposals(arrContested, true),
-    ]);
-
-    // Remove lock
-    fRenderingGovernance = false;
-}
-
-/**
- * @typedef {Object} ProposalCache
- * @property {number} nSubmissionHeight - The submission height of the proposal.
- * @property {string} txid - The transaction ID of the proposal (string).
- * @property {boolean} fFetching - Indicates whether the proposal is currently being fetched or not.
- */
-
-/**
- * An array of Proposal Finalisation caches
- * @type {Array<ProposalCache>}
- */
-const arrProposalFinalisationCache = [];
-
-/**
- * Asynchronously wait for a Proposal Tx to confirm, then cache the height.
- *
- * Do NOT await unless you want to lock the thread for a long time.
- * @param {ProposalCache} cProposalCache - The proposal cache to wait for
- * @returns {Promise<boolean>} Returns `true` once the block height is cached
- */
-async function waitForSubmissionBlockHeight(cProposalCache) {
-    let nHeight = null;
-
-    // Wait in a permanent throttled loop until we successfully fetch the block
-    const cNet = getNetwork();
-    while (true) {
-        // If a proposal is already fetching, then consequtive calls will be rejected
-        cProposalCache.fFetching = true;
-
-        // Attempt to fetch the submission Tx (may not exist yet!)
-        let cTx = null;
-        try {
-            cTx = await cNet.getTxInfo(cProposalCache.txid);
-        } catch (_) {}
-
-        if (!cTx || !cTx.blockHeight) {
-            // Didn't get the TX, throttle the thread by sleeping for a bit, then try again.
-            await sleep(30000);
-        } else {
-            nHeight = cTx.blockHeight;
-            break;
-        }
-    }
-
-    // Update the proposal finalisation cache
-    cProposalCache.nSubmissionHeight = nHeight;
-
-    return true;
-}
-
-/**
- * Create a Status String for a proposal's finalisation status
- * @param {ProposalCache} cPropCache - The proposal cache to check
- * @returns {string} The string status, for display purposes
- */
-function getProposalFinalisationStatus(cPropCache) {
-    // Confirmations left until finalisation, by network consensus
-    const nConfsLeft =
-        cPropCache.nSubmissionHeight +
-        cChainParams.current.proposalFeeConfirmRequirement -
-        blockCount;
-
-    if (cPropCache.nSubmissionHeight === 0 || blockCount === 0) {
-        return translation.proposalFinalisationConfirming;
-    } else if (nConfsLeft > 0) {
-        return (
-            nConfsLeft +
-            ' block' +
-            (nConfsLeft === 1 ? '' : 's') +
-            ' ' +
-            translation.proposalFinalisationRemaining
-        );
-    } else if (Math.abs(nConfsLeft) >= cChainParams.current.budgetCycleBlocks) {
-        return translation.proposalFinalisationExpired;
-    } else {
-        return translation.proposalFinalisationReady;
-    }
-}
-
-/**
- *
- * @param {Object} cProposal - A local proposal to add to the cache tracker
- * @returns {ProposalCache} - The finalisation cache object pointer of the local proposal
- */
-function addProposalToFinalisationCache(cProposal) {
-    // If it exists, return the existing cache
-    /** @type ProposalCache */
-    let cPropCache = arrProposalFinalisationCache.find(
-        (a) => a.txid === cProposal.mpw.txid
-    );
-    if (cPropCache) return cPropCache;
-
-    // Create a new cache
-    cPropCache = {
-        nSubmissionHeight: 0,
-        txid: cProposal.mpw.txid,
-        fFetching: false,
-    };
-    arrProposalFinalisationCache.push(cPropCache);
-
-    // Return the object 'pointer' in the array for further updating
-    return cPropCache;
-}
-
-/**
- * Render Governance proposal objects to a given Proposal category
- * @param {Array<object>} arrProposals - The proposals to render
- * @param {boolean} fContested - The proposal category
- */
-async function renderProposals(arrProposals, fContested) {
-    // Set the total budget
-    doms.domTotalGovernanceBudget.innerText = (
-        cChainParams.current.maxPayment / COIN
-    ).toLocaleString('en-gb');
-
-    // Update total budget in user's currency
-    const nPrice = cOracle.getCachedPrice(strCurrency);
-    const nCurrencyValue = (cChainParams.current.maxPayment / COIN) * nPrice;
-    const { nValue, cLocale } = optimiseCurrencyLocale(nCurrencyValue);
-    doms.domTotalGovernanceBudgetValue.innerHTML =
-        nValue.toLocaleString('en-gb', cLocale) +
-        ' <span style="color:#7C1DEA;">' +
-        strCurrency.toUpperCase() +
-        '</span>';
-
-    // Select the table based on the proposal category
-    const domTable = fContested
-        ? doms.domGovProposalsContestedTableBody
-        : doms.domGovProposalsTableBody;
-
-    // Render the proposals in the relevent table
-    const database = await Database.getInstance();
-    const cMasternode = await database.getMasternode();
-
-    if (!fContested) {
-        const localProposals =
-            (await database.getAccount())?.localProposals?.map((p) => {
-                return {
-                    Name: p.name,
-                    URL: p.url,
-                    PaymentAddress: p.address,
-                    MonthlyPayment: p.monthlyPayment / COIN,
-                    RemainingPaymentCount: p.nPayments,
-                    TotalPayment: p.nPayments * (p.monthlyPayment / COIN),
-                    Yeas: 0,
-                    Nays: 0,
-                    local: true,
-                    Ratio: 0,
-                    IsEstablished: false,
-                    mpw: p,
-                };
-            }) || [];
-        arrProposals = localProposals.concat(arrProposals);
-    }
-    arrProposals = await Promise.all(
-        arrProposals.map(async (p) => {
-            return {
-                YourVote:
-                    cMasternode && p.Hash
-                        ? await cMasternode.getVote(p.Name, p.Hash)
-                        : null,
-                ...p,
-            };
-        })
-    );
-
-    // Fetch the Masternode count for proposal status calculations
-    const cMasternodes = await getNetwork().getMasternodeCount();
-
-    let totalAllocatedAmount = 0;
-
-    // Wipe the current table and start rendering proposals
-    let i = 0;
-    domTable.innerHTML = '';
-    for (const cProposal of arrProposals) {
-        const domRow = domTable.insertRow();
-
-        const domStatus = domRow.insertCell();
-        domStatus.classList.add('governStatusCol');
-        if (!fContested) {
-            domStatus.setAttribute(
-                'onclick',
-                `if(document.getElementById('governMob${i}').classList.contains('d-none')) { document.getElementById('governMob${i}').classList.remove('d-none'); } else { document.getElementById('governMob${i}').classList.add('d-none'); }`
-            );
-        } else {
-            domStatus.setAttribute(
-                'onclick',
-                `if(document.getElementById('governMobCon${i}').classList.contains('d-none')) { document.getElementById('governMobCon${i}').classList.remove('d-none'); } else { document.getElementById('governMobCon${i}').classList.add('d-none'); }`
-            );
-        }
-
-        // Add border radius to last row
-        if (arrProposals.length - 1 === i) {
-            domStatus.classList.add('bblr-7p');
-        }
-
-        // Net Yes calculation
-        const { Yeas, Nays } = cProposal;
-        const nNetYes = Yeas - Nays;
-        const nNetYesPercent = (nNetYes / cMasternodes.enabled) * 100;
-
-        // Proposal Status calculation
-        const nRequiredVotes = cMasternodes.enabled / 10;
-        const nMonthlyPayment = parseInt(cProposal.MonthlyPayment);
-
-        // Initial state is assumed to be "Not enough votes"
-        let strStatus = translation.proposalFailing;
-        let strFundingStatus = translation.proposalNotFunded;
-        let strColourClass = 'No';
-
-        // Proposal Status calculations
-        if (nNetYes < nRequiredVotes) {
-            // Scenario 1: Not enough votes, default scenario
-        } else if (!cProposal.IsEstablished) {
-            // Scenario 2: Enough votes, but not established
-            strFundingStatus = translation.proposalTooYoung;
-        } else if (
-            nMonthlyPayment + totalAllocatedAmount >
-            cChainParams.current.maxPayment / COIN
-        ) {
-            // Scenario 3: Enough votes, and established, but over-allocating the budget
-            strStatus = translation.proposalPassing;
-            strFundingStatus = translation.proposalOverBudget;
-            strColourClass = 'OverAllocated';
-        } else {
-            // Scenario 4: Enough votes, and established
-            strStatus = translation.proposalPassing;
-            strFundingStatus = translation.proposalFunded;
-            strColourClass = 'Yes';
-
-            // Allocate this with the budget
-            totalAllocatedAmount += nMonthlyPayment;
-        }
-
-        // Funding Status and allocation calculations
-        if (cProposal.local) {
-            // Check the finalisation cache
-            const cPropCache = addProposalToFinalisationCache(cProposal);
-            if (!cPropCache.fFetching) {
-                waitForSubmissionBlockHeight(cPropCache).then(
-                    updateGovernanceTab
-                );
-            }
-            const strLocalStatus = getProposalFinalisationStatus(cPropCache);
-            const finalizeButton = document.createElement('button');
-            finalizeButton.className = 'pivx-button-small ';
-            finalizeButton.innerHTML = '<i class="fas fa-check"></i>';
-
-            if (
-                strLocalStatus === translation.proposalFinalisationReady ||
-                strLocalStatus === translation.proposalFinalisationExpired
-            ) {
-                finalizeButton.addEventListener('click', async () => {
-                    const result = await Masternode.finalizeProposal(
-                        cProposal.mpw
-                    );
-
-                    const deleteProposal = async () => {
-                        // Fetch Account
-                        const account = await database.getAccount();
-
-                        // Find index of Account local proposal to remove
-                        const nProposalIndex = account.localProposals.findIndex(
-                            (p) => p.txid === cProposal.mpw.txid
-                        );
-
-                        // If found, remove the proposal and update the account with the modified localProposals array
-                        if (nProposalIndex > -1) {
-                            // Remove our proposal from it
-                            account.localProposals.splice(nProposalIndex, 1);
-
-                            // Update the DB
-                            await database.updateAccount(account, true);
-                        }
-                    };
-
-                    if (result.ok) {
-                        deleteProposal();
-                        // Create a prompt showing the finalisation success, vote hash, and further details
-                        confirmPopup({
-                            title: translation.PROPOSAL_FINALISED + ' 🚀',
-                            html: `<p><span style="opacity: 0.65; margin: 10px;">${
-                                translation.popupProposalFinalisedNote
-                            }</span><br><br>${
-                                translation.popupProposalVoteHash
-                            }<br><span class="mono" style="font-size: small;">${sanitizeHTML(
-                                result.hash
-                            )}</span><br><br>${
-                                translation.popupProposalFinalisedSignoff
-                            } 👋</p>`,
-                            hideConfirm: true,
-                        });
-                        updateGovernanceTab();
-                    } else {
-                        if (result.err === 'unconfirmed') {
-                            createAlert(
-                                'warning',
-                                ALERTS.PROPOSAL_UNCONFIRMED,
-                                5000
-                            );
-                        } else if (result.err === 'invalid') {
-                            createAlert(
-                                'warning',
-                                ALERTS.PROPOSAL_EXPIRED,
-                                5000
-                            );
-                            deleteProposal();
-                            updateGovernanceTab();
-                        } else {
-                            createAlert(
-                                'warning',
-                                ALERTS.PROPOSAL_FINALISE_FAIL
-                            );
-                        }
-                    }
-                });
-            } else {
-                finalizeButton.style.opacity = 0.5;
-                finalizeButton.style.cursor = 'default';
-            }
-
-            domStatus.innerHTML = `
-            <span style="font-size:12px; line-height: 15px; display: block; margin-bottom:15px;">
-                <span style="color:#fff; font-weight:700;">${strLocalStatus}</span><br>
-            </span>
-            <span class="governArrow for-mobile ptr">
-                <i class="fa-solid fa-angle-down"></i>
-            </span>`;
-            domStatus.appendChild(finalizeButton);
-        } else {
-            domStatus.innerHTML = `
-            <span style="text-transform:uppercase; font-size:12px; line-height: 15px; display: block; margin-bottom:15px;">
-                <span style="font-weight:700;" class="votes${strColourClass}">${strStatus}</span><br>
-                <span style="color:#9482b1;">(${strFundingStatus})</span><br>
-            </span>
-            <span style="font-size:12px; line-height: 15px; display: block; color:#9482b1;">
-                <b style="color:#e9deff;">${nNetYesPercent.toFixed(1)}%</b><br>
-                ${translation.proposalNetYes}
-            </span>
-            <span class="governArrow for-mobile ptr">
-                <i class="fa-solid fa-angle-down"></i>
-            </span>`;
-        }
-
-        // Name, Payment Address and URL hyperlink
-        const domNameAndURL = domRow.insertCell();
-        domNameAndURL.style = 'vertical-align: middle;';
-
-        // IMPORTANT: Sanitise all of our HTML or a rogue server or malicious proposal could perform a cross-site scripting attack
-        domNameAndURL.innerHTML = `<a class="governLink" style="color: white" href="${sanitizeHTML(
-            cProposal.URL
-        )}" target="_blank" rel="noopener noreferrer"><b>${sanitizeHTML(
-            cProposal.Name
-        )} <span class="governLinkIco"><i class="fa-solid fa-arrow-up-right-from-square"></i></b></a></span><br>
-        <a class="governLink" style="border-radius: 8px; background-color:#1A122D; padding: 6px 9px; font-size: 14px; color:#861ff7;" onclick="MPW.openExplorer('${
-            cProposal.PaymentAddress
-        }')"><i class="fa-solid fa-user-large" style="margin-right: 5px"></i><b>${sanitizeHTML(
-            cProposal.PaymentAddress.slice(0, 10) + '...'
-        )}`;
-
-        // Convert proposal amount to user's currency
-        const nProposalValue = nMonthlyPayment * nPrice;
-        const { nValue } = optimiseCurrencyLocale(nProposalValue);
-        const strProposalCurrency = nValue.toLocaleString('en-gb', cLocale);
-
-        // Payment Schedule and Amounts
-        const domPayments = domRow.insertCell();
-        domPayments.classList.add('for-desktop');
-        domPayments.style = 'vertical-align: middle;';
-        domPayments.innerHTML = `<span class="governValues"><b>${sanitizeHTML(
-            nMonthlyPayment.toLocaleString('en-gb', ',', '.')
-        )}</b> <span class="governMarked">${
-            cChainParams.current.TICKER
-        }</span> <br>
-        <b class="governFiatSize">${strProposalCurrency} <span style="color:#7C1DEA;">${strCurrency.toUpperCase()}</span></b></span>
-
-        <span class="governInstallments"> ${sanitizeHTML(
-            cProposal['RemainingPaymentCount']
-        )} ${
-            translation.proposalPaymentsRemaining
-        } <span style="font-weight:500;">${sanitizeHTML(
-            parseInt(cProposal.TotalPayment).toLocaleString('en-gb', ',', '.')
-        )} ${cChainParams.current.TICKER}</span> ${
-            translation.proposalPaymentTotal
-        }</span>`;
-
-        // Vote Counts and Consensus Percentages
-        const domVoteCounters = domRow.insertCell();
-        domVoteCounters.classList.add('for-desktop');
-        domVoteCounters.style = 'vertical-align: middle;';
-
-        const nLocalPercent = cProposal.Ratio * 100;
-        domVoteCounters.innerHTML = `<b>${parseFloat(
-            nLocalPercent
-        ).toLocaleString(
-            'en-gb',
-            { minimumFractionDigits: 0, maximumFractionDigits: 1 },
-            ',',
-            '.'
-        )}%</b> <br>
-        <small class="votesBg"> <b><div class="votesYes" style="display:inline;"> ${sanitizeHTML(
-            Yeas
-        )} </div></b> /
-        <b><div class="votesNo" style="display:inline;"> ${sanitizeHTML(
-            Nays
-        )} </div></b></small>
-        `;
-
-        // Voting Buttons for Masternode owners (MNOs)
-        let voteBtn;
-        if (cProposal.local) {
-            const domVoteBtns = domRow.insertCell();
-            domVoteBtns.classList.add('for-desktop');
-            domVoteBtns.style = 'vertical-align: middle;';
-            voteBtn = '';
-        } else {
-            let btnYesClass = 'pivx-button-small govYesBtnMob';
-            let btnNoClass =
-                'pivx-button-outline pivx-button-outline-small govNoBtnMob';
-            if (cProposal.YourVote) {
-                if (cProposal.YourVote === 1) {
-                    btnYesClass += ' pivx-button-big-yes-gov';
-                } else {
-                    btnNoClass += ' pivx-button-big-no-gov';
-                }
-            }
-
-            const domVoteBtns = domRow.insertCell();
-            domVoteBtns.style =
-                'padding-top: 30px; vertical-align: middle; display: flex; justify-content: center; align-items: center;';
-            const domNoBtn = document.createElement('div');
-            domNoBtn.className = btnNoClass;
-            domNoBtn.style.width = 'fit-content';
-            domNoBtn.innerHTML = `<span>${translation.no}</span>`;
-            domNoBtn.onclick = () => govVote(cProposal.Hash, 2);
-
-            const domYesBtn = document.createElement('button');
-            domYesBtn.className = btnYesClass;
-            domYesBtn.innerText = translation.yes;
-            domYesBtn.onclick = () => govVote(cProposal.Hash, 1);
-
-            // Add border radius to last row
-            if (arrProposals.length - 1 === i) {
-                domVoteBtns.classList.add('bbrr-7p');
-            }
-
-            domVoteBtns.classList.add('for-desktop');
-            domVoteBtns.appendChild(domNoBtn);
-            domVoteBtns.appendChild(domYesBtn);
-
-            domNoBtn.setAttribute(
-                'onclick',
-                `MPW.govVote('${cProposal.Hash}', 2)`
-            );
-            domYesBtn.setAttribute(
-                'onclick',
-                `MPW.govVote('${cProposal.Hash}', 1);`
-            );
-
-            domYesBtn.setAttribute('style', `height:36px;`);
-            voteBtn = domNoBtn.outerHTML + domYesBtn.outerHTML;
-        }
-
-        // Create extended row for mobile
-        const mobileDomRow = domTable.insertRow();
-        const mobileExtended = mobileDomRow.insertCell();
-        mobileExtended.style = 'vertical-align: middle;';
-        if (!fContested) {
-            mobileExtended.id = `governMob${i}`;
-        } else {
-            mobileExtended.id = `governMobCon${i}`;
-        }
-        mobileExtended.colSpan = '2';
-        mobileExtended.classList.add('text-left');
-        mobileExtended.classList.add('d-none');
-        mobileExtended.classList.add('for-mobile');
-        mobileExtended.innerHTML = `
-        <div class="row pt-2">
-            <div class="col-5 fs-13 fw-600">
-                ${translation.govTablePayment}
-            </div>
-            <div class="col-7">
-                <span class="governValues"><b>${sanitizeHTML(
-                    nMonthlyPayment.toLocaleString('en-gb', ',', '.')
-                )}</b> <span class="governMarked">${
-            cChainParams.current.TICKER
-        }</span> <span style="margin-left:10px; margin-right: 2px;" class="governMarked governFiatSize">${strProposalCurrency}</span></b></span>
-        
-                <span class="governInstallments"> ${sanitizeHTML(
-                    cProposal['RemainingPaymentCount']
-                )} ${translation.proposalPaymentsRemaining} <b>${sanitizeHTML(
-            parseInt(cProposal.TotalPayment).toLocaleString('en-gb', ',', '.')
-        )} ${cChainParams.current.TICKER}</b> ${
-            translation.proposalPaymentTotal
-        }</span>
-            </div>
-        </div>
-        <hr class="governHr">
-        <div class="row">
-            <div class="col-5 fs-13 fw-600">
-                ${translation.govTableVotes}
-            </div>
-            <div class="col-7">
-                <b>${parseFloat(nLocalPercent).toLocaleString(
-                    'en-gb',
-                    { minimumFractionDigits: 0, maximumFractionDigits: 1 },
-                    ',',
-                    '.'
-                )}%</b>
-                <small class="votesBg"> <b><div class="votesYes" style="display:inline;"> ${sanitizeHTML(
-                    Yeas
-                )} </div></b> /
-                <b><div class="votesNo" style="display:inline;"> ${sanitizeHTML(
-                    Nays
-                )} </div></b></small>
-            </div>
-        </div>
-        <hr class="governHr">
-        <div class="row pb-2">
-            <div class="col-5 fs-13 fw-600">
-                ${translation.govTableVote}
-            </div>
-            <div class="col-7 mobileVote">
-                ${voteBtn}
-            </div>
-        </div>`;
-
-        i++;
-    }
-
-    // Show allocated budget
-    if (!fContested) {
-        const strAlloc = sanitizeHTML(
-            totalAllocatedAmount.toLocaleString('en-gb')
-        );
-        doms.domAllocatedGovernanceBudget.innerHTML = strAlloc;
-        doms.domAllocatedGovernanceBudget2.innerHTML = strAlloc;
-
-        // Update allocated budget in user's currency
-        const nCurrencyValue = totalAllocatedAmount * nPrice;
-        const { nValue } = optimiseCurrencyLocale(nCurrencyValue);
-        const strAllocCurrency =
-            nValue.toLocaleString('en-gb', cLocale) +
-            ' <span style="color:#7C1DEA;">' +
-            strCurrency.toUpperCase() +
-            '</span>';
-        doms.domAllocatedGovernanceBudgetValue.innerHTML = strAllocCurrency;
-        doms.domAllocatedGovernanceBudgetValue2.innerHTML = strAllocCurrency;
-    }
-}
-
-export async function updateMasternodeTab() {
-    //TODO: IN A FUTURE ADD MULTI-MASTERNODE SUPPORT BY SAVING MNs with which you logged in the past.
-    // Ensure a wallet is loaded
-    doms.domMnTextErrors.innerHTML = '';
-    doms.domAccessMasternode.style.display = 'none';
-    doms.domCreateMasternode.style.display = 'none';
-    doms.domMnDashboard.style.display = 'none';
-
-    if (!wallet.isLoaded()) {
-        doms.domMnTextErrors.innerHTML =
-            'Please ' +
-            ((await hasEncryptedWallet()) ? 'unlock' : 'import') +
-            ' your <b>COLLATERAL WALLET</b> first.';
-        return;
-    }
-
-    if (!wallet.isSynced) {
-        doms.domMnTextErrors.innerHTML =
-            'Your wallet is empty or still loading, re-open the tab in a few seconds!';
-        return;
-    }
-
-    const database = await Database.getInstance();
-
-    let cMasternode = await database.getMasternode();
-    // If the collateral is missing (spent, or switched wallet) then remove the current MN
-    if (cMasternode) {
-        if (
-            !wallet.isCoinLocked(
-                new COutpoint({
-                    txid: cMasternode.collateralTxId,
-                    n: cMasternode.outidx,
-                })
-            )
-        ) {
-            database.removeMasternode();
-            cMasternode = null;
-        }
-    }
-
-    doms.domControlMasternode.style.display = cMasternode ? 'block' : 'none';
-
-    // first case: the wallet is not HD and it is not hardware, so in case the wallet has collateral the user can check its status and do simple stuff like voting
-    if (!wallet.isHD()) {
-        doms.domMnAccessMasternodeText.innerHTML =
-            doms.masternodeLegacyAccessText;
-        doms.domMnTxId.style.display = 'none';
-        // Find the first UTXO matching the expected collateral size
-        const cCollaUTXO = wallet.getMasternodeUTXOs()[0];
-
-        const balance = wallet.balance;
-        if (cMasternode) {
-            await refreshMasternodeData(cMasternode);
-            doms.domMnDashboard.style.display = '';
-        } else if (cCollaUTXO) {
-            doms.domMnTxId.style.display = 'none';
-            doms.domAccessMasternode.style.display = 'block';
-        } else if (balance < cChainParams.current.collateralInSats) {
-            // The user needs more funds
-            doms.domMnTextErrors.innerHTML =
-                'You need <b>' +
-                (cChainParams.current.collateralInSats - balance) / COIN +
-                ' more ' +
-                cChainParams.current.TICKER +
-                '</b> to create a Masternode!';
-        } else {
-            // The user has the funds, but not an exact collateral, prompt for them to create one
-            doms.domCreateMasternode.style.display = 'flex';
-            doms.domMnTxId.style.display = 'none';
-            doms.domMnTxId.innerHTML = '';
-        }
-    } else {
-        doms.domMnTxId.style.display = 'none';
-        doms.domMnTxId.innerHTML = '';
-        doms.domMnAccessMasternodeText.innerHTML = doms.masternodeHDAccessText;
-
-        // First UTXO for each address in HD
-        const mapCollateralPath = new Map();
-
-        // Aggregate all valid Masternode collaterals into a map of Path <--> Collateral
-        for (const cUTXO of wallet.getMasternodeUTXOs()) {
-            mapCollateralPath.set(wallet.getPath(cUTXO.script), cUTXO);
-        }
-        const fHasCollateral = mapCollateralPath.size > 0;
-        // If there's no loaded MN, but valid collaterals, display the configuration screen
-        if (!cMasternode && fHasCollateral) {
-            doms.domMnTxId.style.display = 'block';
-            doms.domAccessMasternode.style.display = 'block';
-
-            for (const [key] of mapCollateralPath) {
-                const option = document.createElement('option');
-                option.value = key;
-                option.innerText = wallet.getAddressFromPath(key);
-                doms.domMnTxId.appendChild(option);
-            }
-        }
-
-        // If there's no collateral found, display the creation UI
-        if (!fHasCollateral && !cMasternode)
-            doms.domCreateMasternode.style.display = 'flex';
-
-        // If we a loaded Masternode, display the Dashboard
-        if (cMasternode) {
-            // Refresh the display
-            refreshMasternodeData(cMasternode);
-            doms.domMnDashboard.style.display = '';
-        }
-    }
-}
-
-async function refreshMasternodeData(cMasternode, fAlert = false) {
-    const cMasternodeData = await cMasternode.getFullData();
-
-    debugLog(DebugTopics.GLOBAL, ' ---- NEW MASTERNODE DATA (Debug Mode) ----');
-    debugLog(DebugTopics.GLOBAL, cMasternodeData);
-    debugLog(DebugTopics.GLOBAL, '---- END MASTERNODE DATA (Debug Mode) ----');
-
-    // If we have MN data available, update the dashboard
-    if (cMasternodeData && cMasternodeData.status !== 'MISSING') {
-        doms.domMnTextErrors.innerHTML = '';
-        doms.domMnProtocol.innerText = `(${sanitizeHTML(
-            cMasternodeData.version
-        )})`;
-        doms.domMnStatus.innerText = sanitizeHTML(cMasternodeData.status);
-        doms.domMnNetType.innerText = sanitizeHTML(
-            cMasternodeData.network.toUpperCase()
-        );
-        doms.domMnNetIP.innerText = cMasternode.addr;
-        doms.domMnLastSeen.innerText = new Date(
-            cMasternodeData.lastseen * 1000
-        ).toLocaleTimeString();
-    }
-
-    if (cMasternodeData.status === 'MISSING') {
-        doms.domMnTextErrors.innerHTML =
-            'Masternode is currently <b>OFFLINE</b>';
-        if (
-            wallet.isHardwareWallet() ||
-            !wallet.isViewOnly() ||
-            (await restoreWallet(translation.walletUnlockCreateMN))
-        ) {
-            createAlert('warning', ALERTS.MN_OFFLINE_STARTING, 6000);
-            // try to start the masternode
-            const started = await cMasternode.start();
-            if (started) {
-                doms.domMnTextErrors.innerHTML = ALERTS.MN_STARTED;
-                createAlert('success', ALERTS.MN_STARTED_ONLINE_SOON, 6000);
-                const database = await Database.getInstance();
-                await database.addMasternode(cMasternode);
-                wallet.lockCoin(
-                    new COutpoint({
-                        txid: cMasternode.collateralTxId,
-                        n: cMasternode.outidx,
-                    })
-                );
-            } else {
-                doms.domMnTextErrors.innerHTML = ALERTS.MN_START_FAILED;
-                createAlert('warning', ALERTS.MN_START_FAILED, 6000);
-            }
-        }
-    } else if (
-        cMasternodeData.status === 'ENABLED' ||
-        cMasternodeData.status === 'PRE_ENABLED'
-    ) {
-        if (fAlert)
-            createAlert(
-                'success',
-                `${ALERTS.MN_STATUS_IS} <b> ${sanitizeHTML(
-                    cMasternodeData.status
-                )} </b>`,
-                6000
-            );
-        const database = await Database.getInstance();
-        await database.addMasternode(cMasternode);
-        wallet.lockCoin(
-            new COutpoint({
-                txid: cMasternode.collateralTxId,
-                n: cMasternode.outidx,
-            })
-        );
-    } else if (cMasternodeData.status === 'REMOVED') {
-        const state = cMasternodeData.status;
-        doms.domMnTextErrors.innerHTML = tr(ALERTS.MN_STATE, [
-            { state: state },
-        ]);
-        if (fAlert)
-            createAlert(
-                'warning',
-                tr(ALERTS.MN_STATE, [{ state: state }]),
-                6000
-            );
-    } else {
-        // connection problem
-        doms.domMnTextErrors.innerHTML = ALERTS.MN_CANT_CONNECT;
-        if (fAlert) createAlert('warning', ALERTS.MN_CANT_CONNECT, 6000);
-    }
-
-    // Return the data in case the caller needs additional context
-    return cMasternodeData;
-}
-
-export async function createProposal() {
-    // Must have a wallet
-    if (!wallet.isLoaded()) {
-        return createAlert('warning', ALERTS.PROPOSAL_IMPORT_FIRST, 4500);
-    }
-    // Wallet must be encrypted
-    if (!(await hasEncryptedWallet())) {
-        return createAlert(
-            'warning',
-            tr(translation.popupProposalEncryptFirst, [
-                { button: translation.secureYourWallet },
-            ]),
-            4500
-        );
-    }
-    // Wallet must be unlocked
-    if (
-        wallet.isViewOnly() &&
-        !(await restoreWallet(translation.walletUnlockProposal))
-    ) {
-        return;
-    }
-    // Must have enough funds
-    if (wallet.balance * COIN < cChainParams.current.proposalFee) {
-        return createAlert('warning', ALERTS.PROPOSAL_NOT_ENOUGH_FUNDS, 4500);
-    }
-
-    // Create the popup, wait for the user to confirm or cancel
-    const fConfirmed = await confirmPopup({
-        title: `<h4>${translation.popupCreateProposal}</h4>
-        <span style="color: #af9cc6; font-size: 1rem; margin-bottom: 23px; display: block;">${
-            translation.popupCreateProposalCost
-        } <b>${cChainParams.current.proposalFee / COIN} ${
-            cChainParams.current.TICKER
-        }</b></span>`,
-        html: `<div style="padding-left: 10px; padding-right: 10px;">
-            <p style="margin-bottom: 12px; color: #af9cc6; font-size: 1rem; font-weight: 500;">Proposal name</p>
-            <input id="proposalTitle" maxlength="20" placeholder="${
-                translation.popupProposalName
-            }" style="text-align: start; margin-bottom: 25px;"><br>
-            
-            <p style="margin-bottom: 12px; color: #af9cc6; font-size: 1rem; font-weight: 500;">URL</p>
-            <input id="proposalUrl" maxlength="64" placeholder="https://forum.pivx.org/..." style=" margin-bottom: 25px; text-align: start;"><br>
-            
-            <p style="margin-bottom: 12px; color: #af9cc6; font-size: 1rem; font-weight: 500;">Duration in cycles</p>
-            <input type="number" id="proposalCycles" min="1" max="${
-                cChainParams.current.maxPaymentCycles
-            }" placeholder="${
-            translation.popupProposalDuration
-        }" style=" margin-bottom: 25px; text-align: start;"><br>
-            
-            <p style="margin-bottom: 12px; color: #af9cc6; font-size: 1rem; font-weight: 500;">${
-                cChainParams.current.TICKER
-            } per cycle</p>
-            <input type="number" id="proposalPayment" min="10" max="${
-                cChainParams.current.maxPayment / COIN
-            }" placeholder="${cChainParams.current.TICKER} ${
-            translation.popupProposalPerCycle
-        }" style=" margin-bottom: 25px; text-align: start;">${
-            !fAdvancedMode ? '<br>' : ''
-        }
-            
-            <p style="margin-bottom: 12px; color: #af9cc6; font-size: 1rem; font-weight: 500; ${
-                !fAdvancedMode ? 'display: none' : ''
-            }">Proposal Address</p>
-            <input id="proposalAddress" maxlength="34" placeholder="${
-                translation.popupProposalAddress
-            }" style=" margin-bottom: 25px; text-align: start; ${
-            !fAdvancedMode ? 'display: none' : ''
-        }">
-        </div>`,
-        wideModal: true,
-    });
-
-    // If the user cancelled, then we return
-    if (!fConfirmed) return;
-
-    const strTitle = document.getElementById('proposalTitle').value.trim();
-    const strUrl = document.getElementById('proposalUrl').value.trim();
-    const numCycles = parseInt(
-        document.getElementById('proposalCycles').value.trim()
-    );
-    const numPayment = parseInt(
-        document.getElementById('proposalPayment').value.trim()
-    );
-
-    // If Advanced Mode is enabled and an address is given, use the provided address, otherwise, generate a new one
-    const strAddress =
-        document.getElementById('proposalAddress').value.trim() ||
-        wallet.getNewChangeAddress();
-    const nextSuperblock = await getNetwork().getNextSuperblock();
-    const proposal = {
-        name: strTitle,
-        url: strUrl,
-        nPayments: numCycles,
-        start: nextSuperblock,
-        address: strAddress,
-        monthlyPayment: numPayment * COIN,
-    };
-
-    const isValid = Masternode.isValidProposal(proposal);
-    if (!isValid.ok) {
-        createAlert(
-            'warning',
-            `${ALERTS.PROPOSAL_INVALID_ERROR} ${isValid.err}`,
-            7500
-        );
-        return;
-    }
-
-    const hash = Masternode.createProposalHash(proposal);
-    const { ok, txid } = await createAndSendTransaction({
-        address: hash,
-        amount: cChainParams.current.proposalFee,
-        isProposal: true,
-    });
-    if (ok) {
-        proposal.txid = txid;
-        const database = await Database.getInstance();
-
-        // Fetch our Account, add the proposal to it
-        const account = await database.getAccount();
-        account.localProposals.push(proposal);
-
-        // Update the DB
-        await database.updateAccount(account);
-        createAlert('success', translation.PROPOSAL_CREATED, 10000);
-        updateGovernanceTab();
-    }
-}
-
 export async function refreshChainData() {
     const cNet = getNetwork();
     // Fetch block count
diff --git a/scripts/governance/BudgetAllocated.vue b/scripts/governance/BudgetAllocated.vue
new file mode 100644
index 000000000..15fa858d6
--- /dev/null
+++ b/scripts/governance/BudgetAllocated.vue
@@ -0,0 +1,67 @@
+<script setup>
+import { toRefs } from 'vue';
+import { numberToCurrency } from '../misc.js';
+const props = defineProps({
+    currency: String,
+    price: Number,
+    allocatedBudget: Number,
+});
+const { currency, price, allocatedBudget } = toRefs(props);
+</script>
+
+<template>
+    <span
+        data-i18n="govAllocBudget"
+        style="font-weight: 400; color: #e9deff; font-size: 18px"
+        >Budget Allocated</span
+    >
+
+    <div
+        style="
+            width: 180px;
+            background-color: #3b1170;
+            margin-top: 11px;
+            border-radius: 9px;
+            padding-left: 13px;
+            padding-right: 13px;
+            padding-bottom: 6px;
+            padding-top: 4px;
+        "
+    >
+        <span style="font-size: 19px; color: #e9deff"
+            ><span data-testid="allocatedGovernanceBudget">{{
+                allocatedBudget.toLocaleString('en-gb', ',', '.') + ' '
+            }}</span>
+            <span
+                style="
+                    color: #9131ea;
+                    font-size: 16px;
+                    position: relative;
+                    top: 1px;
+                "
+                >PIV</span
+            ></span
+        >
+        <hr
+            style="
+                border-top-width: 2px;
+                background-color: #201431;
+                margin-top: 5px;
+                margin-bottom: -2px;
+                margin-left: -13px;
+                margin-right: -13px;
+            "
+        />
+        <span style="font-size: 12px; color: #af9cc6"
+            ><span data-testid="allocatedGovernanceBudgetValue">{{
+                numberToCurrency(allocatedBudget, price)
+            }}</span>
+            {{ ' ' }}
+            <span
+                style="color: #7c1dea"
+                data-testid="allocatedGovernanceBudgetCurrency"
+                >{{ currency.toUpperCase() }}
+            </span>
+        </span>
+    </div>
+</template>
diff --git a/scripts/governance/Flipdown.vue b/scripts/governance/Flipdown.vue
new file mode 100644
index 000000000..c6051f589
--- /dev/null
+++ b/scripts/governance/Flipdown.vue
@@ -0,0 +1,34 @@
+<script setup>
+import { watch, toRefs, ref, nextTick } from 'vue';
+import { FlipDown } from '../flipdown.js';
+import { v4 as uuid } from 'uuid';
+const props = defineProps({
+    timeStamp: Number,
+});
+const { timeStamp } = toRefs(props);
+const uniqueId = ref(uuid());
+const flipDown = ref(null);
+const flipDownElement = ref(null);
+watch(
+    timeStamp,
+    () => {
+        if (flipDownElement.value) flipDownElement.value.innerHTML = '';
+        nextTick(() => {
+            flipDown.value = new FlipDown(
+                parseInt(timeStamp.value),
+                uniqueId.value
+            ).start();
+        });
+    },
+    { immediate: true }
+);
+</script>
+
+<template>
+    <div
+        :id="uniqueId"
+        data-testid="flipdown"
+        class="flipdown"
+        ref="flipDownElement"
+    ></div>
+</template>
diff --git a/scripts/governance/Governance.vue b/scripts/governance/Governance.vue
new file mode 100644
index 000000000..345403c8e
--- /dev/null
+++ b/scripts/governance/Governance.vue
@@ -0,0 +1,298 @@
+<script setup>
+import { COIN, cChainParams } from '../chain_params';
+import { watch, ref, computed, onMounted } from 'vue';
+import { ProposalValidator } from './status';
+import { useWallet } from '../composables/use_wallet';
+import Masternode from '../masternode.js';
+import ProposalsTable from './ProposalsTable.vue';
+import Flipdown from './Flipdown.vue';
+import ProposalCreateModal from './ProposalCreateModal.vue';
+import MonthlyBudget from './MonthlyBudget.vue';
+import BudgetAllocated from './BudgetAllocated.vue';
+import { hasEncryptedWallet } from '../wallet';
+import { sanitizeHTML } from '../misc';
+import { ALERTS, tr, translation } from '../i18n';
+import { storeToRefs } from 'pinia';
+import { useSettings } from '../composables/use_settings';
+import { getNetwork } from '../network/network_manager.js';
+import { useMasternode } from '../composables/use_masternode';
+import { useAlerts } from '../composables/use_alerts.js';
+const { createAlert } = useAlerts();
+
+const showCreateProposalModal = ref(false);
+
+const wallet = useWallet();
+const settings = useSettings();
+const { localProposals, masternode } = storeToRefs(useMasternode());
+const { advancedMode } = storeToRefs(settings);
+const { blockCount, currency: strCurrency, price } = storeToRefs(wallet);
+const proposals = ref([]);
+const contestedProposals = ref([]);
+const nextSuperBlock = ref(0);
+const masternodeCount = ref(1);
+const allocatedBudget = computed(() => {
+    const proposalValidator = new ProposalValidator(masternodeCount.value);
+
+    return proposals.value.reduce(
+        (acc, p) =>
+            acc +
+            p.MonthlyPayment * Number(proposalValidator.validate(p).passing),
+        0
+    );
+});
+// This updates the timestamp every block.
+const flipdownTimeStamp = computed(
+    () => Date.now() / 1000 + (nextSuperBlock.value - blockCount.value) * 60
+);
+
+// Each block update check if we have local proposals to update or finalize
+watch(
+    [blockCount, localProposals],
+    async () => {
+        for (const proposal of localProposals.value) {
+            if (!proposal.blockHeight) {
+                let tx;
+                try {
+                    tx = await getNetwork().getTxInfo(proposal.txid);
+                } catch (_) {}
+                if (!tx || !tx.blockHeight) {
+                    // Tx hasn't been confirmed yet, wait for next block
+                    continue;
+                }
+                proposal.blockHeight = tx.blockHeight;
+            }
+            if (
+                blockCount.value - proposal.blockHeight >=
+                cChainParams.current.proposalFeeConfirmRequirement
+            ) {
+                // Proposal fee has the required amounts of confirms, stop watching and try to finalize
+                // TODO: remove propsal
+                finalizeProposal(proposal);
+            }
+        }
+    },
+    { immediate: true }
+);
+
+async function fetchProposals() {
+    const arrProposals = await getNetwork().getProposals({
+        fAllowFinished: false,
+    });
+    if (!arrProposals) return;
+    nextSuperBlock.value = await getNetwork().getNextSuperblock();
+    masternodeCount.value = (await getNetwork().getMasternodeCount())?.total;
+
+    proposals.value = arrProposals.filter(
+        (a) => a.Yeas + a.Nays < 100 || a.Ratio > 0.25
+    );
+    contestedProposals.value = arrProposals.filter(
+        (a) => a.Yeas + a.Nays >= 100 && a.Ratio <= 0.25
+    );
+}
+
+watch(cChainParams, () => fetchProposals());
+onMounted(() => {
+    document
+        .getElementById('governanceTab')
+        .addEventListener('click', fetchProposals);
+    fetchProposals();
+});
+
+async function openCreateProposal() {
+    // Must have a wallet
+    if (!wallet.isImported) {
+        return createAlert('warning', ALERTS.PROPOSAL_IMPORT_FIRST, 4500);
+    }
+    // Wallet must be encrypted
+    if (!(await hasEncryptedWallet())) {
+        return createAlert(
+            'warning',
+            tr(translation.popupProposalEncryptFirst, [
+                { button: translation.secureYourWallet },
+            ]),
+            4500
+        );
+    }
+    // Must have enough funds
+    if (wallet.balance * COIN < cChainParams.current.proposalFee) {
+        return createAlert('warning', ALERTS.PROPOSAL_NOT_ENOUGH_FUNDS, 4500);
+    }
+
+    showCreateProposalModal.value = true;
+}
+
+async function createProposal(name, url, payments, monthlyPayment, address) {
+    address = address || wallet.getNewAddress(1)[0];
+    const start = await getNetwork().getNextSuperblock();
+    const proposal = {
+        name,
+        url,
+        nPayments: payments,
+        start,
+        address,
+        monthlyPayment: monthlyPayment * COIN,
+    };
+    const validation = Masternode.isValidProposal(proposal);
+    if (!validation.ok) {
+        createAlert(
+            'warning',
+            `${ALERTS.PROPOSAL_INVALID_ERROR} ${validation.err}`,
+            7500
+        );
+        return;
+    }
+    const hash = Masternode.createProposalHash(proposal);
+    const txid = await wallet.createAndSendTransaction(
+        getNetwork(),
+        hash,
+        cChainParams.current.proposalFee,
+        {
+            isProposal: true,
+        }
+    );
+    if (txid) {
+        proposal.txid = txid;
+        localProposals.value = [...localProposals.value, proposal];
+
+        createAlert('success', ALERTS.PROPOSAL_CREATED, 10000);
+        showCreateProposalModal.value = false;
+    }
+}
+async function finalizeProposal(proposal) {
+    const { ok, err } = await Masternode.finalizeProposal(proposal);
+    if (ok) {
+        createAlert('success', translation.PROPOSAL_FINALISED);
+    } else {
+        createAlert(
+            'warning',
+            translation.PROPOSAL_FINALISE_FAIL + '<br>' + sanitizeHTML(err)
+        );
+    }
+}
+
+async function vote(proposal, voteCode) {
+    if (masternode.value) {
+        if ((await masternode.value.getStatus()) !== 'ENABLED') {
+            createAlert('warning', ALERTS.MN_NOT_ENABLED, 6000);
+            return;
+        }
+        const result = await masternode.value.vote(proposal.Hash, voteCode);
+        if (result.includes('Voted successfully')) {
+            // Good vote
+            masternode.value.storeVote(proposal.Hash.toString(), voteCode);
+            createAlert('success', ALERTS.VOTE_SUBMITTED, 6000);
+        } else if (result.includes('Error voting :')) {
+            // If you already voted return an alert
+            createAlert('warning', ALERTS.VOTED_ALREADY, 6000);
+        } else if (result.includes('Failure to verify signature.')) {
+            // wrong masternode private key
+            createAlert('warning', ALERTS.VOTE_SIG_BAD, 6000);
+        } else {
+            // this could be everything
+            console.error(result);
+            createAlert('warning', ALERTS.INTERNAL_ERROR, 6000);
+        }
+    } else {
+        createAlert('warning', ALERTS.MN_ACCESS_BEFORE_VOTE, 6000);
+    }
+}
+</script>
+
+<template>
+    <ProposalCreateModal
+        v-show="showCreateProposalModal"
+        :advancedMode="advancedMode"
+        @close="showCreateProposalModal = false"
+        @create="createProposal"
+    />
+    <div>
+        <div class="col-md-12 title-section float-left rm-pd">
+            <span
+                style="
+                    font: 23px 'Montserrat Regular';
+                    text-align: center;
+                    display: block;
+                    font-weight: 300;
+                "
+                >Vote on Governance</span
+            >
+            <h3 data-i18n="navGovernance" class="pivx-bold-title center-text">
+                Proposals
+            </h3>
+            <p data-i18n="govSubtext" class="center-text">
+                From this tab you can check the proposals and, if you have a
+                masternode, be a part of the <b>DAO</b> and vote!
+            </p>
+        </div>
+
+        <div class="row mb-5">
+            <MonthlyBudget :price="price" :currency="strCurrency" />
+            <div class="col-6 col-lg-3 text-center governBudgetCard for-mobile">
+                <BudgetAllocated
+                    :currency="strCurrency"
+                    :price="price"
+                    :allocatedBudget="allocatedBudget"
+                />
+            </div>
+            <div
+                class="col-12 col-lg-6 text-center governPayoutTime for-desktopTime"
+            >
+                <span
+                    data-i18n="govNextPayout"
+                    style="font-weight: 400; color: #e9deff; font-size: 20px"
+                    >Next Treasury Payout</span
+                >
+                <Flipdown :timeStamp="flipdownTimeStamp" />
+            </div>
+            <div
+                class="col-12 col-lg-3 text-center governBudgetCard for-desktop"
+            >
+                <BudgetAllocated
+                    :currency="strCurrency"
+                    :price="price"
+                    :allocatedBudget="allocatedBudget"
+                />
+            </div>
+        </div>
+
+        <div class="pivx-button-small governAdd" @click="openCreateProposal()">
+            <i class="fas fa-plus"></i>
+        </div>
+
+        <div class="dcWallet-activity" style="padding: 16px">
+            <ProposalsTable
+                :proposals="proposals"
+                :localProposals="localProposals"
+                :masternodeCount="masternodeCount"
+                :strCurrency="strCurrency"
+                :price="price"
+                @vote="vote"
+                @finalizeProposal="(proposal) => finalizeProposal(proposal)"
+            />
+        </div>
+
+        <hr />
+        <br />
+        <h3
+            data-i18n="contestedProposalsTitle"
+            style="width: 100%; text-align: center"
+        >
+            Contested Proposals
+        </h3>
+        <p
+            data-i18n="contestedProposalsDesc"
+            style="width: 100%; text-align: center"
+        >
+            These are proposals that received an overwhelming amount of
+            downvotes, making it likely spam or a highly contestable proposal.
+        </p>
+        <br />
+        <ProposalsTable
+            :proposals="contestedProposals"
+            :masternodeCount="masternodeCount"
+            :strCurrency="strCurrency"
+            :price="price"
+            @vote="vote"
+        />
+    </div>
+</template>
diff --git a/scripts/governance/LocalProposalStatus.vue b/scripts/governance/LocalProposalStatus.vue
new file mode 100644
index 000000000..a43f20a1f
--- /dev/null
+++ b/scripts/governance/LocalProposalStatus.vue
@@ -0,0 +1,64 @@
+<script setup>
+import { cChainParams } from '../chain_params';
+import { translation } from '../i18n';
+import { computed, toRefs } from 'vue';
+
+const props = defineProps({
+    proposal: Object,
+    blockCount: Number,
+});
+
+const { proposal, blockCount } = toRefs(props);
+
+const status = computed(() => {
+    if (!proposal.value.blockHeight) {
+        // If we have no blockHeight, proposal fee is still confirming
+        return translation.proposalFinalisationConfirming;
+    }
+    const nConfsLeft =
+        proposal.value.blockHeight +
+        cChainParams.current.proposalFeeConfirmRequirement -
+        blockCount.value;
+    if (nConfsLeft > 0) {
+        return (
+            nConfsLeft +
+            ' block' +
+            (nConfsLeft === 1 ? '' : 's') +
+            ' ' +
+            translation.proposalFinalisationRemaining
+        );
+    } else if (Math.abs(nConfsLeft) >= cChainParams.current.budgetCycleBlocks) {
+        return translation.proposalFinalisationExpired;
+    } else {
+        return translation.proposalFinalisationReady;
+    }
+});
+const emit = defineEmits(['finalizeProposal']);
+</script>
+<template>
+    <span
+        style="
+            font-size: 12px;
+            line-height: 15px;
+            display: block;
+            margin-bottom: 15px;
+        "
+    >
+        <span
+            style="color: #fff; font-weight: 700"
+            data-testid="localProposalStatus"
+            >{{ status }}</span
+        ><br />
+    </span>
+    <span class="governArrow for-mobile ptr">
+        <i class="fa-solid fa-angle-down"></i>
+    </span>
+    <button
+        v-if="status === translation.proposalFinalisationReady"
+        data-testid="finalizeProposalButton"
+        class="pivx-button-small"
+        @click="emit('finalizeProposal')"
+    >
+        <i class="fas fa-check"></i>
+    </button>
+</template>
diff --git a/scripts/governance/MobileProposalPayment.vue b/scripts/governance/MobileProposalPayment.vue
new file mode 100644
index 000000000..4a1c741db
--- /dev/null
+++ b/scripts/governance/MobileProposalPayment.vue
@@ -0,0 +1,60 @@
+<script setup>
+import { translation } from '../i18n.js';
+import { toRefs, computed } from 'vue';
+import { cChainParams } from '../chain_params';
+import { optimiseCurrencyLocale } from '../global';
+
+const props = defineProps({
+    proposal: Object,
+    price: Number,
+    strCurrency: String,
+});
+const { proposal, price, strCurrency } = toRefs(props);
+const nProposalValue = computed(
+    () =>
+        optimiseCurrencyLocale(proposal.value.MonthlyPayment * price.value)
+            .nValue
+);
+</script>
+
+<template>
+    <div class="row pt-2">
+        <div class="col-5 fs-13 fw-600">
+            {{ translation.govTablePayment }}
+        </div>
+        <div class="col-7">
+            <span class="governValues"
+                ><b data-testid="proposalMonthlyPayment">{{
+                    proposal.MonthlyPayment.toLocaleString('en-gb', ',', '.')
+                }}</b>
+                <span class="governMarked">PIV</span>
+                <span
+                    style="margin-left: 10px; margin-right: 2px"
+                    class="governMarked governFiatSize"
+                    data-testid="proposalFiat"
+                    >{{ nProposalValue.toLocaleString('en-gb') }}
+                    <span style="color: #7c1dea">{{
+                        strCurrency.toUpperCase()
+                    }}</span>
+                </span>
+            </span>
+
+            <span class="governInstallments" data-testid="governInstallments">
+                {{ proposal.RemainingPaymentCount }} {{ ' ' }}
+                <span v-html="translation.proposalPaymentsRemaining"></span>
+                <span style="font-weight: 500"
+                    >{{
+                        parseInt(proposal.TotalPayment).toLocaleString(
+                            'en-gb',
+                            ',',
+                            '.'
+                        )
+                    }}
+
+                    {{ cChainParams.current.TICKER }}</span
+                >
+                {{ translation.proposalPaymentTotal }}</span
+            >
+        </div>
+    </div>
+</template>
diff --git a/scripts/governance/MobileProposalRow.vue b/scripts/governance/MobileProposalRow.vue
new file mode 100644
index 000000000..f3945b963
--- /dev/null
+++ b/scripts/governance/MobileProposalRow.vue
@@ -0,0 +1,34 @@
+<script setup>
+import { toRefs } from 'vue';
+import MobileProposalPayment from './MobileProposalPayment.vue';
+import MobileProposalVotes from './MobileProposalVotes.vue';
+import MobileProposalVote from './MobileProposalVote.vue';
+const props = defineProps({
+    proposal: Object,
+    price: Number,
+    strCurrency: String,
+});
+const { proposal, price, strCurrency } = toRefs(props);
+const emit = defineEmits(['vote']);
+</script>
+
+<template>
+    <tr class="for-mobile">
+        <td
+            style="vertical-align: middle"
+            id="governMob0"
+            colspan="2"
+            class="text-left for-mobile"
+        >
+            <MobileProposalPayment
+                :proposal="proposal"
+                :price="price"
+                :strCurrency="strCurrency"
+            />
+            <hr class="governHr" />
+            <MobileProposalVotes :proposal="proposal" />
+            <hr class="governHr" />
+            <MobileProposalVote @vote="(...args) => emit('vote', ...args)" />
+        </td>
+    </tr>
+</template>
diff --git a/scripts/governance/MobileProposalVote.vue b/scripts/governance/MobileProposalVote.vue
new file mode 100644
index 000000000..236b21e7d
--- /dev/null
+++ b/scripts/governance/MobileProposalVote.vue
@@ -0,0 +1,28 @@
+<script setup>
+import { translation } from '../i18n.js';
+const emit = defineEmits(['vote']);
+</script>
+
+<template>
+    <div class="row pb-2">
+        <div class="col-5 fs-13 fw-600">
+            {{ translation.govTableVote }}
+        </div>
+        <div class="col-7 mobileVote">
+            <div
+                class="pivx-button-outline pivx-button-outline-small govNoBtnMob"
+                style="width: fit-content"
+                @click="emit('vote', false)"
+            >
+                <span>No</span>
+            </div>
+            <button
+                style="height: 36px"
+                class="pivx-button-small govYesBtnMob mobileVote"
+                @click="emit('vote', true)"
+            >
+                Yes
+            </button>
+        </div>
+    </div>
+</template>
diff --git a/scripts/governance/MobileProposalVotes.vue b/scripts/governance/MobileProposalVotes.vue
new file mode 100644
index 000000000..9a878c8f9
--- /dev/null
+++ b/scripts/governance/MobileProposalVotes.vue
@@ -0,0 +1,39 @@
+<script setup>
+import { toRef, computed } from 'vue';
+import { translation } from '../i18n';
+const props = defineProps({
+    proposal: Object,
+});
+const proposal = toRef(props, 'proposal');
+const votePercentage = computed(() =>
+    parseFloat(proposal.value.Ratio * 100).toLocaleString(
+        'en-gb',
+        { minimumFractionDigits: 0, maximumFractionDigits: 1 },
+        ',',
+        '.'
+    )
+);
+</script>
+<template>
+    <div class="row">
+        <div class="col-5 fs-13 fw-600">
+            {{ translation.govTableVotes }}
+        </div>
+        <div class="col-7" data-testid="proposalVotes">
+            <b>{{ votePercentage }}%</b>
+            <small class="votesBg">
+                <b>
+                    <div class="votesYes" style="display: inline">
+                        {{ proposal.Yeas }}
+                    </div>
+                </b>
+                /
+                <b>
+                    <div class="votesNo" style="display: inline">
+                        {{ proposal.Nays }}
+                    </div>
+                </b></small
+            >
+        </div>
+    </div>
+</template>
diff --git a/scripts/governance/MonthlyBudget.vue b/scripts/governance/MonthlyBudget.vue
new file mode 100644
index 000000000..5a13a0a47
--- /dev/null
+++ b/scripts/governance/MonthlyBudget.vue
@@ -0,0 +1,79 @@
+<script setup>
+import { toRefs } from 'vue';
+import { cChainParams, COIN } from '../chain_params';
+import { numberToCurrency } from '../misc.js';
+const props = defineProps({
+    currency: String,
+    price: Number,
+});
+const { currency, price } = toRefs(props);
+</script>
+
+<template>
+    <div class="col-6 col-lg-3 text-center governBudgetCard">
+        <span
+            data-i18n="govMonthlyBudget"
+            style="font-weight: 400; color: #e9deff; font-size: 18px"
+            >Monthly Budget</span
+        >
+
+        <div
+            style="
+                width: 180px;
+                background-color: #3b1170;
+                margin-top: 11px;
+                border-radius: 9px;
+                padding-left: 13px;
+                padding-right: 13px;
+                padding-bottom: 6px;
+                padding-top: 4px;
+            "
+        >
+            <span style="font-size: 19px; color: #e9deff"
+                ><span>
+                    {{
+                        (cChainParams.current.maxPayment / COIN).toLocaleString(
+                            'en-gb',
+                            ',',
+                            '.'
+                        )
+                    }}
+                    {{ ' ' }}
+                </span>
+                <span
+                    style="
+                        color: #9131ea;
+                        font-size: 16px;
+                        position: relative;
+                        top: 1px;
+                    "
+                    >{{ cChainParams.current.TICKER }}</span
+                ></span
+            >
+            <hr
+                style="
+                    border-top-width: 2px;
+                    background-color: #201431;
+                    margin-top: 5px;
+                    margin-bottom: -2px;
+                    margin-left: -13px;
+                    margin-right: -13px;
+                "
+            />
+            <span style="font-size: 12px; color: #af9cc6"
+                ><span data-testid="monthlyBudgetValue">
+                    {{
+                        numberToCurrency(
+                            cChainParams.current.maxPayment / COIN,
+                            price
+                        )
+                    }}
+                    {{ ' ' }}
+                </span>
+                <span style="color: #7c1dea" data-testid="monthlyBudgetCurrency"
+                    >{{ currency.toUpperCase() }}
+                </span>
+            </span>
+        </div>
+    </div>
+</template>
diff --git a/scripts/governance/ProposalCreateModal.vue b/scripts/governance/ProposalCreateModal.vue
new file mode 100644
index 000000000..3b7a5fa17
--- /dev/null
+++ b/scripts/governance/ProposalCreateModal.vue
@@ -0,0 +1,172 @@
+<script setup>
+import Modal from '../Modal.vue';
+import { translation } from '../i18n.js';
+import { COIN, cChainParams } from '../chain_params';
+import { toRefs, ref, watch } from 'vue';
+
+const props = defineProps({
+    advancedMode: Boolean,
+});
+const name = ref('');
+const url = ref('');
+const payments = ref(0);
+const monthlyPayment = ref('');
+const address = ref('');
+const { advancedMode } = toRefs(props);
+const emit = defineEmits(['close', 'create']);
+function submit() {
+    emit(
+        'create',
+        name.value,
+        url.value,
+        payments.value,
+        monthlyPayment.value,
+        address.value
+    );
+}
+watch(advancedMode, () => (address.value = ''));
+</script>
+
+<template>
+    <Modal :show="true">
+        <template #header>
+            <h4>{{ translation.popupCreateProposal }}</h4>
+            <span
+                style="
+                    color: #af9cc6;
+                    font-size: 1rem;
+                    margin-bottom: 23px;
+                    display: block;
+                "
+                >{{ translation.popupCreateProposalCost }}
+                <b
+                    >{{ cChainParams.current.proposalFee / COIN }}
+                    {{ cChainParams.current.TICKER }}</b
+                ></span
+            >
+        </template>
+        <template #body>
+            <div style="padding-left: 10px; padding-right: 10px">
+                <p
+                    style="
+                        margin-bottom: 12px;
+                        color: #af9cc6;
+                        font-size: 1rem;
+                        font-weight: 500;
+                    "
+                >
+                    Proposal name
+                </p>
+                <input
+                    data-testid="proposalTitle"
+                    maxlength="20"
+                    :placeholder="translation.popupProposalName"
+                    style="text-align: start; margin-bottom: 25px"
+                    v-model="name"
+                /><br />
+
+                <p
+                    style="
+                        margin-bottom: 12px;
+                        color: #af9cc6;
+                        font-size: 1rem;
+                        font-weight: 500;
+                    "
+                >
+                    URL
+                </p>
+                <input
+                    data-testid="proposalUrl"
+                    maxlength="64"
+                    placeholder="https://forum.pivx.org/..."
+                    style="margin-bottom: 25px; text-align: start"
+                    v-model="url"
+                /><br />
+
+                <p
+                    style="
+                        margin-bottom: 12px;
+                        color: #af9cc6;
+                        font-size: 1rem;
+                        font-weight: 500;
+                    "
+                >
+                    Duration in cycles
+                </p>
+                <input
+                    type="number"
+                    data-testid="proposalCycles"
+                    min="1"
+                    :max="cChainParams.current.maxPaymentCycles"
+                    :placeholder="translation.popupProposalDuration"
+                    style="margin-bottom: 25px; text-align: start"
+                    v-model="payments"
+                /><br />
+
+                <p
+                    style="
+                        margin-bottom: 12px;
+                        color: #af9cc6;
+                        font-size: 1rem;
+                        font-weight: 500;
+                    "
+                >
+                    {{ cChainParams.current.TICKER }} per cycle
+                </p>
+                <input
+                    type="number"
+                    data-testid="proposalPayment"
+                    min="10"
+                    :max="cChainParams.current.maxPayment / COIN"
+                    :placeholder="
+                        cChainParams.current.TICKER +
+                        ' ' +
+                        translation.popupProposalPerCycle
+                    "
+                    style="margin-bottom: 25px; text-align: start"
+                    v-model="monthlyPayment"
+                />
+                <br v-if="!advancedMode" />
+                <span v-if="advancedMode">
+                    <p
+                        style="
+                            margin-bottom: 12px;
+                            color: #af9cc6;
+                            font-size: 1rem;
+                            font-weight: 500;
+                        "
+                    >
+                        Proposal Address
+                    </p>
+                    <input
+                        data-testid="proposalAddress"
+                        maxlength="34"
+                        :placeholder="translation.popupProposalAddress"
+                        style="margin-bottom: 25px; text-align: start"
+                        v-model="address"
+                    />
+                </span>
+            </div>
+        </template>
+        <template #footer>
+            <button
+                type="button"
+                class="pivx-button-big-cancel"
+                style="float: left"
+                data-testid="proposalCancel"
+                @click="emit('close')"
+            >
+                {{ translation.popupCancel }}
+            </button>
+            <button
+                type="button"
+                class="pivx-button-big"
+                style="float: right"
+                data-testid="proposalSubmit"
+                @click="submit()"
+            >
+                {{ translation.popupConfirm }}
+            </button>
+        </template>
+    </Modal>
+</template>
diff --git a/scripts/governance/ProposalName.vue b/scripts/governance/ProposalName.vue
new file mode 100644
index 000000000..580627fd5
--- /dev/null
+++ b/scripts/governance/ProposalName.vue
@@ -0,0 +1,44 @@
+<script setup>
+import { toRef } from 'vue';
+import { useNetwork } from '../composables/use_network.js';
+import { getBlockbookUrl } from '../utils.js';
+const props = defineProps({
+    proposal: Object,
+});
+const proposal = toRef(props, 'proposal');
+const network = useNetwork();
+</script>
+<template>
+    <div style="vertical-align: middle">
+        <a
+            class="governLink"
+            style="color: white"
+            :href="proposal.URL"
+            target="_blank"
+            rel="noopener noreferrer"
+            ><b data-testid="proposalName"
+                >{{ proposal.Name }}
+                <span class="governLinkIco"
+                    ><i
+                        class="fa-solid fa-arrow-up-right-from-square"
+                    ></i></span></b></a
+        ><br />
+        <a
+            class="governLink"
+            :href="
+                getBlockbookUrl(network.explorerUrl, proposal.PaymentAddress)
+            "
+            target="_blank"
+            style="
+                border-radius: 8px;
+                background-color: #1a122d;
+                padding: 6px 9px;
+                font-size: 14px;
+                color: #861ff7;
+            "
+            data-testid="proposalLink"
+            ><i class="fa-solid fa-user-large" style="margin-right: 5px"></i
+            ><b>{{ proposal.PaymentAddress.slice(0, 10) }}...</b>
+        </a>
+    </div>
+</template>
diff --git a/scripts/governance/ProposalPayment.vue b/scripts/governance/ProposalPayment.vue
new file mode 100644
index 000000000..4a004e80d
--- /dev/null
+++ b/scripts/governance/ProposalPayment.vue
@@ -0,0 +1,54 @@
+<script setup>
+import { cChainParams } from '../chain_params';
+import { translation } from '../i18n';
+import { toRef, computed } from 'vue';
+import { optimiseCurrencyLocale } from '../global.js';
+
+const props = defineProps({
+    proposal: Object,
+    price: Number,
+    strCurrency: String,
+});
+const strCurrency = toRef(props, 'strCurrency');
+const price = toRef(props, 'price');
+const proposal = toRef(props, 'proposal');
+const nMonthlyPayment = computed(() => parseInt(proposal.value.MonthlyPayment));
+const nProposalValue = computed(
+    () => optimiseCurrencyLocale(nMonthlyPayment.value * price.value).nValue
+);
+</script>
+<template>
+    <div class="for-desktop">
+        <span class="governValues"
+            ><b data-testid="proposalMonthlyPayment">{{
+                nMonthlyPayment.toLocaleString('en-gb', ',', '.')
+            }}</b>
+            <span class="governMarked">{{ cChainParams.current.TICKER }}</span>
+            <br />
+            <b class="governFiatSize" data-testid="proposalFiat"
+                >{{ nProposalValue.toLocaleString('en-gb') }}
+                <span style="color: #7c1dea">{{
+                    strCurrency.toUpperCase()
+                }}</span></b
+            ></span
+        >
+
+        <span class="governInstallments" data-testid="governInstallments">
+            {{ proposal.RemainingPaymentCount }} {{ ' ' }}
+            <span v-html="translation.proposalPaymentsRemaining"></span>
+            {{ ' ' }}
+            <span style="font-weight: 500"
+                >{{
+                    parseInt(proposal.TotalPayment).toLocaleString(
+                        'en-gb',
+                        ',',
+                        '.'
+                    )
+                }}
+
+                {{ cChainParams.current.TICKER }}</span
+            >
+            {{ translation.proposalPaymentTotal }}</span
+        >
+    </div>
+</template>
diff --git a/scripts/governance/ProposalRow.vue b/scripts/governance/ProposalRow.vue
new file mode 100644
index 000000000..cb4e5d5a1
--- /dev/null
+++ b/scripts/governance/ProposalRow.vue
@@ -0,0 +1,124 @@
+<script setup>
+import ProposalStatus from './ProposalStatus.vue';
+import LocalProposalStatus from './LocalProposalStatus.vue';
+import ProposalName from './ProposalName.vue';
+import ProposalPayment from './ProposalPayment.vue';
+import ProposalVotes from './ProposalVotes.vue';
+import Modal from '../Modal.vue';
+import { translation } from '../i18n.js';
+import { toRefs, ref } from 'vue';
+import { ProposalValidator } from './status';
+const props = defineProps({
+    proposal: Object,
+    masternodeCount: Number,
+    strCurrency: String,
+    price: Number,
+    localProposal: {
+        default: false,
+        type: Boolean,
+    },
+    proposalValidator: ProposalValidator,
+    blockCount: Number,
+});
+const {
+    proposal,
+    masternodeCount,
+    strCurrency,
+    price,
+    proposalValidator,
+    blockCount,
+} = toRefs(props);
+const emit = defineEmits(['click', 'finalizeProposal', 'vote']);
+const showConfirmVoteModal = ref(false);
+const selectedVoteCode = ref(0);
+function vote(voteCode) {
+    selectedVoteCode.value = voteCode;
+    showConfirmVoteModal.value = true;
+}
+</script>
+
+<template>
+    <tr>
+        <td class="governStatusCol" @click="emit('click')">
+            <ProposalStatus
+                v-if="!localProposal"
+                :proposal="proposal"
+                :proposalValidator="proposalValidator"
+                :nMasternodes="masternodeCount"
+            />
+            <LocalProposalStatus
+                v-else
+                :proposal="proposal"
+                :blockCount="blockCount"
+                @finalizeProposal="emit('finalizeProposal')"
+            />
+        </td>
+        <td style="vertical-align: middle">
+            <ProposalName :proposal="proposal" />
+        </td>
+        <td style="vertical-align: middle" class="for-desktop">
+            <ProposalPayment
+                :proposal="proposal"
+                :price="price"
+                :strCurrency="strCurrency"
+            />
+        </td>
+        <td style="vertical-align: middle" class="for-desktop">
+            <ProposalVotes :proposal="proposal" />
+        </td>
+        <template v-if="!localProposal">
+            <td style="vertical-align: middle" class="for-desktop">
+                <div class="proposalVoteButtons">
+                    <button
+                        class="pivx-button-outline pivx-button-outline-small govNoBtnMob"
+                        style="width: fit-content"
+                        @click="vote(2)"
+                    >
+                        <span> {{ translation.no }} </span>
+                    </button>
+                    <button
+                        class="pivx-button-small govYesBtnMob"
+                        style="width: fit-content; height: 36px"
+                        @click="vote(1)"
+                    >
+                        <span style="vertical-align: middle">
+                            {{ translation.yes }}
+                        </span>
+                    </button>
+                </div>
+            </td>
+        </template>
+    </tr>
+    <Teleport to="body">
+        <Modal :show="showConfirmVoteModal">
+            <template #header>
+                <span> {{ translation.ALERTS.CONFIRM_POPUP_VOTE }} </span>
+            </template>
+            <template #body>
+                <span
+                    v-html="translation.ALERTS.CONFIRM_POPUP_VOTE_HTML"
+                ></span>
+            </template>
+            <template #footer>
+                <button
+                    @click="showConfirmVoteModal = false"
+                    class="pivx-button-small-cancel"
+                    style="height: 42px; width: 228px"
+                >
+                    {{ translation.popupCancel }}
+                </button>
+                <button
+                    @click="
+                        emit('vote', selectedVoteCode);
+                        showConfirmVoteModal = false;
+                    "
+                    data-testid="confirmVote"
+                    class="pivx-button-small"
+                    style="height: 42px; width: 228px"
+                >
+                    {{ translation.popupConfirm }}
+                </button>
+            </template>
+        </Modal>
+    </Teleport>
+</template>
diff --git a/scripts/governance/ProposalStatus.vue b/scripts/governance/ProposalStatus.vue
new file mode 100644
index 000000000..d40200cda
--- /dev/null
+++ b/scripts/governance/ProposalStatus.vue
@@ -0,0 +1,93 @@
+<script setup>
+import { translation } from '../i18n';
+import { computed, toRefs } from 'vue';
+import { ProposalValidator, reasons } from './status';
+const props = defineProps({
+    proposal: Object,
+    nMasternodes: Number,
+    proposalValidator: ProposalValidator,
+});
+const { proposal, nMasternodes, proposalValidator } = toRefs(props);
+const proposalStatus = computed(() => {
+    const { Yeas, Nays } = proposal.value;
+    const netYes = Yeas - Nays;
+
+    let statusClass = '';
+    let funding = '';
+    const { passing, reason } = proposalValidator.value.validate(
+        proposal.value
+    );
+    const status = passing
+        ? translation.proposalPassing
+        : translation.proposalFailing;
+
+    if (passing) {
+        funding = translation.proposalFunded;
+        statusClass = 'votesYes';
+    } else {
+        switch (reason) {
+            case reasons.NOT_FUNDED: {
+                funding = translation.proposalNotFunded;
+                statusClass = 'votesNo';
+                break;
+            }
+            case reasons.OVER_BUDGET: {
+                funding = translation.proposalOverBudget;
+                statusClass = 'votesOverAllocated';
+                break;
+            }
+            case reasons.TOO_YOUNG: {
+                funding = translation.proposalTooYoung;
+                statusClass = 'votesNo';
+                break;
+            }
+        }
+    }
+
+    return {
+        status,
+        statusClass,
+        funding,
+        netYesPercent: (netYes / nMasternodes.value) * 100,
+    };
+});
+</script>
+
+<template>
+    <span
+        style="
+            text-transform: uppercase;
+            font-size: 12px;
+            line-height: 15px;
+            display: block;
+            margin-bottom: 15px;
+        "
+    >
+        <span
+            style="font-weight: 700"
+            data-testid="proposalStatus"
+            :class="proposalStatus.statusClass"
+            >{{ proposalStatus.status }}</span
+        ><br />
+        <span style="color: #9482b1" data-testid="proposalFunding"
+            >({{ proposalStatus.funding }})</span
+        ><br />
+    </span>
+    <span
+        style="
+            font-size: 12px;
+            line-height: 15px;
+            display: block;
+            color: #9482b1;
+        "
+        data-testid="proposalPercentage"
+    >
+        <b style="color: #e9deff"
+            >{{ proposalStatus.netYesPercent.toFixed(1) }}%</b
+        ><br />
+        {{ translation.proposalNetYes }}
+    </span>
+    <span class="governArrow for-mobile ptr">
+        <i class="fa-solid fa-angle-down"></i>
+    </span>
+</template>
diff --git a/scripts/governance/ProposalVotes.vue b/scripts/governance/ProposalVotes.vue
new file mode 100644
index 000000000..c1311b1ae
--- /dev/null
+++ b/scripts/governance/ProposalVotes.vue
@@ -0,0 +1,34 @@
+<script setup>
+import { toRef, computed } from 'vue';
+const props = defineProps({
+    proposal: Object,
+});
+const proposal = toRef(props, 'proposal');
+const votePercentage = computed(() =>
+    parseFloat(proposal.value.Ratio * 100).toLocaleString(
+        'en-gb',
+        { minimumFractionDigits: 0, maximumFractionDigits: 1 },
+        ',',
+        '.'
+    )
+);
+</script>
+
+<template>
+    <div class="for-desktop" data-testid="proposalVotes">
+        <b>{{ votePercentage }}%</b> <br />
+        <small class="votesBg">
+            <b
+                ><div class="votesYes" style="display: inline">
+                    {{ proposal.Yeas }}
+                </div></b
+            >
+            /
+            <b
+                ><div class="votesNo" style="display: inline">
+                    {{ proposal.Nays }}
+                </div></b
+            ></small
+        >
+    </div>
+</template>
diff --git a/scripts/governance/ProposalsTable.vue b/scripts/governance/ProposalsTable.vue
new file mode 100644
index 000000000..b88c0db84
--- /dev/null
+++ b/scripts/governance/ProposalsTable.vue
@@ -0,0 +1,138 @@
+<script setup>
+import MobileProposalRow from './MobileProposalRow.vue';
+import ProposalRow from './ProposalRow.vue';
+import { toRefs, computed, ref } from 'vue';
+
+import { ProposalValidator } from './status';
+import { COIN } from '../chain_params';
+import { useWallet } from '../composables/use_wallet';
+const props = defineProps({
+    proposals: Array,
+    localProposals: {
+        type: Array,
+        default: [],
+    },
+    masternodeCount: Number,
+    strCurrency: String,
+    price: Number,
+});
+const { proposals, localProposals, masternodeCount, strCurrency, price } =
+    toRefs(props);
+// this is a method rather than a computed property so it updates each re-render
+const getProposalValidator = () => new ProposalValidator(masternodeCount.value);
+const wallet = useWallet();
+
+const emit = defineEmits(['finalizeProposal', 'vote']);
+
+/**
+ * @param{localProposal} Local proposal to convert
+ * @returns Returns the proposal in the format the RPC node sends us
+ */
+function localProposalToRPC(localProposal) {
+    return {
+        Name: localProposal.name,
+        URL: localProposal.url,
+        BlockStart: localProposal.start,
+        // Remaining count is equal to total payments since it hasn't been finalized yet
+        RemainingPaymentCount: localProposal.nPayments,
+        TotalPaymentCount: localProposal.nPayments,
+        PaymentAddress: localProposal.address,
+        Ratio: 0,
+        Yeas: 0,
+        Nays: 0,
+        TotalPayment:
+            (localProposal.monthlyPayment * localProposal.nPayments) / COIN,
+        MonthlyPayment: localProposal.monthlyPayment / COIN,
+        IsEstablished: false,
+        IsValid: true,
+        blockHeight: localProposal.blockHeight,
+    };
+}
+/**
+ * @type{import('vue').Ref<number?>} Index of the row opened on mobile mode. Null if nothing is open
+ */
+const opened = ref(null);
+
+function openOrCloseRow(i) {
+    opened.value = opened.value === i ? null : i;
+}
+</script>
+<template>
+    <table
+        id="proposalsTable"
+        class="table table-hover table-dark bg-transparent governTable"
+        style="width: 100%; margin-bottom: 0px"
+    >
+        <thead>
+            <tr>
+                <td class="text-center btlr-7p">
+                    <b data-i18n="govTableStatus"> Status </b>
+                </td>
+                <td class="text-center">
+                    <b data-i18n="govTableName"> Name </b>
+                </td>
+                <td class="text-center for-desktop">
+                    <b data-i18n="govTablePayment"> Payment </b>
+                </td>
+                <td class="text-center for-desktop">
+                    <b data-i18n="govTableVotes"> Votes </b>
+                </td>
+                <td class="text-center for-desktop btrr-7p">
+                    <b data-i18n="govTableVote"> Vote </b>
+                </td>
+            </tr>
+        </thead>
+        <tbody
+            id="proposalsTableBody"
+            style="text-align: center; vertical-align: middle"
+        >
+            <template v-for="(proposal, i) of localProposals">
+                <ProposalRow
+                    :proposal="localProposalToRPC(proposal)"
+                    :masternodeCount="masternodeCount"
+                    :strCurrency="strCurrency"
+                    :price="price"
+                    :localProposal="true"
+                    :proposalValidator="getProposalValidator()"
+                    :blockCount="wallet.blockCount"
+                    @click="openOrCloseRow(i)"
+                    @finalizeProposal="emit('finalizeProposal', proposal)"
+                />
+                <MobileProposalRow
+                    v-if="opened == i"
+                    :proposal="localProposalToRPC(proposal)"
+                    :price="price"
+                    :localProposal="true"
+                    :strCurrency="strCurrency"
+                    @finalizeProposal="emit('finalizeProposal', proposal)"
+                />
+            </template>
+            <template v-for="(proposal, i) of proposals">
+                <ProposalRow
+                    :proposal="proposal"
+                    :masternodeCount="masternodeCount"
+                    :strCurrency="strCurrency"
+                    :price="price"
+                    :proposalValidator="getProposalValidator()"
+                    @click="openOrCloseRow(i)"
+                    @vote="(code) => emit('vote', proposal, code)"
+                />
+                <MobileProposalRow
+                    v-if="opened == i"
+                    :proposal="proposal"
+                    :price="price"
+                    :strCurrency="strCurrency"
+                    @vote="(code) => emit('vote', proposal, code)"
+                />
+            </template>
+        </tbody>
+    </table>
+</template>
+<style>
+.proposalVoteButtons {
+    vertical-align: middle;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+</style>
diff --git a/scripts/governance/status.js b/scripts/governance/status.js
new file mode 100644
index 000000000..32cd03b42
--- /dev/null
+++ b/scripts/governance/status.js
@@ -0,0 +1,48 @@
+import { cChainParams, COIN } from '../chain_params.js';
+
+/**
+ * @enum {number}
+ */
+export const reasons = {
+    NOT_FUNDED: 0,
+    TOO_YOUNG: 1,
+    OVER_BUDGET: 2,
+};
+
+export class ProposalValidator {
+    /**
+     * @type{number} Number of ENABLED masternodes
+     */
+    #nMasternodes;
+
+    #allocatedBudget = 0;
+
+    constructor(nMasternodes) {
+        this.#nMasternodes = nMasternodes;
+    }
+
+    /**
+     * Must be called in order of proposal for correct overbudget calculation
+     * @returns {{passing: boolean, reason?: reasons}}
+     */
+    validate(proposal) {
+        const { Yeas, Nays } = proposal;
+        const netYes = Yeas - Nays;
+
+        const requiredVotes = this.#nMasternodes / 10;
+        if (netYes < requiredVotes) {
+            return { passing: false, reason: reasons.NOT_FUNDED };
+        } else if (!proposal.IsEstablished) {
+            return { passing: false, reason: reasons.TOO_YOUNG };
+        } else if (
+            this.#allocatedBudget + proposal.MonthlyPayment >
+            cChainParams.current.maxPayment / COIN
+        ) {
+            return { passing: false, reason: reasons.OVER_BUDGET };
+        } else {
+            // Proposal is passing, add monthly payment to allocated budget
+            this.#allocatedBudget += proposal.MonthlyPayment;
+            return { passing: true };
+        }
+    }
+}
diff --git a/scripts/index.js b/scripts/index.js
index a3cec5857..1076d6b3c 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -18,14 +18,8 @@ export {
     toClipboard,
     restoreWallet,
     playMusic,
-    openExplorer,
     doms,
-    importMasternode,
-    destroyMasternode,
-    startMasternode,
-    createProposal,
     switchSettings,
-    govVote,
 } from './global.js';
 export { wallet, getNewAddress } from './wallet.js';
 export {
@@ -37,7 +31,6 @@ export {
     toggleAutoLockWallet,
     changePassword,
 } from './settings.js';
-export { createMasternode } from './legacy.js';
 export {
     promoConfirm,
     setPromoMode,
diff --git a/scripts/masternode.js b/scripts/masternode.js
index 90b8f737b..1e1d5593e 100644
--- a/scripts/masternode.js
+++ b/scripts/masternode.js
@@ -41,9 +41,7 @@ export default class Masternode {
     static sessionVotes = [];
 
     async _getWalletPrivateKey() {
-        return await wallet
-            .getMasterKey()
-            .getPrivateKey(this.walletPrivateKeyPath);
+        return wallet.getMasterKey().getPrivateKey(this.walletPrivateKeyPath);
     }
 
     /**
@@ -328,7 +326,7 @@ export default class Masternode {
      */
     async start() {
         const message = await this.broadcastMessageToHex();
-        return (await getNetwork().start(message)).includes(
+        return (await getNetwork().startMasternode(message)).includes(
             'Masternode broadcast sent'
         );
     }
@@ -524,7 +522,7 @@ export default class Masternode {
      * @param {Number} options.start - Superblock of when the proposal is going to start
      * @param {String} options.address - Base58 encoded PIVX address
      * @param {Number} options.monthlyPayment - Payment amount per cycle in satoshi
-     * @returns {boolean} If the proposal is valid
+     * @returns {{ok:boolean, err: string}} If the proposal is valid
      */
     static isValidProposal({
         name,
diff --git a/scripts/masternode/CreateMasternode.vue b/scripts/masternode/CreateMasternode.vue
new file mode 100644
index 000000000..6d8d551c3
--- /dev/null
+++ b/scripts/masternode/CreateMasternode.vue
@@ -0,0 +1,216 @@
+<script setup>
+import { toRefs, computed, ref } from 'vue';
+import { tr, translation } from '../i18n.js';
+import { COIN, cChainParams } from '../chain_params';
+import IconArrow from '../../assets/icons/icon-arrow.svg';
+const props = defineProps({
+    synced: Boolean,
+    balance: Number,
+    possibleUTXOs: Array,
+});
+import PlusIcon from '../../assets/icons/icon-plus.svg';
+import Modal from '../Modal.vue';
+
+const { synced, balance, possibleUTXOs } = toRefs(props);
+const showModal = ref(false);
+const privateKey = ref('');
+const ip = ref('');
+const utxo = ref('');
+
+const error = computed(() => {
+    if (!synced.value) {
+        return translation?.ALERTS?.MN_UNLOCK_WALLET;
+    }
+    const collat = cChainParams.current.collateralInSats / COIN;
+    if (balance.value < collat) {
+        return tr(translation?.ALERTS?.MN_NOT_ENOUGH_COLLAT, [
+            { amount: (collat - balance.value).toFixed(2) },
+            { ticker: cChainParams.current.TICKER },
+        ]);
+    }
+    return '';
+});
+
+const emit = defineEmits(['createMasternode', 'importMasternode']);
+const selection = ref();
+function createMasternode() {
+    emit('createMasternode', { isVPS: selection.value === 'VPS' });
+}
+
+function importMasternode() {
+    emit('importMasternode', privateKey.value, ip.value, utxo.value);
+}
+</script>
+
+<template>
+    <div
+        class="col-md-12 title-section float-left rm-pd center-text"
+        style="padding-bottom: 0px"
+    >
+        <h3 style="margin-bottom: -2px">
+            <span data-i18n="mnControlYour" style="font-weight: 300"
+                >Control your</span
+            >
+        </h3>
+        <h3 data-i18n="navMasternode" class="pivx-bold-title">Masternode</h3>
+        <p data-i18n="mnSubtext" style="color: #beaed0">
+            From this tab you can create and access one or more masternodes
+        </p>
+    </div>
+
+    <div style="display: block">
+        <br />
+        <p class="center-text" data-testid="error" v-html="error"></p>
+    </div>
+    <div
+        style="display: flex; justify-content: center; width: 100%"
+        v-if="!error && !possibleUTXOs.length"
+    >
+        <button
+            class="pivx-button-small"
+            style="height: 42px; width: 228px"
+            data-testid="createMasternodeButton"
+            @click="showModal = true"
+        >
+            <span class="buttoni-text">
+                <span class="plus-icon" v-html="PlusIcon"></span>
+                Create Masternode</span
+            >
+        </button>
+    </div>
+    <center>
+        <div
+            id="accessMasternode"
+            class="dashboard-item"
+            style="display: inline-block; float: inherit"
+            v-if="!error && possibleUTXOs.length"
+        >
+            <div class="container">
+                <div id="accessMasternodeText"></div>
+                <br />
+                <input class="hide-element" type="text" />
+                <div style="display: block">
+                    <input
+                        type="password"
+                        v-model="privateKey"
+                        placeholder="Masternode Private Key"
+                        data-testid="importPrivateKey"
+                    />
+                    <input
+                        type="text"
+                        v-model="ip"
+                        placeholder="Masternode ip address"
+                        data-testid="importIpAddress"
+                    />
+                    <select
+                        style="display: block"
+                        v-model="utxo"
+                        placeholder="Masternode collateral tx"
+                        class="form-control"
+                        data-testid="selectUTXO"
+                    >
+                        <option disabled value="">Select an UTXO</option>
+                        <option v-for="utxo in possibleUTXOs" :value="utxo">
+                            {{ `${utxo.outpoint.txid}/${utxo.outpoint.n}` }}
+                        </option>
+                    </select>
+                    <button
+                        data-testid="importMasternodeButton"
+                        class="pivx-button-big"
+                        @click="importMasternode()"
+                    >
+                        <span class="buttoni-icon"
+                            ><i class="fas fa-file-upload fa-tiny-margin"></i
+                        ></span>
+                        <span class="buttoni-text">Access Masternode</span>
+                        <span class="buttoni-arrow" v-html="IconArrow"> </span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </center>
+    <Modal :show="showModal" @close="showModal = false">
+        <template #header>
+            <button
+                @click="showModal = false"
+                type="button"
+                class="close"
+                data-dismiss="modal"
+                aria-label="Close"
+            >
+                <i class="fa-solid fa-xmark closeCross"></i>
+            </button>
+        </template>
+        <template #body>
+            <div
+                class="modal-body center-text"
+                style="z-index: 100; margin-top: -35px; padding-bottom: 35px"
+            >
+                <div class="container">
+                    <h4>Create a masternode</h4>
+                    <span
+                        style="
+                            color: #af9cc6;
+                            margin-bottom: 23px;
+                            display: block;
+                        "
+                        >This action requires <b>10,000 PIV</b> in
+                        collateral.</span
+                    >
+                    <input class="hide-element" type="text" />
+                    <div style="display: block; text-align: left">
+                        <p style="margin-bottom: 6px; color: #af9cc6">
+                            Choose your Masternode type
+                        </p>
+                        <select
+                            style="display: block; text-align: left"
+                            placeholder="Masternode collateral tx"
+                            class="form-control"
+                            data-testid="masternodeTypeSelection"
+                            v-model="selection"
+                        >
+                            <option value="VPS">
+                                Self-hosted (a masternode server ran by you)
+                            </option>
+                            <option value="Third Party">
+                                Third Party (a masternode server ran by someone
+                                else)
+                            </option>
+                        </select>
+                        <br />
+                        <br />
+                    </div>
+
+                    <button
+                        @click="createMasternode()"
+                        data-testid="createMasternodeModalButton"
+                        class="pivx-button-small"
+                        style="height: 42px; width: 228px"
+                    >
+                        <span class="buttoni-text">
+                            <span class="plus-icon" v-html="PlusIcon"></span>
+                            Create Masternode</span
+                        >
+                    </button>
+                </div>
+            </div>
+        </template>
+    </Modal>
+    <div
+        class="modal fade"
+        tabindex="-1"
+        aria-labelledby="createMasternodeModalLabel"
+        role="dialog"
+        aria-hidden="true"
+    >
+        <div
+            class="modal-mask black-text"
+            style="z-index: 2000; background-color: rgba(32, 20, 54, 0.86)"
+        >
+            <div
+                class="modal-dialog masternodeModalDialog modal-dialog-centered"
+                role="document"
+            ></div>
+        </div>
+    </div>
+</template>
diff --git a/scripts/masternode/Masternode.vue b/scripts/masternode/Masternode.vue
new file mode 100644
index 000000000..879d20d87
--- /dev/null
+++ b/scripts/masternode/Masternode.vue
@@ -0,0 +1,177 @@
+<script setup>
+import { useMasternode } from '../composables/use_masternode.js';
+import { storeToRefs } from 'pinia';
+import CreateMasternode from './CreateMasternode.vue';
+import MasternodeController from './MasternodeController.vue';
+import { useWallet } from '../composables/use_wallet';
+import Masternode from '../masternode.js';
+import RestoreWallet from '../dashboard/RestoreWallet.vue';
+import { cChainParams } from '../chain_params';
+import Modal from '../Modal.vue';
+import { ref, watch, onMounted } from 'vue';
+import { getNetwork } from '../network/network_manager.js';
+import { translation, ALERTS } from '../i18n.js';
+import { generateMasternodePrivkey, parseIpAddress } from '../misc';
+import { useAlerts } from '../composables/use_alerts.js';
+
+const { createAlert } = useAlerts();
+
+/**
+ * @type{{masternode: import('vue').Ref<import('../masternode.js').default?>}}
+ */
+const { masternode } = storeToRefs(useMasternode());
+const wallet = useWallet();
+const { isSynced, balance, isViewOnly, isHardwareWallet } = storeToRefs(wallet);
+const showRestoreWallet = ref(false);
+const showMasternodePrivateKey = ref(false);
+const masternodePrivKey = ref('');
+// Array of possible masternode UTXOs
+const possibleUTXOs = ref(wallet.getMasternodeUTXOs());
+
+function updatePossibleUTXOs() {
+    possibleUTXOs.value = wallet.getMasternodeUTXOs();
+}
+
+onMounted(() => {
+    document
+        .getElementById('masternodeTab')
+        .addEventListener('click', updatePossibleUTXOs);
+});
+
+watch(isSynced, () => {
+    updatePossibleUTXOs();
+});
+/**
+ * Start a Masternode via a signed network broadcast
+ * @param {boolean} fRestart - Whether this is a Restart or a first Start
+ */
+async function startMasternode(fRestart = false) {
+    if (
+        !isHardwareWallet.value &&
+        isViewOnly.value &&
+        !(await restoreWallet())
+    ) {
+        return;
+    }
+    if (await masternode.value.start()) {
+        const strMsg = fRestart ? ALERTS.MN_RESTARTED : ALERTS.MN_STARTED;
+        createAlert('success', strMsg, 4000);
+    } else {
+        const strMsg = fRestart
+            ? ALERTS.MN_RESTART_FAILED
+            : ALERTS.MN_START_FAILED;
+        createAlert('warning', strMsg, 4000);
+    }
+}
+
+async function destroyMasternode() {
+    masternode.value = null;
+}
+
+/**
+ * @param {string} privateKey - masternode private key
+ * @param {string} ip - Ip to connect to. Can be ipv6 or ipv4
+ * @param {import('../transaction.js').UTXO} utxo - Masternode utxo. Must be of exactly `cChainParams.current.collateralInSats` of value
+ */
+function importMasternode(privateKey, ip, utxo) {
+    console.log(privateKey, ip, utxo);
+    const address = parseIpAddress(ip);
+    if (!address) {
+        createAlert('warning', ALERTS.MN_BAD_IP, 5000);
+        return;
+    }
+    if (!privateKey) {
+        createAlert('warning', ALERTS.MN_BAD_PRIVKEY, 5000);
+        return;
+    }
+    masternode.value = new Masternode({
+        walletPrivateKeyPath: wallet.getPath(utxo.script),
+        mnPrivateKey: privateKey,
+        collateralTxId: utxo.outpoint.txid,
+        outidx: utxo.outpoint.n,
+        addr: address,
+    });
+}
+
+async function restoreWallet() {
+    if (!wallet.isEncrypted) return false;
+    if (wallet.isHardwareWallet) return true;
+    showRestoreWallet.value = true;
+    return await new Promise((res) => {
+        watch(
+            [showRestoreWallet, isViewOnly],
+            () => {
+                showRestoreWallet.value = false;
+                res(!isViewOnly.value);
+            },
+            { once: true }
+        );
+    });
+}
+
+async function createMasternode({ isVPS }) {
+    // Ensure wallet is unlocked
+    if (!isHardwareWallet.value && isViewOnly.value && !(await restoreWallet()))
+        return;
+    const [address] = wallet.getNewAddress(1);
+    const res = await wallet.createAndSendTransaction(
+        getNetwork(),
+        address,
+        cChainParams.current.collateralInSats
+    );
+    if (!res) {
+        createAlert('warning', translation.ALERTS.TRANSACTION_FAILED);
+        return;
+    }
+
+    if (isVPS) openShowPrivKeyModal();
+    updatePossibleUTXOs();
+}
+
+function openShowPrivKeyModal() {
+    masternodePrivKey.value = generateMasternodePrivkey();
+    showMasternodePrivateKey.value = true;
+}
+</script>
+
+<template>
+    <RestoreWallet
+        :show="showRestoreWallet"
+        :wallet="wallet"
+        @close="showRestoreWallet = false"
+    />
+    <CreateMasternode
+        v-if="!masternode"
+        :synced="isSynced"
+        :balance="balance"
+        :possibleUTXOs="possibleUTXOs"
+        @createMasternode="createMasternode"
+        @importMasternode="importMasternode"
+    />
+    <MasternodeController
+        v-if="masternode"
+        :masternode="masternode"
+        @start="({ restart }) => startMasternode(restart)"
+        @destroy="destroyMasternode"
+    />
+    <Modal :show="showMasternodePrivateKey">
+        <template #header>
+            <b>{{ translation?.ALERTS?.CONFIRM_POPUP_MN_P_KEY }}</b>
+            <button
+                @click="showMasternodePrivateKey = false"
+                type="button"
+                class="close"
+                data-dismiss="modal"
+                aria-label="Close"
+            >
+                <i class="fa-solid fa-xmark closeCross"></i>
+            </button>
+        </template>
+        <template #body>
+            <code>{{ masternodePrivKey }}</code>
+            <span
+                v-html="translation?.ALERTS?.CONFIRM_POPUP_MN_P_KEY_HTML"
+            ></span>
+        </template>
+    </Modal>
+</template>
diff --git a/scripts/masternode/MasternodeController.vue b/scripts/masternode/MasternodeController.vue
new file mode 100644
index 000000000..c1979b9f5
--- /dev/null
+++ b/scripts/masternode/MasternodeController.vue
@@ -0,0 +1,161 @@
+<script setup>
+import { toRefs, ref, watch, onMounted } from 'vue';
+import Masternode from '../masternode';
+import { useAlerts } from '../composables/use_alerts.js';
+import { ALERTS } from '../i18n';
+
+const props = defineProps({ masternode: Masternode });
+const emit = defineEmits(['start', 'destroy']);
+const { masternode } = toRefs(props);
+const status = ref();
+const { createAlert } = useAlerts();
+watch(status, (status) => {
+    if (status === 'MISSING') {
+        createAlert('warning', ALERTS.MN_OFFLINE_STARTING, 6000);
+        emit('start', { restart: false });
+    }
+});
+const lastSeen = ref();
+const protocol = ref();
+const netType = ref();
+const ip = ref();
+async function updateMasternodeData() {
+    const data = await masternode.value.getFullData();
+    lastSeen.value = new Date(data.lastseen).toLocaleTimeString() || 'Unknown';
+    status.value = await masternode.value.getStatus();
+    protocol.value = data.version;
+    netType.value = data?.network?.toUpperCase() || 'Unknown';
+    ip.value = masternode.value.addr;
+}
+onMounted(() =>
+    document
+        .getElementById('masternodeTab')
+        .addEventListener('click', updateMasternodeData)
+);
+watch(masternode, updateMasternodeData, { immediate: true });
+</script>
+
+<template>
+    <div>
+        <div class="">
+            <br />
+
+            <div id="mnDashboard" class="staking-banner-bottom">
+                <div class="stake-box large-box col-md-4">
+                    <h4
+                        class="stake-balances"
+                        style="background-color: #2c0044; border-radius: 10px"
+                    >
+                        Status
+                        <small
+                            id="mnProtocol"
+                            style="opacity: 0.5"
+                            data-testid="mnProtocol"
+                        >
+                            {{ protocol }}
+                        </small>
+                    </h4>
+                    <h2
+                        id="mnStatus"
+                        class="stake-balances"
+                        style="
+                            overflow-wrap: anywhere;
+                            top: 50%;
+                            left: 50%;
+                            transform: translate(-50%, -50%);
+                            position: absolute;
+                            width: 100%;
+                            padding: 10px;
+                        "
+                        data-testid="mnStatus"
+                    >
+                        {{ status }}
+                    </h2>
+                </div>
+                <div class="stake-box large-box col-md-4">
+                    <h4
+                        class="stake-balances"
+                        style="background-color: #2c0044; border-radius: 10px"
+                        data-testid="mnNetType"
+                    >
+                        {{ netType }}
+                    </h4>
+                    <h2
+                        class="stake-balances"
+                        style="
+                            overflow-wrap: anywhere;
+                            top: 50%;
+                            left: 50%;
+                            transform: translate(-50%, -50%);
+                            position: absolute;
+                            width: 100%;
+                            padding: 10px;
+                            font-family: mono !important;
+                            font-size: x-large;
+                        "
+                        data-testid="mnIp"
+                    >
+                        {{ ip }}
+                    </h2>
+                </div>
+                <div class="stake-box large-box col-md-4">
+                    <h4
+                        class="stake-balances"
+                        style="background-color: #2c0044; border-radius: 10px"
+                    >
+                        Last Seen
+                    </h4>
+                    <h2
+                        id="mnLastSeen"
+                        class="stake-balances"
+                        style="
+                            overflow-wrap: anywhere;
+                            top: 50%;
+                            left: 50%;
+                            transform: translate(-50%, -50%);
+                            position: absolute;
+                            width: 100%;
+                            padding: 10px;
+                            font-size: xx-large;
+                        "
+                        data-testid="mnLastSeen"
+                    >
+                        {{ lastSeen }}
+                    </h2>
+                </div>
+            </div>
+
+            <br />
+
+            <center>
+                <button
+                    class="pivx-button-big"
+                    @click="emit('destroy')"
+                    style="margin: 20px; font-weight: 550 !important"
+                    data-testid="destroyButton"
+                >
+                    <span class="buttoni-icon"
+                        ><i class="fas fa-burn fa-tiny-margin"></i
+                    ></span>
+                    <span class="buttoni-text" id="importMnText"
+                        >Destroy Masternode</span
+                    >
+                </button>
+
+                <button
+                    class="pivx-button-big"
+                    @click="emit('start', { restart: true })"
+                    style="margin: 20px; font-weight: 550 !important"
+                    data-testid="restartButton"
+                >
+                    <span class="buttoni-icon"
+                        ><i class="fas fa-redo-alt fa-tiny-margin"></i
+                    ></span>
+                    <span class="buttoni-text" id="importMnText"
+                        >Restart Masternode</span
+                    >
+                </button>
+            </center>
+        </div>
+    </div>
+</template>
diff --git a/scripts/masternode/NewMasternodeList.vue b/scripts/masternode/NewMasternodeList.vue
new file mode 100644
index 000000000..ac2e59111
--- /dev/null
+++ b/scripts/masternode/NewMasternodeList.vue
@@ -0,0 +1,204 @@
+<script setup>
+// New masternode list for multi-masternode.
+// Currently unused. It will be implemented in a subsequent PR
+</script>
+
+<template>
+    <!-- New Masternode list -->
+    <div class="d-none">
+        <div class="dcWallet-activity">
+            <h4 class="mnTopConfigured">4 Masternodes Configured</h4>
+
+            <div class="scrollTable">
+                <div>
+                    <table
+                        class="table table-responsive table-sm stakingTx masternodeTable table-mobile-scroll"
+                    >
+                        <thead>
+                            <tr>
+                                <th scope="col" style="width: 400px">Status</th>
+                                <th scope="col" style="width: 400px">
+                                    IP Address
+                                </th>
+                                <th scope="col" style="width: 400px">
+                                    Last Seen
+                                </th>
+                                <th scope="col" style="width: 400px"></th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>
+                                    <span class="masternodeBadges enabledBadge"
+                                        >ENABLED</span
+                                    >
+                                </td>
+                                <td>
+                                    <code
+                                        class="wallet-code text-center active ptr"
+                                        style="padding: 4px 9px"
+                                        >127.0.0.1:12345</code
+                                    >
+                                </td>
+                                <td>
+                                    <span class="mnLastSeen">27/02/24</span>
+                                </td>
+                                <td
+                                    class="text-right"
+                                    style="padding: 0px; padding-top: 11px"
+                                >
+                                    <button
+                                        class="pivx-button-small"
+                                        style="
+                                            height: 43px;
+                                            width: 43px;
+                                            padding-left: 13px;
+                                        "
+                                    >
+                                        <span class="buttoni-text">
+                                            <span class="plus-icon">
+                                                <svg
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                    viewBox="0 0 32 32"
+                                                >
+                                                    <path
+                                                        d="M32,15.8c0.1,8.5-6.5,15.7-15,16.2c-0.3,0-0.7,0-1,0c-3.4,0-6.8-1.1-9.6-3.2l-1.9,2.1
+                                          c-0.2,0.3-0.7,0.3-0.9,0.1c-0.1-0.1-0.2-0.2-0.2-0.3l-2-8.1c-0.1-0.4,0.1-0.7,0.5-0.8c0.1,0,0.2,0,0.2,0l8.2,1
+                                          c0.4,0,0.6,0.4,0.6,0.7c0,0.1-0.1,0.3-0.2,0.4l-1.8,2c5.4,3.8,12.9,2.5,16.7-2.9c1.5-2.1,2.3-4.6,2.2-7.2c0-0.4,0.1-0.8,0.4-1.1
+                                          c0.3-0.3,0.7-0.4,1.1-0.3l1.3,0.2c0.3,0,0.6,0.2,0.8,0.4C31.9,15.1,32,15.4,32,15.8z M3.6,17.4C3.9,17.1,4,16.7,4,16.3
+                                          C3.9,9.6,9.1,4.2,15.7,4c2.6-0.1,5.1,0.7,7.2,2.2l-1.8,2c-0.2,0.3-0.2,0.7,0.1,0.9c0.1,0.1,0.2,0.1,0.4,0.2l8.2,1
+                                          c0.4,0,0.7-0.2,0.7-0.6c0-0.1,0-0.2,0-0.2l-2-8.1c-0.1-0.4-0.4-0.6-0.8-0.5c-0.1,0-0.3,0.1-0.3,0.2l-1.9,2.1C22.8,1.1,19.5,0,16,0
+                                          c-0.3,0-0.6,0-1,0C6.5,0.5-0.1,7.7,0,16.2c0,0.3,0.1,0.7,0.3,0.9c0.2,0.2,0.5,0.4,0.8,0.4l1.3,0.2C2.9,17.8,3.3,17.6,3.6,17.4z"
+                                                    />
+                                                </svg>
+                                            </span>
+                                        </span>
+                                    </button>
+                                    <button
+                                        class="pivx-button-small"
+                                        style="
+                                            height: 43px;
+                                            width: 43px;
+                                            padding-left: 13px;
+                                        "
+                                    >
+                                        <span class="buttoni-text">
+                                            <span class="plus-icon">
+                                                <svg
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                    viewBox="0 0 32 32"
+                                                >
+                                                    <path
+                                                        d="M4.5,29.4C4.5,30.9,5.6,32,7,32H25c1.4,0,2.6-1.1,2.6-2.6V9h-23V29.4z M21.1,14.1c0-0.7,0.6-1.3,1.3-1.3
+                                          c0.7,0,1.3,0.6,1.3,1.3v12.8c0,0.7-0.6,1.3-1.3,1.3c-0.7,0-1.3-0.6-1.3-1.3V14.1z M14.7,14.1c0-0.7,0.6-1.3,1.3-1.3
+                                          c0.7,0,1.3,0.6,1.3,1.3v12.8c0,0.7-0.6,1.3-1.3,1.3c-0.7,0-1.3-0.6-1.3-1.3V14.1z M8.3,14.1c0-0.7,0.6-1.3,1.3-1.3
+                                          c0.7,0,1.3,0.6,1.3,1.3v12.8c0,0.7-0.6,1.3-1.3,1.3c-0.7,0-1.3-0.6-1.3-1.3V14.1z M28.8,3.8v2.6H3.2V3.8c0-0.7,0.6-1.3,1.3-1.3h7.7
+                                          V1.3c0-0.7,0.6-1.3,1.3-1.3h5.1c0.7,0,1.3,0.6,1.3,1.3v1.3h7.7C28.2,2.6,28.8,3.1,28.8,3.8z"
+                                                    />
+                                                </svg>
+                                            </span>
+                                        </span>
+                                    </button>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <span class="masternodeBadges missingBadge"
+                                        >MISSING</span
+                                    >
+                                </td>
+                                <td>
+                                    <code
+                                        class="wallet-code text-center active ptr"
+                                        style="padding: 4px 9px"
+                                        >127.0.0.1:12345</code
+                                    >
+                                </td>
+                                <td>
+                                    <span class="mnLastSeen">27/02/24</span>
+                                </td>
+                                <td>Btns</td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <span
+                                        class="masternodeBadges preEnabledBadge"
+                                        >PRE_ENABLED</span
+                                    >
+                                </td>
+                                <td>
+                                    <code
+                                        class="wallet-code text-center active ptr"
+                                        style="padding: 4px 9px"
+                                        >127.0.0.1:12345</code
+                                    >
+                                </td>
+                                <td>
+                                    <span class="mnLastSeen">27/02/24</span>
+                                </td>
+                                <td>Btns</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+
+        <div
+            style="
+                display: flex;
+                justify-content: center;
+                width: 100%;
+                margin-top: 25px;
+                margin-bottom: 50px;
+            "
+        >
+            <button
+                class="pivx-button-small"
+                style="height: 42px; width: 228px"
+                data-toggle="modal"
+                data-target="#createMasternodeModal"
+            >
+                <span class="buttoni-text">
+                    <span id="plus-icon3" class="plus-icon"></span>
+                    Add Masternode</span
+                >
+            </button>
+        </div>
+
+        <div class="dcWallet-activity">
+            <span
+                style="
+                    color: rgb(233, 222, 255);
+                    display: flex;
+                    justify-content: center;
+                    margin-bottom: 24px;
+                    margin-top: 20px;
+                "
+            >
+                <span data-i18n="rewardHistory" style="font-size: 24px"
+                    >Reward History</span
+                >
+                <span class="rewardsBadge" style="font-size: 20px">
+                    0<span style="opacity: 0.55; font-size: 15px">.00</span>
+                    <span style="font-size: 15px; opacity: 0.55">tPIV</span>
+                </span>
+            </span>
+            <div class="scrollTable">
+                <table
+                    class="table table-responsive table-sm stakingTx table-mobile-scroll"
+                >
+                    <thead>
+                        <tr>
+                            <th scope="col" class="tx1">Time</th>
+                            <th scope="col" class="tx2">ID</th>
+                            <th scope="col" class="tx3">Amount</th>
+                            <th scope="col" class="tx4"></th>
+                        </tr>
+                    </thead>
+                    <tbody></tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/scripts/misc.js b/scripts/misc.js
index fa83b5ba2..f5697d05e 100644
--- a/scripts/misc.js
+++ b/scripts/misc.js
@@ -5,6 +5,7 @@ import bs58 from 'bs58';
 import { BIP21_PREFIX, cChainParams } from './chain_params.js';
 import { dSHA256 } from './utils.js';
 import { verifyPubkey, verifyBech32 } from './encoding.js';
+import { Address6 } from 'ip-address';
 
 // Base58 Encoding Map
 export const MAP_B58 =
@@ -400,3 +401,45 @@ export function isEmpty(val) {
         (typeof val === 'object' && Object.keys(val).length === 0)
     );
 }
+
+/**
+ * Takes an ip address and adds the port.
+ * If it's a tor address, ip.onion:port will be used (e.g. expyuzz4wqqyqhjn.onion:12345)
+ * If it's an IPv4 address, ip:port will be used, (e.g. 127.0.0.1:12345)
+ * If it's an IPv6 address, [ip]:port will be used, (e.g. [::1]:12345)
+ * @param {String} ip - Ip address with or without port
+ * @returns {String}
+ */
+export function parseIpAddress(ip) {
+    // IPv4 or tor without port
+    if (ip.match(/\d+\.\d+\.\d+\.\d+/) || ip.match(/\w+\.onion/)) {
+        return `${ip}:${cChainParams.current.MASTERNODE_PORT}`;
+    }
+
+    // IPv4 or tor with port
+    if (ip.match(/\d+\.\d+\.\d+\.\d+:\d+/) || ip.match(/\w+\.onion:\d+/)) {
+        return ip;
+    }
+
+    // IPv6 without port
+    if (Address6.isValid(ip)) {
+        return `[${ip}]:${cChainParams.current.MASTERNODE_PORT}`;
+    }
+
+    const groups = /\[(.*)\]:\d+/.exec(ip);
+    if (groups !== null && groups.length > 1) {
+        // IPv6 with port
+        if (Address6.isValid(groups[1])) {
+            return ip;
+        }
+    }
+
+    // If we haven't returned yet, the address was invalid.
+    return null;
+}
+
+export function numberToCurrency(number, price) {
+    return (number * price).toLocaleString('en-gb', ',', '.', {
+        style: 'currency',
+    });
+}
diff --git a/scripts/network/network.js b/scripts/network/network.js
index a0767dfba..c6aa314bd 100644
--- a/scripts/network/network.js
+++ b/scripts/network/network.js
@@ -197,7 +197,10 @@ export class RPCNodeNetwork extends Network {
     }
 
     async getBestBlockHash() {
-        return await this.#callRPC('/getbestblockhash', true);
+        return (await this.#callRPC('/getbestblockhash', true)).replaceAll(
+            '"',
+            ''
+        );
     }
 
     async sendTransaction(hex) {
diff --git a/scripts/settings.js b/scripts/settings.js
index d5301979e..a23c71e31 100644
--- a/scripts/settings.js
+++ b/scripts/settings.js
@@ -1,7 +1,6 @@
 import {
     doms,
     updateLogOutButton,
-    updateGovernanceTab,
     dashboard,
     refreshChainData,
 } from './global.js';
@@ -416,7 +415,6 @@ export async function toggleTestnet(
     // Make sure we have the correct number of blocks before loading any wallet
     await refreshChainData();
     getEventEmitter().emit('toggle-network');
-    await updateGovernanceTab();
 }
 
 export function toggleDebug(newValue = !debug) {
diff --git a/scripts/stake/Stake.vue b/scripts/stake/Stake.vue
index 9b3da89ca..2295730d8 100644
--- a/scripts/stake/Stake.vue
+++ b/scripts/stake/Stake.vue
@@ -18,7 +18,7 @@ const { createAlert } = useAlerts();
 const wallet = useWallet();
 const { balance, coldBalance, price, currency, isViewOnly } =
     storeToRefs(wallet);
-const { advancedMode, displayDecimals } = useSettings();
+const { advancedMode, displayDecimals } = storeToRefs(useSettings());
 const showUnstake = ref(false);
 const showStake = ref(false);
 const coldStakingAddress = ref('');
@@ -106,20 +106,6 @@ async function restoreWallet(strReason) {
         );
     });
 }
-
-async function importWif(wif, extsk) {
-    const secret = await ParsedSecret.parse(wif);
-    if (secret.masterKey) {
-        await wallet.setMasterKey({ mk: secret.masterKey, extsk });
-        if (wallet.hasShield && !extsk) {
-            createAlert(
-                'warning',
-                'Could not decrypt sk even if password is correct, please contact a developer'
-            );
-        }
-        createAlert('success', ALERTS.WALLET_UNLOCKED, 1500);
-    }
-}
 </script>
 
 <template>
@@ -167,7 +153,6 @@ async function importWif(wif, extsk) {
     <RestoreWallet
         :show="showRestoreWallet"
         :reason="restoreWalletReason"
-        @import="importWif"
         @close="showRestoreWallet = false"
     />
 </template>
diff --git a/scripts/utils.js b/scripts/utils.js
index 80478cfef..db2343757 100644
--- a/scripts/utils.js
+++ b/scripts/utils.js
@@ -110,3 +110,13 @@ export function getRandomInt(N) {
 export function getRandomElement(arr) {
     return arr[getRandomInt(arr.length)];
 }
+
+/**
+ * @param {string} blockbookUrl - Blockbook base URL
+ * @param {string} address
+ * @returns {string} URL to blockbook address
+ */
+export function getBlockbookUrl(blockbookUrl, address) {
+    const urlPart = address.startsWith('xpub') ? 'xpub' : 'address';
+    return `${blockbookUrl.replace(/\/$/, '')}/${urlPart}/${address}`;
+}
diff --git a/test_setup.js b/test_setup.js
index 7e0f9a19d..c1e7cc966 100644
--- a/test_setup.js
+++ b/test_setup.js
@@ -1,7 +1,19 @@
+import { vi } from 'vitest';
+import 'fake-indexeddb/auto';
+
 // We need to attach the component to a HTML,
 // or .isVisible() function does not work
 document.body.innerHTML = `
   <div>
-    <div id="app"></div>
+      <div id="app"></div>
+      <div id="analytics"></div>
+      <div id="masternodeTab"></div>
+      <div id="governanceTab"></div>
   </div>
 `;
+
+// Mock indexDB
+vi.stubGlobal('indexedDB', new IDBFactory());
+
+// eslint-disable-next-line
+process.env.TZ = 'UTC';
diff --git a/tests/components/StakeBalance.test.js b/tests/components/StakeBalance.test.js
index d0d25383e..f289b35f6 100644
--- a/tests/components/StakeBalance.test.js
+++ b/tests/components/StakeBalance.test.js
@@ -11,7 +11,7 @@ describe('stake balance tests', () => {
                 return message;
             }
         );
-        return vi.clearAllMocks();
+        return vi.clearAllMocks;
     });
     function mount(props) {
         return vueMount(StakeBalance, {
diff --git a/tests/components/governance/BudgetAllocated.test.js b/tests/components/governance/BudgetAllocated.test.js
new file mode 100644
index 000000000..6aafdcf44
--- /dev/null
+++ b/tests/components/governance/BudgetAllocated.test.js
@@ -0,0 +1,24 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import BudgetAllocated from '../../../scripts/governance/BudgetAllocated.vue';
+
+describe('BudgetAllocated component tests', () => {
+    it('displays information correctly', () => {
+        const wrapper = mount(BudgetAllocated, {
+            props: { currency: 'usd', price: 1.5, allocatedBudget: 10_000 },
+        });
+        expect(
+            wrapper.find('[data-testid="allocatedGovernanceBudget"]').text()
+        ).toBe('10,000');
+        expect(
+            wrapper
+                .find('[data-testid="allocatedGovernanceBudgetValue"]')
+                .text()
+        ).toBe('15,000'); // 1.5 * 10000
+        expect(
+            wrapper
+                .find('[data-testid="allocatedGovernanceBudgetCurrency"]')
+                .text()
+        ).toBe('USD'); // currency to upper case
+    });
+});
diff --git a/tests/components/governance/Flipdown.test.js b/tests/components/governance/Flipdown.test.js
new file mode 100644
index 000000000..f08749a62
--- /dev/null
+++ b/tests/components/governance/Flipdown.test.js
@@ -0,0 +1,25 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { flushPromises, mount } from '@vue/test-utils';
+import FlipDownComponent from '../../../scripts/governance/Flipdown.vue';
+import { FlipDown } from '../../../scripts/flipdown.js';
+vi.mock('../../../scripts/flipdown.js', () => {
+    const FlipDown = vi.fn();
+    FlipDown.prototype.start = vi.fn();
+    return { FlipDown };
+});
+
+describe('BudgetAllocated component tests', () => {
+    it('updates flipdown correctly', async () => {
+        const wrapper = mount(FlipDownComponent, { props: { timeStamp: 5 } });
+        const flipdownElement = wrapper.find('[data-testid="flipdown"]');
+        await flushPromises();
+        const id = flipdownElement.wrapperElement.id;
+        expect(FlipDown).toHaveBeenCalledWith(5, id);
+        expect(FlipDown.prototype.start).toHaveBeenCalledOnce();
+        await wrapper.setProps({ timeStamp: 10 });
+
+        await flushPromises();
+        expect(FlipDown).toHaveBeenCalledWith(5, id);
+        expect(FlipDown.prototype.start).toHaveBeenCalledTimes(2);
+    });
+});
diff --git a/tests/components/governance/LocalProposalStatus.test.js b/tests/components/governance/LocalProposalStatus.test.js
new file mode 100644
index 000000000..df7ba3d13
--- /dev/null
+++ b/tests/components/governance/LocalProposalStatus.test.js
@@ -0,0 +1,61 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import LocalProposalStatus from '../../../scripts/governance/LocalProposalStatus.vue';
+
+vi.mock('../../../scripts/i18n.js');
+
+describe('LocalProposalStatus component tests', () => {
+    it('displays correct information', async () => {
+        const wrapper = mount(LocalProposalStatus, {
+            props: {
+                proposal: {
+                    blockHeight: 100_100,
+                },
+                blockCount: 100_105,
+            },
+        });
+        expect(wrapper.find('[data-testid="localProposalStatus"]').text()).toBe(
+            '1 block proposalFinalisationRemaining'
+        );
+        expect(
+            wrapper.find('[data-testid="finalizeProposalButton"]').exists()
+        ).toBe(false);
+        await wrapper.setProps({ proposal: { blockHeight: 99_999 } });
+        expect(wrapper.find('[data-testid="localProposalStatus"]').text()).toBe(
+            'proposalFinalisationReady'
+        );
+        expect(
+            wrapper.find('[data-testid="finalizeProposalButton"]').exists()
+        ).toBe(true);
+        await wrapper.setProps({ proposal: { blockHeight: 99_998 } });
+        expect(wrapper.find('[data-testid="localProposalStatus"]').text()).toBe(
+            'proposalFinalisationReady'
+        );
+        expect(
+            wrapper.find('[data-testid="finalizeProposalButton"]').exists()
+        ).toBe(true);
+        await wrapper.setProps({ proposal: { blockHeight: 1000 } });
+        expect(wrapper.find('[data-testid="localProposalStatus"]').text()).toBe(
+            'proposalFinalisationExpired'
+        );
+        expect(
+            wrapper.find('[data-testid="finalizeProposalButton"]').exists()
+        ).toBe(false);
+    });
+
+    it('emits finalize event when button is clicked', async () => {
+        const wrapper = mount(LocalProposalStatus, {
+            props: {
+                proposal: {
+                    blockHeight: 99_998,
+                },
+                blockCount: 100_105,
+            },
+        });
+        expect(wrapper.emitted()).toStrictEqual({});
+        const button = wrapper.find('[data-testid="finalizeProposalButton"]');
+        await button.trigger('click');
+        // One event with no args
+        expect(wrapper.emitted().finalizeProposal).toStrictEqual([[]]);
+    });
+});
diff --git a/tests/components/governance/MonthlyBudget.spec.js b/tests/components/governance/MonthlyBudget.spec.js
new file mode 100644
index 000000000..0164c003a
--- /dev/null
+++ b/tests/components/governance/MonthlyBudget.spec.js
@@ -0,0 +1,20 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import MonthlyBudget from '../../../scripts/governance/MonthlyBudget.vue';
+
+describe('MonthlyBudget component tests', () => {
+    it('displays correctly', () => {
+        const wrapper = mount(MonthlyBudget, {
+            props: {
+                currency: 'usd',
+                price: 1.3,
+            },
+        });
+        expect(wrapper.find('[data-testid="monthlyBudgetValue"]').text()).toBe(
+            '561,600'
+        );
+        expect(
+            wrapper.find('[data-testid="monthlyBudgetCurrency"]').text()
+        ).toBe('USD');
+    });
+});
diff --git a/tests/components/governance/ProposalCreateModal.spec.js b/tests/components/governance/ProposalCreateModal.spec.js
new file mode 100644
index 000000000..d820501ca
--- /dev/null
+++ b/tests/components/governance/ProposalCreateModal.spec.js
@@ -0,0 +1,56 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import ProposalCreateModal from '../../../scripts/governance/ProposalCreateModal.vue';
+
+describe('ProposalCreateModal component tests', () => {
+    it('hides address input when advanced mode is false', async () => {
+        const wrapper = mount(ProposalCreateModal, {
+            props: { advancedMode: true },
+        });
+        let address = wrapper.find('[data-testid="proposalAddress"]');
+        // Address input
+        expect(address.isVisible()).toBe(true);
+        await wrapper.setProps({ advancedMode: false });
+        address = wrapper.find('[data-testid="proposalAddress"]');
+        expect(address.exists()).toBe(false);
+    });
+
+    it('submits correctly', async () => {
+        const wrapper = mount(ProposalCreateModal, {
+            props: { advancedMode: true },
+        });
+        const proposalTitle = wrapper.find('[data-testid="proposalTitle"]');
+        await proposalTitle.setValue('Proposal Title');
+        const url = wrapper.find('[data-testid="proposalUrl"]');
+        await url.setValue('https://proposal.com/');
+        const proposalCycles = wrapper.find('[data-testid="proposalCycles"]');
+        await proposalCycles.setValue(3);
+        const proposalPayment = wrapper.find('[data-testid="proposalPayment"]');
+        await proposalPayment.setValue(20);
+        const address = wrapper.find('[data-testid="proposalAddress"]');
+        await address.setValue('DLabSomethingSomething');
+
+        const proposalSubmit = wrapper.find('[data-testid="proposalSubmit"]');
+        await proposalSubmit.trigger('click');
+        expect(wrapper.emitted().create).toStrictEqual([
+            [
+                'Proposal Title',
+                'https://proposal.com/',
+                3,
+                20,
+                'DLabSomethingSomething',
+            ],
+        ]);
+        await wrapper.setProps({ advancedMode: false });
+
+        await proposalSubmit.trigger('click');
+        // When advanced mode is toggled off, address should reset
+        expect(wrapper.emitted().create.at(-1)).toStrictEqual([
+            'Proposal Title',
+            'https://proposal.com/',
+            3,
+            20,
+            '',
+        ]);
+    });
+});
diff --git a/tests/components/governance/ProposalName.spec.js b/tests/components/governance/ProposalName.spec.js
new file mode 100644
index 000000000..8230f5b44
--- /dev/null
+++ b/tests/components/governance/ProposalName.spec.js
@@ -0,0 +1,48 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { flushPromises, mount } from '@vue/test-utils';
+import ProposalName from '../../../scripts/governance/ProposalName.vue';
+import { setActivePinia, createPinia } from 'pinia';
+describe('ProposalName component tests', () => {
+    /**
+     * @type{import('@vue/test-utils').VueWrapper<ProposalName>}
+     */
+    let wrapper;
+    beforeEach(() => {
+        // Create test pinia instance
+        setActivePinia(createPinia());
+        wrapper = mount(ProposalName, {
+            props: {
+                proposal: {
+                    URL: 'https://proposal.com/',
+                    Name: 'ProposalName',
+                    PaymentAddress: 'Dlabsaddress',
+                },
+            },
+        });
+    });
+
+    it('Has correct href link', async () => {
+        expect(
+            wrapper.find('[data-testid="proposalLink"]').attributes('href')
+        ).toBe('/address/Dlabsaddress');
+        await wrapper.setProps({
+            proposal: {
+                PaymentAddress: 'xpubdlabs',
+                URL: 'https://proposal.com',
+                Name: 'ProposalName',
+            },
+        });
+        expect(
+            wrapper.find('[data-testid="proposalLink"]').attributes('href')
+        ).toBe('/xpub/xpubdlabs');
+    });
+
+    it('renders correctly', async () => {
+        expect(wrapper.find('[data-testid="proposalName"]').text()).toBe(
+            'ProposalName'
+        );
+        expect(wrapper.find('[data-testid="proposalLink"]').text()).toBe(
+            'Dlabsaddre...'
+        );
+    });
+});
diff --git a/tests/components/governance/ProposalPayment.spec.js b/tests/components/governance/ProposalPayment.spec.js
new file mode 100644
index 000000000..9e9ec58ee
--- /dev/null
+++ b/tests/components/governance/ProposalPayment.spec.js
@@ -0,0 +1,49 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import ProposalPayment from '../../../scripts/governance/ProposalPayment.vue';
+import MobileProposalPayment from '../../../scripts/governance/MobileProposalPayment.vue';
+import MobileProposalPayment from '../../../scripts/governance/MobileProposalPayment.vue';
+
+vi.mock('../../../scripts/i18n.js');
+for (const { Component, name } of [
+    {
+        Component: ProposalPayment,
+        name: 'ProposalPayment',
+    },
+    { Component: MobileProposalPayment, name: 'MobileProposalPayment' },
+]) {
+    describe(`${name} component tests`, () => {
+        /**
+         * @type{import('@vue/test-utils').VueWrapper<ProposalName>}
+         */
+        let wrapper;
+        beforeEach(() => {
+            wrapper = mount(Component, {
+                props: {
+                    price: 1.3,
+                    proposal: {
+                        MonthlyPayment: 10000,
+                        RemainingPaymentCount: 3,
+                        TotalPayment: 30000,
+                    },
+                    strCurrency: 'usd',
+                },
+            });
+        });
+        it('renders correctly', () => {
+            expect(
+                wrapper.find('[data-testid="proposalMonthlyPayment"]').text()
+            ).toBe('10,000');
+            // 1.3 * 10000
+            expect(wrapper.find('[data-testid="proposalFiat"]').text()).toBe(
+                '13,000 USD'
+            );
+            // Match general phrase, but ignore spacing
+            expect(
+                wrapper.find('[data-testid="governInstallments"]').text()
+            ).toMatch(
+                /3\s*proposalPaymentsRemaining\s*30,000 PIV proposalPaymentTotal/
+            );
+        });
+    });
+}
diff --git a/tests/components/governance/ProposalRow.spec.js b/tests/components/governance/ProposalRow.spec.js
new file mode 100644
index 000000000..ac45ff62d
--- /dev/null
+++ b/tests/components/governance/ProposalRow.spec.js
@@ -0,0 +1,96 @@
+import { mount } from '@vue/test-utils';
+import ProposalRow from '../../../scripts/governance/ProposalRow.vue';
+import ProposalStatus from '../../../scripts/governance/ProposalStatus.vue';
+import LocalProposalStatus from '../../../scripts/governance/LocalProposalStatus.vue';
+import ProposalName from '../../../scripts/governance/ProposalName.vue';
+import { ProposalValidator } from '../../../scripts/governance/status.js';
+import Modal from '../../../scripts/Modal.vue';
+
+vi.mock('../../../scripts/i18n.js');
+
+describe('ProposalRow component tests', () => {
+    /**
+     * @type{import('@vue/test-utils').VueWrapper<ProposalName>}
+     */
+    let wrapper;
+
+    beforeEach(() => {
+        const proposalValidator = new ProposalValidator();
+        proposalValidator.validate = vi.fn(() => {
+            return { passing: true };
+        });
+
+        const props = {
+            proposal: {
+                Name: 'LRP - JSKitty',
+                URL: 'https://forum.pivx.org/threads/lrp-jskitty.2126/',
+                Hash: '2e9196542a65d0e84ef116f485e48e40cd93b7a90a39d850536c75979f92b809',
+                FeeHash:
+                    '0b7be6b9df8b65565423a5878d2b4c62830f907d3798c976be340cf55e13d65a',
+                BlockStart: 4449600,
+                BlockEnd: 4579203,
+                TotalPaymentCount: 3,
+                RemainingPaymentCount: 0,
+                PaymentAddress: 'DFiH7DpxYahn5Y6p91oYwRDUqCsS9PaVGu',
+                Ratio: 1,
+                Yeas: 868,
+                Nays: 0,
+                Abstains: 0,
+                TotalPayment: 45000,
+                MonthlyPayment: 15000,
+                IsEstablished: true,
+                IsValid: true,
+                Allotted: 15000,
+            },
+            proposalValidator,
+            masternodeCount: 100,
+            price: 10,
+            strCurrency: 'USD',
+            localProposal: false,
+        };
+        wrapper = mount(ProposalRow, {
+            props,
+        });
+    });
+
+    it('renders ProposalStatus if localProposal is false', () => {
+        expect(wrapper.findComponent(ProposalStatus).exists()).toBe(true);
+        expect(wrapper.findComponent(LocalProposalStatus).exists()).toBe(false);
+    });
+
+    it('renders LocalProposalStatus if localProposal is true', async () => {
+        await wrapper.setProps({ localProposal: true });
+        expect(wrapper.findComponent(ProposalStatus).exists()).toBe(false);
+        expect(wrapper.findComponent(LocalProposalStatus).exists()).toBe(true);
+    });
+
+    it('emits click event when governStatusCol is clicked', async () => {
+        await wrapper.find('.governStatusCol').trigger('click');
+        expect(wrapper.emitted().click).toBeTruthy();
+    });
+
+    it('emits finalizeProposal event from LocalProposalStatus', async () => {
+        await wrapper.setProps({ localProposal: true });
+        wrapper.findComponent(LocalProposalStatus).vm.$emit('finalizeProposal');
+        expect(wrapper.emitted().finalizeProposal).toBeTruthy();
+    });
+
+    it('emits vote event with 2 when No button is clicked', async () => {
+        await wrapper.find('.govNoBtnMob').trigger('click');
+        await wrapper
+            .getComponent(Modal)
+            .find('[data-testid="confirmVote"]')
+            .trigger('click');
+
+        expect(wrapper.emitted().vote[0]).toEqual([2]);
+    });
+
+    it('emits vote event with 1 when Yes button is clicked', async () => {
+        await wrapper.find('.govYesBtnMob').trigger('click');
+        await wrapper
+            .getComponent(Modal)
+            .find('[data-testid="confirmVote"]')
+            .trigger('click');
+        expect(wrapper.emitted().vote[0]).toEqual([1]);
+    });
+});
diff --git a/tests/components/governance/ProposalStatus.spec.js b/tests/components/governance/ProposalStatus.spec.js
new file mode 100644
index 000000000..e13660bba
--- /dev/null
+++ b/tests/components/governance/ProposalStatus.spec.js
@@ -0,0 +1,80 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mount as vueMount } from '@vue/test-utils';
+import ProposalStatus from '../../../scripts/governance/ProposalStatus.vue';
+import { ProposalValidator, reasons } from '../../../scripts/governance/status';
+
+vi.mock('../../../scripts/i18n.js');
+
+describe('ProposalStatus component tests', () => {
+    /**
+     * @type{import('@vue/test-utils').VueWrapper<ProposalStatus>}
+     */
+    let wrapper;
+    let proposalValidator = new ProposalValidator(100);
+    beforeEach(() => {
+        proposalValidator.reason = null;
+        proposalValidator.validate = vi.fn(() => {
+            if (proposalValidator.reason !== null)
+                return { passing: false, reason: proposalValidator.reason };
+            return { passing: true };
+        });
+    });
+    function mount() {
+        wrapper = vueMount(ProposalStatus, {
+            props: {
+                proposal: {
+                    URL: 'https://proposal.com/',
+                    Name: 'ProposalName',
+                    PaymentAddress: 'Dlabsaddress',
+                    Yeas: 90,
+                    Nays: 30,
+                },
+                proposalValidator,
+                nMasternodes: 132,
+            },
+        });
+    }
+    it('renders not funded proposals correctly', () => {
+        proposalValidator.reason = reasons.NOT_FUNDED;
+        mount();
+        const status = wrapper.find('[data-testid="proposalStatus"]');
+        expect(status.text()).toBe('proposalFailing');
+        expect(status.classes()).toContain('votesNo');
+        const funding = wrapper.find('[data-testid="proposalFunding"]');
+        expect(funding.text()).toBe('(proposalNotFunded)');
+    });
+    it('renders over budget proposals correctly', () => {
+        proposalValidator.reason = reasons.OVER_BUDGET;
+        mount();
+        const status = wrapper.find('[data-testid="proposalStatus"]');
+        expect(status.text()).toBe('proposalFailing');
+        expect(status.classes()).toContain('votesOverAllocated');
+        const funding = wrapper.find('[data-testid="proposalFunding"]');
+        expect(funding.text()).toBe('(proposalOverBudget)');
+    });
+    it('renders young proposals correctly', () => {
+        proposalValidator.reason = reasons.TOO_YOUNG;
+        mount();
+        const status = wrapper.find('[data-testid="proposalStatus"]');
+        expect(status.text()).toBe('proposalFailing');
+        expect(status.classes()).toContain('votesNo');
+        const funding = wrapper.find('[data-testid="proposalFunding"]');
+        expect(funding.text()).toBe('(proposalTooYoung)');
+    });
+
+    it('renders passing proposals correctly', () => {
+        mount();
+        const status = wrapper.find('[data-testid="proposalStatus"]');
+        expect(status.text()).toBe('proposalPassing');
+        expect(status.classes()).toContain('votesYes');
+        const funding = wrapper.find('[data-testid="proposalFunding"]');
+        expect(funding.text()).toBe('(proposalFunded)');
+    });
+    it('renders percentages correctly', () => {
+        mount();
+        // It should be (90 - 30) / 132 = 45.5% approx.
+        expect(wrapper.find('[data-testid="proposalPercentage"]').text()).toBe(
+            '45.5% proposalNetYes'
+        );
+    });
+});
diff --git a/tests/components/governance/ProposalVotes.spec.js b/tests/components/governance/ProposalVotes.spec.js
new file mode 100644
index 000000000..225bf249c
--- /dev/null
+++ b/tests/components/governance/ProposalVotes.spec.js
@@ -0,0 +1,34 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import ProposalVotes from '../../../scripts/governance/ProposalVotes.vue';
+import MobileProposalVotes from '../../../scripts/governance/MobileProposalVotes.vue';
+
+vi.mock('../../../scripts/i18n.js');
+for (const { Component, name } of [
+    { Component: ProposalVotes, name: 'ProposalVotes' },
+    { Component: MobileProposalVotes, name: 'MobileProposalVotes' },
+]) {
+    describe(`${name} component tests`, () => {
+        /**
+         * @type{import('@vue/test-utils').VueWrapper<ProposalVotes>}
+         */
+        let wrapper;
+        beforeEach(() => {
+            wrapper = mount(Component, {
+                props: {
+                    proposal: {
+                        Yeas: 32,
+                        Nays: 54,
+                        Ratio: 32 / (32 + 54),
+                    },
+                },
+            });
+        });
+
+        it('renders correctly', () => {
+            expect(
+                wrapper.find('[data-testid="proposalVotes"]').text()
+            ).toMatch(/37.2%\s*32 \/ 54/);
+        });
+    });
+}
diff --git a/tests/components/masternode/CreateMasternode.spec.js b/tests/components/masternode/CreateMasternode.spec.js
new file mode 100644
index 000000000..eab211311
--- /dev/null
+++ b/tests/components/masternode/CreateMasternode.spec.js
@@ -0,0 +1,117 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import CreateMasternode from '../../../scripts/masternode/CreateMasternode.vue';
+
+vi.mock('../../../scripts/i18n.js');
+
+describe('CreateMasternode component tests', () => {
+    /**
+     * @type{import('@vue/test-utils').VueWrapper<CreateMasternode>}
+     */
+    let wrapper;
+    beforeEach(() => {
+        wrapper = mount(CreateMasternode, {
+            props: {
+                synced: true,
+                balance: 11000,
+                possibleUTXOs: [],
+            },
+        });
+    });
+
+    it('displays correct error when not synced', async () => {
+        await wrapper.setProps({ synced: false });
+        const errorElement = wrapper.find('[data-testid="error"]');
+        expect(errorElement.text()).toBe('MN_UNLOCK_WALLET');
+    });
+
+    it('displays correct error when balance is too low', async () => {
+        await wrapper.setProps({ balance: 9999.99 });
+        const errorElement = wrapper.find('[data-testid="error"]');
+        expect(errorElement.text()).toBe(
+            'MN_NOT_ENOUGH_COLLAT amount 0.01 ticker PIV'
+        );
+        await wrapper.setProps({ balance: 1234 });
+        expect(errorElement.text()).toBe(
+            'MN_NOT_ENOUGH_COLLAT amount 8766.00 ticker PIV'
+        );
+    });
+
+    it('allows tx creation if no utxos are available', async () => {
+        const errorElement = wrapper.find('[data-testid="error"]');
+        expect(errorElement.text()).toHaveLength(0);
+        const createMasternodeButton = wrapper.find(
+            '[data-testid="createMasternodeButton"]'
+        );
+
+        expect(createMasternodeButton.isVisible()).toBe(true);
+        await createMasternodeButton.trigger('click');
+        const createMasternodeModalButton = wrapper.find(
+            '[data-testid="createMasternodeModalButton"]'
+        );
+        const options = wrapper
+            .find('[data-testid="masternodeTypeSelection"]')
+            .findAll('option');
+        // Create a VPS masternode
+        await options.at(0).setSelected();
+        await createMasternodeModalButton.trigger('click');
+
+        // Create a third party masternode
+        await createMasternodeButton.trigger('click');
+        await options.at(1).setSelected();
+        await createMasternodeModalButton.trigger('click');
+
+        expect(wrapper.emitted().createMasternode).toStrictEqual([
+            [{ isVPS: true }],
+            [{ isVPS: false }],
+        ]);
+    });
+
+    it('allows masternode importing when a valid UTXO is present', async () => {
+        await wrapper.setProps({
+            possibleUTXOs: [
+                {
+                    outpoint: {
+                        txid: 'masternodetxid',
+                        n: 3,
+                    },
+                },
+                {
+                    outpoint: {
+                        txid: 'masternodetxid2',
+                        n: 5,
+                    },
+                },
+            ],
+        });
+        const privateKey = wrapper.find('[data-testid="importPrivateKey"]');
+        const ipAddress = wrapper.find('[data-testid="importIpAddress"]');
+        const selectUTXO = wrapper
+            .find('[data-testid="selectUTXO"]')
+            .findAll('option');
+        expect(selectUTXO.map((o) => o.text()).slice(1)).toStrictEqual([
+            'masternodetxid/3',
+            'masternodetxid2/5',
+        ]);
+        await privateKey.setValue('mnprivatekey');
+        await ipAddress.setValue('::1');
+        await selectUTXO.at(2).setSelected();
+
+        const importMasternodeButton = wrapper.find(
+            '[data-testid="importMasternodeButton"]'
+        );
+        await importMasternodeButton.trigger('click');
+        expect(wrapper.emitted().importMasternode).toStrictEqual([
+            [
+                'mnprivatekey',
+                '::1',
+                {
+                    outpoint: {
+                        txid: 'masternodetxid2',
+                        n: 5,
+                    },
+                },
+            ],
+        ]);
+    });
+});
diff --git a/tests/components/masternode/MasternodeController.spec.js b/tests/components/masternode/MasternodeController.spec.js
new file mode 100644
index 000000000..766c7e947
--- /dev/null
+++ b/tests/components/masternode/MasternodeController.spec.js
@@ -0,0 +1,66 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { flushPromises, mount } from '@vue/test-utils';
+import MasternodeController from '../../../scripts/masternode/MasternodeController.vue';
+import { nextTick } from 'vue';
+
+vi.mock('../../../scripts/i18n.js');
+
+describe('MasternodeController component tests', () => {
+    /**
+     * @type{import('@vue/test-utils').VueWrapper<MasternodeController>}
+     */
+    let wrapper;
+    let fullData;
+    let masternode;
+    beforeEach(() => {
+        fullData = {
+            lastseen: 1725009728331,
+            status: 'ENABLED',
+            version: 70926,
+            network: 'ipv6',
+        };
+        masternode = vi.fn();
+        masternode.getFullData = vi.fn().mockReturnValue(fullData);
+        masternode.getStatus = vi.fn().mockReturnValue(fullData.status);
+        masternode.addr = '::1';
+        wrapper = mount(MasternodeController, {
+            props: {
+                masternode,
+            },
+        });
+
+        return vi.clearAllMocks;
+    });
+
+    it('renders data correctly', () => {
+        expect(wrapper.find('[data-testid="mnProtocol"]').text()).toBe('70926');
+        expect(wrapper.find('[data-testid="mnStatus"]').text()).toBe('ENABLED');
+        expect(wrapper.find('[data-testid="mnNetType"]').text()).toBe('IPV6');
+        expect(wrapper.find('[data-testid="mnIp"]').text()).toBe('::1');
+        expect(wrapper.find('[data-testid="mnLastSeen"]').text()).toBe(
+            '9:22:08 AM'
+        );
+    });
+
+    it('emits start when mn goes missing', async () => {
+        fullData.status = 'MISSING';
+        masternode = vi.fn();
+        masternode.getFullData = vi.fn().mockReturnValue(fullData);
+        masternode.getStatus = vi.fn().mockReturnValue(fullData.status);
+        masternode.addr = '::1';
+        await wrapper.setProps({ masternode });
+
+        await flushPromises();
+        expect(wrapper.emitted().start).toStrictEqual([[{ restart: false }]]);
+    });
+
+    it('emits restart event on button click', async () => {
+        await wrapper.find('[data-testid="restartButton"]').trigger('click');
+        expect(wrapper.emitted().start).toStrictEqual([[{ restart: true }]]);
+    });
+
+    it('emits destroy event on button click', async () => {
+        await wrapper.find('[data-testid="destroyButton"]').trigger('click');
+        expect(wrapper.emitted().destroy).toHaveLength(1);
+    });
+});
diff --git a/tests/unit/proposal_validator/dummy_proposals.json b/tests/unit/proposal_validator/dummy_proposals.json
new file mode 100644
index 000000000..861228682
--- /dev/null
+++ b/tests/unit/proposal_validator/dummy_proposals.json
@@ -0,0 +1,555 @@
+[
+    {
+        "Name": "LRP - JSKitty",
+        "URL": "https://forum.pivx.org/threads/lrp-jskitty.2126/",
+        "Hash": "2e9196542a65d0e84ef116f485e48e40cd93b7a90a39d850536c75979f92b809",
+        "FeeHash": "0b7be6b9df8b65565423a5878d2b4c62830f907d3798c976be340cf55e13d65a",
+        "BlockStart": 4449600,
+        "BlockEnd": 4579203,
+        "TotalPaymentCount": 3,
+        "RemainingPaymentCount": 0,
+        "PaymentAddress": "DFiH7DpxYahn5Y6p91oYwRDUqCsS9PaVGu",
+        "Ratio": 1,
+        "Yeas": 868,
+        "Nays": 0,
+        "Abstains": 0,
+        "TotalPayment": 45000,
+        "MonthlyPayment": 15000,
+        "IsEstablished": true,
+        "IsValid": true,
+        "Allotted": 15000,
+        "valid": true
+    },
+    {
+        "Name": "LRP - Labs Infra",
+        "URL": "https://forum.pivx.org/threads/lrp-labs-infra.2129/",
+        "Hash": "ddd5dd8a0f63b066ab3feadd8d50b29daffb2b27b569831aa21ee75ea928c7a3",
+        "FeeHash": "e869fecb384221161318fda9fcb784bf54bc09857bebe3fa88b5f66546f7a2f4",
+        "BlockStart": 4449600,
+        "BlockEnd": 4579203,
+        "TotalPaymentCount": 3,
+        "RemainingPaymentCount": 0,
+        "PaymentAddress": "DLabsktzGMnsK5K9uRTMCF6NoYNY6ET4Bb",
+        "Ratio": 0.9988304093567252,
+        "Yeas": 854,
+        "Nays": 1,
+        "Abstains": 0,
+        "TotalPayment": 6600,
+        "MonthlyPayment": 2200,
+        "IsEstablished": true,
+        "IsValid": true,
+        "Allotted": 2200,
+        "valid": true
+    },
+    {
+        "Name": "Young proposal",
+        "URL": "https://needtobe18todrink.com",
+        "Hash": "ddd5dd8a0f63b066ab3feadd8d50b29daffb2b27b569831aa21ee75ea928c7a3",
+        "FeeHash": "e869fecb384221161318fda9fcb784bf54bc09857bebe3fa88b5f66546f7a2f4",
+        "BlockStart": 4449600,
+        "BlockEnd": 4579203,
+        "TotalPaymentCount": 3,
+        "RemainingPaymentCount": 0,
+        "PaymentAddress": "DLabsktzGMnsK5K9uRTMCF6NoYNY6ET4Bb",
+        "Ratio": 0.9988304093567252,
+        "Yeas": 854,
+        "Nays": 1,
+        "Abstains": 0,
+        "TotalPayment": 6600,
+        "MonthlyPayment": 2200,
+        "IsEstablished": false,
+        "IsValid": true,
+        "Allotted": 2200,
+        "valid": false,
+        "reason": 1
+    },
+    {
+        "Name": "Greedy",
+        "URL": "https://greedneverends.com",
+        "Hash": "ddd5dd8a0f63b066ab3feadd8d50b29daffb2b27b569831aa21ee75ea928c7a3",
+        "FeeHash": "e869fecb384221161318fda9fcb784bf54bc09857bebe3fa88b5f66546f7a2f4",
+        "BlockStart": 4449600,
+        "BlockEnd": 4579203,
+        "TotalPaymentCount": 3,
+        "RemainingPaymentCount": 0,
+        "PaymentAddress": "DLabsktzGMnsK5K9uRTMCF6NoYNY6ET4Bb",
+        "Ratio": 0.9988304093567252,
+        "Yeas": 854,
+        "Nays": 1,
+        "Abstains": 0,
+        "TotalPayment": 6600,
+        "MonthlyPayment": 22000000000,
+        "IsEstablished": true,
+        "IsValid": true,
+        "Allotted": 2200,
+        "valid": false,
+        "reason": 2
+    },
+    {
+        "Name": "LRP - Luke",
+        "URL": "https://forum.pivx.org/threads/lrp-luke.2181/",
+        "Hash": "624e886a45f536385633c0bb93ae578c1054bf8cbbe800aab8d149d4d84e993b",
+        "FeeHash": "7e717c8608a9d640dd5b595a06ccc7f6a86decb6c6617733d965c4818a15c442",
+        "BlockStart": 4492800,
+        "BlockEnd": 4622403,
+        "TotalPaymentCount": 3,
+        "RemainingPaymentCount": 1,
+        "PaymentAddress": "DNkAdmxHiGvYvMV3Cvtb4FFYhJMUTc8oR2",
+        "Ratio": 1,
+        "Yeas": 826,
+        "Nays": 0,
+        "Abstains": 0,
+        "TotalPayment": 60000,
+        "MonthlyPayment": 20000,
+        "IsEstablished": true,
+        "IsValid": true,
+        "Allotted": 20000,
+        "valid": true
+    },
+    {
+        "Name": "LRP - Web Developer",
+        "URL": "https://forum.pivx.org/threads/lrp-web-developer.2185/",
+        "Hash": "beb64db7e80aacc561754cc93cfa9e04fe7eccf387b24cf8133847339488766a",
+        "FeeHash": "b8c094a484e7d549a724652361fd0b97637b9ecca1b82a9c9fca252ed2cc9e93",
+        "BlockStart": 4492800,
+        "BlockEnd": 4622403,
+        "TotalPaymentCount": 3,
+        "RemainingPaymentCount": 1,
+        "PaymentAddress": "DDS5v6mPqUN3rdzkp3268LV7TKjHCZqy8c",
+        "Ratio": 1,
+        "Yeas": 825,
+        "Nays": 0,
+        "Abstains": 0,
+        "TotalPayment": 52500,
+        "MonthlyPayment": 17500,
+        "IsEstablished": true,
+        "IsValid": true,
+        "Allotted": 17500,
+        "valid": true
+    },
+    {
+        "Name": "PIVX-Turkish-Jun24",
+        "URL": "https://forum.pivx.org/threads/pivx-turkey-promotion-work.1970/",
+        "Hash": "45dd2ad597751ff2e7f10ddf09546ac8d6f6188e4c6242fb52ffcd875c4406df",
+        "FeeHash": "838a2a3edd639d3c8f457faf828778409ce34d15217c8cb898a6e170ff05a35d",
+        "BlockStart": 4449600,
+        "BlockEnd": 4579203,
+        "TotalPaymentCount": 3,
+        "RemainingPaymentCount": 0,
+        "PaymentAddress": "D5Av2FN6jmmpiFvbYxDNhDx4wUg9onbQWt",
+        "Ratio": 0.983510011778563,
+        "Yeas": 835,
+        "Nays": 14,
+        "Abstains": 0,
+        "TotalPayment": 9600,
+        "MonthlyPayment": 3200,
+        "IsEstablished": true,
+        "IsValid": true,
+        "Allotted": 3200,
+        "valid": true
+    },
+    {
+        "Name": "BusinessDev06",
+        "URL": "https://forum.pivx.org/threads/lobd3-jeffrey.2170/",
+        "Hash": "20a356497b1da74018cd727c8fb4841423473356f097e43c5343376684f29163",
+        "FeeHash": "1fb7681c100b7a29b3c7a59c2feb0ac7dee63b4f2b9b33b22eff87a8be6bdfab",
+        "BlockStart": 4492800,
+        "BlockEnd": 4622403,
+        "TotalPaymentCount": 3,
+        "RemainingPaymentCount": 1,
+        "PaymentAddress": "DHfMc81XkPwkF11vW1hhhFLNPqgBBp87BL",
+        "Ratio": 0.9975669099756691,
+        "Yeas": 820,
+        "Nays": 2,
+        "Abstains": 0,
+        "TotalPayment": 90000,
+        "MonthlyPayment": 30000,
+        "IsEstablished": true,
+        "IsValid": true,
+        "Allotted": 30000,
+        "valid": true
+    },
+    {
+        "Name": "MKT-Leander-Aug-oct",
+        "URL": "https://forum.pivx.org/threads/mkt-leander-aug-oct.2173/",
+        "Hash": "9f3ab51c484bab24c706b10563ddb20c788db837226f15acd3d2f47df7bbaa67",
+        "FeeHash": "0b9a23d1bdf38cfc06e003a3379ce378748354d091f2ff898ee430384fab4fc1",
+        "BlockStart": 4492800,
+        "BlockEnd": 4622403,
+        "TotalPaymentCount": 3,
+        "RemainingPaymentCount": 1,
+        "PaymentAddress": "DPiVXPykDKQi3PLVbcfekKMXv1E1o3FxtA",
+        "Ratio": 0.9975550122249389,
+        "Yeas": 816,
+        "Nays": 2,
+        "Abstains": 0,
+        "TotalPayment": 30000,
+        "MonthlyPayment": 10000,
+        "IsEstablished": true,
+        "IsValid": true,
+        "Allotted": 10000,
+        "valid": true
+    },
+    {
+        "Name": "Labs x Cryptech",
+        "URL": "https://forum.pivx.org/threads/labs-x-cryptech-partnership.2258/",
+        "Hash": "9cf7068fdf547dd0e623d0d6de47fd389f283dbdb52fa8d411f8d3593c666a8a",
+        "FeeHash": "c1d75c2f0c37d024a152561757d6431303cf02739798b5217a2065ed8c1c1ac4",
+        "BlockStart": 4536000,
+        "BlockEnd": 4579201,
+        "TotalPaymentCount": 1,
+        "RemainingPaymentCount": 0,
+        "PaymentAddress": "DLabsktzGMnsK5K9uRTMCF6NoYNY6ET4Bb",
+        "Ratio": 1,
+        "Yeas": 807,
+        "Nays": 0,
+        "Abstains": 0,
+        "TotalPayment": 7500,
+        "MonthlyPayment": 7500,
+        "IsEstablished": true,
+        "IsValid": true,
+        "Allotted": 7500,
+        "valid": true
+    },
+    {
+        "Name": "LRP - Duddino",
+        "URL": "https://forum.pivx.org/threads/lrp-duddino.2267/",
+        "Hash": "727f5b9ac1d08be65e7cd92f93d0c11f0cc30fba98f1287eccf66c8793523b25",
+        "FeeHash": "ccf0ecd3d41443be58e9037c08e2f8bfa71698de7eae77b739441963bd0649c0",
+        "BlockStart": 4536000,
+        "BlockEnd": 4665603,
+        "TotalPaymentCount": 3,
+        "RemainingPaymentCount": 2,
+        "PaymentAddress": "DShxa9sykpVUYBe2VKZfq9dzE8f2yBbtmg",
+        "Ratio": 1,
+        "Yeas": 805,
+        "Nays": 0,
+        "Abstains": 0,
+        "TotalPayment": 90000,
+        "MonthlyPayment": 30000,
+        "IsEstablished": true,
+        "IsValid": true,
+        "Allotted": 30000,
+        "valid": true
+    },
+    {
+        "Name": "PIVXxArmada1",
+        "URL": "https://forum.pivx.org/threads/pivx-x-armada-marketmaking.2261/",
+        "Hash": "76e6d2e760a38ac07136e9fa954fd96f0bb57d79218117ad92ef006cf06e8f3b",
+        "FeeHash": "2fc558ce11226755eb9379a7217c3cd2e0839ff288d7693fe047747ad4d06fb8",
+        "BlockStart": 4536000,
+        "BlockEnd": 4579201,
+        "TotalPaymentCount": 1,
+        "RemainingPaymentCount": 0,
+        "PaymentAddress": "DMZYkebbyAX6YVEwd92w79QRarzUZfcWN8",
+        "Ratio": 0.9925093632958801,
+        "Yeas": 795,
+        "Nays": 6,
+        "Abstains": 0,
+        "TotalPayment": 160100,
+        "MonthlyPayment": 160100,
+        "IsEstablished": true,
+        "IsValid": true,
+        "Allotted": 160100,
+        "valid": true
+    },
+    {
+        "Name": "rigden bastyon s 005",
+        "URL": "https://forum.pivx.org/threads/rigden-bastyon-s-005.2176/",
+        "Hash": "d847802a536b6fe94ab092fec5d226a6da63c2fb67cef6b818d8def044d7831b",
+        "FeeHash": "9e7253369c689cf038146b0923af0c2cf05f02d13468b5780faa32a3ee70ac15",
+        "BlockStart": 4492800,
+        "BlockEnd": 4579202,
+        "TotalPaymentCount": 2,
+        "RemainingPaymentCount": 0,
+        "PaymentAddress": "D9i9e44gQhoto8wKxtfCpiyPSDgaMycXYK",
+        "Ratio": 0.9694656488549618,
+        "Yeas": 762,
+        "Nays": 24,
+        "Abstains": 0,
+        "TotalPayment": 6100,
+        "MonthlyPayment": 3050,
+        "IsEstablished": true,
+        "IsValid": true,
+        "Allotted": 3050,
+        "valid": true
+    },
+    {
+        "Name": "CSJune24",
+        "URL": "https://forum.pivx.org/threads/content-strategist.2143/",
+        "Hash": "2e6138acc85de01f2692387af0eaeb9d6f34d72c067260f29f08464688c62f92",
+        "FeeHash": "a713cf8f916908ea85200348947623a53062590787479aadd66b909fc30610e7",
+        "BlockStart": 4449600,
+        "BlockEnd": 4579203,
+        "TotalPaymentCount": 3,
+        "RemainingPaymentCount": 0,
+        "PaymentAddress": "D7BAAZFABG1CgYQ8ykfhtDqbumt8M9hZes",
+        "Ratio": 0.7780320366132724,
+        "Yeas": 680,
+        "Nays": 194,
+        "Abstains": 0,
+        "TotalPayment": 16893,
+        "MonthlyPayment": 5631,
+        "IsEstablished": true,
+        "IsValid": true,
+        "Allotted": 5631,
+        "valid": true
+    },
+    {
+        "Name": "PIVX-Spanish-Jun24",
+        "URL": "http://bit.ly/4c07hc9",
+        "Hash": "cbb60c7d114f58ea09de58f1a8b55e1950a2f8ff436a7fbb29b0113b795d991d",
+        "FeeHash": "a953aa86b560299f0f762e40f697ab2bc2f78581318da768873bbc7527d32f02",
+        "BlockStart": 4449600,
+        "BlockEnd": 4579203,
+        "TotalPaymentCount": 3,
+        "RemainingPaymentCount": 0,
+        "PaymentAddress": "DLXRPKz2Y4oPihGhALSK9LuSBzFBqXP5eM",
+        "Ratio": 0.7733644859813084,
+        "Yeas": 662,
+        "Nays": 194,
+        "Abstains": 0,
+        "TotalPayment": 9000,
+        "MonthlyPayment": 3000,
+        "IsEstablished": true,
+        "IsValid": true,
+        "Allotted": 3000,
+        "valid": true
+    },
+    {
+        "Name": "LRP - Meerkat",
+        "URL": "https://forum.pivx.org/threads/lrp-meerkat.2244/",
+        "Hash": "43e9a0488cd6aded1e546622e8264586f780bc320088b88a50f1a7c56a7e17d6",
+        "FeeHash": "8e08a57e87105f50baa3f6e2de2cb66a6a5a2e9072f6533abc0b16921b83d216",
+        "BlockStart": 4536000,
+        "BlockEnd": 4665603,
+        "TotalPaymentCount": 3,
+        "RemainingPaymentCount": 2,
+        "PaymentAddress": "DBaWgpEKnV8Gr7CNFBWwjAJZqK3irdZkUM",
+        "Ratio": 0.7619631901840491,
+        "Yeas": 621,
+        "Nays": 194,
+        "Abstains": 0,
+        "TotalPayment": 60000,
+        "MonthlyPayment": 20000,
+        "IsEstablished": true,
+        "IsValid": true,
+        "Allotted": 20000,
+        "valid": true
+    },
+    {
+        "Name": "LRP - Rushali",
+        "URL": "https://forum.pivx.org/threads/lrp-rushali.2274/",
+        "Hash": "c7c48583b860a587a22d96d9ca97ad9a3a3485e75e342d3c3ba76aa22a647c3a",
+        "FeeHash": "b9847c8aaff341a431c9980ebd4242870fbe032aa118d7d85a5f7ead9e3d2c0d",
+        "BlockStart": 4536000,
+        "BlockEnd": 4665603,
+        "TotalPaymentCount": 3,
+        "RemainingPaymentCount": 2,
+        "PaymentAddress": "DQHajggqx1XXZPWuchWBB5jS4pmiT3LNJN",
+        "Ratio": 0.7593052109181141,
+        "Yeas": 612,
+        "Nays": 194,
+        "Abstains": 0,
+        "TotalPayment": 37500,
+        "MonthlyPayment": 12500,
+        "IsEstablished": true,
+        "IsValid": true,
+        "Allotted": 12500,
+        "valid": true
+    },
+    {
+        "Name": "Marketing-RedByrd",
+        "URL": "https://forum.pivx.org/threads/redbyrd-proposal.2262/",
+        "Hash": "f15819fdc70a486c78f692c233058ec0700e50efb51ba84f8939d02669dc938a",
+        "FeeHash": "6156e67c38fee8f5b72cc465283083664385a5e10017b40b1b7bd2f4838c3370",
+        "BlockStart": 4536000,
+        "BlockEnd": 4579201,
+        "TotalPaymentCount": 1,
+        "RemainingPaymentCount": 0,
+        "PaymentAddress": "D5zWMZAdJo5ssPHD3KFKmPVRvXBZiegCri",
+        "Ratio": 0.758364312267658,
+        "Yeas": 612,
+        "Nays": 195,
+        "Abstains": 0,
+        "TotalPayment": 21052,
+        "MonthlyPayment": 21052,
+        "IsEstablished": true,
+        "IsValid": true,
+        "Allotted": 21052,
+        "valid": true
+    },
+    {
+        "Name": "Liquid369-Aug-Oct24",
+        "URL": "https://bit.ly/4crOCVZ",
+        "Hash": "55f737cb493bb1db985dcd74ee18799ad17b95ec8b51a53858d138c863098f06",
+        "FeeHash": "60afeaa98ff2d8f13a8032d46e802e18ba53d99551ad61d193723b480741eaea",
+        "BlockStart": 4536000,
+        "BlockEnd": 4665603,
+        "TotalPaymentCount": 3,
+        "RemainingPaymentCount": 2,
+        "PaymentAddress": "D66LAo1cQmKJ3JoqeuSRrTL6hycLx7kKso",
+        "Ratio": 0.7568238213399504,
+        "Yeas": 610,
+        "Nays": 196,
+        "Abstains": 0,
+        "TotalPayment": 90000,
+        "MonthlyPayment": 30000,
+        "IsEstablished": true,
+        "IsValid": true,
+        "Allotted": 30000,
+        "valid": true
+    },
+    {
+        "Name": "Marketing-Hawtch",
+        "URL": "https://forum.pivx.org/threads/marketing-hawtch.2256/",
+        "Hash": "160144845b119cf06804e403034c4ee3e9386ef46ee93401a6ca92b275adff38",
+        "FeeHash": "4deb8b70a36d897e021b636026816bd7ddedb01b94da98d74e74403a1b869e37",
+        "BlockStart": 4536000,
+        "BlockEnd": 4579201,
+        "TotalPaymentCount": 1,
+        "RemainingPaymentCount": 0,
+        "PaymentAddress": "D5hLZRKeqeoxSw1N4hTgXMFerDh2XBAB5H",
+        "Ratio": 0.7558859975216853,
+        "Yeas": 610,
+        "Nays": 197,
+        "Abstains": 0,
+        "TotalPayment": 22200,
+        "MonthlyPayment": 22200,
+        "IsEstablished": true,
+        "IsValid": true,
+        "Allotted": 22200,
+        "valid": true
+    },
+    {
+        "Name": "CoreDevOps-Fuzz-Q324",
+        "URL": "https://bit.ly/3S3L3hj",
+        "Hash": "26d42146866d8fa3875739b22fc22e2318df3d3c81d28c5545f651624170796e",
+        "FeeHash": "2adc33692e3843b37a05741040d1c139baa5fb040e9ecca8944339fd6c60a4e2",
+        "BlockStart": 4492800,
+        "BlockEnd": 4622403,
+        "TotalPaymentCount": 3,
+        "RemainingPaymentCount": 1,
+        "PaymentAddress": "DBh9o9uRGohcDKpeiEyRiwtmTaTL3xDdev",
+        "Ratio": 0.6473317865429234,
+        "Yeas": 558,
+        "Nays": 304,
+        "Abstains": 0,
+        "TotalPayment": 45000,
+        "MonthlyPayment": 15000,
+        "IsEstablished": true,
+        "IsValid": true,
+        "Allotted": 15000,
+        "valid": true
+    },
+    {
+        "Name": "PIVX-Spanish-Boost24",
+        "URL": "https://bit.ly/3VuLa7P",
+        "Hash": "1b3bba7407941584f9ddd854f98efdab0ca3135e02faf41a9bad2514b2d4de2f",
+        "FeeHash": "1d89c7fa90a81569fa5b3528e8e3053f7f5ba70f40ac25c4cbfffe9bfeefb14d",
+        "BlockStart": 4449600,
+        "BlockEnd": 4579203,
+        "TotalPaymentCount": 3,
+        "RemainingPaymentCount": 0,
+        "PaymentAddress": "DF7V8BsfUT4qHbqC9vQ6so9KS4618P6c35",
+        "Ratio": 0.5729411764705883,
+        "Yeas": 487,
+        "Nays": 363,
+        "Abstains": 0,
+        "TotalPayment": 12000,
+        "MonthlyPayment": 4000,
+        "IsEstablished": true,
+        "IsValid": true,
+        "Allotted": 0,
+        "valid": false,
+        "reason": 0
+    },
+    {
+        "Name": "PivxAmbassadorProgrm",
+        "URL": "https://l24.im/0PgVB",
+        "Hash": "ca5f5193d12d881016eb02792f78c8b056772ab5c6237c7d7b09c153f5437e38",
+        "FeeHash": "44bcf8492022e7df1dd73e7cdf2fb616eeb20d4729e0e49347bdb7662bed90a6",
+        "BlockStart": 4492800,
+        "BlockEnd": 4622403,
+        "TotalPaymentCount": 3,
+        "RemainingPaymentCount": 1,
+        "PaymentAddress": "DPSsJgQiuLnx2Vkk9C4Kqp8aC6a7CXfDph",
+        "Ratio": 0.5345238095238095,
+        "Yeas": 449,
+        "Nays": 391,
+        "Abstains": 0,
+        "TotalPayment": 72171,
+        "MonthlyPayment": 24057,
+        "IsEstablished": true,
+        "IsValid": true,
+        "Allotted": 0,
+        "valid": false,
+        "reason": 0
+    },
+    {
+        "Name": "TurkeyMarketingCamp",
+        "URL": "https://l24.im/pxHY7",
+        "Hash": "cbc76960343537913443361eab6737975df9ab4b7aa4a0169c26f85087b77313",
+        "FeeHash": "09f18b8dc5790367a1f032fd8243e1b9646ef922accdbeda2cacb1b1855a4f48",
+        "BlockStart": 4536000,
+        "BlockEnd": 4579201,
+        "TotalPaymentCount": 1,
+        "RemainingPaymentCount": 0,
+        "PaymentAddress": "DCBVNBCBsVW5p21q4Jqo7Aq66JAu45vm8D",
+        "Ratio": 0.0379746835443038,
+        "Yeas": 6,
+        "Nays": 152,
+        "Abstains": 0,
+        "TotalPayment": 3800,
+        "MonthlyPayment": 3800,
+        "IsEstablished": true,
+        "IsValid": true,
+        "Allotted": 0,
+        "valid": false,
+        "reason": 0
+    },
+    {
+        "Name": "PIVX.poker",
+        "URL": "https://forum.pivx.org/threads/pivx-poker-supplementz.2024/",
+        "Hash": "07a8366a6ef49d372877d2f12b5e9d39d5ec6937290b022c3268b04e497492c7",
+        "FeeHash": "9fc5cf508f3cbf020a4b2c72c9bda3af07eb9208564c78daa049d871419e83d8",
+        "BlockStart": 4363200,
+        "BlockEnd": 4622406,
+        "TotalPaymentCount": 6,
+        "RemainingPaymentCount": 1,
+        "PaymentAddress": "DTCbXC1pvfYLPZLTfYoJwbXQowPMYodt2u",
+        "Ratio": 0.2908458864426419,
+        "Yeas": 251,
+        "Nays": 612,
+        "Abstains": 0,
+        "TotalPayment": 30000,
+        "MonthlyPayment": 5000,
+        "IsEstablished": true,
+        "IsValid": true,
+        "Allotted": 0,
+        "valid": false,
+        "reason": 0
+    },
+    {
+        "Name": "nnmfnwl7 dexsetup 01",
+        "URL": "https://forum.pivx.org/threads/nnmfnwl7-dexsetup-001.2199/",
+        "Hash": "1d92f6d0593fff8dcbfe6ddd2da3709964cff14411af96c7b8852393a045b365",
+        "FeeHash": "09e3e75f97122bbd0b68e4eb41a6448c3ce15ccfd6f1cca65a4519dad688d594",
+        "BlockStart": 4492800,
+        "BlockEnd": 4622403,
+        "TotalPaymentCount": 3,
+        "RemainingPaymentCount": 1,
+        "PaymentAddress": "DE6KsnGuNGbdN7BcLJusybkEbjHzEn3RL6",
+        "Ratio": 0.01988071570576541,
+        "Yeas": 10,
+        "Nays": 493,
+        "Abstains": 0,
+        "TotalPayment": 27000,
+        "MonthlyPayment": 9000,
+        "IsEstablished": true,
+        "IsValid": true,
+        "Allotted": 0,
+        "valid": false,
+        "reason": 0
+    }
+]
diff --git a/tests/unit/proposal_validator/proposal_validator.spec.js b/tests/unit/proposal_validator/proposal_validator.spec.js
new file mode 100644
index 000000000..abf740014
--- /dev/null
+++ b/tests/unit/proposal_validator/proposal_validator.spec.js
@@ -0,0 +1,14 @@
+import { describe, it, expect } from 'vitest';
+import { ProposalValidator } from '../../../scripts/governance/status';
+import proposals from './dummy_proposals.json';
+
+describe('Proposal validator tests', () => {
+    it('correctly validates proposals', () => {
+        const proposalValidator = new ProposalValidator(2000);
+        for (const proposal of proposals) {
+            const { passing, reason } = proposalValidator.validate(proposal);
+            expect(passing).toBe(proposal.valid);
+            expect(reason).toBe(proposal.reason);
+        }
+    });
+});

From cd0e080b2b5346c79db4306553156a3b20d018a4 Mon Sep 17 00:00:00 2001
From: Alessandro Rezzi <alessandrorezzi2000@gmail.com>
Date: Mon, 2 Dec 2024 10:21:27 +0100
Subject: [PATCH 2/2] test: Increase the legacy mainnet wallet balance (#478)

---
 scripts/network/__mocks__/network_manager.js |  5 +++-
 tests/unit/wallet/transactions.spec.js       | 30 +++++++++++---------
 tests/utils/test_utils.js                    |  6 +++-
 3 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/scripts/network/__mocks__/network_manager.js b/scripts/network/__mocks__/network_manager.js
index f5c7f6d98..293d5f43d 100644
--- a/scripts/network/__mocks__/network_manager.js
+++ b/scripts/network/__mocks__/network_manager.js
@@ -45,7 +45,10 @@ class TestNetwork {
             // tx_1 provides a spendable balance of 0.1 * 10^8 satoshi
             const tx_1 =
                 '010000000138f9c8ac1b4c6ad54e487206daad1fd12bae510dd70fbd2dc928f617ef6b4a47010000006a47304402200d01891ac5dc6d25452cadbe7ba7edd98143631cc2922da45dde94919593b222022066ef14c01c165a1530e2acf74bcd8648d7151b555fa0bfd0222c33e983091678012102033a004cb71693e809c45e1e491bc797654fa0c012be9dd46401ce8368beb705ffffffff02d02c5d05000000001976a91463fa54dad2e215ec21c54ff45a195d49b570b97988ac80969800000000001976a914f49b25384b79685227be5418f779b98a6be4c73888ac00000000';
-            return [Transaction.fromHex(tx_1)];
+            // tx_2 provides a spendable balance of 10000 PIVs
+            const tx_2 =
+                '010000000198bb641ffb74cf14e4f3e3c329fa7f97d605ca1b89d2c61a1e6d728da49342e2020000006a4730440220437d04f65dbc1e23cab38c1a6d2d2b4905ccfdea9d6e33429af8d58d3a689f41022039830fcae7545d8b5964b7c078b3d158e72e01642d274f9c3b38639d3ed292b9012103109bab9e66c51cb5da0dcc200fa7a336b8a3890489026ba7bbdf8ad379cf0251ffffffff020010a5d4e80000001976a914f49b25384b79685227be5418f779b98a6be4c73888ac228ff73e5d0100001976a914f8e77779f1787490e1459f4bde3afde5c057f6f888ac00000000';
+            return [Transaction.fromHex(tx_2), Transaction.fromHex(tx_1)];
         } else if (
             addr ===
             'xpub6DVaPT3irDwUth7Y6Ff137FgA9jjvsmA2CHD7g2vjvvuMiNSUJRs9F8jSoPpXpc1s7ohR93dNAuzR5T2oPZFDTn7G2mHKYtpwtk7krNZmnV'
diff --git a/tests/unit/wallet/transactions.spec.js b/tests/unit/wallet/transactions.spec.js
index 338926cf6..2b2d0673d 100644
--- a/tests/unit/wallet/transactions.spec.js
+++ b/tests/unit/wallet/transactions.spec.js
@@ -1,6 +1,9 @@
 import { Wallet } from '../../../scripts/wallet.js';
 import { Mempool } from '../../../scripts/mempool.js';
-import { setUpLegacyMainnetWallet } from '../../utils/test_utils';
+import {
+    legacyMainnetInitialBalance,
+    setUpLegacyMainnetWallet,
+} from '../../utils/test_utils';
 import { describe, it, vi, afterAll, expect } from 'vitest';
 import {
     COutpoint,
@@ -34,6 +37,7 @@ async function checkFees(wallet, tx, feesPerBytes) {
     const nBytes = (await wallet.sign(tx)).serialize().length / 2;
     expect(fees).toBeGreaterThanOrEqual(feesPerBytes * nBytes);
     expect(fees).toBeLessThanOrEqual((feesPerBytes + 1) * nBytes);
+    return fees;
 }
 describe('Wallet transaction tests', () => {
     let wallet;
@@ -198,11 +202,11 @@ describe('Wallet transaction tests', () => {
     it('creates a tx with max balance', async () => {
         const tx = wallet.createTransaction(
             'SR3L4TFUKKGNsnv2Q4hWTuET2a4vHpm1b9',
-            0.1 * 10 ** 8,
+            legacyMainnetInitialBalance(),
             { isDelegation: true }
         );
         expect(tx.version).toBe(1);
-        expect(tx.vin).toHaveLength(1);
+        expect(tx.vin).toHaveLength(2);
         expect(tx.vin[0]).toStrictEqual(
             new CTxIn({
                 outpoint: new COutpoint({
@@ -213,13 +217,13 @@ describe('Wallet transaction tests', () => {
             })
         );
         expect(tx.vout).toHaveLength(1);
+        const fees = await checkFees(wallet, tx, MIN_FEE_PER_BYTE);
         expect(tx.vout[0]).toStrictEqual(
             new CTxOut({
                 script: '76a97b63d114291a25b5b4d1802e0611e9bf724a1e57d9210e826714f49b25384b79685227be5418f779b98a6be4c7386888ac',
-                value: 9997810, // 0.1 PIV - fee
+                value: legacyMainnetInitialBalance() - fees,
             })
         );
-        await checkFees(wallet, tx, MIN_FEE_PER_BYTE);
     });
 
     it('creates a t->s tx correctly', () => {
@@ -251,16 +255,15 @@ describe('Wallet transaction tests', () => {
 
     it('it does not insert dust change', async () => {
         // The tipical output has 34 bytes, so a 200 satoshi change is surely going to be dust
-        // a P2PKH with 1 input and 1 output will have more or less 190 bytes in size and 1900 satoshi of fees
-        // Finally 0.1*10**8 is the value of the UTXO we are spending (0.1 PIVs)
-        const value = 0.1 * 10 ** 8 - 1900 - 200;
+        // a P2PKH with 2 inputs and 1 output will have more or less 346 bytes in size and 3460 satoshi of fees
+        const value = legacyMainnetInitialBalance() - 3460 - 200;
         const tx = wallet.createTransaction(
             'DLabsktzGMnsK5K9uRTMCF6NoYNY6ET4Bb',
             value,
             { subtractFeeFromAmt: false }
         );
         expect(tx.version).toBe(1);
-        expect(tx.vin).toHaveLength(1);
+        expect(tx.vin).toHaveLength(2);
         expect(tx.vin[0]).toStrictEqual(
             new CTxIn({
                 outpoint: new COutpoint({
@@ -319,23 +322,24 @@ describe('Wallet transaction tests', () => {
     });
 
     it('throws when balance is insufficient', () => {
+        const value = legacyMainnetInitialBalance() + 1;
         expect(() =>
             wallet.createTransaction(
                 'SR3L4TFUKKGNsnv2Q4hWTuET2a4vHpm1b9',
-                20 * 10 ** 8,
+                value,
                 { isDelegation: true }
             )
         ).toThrow(/not enough balance/i);
         expect(() =>
             wallet.createTransaction(
                 'DLabsktzGMnsK5K9uRTMCF6NoYNY6ET4Bb',
-                20 * 10 ** 8
+                value
             )
         ).toThrow(/not enough balance/i);
         expect(() =>
             wallet.createTransaction(
                 'DLabsktzGMnsK5K9uRTMCF6NoYNY6ET4Bb',
-                50 * 10 ** 8,
+                value,
                 { useShieldInputs: true }
             )
         ).toThrow(/not enough balance/i);
@@ -352,7 +356,7 @@ describe('Wallet transaction tests', () => {
         expect(() =>
             wallet.createTransaction(
                 'DLabsktzGMnsK5K9uRTMCF6NoYNY6ET4Bb',
-                0.1 * 10 ** 8,
+                legacyMainnetInitialBalance(),
                 { subtractFeeFromAmt: false }
             )
         ).toThrow(/not enough balance/i);
diff --git a/tests/utils/test_utils.js b/tests/utils/test_utils.js
index 7667fb532..f3be196cd 100644
--- a/tests/utils/test_utils.js
+++ b/tests/utils/test_utils.js
@@ -50,6 +50,10 @@ async function setUpWallet(masterKey, includeShield) {
     expect(wallet.isSyncing).toBeFalsy();
     return wallet;
 }
+
+export function legacyMainnetInitialBalance() {
+    return 10 ** 7 + 10 ** 12;
+}
 /**
  * Creates a mainnet wallet with a legacy master key and a spendable UTXO and a dummy PIVXShield
  * @returns {Promise<Wallet>}
@@ -59,7 +63,7 @@ export async function setUpLegacyMainnetWallet() {
     const wallet = await setUpWallet(getLegacyMainnet(), true);
 
     // sanity check on the balance
-    expect(wallet.balance).toBe(0.1 * 10 ** 8);
+    expect(wallet.balance).toBe(legacyMainnetInitialBalance());
     expect(wallet.coldBalance).toBe(0);
     expect(wallet.immatureBalance).toBe(0);