forked from elven-js/elven.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
315 lines (280 loc) · 13.6 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
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
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elven.js - custom browser only JavaScript SDK for Elrond blockchain</title>
<meta name="description"
content="Authenticate, sign and send transactions and messages on the Elrond blockchain in the browser. No need for bundlers, frameworks, etc. Just attach the script source, and you are ready to go.">
<meta property="og:type" content="website" />
<meta property="og:title" content="Elven.js - custom browser only JavaScript SDK for Elrond blockchain" />
<meta property="og:description"
content="Authenticate, sign and send transactions and messages on the Elrond blockchain in the browser. No need for bundlers, frameworks, etc. Just attach the script source, and you are ready to go." />
<meta property="og:image" content="" />
<meta property="og:url" content="https://elvenjs.netlify.app/" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Elven.js - custom browser only JavaScript SDK for Elrond blockchain" />
<meta name="twitter:description"
content="Authenticate, sign and send transactions and messages on the Elrond blockchain in the browser. No need for bundlers, frameworks, etc. Just attach the script source, and you are ready to go." />
<meta name="twitter:url" content="https://elvenjs.netlify.app/" />
<meta name="twitter:image" content="" />
<link href="demo-styles.css" rel="stylesheet" />
</head>
<body>
<div class="overlay">
<div class="loader">Loading...</div>
</div>
<div class="container">
<div class="header" id="header">
<button class="button" id="button-tx" style="display: none;">EGLD transaction</button>
<button class="button" id="button-tx-esdt" style="display: none;">ESDT transaction*</button>
<button class="button" id="button-mint" style="display: none;">Mint NFT</button>
<button class="button" id="button-query" style="display: none;">Query SC**</button>
<button class="button" id="button-login-extension" style="display: none;">Login with Extension</button>
<button class="button" id="button-login-mobile" style="display: none;">Login
with Maiar mobile</button>
<button class="button" id="button-logout" style="display: none;">Logout</button>
<a class="button right" href="https://github.com/juliancwirko/elven.js" target="_blank"
rel="noopener noreferrer">GitHub</a>
</div>
<div class="esdt-info">* For the ESDT transfer you will need to get the <a
href="https://devnet-explorer.elrond.com/tokens/BUILDO-890d14" target="_blank"
rel="noopener noreferrer">BUILDO-890d14</a> token from the faucet: <a
href="https://devnet-elrond-esdt-faucet.netlify.app/" target="_blank"
rel="noopener noreferrer">https://devnet-elrond-esdt-faucet.netlify.app</a> (you can also modify the hardcoded
token and test it with yours locally, check the sourcecode of this website for more info).</div>
<div class="esdt-info">** The query will trigger a 'getMintedPerAddressTotal' with a predefined user address using
the <a href="https://www.elven.tools">Elven Tools</a> Smart Contract.</div>
<div id="tx-hash-or-query-result" class="tx-hash-or-query-result"></div>
<div id="qr-code-container" class="qr-code-container"></div>
<h1>ElvenJS (demo)</h1>
<h4>Docs and code: <a href="https://github.com/juliancwirko/elven.js">elven.js</a></h4>
<p>Authenticate, sign and send transactions and messages on the Elrond blockchain in the browser. No need for
bundlers, frameworks, etc. Just attach the script source, and you are ready to go. You can incorporate it into
your preferred CMS framework like WordPress or an e-commerce system. Plus, it will also work on a standard static
HTML website.</p>
<p>For now, Maiar mobile app and Maiar browser extension are supported. Check GitHub for more info!</p>
<p>The primary purpose of this tool is to have a lite script for browser usage where you can authenticate and
sign/send transactions on the Elrond blockchain and do this without any additional build steps.</p>
<p>The purpose is to simplify the usage for primary use cases and open the doors for many frontend tools and
approaches.</p>
<p>The demo here presents the full path of initialization, logging in, and sending a
transaction.</p>
<p>
It is a script for browsers that incorporates ES6 modules. If you need fully functional
JavaScript/Typescript SDK (also in Nodejs), please use <a href="https://github.com/ElrondNetwork/elrond-sdk-erdjs"
target="_blank" rel="noopener noreferrer">erdjs</a>, an official Typescript Elrond SDK.
</p>
<h4>Soon there will be more docs and examples!</h4>
<h4>Check the source code of this page to get the complete code. All is static. The main script is
minified. But you can see the code in the <a href="https://github.com/juliancwirko/elven.js" target="_blank"
rel="noopener noreferrer">repository</a></h4>
<h3>Demo transactions/queries description (devnet):</h3>
<div>EGLD transaction:</div>
<ul>
<li>simple EGLD transfer on the devnet chain</li>
<li>it will go to a predefined wallet</li>
<li>the value will be 0,001 EGLD</li>
<li>after the transaction is finished below, you will find the transaction hash</li>
</ul>
<div>ESDT transaction:</div>
<ul>
<li>simple ESDT transfer on the devnet chain</li>
<li>it will go to a predefined wallet</li>
<li>it will be 1 BUILDO-890d14 token</li>
<li>after the transaction is finished below, you will find the transaction hash</li>
</ul>
<div>Mint transaction:</div>
<ul>
<li>Smart Contract call on the devnet chain</li>
<li>it will call predefined smart contract (Elven Tools Smart Contract) and mint NFT</li>
<li>after the transaction is finished below, you will find the transaction hash</li>
</ul>
<div>Query the smart contract:</div>
<ul>
<li>Smart Contract query. The Elven Tools smart contract has the 'getMintedPerAddressTotal' function</li>
<li>It will query using a predefined address and return the value</li>
<li>There is a custom logic for results decoding. In the future there will be tools for that</li>
<li>after the transaction is finished below, you will get the result of the query</li>
</ul>
<h3>Other demos:</h3>
<ol>
<li><a href="https://stackblitz.com/edit/web-platform-d4rx5v?file=index.html" target="_blank"
rel="noopener noreferrer">StackBlitz vanilla html demo</a></li>
<li><a href="https://stackblitz.com/edit/withastro-astro-pwareu?file=src%2Fpages%2Findex.astro" target="_blank"
rel="noopener noreferrer">StackBlitz Astro demo</a></li>
<li><a href="https://stackblitz.com/edit/vitejs-vite-rbo6du?file=src/App.tsx" target="_blank"
rel="noopener noreferrer">StackBlitz Solid.js demo</a></li>
</ol>
</div>
<script type="module">
// Just for the demo
import {
uiLoggedInState,
uiPending,
updateTxHashContainer,
base64ToDecimalHex,
updateQueryResultContainer
} from './demo-ui-tools.js'
// Elven.js tools
import {
ElvenJS,
Transaction,
Address,
TransactionPayload,
TokenPayment,
ContractCallPayloadBuilder,
ContractFunction,
U32Value,
ESDTTransferPayloadBuilder,
AddressValue,
} from './elven.js';
// Options are the defaults
const initElven = async () => {
const isInitialized = await ElvenJS.init(
{
apiUrl: 'https://devnet-api.elrond.com',
chainType: 'devnet',
apiTimeout: 10000,
onLoginPending: () => { uiPending(true) },
onLoggedIn: () => { uiLoggedInState(true); uiPending(false) },
onLogout: () => { uiLoggedInState(false); },
}
);
uiLoggedInState(isInitialized);
}
initElven();
document.getElementById('button-login-extension').addEventListener('click', async () => {
try {
await ElvenJS.login('maiar-browser-extension');
} catch (e) {
console.log('Login: Something went wrong, try again!', e?.message);
}
});
document.getElementById('button-login-mobile').addEventListener('click', async () => {
try {
await ElvenJS.login('maiar-mobile', {
qrCodeContainerId: 'qr-code-container',
});
} catch (e) {
console.log('Login: Something went wrong, try again!', e?.message);
}
});
document.getElementById('button-logout').addEventListener('click', async () => {
try {
const isLoggedOut = await ElvenJS.logout();
} catch (e) {
console.error(e.message);
}
});
// Simple EGLD transfer transaction
const egldTransferAddress = 'erd17a4wydhhd6t3hhssvcp9g23ppn7lgkk4g2tww3eqzx4mlq95dukss0g50f';
document.getElementById('button-tx').addEventListener('click', async () => {
updateTxHashContainer(false);
const demoMessage = 'Transaction demo from Elven.js!';
const tx = new Transaction({
nonce: ElvenJS.storage.get('nonce'),
receiver: new Address(egldTransferAddress),
gasLimit: 50000 + 1500 * demoMessage.length,
chainID: 'D',
data: new TransactionPayload(demoMessage),
value: TokenPayment.egldFromAmount(0.001),
sender: new Address(ElvenJS.storage.get('address')),
});
try {
uiPending(true);
const transaction = await ElvenJS.signAndSendTransaction(tx);
uiPending(false);
updateTxHashContainer(transaction.hash)
} catch (e) {
uiPending(false);
throw new Error(e?.message);
}
});
// Simple ESDT transfer transaction
const esdtTransferAddress = 'erd17a4wydhhd6t3hhssvcp9g23ppn7lgkk4g2tww3eqzx4mlq95dukss0g50f';
document.getElementById('button-tx-esdt').addEventListener('click', async () => {
updateTxHashContainer(false);
// The preconfigured transaction is for the 1 'BUILDO-890d14' ESDT token on the devnet
// You need to know its ticker and how many decimals places it has
// In this case, the token has 18 decimal places. You can check it in the Elrond devnet explorer
// You can use the community-based faucet to get the BUILDO-890d14 token: https://r3d4.fr/faucet
const payment = TokenPayment.fungibleFromAmount(
'BUILDO-890d14',
'1',
18
);
const data = new ESDTTransferPayloadBuilder().setPayment(payment).build();
const tx = new Transaction({
data,
gasLimit: 50000 + 1500 * data.length() + 300000,
receiver: new Address(esdtTransferAddress),
sender: new Address(ElvenJS.storage.get('address')),
chainID: 'D',
});
try {
uiPending(true);
const transaction = await ElvenJS.signAndSendTransaction(tx);
uiPending(false);
updateTxHashContainer(transaction.hash)
} catch (e) {
uiPending(false);
throw new Error(e?.message);
}
});
// Mint nft function
// It mints on the smart contract from: https://dapp-demo.elven.tools/
const nftMinterSmartContract = 'erd1qqqqqqqqqqqqqpgq5za2pty2tlfqhj20z9qmrrpjmyt6advcgtkscm7xep';
document.getElementById('button-mint').addEventListener('click', async () => {
updateTxHashContainer(false);
const data = new ContractCallPayloadBuilder()
.setFunction(new ContractFunction('mint'))
.setArgs([new U32Value(1)])
.build();
const tx = new Transaction({
data,
gasLimit: 14000000,
value: TokenPayment.egldFromAmount(0.01),
chainID: 'D',
receiver: new Address(nftMinterSmartContract),
sender: new Address(ElvenJS.storage.get('address')),
});
try {
uiPending(true);
const transaction = await ElvenJS.signAndSendTransaction(tx);
uiPending(false);
updateTxHashContainer(transaction.hash)
} catch (e) {
uiPending(false);
throw new Error(e?.message);
}
});
// Query the smart contract. It will query the same smart contract as for minting
// It will check how many tokens a particular address has minted already (the function name: getMintedPerAddressTotal)
// The function takes the address as argument
// The results have to be parsed. The result parser tool and abi registry will land in a separate library
// You can still decode simple types like numbers, boolean, and strings without them (example below)
// Read more about the Elven Tools Smart Contract here: https://www.elven.tools/docs/sc-endpoints.html
const minterAddress = "erd1druav0mlt7wzutla33kw80ueaalmec7mz2hus5svdmzlfj286qpstg674t";
document.getElementById('button-query').addEventListener('click', async () => {
try {
updateQueryResultContainer();
uiPending(true);
const results = await ElvenJS.queryContract({
address: new Address(nftMinterSmartContract),
func: new ContractFunction('getMintedPerAddressTotal'),
args: [new AddressValue(new Address(minterAddress))]
});
uiPending(false);
// Manual decoding of a simple type (number here), there will be additional tools for that
const hexVal = base64ToDecimalHex(results?.returnData?.[0]);
updateQueryResultContainer(`➡️ The result of the query is: ${parseInt(hexVal, 16)}`);
} catch (e) {
uiPending(false);
throw new Error(e?.message);
}
});
</script>
</body>
</html>