forked from pepae/ShutterAPIHongbao
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
149 lines (116 loc) · 7 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🎁 Shutter Hongbao - 红包赠送应用</title>
<script src="https://cdn.jsdelivr.net/npm/web3/dist/web3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1 class="title">🎁 Shutter Hongbao - 红包赠送应用</h1>
<!-- Sender Section -->
<div id="sender-section" class="section hidden">
<h2>Gong Xi Fa Cai! 恭喜发财 🎉</h2>
<p>Send a time-locked Hangbao to fellow crypto and not-yet crypto friends and admirers. Secure, private, and unlocked whenever you want.</p>
<p>发送一个时间锁定的红包给你的加密朋友或尚未接触加密的朋友和仰慕者。安全、私密，可随时解锁。</p>
<div class="disclaimer-box">
<strong>Disclaimer:</strong>
<ul>
<li>This is alpha stage, unaudited, and you should expect to lose everything.</li>
<li>It’s non-custodial with no server functionality; the private key is in the link, so handle with care.</li>
<li>This app is fully open source and free; whoever hosts it cannot be held liable. Use at your own risk.</li>
</ul>
</div>
<div class="wallet-access-section">
<p>If you've previously received a Shutter Hongbao, here's where you can access your wallet and manage your funds. <a href="wallet.html">Go to Wallet / 管理钱包</a></p>
<br>
</div>
<div class="hongbao-envelope">
<label for="hongbao-amount">💰 Amount (XDAI):</label>
<input type="number" id="hongbao-amount" class="input" step="0.01" placeholder="Enter amount (send at least 0.0001 xDAI to cover tx fees)">
<label for="unlock-time">⏰ Select Unlock Time:</label>
<select id="unlock-time" class="input">
<option value="60">1 minute from now</option>
<option value="300">5 minutes from now</option>
<option value="1800">30 minutes from now</option>
<option value="lunar-new-year">Lunar New Year (Jan 29, 2025, 12:36 UTC)</option>
<option value="custom">Custom</option>
</select>
<div id="custom-timestamp-container" class="hidden">
<label for="custom-timestamp">Enter Custom Date/Time:</label>
<input type="datetime-local" id="custom-timestamp" class="input">
</div>
<label for="hongbao-password">🔒 Password (optional):</label>
<input type="password" id="hongbao-password" class="input" placeholder="Enter a password to protect the Hongbao">
<button id="create-hongbao" class="button">Create Hongbao with MetaMask / 使用 MetaMask 创建红包</button>
<button id="create-hongbao-with-passkey" class="button">Fund Hongbao with Passkey Wallet / 使用 Passkey 钱包充值红包</button>
<p>Note, the receiver doesn't need any funds, nor a wallet to claim</p>
<p id="hongbao-details" class="details hidden"></p>
<p id="hongbao-link" class="link hidden"></p>
<div id="hongbao-visual" class="hongbao-visual hidden"></div>
</div>
</div>
<!-- Receiver Section -->
<div id="receiver-section" class="section hidden">
<h2>Gong Xi Fa Cai! 恭喜发财 🎉</h2>
<p class="details">
Someone gifted you a Hongbao with some xDAI on Gnosis Chain! This Hongbao is locked until Lunar New Year (or some other time that the sender has chosen)! It was encrypted with Shutter, and will unlock exactly on time thanks to encryption and decryption magic!
<br>
<a href="https://www.shutter.network/" target="_blank" rel="noopener noreferrer" class="shutter-link">
Curious how it works? Learn more about Shutter’s threshold encryption here!
</a>
</p>
<p class="details">
有人送了你一个包含 xDAI 的红包，基于 Gnosis Chain！这个红包锁定至春节（或发送者选择的其他时间）！红包使用 Shutter 加密技术加密，确保在正确的时间解锁，靠的是加密和解密的魔法！
<br>
<a href="https://www.shutter.network/" target="_blank" rel="noopener noreferrer" class="shutter-link">
好奇它是如何工作的？了解更多关于 Shutter 的阈值加密！
</a>
</p>
<div class="disclaimer-box">
<strong>Disclaimer:</strong>
<ul>
<li>This is alpha stage, unaudited, and you should expect to lose everything.</li>
<li>It’s non-custodial with no server functionality; the private key is in the link, so handle with care.</li>
<li>This app is fully open source and free; whoever hosts it cannot be held liable. Use at your own risk.</li>
</ul>
</div>
<div class="hongbao-envelope">
<label for="hongbao-key" class="secondary-label">🔑 Encrypted Key:</label>
<input type="text" id="hongbao-key" class="input secondary-input" placeholder="Paste encrypted key from link">
<label for="hongbao-timestamp" class="secondary-label">⏰ Timestamp:</label>
<input type="text" id="hongbao-timestamp" class="input secondary-input" placeholder="Paste timestamp from link">
<div id="password-container" class="hidden">
<label for="redeem-password">🔑 Password (if protected):</label>
<input type="password" id="redeem-password" class="input" placeholder="Enter the password">
<button id="decrypt-password" class="button">Decrypt with Password</button>
</div>
<h3>Countdown to Unlock:</h3>
<p id="countdown" class="countdown"></p>
<div id="redemption-options">
<button id="redeem-new-wallet" class="button hidden">Claim to New Wallet / 领取到新钱包</button>
<button id="toggle-other-options" class="button small hidden">Other Claiming Options</button>
<div id="other-claim-options" class="hidden">
<button id="redeem-existing-wallet" class="button">Claim to an Existing Wallet</button>
<button id="redeem-hongbao" class="button">Redeem to MetaMask</button>
</div>
</div>
<p id="redemption-details" class="details hidden"></p>
<p id="redeem-result" class="details hidden"></p>
<div id="hongbao-visual-redeem" class="hongbao-visual hidden"></div>
</div>
<div id="create-own-section">
<button id="create-own-hongbao" class="button">Create Your Own Hongbao / 创建自己的红包</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/ethers/dist/ethers.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
<script type="module" src="main.js"></script>
<script type="module" src="app.js"></script>
<script type="application/javascript" src="blst/blst.js"></script>
</body>
</html>