Proposal confirmation screen

locale/cnr/translation.toml

@@ -220,6 +220,8 @@ formValidationAddress = "" # The address provided is invalid
 formValidationMin = "" # The minimum value is: {value}
 formValidationMax = "" # The maximum value is: {value}
 formValidationInvalidNumber = "" # Invalid Number
+proposalTotal = "" # For a total of
+proposalConfirm = "" # Confirm your proposal
 
 [ALERTS]
 INTERNAL_ERROR = "Interna greška, molimo pokušajte ponovo kasnije" # Internal error, please try again later

locale/de/translation.toml

@@ -220,6 +220,8 @@ formValidationAddress = "" # The address provided is invalid
 formValidationMin = "" # The minimum value is: {value}
 formValidationMax = "" # The maximum value is: {value}
 formValidationInvalidNumber = "" # Invalid Number
+proposalTotal = "" # For a total of
+proposalConfirm = "" # Confirm your proposal
 
 [ALERTS]
 INTERNAL_ERROR = "Interner Fehler, bitte versuche es später erneut" # Internal error, please try again later

locale/en/translation.toml

@@ -220,6 +220,8 @@ formValidationAddress = "The address provided is invalid" # The address provided
 formValidationMin = "The minimum value is: {value}" # The minimum value is: {value}
 formValidationMax = "The maximum value is: {value}" # The maximum value is: {value}
 formValidationInvalidNumber = "Invalid Number" # Invalid Number
+proposalTotal = "For a total of" # For a total of
+proposalConfirm = "Confirm your proposal" # Confirm your proposal
 
 [ALERTS]
 INTERNAL_ERROR = "Internal error, please try again later" # Internal error, please try again later

locale/es-mx/translation.toml

@@ -220,6 +220,8 @@ formValidationAddress = "" # The address provided is invalid
 formValidationMin = "" # The minimum value is: {value}
 formValidationMax = "" # The maximum value is: {value}
 formValidationInvalidNumber = "" # Invalid Number
+proposalTotal = "" # For a total of
+proposalConfirm = "" # Confirm your proposal
 
 [ALERTS]
 INTERNAL_ERROR = "Error interno, vuelve a intentarlo más tarde" # Internal error, please try again later

locale/fr/translation.toml

@@ -220,6 +220,8 @@ formValidationAddress = "" # The address provided is invalid
 formValidationMin = "" # The minimum value is: {value}
 formValidationMax = "" # The maximum value is: {value}
 formValidationInvalidNumber = "" # Invalid Number
+proposalTotal = "" # For a total of
+proposalConfirm = "" # Confirm your proposal
 
 [ALERTS]
 INTERNAL_ERROR = "Erreur interne, veuillez réessayer plus tard" # Internal error, please try again later

locale/hi/translation.toml

@@ -220,6 +220,8 @@ formValidationAddress = "" # The address provided is invalid
 formValidationMin = "" # The minimum value is: {value}
 formValidationMax = "" # The maximum value is: {value}
 formValidationInvalidNumber = "" # Invalid Number
+proposalTotal = "" # For a total of
+proposalConfirm = "" # Confirm your proposal
 
 [ALERTS]
 INTERNAL_ERROR = "आंतरिक त्रुटि, कृपया कुछ समय बाद पुनः प्रयास करें" # Internal error, please try again later

locale/it/translation.toml

@@ -220,6 +220,8 @@ formValidationAddress = "" # The address provided is invalid
 formValidationMin = "" # The minimum value is: {value}
 formValidationMax = "" # The maximum value is: {value}
 formValidationInvalidNumber = "" # Invalid Number
+proposalTotal = "" # For a total of
+proposalConfirm = "" # Confirm your proposal
 
 [ALERTS]
 INTERNAL_ERROR = "Errore interno, rirova più tardi" # Internal error, please try again later

locale/nl/translation.toml

@@ -220,6 +220,8 @@ formValidationAddress = "" # The address provided is invalid
 formValidationMin = "" # The minimum value is: {value}
 formValidationMax = "" # The maximum value is: {value}
 formValidationInvalidNumber = "" # Invalid Number
+proposalTotal = "" # For a total of
+proposalConfirm = "" # Confirm your proposal
 
 [ALERTS]
 INTERNAL_ERROR = "Interne fout, probeer het later opnieuw" # Internal error, please try again later

locale/ph/translation.toml

@@ -220,6 +220,8 @@ formValidationAddress = "" # The address provided is invalid
 formValidationMin = "" # The minimum value is: {value}
 formValidationMax = "" # The maximum value is: {value}
 formValidationInvalidNumber = "" # Invalid Number
+proposalTotal = "" # For a total of
+proposalConfirm = "" # Confirm your proposal
 
 [ALERTS]
 INTERNAL_ERROR = "Internal error, Pakiusap uliting muli" # Internal error, please try again later

locale/pl/translation.toml

@@ -220,6 +220,8 @@ formValidationAddress = "" # The address provided is invalid
 formValidationMin = "" # The minimum value is: {value}
 formValidationMax = "" # The maximum value is: {value}
 formValidationInvalidNumber = "" # Invalid Number
+proposalTotal = "" # For a total of
+proposalConfirm = "" # Confirm your proposal
 
 [ALERTS]
 INTERNAL_ERROR = "Błąd wewnętrzny, spróbuj ponownie później" # Internal error, please try again later

locale/pt-br/translation.toml

@@ -96,6 +96,8 @@ formValidationAddress = "" # The address provided is invalid
 formValidationMin = "" # The minimum value is: {value}
 formValidationMax = "" # The maximum value is: {value}
 formValidationInvalidNumber = "" # Invalid Number
+proposalTotal = "" # For a total of
+proposalConfirm = "" # Confirm your proposal
 
 [ALERTS]
 STAKE_ADDR_SET = "<b>Endereço de Cold Staking definido!</b><br>Ao fazer Stake no futuro este endereço irá ser usado." # <b>Cold Address set!</b><br>Future stakes will use this address.

locale/pt-pt/translation.toml

@@ -96,6 +96,8 @@ formValidationAddress = "" # The address provided is invalid
 formValidationMin = "" # The minimum value is: {value}
 formValidationMax = "" # The maximum value is: {value}
 formValidationInvalidNumber = "" # Invalid Number
+proposalTotal = "" # For a total of
+proposalConfirm = "" # Confirm your proposal
 
 [ALERTS]
 STAKE_ADDR_SET = "<b>Endereço de Cold Staking definido!</b><br>Ao fazer Stake no futuro irá ser usado este endereço." # <b>Cold Address set!</b><br>Future stakes will use this address.

locale/template/translation.toml

@@ -244,6 +244,8 @@ formValidationString = "The string contains invalid characters"
 formValidationUrl = "The URL is invalid"
 formValidationAddress = "The address provided is invalid"
 formValidationInvalidNumber = "Invalid Number"
+proposalTotal = "For a total of"
+proposalConfirm = "Confirm your proposal"
 
 [ALERTS]
 INTERNAL_ERROR = "Internal error, please try again later"

locale/uwu/translation.toml

@@ -220,6 +220,8 @@ formValidationAddress = "" # The address provided is invalid
 formValidationMin = "" # The minimum value is: {value}
 formValidationMax = "" # The maximum value is: {value}
 formValidationInvalidNumber = "" # Invalid Number
+proposalTotal = "" # For a total of
+proposalConfirm = "" # Confirm your proposal
 
 [ALERTS]
 INTERNAL_ERROR = "Internal error, pwease try again later" # Internal error, please try again later

scripts/Modal.vue

@@ -2,6 +2,7 @@
 const props = defineProps({
     show: Boolean,
     modalClass: String,
+    centered: Boolean,
 });
 </script>
 
@@ -25,7 +26,8 @@ const props = defineProps({
                         <slot name="header"></slot>
                     </div>
                     <div
-                        class="modal-body center-text"
+                        class="modal-body"
+                        :class="{ 'center-text': !centered }"
                         style="padding-bottom: 8px; overflow: auto"
                     >
                         <slot name="body"></slot>

scripts/governance/Governance.vue

@@ -20,7 +20,7 @@ import { useMasternode } from '../composables/use_masternode';
 import { useAlerts } from '../composables/use_alerts.js';
 const { createAlert } = useAlerts();
 
-const showCreateProposalModal = ref(true);
+const showCreateProposalModal = ref(false);
 
 const wallet = useWallet();
 const settings = useSettings();
@@ -236,7 +236,7 @@ async function vote(proposal, voteCode) {
 
 <template>
     <ProposalCreateModal
-        v-show="showCreateProposalModal"
+        :show="showCreateProposalModal"
         :advancedMode="advancedMode"
         @close="showCreateProposalModal = false"
         @create="createProposal"

scripts/governance/ProposalCreateModal.vue

@@ -5,31 +5,46 @@ import Input from '../form/Input.vue';
 import NumericInput from '../form/NumericInput.vue';
 import { translation } from '../i18n.js';
 import { COIN, cChainParams } from '../chain_params';
-import { toRefs } from 'vue';
+import { toRefs, ref, reactive, watch } from 'vue';
 import { isStandardAddress } from '../misc';
 
 const props = defineProps({
     advancedMode: Boolean,
     isTest: Boolean,
+    show: Boolean,
 });
-const { advancedMode } = toRefs(props);
+const { advancedMode, show } = toRefs(props);
 const emit = defineEmits(['close', 'create']);
-function submit(data) {
+const data = reactive({});
+const showConfirmation = ref(false);
+
+function submit() {
+    showConfirmation.value = false;
+
     emit(
         'create',
         data.proposalTitle,
         data.proposalUrl,
         data.proposalCycles,
         data.proposalPayment,
-        data.proposalAddress
+        advancedMode.value ? data.proposalAddress : undefined
     );
 }
 
+function createConfirmationScreen(d) {
+    data.proposalTitle = d.proposalTitle;
+    data.proposalUrl = d.proposalUrl;
+    data.proposalCycles = d.proposalCycles;
+    data.proposalPayment = d.proposalPayment;
+    data.proposalAddress = d.proposalAddress;
+    showConfirmation.value = true;
+}
+
 const isSafeStr = /^[a-z0-9 .,;\-_/:?@()]+$/i;
 </script>
 
 <template>
-    <Modal :show="true">
+    <Modal :show="show">
         <template #header>
             <h4>{{ translation.popupCreateProposal }}</h4>
             <span
@@ -47,7 +62,7 @@ const isSafeStr = /^[a-z0-9 .,;\-_/:?@()]+$/i;
             >
         </template>
         <template #body>
-            <Form @submit="submit">
+            <Form @submit="createConfirmationScreen">
                 <template #default>
                     <p
                         style="
@@ -197,4 +212,138 @@ const isSafeStr = /^[a-z0-9 .,;\-_/:?@()]+$/i;
             </button>
         </template>
     </Modal>
+
+    <Modal :show="showConfirmation" :centered="true">
+        <template #header>
+            <h4>{{ translation.proposalConfirm }}</h4>
+        </template>
+        <template #body>
+            <div class="row">
+                <div class="col-6">
+                    <div class="proposalConfirmContainer">
+                        <p class="proposalConfirmLabel">Proposal name</p>
+                        <code class="proposalConfirmText">{{
+                            data.proposalTitle
+                        }}</code>
+                    </div>
+                </div>
+
+                <div class="col-6">
+                    <div>
+                        <p class="proposalConfirmLabel">Duration in cycles</p>
+                        <code class="proposalConfirmText">{{
+                            data.proposalCycles
+                        }}</code>
+                    </div>
+                </div>
+
+                <div class="col-6">
+                    <div class="proposalConfirmContainer">
+                        <p class="proposalConfirmLabel">
+                            {{ cChainParams.current.TICKER }} per cycle
+                        </p>
+                        <code class="proposalConfirmText"
+                            >{{ data.proposalPayment }}
+                            {{ cChainParams.current.TICKER }}
+                        </code>
+                    </div>
+                </div>
+                <div class="col-6">
+                    <div class="proposalConfirmContainer">
+                        <p class="proposalConfirmLabel">
+                            {{ translation.proposalTotal }}
+                        </p>
+                        <code class="proposalConfirmText"
+                            >{{ data.proposalPayment * data.proposalCycles }}
+                            {{ cChainParams.current.TICKER }}
+                        </code>
+                    </div>
+                </div>
+
+                <div class="col-12">
+                    <div class="proposalConfirmContainer">
+                        <p class="proposalConfirmLabel">URL</p>
+                        <div class="proposalConfirmText link">
+                            <a :href="data.proposalUrl">{{
+                                data.proposalUrl
+                            }}</a>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-12">
+                    <div
+                        v-if="data.proposalAddress"
+                        class="proposalConfirmContainer"
+                    >
+                        <p class="proposalConfirmLabel">Proposal Address</p>
+                        <code class="proposalConfirmText"
+                            >{{ data.proposalAddress }}
+                        </code>
+                    </div>
+                </div>
+            </div>
+        </template>
+        <template #footer>
+            <button
+                type="button"
+                class="pivx-button-big"
+                style="float: right"
+                data-testid="proposalConfirmSubmit"
+                @click="submit()"
+            >
+                {{ translation.popupConfirm }}
+            </button>
+
+            <button
+                type="button"
+                class="pivx-button-big-cancel"
+                style="float: left"
+                data-testid="proposalCancel"
+                @click="showConfirmation = false"
+            >
+                {{ translation.popupCancel }}
+            </button>
+        </template>
+    </Modal>
 </template>
+<style>
+.proposalConfirmLabel {
+    margin-bottom: 0px;
+    color: #af9cc6;
+    font-size: 1rem;
+    font-weight: 500;
+}
+.proposalConfirmContainer {
+    margin-bottom: 10px;
+}
+
+.proposalConfirmText {
+    background-color: #0000003d;
+    padding: 1px 5px 2px 5px;
+    border-radius: 5px;
+}
+
+.proposalConfirmText.link {
+    background-color: #0000003d;
+    padding: 1px 5px 2px 5px;
+    border-radius: 5px;
+    width: fit-content;
+    word-break: break-all;
+}
+
+.proposalConfirmText.link a {
+    color: #9221ff;
+    font-size: 87.5%;
+    font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+        'Courier New', monospace !important;
+}
+
+.proposalConfirmText.link a:hover {
+    text-decoration: underline !important;
+}
+
+code {
+    color: #e9deff;
+}
+</style>