Commit 29ee8701 authored by Daniel Edgecumbe's avatar Daniel Edgecumbe

Various style tweaks, split Wallet (receive) and Wallet (send)

parent 9a533aac
......@@ -336,17 +336,20 @@ div#txcont {
margin: 2rem;
}
div#txtable {
div.txtable {
margin-top: 1rem;
display: grid;
grid-gap: 2rem;
grid-gap: 1rem;
}
div.tx {
text-align: center;
border: 1px dotted lightgray;
background-color: var(--neutral-5);
border-radius: 0.3rem;
}
div.tx.new {
background-color: #ccccff;
color: var(--neutral-6);
background-color: var(--primary-3);
}
div.tx span {
display: block;
......@@ -458,3 +461,30 @@ video#qrscan {
background-color: var(--neutral-5);
border-radius: 0.3rem;
}
div#walletsend {
display: grid;
grid-gap: 1rem;
margin: 1rem;
grid-template-columns: 1fr 2fr;
}
div#walletsendinputs {
display: grid;
grid-gap: 1rem;
}
div#wallet_createpsbt {
background-color: var(--neutral-4);
border-radius: 0.3rem;
display: grid;
grid-gap: 0;
}
div#wallet_createpsbt span {
display: block;
font-weight: bold;
font-family: monospace;
}
div#walletsend-right-top {
display: grid;
grid-gap: 1rem;
grid-template-columns: 1rem 2rem;
}
......@@ -178,8 +178,8 @@ along with bitcoin-top. If not, see <http://www.gnu.org/licenses/>.
</div>
<div id="tab-wallet" class="tab"
:class="tab === 'wallet' ? 'visible' : 'invisible'"
<div id="tab-wallet-receive" class="tab"
:class="tab === 'wallet-receive' ? 'visible' : 'invisible'"
>
<div id="txcont">
<div id="wallettable">
......@@ -199,51 +199,82 @@ along with bitcoin-top. If not, see <http://www.gnu.org/licenses/>.
<template v-if="unused_address">
<span class="waladdr">{{ unused_address }}</span>
</template>
<video
id="qrscan"
v-on:click="toggleScanner(null)">
<div>wat</div>
</video>
<template v-if="walletinfo">
<h2>send some bitcoins</h2>
<span>address</span>
<input
id="wallet_send_address"
type="text"
v-model="wallet_send_address"
v-on:change="submitCreatePSBT()"
>
</input>
<span>amount</span>
<input
id="wallet_send_amount"
type="text"
v-model="wallet_send_amount"
v-on:input="submitCreatePSBT()"
>
</input>
<span>feerate</span>
<input
id="wallet_send_feerate"
type="text"
v-model="wallet_send_feerate"
v-on:input="submitCreatePSBT()"
>
</input>
<input
v-if="wallet_createpsbt"
type="button"
v-on:click="submitSubmitPSBT()"
value="omg send"
</div>
<div class="txtable">
<template v-if="transactions">
<div
v-for="tx in transactions"
class="tx"
:class="(now - tx.timereceived) < 300 ? 'new' : ''"
>
</input>
<span class="txtxid">{{ tx.txid }}</span>
<span class="txaddr">{{ tx.address }}</span>
<span class="txage">{{ (now - tx.timereceived) | timeInterval }}</span>
<span class="txamt">{{ tx.amount }} BTC</span>
<span class="txconf">{{ tx.confirmations }} conf</span>
</div>
</template>
</div>
</div> <!-- txcont -->
</div>
<div id="tab-wallet-send" class="tab"
:class="tab === 'wallet-send' ? 'visible' : 'invisible'"
>
<div id="walletsend">
<div id="walletsend-left">
<video
id="qrscan"
v-on:click="toggleScanner(null)">
</video>
</div>
<div id="walletsend-right" v-if="walletinfo">
<div id="walletsend-right-top">
<div id="walletsendinputs">
<h2>send some bitcoins</h2>
<div class="walletsenddiv">
<span>address</span>
<input
id="wallet_send_address"
type="text"
v-model="wallet_send_address"
v-on:change="submitCreatePSBT()"
>
</input>
</div>
<div class="walletsenddiv">
<span>amount</span>
<input
id="wallet_send_amount"
type="text"
v-model="wallet_send_amount"
v-on:input="submitCreatePSBT()"
>
</input>
</div>
<div class="walletsenddiv">
<span>feerate</span>
<input
id="wallet_send_feerate"
type="text"
v-model="wallet_send_feerate"
v-on:input="submitCreatePSBT()"
>
</input>
</div>
<div class="walletsenddiv">
<input
v-if="wallet_createpsbt"
type="button"
v-on:click="submitSubmitPSBT()"
value="omg send"
>
</input>
</div>
</div>
<template v-if="wallet_createpsbt">
<div id="wallet_createpsbt" style="font-family: monospace;">
<div id="wallet_createpsbt" v-if="wallet_createpsbt">
<span>Fee: {{ wallet_createpsbt.fee }}</span>
<span
v-for="input in wallet_createpsbt.inputs"
......@@ -259,26 +290,27 @@ along with bitcoin-top. If not, see <http://www.gnu.org/licenses/>.
<template v-else>
out {{ vout.value }}: {{ vout.scriptPubKey.addresses[0] }}
</template>
</span>
</div>
</div>
</template>
</div>
<div id="txtable">
<template v-if="transactions">
<div
v-for="tx in transactions"
class="tx"
:class="(now - tx.timereceived) < 300 ? 'new' : ''"
>
<span class="txtxid">{{ tx.txid }}</span>
<span class="txaddr">{{ tx.address }}</span>
<span class="txage">{{ (now - tx.timereceived) | timeInterval }}</span>
<span class="txamt">{{ tx.amount }} BTC</span>
<span class="txconf">{{ tx.confirmations }} conf</span>
<div class="txtable" v-if="transactions">
<div
v-for="tx in truncatedTransactions"
class="tx"
:class="(now - tx.timereceived) < 300 ? 'new' : ''"
>
<span class="txtxid">{{ tx.txid }}</span>
<span class="txaddr">{{ tx.address }}</span>
<span class="txage">{{ (now - tx.timereceived) | timeInterval }}</span>
<span class="txamt">{{ tx.amount }} BTC</span>
<span class="txconf">{{ tx.confirmations }} conf</span>
</div>
</div>
</template>
</div>
</div>
</div> <!-- txcont -->
</div>
<div id="tab-block-template" class="tab"
......
......@@ -23,7 +23,8 @@ const INITIAL_RANGE = 480;
const TABS = [
["dashboard", "Dashboard"],
["wallet", "Wallet"],
["wallet-receive", "Wallet (receive)"],
["wallet-send", "Wallet (send)"],
["block-template", "Block template"],
["mempool-table", "Mempool table"],
["blocks", "Blocks"],
......@@ -135,7 +136,7 @@ onload = function() {
datas: DATAS,
range: 0,
ranges: RANGES,
tab: "wallet",
tab: "wallet-send",
tabs: TABS,
blocks: {},
staging: window.location.host.includes("test"),
......@@ -175,6 +176,9 @@ onload = function() {
},
},
computed: {
truncatedTransactions: function() {
return app.transactions.slice(0,3);
},
sortedBlocks: function() {
let l = [];
for (let hash of Object.keys(this.blocks)) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment