forked from Qortal/qortal-ui
Phillip
1 year ago
8 changed files with 967 additions and 515 deletions
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,147 @@
|
||||
.backdrop { |
||||
position: fixed; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
background: rgb(186 186 186 / 26%); |
||||
overflow: hidden; |
||||
animation: backdrop_blur cubic-bezier(0.22, 1, 0.36, 1) 1s forwards; |
||||
z-index: 1000000; |
||||
} |
||||
|
||||
@keyframes backdrop_blur { |
||||
0% { |
||||
backdrop-filter: blur(0px); |
||||
background: transparent; |
||||
} |
||||
100% { |
||||
backdrop-filter: blur(5px); |
||||
background: rgb(186 186 186 / 26%); |
||||
} |
||||
} |
||||
|
||||
@keyframes modal_transition { |
||||
0% { |
||||
visibility: hidden; |
||||
opacity: 0; |
||||
} |
||||
100% { |
||||
visibility: visible; |
||||
opacity: 1; |
||||
} |
||||
} |
||||
|
||||
.modal { |
||||
position: relative; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
width: 100%; |
||||
height: 100%; |
||||
animation: 1s cubic-bezier(0.22, 1, 0.36, 1) 0s 1 normal forwards running modal_transition; |
||||
z-index: 1000001; |
||||
} |
||||
|
||||
@keyframes modal_transition { |
||||
0% { |
||||
visibility: hidden; |
||||
opacity: 0; |
||||
} |
||||
100% { |
||||
visibility: visible; |
||||
opacity: 1; |
||||
} |
||||
} |
||||
|
||||
.modal-content { |
||||
background-color: var(--white); |
||||
border-radius: 10px; |
||||
padding: 20px; |
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); |
||||
max-width: 80%; |
||||
min-width: 300px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
.modal-body { |
||||
padding: 25px; |
||||
} |
||||
|
||||
.modal-subcontainer { |
||||
color: var(--black); |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: flex-start; |
||||
gap: 15px; |
||||
} |
||||
|
||||
.modal-subcontainer-error { |
||||
color: var(--black); |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
gap: 15px; |
||||
} |
||||
|
||||
.modal-paragraph-error { |
||||
font-family: Roboto, sans-serif; |
||||
font-size: 20px; |
||||
letter-spacing: 0.3px; |
||||
font-weight: 700; |
||||
color: var(--black); |
||||
margin: 0; |
||||
} |
||||
|
||||
.modal-paragraph { |
||||
font-family: Roboto, sans-serif; |
||||
font-size: 18px; |
||||
letter-spacing: 0.3px; |
||||
font-weight: 300; |
||||
color: var(--black); |
||||
margin: 0; |
||||
word-wrap: break-word; |
||||
overflow-wrap: break-word; |
||||
} |
||||
|
||||
.capitalize-first { |
||||
text-transform: capitalize; |
||||
} |
||||
|
||||
.checkbox-row { |
||||
display: flex; |
||||
align-items: center; |
||||
font-family: Montserrat, sans-serif; |
||||
font-weight: 600; |
||||
color: var(--black); |
||||
} |
||||
|
||||
.modal-buttons { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
margin-top: 20px; |
||||
} |
||||
|
||||
.modal-buttons button { |
||||
background-color: #4caf50; |
||||
border: none; |
||||
color: #fff; |
||||
padding: 10px 20px; |
||||
border-radius: 5px; |
||||
cursor: pointer; |
||||
transition: background-color 0.2s; |
||||
} |
||||
|
||||
.modal-buttons button:hover { |
||||
background-color: #3e8e41; |
||||
} |
||||
|
||||
#cancel-button { |
||||
background-color: #f44336; |
||||
} |
||||
|
||||
#cancel-button:hover { |
||||
background-color: #d32f2f; |
||||
} |
@ -0,0 +1,263 @@
|
||||
import { get } from 'lit-translate'; |
||||
|
||||
export class ModalHelper { |
||||
constructor() { |
||||
this.initializeStyles(); |
||||
} |
||||
|
||||
async getArbitraryFee() { |
||||
const timestamp = Date.now(); |
||||
const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]; |
||||
const nodeUrl = `${myNode.protocol}://${myNode.domain}:${myNode.port}`; |
||||
const url = `${nodeUrl}/transactions/unitfee?txType=ARBITRARY×tamp=${timestamp}`; |
||||
const response = await fetch(url); |
||||
|
||||
if (!response.ok) { |
||||
throw new Error('Error when fetching arbitrary fee'); |
||||
} |
||||
|
||||
const data = await response.json(); |
||||
const arbitraryFee = (Number(data) / 1e8).toFixed(8); |
||||
return { |
||||
timestamp, |
||||
fee: Number(data), |
||||
feeToShow: arbitraryFee |
||||
}; |
||||
} |
||||
|
||||
async showModalAndWaitPublish(data) { |
||||
console.log({ data }); |
||||
|
||||
return new Promise((resolve) => { |
||||
const modal = this.createModal(data); |
||||
document.body.appendChild(modal); |
||||
this.addModalEventListeners(modal, resolve); |
||||
}); |
||||
} |
||||
|
||||
createModal(data) { |
||||
const modal = document.createElement('div'); |
||||
modal.id = "backdrop"; |
||||
modal.classList.add("backdrop"); |
||||
modal.innerHTML = ` |
||||
<div class="modal my-modal-class"> |
||||
<div class="modal-content"> |
||||
<div class="modal-body"> |
||||
<div class="modal-subcontainer"> |
||||
<div class="checkbox-row"> |
||||
<p style="font-size: 16px;overflow-wrap: anywhere;" class="modal-paragraph">${get('browserpage.bchange47')} <span style="font-weight: bold">${data.feeAmount} QORT fee</span></p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="modal-buttons"> |
||||
<button id="cancel-button">${get("browserpage.bchange27")}</button> |
||||
<button id="ok-button">${get("browserpage.bchange28")}</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
`;
|
||||
return modal; |
||||
} |
||||
|
||||
addModalEventListeners(modal, resolve) { |
||||
// Event listener for the 'OK' button
|
||||
const okButton = modal.querySelector('#ok-button'); |
||||
okButton.addEventListener('click', () => { |
||||
const userData = { isWithFee: true }; |
||||
if (modal.parentNode === document.body) { |
||||
document.body.removeChild(modal); |
||||
} |
||||
resolve({ action: 'accept', userData }); |
||||
}); |
||||
|
||||
// Prevent modal content from closing the modal
|
||||
const modalContent = modal.querySelector('.modal-content'); |
||||
modalContent.addEventListener('click', e => { |
||||
e.stopPropagation(); |
||||
}); |
||||
|
||||
// Event listeners for backdrop and 'Cancel' button
|
||||
const backdropClick = document.getElementById('backdrop'); |
||||
backdropClick.addEventListener('click', () => { |
||||
if (modal.parentNode === document.body) { |
||||
document.body.removeChild(modal); |
||||
} |
||||
resolve({ action: 'reject' }); |
||||
}); |
||||
|
||||
const cancelButton = modal.querySelector('#cancel-button'); |
||||
cancelButton.addEventListener('click', () => { |
||||
if (modal.parentNode === document.body) { |
||||
document.body.removeChild(modal); |
||||
} |
||||
resolve({ action: 'reject' }); |
||||
}); |
||||
} |
||||
|
||||
initializeStyles() { |
||||
const styles = ` |
||||
* { |
||||
--mdc-theme-primary: rgb(3, 169, 244); |
||||
--mdc-theme-secondary: var(--mdc-theme-primary); |
||||
--paper-input-container-focus-color: var(--mdc-theme-primary); |
||||
--mdc-checkbox-unchecked-color: var(--black); |
||||
--mdc-theme-on-surface: var(--black); |
||||
--mdc-checkbox-disabled-color: var(--black); |
||||
--mdc-checkbox-ink-color: var(--black); |
||||
} |
||||
|
||||
.backdrop { |
||||
position: fixed; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
background: rgb(186 186 186 / 26%); |
||||
overflow: hidden; |
||||
animation: backdrop_blur cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
|
||||
z-index: 1000000; |
||||
} |
||||
|
||||
@keyframes backdrop_blur { |
||||
0% { |
||||
backdrop-filter: blur(0px); |
||||
background: transparent; |
||||
} |
||||
100% {
|
||||
backdrop-filter: blur(5px); |
||||
background: rgb(186 186 186 / 26%); |
||||
} |
||||
} |
||||
|
||||
@keyframes modal_transition { |
||||
0% { |
||||
visibility: hidden; |
||||
opacity: 0; |
||||
} |
||||
100% { |
||||
visibility: visible; |
||||
opacity: 1; |
||||
} |
||||
} |
||||
|
||||
.modal { |
||||
position: relative; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
width: 100%; |
||||
height: 100%; |
||||
animation: 0.1s cubic-bezier(0.22, 1, 0.36, 1) 0s 1 normal forwards running modal_transition; |
||||
z-index: 1000001; |
||||
} |
||||
|
||||
@keyframes modal_transition { |
||||
0% { |
||||
visibility: hidden; |
||||
opacity: 0; |
||||
} |
||||
100% { |
||||
visibility: visible; |
||||
opacity: 1; |
||||
} |
||||
} |
||||
|
||||
.modal-content { |
||||
background-color: var(--white); |
||||
border-radius: 10px; |
||||
padding: 20px; |
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); |
||||
max-width: 80%; |
||||
min-width: 300px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
.modal-body { |
||||
padding: 25px; |
||||
} |
||||
|
||||
.modal-subcontainer { |
||||
color: var(--black); |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: flex-start; |
||||
gap: 15px; |
||||
} |
||||
|
||||
.modal-subcontainer-error { |
||||
color: var(--black); |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
gap: 15px; |
||||
} |
||||
|
||||
.modal-paragraph-error { |
||||
font-family: Roboto, sans-serif; |
||||
font-size: 20px; |
||||
letter-spacing: 0.3px; |
||||
font-weight: 700; |
||||
color: var(--black); |
||||
margin: 0; |
||||
} |
||||
|
||||
.modal-paragraph { |
||||
font-family: Roboto, sans-serif; |
||||
font-size: 18px; |
||||
letter-spacing: 0.3px; |
||||
font-weight: 300; |
||||
color: var(--black); |
||||
margin: 0; |
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word; |
||||
} |
||||
|
||||
.capitalize-first { |
||||
text-transform: capitalize; |
||||
} |
||||
|
||||
.checkbox-row { |
||||
display: flex; |
||||
align-items: center; |
||||
font-family: Montserrat, sans-serif; |
||||
font-weight: 600; |
||||
color: var(--black); |
||||
} |
||||
|
||||
.modal-buttons { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
margin-top: 20px; |
||||
} |
||||
|
||||
.modal-buttons button { |
||||
background-color: #4caf50; |
||||
border: none; |
||||
color: #fff; |
||||
padding: 10px 20px; |
||||
border-radius: 5px; |
||||
cursor: pointer; |
||||
transition: background-color 0.2s; |
||||
} |
||||
|
||||
.modal-buttons button:hover { |
||||
background-color: #3e8e41; |
||||
} |
||||
|
||||
#cancel-button { |
||||
background-color: #f44336; |
||||
} |
||||
|
||||
#cancel-button:hover { |
||||
background-color: #d32f2f; |
||||
} |
||||
`;
|
||||
|
||||
const styleSheet = new CSSStyleSheet(); |
||||
styleSheet.replaceSync(styles); |
||||
|
||||
document.adoptedStyleSheets = [styleSheet]; |
||||
} |
||||
} |
Loading…
Reference in new issue