Skip to content

Commit f75d342

Browse files
serenebluesereneblue
committed
add copy button, fix typos, and improve css
1 parent daca840 commit f75d342

File tree

5 files changed

+190
-159
lines changed

5 files changed

+190
-159
lines changed

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ An open source testnet web wallet for Bitcoin and Litecoin
66

77
If you'd like to see blt-wallet in action, click [here](https://sereneblue.github.io/blt-wallet/). You can also save blt-wallet for local usage. Use the index.html file located in the `src` folder.
88

9+
Compatible with Android 7.0+ WebView.
10+
911
## Special Thanks
1012

1113
- Bitpay and Litecore for the Insight API

‎docs/index.html‎

Lines changed: 154 additions & 150 deletions
Original file line numberDiff line numberDiff line change
@@ -13,157 +13,161 @@
1313
</head>
1414
<body>
1515
<div id="app">
16-
<div id="sidebar" class="ui sidebar inverted vertical menu visible">
17-
<div class="item">
18-
<br/>
19-
<img class="ui centered image" src="https://rawgit.com/sereneblue/blt-wallet/master/src/resources/icon.png">
20-
<div class="ui inverted centered header">BLT Wallet</div>
21-
</div>
22-
<div class="item">
23-
<strong>What is BLT wallet?</strong>
16+
<div id="sidebar" class="ui sidebar inverted vertical menu visible">
17+
<div class="item">
18+
<br/>
19+
<img class="ui centered image" src="resources/icon.png">
20+
<div class="ui inverted centered header">BLT Wallet</div>
21+
</div>
22+
<div class="item">
23+
<strong>What is BLT wallet?</strong>
2424
<br/>A web wallet for easy access to Bitcoin and Litecoin testnets. Please bookmark this URL if you want to access the same wallet again.
25-
</div>
26-
<div class="item">
27-
<div class="four ui buttons">
28-
<button :class="color" class="ui basic small icon button" data-tooltip="Create new address" data-position="top left" @click="init(current)">
29-
<i class="plus icon"></i>
30-
</button>
31-
<button :class="color" class="ui basic small icon button" data-tooltip="Switch Currency" @click="switchCurrency();">
32-
<i class="exchange icon"></i>
33-
</button>
34-
<button :class="color" class="ui basic top left pointing small dropdown icon button" data-tooltip="Change Fiat Currency">
35-
<i class="money icon"></i>
36-
<div class="menu">
37-
<div class="divider"></div>
38-
<div class="header">
39-
Fiat
40-
</div>
41-
<div class="item" v-for="symbol, code in currencies" @click="updateFiat(code)">
42-
{{ symbol }} {{ code }}
43-
</div>
44-
</div>
45-
</button>
46-
<a href="https://github.com/sereneblue/blt-wallet" :class="color" class="ui basic small icon button" data-tooltip="View Source" data-position="top right">
47-
<i class="github alternate icon"></i>
48-
</a>
49-
</div>
50-
</div>
51-
<div class="item">
52-
Need some testnet coins?
53-
</div>
54-
<a class="item" :href="faucet[1]" v-for="faucet in faucets" target="_blank">
55-
{{ faucet[0] }}
56-
</a>
57-
</div>
58-
<div id="horizontal" class="ui inverted menu">
59-
<div class="item">
60-
<div class="ui inverted header">BLT Wallet</div>
61-
<div class="ui four buttons">
62-
<button :class="color" class="ui basic small icon button" data-tooltip="Create new address" data-position="bottom left" @click="init(current)">
63-
<i class="plus icon"></i>
64-
</button>
65-
<button :class="color" class="ui basic small icon button" data-tooltip="Switch Currency" data-position="bottom left" @click="switchCurrency();">
66-
<i class="exchange icon"></i>
67-
</button>
68-
<button :class="color" class="ui basic top left pointing small dropdown icon button" data-tooltip="Change Fiat Currency" data-position="bottom left">
69-
<i class="money icon"></i>
70-
<div class="menu">
71-
<div class="divider"></div>
72-
<div class="header">
73-
Fiat
74-
</div>
75-
<div class="item" v-for="symbol, code in currencies" @click="updateFiat(code)">
76-
{{ symbol }} {{ code }}
77-
</div>
78-
</div>
79-
</button>
80-
<button :class="color" class="ui basic top left pointing small dropdown icon button" data-tooltip="Get coins" data-position="bottom left">
81-
<i class="money icon"></i>
82-
<div class="menu">
83-
<div class="divider"></div>
84-
<div class="header">
85-
Faucets
86-
</div>
87-
<div class="item" :href="faucet[1]" v-for="faucet in faucets" target="_blank">
88-
{{ faucet[0] }}
89-
</div>
90-
</div>
91-
</button>
92-
</div>
93-
</div>
94-
</div>
95-
<div class="pusher">
96-
<div class="ui inverted teal vertical masthead center aligned segment" id="price-header">
97-
<div class="price">
98-
<h1>{{ amount }}</h1>
99-
<h2>{{ fiat_amount }}</h2>
100-
<button :class="color" class="ui button" @click="showModal()">
101-
<i class="send outline icon"></i>
102-
Send
103-
</button>
104-
<h3>Address: {{ address }}</h3>
105-
</div>
106-
</div>
107-
<div class="ui center aligned container" id="transactions">
108-
<h2>Transactions</h2>
109-
<table class="ui very basic compact stackable table">
110-
<thead>
111-
<tr>
112-
<th></th>
113-
<th>Time</th>
114-
<th>Transaction ID</th>
115-
<th>Amount</th>
116-
</tr>
117-
</thead>
118-
<tbody>
119-
<tr v-for="tx in transactions">
120-
<td v-if="tx.vin[0].addr == address">
121-
<i class="medium circular inverted red arrow right icon"></i>
122-
<i v-if="tx.confirmations < 1" class="medium hourglass start icon">
123-
</td>
124-
<td v-else>
125-
<i class="medium circular inverted green arrow left icon"></i>
126-
<i v-if="tx.confirmations < 1" class="medium hourglass start icon">
127-
</td>
128-
<td><span v-bind:data-livestamp="tx.time"></span></td>
129-
<td><a v-bind:href="baseURL + '/tx/' + tx.txid" target="_blank">{{ tx.txid }}</a></td>
130-
<td v-if="tx.vin[0].addr == address" class="negative">-{{ tx.vout[0].value }} {{ symbol }}</td>
131-
<td v-else class="positive">+{{ getOutputValue(tx.vout) }} {{ symbol }}</td>
132-
</tr>
133-
</tbody>
134-
</table>
135-
</div>
136-
<audio id="audio" src="resources/ding.wav" preload="auto"></audio>
137-
</div>
138-
<div class="ui modal">
139-
<div class="header">Send Coins</div>
140-
<div class="content">
141-
<div class="ui form">
142-
<div class="field">
143-
<label>Amount (A .001 miner fee is deducted from your balance)</label>
144-
<div class="ui action input">
145-
<input id="send-amount" placeholder="Amount..." type="number">
146-
<button class="ui button" @click="maxAmount()">Max Amount</button>
147-
</div>
148-
</div>
149-
<div class="field">
150-
<label>Recipient Address</label>
151-
<input id="receive-address" placeholder="Address" type="text">
152-
</div>
153-
<button :class="color" class="ui button" id="send-button" onclick="sendTransaction();">
154-
Send
155-
</button>
156-
<button class="ui deny button" onclick="$('.modal').modal('hide');">
157-
Cancel
158-
</button>
159-
<div v-if="msg.title" :class="msg.status" class="ui message">
160-
<div class="header">{{ msg.title }}</div>
161-
<p>{{ msg.reason }}</p>
162-
</div>
163-
</div>
164-
</div>
165-
</div>
166-
</div>
25+
</div>
26+
<div class="item">
27+
<div class="four ui buttons">
28+
<button :class="color" class="ui basic small icon button" data-tooltip="Create new address" data-position="top left" @click="init(current)">
29+
<i class="plus icon"></i>
30+
</button>
31+
<button :class="color" class="ui basic small icon button" data-tooltip="Switch Currency" @click="switchCurrency();">
32+
<i class="exchange icon"></i>
33+
</button>
34+
<button :class="color" class="ui basic top left pointing small dropdown icon button" data-tooltip="Change Fiat Currency">
35+
<i class="money icon"></i>
36+
<div class="menu">
37+
<div class="divider"></div>
38+
<div class="header">
39+
Fiat
40+
</div>
41+
<div class="item" v-for="symbol, code in currencies" @click="updateFiat(code)">
42+
{{ symbol }} {{ code }}
43+
</div>
44+
</div>
45+
</button>
46+
<a href="https://github.com/sereneblue/blt-wallet" :class="color" class="ui basic small icon button" data-tooltip="View Source" data-position="top right">
47+
<i class="github alternate icon"></i>
48+
</a>
49+
</div>
50+
</div>
51+
<div class="item">
52+
Need some testnet coins?
53+
</div>
54+
<a class="item" :href="faucet[1]" v-for="faucet in faucets" target="_blank">
55+
{{ faucet[0] }}
56+
</a>
57+
</div>
58+
<div id="horizontal" class="ui inverted menu">
59+
<div class="item">
60+
<div class="ui inverted header">BLT Wallet</div>
61+
<div class="ui four buttons">
62+
<button :class="color" class="ui basic medium icon button" data-tooltip="Create new address" data-position="bottom left" @click="init(current)">
63+
<i class="large plus icon"></i>
64+
</button>
65+
<button :class="color" class="ui basic medium icon button" data-tooltip="Switch Currency" data-position="bottom left" @click="switchCurrency();">
66+
<i class="large exchange icon"></i>
67+
</button>
68+
<button :class="color" class="ui basic top left pointing medium dropdown icon button" data-tooltip="Change Fiat Currency" data-position="bottom left">
69+
<i class="large money icon"></i>
70+
<div class="menu">
71+
<div class="divider"></div>
72+
<div class="header">
73+
Fiat
74+
</div>
75+
<div class="item" v-for="symbol, code in currencies" @click="updateFiat(code)">
76+
{{ symbol }} {{ code }}
77+
</div>
78+
</div>
79+
</button>
80+
<button :class="color" class="ui basic top left pointing medium dropdown icon button" data-tooltip="Get coins" data-position="bottom left">
81+
<i class="large external share icon"></i>
82+
<div class="menu">
83+
<div class="divider"></div>
84+
<div class="header">
85+
Faucets
86+
</div>
87+
<div class="item" :href="faucet[1]" v-for="faucet in faucets" target="_blank">
88+
{{ faucet[0] }}
89+
</div>
90+
</div>
91+
</button>
92+
</div>
93+
</div>
94+
</div>
95+
<div class="pusher">
96+
<div class="ui inverted teal vertical masthead center aligned segment" id="price-header">
97+
<div class="price">
98+
<h1>{{ amount }}</h1>
99+
<h2>{{ fiat_amount }}</h2>
100+
<button :class="color" class="ui button" @click="showModal()">
101+
<i class="send outline icon"></i>
102+
Send
103+
</button>
104+
<button :class="color" class="ui button" @click="copyAddress()">
105+
<i class="copy icon"></i>
106+
Copy Address
107+
</button>
108+
<h3>Address: {{ address }}</h3>
109+
</div>
110+
</div>
111+
<div class="ui center aligned container" id="transactions">
112+
<h2>Transactions</h2>
113+
<table class="ui very basic compact stackable table">
114+
<thead>
115+
<tr>
116+
<th></th>
117+
<th>Time</th>
118+
<th>Transaction ID</th>
119+
<th>Amount</th>
120+
</tr>
121+
</thead>
122+
<tbody>
123+
<tr v-for="tx in transactions">
124+
<td v-if="tx.vin[0].addr == address">
125+
<i class="medium circular inverted red arrow right icon"></i>
126+
<i v-if="tx.confirmations < 1" class="medium hourglass start icon">
127+
</td>
128+
<td v-else>
129+
<i class="medium circular inverted green arrow left icon"></i>
130+
<i v-if="tx.confirmations < 1" class="medium hourglass start icon">
131+
</td>
132+
<td><span v-bind:data-livestamp="tx.time"></span></td>
133+
<td><a v-bind:href="baseURL + '/tx/' + tx.txid" target="_blank">{{ tx.txid }}</a></td>
134+
<td v-if="tx.vin[0].addr == address" class="negative">-{{ tx.vout[0].value }} {{ symbol }}</td>
135+
<td v-else class="positive">+{{ getOutputValue(tx.vout) }} {{ symbol }}</td>
136+
</tr>
137+
</tbody>
138+
</table>
139+
</div>
140+
<audio id="audio" src="resources/ding.wav" preload="auto"></audio>
141+
</div>
142+
<div class="ui modal">
143+
<div class="header">Send Coins</div>
144+
<div class="content">
145+
<div class="ui form">
146+
<div class="field">
147+
<label>Amount (A .001 miner fee is deducted from your balance)</label>
148+
<div class="ui action input">
149+
<input id="send-amount" placeholder="Amount..." type="number">
150+
<button class="ui button" @click="maxAmount()">Max Amount</button>
151+
</div>
152+
</div>
153+
<div class="field">
154+
<label>Recipient Address</label>
155+
<input id="receive-address" placeholder="Address" type="text">
156+
</div>
157+
<button :class="color" class="ui button" id="send-button" @click="sendTransaction()">
158+
Send
159+
</button>
160+
<button class="ui deny button" onclick="$('.modal').modal('hide');">
161+
Cancel
162+
</button>
163+
<div v-if="msg.title" :class="msg.status" class="ui message">
164+
<div class="header">{{ msg.title }}</div>
165+
<p>{{ msg.reason }}</p>
166+
</div>
167+
</div>
168+
</div>
169+
</div>
170+
</div>
167171
</body>
168172
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
169173
<script src="https://rawgit.com/sereneblue/blt-wallet/master/src/js/script.js"></script>

‎src/css/style.css‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
.hidden {
2+
position: absolute;
3+
left: 0px;
4+
top: 0px;
5+
z-index: -1;
6+
}
7+
18
@media only screen and (min-width: 501px) {
29
table {
310
padding: 2% 5% 0 5%;
@@ -91,7 +98,7 @@
9198
text-align: center;
9299
}
93100
}
94-
@media screen and (max-width: 500px) {
101+
@media screen and (max-width: 768px) {
95102
.pusher {
96103
padding-left: 0px;
97104
}
@@ -120,7 +127,7 @@
120127
}
121128
}
122129

123-
@media screen and (max-device-width: 500px) {
130+
@media screen and (max-device-width: 768px) {
124131
.pusher {
125132
padding-left: 0px;
126133
}

‎src/index.html‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -61,13 +61,13 @@
6161
<div class="ui inverted header">BLT Wallet</div>
6262
<div class="ui four buttons">
6363
<button :class="color" class="ui basic medium icon button" data-tooltip="Create new address" data-position="bottom left" @click="init(current)">
64-
<i class="plus icon"></i>
64+
<i class="large plus icon"></i>
6565
</button>
6666
<button :class="color" class="ui basic medium icon button" data-tooltip="Switch Currency" data-position="bottom left" @click="switchCurrency();">
67-
<i class="exchange icon"></i>
67+
<i class="large exchange icon"></i>
6868
</button>
6969
<button :class="color" class="ui basic top left pointing medium dropdown icon button" data-tooltip="Change Fiat Currency" data-position="bottom left">
70-
<i class="money icon"></i>
70+
<i class="large money icon"></i>
7171
<div class="menu">
7272
<div class="divider"></div>
7373
<div class="header">
@@ -79,7 +79,7 @@
7979
</div>
8080
</button>
8181
<button :class="color" class="ui basic top left pointing medium dropdown icon button" data-tooltip="Get coins" data-position="bottom left">
82-
<i class="money icon"></i>
82+
<i class="large external share icon"></i>
8383
<div class="menu">
8484
<div class="divider"></div>
8585
<div class="header">
@@ -102,6 +102,10 @@ <h2>{{ fiat_amount }}</h2>
102102
<i class="send outline icon"></i>
103103
Send
104104
</button>
105+
<button :class="color" class="ui button" @click="copyAddress()">
106+
<i class="copy icon"></i>
107+
Copy Address
108+
</button>
105109
<h3>Address: {{ address }}</h3>
106110
</div>
107111
</div>

0 commit comments

Comments
 (0)