RanchiMall/taprootwallet
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added search functionality

Browse Source
This commit is contained in:
sairaj mote 2023-10-25 01:42:48 +05:30
parent cc485b8882
commit 97eb6dc7b4
4 changed files with 1033 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

211
css/main.css
View File

@ -2,7 +2,7 @@
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Inter", sans-serif;
font-family: "Roboto", sans-serif;
}
:root {
@ -16,8 +16,9 @@ body {
body {
--accent-color: #3d5afe;
--accent-color-rgb: 77, 119, 255;
--secondary-color: #ffac2e;
--text-color: 54, 54, 54;
--text-color: 34, 34, 34;
--foreground-color: 252, 253, 255;
--background-color: 241, 243, 248;
--danger-color: rgb(255, 75, 75);
@ -29,8 +30,9 @@ body {
body[data-theme=dark] {
--accent-color: #92a2ff;
--accent-color-rgb: 160, 182, 255;
--secondary-color: #d60739;
--text-color: 200, 200, 200;
--text-color: 210, 210, 210;
--foreground-color: 27, 28, 29;
--background-color: 21, 22, 22;
--danger-color: rgb(255, 106, 106);
@ -261,6 +263,16 @@ sm-chip[selected] {
color: rgba(var(--background-color), 1);
}
sm-select {
font-size: 0.9rem;
font-weight: 500;
--padding: 0.6rem 0.3rem 0.6rem 0.6rem;
}
sm-option {
font-size: 0.9rem;
}
ul {
list-style: none;
}
@ -828,6 +840,187 @@ theme-toggle {
#page_container {
padding: max(1rem, 1.5vw);
overflow: auto;
}
#search {
width: min(100%, 52rem);
margin: 0 auto;
}
#search_query_input {
width: 100%;
}
#address_balance_card {
padding: 1.5rem;
border-radius: 0.5rem;
background-color: rgba(var(--accent-color-rgb), 0.2);
}
#address_balance {
font-size: 1.2rem;
font-weight: 700;
color: var(--accent-color);
}
#transactions_list {
display: grid;
gap: 2rem;
padding-bottom: 4rem;
}
.transaction {
grid-template-columns: auto 1fr;
gap: 0.5rem 1rem;
align-items: center;
content-visibility: auto;
contain-intrinsic-height: 8rem;
}
.transaction:not(:last-of-type) {
padding-bottom: 2rem;
}
.transaction__amount {
white-space: nowrap;
}
.transaction.out .transaction__icon .icon {
fill: var(--danger-color);
}
.transaction.out .transaction__amount {
color: var(--danger-color);
}
.transaction.out .transaction__amount::before {
content: "- ";
}
.transaction.in .transaction__icon .icon {
fill: var(--green);
}
.transaction.in .transaction__amount {
color: var(--green);
}
.transaction.in .transaction__amount::before {
content: "+ ";
}
.transaction.unconfirmed-tx .transaction__icon .icon {
fill: var(--yellow);
}
.transaction__icon {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
background-color: rgba(var(--text-color), 0.03);
border-radius: 2rem;
}
.transaction__receiver {
font-weight: 500;
margin-bottom: 0.3rem;
line-height: 1.5;
}
.transaction__time {
font-size: 0.9rem;
color: rgba(var(--text-color), 0.8);
}
.transaction .pending-badge {
font-size: 0.8rem;
padding: 0.2rem 0.5rem;
border-radius: 0.5rem;
background-color: var(--yellow);
color: rgba(0, 0, 0, 0.8);
font-weight: 500;
justify-self: flex-start;
}
.transaction__amount {
font-size: 1rem;
font-weight: 700;
}
.transaction__id {
font-size: 0.9rem;
}
.tx-participant:not(:last-of-type) {
margin-right: 0.5rem;
}
.tx-participant:not(:last-of-type)::after {
content: ",";
}
#tx_status {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 0.8rem;
border-radius: 0.5rem;
background-color: rgba(var(--text-color), 0.03);
color: var(--danger-color);
}
#tx_status .icon {
fill: var(--danger-color);
}
#tx_technicals .tx-detail:first-of-type {
position: relative;
}
#tx_technicals .tx-detail:first-of-type::before {
content: "";
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 0.2rem;
height: calc(100% - 2rem);
background-color: var(--accent-color);
border-radius: 0 1rem 1rem 0;
}
.details-wrapper {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
width: 100%;
}
.tx-detail {
display: grid;
gap: 0.5rem;
align-content: flex-start;
background-color: rgba(var(--text-color), 0.03);
padding: 1rem;
border-radius: 0.5rem;
flex: 1 1 8rem;
}
.tx-detail .flex div {
color: rgba(var(--text-color), 0.8);
font-size: 0.9rem;
font-weight: 500;
}
.tx-detail > div {
font-weight: 700;
font-size: 1rem;
color: rgba(var(--text-color), 0.9);
}
#in_out_wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 1rem;
margin-bottom: 3rem;
}
.in-out-card {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.5rem;
padding: 1rem;
border-radius: 0.5rem;
background-color: rgba(var(--text-color), 0.03);
}
.in-out-card:not(:last-of-type) {
margin-bottom: 0.5rem;
}
.in-out-card > :first-child {
margin-right: 1rem;
}
.primary-action {
@ -1011,15 +1204,23 @@ theme-toggle {
body[data-theme=dark] #main_navbar {
background-color: rgba(0, 0, 0, 0.2);
}
#transactions_list {
gap: 0.5rem;
}
.transaction {
padding: 1.5rem 1rem;
border-radius: 0.5rem;
border: solid thin rgba(var(--text-color), 0.3);
}
#generate_address_popup,
#convert_to_taproot_popup {
--width: 28rem;
}
main sm-form::part(form) {
#send_tx_form::part(form) {
gap: 1rem;
grid-template-columns: 1fr 1fr;
}
main sm-form > * {
#send_tx_form > * {
align-self: flex-start;
border-radius: 0.8rem;
padding: 1.5rem;

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

227
css/main.scss
View File

@ -2,7 +2,7 @@
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Inter", sans-serif;
font-family: "Roboto", sans-serif;
}
:root {
@ -16,8 +16,9 @@ body {
body {
--accent-color: #3d5afe;
--accent-color-rgb: 77, 119, 255;
--secondary-color: #ffac2e;
--text-color: 54, 54, 54;
--text-color: 34, 34, 34;
--foreground-color: 252, 253, 255;
--background-color: 241, 243, 248;
--danger-color: rgb(255, 75, 75);
@ -29,8 +30,9 @@ body {
body[data-theme="dark"] {
--accent-color: #92a2ff;
--accent-color-rgb: 160, 182, 255;
--secondary-color: #d60739;
--text-color: 200, 200, 200;
--text-color: 210, 210, 210;
--foreground-color: 27, 28, 29;
--background-color: 21, 22, 22;
--danger-color: rgb(255, 106, 106);
@ -238,7 +240,14 @@ sm-chip {
color: rgba(var(--background-color), 1);
}
}
sm-select {
font-size: 0.9rem;
font-weight: 500;
--padding: 0.6rem 0.3rem 0.6rem 0.6rem;
}
sm-option {
font-size: 0.9rem;
}
ul {
list-style: none;
}
@ -771,7 +780,187 @@ theme-toggle {
}
#page_container {
padding: max(1rem, 1.5vw);
overflow: auto;
}
#search {
width: min(100%, 52rem);
margin: 0 auto;
}
#search_query_input {
width: 100%;
}
#address_balance_card {
padding: 1.5rem;
border-radius: 0.5rem;
background-color: rgba(var(--accent-color-rgb), 0.2);
}
#address_balance {
font-size: 1.2rem;
font-weight: 700;
color: var(--accent-color);
}
#transactions_list {
display: grid;
gap: 2rem;
padding-bottom: 4rem;
}
.transaction {
grid-template-columns: auto 1fr;
gap: 0.5rem 1rem;
align-items: center;
content-visibility: auto;
contain-intrinsic-height: 8rem;
&:not(:last-of-type) {
padding-bottom: 2rem;
}
&__amount {
white-space: nowrap;
}
&.out {
.transaction__icon .icon {
fill: var(--danger-color);
}
.transaction__amount {
color: var(--danger-color);
&::before {
content: "- ";
}
}
}
&.in {
.transaction__icon .icon {
fill: var(--green);
}
.transaction__amount {
color: var(--green);
&::before {
content: "+ ";
}
}
}
&.unconfirmed-tx {
.transaction__icon .icon {
fill: var(--yellow);
}
}
&__icon {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
background-color: rgba(var(--text-color), 0.03);
border-radius: 2rem;
}
&__receiver {
font-weight: 500;
margin-bottom: 0.3rem;
line-height: 1.5;
}
&__time {
font-size: 0.9rem;
color: rgba(var(--text-color), 0.8);
}
.pending-badge {
font-size: 0.8rem;
padding: 0.2rem 0.5rem;
border-radius: 0.5rem;
background-color: var(--yellow);
color: rgba(0 0 0/ 0.8);
font-weight: 500;
justify-self: flex-start;
}
&__amount {
font-size: 1rem;
font-weight: 700;
}
&__id {
font-size: 0.9rem;
}
}
.tx-participant {
&:not(:last-of-type) {
&::after {
content: ",";
}
margin-right: 0.5rem;
}
}
#tx_status {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 0.8rem;
border-radius: 0.5rem;
background-color: rgba(var(--text-color), 0.03);
color: var(--danger-color);
.icon {
fill: var(--danger-color);
}
}
#tx_technicals {
.tx-detail:first-of-type {
position: relative;
&::before {
content: "";
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 0.2rem;
height: calc(100% - 2rem);
background-color: var(--accent-color);
border-radius: 0 1rem 1rem 0;
}
}
}
.details-wrapper {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
width: 100%;
}
.tx-detail {
display: grid;
gap: 0.5rem;
align-content: flex-start;
background-color: rgba(var(--text-color), 0.03);
padding: 1rem;
border-radius: 0.5rem;
flex: 1 1 8rem;
.flex div {
color: rgba(var(--text-color), 0.8);
font-size: 0.9rem;
font-weight: 500;
}
& > div {
font-weight: 700;
font-size: 1rem;
color: rgba(var(--text-color), 0.9);
}
}
#in_out_wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 1rem;
margin-bottom: 3rem;
}
.in-out-card {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.5rem;
padding: 1rem;
border-radius: 0.5rem;
background-color: rgba(var(--text-color), 0.03);
&:not(:last-of-type) {
margin-bottom: 0.5rem;
}
& > :first-child {
margin-right: 1rem;
}
}
.primary-action {
padding: 0.8rem;
gap: 0.5rem;
@ -931,22 +1120,28 @@ theme-toggle {
background-color: rgba(0 0 0/ 0.2);
}
}
#transactions_list {
gap: 0.5rem;
}
.transaction {
padding: 1.5rem 1rem;
border-radius: 0.5rem;
border: solid thin rgba(var(--text-color), 0.3);
}
#generate_address_popup,
#convert_to_taproot_popup {
--width: 28rem;
}
main {
sm-form {
&::part(form) {
gap: 1rem;
grid-template-columns: 1fr 1fr;
}
& > * {
align-self: flex-start;
border-radius: 0.8rem;
padding: 1.5rem;
background-color: rgba(var(--text-color), 0.03);
}
#send_tx_form {
&::part(form) {
gap: 1rem;
grid-template-columns: 1fr 1fr;
}
& > * {
align-self: flex-start;
border-radius: 0.8rem;
padding: 1.5rem;
background-color: rgba(var(--text-color), 0.03);
}
}
}

651
index.html
View File

@ -6,6 +6,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RanchiMall Taproot wallet</title>
<link rel="stylesheet" href="css/main.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap"
rel="stylesheet">
</head>
<body class="hidden">
@ -24,7 +29,7 @@
</div>
<main id="main_card">
<header id="main_header">
<a href="#/home" id="logo" class="app-brand">
<a href="#/search" id="logo" class="app-brand">
<svg id="main_logo" class="icon" viewBox="0 0 27.25 32">
<title>RanchiMall</title>
<path
@ -46,11 +51,25 @@
<theme-toggle></theme-toggle>
</div>
</header>
<div id="page_container"> </div>
<div id="page_container"></div>
<nav id="main_navbar">
<ul id="menu">
<li>
<a href="#/home" class="nav-item nav-item--active interactive">
<a href="#/search" class="nav-item nav-item--active interactive">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" />
<path
d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
</svg>
<span class="nav-item__title">
Search
</span>
<div class="nav-item__indicator"></div>
</a>
</li>
<li>
<a href="#/send" class="nav-item interactive">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"></path>
@ -61,7 +80,6 @@
<span class="nav-item__title">
Send
</span>
<div class="nav-item__indicator"></div>
</a>
</li>
<li class="hidden">
@ -562,8 +580,8 @@
if (this.routingStart) {
this.routingStart(this.state)
}
console
if (this.routes[page]) {
// Fallback for browsers that don't support View transition API:
await this.routes[page](this.state)
this.lastPage = page
} else {
@ -577,20 +595,19 @@
this.routingEnd(this.state)
}
}
async routeTo(path) {
async routeTo(destination) {
try {
let page
let wildcards = []
let queryString
let params
[path, queryString] = path.split('?');
let params = {}
let [path, queryString] = destination.split('?');
if (path.includes('#'))
path = path.split('#')[1];
if (path.includes('/'))
[, page, ...wildcards] = path.split('/')
else
page = path
this.state = { page, wildcards, lastPage: this.lastPage }
this.state = { page, wildcards, lastPage: this.lastPage, params }
if (queryString) {
params = new URLSearchParams(queryString)
this.state.params = Object.fromEntries(params)
@ -600,6 +617,7 @@
await this.handleRouting(page)
})
} else {
// Fallback for browsers that don't support View transition API:
await this.handleRouting(page)
}
} catch (e) {
@ -661,6 +679,121 @@
currentSubscriber = null;
}
}
// class based lazy loading
class LazyLoader {
constructor(container, elementsToRender, renderFn, options = {}) {
const { batchSize = 10, freshRender, bottomFirst = false, domUpdated } = options
this.elementsToRender = elementsToRender
this.arrayOfElements = (typeof elementsToRender === 'function') ? this.elementsToRender() : elementsToRender || []
this.renderFn = renderFn
this.intersectionObserver
this.batchSize = batchSize
this.freshRender = freshRender
this.domUpdated = domUpdated
this.bottomFirst = bottomFirst
this.shouldLazyLoad = false
this.lastScrollTop = 0
this.lastScrollHeight = 0
this.lazyContainer = document.querySelector(container)
this.update = this.update.bind(this)
this.render = this.render.bind(this)
this.init = this.init.bind(this)
this.clear = this.clear.bind(this)
}
get elements() {
return this.arrayOfElements
}
init() {
this.intersectionObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
observer.disconnect()
this.render({ lazyLoad: true })
}
})
})
this.mutationObserver = new MutationObserver(mutationList => {
mutationList.forEach(mutation => {
if (mutation.type === 'childList') {
if (mutation.addedNodes.length) {
if (this.bottomFirst) {
if (this.lazyContainer.firstElementChild)
this.intersectionObserver.observe(this.lazyContainer.firstElementChild)
} else {
if (this.lazyContainer.lastElementChild)
this.intersectionObserver.observe(this.lazyContainer.lastElementChild)
}
}
}
})
})
this.mutationObserver.observe(this.lazyContainer, {
childList: true,
})
this.render()
}
update(elementsToRender) {
this.arrayOfElements = (typeof elementsToRender === 'function') ? this.elementsToRender() : elementsToRender || []
}
render(options = {}) {
let { lazyLoad = false } = options
this.shouldLazyLoad = lazyLoad
const frag = document.createDocumentFragment();
if (lazyLoad) {
if (this.bottomFirst) {
this.updateEndIndex = this.updateStartIndex
this.updateStartIndex = this.updateEndIndex - this.batchSize
} else {
this.updateStartIndex = this.updateEndIndex
this.updateEndIndex = this.updateEndIndex + this.batchSize
}
} else {
this.intersectionObserver.disconnect()
if (this.bottomFirst) {
this.updateEndIndex = this.arrayOfElements.length
this.updateStartIndex = this.updateEndIndex - this.batchSize - 1
} else {
this.updateStartIndex = 0
this.updateEndIndex = this.batchSize
}
this.lazyContainer.innerHTML = ``;
}
this.lastScrollHeight = this.lazyContainer.scrollHeight
this.lastScrollTop = this.lazyContainer.scrollTop
this.arrayOfElements.slice(this.updateStartIndex, this.updateEndIndex).forEach((element, index) => {
frag.append(this.renderFn(element))
})
if (this.bottomFirst) {
this.lazyContainer.prepend(frag)
// scroll anchoring for reverse scrolling
this.lastScrollTop += this.lazyContainer.scrollHeight - this.lastScrollHeight
this.lazyContainer.scrollTo({ top: this.lastScrollTop })
this.lastScrollHeight = this.lazyContainer.scrollHeight
} else {
this.lazyContainer.append(frag)
}
if (!lazyLoad && this.bottomFirst) {
this.lazyContainer.scrollTop = this.lazyContainer.scrollHeight
}
// Callback to be called if elements are updated or rendered for first time
if (!lazyLoad && this.freshRender)
this.freshRender()
}
clear() {
this.intersectionObserver.disconnect()
this.mutationObserver.disconnect()
this.lazyContainer.innerHTML = ``;
}
reset() {
this.arrayOfElements = (typeof this.elementsToRender === 'function') ? this.elementsToRender() : this.elementsToRender || []
this.render()
}
}
</script>
<script type="text/javascript">
window.smCompConfig = {
@ -768,6 +901,241 @@
target.type = target.type === 'password' ? 'text' : 'password';
target.focusIn()
}
let transactionsLazyLoader
let txDetailsAbortController
const render = {
transactionCard(transactionDetails) {
let { address, amount, time, txid, sender, receiver, type, block } = transactionDetails;
let transactionReceiver
let icon
const transactingAddresses = (receiver || sender || [])
const transactingAddressesLinks = transactingAddresses
.slice(0, 2).map(address => html`<a href="${`#/search?query=${address}`}" class="tx-participant wrap-around">${address}</a>`)
// block = null
if (type === 'out') {
transactionReceiver = html`Sent to ${transactingAddressesLinks}`;
icon = svg`<svg class="icon sent" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg>`;
} else if (type === 'in') {
transactionReceiver = html`Received from ${transactingAddressesLinks}`;
icon = svg`<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/></svg>`;
} else if (type === 'self') {
transactionReceiver = `Sent to self`;
icon = svg`<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="m19 8-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"/></svg>`;
}
if (!block) {
icon = svg`<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M6,2l0.01,6L10,12l-3.99,4.01L6,22h12v-6l-4-4l4-3.99V2H6z M16,16.5V20H8v-3.5l4-4L16,16.5z"/></g></svg>`;
}
const queriedAddress = router.state.params?.query || getRef('search_query_input').value.trim()
const isSender = type === 'out' || type === 'self'
const className = `transaction grid ${type} ${block === null ? 'unconfirmed-tx' : ''}`
return html.node/*html*/`
<li class="${className}" data-txid="${txid}" data-transacting-addresses=${transactingAddresses.slice(2)}>
<div class="transaction__icon">${icon}</div>
<div class="grid gap-0-5">
<div class="flex gap-0-5 space-between align-center flex-wrap">
<time class="transaction__time">${getFormattedTime(time)}</time>
<div class="transaction__amount amount-shown" data-btc-amount="${amount}">${formatAmount(getConvertedAmount(amount))}</div>
</div>
<div class="transaction__receiver">
${transactionReceiver}
${transactingAddresses.length > 2 ? html`<button onclick=${showAllAddresses} class="button button--small show-more" title="See all addresses">... +${transactingAddresses.length - 2} more</button>` : ''}
</div>
<div class="flex gap-0-5 flex-wrap align-center">
<a class="button button--small gap-0-3 align-center button--colored transaction__id" href="${`#/search?query=${txid}`}">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
View details
</a>
${isSender && !block ? html`
<div class="multi-state-button">
<button class="button button--small gap-0-3" onclick=${initFeeChange} title="Resend transaction with greater fees to reduce confirmation time">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg>
Increase fee
</button>
</div>
` : ''}
</div>
${!block ? html`
<p class="pending-badge">
Confirmation pending: amount will be deducted after transaction is confirmed.
${isSender && !block ? ' Try increasing fee to speed up confirmation' : ''}
</p>
` : ''}
</div>
</li>
`;
},
async transactions(address) {
try {
getRef('address_details').classList.remove('hidden')
getRef('transactions_list').innerHTML = '<sm-spinner class="justify-self-center margin-top-1-5"></sm-spinner>';
getRef('address_balance').innerHTML = '<sm-spinner class="justify-self-center margin-top-1-5"></sm-spinner>';
btcOperator.getAddressData(address).then(result => {
getRef('address_balance').value = formatAmount(getConvertedAmount(result.balance));
getRef('address_balance').dataset.btcAmount = result.balance;
getRef('address_balance').parentElement.classList.remove('hidden')
getRef('filter_selector').classList.remove('hidden')
// render transactions
if (result.txs.length) {
let allTransactions = result.txs;
const filter = getRef('filter_selector').value;
if (filter !== 'all') {
allTransactions = allTransactions.filter(t => filter === 'sent' ? t.type === 'out' : t.type === 'in')
}
if (transactionsLazyLoader) {
transactionsLazyLoader.update(allTransactions)
} else {
transactionsLazyLoader = new LazyLoader('#transactions_list', allTransactions, render.transactionCard)
}
transactionsLazyLoader.init()
getRef('transactions_list').previousElementSibling.classList.remove('hidden');
} else {
getRef('transactions_list').textContent = 'No transactions found';
}
}).catch(error => {
console.error(error)
getRef('filter_selector').classList.add('hidden')
getRef('transactions_list').textContent = `The data service is temporarily unavailable due to over-usage. Please try again in an hour.`;
}).finally(_ => getRef('check_address_button').disabled = false)
} catch (err) {
notify(err, 'error');
}
},
addressDetails(address) {
getRef('check_address_button').disabled = true;
render.transactions(address)
},
async txDetails(txid) {
getRef('tx_details').classList.remove('hidden')
renderElem(getRef('tx_details'), html`<sm-spinner class="justify-self-center margin-top-1-5"></sm-spinner>`);
if (txDetailsAbortController) {
txDetailsAbortController.abort()
}
txDetailsAbortController = new AbortController();
btcOperator.getTx(txid).then(result => {
const { block, time, size, fee, inputs, outputs, confirmations, total_input_value, total_output_value } = result;
console.debug('tx', result);
renderElem(getRef('tx_details'), html`
<h3>Transaction Details</h3>
<div class="flex align-center gap-1 space-between flex-wrap">
<time>${getFormattedTime(time)}</time>
${!block ? html` <h4 id="tx_status">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/><path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg>
Unconfirmed
</h4> ` : ''}
</div>
<div id="tx_technicals" class="justify-self-center details-wrapper">
<div class="tx-detail">
<div class="flex align-center gap-0-3">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>
<div>Confirmations</div>
</div>
<div style="font-size: 1.5rem">${confirmations}</div>
</div>
${block ? html`
<div class="tx-detail">
<div class="flex align-center gap-0-3">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><g><g><path d="M3,3v8h8V3H3z M9,9H5V5h4V9z M3,13v8h8v-8H3z M9,19H5v-4h4V19z M13,3v8h8V3H13z M19,9h-4V5h4V9z M13,13v8h8v-8H13z M19,19h-4v-4h4V19z"/></g></g></g></svg>
<div>Block</div>
</div>
<div>${block}</div>
</div>
` : ''}
<div class="tx-detail">
<div class="flex align-center gap-0-3">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15 4c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zM3 12c0-2.61 1.67-4.83 4-5.65V4.26C3.55 5.15 1 8.27 1 12s2.55 6.85 6 7.74v-2.09c-2.33-.82-4-3.04-4-5.65z"/></svg>
<div>Fee</div>
</div>
<div class="amount-shown" data-btc-amount="${fee}">${formatAmount(getConvertedAmount(fee))}</div>
</div>
</div>
<details class="margin-bottom-1-5 justify-self-center w-100">
<summary>
More details
<svg class="icon down-arrow" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M24 24H0V0h24v24z" fill="none" opacity=".87"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"/></svg>
</summary>
<div class="details-wrapper">
<div class="tx-detail">
<div class="flex align-center gap-0-3">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/></svg>
<div>Total Inputs</div>
</div>
<div class="amount-shown" data-btc-amount="${total_input_value}">${formatAmount(getConvertedAmount(total_input_value))}</div>
</div>
<div class="tx-detail">
<div class="flex align-center gap-0-3">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg>
<div>Total Outputs</div>
</div>
<div class="amount-shown" data-btc-amount="${total_output_value}">${formatAmount(getConvertedAmount(total_output_value))}</div>
</div>
<div class="tx-detail">
<div class="flex align-center gap-0-3">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M2 20h20v-4H2v4zm2-3h2v2H4v-2zM2 4v4h20V4H2zm4 3H4V5h2v2zm-4 7h20v-4H2v4zm2-3h2v2H4v-2z"/></svg>
<div>Size</div>
</div>
<div>${size} bytes</div>
</div>
</div>
</details>
<div id="in_out_wrapper" class="flex flex-wrap">
<div>
<div class="flex align-center space-between margin-bottom-1" style="padding: 0.5rem 1rem;">
<b>Sender addresses</b>
<b>Amount</b>
</div>
<ul>
${inputs.map(input => html`
<li class="in-out-card">
<a href="${`#/search?query=${input.address}`}" class="input-address wrap-around">${input.address}</a>
<div class="input-value amount-shown" data-btc-amount="${input.value}">${formatAmount(getConvertedAmount(input.value))}</div>
</li>
`)}
</ul>
</div>
<div>
<div class="flex align-center space-between margin-bottom-1" style="padding: 0.5rem 1rem;">
<b>Receiver addresses</b>
<b>Amount</b>
</div>
<ul>
${outputs.map(output => html`
<li class="in-out-card">
<a href="${`#/search?query=${output.address}`}" class="output-address wrap-around">${output.address}</a>
<div class="output-value amount-shown" data-btc-amount="${output.value}">${formatAmount(getConvertedAmount(output.value))}</div>
</li>
`)}
</ul>
</div>
</div>
`)
}).catch(err => {
notify('Invalid transaction ID', 'error')
renderElem(getRef('tx_details'), html``)
})
},
queryResult(query) {
const type = checkQueryStringType(query);
if (type === 'address') {
getRef('tx_details').classList.add('hidden')
render.addressDetails(query)
} else if (type === 'txid') {
getRef('address_details').classList.add('hidden')
render.txDetails(query)
if (transactionsLazyLoader) {
transactionsLazyLoader.clear()
transactionsLazyLoader = null
}
} else {
if (transactionsLazyLoader) {
transactionsLazyLoader.clear()
transactionsLazyLoader = null
}
getRef('address_details').classList.add('hidden')
getRef('tx_details').classList.add('hidden')
notify('Invalid address or transaction id', 'error');
}
}
}
const router = new Router({
routingStart(state) {
@ -775,25 +1143,85 @@
routingEnd(state) {
const { page } = state
if (!page)
page = 'home'
page = 'search'
const previousTarget = getRef('main_navbar').querySelector('.nav-item--active')
previousTarget?.classList.remove('nav-item--active')
previousTarget.querySelector('.nav-item__indicator')?.remove()
if (previousTarget) {
previousTarget.classList.remove('nav-item--active')
previousTarget.querySelector('.nav-item__indicator')?.remove()
}
const target = getRef('main_navbar').querySelector(`.nav-item[href="#/${page}"]`)
console.log(target, page)
target.classList.add('nav-item--active')
target.append(html.node`<div class="nav-item__indicator"></div>`)
if (target) {
target.classList.add('nav-item--active')
target.append(html.node`<div class="nav-item__indicator"></div>`)
}
}
})
router.addRoute('', (state) => {
history.replaceState({}, '', '#/home')
renderHome(state)
history.replaceState({}, '', '#/search')
})
router.addRoute('home', renderHome)
router.addRoute('search', renderSearch)
function renderSearch(state) {
const { params: { query } } = state
renderElem(getRef('page_container'), html`
<div id="search" class="flex flex-direction-column gap-1-5">
<menu class="flex gap-0-5">
<li>
<button class="button button--colored primary-action" onclick="openPopup('generate_address_popup')">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0V0z" fill="none" /> <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z" /> </svg>
Create new address
</button>
</li>
<li>
<button class="button button--colored primary-action" onclick="openPopup('convert_to_taproot_popup')">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0V0z" fill="none" /> <path d="M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z" /> </svg>
Retrieve Taproot address
</button>
</li>
</menu>
<section class="flex flex-direction-column gap-1">
<sm-form class="flex" style="--gap: 0.5rem;">
<sm-input type="search" id="search_query_input" placeholder="Search BTC address or transaction ID" required="" aria-label="Search BTC address or transaction ID" aria-required="true" role="textbox" invalid="">
<svg slot="icon" class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0V0z" fill="none"></path> <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path> </svg>
</sm-input>
<button id="check_address_button" onclick=${handleSearch} class="button button--primary cta" style="height: 3.2rem;" type="submit" disabled="">Search</button>
</sm-form>
<div id="address_details" class="hidden flex flex-direction-column gap-1">
<div id="address_balance_card" class="grid gap-1 hidden">
<div class="flex">
<svg class="icon margin-right-0-3" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0V0z" fill="none"></path> <path d="M21 7.28V5c0-1.1-.9-2-2-2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-2.28c.59-.35 1-.98 1-1.72V9c0-.74-.41-1.37-1-1.72zM20 9v6h-7V9h7zM5 19V5h14v2h-6c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h6v2H5z"></path> <circle cx="16" cy="12" r="1.5"></circle> </svg>
Balance
</div>
<output id="address_balance" class="amount-shown"></output>
</div>
<div class="flex align-center space-between sticky top-0" style="background-color: rgba(var(--foreground-color), 1); z-index: 2">
<h5>Transactions</h5>
<sm-chips id="filter_selector" onchange=${handleFiltering} role="listbox">
<sm-chip value="all" selected="" role="option" tabindex="0">All</sm-chip>
<sm-chip value="sent" role="option" tabindex="0">Sent</sm-chip>
<sm-chip value="received" role="option" tabindex="0">Received</sm-chip>
</sm-chips>
</div>
<ul id="transactions_list" class="observe-empty-state"></ul>
<div class="empty-state align-self-center text-center">Balance and transactions will appear here
</div>
</div>
<div id="tx_details" class="grid gap-2"></div>
</section>
</div>
`)
if (query) {
if (query !== getRef('search_query_input').value.trim())
getRef('search_query_input').value = query;
render.queryResult(query)
}
setTimeout(() => {
getRef('search_query_input').focusIn()
}, 200);
}
const [suggestedFee, setSuggestedFee] = $signal(0);
const [suggestedFeeStatus, setSuggestedFeeStatus] = $signal(['idle'])
const [feeType, setFeeType] = $signal('suggested')
function renderHome(state) {
router.addRoute('send', (state) => {
$effect(() => {
let feeSection = ''
if (feeType() === 'suggested') {
@ -817,20 +1245,6 @@
}
renderElem(getRef('page_container'), html`
<div class="flex flex-direction-column gap-1-5">
<menu class="flex gap-0-5">
<li>
<button class="button button--colored primary-action" onclick="openPopup('generate_address_popup')">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0V0z" fill="none" /> <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z" /> </svg>
Create new address
</button>
</li>
<li>
<button class="button button--colored primary-action" onclick="openPopup('convert_to_taproot_popup')">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0V0z" fill="none" /> <path d="M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z" /> </svg>
Retrieve Taproot address
</button>
</li>
</menu>
<h3>
Perform Transaction
</h3>
@ -887,7 +1301,7 @@
</div>
`)
})
}
})
async function calculateSuggestedFee() {
try {
getRef('send_tx_button').disabled = true
@ -1084,7 +1498,7 @@
<div id="transaction_result__description"> ${description} </div>
${success && result ? html`
<div class="grid gap-1">
<a id="transaction_link" class="flex align-center button--colored" href=${`https://ranchimall.github.io/btcwallet/#/check_details?query=${result}`} style="margin-top: 1.5rem;" target="_blank">
<a id="transaction_link" class="flex align-center button--colored" href=${`https://ranchimall.github.io/btcwallet/#/search?query=${result}`} style="margin-top: 1.5rem;" target="_blank">
See transaction on blockchain
<svg class="icon margin-left-0-5" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0z" fill="none"></path> <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"></path> </svg>
</a>
@ -1097,6 +1511,171 @@
`)
openPopup('transaction_result_popup')
}
// detect if given string is a bitcoin transaction id
function isTxId(str) {
return str.length === 64 && str.match(/^[0-9a-f]+$/i);
}
// detect if given string is a bitcoin address or transaction id
function checkQueryStringType(str) {
if (btcOperator.validateAddress(str) || /^bc1[a-z0-9]{59}$/i.test(str)) {
return 'address';
} else if (isTxId(str)) {
return 'txid';
} else {
return 'invalid';
}
}
function handleSearch(e) {
const query = getRef('search_query_input').value.trim();
console.log(router.state)
if (router.state.params.hasOwnProperty('query') && query === router.state.params.query) {
render.queryResult(query);
} else {
location.hash = `#/search?query=${query}`;
}
}
function handleFiltering() {
const address = getRef('search_query_input').value;
render.transactions(address)
}
function showAllAddresses(e) {
const addresses = e.target.closest('li').dataset.transactingAddresses
const addressesList = addresses.split(',').map(address => html.node`<a href="${`#/search?query=${address}`}" class="tx-participant wrap-around">${address}</a>`)
e.target.closest('button').before(...addressesList)
e.target.closest('button').remove()
}
let changingFeeOf = null
async function initFeeChange(e) {
const button = e.target.closest('button')
buttonLoader(button, true)
const txid = button.closest('li').dataset.txid
changingFeeOf = txid
try {
const { inputs, outputs, fee: previousFee } = await btcOperator.getTx(txid)
const isMultisig = inputs.some(input => ["multisig", "multisigBech32"].includes(btcOperator.validateAddress(input.address)))
let senders = []
let requiredSignatures = 0
if (isMultisig) {
const details = btcOperator.deserializeTx(await btcOperator.getTx.hex(txid))
senders = btcOperator.extractLastHexStrings(details.witness).flatMap((hex) => {
const { address, required: requiredSignatures, pubKeys } = btcOperator.decodeRedeemScript(hex) || {}
console.log(btcOperator.decodeRedeemScript(hex))
return pubKeys.map(pubKey => btcOperator.bech32Address(pubKey))
})
} else {
senders = inputs.map(input => input.address)
}
const receivers = outputs.map(output => output.address)
const uniqueReceivers = outputs.reduce((acc, { address, value }) => {
if (acc[address]) {
acc[address] += value
} else {
acc[address] = value
}
return acc
}, {})
const amounts = outputs.map(output => 0.00000005)
let recommendedFee = null
if (!isMultisig) {
const { fee } = await btcOperator.createTx(senders, receivers, amounts)
if (fee > previousFee)
recommendedFee = fee
}
renderElem(getRef('increase_fee_popup_content'), html`
<sm-form style="--gap: 2rem">
<div class="grid gap-0-5">
<h4>Senders</h4>
<ul class="grid gap-0-5">
${[...new Set(senders)].map((address) => html.node/*html*/`<li class="increase-fee-sender grid gap-1">
<div>
<div class="label">Address</div>
<b class="sender__address wrap-around">${address}</b>
</div>
<sm-input class="sender__private-key password-field" type="password" placeholder="Private Key" animate required>
<svg class="icon" slot="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <g> <rect fill="none" height="24" width="24"></rect> </g> <g> <path d="M21,10h-8.35C11.83,7.67,9.61,6,7,6c-3.31,0-6,2.69-6,6s2.69,6,6,6c2.61,0,4.83-1.67,5.65-4H13l2,2l2-2l2,2l4-4.04L21,10z M7,15c-1.65,0-3-1.35-3-3c0-1.65,1.35-3,3-3s3,1.35,3,3C10,13.65,8.65,15,7,15z"></path> </g> </svg>
<label slot="right" class="interact">
<input type="checkbox" class="hidden" autocomplete="off" readonly="" onchange="togglePrivateKeyVisibility(this)">
<svg class="icon invisible" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <title>Hide password</title> <path d="M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z" fill="none"></path> <path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"></path> </svg>
<svg class="icon visible" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <title>Show password</title> <path d="M0 0h24v24H0z" fill="none"></path> <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"></path> </svg>
</label>
</sm-input>
</li>`)}
</ul>
</div>
<div class="grid gap-0-5">
<h4>Receivers</h4>
<ul class="grid gap-0-5">
${Object.entries(uniqueReceivers).map(([address, value]) => html.node/*html*/`<li class="increase-fee-receiver grid gap-1">
<div>
<div class="label">Address</div>
<b class="wrap-around">${address}</b>
</div>
<div>
<div class="label">Amount</div>
<b>${formatAmount(getConvertedAmount(value))}</b>
</div>
</li>`)}
</ul>
</div>
<div class="grid gap-0-5">
<p>
Previous fee: <b>${formatAmount(getConvertedAmount(previousFee))}</b> ${recommendedFee ? html`| Recommended fee: <b>${formatAmount(getConvertedAmount(recommendedFee))}</b>` : ''}
</p>
<sm-input id="new_fee" placeholder="New fee" type="number" min=${getConvertedAmount(previousFee)} step="0.00000001" error-text=${`New fee should be greater than ${formatAmount(getConvertedAmount(previousFee))}`} animate required>
<div class="currency-symbol flex" slot="icon"> </div>
</sm-input>
</div>
<div class="multi-state-button">
<button id="increase_fee" class="button button--primary" onclick=${() => increaseFee(isMultisig)} type="submit">Increase fee</button>
</div>
</sm-form>
`)
document.getElementById('new_fee').querySelector('.currency-symbol').innerHTML = currencyIcons[selectedCurrency]
openPopup('increase_fee_popup')
} catch (e) {
console.error(e)
} finally {
buttonLoader(button, false)
}
}
async function increaseFee(isMultisig = false) {
buttonLoader(document.getElementById('increase_fee'), true)
const newFee = parseFloat((parseFloat(document.getElementById('new_fee').value.trim()) / (globalExchangeRate[selectedCurrency] || 1)).toFixed(8))
const privateKeys = []
document.querySelectorAll('.increase-fee-sender').forEach(sender => {
const address = sender.querySelector('.sender__address').textContent.trim()
const privateKey = sender.querySelector('.sender__private-key').value.trim()
if (!btcOperator.verifyKey(address, privateKey))
return notify(`Invalid private key for address ${address}`, 'error')
if (privateKey) {
privateKeys.push(privateKey)
}
})
console.log(changingFeeOf, newFee, privateKeys)
try {
let signedTxHex
if (isMultisig) {
signedTxHex = await btcOperator.editFee_corewallet(changingFeeOf, newFee, privateKeys)
} else {
signedTxHex = await btcOperator.editFee(changingFeeOf, newFee, privateKeys)
}
btcOperator.broadcastTx(signedTxHex).then(txId => {
console.log(txId)
closePopup()
showTransactionResult('success', txId)
}).catch(e => {
notify(e, 'error')
}).finally(_ => {
buttonLoader(document.getElementById('increase_fee'), false)
changingFeeOf = null
})
} catch (err) {
notify(e, 'error')
buttonLoader(document.getElementById('increase_fee'), false)
}
}
</script>
<script type="text/javascript">
//This library uses API provided by chain.so (https://chain.so/)