xrpl-dev-portal/content/tutorials/get-started/get-started.md

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 and RippleAPI for JavaScript (ripple-lib) in your site's HTML. For example:

<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>

<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 and a list of transactions that were newly-validated in that ledger version, using the getLedger() method. 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.

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);

Run Reset

Output

<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>

3. Next Steps

Try editing the code from step 2 to do something different:

• Connect to the Testnet public server at wss://s.altnet.rippletest.net/ instead. Answer >
• Look up the details of a transaction using the getTransaction() method. For the id, use one of the transactionHashes from the getLedger() response! Answer >
• Convert the totalDrops from the response to decimal XRP. Answer >

Further Reading