mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-04 11:55:50 +00:00
Merge pull request #3234 from XRPLF/stepped-tutorial-demo
Javascript Get Started with code walkthrough
This commit is contained in:
Maria Shodunke
@@ -11,145 +11,148 @@ ul.nav.navbar-nav {
|
|||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
:root, :root.dark {
|
||||||
|
--navbar-height: 80px;
|
||||||
|
|
||||||
/* XRPL color palette; match to styles/_colors.scss
|
/* XRPL color palette; match to styles/_colors.scss
|
||||||
Some colors don't have a 10 equivalent so 9 is repeated.
|
Some colors don't have a 10 equivalent so 9 is repeated.
|
||||||
|
|
||||||
Note, at present these variables are mostly overridden by
|
These are in reverse order of the ones in styles/_colors.scss
|
||||||
styled-components variables which are in reverse order, so
|
so that they correspond to the same-named variables provided by
|
||||||
we can't actually use these variables as-is.
|
styled-components as part of Redocly.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/* Redocly doesn't have vars for grays by default */
|
/* Redocly doesn't have vars for grays by default */
|
||||||
--color-gray-1: #F5F5F7;
|
--color-gray-1: #111112;
|
||||||
--color-gray-2: #E0E0E1;
|
--color-gray-2: #232325;
|
||||||
--color-gray-3: #C1C1C2;
|
--color-gray-3: #343437;
|
||||||
--color-gray-4: #A2A2A4;
|
--color-gray-4: #454549;
|
||||||
--color-gray-5: #838386;
|
--color-gray-5: #838386;
|
||||||
--color-gray-6: #454549;
|
--color-gray-6: #A2A2A4;
|
||||||
--color-gray-7: #343437;
|
--color-gray-7: #C1C1C2;
|
||||||
--color-gray-8: #232325;
|
--color-gray-8: #E0E0E1;
|
||||||
--color-gray-9: #111112;
|
--color-gray-9: #F5F5F7;
|
||||||
--color-gray-10: var(--color-gray-9);
|
--color-gray-10: var(--color-gray-9);
|
||||||
|
|
||||||
/* color-red = XRPL $magenta */
|
/* color-red = XRPL $magenta */
|
||||||
--color-red-1: #FFE5F2;
|
--color-red-1: #4C0026;
|
||||||
--color-red-2: #FFB2D8;
|
--color-red-2: #4C0026;
|
||||||
--color-red-3: #FF80BF;
|
--color-red-3: #80003F;
|
||||||
--color-red-4: #FF4BA4;
|
--color-red-4: #B20058;
|
||||||
--color-red-5: #FF198B;
|
--color-red-5: #E50071;
|
||||||
--color-red-6: #E50071;
|
--color-red-6: #FF198B;
|
||||||
--color-red-7: #B20058;
|
--color-red-7: #FF4BA4;
|
||||||
--color-red-8: #80003F;
|
--color-red-8: #FF80BF;
|
||||||
--color-red-9: #4C0026;
|
--color-red-9: #FFB2D8;
|
||||||
--color-red-10: #4C0026;
|
--color-red-10: #FFE5F2;
|
||||||
|
|
||||||
/* color-green = XRPL $green */
|
/* color-green = XRPL $green */
|
||||||
--color-green-1: #D6FAE7;
|
--color-green-1: #0A2E1B;
|
||||||
--color-green-2: #ADF5CE;
|
--color-green-2: #145C35;
|
||||||
--color-green-3: #84F0B6;
|
--color-green-3: #1E8A50;
|
||||||
--color-green-4: #5BEB9D;
|
--color-green-4: #28B86A;
|
||||||
--color-green-5: #32E685;
|
--color-green-5: #2DCF78;
|
||||||
--color-green-6: #2DCF78;
|
--color-green-6: #32E685;
|
||||||
--color-green-7: #28B86A;
|
--color-green-7: #5BEB9D;
|
||||||
--color-green-8: #1E8A50;
|
--color-green-8: #84F0B6;
|
||||||
--color-green-9: #145C35;
|
--color-green-9: #ADF5CE;
|
||||||
--color-green-10: #0A2E1B;
|
--color-green-10: #D6FAE7;
|
||||||
|
|
||||||
/* color-gold = XRPL $yellow */
|
/* color-gold = XRPL $yellow */
|
||||||
--color-gold-1: #FEFFE5;
|
--color-gold-1: #4B4C00;
|
||||||
--color-gold-2: #FDFFB2;
|
--color-gold-2: #4B4C00;
|
||||||
--color-gold-3: #FCFF80;
|
--color-gold-3: #7D8000;
|
||||||
--color-gold-4: #FBFF4C;
|
--color-gold-4: #AEB200;
|
||||||
--color-gold-5: #FAFF19;
|
--color-gold-5: #E0E500;
|
||||||
--color-gold-6: #E0E500;
|
--color-gold-6: #FAFF19;
|
||||||
--color-gold-7: #AEB200;
|
--color-gold-7: #FBFF4C;
|
||||||
--color-gold-8: #7D8000;
|
--color-gold-8: #FCFF80;
|
||||||
--color-gold-9: #4B4C00;
|
--color-gold-9: #FDFFB2;
|
||||||
--color-gold-10: #4B4C00;
|
--color-gold-10: #FEFFE5;
|
||||||
|
|
||||||
/* color-blue = XRPL $blue */
|
/* color-blue = XRPL $blue */
|
||||||
--color-blue-1: #E5F5FF;
|
--color-blue-1: #001133;
|
||||||
--color-blue-2: #B2E0FF;
|
--color-blue-2: #002E4C;
|
||||||
--color-blue-3: #80CCFF;
|
--color-blue-3: #004D80;
|
||||||
--color-blue-4: #4BB7FF;
|
--color-blue-4: #006BB2;
|
||||||
--color-blue-5: #19A3FF;
|
--color-blue-5: #008AE5;
|
||||||
--color-blue-6: #008AE5;
|
--color-blue-6: #19A3FF;
|
||||||
--color-blue-7: #006BB2;
|
--color-blue-7: #4BB7FF;
|
||||||
--color-blue-8: #004D80;
|
--color-blue-8: #80CCFF;
|
||||||
--color-blue-9: #002E4C;
|
--color-blue-9: #B2E0FF;
|
||||||
--color-blue-10: #001133;
|
--color-blue-10: #E5F5FF;
|
||||||
|
|
||||||
/* color purple = XRPL $blue-purple */
|
/* color purple = XRPL $blue-purple */
|
||||||
--color-purple-1: #F0E5FF;
|
--color-purple-1: #20004C;
|
||||||
--color-purple-2: #D2B2FF;
|
--color-purple-2: #20004C;
|
||||||
--color-purple-3: #B480FF;
|
--color-purple-3: #350080;
|
||||||
--color-purple-4: #9A52FF;
|
--color-purple-4: #4A00B2;
|
||||||
--color-purple-5: #7919FF;
|
--color-purple-5: #5F00E5;
|
||||||
--color-purple-6: #5F00E5;
|
--color-purple-6: #7919FF;
|
||||||
--color-purple-7: #4A00B2;
|
--color-purple-7: #9A52FF;
|
||||||
--color-purple-8: #350080;
|
--color-purple-8: #B480FF;
|
||||||
--color-purple-9: #20004C;
|
--color-purple-9: #D2B2FF;
|
||||||
--color-purple-10: #20004C;
|
--color-purple-10: #F0E5FF;
|
||||||
|
|
||||||
/* color-magenta = XRPL $red-purple */
|
/* color-magenta = XRPL $red-purple */
|
||||||
--color-magenta-1: #FBE5FF;
|
--color-magenta-1: #40004C;
|
||||||
--color-magenta-2: #F2B2FF;
|
--color-magenta-2: #40004C;
|
||||||
--color-magenta-3: #EA80FF;
|
--color-magenta-3: #6B0080;
|
||||||
--color-magenta-4: #E24CFF;
|
--color-magenta-4: #9500B2;
|
||||||
--color-magenta-5: #D919FF;
|
--color-magenta-5: #C000E5;
|
||||||
--color-magenta-6: #C000E5;
|
--color-magenta-6: #D919FF;
|
||||||
--color-magenta-7: #9500B2;
|
--color-magenta-7: #E24CFF;
|
||||||
--color-magenta-8: #6B0080;
|
--color-magenta-8: #EA80FF;
|
||||||
--color-magenta-9: #40004C;
|
--color-magenta-9: #F2B2FF;
|
||||||
--color-magenta-10: #40004C;
|
--color-magenta-10: #FBE5FF;
|
||||||
|
|
||||||
/* XRPL doesn't have a color-cyan equivalent
|
/* XRPL doesn't have a color-cyan equivalent*
|
||||||
--color-cyan-1: #e6fffb;
|
--color-cyan-1: #002329;*
|
||||||
--color-cyan-2: #b5f5ec;
|
--color-cyan-2: #00474f;*
|
||||||
--color-cyan-3: #87e8de;
|
--color-cyan-3: #006d75;*
|
||||||
--color-cyan-4: #5cdbd3;
|
--color-cyan-4: #08979c;*
|
||||||
--color-cyan-5: #36cfc9;
|
--color-cyan-5: #13c2c2;*
|
||||||
--color-cyan-6: #13c2c2;
|
--color-cyan-6: #36cfc9;*
|
||||||
--color-cyan-7: #08979c;
|
--color-cyan-7: #5cdbd3;*
|
||||||
--color-cyan-8: #006d75;
|
--color-cyan-8: #87e8de;*
|
||||||
--color-cyan-9: #00474f;
|
--color-cyan-9: #b5f5ec;*
|
||||||
--color-cyan-10: #002329; */
|
--color-cyan-10: #e6fffb; */
|
||||||
|
|
||||||
/* color-yellow = XRPL $yellow */
|
/* color-yellow = XRPL $yellow */
|
||||||
--color-yellow-1: #FEFFE5;
|
--color-yellow-1: #4B4C00;
|
||||||
--color-yellow-2: #FDFFB2;
|
--color-yellow-2: #4B4C00;
|
||||||
--color-yellow-3: #FCFF80;
|
--color-yellow-3: #7D8000;
|
||||||
--color-yellow-4: #FBFF4C;
|
--color-yellow-4: #AEB200;
|
||||||
--color-yellow-5: #FAFF19;
|
--color-yellow-5: #E0E500;
|
||||||
--color-yellow-6: #E0E500;
|
--color-yellow-6: #FAFF19;
|
||||||
--color-yellow-7: #AEB200;
|
--color-yellow-7: #FBFF4C;
|
||||||
--color-yellow-8: #7D8000;
|
--color-yellow-8: #FCFF80;
|
||||||
--color-yellow-9: #4B4C00;
|
--color-yellow-9: #FDFFB2;
|
||||||
--color-yellow-10: #4B4C00;
|
--color-yellow-10: #FEFFE5;
|
||||||
|
|
||||||
/* XRPL doesn't have a color-lime equivalent
|
/* XRPL doesn't have a color-lime equivalent*
|
||||||
--color-lime-1: #fcffe6;
|
--color-lime-1: #254000;*
|
||||||
--color-lime-2: #f4ffb8;
|
--color-lime-2: #3f6600;*
|
||||||
--color-lime-3: #eaff8f;
|
--color-lime-3: #5b8c00;*
|
||||||
--color-lime-4: #d3f261;
|
--color-lime-4: #7cb305;*
|
||||||
--color-lime-5: #bae637;
|
--color-lime-5: #a0d911;*
|
||||||
--color-lime-6: #a0d911;
|
--color-lime-6: #bae637;*
|
||||||
--color-lime-7: #7cb305;
|
--color-lime-7: #d3f261;*
|
||||||
--color-lime-8: #5b8c00;
|
--color-lime-8: #eaff8f;*
|
||||||
--color-lime-9: #3f6600;
|
--color-lime-9: #f4ffb8;*
|
||||||
--color-lime-10: #254000; */
|
--color-lime-10: #fcffe6; */
|
||||||
|
|
||||||
/* XRPL doesn't have a color-geekblue equivalent
|
/* XRPL doesn't have a color-geekblue equivalent*
|
||||||
--color-geekblue-1: #f0f5ff;
|
--color-geekblue-1: #030852;*
|
||||||
--color-geekblue-2: #d6e4ff;
|
--color-geekblue-2: #061178;*
|
||||||
--color-geekblue-3: #adc6ff;
|
--color-geekblue-3: #10239e;*
|
||||||
--color-geekblue-4: #85a5ff;
|
--color-geekblue-4: #1d39c4;*
|
||||||
--color-geekblue-5: #597ef7;
|
--color-geekblue-5: #2f54eb;*
|
||||||
--color-geekblue-6: #2f54eb;
|
--color-geekblue-6: #597ef7;*
|
||||||
--color-geekblue-7: #1d39c4;
|
--color-geekblue-7: #85a5ff;*
|
||||||
--color-geekblue-8: #10239e;
|
--color-geekblue-8: #adc6ff;*
|
||||||
--color-geekblue-9: #061178;
|
--color-geekblue-9: #d6e4ff;*
|
||||||
--color-geekblue-10: #030852; */
|
--color-geekblue-10: #f0f5ff; */
|
||||||
|
|
||||||
/* Dark mode colors by default */
|
/* Dark mode colors by default */
|
||||||
--color-primary-bg: var(--color-gray-10);
|
--color-primary-bg: var(--color-gray-10);
|
||||||
@@ -162,30 +165,30 @@ ul.nav.navbar-nav {
|
|||||||
--color-primary-text-hover: #201dad;
|
--color-primary-text-hover: #201dad;
|
||||||
--color-primary-text: #161087;
|
--color-primary-text: #161087;
|
||||||
--color-primary-text-active: #0d086e;*/
|
--color-primary-text-active: #0d086e;*/
|
||||||
|
|
||||||
--link-color-primary: #fff;
|
--link-color-primary: white;
|
||||||
--link-decoration: underline;
|
--link-decoration: underline;
|
||||||
--link-font-weight: var(--font-weight-regular);
|
--link-font-weight: var(--font-weight-regular);
|
||||||
|
|
||||||
--link-color-primary-hover: #9a52ff;
|
--link-color-primary-hover: var(--color-purple-7)
|
||||||
--link-decoration-hover: underline;
|
--link-decoration-hover: underline;
|
||||||
|
|
||||||
--link-color-visited: #fff;
|
--link-color-visited: white;
|
||||||
--link-visited-decoration: underline;
|
--link-visited-decoration: underline;
|
||||||
|
|
||||||
--bg-color: var(--color-gray-10);
|
--bg-color: var(--color-gray-10);
|
||||||
--bg-color-raised: var(--color-gray-8);
|
--bg-color-raised: var(--color-gray-2);
|
||||||
--background-color: var(--bg-color);
|
--background-color: var(--bg-color);
|
||||||
|
|
||||||
--font-family-base: 'Work Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
--font-family-base: 'Work Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||||
--heading-font-family: var(--font-family-base);
|
--heading-font-family: var(--font-family-base);
|
||||||
|
|
||||||
--inline-code-font-family: "Space Mono", monospace;
|
--inline-code-font-family: "Space Mono", monospace;
|
||||||
--inline-code-text-color: #5beb9d; /* $green-400 */
|
--inline-code-text-color: var(--color-green-7);
|
||||||
--inline-code-bg-color: #0a2e1b; /* $green-1000 */
|
--inline-code-bg-color: var(--color-green-1);
|
||||||
--inline-code-border-radius: 0;
|
--inline-code-border-radius: 0;
|
||||||
|
|
||||||
--heading-anchor-color: #9a52ff;
|
--heading-anchor-color: var(--color-purple-7);
|
||||||
--h1-font-size: 3rem;
|
--h1-font-size: 3rem;
|
||||||
--h2-font-size: 2.5rem;
|
--h2-font-size: 2.5rem;
|
||||||
--h3-font-size: 2.125rem;
|
--h3-font-size: 2.125rem;
|
||||||
@@ -195,14 +198,18 @@ ul.nav.navbar-nav {
|
|||||||
--h5-font-size: 1.25rem;
|
--h5-font-size: 1.25rem;
|
||||||
--h5-line-height: 1.5rem;
|
--h5-line-height: 1.5rem;
|
||||||
|
|
||||||
|
--menu-container-padding-top: 0;
|
||||||
|
--md-content-padding: 4px 0;
|
||||||
|
--toc-offset-top: 2px;
|
||||||
|
|
||||||
--sidebar-border-color: transparent;
|
--sidebar-border-color: transparent;
|
||||||
--sidebar-bg-color: transparent;
|
--sidebar-bg-color: transparent;
|
||||||
--sidebar-margin-horizontal: 32px;
|
--sidebar-margin-horizontal: 32px;
|
||||||
|
|
||||||
--border-radius-md: 4px;
|
--border-radius-md: 4px;
|
||||||
|
|
||||||
--code-block-bg-color: #232325;
|
--code-block-bg-color: var(--color-gray-2);
|
||||||
--code-block-controls-bg-color: #232325;
|
--code-block-controls-bg-color: var(--color-gray-2);
|
||||||
--code-block-controls-border: none;
|
--code-block-controls-border: none;
|
||||||
--code-block-padding: 0 2rem 1.5rem 2rem;
|
--code-block-padding: 0 2rem 1.5rem 2rem;
|
||||||
|
|
||||||
@@ -216,56 +223,97 @@ ul.nav.navbar-nav {
|
|||||||
--footer-border-color: transparent;
|
--footer-border-color: transparent;
|
||||||
--footer-title-font-weight: 600;
|
--footer-title-font-weight: 600;
|
||||||
--footer-title-font-size: 1rem;
|
--footer-title-font-size: 1rem;
|
||||||
--footer-title-text-color: #A2A2A4;
|
--footer-title-text-color: var(--color-gray-6);
|
||||||
|
|
||||||
--menu-item-padding-horizontal: 0px;
|
--menu-item-padding-horizontal: 0px;
|
||||||
|
|
||||||
--md-list-left-padding: 40px;
|
--md-list-left-padding: 40px;
|
||||||
--md-table-header-bg-color: #32343E;
|
--md-list-margin: 0 0 20px 0;
|
||||||
--md-table-border-color: #32343E;
|
--md-table-header-bg-color: var(--color-gray-3);
|
||||||
|
--md-table-border-color: var(--color-gray-3);
|
||||||
|
|
||||||
--md-tabs-content-padding: 0;
|
--md-tabs-content-padding: 0;
|
||||||
|
--md-tabs-tab-wrapper-padding: 0;
|
||||||
|
|
||||||
|
--text-color-helper: var(--color-gray-6);
|
||||||
|
--color-text-primary: white;
|
||||||
|
--button-color-hover: white;
|
||||||
|
|
||||||
|
--text-color-secondary: var(--color-gray-9); /* inherited for adominition text color */
|
||||||
|
--admonition-success-bg-color: var(--color-green-2);
|
||||||
|
--admonition-info-bg-color: var(--color-blue-4);
|
||||||
|
/* none of the yellow shades in the XRPL palette work well with "warning"
|
||||||
|
admonitions, so leave it the default */
|
||||||
|
--admonition-danger-bg-color: var(--color-red-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
:root.light {
|
:root.light {
|
||||||
--link-color-primary-hover: #4A00B2;
|
--link-color-primary-hover: var(--color-purple-4);
|
||||||
--link-color-visited: #000;
|
--link-color-visited: black;
|
||||||
--text-color-secondary: #000;
|
--text-color-secondary: black;
|
||||||
--code-block-bg-color: #E0E0E1;
|
--code-block-bg-color: var(--color-gray-8);
|
||||||
--code-block-controls-bg-color: #E0E0E1;
|
--code-block-controls-bg-color: var(--color-gray-8);
|
||||||
--code-block-controls-border: none;
|
--code-block-controls-border: none;
|
||||||
--md-tabs-active-tab-bg-color: #C1C1C2;
|
--md-tabs-active-tab-bg-color: var(--color-gray-7);
|
||||||
|
|
||||||
--code-block-tokens-function-color: #B23C00;
|
|
||||||
--code-block-tokens-operator-color: #000;
|
|
||||||
--code-block-tokens-comment-color: #343437;
|
|
||||||
--code-block-tokens-string-color: #145C35;
|
|
||||||
--inline-code-bg-color: #E0E0E1;
|
|
||||||
|
|
||||||
--search-trigger-bg-color: #E0E0E1;
|
--inline-code-bg-color: var(--color-gray-8);
|
||||||
--search-trigger-color: #838386;
|
|
||||||
|
|
||||||
--language-picker-border-color: #C1C1C2;
|
--search-trigger-bg-color: var(--color-gray-8);
|
||||||
--language-picker-background-color: #E0E0E1;
|
--search-trigger-color: var(--color-gray-5);
|
||||||
--select-list-bg-color: #E0E0E1;
|
--modal-bg-color: var(--color-gray-9);
|
||||||
|
|
||||||
--footer-title-text-color: #000;
|
--language-picker-border-color: var(--color-gray-7);
|
||||||
--bg-color: var(--color-gray-1);
|
--language-picker-background-color: var(--color-gray-8);
|
||||||
--bg-color-raised: var(--color-gray-2);
|
--select-list-bg-color: var(--color-gray-8);
|
||||||
--button-content-color-link: #000;
|
|
||||||
|
|
||||||
--md-table-header-bg-color: var(--color-gray-2);
|
--footer-title-text-color: black;
|
||||||
--md-table-border-color: var(--color-gray-2);
|
--bg-color: var(--color-gray-9);
|
||||||
|
--bg-color-raised: var(--color-gray-8);
|
||||||
|
--button-content-color-link: black;
|
||||||
|
|
||||||
|
--md-table-header-bg-color: var(--color-gray-8);
|
||||||
|
--md-table-border-color: var(--color-gray-8);
|
||||||
|
|
||||||
|
--bg-color: var(--color-gray-8);
|
||||||
|
--code-panel-bg-color: var(--color-blue-7);
|
||||||
|
--layer-color-hover: var(--color-gray-9);
|
||||||
|
|
||||||
|
--code-block-text-color: var(--color-gray-1);
|
||||||
|
--code-block-tokens-comment-color: var(--color-gray-4);
|
||||||
|
--code-block-tokens-constant-color: var(--color-gray-1);
|
||||||
|
--code-block-tokens-function-color: var(--color-red-4);
|
||||||
|
--code-block-tokens-keyword-color: var(--color-magenta-5);
|
||||||
|
--code-block-tokens-operator-color: black;
|
||||||
|
--code-block-tokens-string-color: var(--color-green-3);
|
||||||
|
|
||||||
|
--bg-raised-gradient: "";
|
||||||
|
--text-color-helper: var(--color-gray-4);
|
||||||
|
--button-color-hover: black;
|
||||||
|
|
||||||
|
--admonition-success-bg-color: var(--color-green-9);
|
||||||
|
--admonition-info-bg-color: var(--color-blue-9);
|
||||||
|
--admonition-warning-bg-color: var(--color-yellow-9);
|
||||||
|
--admonition-danger-bg-color: var(--color-red-9);
|
||||||
}
|
}
|
||||||
|
|
||||||
:root.dark {
|
:root.dark {
|
||||||
--link-color-primary: #fff;
|
--link-color-primary: white;
|
||||||
--link-color-visited: #fff;
|
--link-color-visited: white;
|
||||||
--link-color-primary-hover: #9a52ff;
|
--link-color-primary-hover: var(--color-purple-7);
|
||||||
|
|
||||||
--search-highlight-text-color: #4BB7FF; /* color-blue-4 */
|
--navbar-bg-color: var(--color-gray-2); /* controls search box bg */
|
||||||
|
--modal-bg-color: var(--color-gray-2); /* controls search modal bg */
|
||||||
--code-block-tokens-comment-color: #C1C1C2; /* color-gray-3 */
|
--search-highlight-text-color: var(--color-blue-7);
|
||||||
|
|
||||||
|
--code-block-text-color: var(--color-gray-9);
|
||||||
|
--code-block-tokens-comment-color: var(--color-gray-7);
|
||||||
|
--code-block-tokens-constant-color: var(--color-gray-9);
|
||||||
|
--code-block-tokens-keyword-color: var(--color-magenta-8);
|
||||||
|
--code-block-tokens-string-color: var(--color-blue-8);
|
||||||
|
|
||||||
|
--code-panel-bg-color: var(--color-blue-3);
|
||||||
|
--layer-color-hover: var(--color-gray-3);
|
||||||
|
--bg-raised-gradient: "";
|
||||||
}
|
}
|
||||||
|
|
||||||
:root .form-control-plaintext {
|
:root .form-control-plaintext {
|
||||||
|
|||||||
135
_code-samples/get-started/js/README.md
Normal file
135
_code-samples/get-started/js/README.md
Normal file
@@ -0,0 +1,135 @@
|
|||||||
|
# Get Started Using JavaScript Library
|
||||||
|
|
||||||
|
Connects to the XRP Ledger, gets account information, and subscribes to ledger events using JavaScript.
|
||||||
|
|
||||||
|
To download the source code, see [Get Started Using JavaScript Library](http://xrpl.org/docs/tutorials/javascript/build-apps/get-started).
|
||||||
|
|
||||||
|
## Run the Code
|
||||||
|
|
||||||
|
**Node.js**
|
||||||
|
|
||||||
|
Quick setup and usage:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install
|
||||||
|
node ./get-acct-info.js
|
||||||
|
```
|
||||||
|
|
||||||
|
You should see output similar to the following:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
Connected to Testnet
|
||||||
|
|
||||||
|
Creating a new wallet and funding it with Testnet XRP...
|
||||||
|
Wallet: rMnXR9p2sZT9iZ6ew3iEqvBMyPts1ADc4i
|
||||||
|
Balance: 10
|
||||||
|
|
||||||
|
Account Testnet Explorer URL:
|
||||||
|
https://testnet.xrpl.org/accounts/rMnXR9p2sZT9iZ6ew3iEqvBMyPts1ADc4i
|
||||||
|
|
||||||
|
Getting account info...
|
||||||
|
{
|
||||||
|
"api_version": 2,
|
||||||
|
"id": 4,
|
||||||
|
"result": {
|
||||||
|
"account_data": {
|
||||||
|
"Account": "rMnXR9p2sZT9iZ6ew3iEqvBMyPts1ADc4i",
|
||||||
|
"Balance": "10000000",
|
||||||
|
"Flags": 0,
|
||||||
|
"LedgerEntryType": "AccountRoot",
|
||||||
|
"OwnerCount": 0,
|
||||||
|
"PreviousTxnID": "0FF9DB2FE141DD0DF82566A171B6AF70BB2C6EB6A53D496E65D42FC062C91A78",
|
||||||
|
"PreviousTxnLgrSeq": 9949268,
|
||||||
|
"Sequence": 9949268,
|
||||||
|
"index": "4A9C9220AE778DC38C004B2B17A08E218416D90E01456AFCF844C18838B36D01"
|
||||||
|
},
|
||||||
|
"account_flags": {
|
||||||
|
"allowTrustLineClawback": false,
|
||||||
|
"defaultRipple": false,
|
||||||
|
"depositAuth": false,
|
||||||
|
"disableMasterKey": false,
|
||||||
|
"disallowIncomingCheck": false,
|
||||||
|
"disallowIncomingNFTokenOffer": false,
|
||||||
|
"disallowIncomingPayChan": false,
|
||||||
|
"disallowIncomingTrustline": false,
|
||||||
|
"disallowIncomingXRP": false,
|
||||||
|
"globalFreeze": false,
|
||||||
|
"noFreeze": false,
|
||||||
|
"passwordSpent": false,
|
||||||
|
"requireAuthorization": false,
|
||||||
|
"requireDestinationTag": false
|
||||||
|
},
|
||||||
|
"ledger_hash": "304C7CC2A33B712BE43EB398B399E290C191A71FCB71784F584544DFB7C441B0",
|
||||||
|
"ledger_index": 9949268,
|
||||||
|
"validated": true
|
||||||
|
},
|
||||||
|
"type": "response"
|
||||||
|
}
|
||||||
|
|
||||||
|
Listening for ledger close events...
|
||||||
|
Ledger #9949269 validated with 0 transactions!
|
||||||
|
Ledger #9949270 validated with 0 transactions!
|
||||||
|
Ledger #9949271 validated with 0 transactions!
|
||||||
|
|
||||||
|
Disconnected
|
||||||
|
```
|
||||||
|
|
||||||
|
**Web**
|
||||||
|
|
||||||
|
To run the web example, open `index.html` in a web browser and wait for the results to appear on the page.
|
||||||
|
|
||||||
|
You should see output similar to the following:
|
||||||
|
|
||||||
|
```text
|
||||||
|
Connected to Testnet
|
||||||
|
Creating a new wallet and funding it with Testnet XRP...
|
||||||
|
Wallet: rf7CWJdNssSzQk2GtypYLVhyvGe8oHS3S
|
||||||
|
Balance: 10
|
||||||
|
View account on XRPL Testnet Explorer: rf7CWJdNssSzQk2GtypYLVhyvGe8oHS3S
|
||||||
|
|
||||||
|
Getting account info...
|
||||||
|
{
|
||||||
|
"api_version": 2,
|
||||||
|
"id": 5,
|
||||||
|
"result": {
|
||||||
|
"account_data": {
|
||||||
|
"Account": "rf7CWJdNssSzQk2GtypYLVhyvGe8oHS3S",
|
||||||
|
"Balance": "10000000",
|
||||||
|
"Flags": 0,
|
||||||
|
"LedgerEntryType": "AccountRoot",
|
||||||
|
"OwnerCount": 0,
|
||||||
|
"PreviousTxnID": "96E4B44F93EC0399B7ADD75489630C6A8DCFC922F20F6810D25490CC0D3AA12E",
|
||||||
|
"PreviousTxnLgrSeq": 9949610,
|
||||||
|
"Sequence": 9949610,
|
||||||
|
"index": "B5D2865DD4BF8EEDFEE2FD95DE37FC28D624548E9BBC42F9FBF61B618E98FAC8"
|
||||||
|
},
|
||||||
|
"account_flags": {
|
||||||
|
"allowTrustLineClawback": false,
|
||||||
|
"defaultRipple": false,
|
||||||
|
"depositAuth": false,
|
||||||
|
"disableMasterKey": false,
|
||||||
|
"disallowIncomingCheck": false,
|
||||||
|
"disallowIncomingNFTokenOffer": false,
|
||||||
|
"disallowIncomingPayChan": false,
|
||||||
|
"disallowIncomingTrustline": false,
|
||||||
|
"disallowIncomingXRP": false,
|
||||||
|
"globalFreeze": false,
|
||||||
|
"noFreeze": false,
|
||||||
|
"passwordSpent": false,
|
||||||
|
"requireAuthorization": false,
|
||||||
|
"requireDestinationTag": false
|
||||||
|
},
|
||||||
|
"ledger_hash": "7692673B8091899C3EEE6807F66B65851D3563F483A49A5F03A83608658473D6",
|
||||||
|
"ledger_index": 9949610,
|
||||||
|
"validated": true
|
||||||
|
},
|
||||||
|
"type": "response"
|
||||||
|
}
|
||||||
|
|
||||||
|
Listening for ledger close events...
|
||||||
|
Ledger #9949611 validated with 0 transactions
|
||||||
|
Ledger #9949612 validated with 1 transactions
|
||||||
|
Ledger #9949613 validated with 0 transactions
|
||||||
|
|
||||||
|
Disconnected
|
||||||
|
```
|
||||||
@@ -1,17 +1,11 @@
|
|||||||
// In browsers, use a <script> tag. In Node.js, uncomment the following line:
|
// You can also use a <script> tag in browsers or require('xrpl') in Node.js
|
||||||
// const xrpl = require('xrpl')
|
import xrpl from 'xrpl'
|
||||||
|
|
||||||
// Wrap code in an async function so we can use await
|
// Define the network client
|
||||||
async function main() {
|
const client = new xrpl.Client("wss://s.altnet.rippletest.net:51233")
|
||||||
|
await client.connect()
|
||||||
|
|
||||||
// Define the network client
|
// ... custom code goes here
|
||||||
const client = new xrpl.Client("wss://s.altnet.rippletest.net:51233")
|
|
||||||
await client.connect()
|
|
||||||
|
|
||||||
// ... custom code goes here
|
// Disconnect when done (If you omit this, Node.js won't end the process)
|
||||||
|
client.disconnect()
|
||||||
// Disconnect when done (If you omit this, Node.js won't end the process)
|
|
||||||
await client.disconnect()
|
|
||||||
}
|
|
||||||
|
|
||||||
main()
|
|
||||||
|
|||||||
@@ -1,39 +1,65 @@
|
|||||||
// Import the library
|
// Import the library
|
||||||
const xrpl = require("xrpl")
|
// @chunk {"steps": ["connect-tag"]}
|
||||||
|
import xrpl from "xrpl"
|
||||||
|
|
||||||
// Wrap code in an async function so we can use await
|
// Define the network client
|
||||||
async function main() {
|
const SERVER_URL = "wss://s.altnet.rippletest.net:51233/"
|
||||||
|
const client = new xrpl.Client(SERVER_URL)
|
||||||
|
await client.connect()
|
||||||
|
console.log("Connected to Testnet")
|
||||||
|
// @chunk-end
|
||||||
|
|
||||||
// Define the network client
|
// @chunk {"steps": ["get-account-create-wallet-tag"]}
|
||||||
const SERVER_URL = "wss://s.altnet.rippletest.net:51233/"
|
// Create a wallet and fund it with the Testnet faucet:
|
||||||
const client = new xrpl.Client(SERVER_URL)
|
console.log("\nCreating a new wallet and funding it with Testnet XRP...")
|
||||||
await client.connect()
|
const fund_result = await client.fundWallet()
|
||||||
|
const test_wallet = fund_result.wallet
|
||||||
|
console.log(`Wallet: ${test_wallet.address}`)
|
||||||
|
console.log(`Balance: ${fund_result.balance}`)
|
||||||
|
console.log('Account Testnet Explorer URL:')
|
||||||
|
console.log(` https://testnet.xrpl.org/accounts/${test_wallet.address}`)
|
||||||
|
// @chunk-end
|
||||||
|
|
||||||
// Create a wallet and fund it with the Testnet faucet:
|
// To generate a wallet without funding it, uncomment the code below
|
||||||
const fund_result = await client.fundWallet()
|
// @chunk {"steps": ["get-account-create-wallet-b-tag"]}
|
||||||
const test_wallet = fund_result.wallet
|
// const test_wallet = xrpl.Wallet.generate()
|
||||||
console.log(fund_result)
|
// @chunk-end
|
||||||
|
|
||||||
// Get info from the ledger about the address we just funded
|
// To provide your own seed, replace the test_wallet value with the below
|
||||||
const response = await client.request({
|
// @chunk {"steps": ["get-account-create-wallet-c-tag"]}
|
||||||
"command": "account_info",
|
// const test_wallet = xrpl.Wallet.fromSeed("your-seed-key")
|
||||||
"account": test_wallet.address,
|
// @chunk-end
|
||||||
"ledger_index": "validated"
|
|
||||||
})
|
|
||||||
console.log(response)
|
|
||||||
|
|
||||||
// Listen to ledger close events
|
// @chunk {"steps": ["query-xrpl-tag"]}
|
||||||
client.request({
|
// Get info from the ledger about the address we just funded
|
||||||
"command": "subscribe",
|
console.log("\nGetting account info...")
|
||||||
"streams": ["ledger"]
|
const response = await client.request({
|
||||||
})
|
"command": "account_info",
|
||||||
client.on("ledgerClosed", async (ledger) => {
|
"account": test_wallet.address,
|
||||||
console.log(`Ledger #${ledger.ledger_index} validated with ${ledger.txn_count} transactions!`)
|
"ledger_index": "validated"
|
||||||
})
|
})
|
||||||
|
console.log(JSON.stringify(response, null, 2))
|
||||||
|
// @chunk-end
|
||||||
|
|
||||||
// Disconnect when done so Node.js can end the process
|
// @chunk {"steps": ["listen-for-events-tag"]}
|
||||||
await client.disconnect()
|
// Listen to ledger close events
|
||||||
}
|
console.log("\nListening for ledger close events...")
|
||||||
|
client.request({
|
||||||
|
"command": "subscribe",
|
||||||
|
"streams": ["ledger"]
|
||||||
|
})
|
||||||
|
client.on("ledgerClosed", async (ledger) => {
|
||||||
|
console.log(`Ledger #${ledger.ledger_index} validated ` +
|
||||||
|
`with ${ledger.txn_count} transactions!`)
|
||||||
|
})
|
||||||
|
// @chunk-end
|
||||||
|
|
||||||
// call the async function
|
// @chunk {"steps": ["disconnect-node-tag"]}
|
||||||
main()
|
// Disconnect when done so Node.js can end the process.
|
||||||
|
// Delay this by 10 seconds to give the ledger event listener time to receive
|
||||||
|
// and display some ledger events.
|
||||||
|
setTimeout(async () => {
|
||||||
|
await client.disconnect();
|
||||||
|
console.log('\nDisconnected');
|
||||||
|
}, 10000);
|
||||||
|
// @chunk-end
|
||||||
|
|||||||
79
_code-samples/get-started/js/index.html
Normal file
79
_code-samples/get-started/js/index.html
Normal file
@@ -0,0 +1,79 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>XRPL.js Base Example</title>
|
||||||
|
<!-- @chunk {"steps": ["import-web-tag"]} -->
|
||||||
|
<script src="https://unpkg.com/xrpl/build/xrpl-latest-min.js"></script>
|
||||||
|
<!-- @chunk-end -->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>XRPL.js Get Started</h1>
|
||||||
|
<div id="output"></div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
(async () => {
|
||||||
|
const output = document.getElementById('output');
|
||||||
|
|
||||||
|
// @chunk {"steps": ["connect-tag"]}
|
||||||
|
// Define the network client
|
||||||
|
const SERVER_URL = "wss://s.altnet.rippletest.net:51233/"
|
||||||
|
const client = new xrpl.Client(SERVER_URL)
|
||||||
|
await client.connect()
|
||||||
|
output.innerHTML = '<p>Connected to Testnet</p>';
|
||||||
|
// @chunk-end
|
||||||
|
|
||||||
|
// @chunk {"steps": ["get-account-create-wallet-tag"]}
|
||||||
|
// Create a wallet and fund it with the Testnet faucet:
|
||||||
|
output.innerHTML += '<p>Creating a new wallet and funding it with Testnet XRP...</p>';
|
||||||
|
const fund_result = await client.fundWallet()
|
||||||
|
const test_wallet = fund_result.wallet
|
||||||
|
output.innerHTML += `<p>Wallet: ${test_wallet.address}</p>`;
|
||||||
|
output.innerHTML += `<p>Balance: ${fund_result.balance}</p>`;
|
||||||
|
output.innerHTML += `<p>View account on XRPL Testnet Explorer: <a href="https://testnet.xrpl.org/accounts/${test_wallet.address}" target="_blank">${test_wallet.address}</a></p>`;
|
||||||
|
// @chunk-end
|
||||||
|
|
||||||
|
// To generate a wallet without funding it, uncomment the code below
|
||||||
|
// @chunk {"steps": ["get-account-create-wallet-b-tag"]}
|
||||||
|
// const test_wallet = xrpl.Wallet.generate()
|
||||||
|
// @chunk-end
|
||||||
|
|
||||||
|
// To provide your own seed, replace the test_wallet value with the below
|
||||||
|
// @chunk {"steps": ["get-account-create-wallet-c-tag"]}
|
||||||
|
// const test_wallet = xrpl.Wallet.fromSeed("your-seed-key")
|
||||||
|
// @chunk-end
|
||||||
|
|
||||||
|
// @chunk {"steps": ["query-xrpl-tag"]}
|
||||||
|
// Get info from the ledger about the address we just funded
|
||||||
|
output.innerHTML += `<p>Getting account info...</p>`;
|
||||||
|
const response = await client.request({
|
||||||
|
"command": "account_info",
|
||||||
|
"account": test_wallet.address,
|
||||||
|
"ledger_index": "validated"
|
||||||
|
})
|
||||||
|
output.innerHTML += `<pre>${JSON.stringify(response, null, 2)}</pre>`;
|
||||||
|
// @chunk-end
|
||||||
|
|
||||||
|
// @chunk {"steps": ["listen-for-events-tag"]}
|
||||||
|
// Listen to ledger close events
|
||||||
|
output.innerHTML += '<p>Listening for ledger close events...</p>';
|
||||||
|
client.request({
|
||||||
|
"command": "subscribe",
|
||||||
|
"streams": ["ledger"]
|
||||||
|
})
|
||||||
|
client.on("ledgerClosed", async (ledger) => {
|
||||||
|
output.innerHTML += `<p>Ledger #${ledger.ledger_index} validated with ${ledger.txn_count} transactions</p>`;
|
||||||
|
})
|
||||||
|
// @chunk-end
|
||||||
|
|
||||||
|
// @chunk {"steps": ["disconnect-web-tag"]}
|
||||||
|
// Disconnect when done. Delay this by 10 seconds to give the ledger event listener time to
|
||||||
|
// receive and display some ledger events.
|
||||||
|
setTimeout(async () => {
|
||||||
|
await client.disconnect();
|
||||||
|
output.innerHTML += '<p>Disconnected</p>';
|
||||||
|
}, 10000);
|
||||||
|
// @chunk-end
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -1,5 +1,6 @@
|
|||||||
{
|
{
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"xrpl": "^4.0.0"
|
"xrpl": "^4.4.0"
|
||||||
}
|
},
|
||||||
|
"type": "module"
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,4 @@
|
|||||||
---
|
---
|
||||||
html: get-started-using-javascript-library.html
|
|
||||||
parent: javascript.html
|
|
||||||
seo:
|
seo:
|
||||||
description: Build an entry-level JavaScript application for querying the XRP Ledger.
|
description: Build an entry-level JavaScript application for querying the XRP Ledger.
|
||||||
top_nav_name: JavaScript
|
top_nav_name: JavaScript
|
||||||
@@ -9,30 +7,74 @@ labels:
|
|||||||
- Development
|
- Development
|
||||||
showcase_icon: assets/img/logos/javascript.svg
|
showcase_icon: assets/img/logos/javascript.svg
|
||||||
---
|
---
|
||||||
|
|
||||||
|
{% code-walkthrough
|
||||||
|
filesets=[
|
||||||
|
{
|
||||||
|
"files": ["/_code-samples/get-started/js/get-acct-info.js"],
|
||||||
|
"downloadAssociatedFiles": ["/_code-samples/get-started/js/package.json", "/_code-samples/get-started/js/get-acct-info.js", "/_code-samples/get-started/js/README.md"],
|
||||||
|
"when": { "environment": "Node" }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"files": ["/_code-samples/get-started/js/index.html"],
|
||||||
|
"downloadAssociatedFiles": ["/_code-samples/get-started/js/index.html", "/_code-samples/get-started/js/README.md"],
|
||||||
|
"when": { "environment": "Web" }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
filters={
|
||||||
|
"environment": {
|
||||||
|
"label": "Environment",
|
||||||
|
"items": [
|
||||||
|
{ "value": "Node" },
|
||||||
|
{ "value": "Web" },
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
%}
|
||||||
|
|
||||||
# Get Started Using JavaScript Library
|
# Get Started Using JavaScript Library
|
||||||
|
|
||||||
This tutorial guides you through the basics of building an XRP Ledger-connected application in JavaScript or TypeScript using the [`xrpl.js`](https://github.com/XRPLF/xrpl.js/) client library in either Node.js or web browsers.
|
This tutorial guides you through the basics of building an XRP Ledger-connected application in JavaScript using the [`xrpl.js`](https://github.com/XRPLF/xrpl.js/) client library in either Node.js or web browsers.
|
||||||
|
|
||||||
The scripts and config files used in this guide are {% repo-link path="_code-samples/get-started/js/" %}available in this website's GitHub Repository{% /repo-link %}.
|
## Goals
|
||||||
|
|
||||||
|
|
||||||
## Learning Goals
|
|
||||||
|
|
||||||
In this tutorial, you'll learn:
|
In this tutorial, you'll learn:
|
||||||
|
|
||||||
* The basic building blocks of XRP Ledger-based applications.
|
- The basic building blocks of XRP Ledger-based applications.
|
||||||
* How to connect to the XRP Ledger using `xrpl.js`.
|
- How to connect to the XRP Ledger using `xrpl.js`.
|
||||||
* How to get an account on the [Testnet](/resources/dev-tools/xrp-faucets) using `xrpl.js`.
|
- How to get an account on the [Testnet](/resources/dev-tools/xrp-faucets) using `xrpl.js`.
|
||||||
* How to use the `xrpl.js` library to look up information about an account on the XRP Ledger.
|
- How to use the `xrpl.js` library to look up information about an account on the XRP Ledger.
|
||||||
* How to put these steps together to create a JavaScript app or web-app.
|
- How to put these steps together to create a JavaScript app or web-app.
|
||||||
|
|
||||||
|
## Prerequisites
|
||||||
|
|
||||||
## Requirements
|
To complete this tutorial, you should meet the following guidelines:
|
||||||
|
|
||||||
To follow this tutorial, you should have some familiarity with writing code in JavaScript and managing small JavaScript projects. In browsers, any modern web browser with JavaScript support should work fine. In Node.js, **version 14** is recommended. Node.js versions 12 and 16 are also regularly tested.
|
- Have some familiarity with writing code in JavaScript.
|
||||||
|
- Have installed Node.js **version 20** or later in your development environment.
|
||||||
|
- If you want to build a web application, any modern web browser with JavaScript support should work fine.
|
||||||
|
|
||||||
|
## Source Code
|
||||||
|
|
||||||
## Install with npm
|
Click **Download** on the top right of the code preview panel to download the source code.
|
||||||
|
|
||||||
|
## Steps
|
||||||
|
|
||||||
|
Follow the steps to create a simple application with `xrpl.js`.
|
||||||
|
|
||||||
|
### 1. Install Dependencies
|
||||||
|
|
||||||
|
<!-- Web steps -->
|
||||||
|
{% step id="import-web-tag" when={ "environment": "Web" } %}
|
||||||
|
To load `xrpl.js` into your project, add a `<script>` tag to your HTML.
|
||||||
|
|
||||||
|
You can load the library from a CDN as in the example, or download a release and host it on your own website.
|
||||||
|
|
||||||
|
This loads the module into the top level as `xrpl`.
|
||||||
|
{% /step %}
|
||||||
|
|
||||||
|
<!-- Node.js steps -->
|
||||||
|
{% step id="install-node-tag" when={ "environment": "Node" } %}
|
||||||
|
|
||||||
Start a new project by creating an empty folder, then move into that folder and use [NPM](https://www.npmjs.com/) to install the latest version of xrpl.js:
|
Start a new project by creating an empty folder, then move into that folder and use [NPM](https://www.npmjs.com/) to install the latest version of xrpl.js:
|
||||||
|
|
||||||
@@ -40,65 +82,33 @@ Start a new project by creating an empty folder, then move into that folder and
|
|||||||
npm install xrpl
|
npm install xrpl
|
||||||
```
|
```
|
||||||
|
|
||||||
|
This updates your `package.json` file, or creates a new one if it didn't already exist.
|
||||||
|
|
||||||
## Start Building
|
Your `package.json` file should look something like this:
|
||||||
|
|
||||||
When you're working with the XRP Ledger, there are a few things you'll need to manage, whether you're adding XRP to your [account](../../../concepts/accounts/index.md), integrating with the [decentralized exchange](../../../concepts/tokens/decentralized-exchange/index.md), or [issuing tokens](../../../concepts/tokens/index.md). This tutorial walks you through basic patterns common to getting started with all of these use cases and provides sample code for implementing them.
|
|
||||||
|
|
||||||
Here are some steps you use in many XRP Ledger projects:
|
|
||||||
|
|
||||||
1. [Import the library.](#1-import-the-library)
|
|
||||||
1. [Connect to the XRP Ledger.](#2-connect-to-the-xrp-ledger)
|
|
||||||
1. [Get an account.](#3-get-account)
|
|
||||||
1. [Query the XRP Ledger.](#4-query-the-xrp-ledger)
|
|
||||||
1. [Listen for Events.](#5-listen-for-events)
|
|
||||||
|
|
||||||
### 1. Import the Library
|
|
||||||
|
|
||||||
How you load `xrpl.js` into your project depends on your development environment:
|
|
||||||
|
|
||||||
#### Web Browsers
|
|
||||||
|
|
||||||
Add a `<script>` tag such as the following to your HTML:
|
|
||||||
|
|
||||||
```html
|
|
||||||
<script src="https://unpkg.com/xrpl/build/xrpl-latest-min.js"></script>
|
|
||||||
```
|
|
||||||
|
|
||||||
You can load the library from a CDN as in the above example, or download a release and host it on your own website.
|
|
||||||
|
|
||||||
This loads the module into the top level as `xrpl`.
|
|
||||||
|
|
||||||
#### Node.js
|
|
||||||
|
|
||||||
Add the library using [npm](https://www.npmjs.com/). This updates your `package.json` file, or creates a new one if it didn't already exist:
|
|
||||||
|
|
||||||
```sh
|
|
||||||
npm install xrpl
|
|
||||||
```
|
|
||||||
|
|
||||||
Then import the library:
|
|
||||||
|
|
||||||
```js
|
|
||||||
const xrpl = require("xrpl")
|
|
||||||
```
|
|
||||||
|
|
||||||
|
{% code-snippet file="/_code-samples/get-started/js/package.json" language="json" /%}
|
||||||
|
{% /step %}
|
||||||
|
|
||||||
### 2. Connect to the XRP Ledger
|
### 2. Connect to the XRP Ledger
|
||||||
|
|
||||||
|
{% step id="connect-tag" %}
|
||||||
|
#### Connect to the XRP Ledger Testnet
|
||||||
|
|
||||||
To make queries and submit transactions, you need to connect to the XRP Ledger. To do this with `xrpl.js`, you create an instance of the `Client` class and use the `connect()` method.
|
To make queries and submit transactions, you need to connect to the XRP Ledger. To do this with `xrpl.js`, you create an instance of the `Client` class and use the `connect()` method.
|
||||||
|
|
||||||
{% admonition type="success" name="Tip" %}Many network functions in `xrpl.js` use [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) to return values asynchronously. The code samples here use the [`async/await` pattern](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await) to wait for the actual result of the Promises.{% /admonition %}
|
{% admonition type="success" name="Tip" %}Many network functions in `xrpl.js` use [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) to return values asynchronously. The code samples here use the [`async/await` pattern](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await) to wait for the actual result of the Promises.{% /admonition %}
|
||||||
|
|
||||||
{% code-snippet file="/_code-samples/get-started/js/base.js" language="js" /%}
|
The sample code shows you how to connect to the Testnet, which is one of the available [parallel networks](../../../concepts/networks-and-servers/parallel-networks.md).
|
||||||
|
{% /step %}
|
||||||
|
|
||||||
|
{% step id="connect-mainnet-tag"%}
|
||||||
#### Connect to the XRP Ledger Mainnet
|
#### Connect to the XRP Ledger Mainnet
|
||||||
|
|
||||||
The sample code in the previous section shows you how to connect to the Testnet, which is one of the available [parallel networks](../../../concepts/networks-and-servers/parallel-networks.md). When you're ready to move to production, you'll need to connect to the XRP Ledger Mainnet. You can do that in two ways:
|
When you're ready to move to production, you'll need to connect to the XRP Ledger Mainnet. You can do that in two ways:
|
||||||
|
|
||||||
* By [installing the core server](../../../infrastructure/installation/index.md) (`rippled`) and running a node yourself. The core server connects to the Mainnet by default, but you can [change the configuration to use Testnet or Devnet](../../../infrastructure/configuration/connect-your-rippled-to-the-xrp-test-net.md). [There are good reasons to run your own core server](../../../concepts/networks-and-servers/index.md#reasons-to-run-your-own-server). If you run your own server, you can connect to it like so:
|
- By [installing the core server](../../../infrastructure/installation/index.md) (`rippled`) and running a node yourself. The core server connects to the Mainnet by default, but you can [change the configuration to use Testnet or Devnet](../../../infrastructure/configuration/connect-your-rippled-to-the-xrp-test-net.md). [There are good reasons to run your own core server](../../../concepts/networks-and-servers/index.md#reasons-to-run-your-own-server). If you run your own server, you can connect to it like so:
|
||||||
|
|
||||||
```
|
```javascript
|
||||||
const MY_SERVER = "ws://localhost:6006/"
|
const MY_SERVER = "ws://localhost:6006/"
|
||||||
const client = new xrpl.Client(MY_SERVER)
|
const client = new xrpl.Client(MY_SERVER)
|
||||||
await client.connect()
|
await client.connect()
|
||||||
@@ -106,55 +116,185 @@ The sample code in the previous section shows you how to connect to the Testnet,
|
|||||||
|
|
||||||
See the example [core server config file](https://github.com/XRPLF/rippled/blob/c0a0b79d2d483b318ce1d82e526bd53df83a4a2c/cfg/rippled-example.cfg#L1562) for more information about default values.
|
See the example [core server config file](https://github.com/XRPLF/rippled/blob/c0a0b79d2d483b318ce1d82e526bd53df83a4a2c/cfg/rippled-example.cfg#L1562) for more information about default values.
|
||||||
|
|
||||||
* By using one of the available [public servers][]:
|
- By using one of the available [public servers][]:
|
||||||
|
|
||||||
```
|
```javascript
|
||||||
const PUBLIC_SERVER = "wss://xrplcluster.com/"
|
const PUBLIC_SERVER = "wss://xrplcluster.com/"
|
||||||
const client = new xrpl.Client(PUBLIC_SERVER)
|
const client = new xrpl.Client(PUBLIC_SERVER)
|
||||||
await client.connect()
|
await client.connect()
|
||||||
```
|
```
|
||||||
|
{% /step %}
|
||||||
|
|
||||||
### 3. Get Account
|
### 3. Get Account
|
||||||
|
|
||||||
The `xrpl.js` library has a `Wallet` class for handling the keys and address of an XRP Ledger account. On Testnet, you can fund a new account like this:
|
{% step id="get-account-create-wallet-tag" %}
|
||||||
|
#### Create and Fund a Wallet
|
||||||
|
|
||||||
{% code-snippet file="/_code-samples/get-started/js/get-acct-info.js" from="// Create a wallet" before="// Get info" language="js" /%}
|
The `xrpl.js` library has a `Wallet` class for handling the keys and address of an XRP Ledger account. On Testnet, you can fund a new account as shown in the example.
|
||||||
|
{% /step %}
|
||||||
|
|
||||||
If you only want to generate keys, you can create a new `Wallet` instance like this:
|
{% step id="get-account-create-wallet-b-tag" %}
|
||||||
|
#### (Optional) Generate a Wallet Only
|
||||||
|
|
||||||
```js
|
If you want to generate a wallet without funding it, you can create a new `Wallet` instance. Keep in mind that you need to send XRP to the wallet for it to be a valid account on the ledger.
|
||||||
const test_wallet = xrpl.Wallet.generate()
|
{% /step %}
|
||||||
```
|
|
||||||
|
|
||||||
Or, if you already have a seed encoded in [base58][], you can make a `Wallet` instance from it like this:
|
{% step id="get-account-create-wallet-c-tag" %}
|
||||||
|
#### (Optional) Use Your Own Wallet Seed
|
||||||
|
|
||||||
```js
|
To use an existing wallet seed encoded in [base58][], you can create a `Wallet` instance from it.
|
||||||
const test_wallet = xrpl.Wallet.fromSeed("sn3nxiW7v8KXzPzAqzyHXbSSKNuN9") // Test secret; don't use for real
|
{% /step %}
|
||||||
```
|
|
||||||
|
|
||||||
### 4. Query the XRP Ledger
|
### 4. Query the XRP Ledger
|
||||||
|
|
||||||
Use the Client's `request()` method to access the XRP Ledger's [WebSocket API](../../../references/http-websocket-apis/api-conventions/request-formatting.md). For example:
|
{% step id="query-xrpl-tag" %}
|
||||||
|
Use the Client's `request()` method to access the XRP Ledger's [WebSocket API](../../../references/http-websocket-apis/api-conventions/request-formatting.md).
|
||||||
{% code-snippet file="/_code-samples/get-started/js/get-acct-info.js" from="// Get info" before="// Listen to ledger close events" language="js" /%}
|
{% /step %}
|
||||||
|
|
||||||
|
|
||||||
### 5. Listen for Events
|
### 5. Listen for Events
|
||||||
|
|
||||||
|
{% step id="listen-for-events-tag" %}
|
||||||
You can set up handlers for various types of events in `xrpl.js`, such as whenever the XRP Ledger's [consensus process](../../../concepts/consensus-protocol/index.md) produces a new [ledger version](../../../concepts/ledgers/index.md). To do that, first call the [subscribe method][] to get the type of events you want, then attach an event handler using the `on(eventType, callback)` method of the client.
|
You can set up handlers for various types of events in `xrpl.js`, such as whenever the XRP Ledger's [consensus process](../../../concepts/consensus-protocol/index.md) produces a new [ledger version](../../../concepts/ledgers/index.md). To do that, first call the [subscribe method][] to get the type of events you want, then attach an event handler using the `on(eventType, callback)` method of the client.
|
||||||
|
{% /step %}
|
||||||
|
|
||||||
{% code-snippet file="/_code-samples/get-started/js/get-acct-info.js" from="// Listen to ledger close events" before="// Disconnect when done" language="js" /%}
|
### 6. Disconnect
|
||||||
|
|
||||||
|
{% step id="disconnect-node-tag" when={ "environment": "Node" } %}
|
||||||
|
Disconnect when done so Node.js can end the process. The example code waits 10 seconds before disconnecting to allow time for the ledger event listener to receive and display events.
|
||||||
|
{% /step %}
|
||||||
|
|
||||||
## Keep on Building
|
{% step id="disconnect-web-tag" when={ "environment": "Web" } %}
|
||||||
|
Disconnect from the ledger when done. The example code waits 10 seconds before disconnecting to allow time for the ledger event listener to receive and display events.
|
||||||
|
{% /step %}
|
||||||
|
|
||||||
Now that you know how to use `xrpl.js` to connect to the XRP Ledger, get an account, and look up information about it, you can also:
|
### 7. Run the Application
|
||||||
|
|
||||||
* [Send XRP](../../how-tos/send-xrp.md).
|
{% step id="run-app-node-tag" when={ "environment": "Node" } %}
|
||||||
* [Issue a Fungible Token](../../how-tos/use-tokens/issue-a-fungible-token.md)
|
Finally, in your terminal, run the application like so:
|
||||||
* [Set up secure signing](../../../concepts/transactions/secure-signing.md) for your account.
|
|
||||||
|
|
||||||
|
```sh
|
||||||
|
node get-acct-info.js
|
||||||
|
```
|
||||||
|
|
||||||
|
You should see output similar to the following:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
Connected to Testnet
|
||||||
|
|
||||||
|
Creating a new wallet and funding it with Testnet XRP...
|
||||||
|
Wallet: rMnXR9p2sZT9iZ6ew3iEqvBMyPts1ADc4i
|
||||||
|
Balance: 10
|
||||||
|
|
||||||
|
Account Testnet Explorer URL:
|
||||||
|
https://testnet.xrpl.org/accounts/rMnXR9p2sZT9iZ6ew3iEqvBMyPts1ADc4i
|
||||||
|
|
||||||
|
Getting account info...
|
||||||
|
{
|
||||||
|
"api_version": 2,
|
||||||
|
"id": 4,
|
||||||
|
"result": {
|
||||||
|
"account_data": {
|
||||||
|
"Account": "rMnXR9p2sZT9iZ6ew3iEqvBMyPts1ADc4i",
|
||||||
|
"Balance": "10000000",
|
||||||
|
"Flags": 0,
|
||||||
|
"LedgerEntryType": "AccountRoot",
|
||||||
|
"OwnerCount": 0,
|
||||||
|
"PreviousTxnID": "0FF9DB2FE141DD0DF82566A171B6AF70BB2C6EB6A53D496E65D42FC062C91A78",
|
||||||
|
"PreviousTxnLgrSeq": 9949268,
|
||||||
|
"Sequence": 9949268,
|
||||||
|
"index": "4A9C9220AE778DC38C004B2B17A08E218416D90E01456AFCF844C18838B36D01"
|
||||||
|
},
|
||||||
|
"account_flags": {
|
||||||
|
"allowTrustLineClawback": false,
|
||||||
|
"defaultRipple": false,
|
||||||
|
"depositAuth": false,
|
||||||
|
"disableMasterKey": false,
|
||||||
|
"disallowIncomingCheck": false,
|
||||||
|
"disallowIncomingNFTokenOffer": false,
|
||||||
|
"disallowIncomingPayChan": false,
|
||||||
|
"disallowIncomingTrustline": false,
|
||||||
|
"disallowIncomingXRP": false,
|
||||||
|
"globalFreeze": false,
|
||||||
|
"noFreeze": false,
|
||||||
|
"passwordSpent": false,
|
||||||
|
"requireAuthorization": false,
|
||||||
|
"requireDestinationTag": false
|
||||||
|
},
|
||||||
|
"ledger_hash": "304C7CC2A33B712BE43EB398B399E290C191A71FCB71784F584544DFB7C441B0",
|
||||||
|
"ledger_index": 9949268,
|
||||||
|
"validated": true
|
||||||
|
},
|
||||||
|
"type": "response"
|
||||||
|
}
|
||||||
|
|
||||||
|
Listening for ledger close events...
|
||||||
|
Ledger #9949269 validated with 0 transactions!
|
||||||
|
Ledger #9949270 validated with 0 transactions!
|
||||||
|
Ledger #9949271 validated with 0 transactions!
|
||||||
|
|
||||||
|
Disconnected
|
||||||
|
```
|
||||||
|
{% /step %}
|
||||||
|
|
||||||
|
{% step id="run-app-web-tag" when={ "environment": "Web" } %}
|
||||||
|
Open the `index.html` file in a web browser.
|
||||||
|
|
||||||
|
You should see output similar to the following:
|
||||||
|
|
||||||
|
```text
|
||||||
|
Connected to Testnet
|
||||||
|
Creating a new wallet and funding it with Testnet XRP...
|
||||||
|
Wallet: rf7CWJdNssSzQk2GtypYLVhyvGe8oHS3S
|
||||||
|
Balance: 10
|
||||||
|
View account on XRPL Testnet Explorer: rf7CWJdNssSzQk2GtypYLVhyvGe8oHS3S
|
||||||
|
|
||||||
|
Getting account info...
|
||||||
|
{
|
||||||
|
"api_version": 2,
|
||||||
|
"id": 5,
|
||||||
|
"result": {
|
||||||
|
"account_data": {
|
||||||
|
"Account": "rf7CWJdNssSzQk2GtypYLVhyvGe8oHS3S",
|
||||||
|
"Balance": "10000000",
|
||||||
|
"Flags": 0,
|
||||||
|
"LedgerEntryType": "AccountRoot",
|
||||||
|
"OwnerCount": 0,
|
||||||
|
"PreviousTxnID": "96E4B44F93EC0399B7ADD75489630C6A8DCFC922F20F6810D25490CC0D3AA12E",
|
||||||
|
"PreviousTxnLgrSeq": 9949610,
|
||||||
|
"Sequence": 9949610,
|
||||||
|
"index": "B5D2865DD4BF8EEDFEE2FD95DE37FC28D624548E9BBC42F9FBF61B618E98FAC8"
|
||||||
|
},
|
||||||
|
"account_flags": {
|
||||||
|
"allowTrustLineClawback": false,
|
||||||
|
"defaultRipple": false,
|
||||||
|
"depositAuth": false,
|
||||||
|
"disableMasterKey": false,
|
||||||
|
"disallowIncomingCheck": false,
|
||||||
|
"disallowIncomingNFTokenOffer": false,
|
||||||
|
"disallowIncomingPayChan": false,
|
||||||
|
"disallowIncomingTrustline": false,
|
||||||
|
"disallowIncomingXRP": false,
|
||||||
|
"globalFreeze": false,
|
||||||
|
"noFreeze": false,
|
||||||
|
"passwordSpent": false,
|
||||||
|
"requireAuthorization": false,
|
||||||
|
"requireDestinationTag": false
|
||||||
|
},
|
||||||
|
"ledger_hash": "7692673B8091899C3EEE6807F66B65851D3563F483A49A5F03A83608658473D6",
|
||||||
|
"ledger_index": 9949610,
|
||||||
|
"validated": true
|
||||||
|
},
|
||||||
|
"type": "response"
|
||||||
|
}
|
||||||
|
|
||||||
|
Listening for ledger close events...
|
||||||
|
Ledger #9949611 validated with 0 transactions
|
||||||
|
Ledger #9949612 validated with 1 transactions
|
||||||
|
Ledger #9949613 validated with 0 transactions
|
||||||
|
|
||||||
|
Disconnected
|
||||||
|
```
|
||||||
|
{% /step %}
|
||||||
|
|
||||||
## See Also
|
## See Also
|
||||||
|
|
||||||
@@ -163,6 +303,8 @@ Now that you know how to use `xrpl.js` to connect to the XRP Ledger, get an acco
|
|||||||
- [Client Libraries](../../../references/client-libraries.md)
|
- [Client Libraries](../../../references/client-libraries.md)
|
||||||
- **Tutorials:**
|
- **Tutorials:**
|
||||||
- [Send XRP](../../how-tos/send-xrp.md)
|
- [Send XRP](../../how-tos/send-xrp.md)
|
||||||
|
- [Issue a Fungible Token](../../how-tos/use-tokens/issue-a-fungible-token.md)
|
||||||
|
- [Set up Secure Signing](../../../concepts/transactions/secure-signing.md)
|
||||||
- **References:**
|
- **References:**
|
||||||
- [`xrpl.js` Reference](https://js.xrpl.org/)
|
- [`xrpl.js` Reference](https://js.xrpl.org/)
|
||||||
- [Public API Methods](../../../references/http-websocket-apis/public-api-methods/index.md)
|
- [Public API Methods](../../../references/http-websocket-apis/public-api-methods/index.md)
|
||||||
@@ -171,3 +313,5 @@ Now that you know how to use `xrpl.js` to connect to the XRP Ledger, get an acco
|
|||||||
- [Transaction Formats](../../../references/protocol/transactions/index.md)
|
- [Transaction Formats](../../../references/protocol/transactions/index.md)
|
||||||
|
|
||||||
{% raw-partial file="/docs/_snippets/common-links.md" /%}
|
{% raw-partial file="/docs/_snippets/common-links.md" /%}
|
||||||
|
|
||||||
|
{% /code-walkthrough %}
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
61
styles/_code-walkthrough.scss
Normal file
61
styles/_code-walkthrough.scss
Normal file
@@ -0,0 +1,61 @@
|
|||||||
|
#app_root article .code-walkthrough {
|
||||||
|
margin-right: 112px;
|
||||||
|
max-width: calc(100% - 112px);
|
||||||
|
padding-right: 0;
|
||||||
|
grid-template-columns: 5fr 5fr;
|
||||||
|
|
||||||
|
@media screen and (max-width: 990px) {
|
||||||
|
margin-right: 96px;
|
||||||
|
max-width: calc(100% - 96px);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Wide screens - increase available space
|
||||||
|
@media screen and (min-width: 1600px) {
|
||||||
|
[data-component-name="Markdoc/CodeWalkthrough/CodeFilters"] {
|
||||||
|
margin-left: 96px;
|
||||||
|
max-width: calc(100% - 96px);
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="CodeWalkthrough__ContentWrapper"] {
|
||||||
|
margin-left: 96px;
|
||||||
|
max-width: calc(100% - 200px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-size-large {
|
||||||
|
margin: 0 var(--spacing-xs);
|
||||||
|
|
||||||
|
> div {
|
||||||
|
padding: 2px 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-component-name="Markdoc/CodeWalkthrough/CodeFilters"] {
|
||||||
|
padding: var(--spacing-xs) var(--spacing-lg);
|
||||||
|
|
||||||
|
> :first-child > :first-child {
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-component-name="Markdoc/CodeWalkthrough/CodePanel"] {
|
||||||
|
top: var(--navbar-height);
|
||||||
|
border: 0;
|
||||||
|
|
||||||
|
[data-component-name="CodeBlock/CodeBlockContainer"] {
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> :first-child > div {
|
||||||
|
border-radius: var(--border-radius-md);
|
||||||
|
}
|
||||||
|
[data-component-name="Markdoc/CodeWalkthrough/CodeFilters"] {
|
||||||
|
background-color: var(--code-panel-bg-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-line-number]::before {
|
||||||
|
padding-left: 0.8em;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -64,11 +64,19 @@
|
|||||||
|
|
||||||
/* Some list items contain <p> tags, some don't. These styles make sure both
|
/* Some list items contain <p> tags, some don't. These styles make sure both
|
||||||
kinds are spaced consistently. */
|
kinds are spaced consistently. */
|
||||||
li {
|
> ul, > ol, .children-display {
|
||||||
margin: 6px;
|
li {
|
||||||
margin-top: 24px;
|
margin: 6px;
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
li:first-child {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
li p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
li p {
|
[data-component-name="Markdoc/Tabs/Tabs"] li {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
/* Top navigation ----------------------------------------------------------- */
|
/* Top navigation ----------------------------------------------------------- */
|
||||||
$nav-height: 80px;
|
$nav-height: 80px;
|
||||||
$banner-height: 52px; // Apex 2025 banner is 52px. 0 for no pencil banner.
|
$banner-height: 0; // Currently no pencil banner.
|
||||||
|
|
||||||
[data-component-name="layouts/RootLayout"] {
|
[data-component-name="layouts/RootLayout"] {
|
||||||
padding-top: $nav-height + $banner-height;
|
padding-top: $nav-height + $banner-height;
|
||||||
@@ -530,7 +530,7 @@ $banner-height: 52px; // Apex 2025 banner is 52px. 0 for no pencil banner.
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#topnav-search,
|
#topnav-search,
|
||||||
#topnav-language,
|
#topnav-language,
|
||||||
#topnav-theme {
|
#topnav-theme {
|
||||||
// display: none;
|
// display: none;
|
||||||
|
|||||||
@@ -54,6 +54,7 @@ $line-height-base: 1.5;
|
|||||||
@import "_top-banner.scss";
|
@import "_top-banner.scss";
|
||||||
@import "_content.scss";
|
@import "_content.scss";
|
||||||
@import "_code-tabs.scss";
|
@import "_code-tabs.scss";
|
||||||
|
@import "_code-walkthrough.scss";
|
||||||
@import "_diagrams.scss";
|
@import "_diagrams.scss";
|
||||||
@import "_external-links.scss";
|
@import "_external-links.scss";
|
||||||
@import "_footer.scss";
|
@import "_footer.scss";
|
||||||
|
|||||||
Reference in New Issue
Block a user