forked from Haircomber/combsite
-
Notifications
You must be signed in to change notification settings - Fork 0
/
claim.html
176 lines (164 loc) · 10.3 KB
/
claim.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Claim Haircomb</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css"> <!-- Link to your styles.css file -->
</head>
<body onLoad="javascript:loadClaims()">
<div class="header"></div>
<div class="chart-container">
<div class="data-above-chart">
<!-- Comb Price -->
<div class="comb-price">
<div class="price-container">
<div class="comb-price-text">Comb Price:</div>
<span id="combPriceDollars">Loading...</span>
</div>
</div>
<!-- Top Fee -->
<div class="top-fee">
<div class="circle-background">
<div class="top-fee-text">Top Fee:</div>
<span id="topFeeMBTC">Loading...</span><br>
<div id="topFeeAddr" class="p2wsh-address">Loading...</div><br>
</div>
</div>
<div class="mempool-transactions-box">
<div class="content-wrapper">
<ul id="transactionList">
<!-- Updated list items for mem pool transactions with mock data -->
<li>Loading...</li>
<!-- ... more list items ... -->
</ul>
</div>
</div>
</div>
<canvas id="myChart"></canvas>
</div>
<div class="claim-guide-container">
<h2 class="claim-guide-title">How to Claim Haircomb</h2>
<div class="claim-guide-quote">"Every BTC block, one instance of COMB is spawned. In order to claim it, you need to get one of your bc1 stealth addresses to be the highest, unseen P2WSH address on the block. This is done by sending a very small amount of BTC (330 sats) to the address in question, as well as paying a large fee to the BTC miner. BTC miners almost always order the addresses on BTC blocks by fee size, so if you pay a higher fee than every other P2WSH address on the block, your address will likely be the highest, and you’ll get to claim the spawned COMB." <a href="https://21teeth.org/docs/haircomb/index.html" target="_blank" class="text-link">-21teeth</a></div>
<p class="claim-guide-text">1. Install <a href="https://electrum.org/" target="_blank" class="text-link">Electrum</a> or any Bitcoin wallet that allows customizable fees and fund it. At least 0.001 BTC is recommended to attempt some claims.</p>
<p class="claim-guide-text">2: Open <a href="https://core.haircomber.com/ui/index.html" target="_blank" class="text-link">Haircomb Core</a> and create your wallet.<br>-Wallet Tab<br>-Mainnet Key Generate<br><img src="guidepics/mainnet.png" alt="Mainnet" class="step-image">
-Export Tab<br><img src="guidepics/export.png" alt="Export" class="step-image">-Name and save your wallet file. History is saved off-chain, so you'll carry your wallet file instead of copying a seed phrase.<br></p>
<p class="claim-guide-text">3: Get your one-use stealth address.<br>-Wallet Tab<br>-Click on the key you generated<br>-You'll see some key info, click on the green "Stealth Addresses" button.<br><img src="guidepics/keyinfo.png" alt="keyinfo" class="step-image">-You'll see a list of your stealth addresses on the right. Each is used once to attempt a claim.<img src="guidepics/stealthkeys.png" alt="stealthkeys" class="step-image">-Click a key from the list, the bc1 stealth address you need will be at the bottom left in the 'Stealth address' info.<br><img src="guidepics/bc1address.png" alt="bc1address" class="step-image"></p>
<p class="claim-guide-text">4: Set up Electrum for bidding<br>-Open Electrum<br>-*Optional* Change the unit of measurement from mBTC to Sats.<br><img src="guidepics/sats.png" alt="sats" class="step-image">-Paste the bc1 stealth address and add 330 stats (.0033 mBTC) to the amount.<br><img src="guidepics/amount.png" alt="amount" class="step-image">-Click Pay<br>-In the top right, click the dropdown to allow fee editing.<br><img src="guidepics/feeEdit.png" alt="feeEdit" class="step-image"></p>
<p class="claim-guide-text">5. Bid for Top Fee<br><br>***RECOMMENDED FEE: 200-300 sats/vB***<br><br>-The chart above will give you an idea of current fees, but the accuracy is low (30%). Always assume it's higher!<br>-Current top fee is possibly 177 sats/vB<br><img src="guidepics/topfee.png" alt="topfee" class="step-image"><br>-Input a higher fee. Ex: 200 sats/vB.<br><img src="guidepics/inputfee.png" alt="inputfee" class="step-image"><br>-My transaction has taken the "Top Fee" spot. This is a good sign, but it doesn't always display here.<br><img src="guidepics/feedisplay.png" alt="feedisplay" class="step-image"></p>
<p class="claim-guide-text">6. Wait for results<br>-Once a new block is mined, you can check if you won or not.<br>-The chart above will refresh when a block is mined, or you can use a <a href="https://www.blockchain.com/explorer/assets/btc" target="_blank" class="text-link">Block Explorer</a> for more accurate data.<br><img src="guidepics/blockmined.png" alt="blockmined" class="step-image"></p>
<p class="claim-guide-text">7. Check results<br>-Open <a href="https://core.haircomber.com/ui/index.html" target="_blank" class="text-link">Haircomb Core</a><br>-Ensure your wallet is imported.<br>-Coins Tab<br>-Click "Load Claims" and wait for it to finish loading.<br><img src="guidepics/loadclaims.png" alt="loadclaims" class="step-image">-Wallet Tab<br>-In Key Info, click the blue "Claimed stack check" button<br><img src="guidepics/claimedcheck.png" alt="claimedcheck" class="step-image">-Your stealth addresses will be updated.<br><img src="guidepics/claimamount.png" alt="claimamount" class="step-image">-This image shows I succeeded once to claim 1.52 comb and I failed a separate time.</p>
<p class="claim-guide-text">8. Move the claimed comb to your wallet.<br>-Press the "Sweep Stealth Addresses" button.<br><img src="guidepics/sweepstealth.png" alt="sweepstealth" class="step-image">-Your key should be updated with your new balance.<br><img src="guidepics/balance.png" alt="balance" class="step-image">-Be sure to save/export your new wallet balance.<br>-Congrats, you claimed Haircomb!</p>
<!-- Add more steps as needed -->
</div>
</div>
<!-- Include Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/min/moment.min.js"></script>
<script>
// Initialize the chart with dynamic sizing and specific data intervals
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'scatter', // Use scatter for the dot chart
data: {
datasets: [{
label: 'Top Fee',
backgroundColor: '#c50f7e', // Change to pink for Top Fee dots
borderColor: 'white', // Optional: change the border color if needed
data: [],
showLine: true, // Line connecting the dots
pointRadius: 10, // Size of the points
pointHoverRadius: 12, // Size when hovered
fill: false // No fill under the line
},{
label: 'Random Fee',
backgroundColor: '#ffffff', // Change to white for Random Fee dots
borderColor: '#c50f7e', // Optional: change the border color if needed
data: [],
showLine: false, // No line connecting the dots
pointRadius: 9, // Size of the points
pointHoverRadius: 11, // Size when hovered
}]
},
defaults: {
elements: {
line: {
backgroundColor: '#ffffff',
borderColor: '#ffffff'
}
},
},
options: {
responsive: true, //Make sure the chart is responsive
scales: {
y: {
type: 'logarithmic',
suggestedMax: 100,
ticks: {
color: 'white',
font: {
size: 14,
},
},
grid: {
color: 'white',
lineWidth: 3,
drawBorder: true,
}
},
x: {
ticks: {
color: 'white',
callback: function(value, index, values) {
return moment(value).format('HH:mm');
},
font: {
size: 14,
},
},
grid: {
color: 'white',
lineWidth: 3,
drawBorder: true,
}
}
},
plugins: {
legend: {
labels: {
color: 'white', // This ensures the legend labels are white
usePointStyle: true,
}
},
tooltip: {
callbacks: {
label: function(context) {
var label = context.dataset.label || '';
if (label) {
label += ': ';
}
label += parseFloat(context.parsed.y).toFixed(3) + ' sats/vB';
return label;
}
}
}
},
layout: {
padding: {
top: 30,
right: 50,
bottom: 30,
left: 50
}
},
}
});
chart.update();
</script>
<script src="haircomb.js" defer></script>
<script src="claim.js" defer></script>
<footer></footer>
</body>
</html>