mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-21 20:25:51 +00:00
107 lines
4.5 KiB
Markdown
107 lines
4.5 KiB
Markdown
# Get Started
|
|
|
|
The XRP Ledger is always online and entirely public. You can access it **directly from a web browser** with a few steps described in this page. Scroll down to get started!
|
|
|
|
## 1. Prerequisites
|
|
|
|
To access the XRP Ledger from a webpage, load [Lodash](https://lodash.com/) and [RippleAPI for JavaScript (ripple-lib)](rippleapi-reference.html) in your site's HTML. For example:
|
|
|
|
```html
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>
|
|
<script src="https://unpkg.com/ripple-lib@1.8.0/build/ripple-latest-min.js"></script>
|
|
```
|
|
|
|
<!-- SPELLING_IGNORE: lodash -->
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>
|
|
<script src="https://unpkg.com/ripple-lib@1.8.0/build/ripple-latest-min.js"></script>
|
|
|
|
On this page, that's already done, so continue to the next step!
|
|
|
|
|
|
## 2. First Script
|
|
|
|
The following code gets the latest [ledger version](ledgers.html) and a list of transactions that were newly-validated in that ledger version, using the [`getLedger()` method](rippleapi-reference.html#getledger). Try running it as-is, or change the code and see what happens.
|
|
|
|
**Tip:** If you can, open your browser's Developer Tools by pressing **F12**. The "Console" tab provides a native JavaScript console and can give insight into what code is running on any webpage.
|
|
|
|
<div id="step2">
|
|
<pre><code id="step2code">
|
|
const mainnet = new ripple.RippleAPI({
|
|
server: 'wss://s1.ripple.com'
|
|
});
|
|
|
|
(async function(api) {
|
|
await api.connect();
|
|
|
|
let response = await api.getLedger({
|
|
includeTransactions: true
|
|
});
|
|
console.log(response);
|
|
|
|
})(mainnet);
|
|
</code></pre>
|
|
<p>
|
|
<button type="button" id="step2button" class="btn btn-primary">Run</button>
|
|
<button type="reset" id="step2reset" class="btn btn-secondary-outline">Reset</button>
|
|
</p>
|
|
<h3>Output</h3>
|
|
<div id="step2resp"></div>
|
|
<link rel="stylesheet" type="text/css" href="assets/vendor/codemirror.css" />
|
|
<script src="assets/vendor/codemirror-js-json-lint.min.js"></script>
|
|
<script type="application/javascript">
|
|
const code_ex = $("#step2code");
|
|
const code_text = code_ex.text().trim();
|
|
code_ex.text("");
|
|
const cm = CodeMirror(code_ex.get(0), {
|
|
mode: 'javascript',
|
|
json: false,
|
|
smartIndent: false,
|
|
});
|
|
cm.setValue(code_text);
|
|
const cm_resp = CodeMirror($("#step2resp").get(0), {
|
|
mode: 'javascript',
|
|
json: false,
|
|
readOnly: true
|
|
});
|
|
let ret;
|
|
$("#step2button").click((evt) => {
|
|
const oldconsole = console;
|
|
console = {
|
|
log: (...args) => {
|
|
oldconsole.log(...args);
|
|
args.forEach(arg => cm_resp.setValue(JSON.stringify(arg, null, 2)))
|
|
}
|
|
}
|
|
Function(cm.getValue())();
|
|
});
|
|
$("#step2reset").click((evt) => {
|
|
cm.setValue(code_text);
|
|
});
|
|
function fill_ex_1() {
|
|
cm.setValue("const mainnet = new ripple.RippleAPI({\n server: 'wss://s.altnet.rippletest.net/'\n});\n\n(async function(api) {\n await api.connect();\n\n let response = await api.getLedger({\n includeTransactions: true\n });\n console.log(response);\n\n})(mainnet);");
|
|
$("html").animate({scrollTop: $("#step2").offset().top}, 500);
|
|
}
|
|
function fill_ex_2() {
|
|
cm.setValue("const mainnet = new ripple.RippleAPI({\n server: 'wss://s1.ripple.com'\n});\n\n(async function(api) {\n await api.connect();\n\n let response = await api.getLedger({\n includeTransactions: true\n });\n let tx_id = response.transactionHashes[0];\n let response2 = await api.getTransaction(tx_id);\n console.log(response2);\n\n})(mainnet);");
|
|
$("html").animate({scrollTop: $("#step2").offset().top}, 500);
|
|
}
|
|
function fill_ex_3() {
|
|
cm.setValue("const mainnet = new ripple.RippleAPI({\n server: 'wss://s1.ripple.com'\n});\n\n(async function(api) {\n await api.connect();\n\n let response = await api.getLedger({\n includeTransactions: true\n });\n console.log('Total XRP: '+api.dropsToXrp(response.totalDrops));\n\n})(mainnet);");
|
|
$("html").animate({scrollTop: $("#step2").offset().top}, 500);
|
|
}
|
|
</script>
|
|
</div>
|
|
|
|
## 3. Next Steps
|
|
|
|
Try editing the code from step 2 to do something different:
|
|
|
|
- Connect to the [Testnet](parallel-networks.html) public server at `wss://s.altnet.rippletest.net/` instead. [Answer >](javascript:fill_ex_1())
|
|
- Look up the details of a transaction using the [`getTransaction()` method](rippleapi-reference.html#gettransaction). For the `id`, use one of the `transactionHashes` from the `getLedger()` response! [Answer >](javascript:fill_ex_2())
|
|
- Convert the `totalDrops` from the response to decimal XRP. [Answer >](javascript:fill_ex_3())
|
|
|
|
## Further Reading
|
|
|
|
<!--{# Followed by bullet points automatically generated by the landing template #}-->
|