ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-11-21 04:05:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: basic impl of code-samples page

Browse Source
This commit is contained in:
Roman Hotsiy
2023-10-24 22:21:56 +08:00
committed by mDuo13
parent 5de9b90610
commit fc626fcae5
9 changed files with 1651 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
content/@theme/markdoc/components.tsx
View File

@@ -4,19 +4,59 @@ import dynamicReact from '@markdoc/markdoc/dist/react';
import { usePageSharedData } from '@portal/hooks'; import { usePageSharedData } from '@portal/hooks';
import { Link } from '@portal/Link'; import { Link } from '@portal/Link';
function slugify(text: string) {
return text
.toLowerCase()
.replace(/ /g, '-')
.replace(/[^\w-]+/g, '');
}
export function IndexPageItems() { export function IndexPageItems() {
const data = usePageSharedData('index-page-items') as any[]; const data = usePageSharedData('index-page-items') as any[];
return ( return (
<div className="children-display"> <div className="children-display">
<ul> <ul>
{data.map((item: any) => ( {data.map((item: any) => (
<li className="level-1"> <li className="level-1" key={item.slug}>
<Link to={item.slug}>{item.title}</Link> <Link to={item.slug}>{item.title}</Link>
<p className='class="blurb child-blurb'>{item.blurb}</p> <p className='class="blurb child-blurb'>{item.blurb}</p>
</li> </li>
))} ))}
</ul> </ul>
</div> </div>
);
}
export function StartStep(props: { children: React.ReactNode; stepIdx: number; steps: string[] }) {
const stepLabel = props.steps[props.stepIdx];
const stepId = slugify(stepLabel);
return (
<div className="interactive-block" id={'interactive-' + stepId}>
<div className="interactive-block-inner">
<div className="breadcrumbs-wrap">
<ul
className="breadcrumb tutorial-step-crumbs"
id={'bc-ul-' + stepId}
data-steplabel={stepLabel}
data-stepid={stepId}
>
{props.steps.map((step, idx) => {
const iterStepId = slugify(step).toLowerCase();
let className = `breadcrumb-item bc-${iterStepId}`;
if (idx > 0) className += ' disabled';
if (iterStepId === stepId) className += ' current';
return (
<li className={className} key={iterStepId}>
<a href={`#interactive-${iterStepId}`}>{step}</a>
</li>
);
})}
</ul>
</div>
<div className="interactive-block-ui">{dynamicReact(props.children, React, {})}</div>
</div>
</div>
); );
} }

68
content/@theme/plugin.js
View File

@@ -1,63 +1,23 @@
// TODO: export function from root package import { indexPages } from './plugins/index-pages.js';
import { readSharedData } from '@redocly/portal/dist/server/utils/shared-data.js'; import { codeSamples } from './plugins/code-samples.js';
export default function customPlugin() {
const indexPagesInst = indexPages();
const codeSamplesInst = codeSamples();
const INDEX_PAGE_INFO_DATA_KEY = 'index-page-items';
export default function indexPagesPlugin() {
/** @type {import("@redocly/portal/dist/server/plugins/types").PluginInstance } */ /** @type {import("@redocly/portal/dist/server/plugins/types").PluginInstance } */
const pluginInstance = { const pluginInstance = {
// hook that gets executed after all routes were created processContent: async (content, actions) => {
async afterRoutesCreated(contentProvider, actions) { await indexPagesInst.processContent?.(content, actions);
// get all the routes that are ind pages await codeSamplesInst.processContent?.(content, actions);
const indexRoutes = actions.getAllRoutes().filter(route => route.metadata?.indexPage); },
afterRoutesCreated: async (content, actions) => {
for (const route of indexRoutes) { await indexPagesInst.afterRoutesCreated?.(content, actions);
// this uses some internals, we will expose them in nicer way in the future releases await codeSamplesInst.afterRoutesCreated?.(content, actions);
const sidebarId = actions.routesSharedData.get(route.slug)?.['sidebar']; // TODO: implement a helper function for this
const sidebar = await readSharedData(sidebarId, actions.outdir);
if (!sidebar) {
console.log('Index route used with no sidebar', route.fsPath);
continue;
}
const item = findItemDeep(sidebar.items, route.fsPath);
const childrenPaths =(item.items || []).map(item => item.fsPath).filter(Boolean);
const childRoutes = childrenPaths.map(fsPath => actions.getRouteByFsPath(fsPath));
const childRoutesData = await Promise.all(
childRoutes.map(async route => {
const {
parsed: { data },
} = contentProvider.loadContent(route.fsPath, 'frontmatter');
return {
...data,
slug: route.slug,
title: await route.getNavText(),
};
})
);
const sharedDataId = await actions.createSharedData(route.slug + '_' + INDEX_PAGE_INFO_DATA_KEY, childRoutesData);
actions.addRouteSharedData(route.slug, INDEX_PAGE_INFO_DATA_KEY, sharedDataId)
}
}, },
}; };
return pluginInstance; return pluginInstance;
} }
function findItemDeep(items, fsPath) {
for (const item of items) {
if (item.fsPath === fsPath) {
return item;
}
if (item.items) {
const found = findItemDeep(item.items, fsPath);
if (found) {
return found;
}
}
}
}

112
content/@theme/plugins/code-samples.js Normal file
View File

@@ -0,0 +1,112 @@
// @ts-check
import { getInnerText } from '@redocly/portal/dist/shared/markdoc.js';
import { dirname, relative, join as joinPath } from 'path';
import markdoc from '@markdoc/markdoc';
export function codeSamples() {
/** @type {import("@redocly/portal/dist/server/plugins/types").PluginInstance } */
const instance = {
processContent: async (contentProvider, actions) => {
try {
const samples = [];
const allLands = new Set();
const allCodeSampleFiles = Array.from(contentProvider.fsFilesList.values());
const readmes = allCodeSampleFiles.filter(file => file.match(/_code-samples[\/\\]([^\\\/]*)[\/\\]README\.md$/));
for (const relativePath of readmes) {
const record = contentProvider.loadContent(relativePath, 'frontmatter');
const ast = markdoc.parse(record.content);
const dirPath = dirname(relativePath)
const langs = unique(
allCodeSampleFiles
.filter(file => file.startsWith(dirPath) && !file.endsWith('README.md'))
.map(file => relative(dirPath, file).split('/')[0])
);
const title = extractFirstHeading(ast) || '';
samples.push({
path: dirPath,
title: title || toTitleCase(dirname(dirPath)),
description: getInnerText([ast.children[1]]).replace(title, '').trim(),
href: joinPath('content', dirPath),
langs,
});
langs.forEach(l => allLands.add(l));
}
const sortedSamples = samples.sort((a, b) => normalizeTitleForSort(a).localeCompare(normalizeTitleForSort(b)));
actions.createSharedData('code-samples', { codeSamples: sortedSamples, langs: Array.from(allLands) });
actions.addRouteSharedData('/code-samples/', 'code-samples', 'code-samples');
} catch (e) {
console.log(e);
}
},
};
return instance;
}
function normalizeTitleForSort(cs) {
if (cs.title.includes('Intro') || cs.title.includes('Quickstart')) {
return ` ${cs.title}`;
}
return cs.title;
}
const WORDS_TO_CAPS = ['xrp'];
function toTitleCase(s) {
const words = s.split(/_|[^\w']/);
return words
.filter(word => word)
.map(word => (WORDS_TO_CAPS.includes(word) ? word.toUpperCase() : word.charAt(0).toUpperCase() + word.slice(1)))
.join(' ')
.replace("'S", "'s")
.replace(' A ', ' a ');
}
function unique(array) {
return Array.from(new Set(array));
}
function extractFirstHeading(ast) {
let heading;
visit(ast, node => {
if (!isNode(node)) {
return;
}
if (node.type === 'heading') {
heading = getInnerText([node]);
return EXIT;
}
});
return heading;
}
function isNode(value) {
return !!(value?.$$mdtype === 'Node');
}
const EXIT = Symbol('Exit visitor');
function visit(node, visitor) {
if (!node) return;
const res = visitor(node);
if (res === EXIT) return res;
for (const child of node.children) {
if (!child || typeof child === 'string') {
continue;
}
const res = visit(child, visitor);
if (res === EXIT) return res;
}
}

115
content/code-samples.page.tsx Normal file
View File

@@ -0,0 +1,115 @@
import * as React from 'react';
import { usePageSharedData, useTranslate } from '@portal/hooks';
const langIcons = {
cli: require('./static/img/logos/cli.svg'),
go: require('./static/img/logos/golang.svg'),
java: require('./static/img/logos/java.svg'),
js: require('./static/img/logos/javascript.svg'),
py: require('./static/img/logos/python.svg'),
http: require('./static/img/logos/globe.svg'),
};
const target = {
github_forkurl: 'https://github.com/XRPLF/xrpl-dev-portal',
github_branch: 'master',
};
export default function CodeSamples() {
const { translate } = useTranslate();
const { codeSamples, langs } = usePageSharedData<any>('code-samples');
return (
<div className="landing page-community">
<div className="">
<section className="py-26">
<div className="col-lg-8 mx-auto text-lg-center">
<div className="d-flex flex-column-reverse">
<h1 className="mb-0">{translate('Start Building with Example Code')}</h1>
<h6 className="eyebrow mb-3">{translate('Code Samples')}</h6>
</div>
<a className="mt-12 btn btn-primary btn-arrow">Submit Code Samples</a>
</div>
</section>
<div className="position-relative d-none-sm">
<img
alt="default-alt-text"
src={require('./img/backgrounds/xrpl-overview-orange.svg')}
id="xrpl-overview-orange"
/>
</div>
<section className="container-new py-26">
<div className="d-flex flex-column col-sm-8 p-0">
<h3 className="h4 h2-sm">
{translate('Browse sample code for building common use cases on the XRP Ledger')}
</h3>
</div>
<div className="row col-12 card-deck mt-10" id="code-samples-deck">
<div className="row col-md-12 px-0" id="code_samples_list">
{codeSamples.map(card => (
<a
className={`card cardtest col-12 col-lg-5 ${card.langs.join(' ')}`}
href={target.github_forkurl + `/tree/${target.github_branch}/${card.href}`}
>
<div className="card-header">
{card.langs.map(lang => (
<span className="circled-logo">
<img alt={lang} src={langIcons[lang]} />
</span>
))}
</div>
<div className="card-body">
<h4 className="card-title h5">{card.title}</h4>
<p className="card-text">{card.description}</p>
</div>
<div className="card-footer">&nbsp;</div>
</a>
))}
</div>
</div>
</section>
<section className="container-new py-26">
<div>
<div className="d-flex flex-column">
<h3 className="h4 h2-sm pb-4">{translate('Contribute Code Samples')}</h3>
<h6 className="eyebrow mb-20">
{translate('Help the XRPL community by submitting your<br /> own code samples')}
</h6>
</div>
<div className="row pl-4">
<div className=" col-lg-3 pl-4 pl-lg-0 pr-4 contribute dot contribute_1">
<span className="dot" />
<h5 className="pb-4 pt-md-5">Fork and clone</h5>
<p className="pb-4">
Fork the <a href="https://github.com/XRPLF/xrpl-dev-portal">xrpl-dev-portal repo</a>. Using git, clone
the fork to your computer.
</p>
</div>
<div className=" col-lg-3 pl-4 pl-lg-0 pr-4 contribute dot contribute_2">
<span className="dot" />
<h5 className="pb-4 pt-md-5">Add to folder</h5>
<p className="pb-4">
Add your sample code to the <code>content/_code-samples/</code> folder. Be sure to include a{' '}
<code>README.md</code> that summarizes what it does and anything else people should know about it.
</p>
</div>
<div className=" col-lg-3 pl-4 pl-lg-0 pr-4 contribute dot contribute_3">
<span className="dot" />
<h5 className="pb-4 pt-md-5">Commit and push</h5>
<p className="pb-4">Commit your changes and push them to your fork on GitHub.</p>
</div>
<div className=" col-lg-3 pl-4 pl-lg-0 pr-2 contribute dot contribute_4 mb-4">
<span className="dot" />
<h5 className="pb-4 pt-md-5">Open a pull request</h5>
<p className="pb-0 mb-0">
Open a pull request to the original repo. Maintainers will review your submission and suggest changes
if necessary. If the code sample is helpful, it'll be merged and added to XRPL.org!
</p>
</div>
</div>
<a className="mt-12 btn btn-primary btn-arrow">Submit Code Samples</a>
</div>
</section>
</div>
</div>
);
}

2
content/docs.page.tsx
View File

@@ -388,7 +388,7 @@ export default function Docs() {
<h2 className="h4">{translate('Browse By Recommended Pages')}</h2> <h2 className="h4">{translate('Browse By Recommended Pages')}</h2>
<ul className="nav flex-column"> <ul className="nav flex-column">
{recommendedPages.map(page => ( {recommendedPages.map(page => (
<li className="nav-item"> <li className="nav-item" key={page.link}>
<a href={page.link} className="nav-link"> <a href={page.link} className="nav-link">
{translate(page.description)} {translate(page.description)}
</a> </a>

14
content/index.page.tsx
View File

@@ -146,7 +146,7 @@ export default function Index() {
</div> </div>
<ul className="mt-10 card-grid card-grid-3xN" id="benefits-list"> <ul className="mt-10 card-grid card-grid-3xN" id="benefits-list">
{cards.map(card => ( {cards.map(card => (
<li className="col ls-none"> <li className="col ls-none" key={card.id}>
<img id={card.id} alt={card.title + ' Icon'} /> <img id={card.id} alt={card.title + ' Icon'} />
<h4 className="mt-3 mb-0 h5">{card.title}</h4> <h4 className="mt-3 mb-0 h5">{card.title}</h4>
<p className="mt-6-until-sm mt-3 mb-0">{card.description}</p> <p className="mt-6-until-sm mt-3 mb-0">{card.description}</p>
@@ -164,8 +164,8 @@ export default function Index() {
<h6 className="eyebrow mb-3">{translate('Powerful Features')}</h6> <h6 className="eyebrow mb-3">{translate('Powerful Features')}</h6>
</div> </div>
<div className="row row-cols-1 row-cols-lg-3 card-deck mt-10" id="advanced-features"> <div className="row row-cols-1 row-cols-lg-3 card-deck mt-10" id="advanced-features">
{cards2.map(card => ( {cards2.map((card, idx) => (
<a className="card" href={target.prefix + card.href}> <a className="card" href={target.prefix + card.href} key={card.href + idx}>
<div className="card-body"> <div className="card-body">
<h4 className="card-title h5">{card.title}</h4> <h4 className="card-title h5">{card.title}</h4>
<p className="card-text">{card.description}</p> <p className="card-text">{card.description}</p>
@@ -181,8 +181,8 @@ export default function Index() {
<h6 className="eyebrow mb-3">{translate('Where to Start')}</h6> <h6 className="eyebrow mb-3">{translate('Where to Start')}</h6>
</div> </div>
<div className="row row-cols-1 row-cols-lg-3 card-deck mt-10" id="get-started"> <div className="row row-cols-1 row-cols-lg-3 card-deck mt-10" id="get-started">
{cards3.map(card => ( {cards3.map((card, idx) => (
<a className="card" id={card.id} href={target.prefix + card.href}> <a className="card" href={target.prefix + card.href} key={card.href + idx}>
<div className="card-body"> <div className="card-body">
<h4 className="card-title h5">{card.title}</h4> <h4 className="card-title h5">{card.title}</h4>
<p className="card-text">{card.description}</p> <p className="card-text">{card.description}</p>
@@ -218,7 +218,7 @@ export default function Index() {
</div> </div>
<ul className="mt-10 card-grid card-grid-3xN"> <ul className="mt-10 card-grid card-grid-3xN">
{features.map(feat => ( {features.map(feat => (
<li className="col ls-none pt-2"> <li className="col ls-none pt-2" key={feat.href}>
<a className="label chip-green" href={feat.href}> <a className="label chip-green" href={feat.href}>
{feat.chip} {feat.chip}
</a> </a>
@@ -230,7 +230,7 @@ export default function Index() {
</section> </section>
<section className="container-new py-26"> <section className="container-new py-26">
<div className="col-md-6 offset-md-3 p-8-sm p-10-until-sm br-8 cta-card"> <div className="col-md-6 offset-md-3 p-8-sm p-10-until-sm br-8 cta-card">
<img alt src={require('./img/backgrounds/cta-home-magenta.svg')} className="cta cta-bottom-right" /> <img alt="" src={require('./img/backgrounds/cta-home-magenta.svg')} className="cta cta-bottom-right" />
<div className="z-index-1 position-relative"> <div className="z-index-1 position-relative">
<div className="d-flex flex-column-reverse"> <div className="d-flex flex-column-reverse">
<h2 className="h4 mb-8-sm mb-10-until-sm"> <h2 className="h4 mb-8-sm mb-10-until-sm">

161
content/sidebars.yaml
View File

@@ -184,7 +184,7 @@
- page: tutorials/quickstart/create-trustline-send-currency-using-javascript.md - page: tutorials/quickstart/create-trustline-send-currency-using-javascript.md
- page: tutorials/quickstart/create-time-based-escrows-using-javascript.md - page: tutorials/quickstart/create-time-based-escrows-using-javascript.md
- page: tutorials/quickstart/create-conditional-escrows-using-javascript.md - page: tutorials/quickstart/create-conditional-escrows-using-javascript.md
- page: - page:
tutorials/javascript/modular-tutorials-in-javascript/nfts-using-javascript/index.md tutorials/javascript/modular-tutorials-in-javascript/nfts-using-javascript/index.md
expanded: false expanded: false
items: items:
@@ -226,28 +226,28 @@
expanded: false expanded: false
items: items:
- page: tutorials/use-specialized-payment-types/use-escrows/send-a-time-held-escrow.md - page: tutorials/use-specialized-payment-types/use-escrows/send-a-time-held-escrow.md
- page: - page:
tutorials/use-specialized-payment-types/use-escrows/send-a-conditionally-held-escrow.md tutorials/use-specialized-payment-types/use-escrows/send-a-conditionally-held-escrow.md
- page: tutorials/use-specialized-payment-types/use-escrows/cancel-an-expired-escrow.md - page: tutorials/use-specialized-payment-types/use-escrows/cancel-an-expired-escrow.md
- page: tutorials/use-specialized-payment-types/use-escrows/look-up-escrows.md - page: tutorials/use-specialized-payment-types/use-escrows/look-up-escrows.md
- page: - page:
tutorials/use-specialized-payment-types/use-escrows/use-an-escrow-as-a-smart-contract.md tutorials/use-specialized-payment-types/use-escrows/use-an-escrow-as-a-smart-contract.md
- page: tutorials/use-specialized-payment-types/use-payment-channels.md - page: tutorials/use-specialized-payment-types/use-payment-channels.md
expanded: false expanded: false
items: items:
- page: - page:
tutorials/use-specialized-payment-types/open-a-payment-channel-to-enable-an-inter-exchange-network.md tutorials/use-specialized-payment-types/open-a-payment-channel-to-enable-an-inter-exchange-network.md
- page: tutorials/use-specialized-payment-types/use-checks/use-checks.md - page: tutorials/use-specialized-payment-types/use-checks/use-checks.md
expanded: false expanded: false
items: items:
- page: tutorials/use-specialized-payment-types/use-checks/send-a-check.md - page: tutorials/use-specialized-payment-types/use-checks/send-a-check.md
- page: - page:
tutorials/use-specialized-payment-types/use-checks/cash-a-check-for-an-exact-amount.md tutorials/use-specialized-payment-types/use-checks/cash-a-check-for-an-exact-amount.md
- page: - page:
tutorials/use-specialized-payment-types/use-checks/cash-a-check-for-a-flexible-amount.md tutorials/use-specialized-payment-types/use-checks/cash-a-check-for-a-flexible-amount.md
- page: tutorials/use-specialized-payment-types/use-checks/cancel-a-check.md - page: tutorials/use-specialized-payment-types/use-checks/cancel-a-check.md
- page: tutorials/use-specialized-payment-types/use-checks/look-up-checks-by-sender.md - page: tutorials/use-specialized-payment-types/use-checks/look-up-checks-by-sender.md
- page: - page:
tutorials/use-specialized-payment-types/use-checks/look-up-checks-by-recipient.md tutorials/use-specialized-payment-types/use-checks/look-up-checks-by-recipient.md
- page: tutorials/tasks/use-tokens/index.md - page: tutorials/tasks/use-tokens/index.md
expanded: false expanded: false
@@ -274,7 +274,7 @@
expanded: false expanded: false
items: items:
- page: references/protocol-reference/ledger-data/ledger-header.md - page: references/protocol-reference/ledger-data/ledger-header.md
- page: - page:
references/protocol-reference/ledger-data/ledger-entry-types/ledger-entry-types.md references/protocol-reference/ledger-data/ledger-entry-types/ledger-entry-types.md
expanded: false expanded: false
items: items:
@@ -299,7 +299,7 @@
expanded: false expanded: false
items: items:
- page: references/protocol-reference/transactions/transaction-common-fields.md - page: references/protocol-reference/transactions/transaction-common-fields.md
- page: - page:
references/protocol-reference/transactions/transaction-types/transaction-types.md references/protocol-reference/transactions/transaction-types/transaction-types.md
expanded: false expanded: false
items: items:
@@ -319,36 +319,36 @@
- page: references/protocol-reference/transactions/transaction-types/escrowcancel.md - page: references/protocol-reference/transactions/transaction-types/escrowcancel.md
- page: references/protocol-reference/transactions/transaction-types/escrowcreate.md - page: references/protocol-reference/transactions/transaction-types/escrowcreate.md
- page: references/protocol-reference/transactions/transaction-types/escrowfinish.md - page: references/protocol-reference/transactions/transaction-types/escrowfinish.md
- page: - page:
references/protocol-reference/transactions/transaction-types/nftokenacceptoffer.md references/protocol-reference/transactions/transaction-types/nftokenacceptoffer.md
- page: references/protocol-reference/transactions/transaction-types/nftokenburn.md - page: references/protocol-reference/transactions/transaction-types/nftokenburn.md
- page: - page:
references/protocol-reference/transactions/transaction-types/nftokencanceloffer.md references/protocol-reference/transactions/transaction-types/nftokencanceloffer.md
- page: - page:
references/protocol-reference/transactions/transaction-types/nftokencreateoffer.md references/protocol-reference/transactions/transaction-types/nftokencreateoffer.md
- page: references/protocol-reference/transactions/transaction-types/nftokenmint.md - page: references/protocol-reference/transactions/transaction-types/nftokenmint.md
- page: references/protocol-reference/transactions/transaction-types/offercancel.md - page: references/protocol-reference/transactions/transaction-types/offercancel.md
- page: references/protocol-reference/transactions/transaction-types/offercreate.md - page: references/protocol-reference/transactions/transaction-types/offercreate.md
- page: references/protocol-reference/transactions/transaction-types/payment.md - page: references/protocol-reference/transactions/transaction-types/payment.md
- page: - page:
references/protocol-reference/transactions/transaction-types/paymentchannelclaim.md references/protocol-reference/transactions/transaction-types/paymentchannelclaim.md
- page: - page:
references/protocol-reference/transactions/transaction-types/paymentchannelcreate.md references/protocol-reference/transactions/transaction-types/paymentchannelcreate.md
- page: - page:
references/protocol-reference/transactions/transaction-types/paymentchannelfund.md references/protocol-reference/transactions/transaction-types/paymentchannelfund.md
- page: references/protocol-reference/transactions/transaction-types/setregularkey.md - page: references/protocol-reference/transactions/transaction-types/setregularkey.md
- page: references/protocol-reference/transactions/transaction-types/signerlistset.md - page: references/protocol-reference/transactions/transaction-types/signerlistset.md
- page: references/protocol-reference/transactions/transaction-types/ticketcreate.md - page: references/protocol-reference/transactions/transaction-types/ticketcreate.md
- page: references/protocol-reference/transactions/transaction-types/trustset.md - page: references/protocol-reference/transactions/transaction-types/trustset.md
- page: - page:
references/protocol-reference/transactions/pseudo-transaction-types/pseudo-transaction-types.md references/protocol-reference/transactions/pseudo-transaction-types/pseudo-transaction-types.md
expanded: false expanded: false
items: items:
- page: - page:
references/protocol-reference/transactions/pseudo-transaction-types/enableamendment.md references/protocol-reference/transactions/pseudo-transaction-types/enableamendment.md
- page: references/protocol-reference/transactions/pseudo-transaction-types/setfee.md - page: references/protocol-reference/transactions/pseudo-transaction-types/setfee.md
- page: references/protocol-reference/transactions/pseudo-transaction-types/unlmodify.md - page: references/protocol-reference/transactions/pseudo-transaction-types/unlmodify.md
- page: - page:
references/protocol-reference/transactions/transaction-results/transaction-results.md references/protocol-reference/transactions/transaction-results/transaction-results.md
expanded: false expanded: false
items: items:
@@ -397,32 +397,32 @@
- page: references/http-websocket-apis/public-api-methods/account-methods/index.md - page: references/http-websocket-apis/public-api-methods/account-methods/index.md
expanded: false expanded: false
items: items:
- page: - page:
references/http-websocket-apis/public-api-methods/account-methods/account_channels.md references/http-websocket-apis/public-api-methods/account-methods/account_channels.md
- page: - page:
references/http-websocket-apis/public-api-methods/account-methods/account_currencies.md references/http-websocket-apis/public-api-methods/account-methods/account_currencies.md
- page: - page:
references/http-websocket-apis/public-api-methods/account-methods/account_info.md references/http-websocket-apis/public-api-methods/account-methods/account_info.md
- page: - page:
references/http-websocket-apis/public-api-methods/account-methods/account_lines.md references/http-websocket-apis/public-api-methods/account-methods/account_lines.md
- page: - page:
references/http-websocket-apis/public-api-methods/account-methods/account_nfts.md references/http-websocket-apis/public-api-methods/account-methods/account_nfts.md
- page: - page:
references/http-websocket-apis/public-api-methods/account-methods/account_objects.md references/http-websocket-apis/public-api-methods/account-methods/account_objects.md
- page: - page:
references/http-websocket-apis/public-api-methods/account-methods/account_offers.md references/http-websocket-apis/public-api-methods/account-methods/account_offers.md
- page: references/http-websocket-apis/public-api-methods/account-methods/account_tx.md - page: references/http-websocket-apis/public-api-methods/account-methods/account_tx.md
- page: - page:
references/http-websocket-apis/public-api-methods/account-methods/gateway_balances.md references/http-websocket-apis/public-api-methods/account-methods/gateway_balances.md
- page: - page:
references/http-websocket-apis/public-api-methods/account-methods/noripple_check.md references/http-websocket-apis/public-api-methods/account-methods/noripple_check.md
- page: references/http-websocket-apis/public-api-methods/ledger-methods/index.md - page: references/http-websocket-apis/public-api-methods/ledger-methods/index.md
expanded: false expanded: false
items: items:
- page: references/http-websocket-apis/public-api-methods/ledger-methods/ledger.md - page: references/http-websocket-apis/public-api-methods/ledger-methods/ledger.md
- page: - page:
references/http-websocket-apis/public-api-methods/ledger-methods/ledger_closed.md references/http-websocket-apis/public-api-methods/ledger-methods/ledger_closed.md
- page: - page:
references/http-websocket-apis/public-api-methods/ledger-methods/ledger_current.md references/http-websocket-apis/public-api-methods/ledger-methods/ledger_current.md
- page: references/http-websocket-apis/public-api-methods/ledger-methods/ledger_data.md - page: references/http-websocket-apis/public-api-methods/ledger-methods/ledger_data.md
- page: references/http-websocket-apis/public-api-methods/ledger-methods/ledger_entry.md - page: references/http-websocket-apis/public-api-methods/ledger-methods/ledger_entry.md
@@ -430,60 +430,60 @@
expanded: false expanded: false
items: items:
- page: references/http-websocket-apis/public-api-methods/transaction-methods/submit.md - page: references/http-websocket-apis/public-api-methods/transaction-methods/submit.md
- page: - page:
references/http-websocket-apis/public-api-methods/transaction-methods/submit_multisigned.md references/http-websocket-apis/public-api-methods/transaction-methods/submit_multisigned.md
- page: - page:
references/http-websocket-apis/public-api-methods/transaction-methods/transaction_entry.md references/http-websocket-apis/public-api-methods/transaction-methods/transaction_entry.md
- page: references/http-websocket-apis/public-api-methods/transaction-methods/tx.md - page: references/http-websocket-apis/public-api-methods/transaction-methods/tx.md
- page: - page:
references/http-websocket-apis/public-api-methods/transaction-methods/tx_history.md references/http-websocket-apis/public-api-methods/transaction-methods/tx_history.md
- page: - page:
references/http-websocket-apis/public-api-methods/path-and-order-book-methods/index.md references/http-websocket-apis/public-api-methods/path-and-order-book-methods/index.md
expanded: false expanded: false
items: items:
- page: - page:
references/http-websocket-apis/public-api-methods/path-and-order-book-methods/amm_info.md references/http-websocket-apis/public-api-methods/path-and-order-book-methods/amm_info.md
- page: - page:
references/http-websocket-apis/public-api-methods/path-and-order-book-methods/book_offers.md references/http-websocket-apis/public-api-methods/path-and-order-book-methods/book_offers.md
- page: - page:
references/http-websocket-apis/public-api-methods/path-and-order-book-methods/deposit_authorized.md references/http-websocket-apis/public-api-methods/path-and-order-book-methods/deposit_authorized.md
- page: - page:
references/http-websocket-apis/public-api-methods/path-and-order-book-methods/nft_buy_offers.md references/http-websocket-apis/public-api-methods/path-and-order-book-methods/nft_buy_offers.md
- page: - page:
references/http-websocket-apis/public-api-methods/path-and-order-book-methods/nft_sell_offers.md references/http-websocket-apis/public-api-methods/path-and-order-book-methods/nft_sell_offers.md
- page: - page:
references/http-websocket-apis/public-api-methods/path-and-order-book-methods/path_find.md references/http-websocket-apis/public-api-methods/path-and-order-book-methods/path_find.md
- page: - page:
references/http-websocket-apis/public-api-methods/path-and-order-book-methods/ripple_path_find.md references/http-websocket-apis/public-api-methods/path-and-order-book-methods/ripple_path_find.md
- page: - page:
references/http-websocket-apis/public-api-methods/payment-channel-methods/index.md references/http-websocket-apis/public-api-methods/payment-channel-methods/index.md
expanded: false expanded: false
items: items:
- page: - page:
references/http-websocket-apis/public-api-methods/payment-channel-methods/channel_authorize.md references/http-websocket-apis/public-api-methods/payment-channel-methods/channel_authorize.md
- page: - page:
references/http-websocket-apis/public-api-methods/payment-channel-methods/channel_verify.md references/http-websocket-apis/public-api-methods/payment-channel-methods/channel_verify.md
- page: references/http-websocket-apis/public-api-methods/subscription-methods/index.md - page: references/http-websocket-apis/public-api-methods/subscription-methods/index.md
expanded: false expanded: false
items: items:
- page: - page:
references/http-websocket-apis/public-api-methods/subscription-methods/subscribe.md references/http-websocket-apis/public-api-methods/subscription-methods/subscribe.md
- page: - page:
references/http-websocket-apis/public-api-methods/subscription-methods/unsubscribe.md references/http-websocket-apis/public-api-methods/subscription-methods/unsubscribe.md
- page: references/http-websocket-apis/public-api-methods/server-info-methods/index.md - page: references/http-websocket-apis/public-api-methods/server-info-methods/index.md
expanded: false expanded: false
items: items:
- page: references/http-websocket-apis/public-api-methods/server-info-methods/fee.md - page: references/http-websocket-apis/public-api-methods/server-info-methods/fee.md
- page: - page:
references/http-websocket-apis/public-api-methods/server-info-methods/manifest.md references/http-websocket-apis/public-api-methods/server-info-methods/manifest.md
- page: - page:
references/http-websocket-apis/public-api-methods/server-info-methods/server_info.md references/http-websocket-apis/public-api-methods/server-info-methods/server_info.md
- page: - page:
references/http-websocket-apis/public-api-methods/server-info-methods/server_state.md references/http-websocket-apis/public-api-methods/server-info-methods/server_state.md
- page: references/http-websocket-apis/public-api-methods/clio-server/index.md - page: references/http-websocket-apis/public-api-methods/clio-server/index.md
expanded: false expanded: false
items: items:
- page: - page:
references/http-websocket-apis/public-api-methods/clio-methods/server_info-clio.md references/http-websocket-apis/public-api-methods/clio-methods/server_info-clio.md
- page: references/http-websocket-apis/public-api-methods/clio-methods/ledger-clio.md - page: references/http-websocket-apis/public-api-methods/clio-methods/ledger-clio.md
- page: references/http-websocket-apis/public-api-methods/clio-methods/nft_history.md - page: references/http-websocket-apis/public-api-methods/clio-methods/nft_history.md
@@ -500,76 +500,76 @@
- page: references/http-websocket-apis/admin-api-methods/key-generation-methods/index.md - page: references/http-websocket-apis/admin-api-methods/key-generation-methods/index.md
expanded: false expanded: false
items: items:
- page: - page:
references/http-websocket-apis/admin-api-methods/key-generation-methods/validation_create.md references/http-websocket-apis/admin-api-methods/key-generation-methods/validation_create.md
- page: - page:
references/http-websocket-apis/admin-api-methods/key-generation-methods/wallet_propose.md references/http-websocket-apis/admin-api-methods/key-generation-methods/wallet_propose.md
- page: - page:
references/http-websocket-apis/admin-api-methods/logging-and-data-management-methods/index.md references/http-websocket-apis/admin-api-methods/logging-and-data-management-methods/index.md
expanded: false expanded: false
items: items:
- page: - page:
references/http-websocket-apis/admin-api-methods/logging-and-data-management-methods/can_delete.md references/http-websocket-apis/admin-api-methods/logging-and-data-management-methods/can_delete.md
- page: - page:
references/http-websocket-apis/admin-api-methods/logging-and-data-management-methods/crawl_shards.md references/http-websocket-apis/admin-api-methods/logging-and-data-management-methods/crawl_shards.md
- page: - page:
references/http-websocket-apis/admin-api-methods/logging-and-data-management-methods/download_shard.md references/http-websocket-apis/admin-api-methods/logging-and-data-management-methods/download_shard.md
- page: - page:
references/http-websocket-apis/admin-api-methods/logging-and-data-management-methods/ledger_cleaner.md references/http-websocket-apis/admin-api-methods/logging-and-data-management-methods/ledger_cleaner.md
- page: - page:
references/http-websocket-apis/admin-api-methods/logging-and-data-management-methods/ledger_request.md references/http-websocket-apis/admin-api-methods/logging-and-data-management-methods/ledger_request.md
- page: - page:
references/http-websocket-apis/admin-api-methods/logging-and-data-management-methods/log_level.md references/http-websocket-apis/admin-api-methods/logging-and-data-management-methods/log_level.md
- page: - page:
references/http-websocket-apis/admin-api-methods/logging-and-data-management-methods/logrotate.md references/http-websocket-apis/admin-api-methods/logging-and-data-management-methods/logrotate.md
- page: - page:
references/http-websocket-apis/admin-api-methods/logging-and-data-management-methods/node_to_shard.md references/http-websocket-apis/admin-api-methods/logging-and-data-management-methods/node_to_shard.md
- page: references/http-websocket-apis/admin-api-methods/server-control-methods/index.md - page: references/http-websocket-apis/admin-api-methods/server-control-methods/index.md
expanded: false expanded: false
items: items:
- page: - page:
references/http-websocket-apis/admin-api-methods/server-control-methods/ledger_accept.md references/http-websocket-apis/admin-api-methods/server-control-methods/ledger_accept.md
- page: references/http-websocket-apis/admin-api-methods/server-control-methods/stop.md - page: references/http-websocket-apis/admin-api-methods/server-control-methods/stop.md
- page: - page:
references/http-websocket-apis/admin-api-methods/server-control-methods/validation_seed.md references/http-websocket-apis/admin-api-methods/server-control-methods/validation_seed.md
- page: references/http-websocket-apis/admin-api-methods/signing-methods/index.md - page: references/http-websocket-apis/admin-api-methods/signing-methods/index.md
expanded: false expanded: false
items: items:
- page: references/http-websocket-apis/admin-api-methods/signing-methods/sign.md - page: references/http-websocket-apis/admin-api-methods/signing-methods/sign.md
- page: references/http-websocket-apis/admin-api-methods/signing-methods/sign_for.md - page: references/http-websocket-apis/admin-api-methods/signing-methods/sign_for.md
- page: - page:
references/http-websocket-apis/admin-api-methods/peer-management-methods/index.md references/http-websocket-apis/admin-api-methods/peer-management-methods/index.md
expanded: false expanded: false
items: items:
- page: - page:
references/http-websocket-apis/admin-api-methods/peer-management-methods/connect.md references/http-websocket-apis/admin-api-methods/peer-management-methods/connect.md
- page: - page:
references/http-websocket-apis/admin-api-methods/peer-management-methods/peer_reservations_add.md references/http-websocket-apis/admin-api-methods/peer-management-methods/peer_reservations_add.md
- page: - page:
references/http-websocket-apis/admin-api-methods/peer-management-methods/peer_reservations_del.md references/http-websocket-apis/admin-api-methods/peer-management-methods/peer_reservations_del.md
- page: - page:
references/http-websocket-apis/admin-api-methods/peer-management-methods/peer_reservations_list.md references/http-websocket-apis/admin-api-methods/peer-management-methods/peer_reservations_list.md
- page: - page:
references/http-websocket-apis/admin-api-methods/peer-management-methods/peers.md references/http-websocket-apis/admin-api-methods/peer-management-methods/peers.md
- page: - page:
references/http-websocket-apis/admin-api-methods/status-and-debugging-methods/index.md references/http-websocket-apis/admin-api-methods/status-and-debugging-methods/index.md
expanded: false expanded: false
items: items:
- page: - page:
references/http-websocket-apis/admin-api-methods/status-and-debugging-methods/consensus_info.md references/http-websocket-apis/admin-api-methods/status-and-debugging-methods/consensus_info.md
- page: - page:
references/http-websocket-apis/admin-api-methods/status-and-debugging-methods/feature.md references/http-websocket-apis/admin-api-methods/status-and-debugging-methods/feature.md
- page: - page:
references/http-websocket-apis/admin-api-methods/status-and-debugging-methods/fetch_info.md references/http-websocket-apis/admin-api-methods/status-and-debugging-methods/fetch_info.md
- page: - page:
references/http-websocket-apis/admin-api-methods/status-and-debugging-methods/get_counts.md references/http-websocket-apis/admin-api-methods/status-and-debugging-methods/get_counts.md
- page: - page:
references/http-websocket-apis/admin-api-methods/status-and-debugging-methods/print.md references/http-websocket-apis/admin-api-methods/status-and-debugging-methods/print.md
- page: - page:
references/http-websocket-apis/admin-api-methods/status-and-debugging-methods/validator_info.md references/http-websocket-apis/admin-api-methods/status-and-debugging-methods/validator_info.md
- page: - page:
references/http-websocket-apis/admin-api-methods/status-and-debugging-methods/validator_list_sites.md references/http-websocket-apis/admin-api-methods/status-and-debugging-methods/validator_list_sites.md
- page: - page:
references/http-websocket-apis/admin-api-methods/status-and-debugging-methods/validators.md references/http-websocket-apis/admin-api-methods/status-and-debugging-methods/validators.md
- page: references/http-websocket-apis/peer-port-methods/index.md - page: references/http-websocket-apis/peer-port-methods/index.md
expanded: false expanded: false
@@ -635,11 +635,11 @@
- page: infrastructure/testing-and-auditing/index.md - page: infrastructure/testing-and-auditing/index.md
expanded: false expanded: false
items: items:
- page: - page:
infrastructure/rippled/stand-alone-mode/start-a-new-genesis-ledger-in-stand-alone-mode.md infrastructure/rippled/stand-alone-mode/start-a-new-genesis-ledger-in-stand-alone-mode.md
- page: - page:
infrastructure/rippled/stand-alone-mode/load-a-saved-ledger-in-stand-alone-mode.md infrastructure/rippled/stand-alone-mode/load-a-saved-ledger-in-stand-alone-mode.md
- page: - page:
infrastructure/rippled/stand-alone-mode/advance-the-ledger-in-stand-alone-mode.md infrastructure/rippled/stand-alone-mode/advance-the-ledger-in-stand-alone-mode.md
- page: infrastructure/troubleshooting/index.md - page: infrastructure/troubleshooting/index.md
expanded: false expanded: false
@@ -657,6 +657,7 @@
expanded: false expanded: false
items: items:
- label: Code Samples - label: Code Samples
page: code-samples.page.tsx
- group: Dev Tools - group: Dev Tools
expanded: false expanded: false
items: items:

780
content/uses.page.tsx Normal file
View File

@@ -0,0 +1,780 @@
import * as React from "react";
import { useTranslate } from "@portal/hooks";
const cards = [
{
id: "aesthetes",
title: "Aesthetes",
description:
"Aesthetes is a bridge between fine art and blockchain, enabling everyone, around the world, to buy and sell with just a click for fractional ownership of international physical art.",
category_id: "nfts",
category_name: "NFTs",
link: "https://aesthetes.art/",
},
{
id: "anchain-ai",
title: "Anchain.AI",
description:
"AnChain.AI offers AI-powered intelligence enhancing blockchain security, risk, and compliance strategies.",
category_id: "security",
category_name: "Security",
link: "https://anchain.ai",
},
{
id: "audiotarky",
title: "Audiotarky",
description:
"Audiotarky is a new music streaming platform that prioritises artists and privacy over algorithms and shareholders.",
category_id: "nfts",
category_name: "NFTs",
link: "https://www.audiotarky.com/",
},
{
id: "bitgo",
title: "BitGo",
description:
"BitGo provides custodial and non-custodial asset holdings for digital assets including XRP. BitGo's enterprise-level security empowers businesses to integrate digital currencies like XRP into new and existing financial systems.",
category_id: "custody",
category_name: "Custody",
link: "https://www.bitgo.com/",
},
{
id: "gatehub",
title: "Gatehub",
description:
"Gatehub XRP Ledger Markets is an explorer to track Gatehub's inssuances on the XRP Ledger.",
category_id: "custody",
category_name: "Custody",
link: "https://gatehub.net/markets",
},
{
id: "bithomp",
title: "Bithomp",
description:
"Bithomp is an XRPL explorer and toolkit, used by many cryptocurrency exchanges. Bithomp was launched in 2015 with a mission to build the most user-friendly XRPL explorer.",
category_id: "infrastructure",
category_name: "Infrastructure",
link: "https://bithomp.com/",
},
{
id: "bitpay",
title: "bitpay",
description:
"BitPay builds powerful, enterprise-grade tools for accepting and spending cryptocurrencies, including XRP.",
category_id: "payments",
category_name: "Payments",
link: "https://bitpay.com/",
},
{
id: "carbonland-trust",
title: "Carbonland Trust",
description:
"Carbonland Trust offers transparent nature-based carbon credits, and inclusive access to voluntary carbon markets for landowners and corporations alike. ",
category_id: "sustainability",
category_name: "Carbon Markets/Sustainability",
link: "https://www.carbonlandtrust.com/",
},
{
id: "cryptum",
title: "Cryptum",
description:
"Cryptum is an API/SDK platform for integrating the XRP Ledger with any application.",
category_id: "developer_tooling",
category_name: "Developer Tooling",
link: "https://blockforce.in/products/cryptum",
},
{
id: "evernode",
title: "Evernode",
description:
"Evernode proposes a permissionless, flexible, scalable Layer 2 smart contract network built from the XRP Ledger.",
category_id: "developer_tooling",
category_name: "Developer Tooling",
link: "https://evernode.org/",
},
{
id: "forte",
title: "Forte",
description:
"Forte offers an unprecedented set of easy-to-use tools and services for game developers to integrate blockchain technology into their games, to unlock new economic and creative opportunities for gamers across the world.",
category_id: "gaming",
category_name: "Gaming",
link: "https://www.forte.io/",
},
{
id: "gatehub",
title: "Gatehub",
description:
"Gatehub XRP Ledger Markets is an explorer to track Gatehub's inssuances on the XRP Ledger.",
category_id: "infrastructure",
category_name: "Infrastructure",
link: "https://gatehub.net/markets",
},
{
id: "gem-wallet",
title: "Gem Wallet",
description:
"GemWallet is a web extension that enables users to make fast payments on the XRP Ledger via a browser. It's a safer alternative to copying and pasting private keys for use with web applications.",
category_id: "wallet",
category_name: "Wallet",
link: "https://gemwallet.app/",
},
{
id: "ledger-city",
title: "Ledger City",
description:
"Ledger City is a crypto real estate game powered by the XRP Ledger.",
category_id: "gaming",
category_name: "Gaming",
link: "https://ledgercitygame.com/",
},
{
id: "multichain",
title: "Multichain",
description:
"Multichain is the ultimate Router for web3. It is an infrastructure developed for arbitrary cross-chain interactions.",
category_id: "interoperability",
category_name: "Interoperability",
link: "https://multichain.org/",
},
{
id: "nft-master",
title: "NFT Master",
description:
"NFT Master is an NFT marketplace where creators can buy, mint and sell NFTs.",
category_id: "nfts",
category_name: "NFTs",
link: "https://nftmaster.com/",
},
{
id: "onthedex",
title: "OnTheDex",
description:
"OnTheDex is a quality source of information for aggregator sites to take live feeds of XRPL token activity.",
category_id: "infrastructure",
category_name: "Infrastructure",
link: "https://onthedex.live/",
},
{
id: "onxrp",
title: "onXRP",
description:
"onXRP is an NFT marketplace where creators can buy, mint and sell NFTs built by the XPUNKs.",
category_id: "nfts",
category_name: "NFTs",
link: "https://onxrp.com/about/",
},
{
id: "peerkat",
title: "Peerkat",
description:
"Peerkat is an NFT services and tooling provider for the XRPL community.",
category_id: "nfts",
category_name: "NFTs",
link: "https://peerkat.io/",
},
{
id: "Crossmark",
title: "Crossmark",
description:
"Crossmark is a browser extension wallet built for interacting with the XRP Ledger.",
category_id: "wallet",
category_name: "Wallet",
link: "https://github.com/crossmarkio",
},
{
id: "Edge",
title: "Edge",
description:
"Edge is a secure, easy, and private way to use, store, trade, and exchange crypto assets. Edge ensures sure you’re always in control of your money and information while also providing the tools necessary to protect yourself from others and your own mistakes. Edge has rich functionality, a battle-tested security architecture, and the industry’s best customer support.",
category_id: "wallet",
category_name: "Wallet",
link: "https://edge.app/ripple-wallet/",
},
{
id: "ripples-cbdc-platform",
title: "Ripple's CBDC Platform",
description:
"Ripple's Central Bank Digital Currency (CBDC) solution enables banks to mint, manage, transact and redeem currency to easily manage the full CBDC lifecycle. Each solution is built on a private ledger that is based upon XRP Ledger technology.",
category_id: "cbdcs",
category_name: "CBDC",
link: "https://ripple.com/solutions/central-bank-digital-currency/",
},
{
id: "ripples-on-demand-liquidity",
title: "Ripple's On-Demand Liquidity",
description:
"Ripple powers real-time, low-cost cross-border payment settlement by using XRP as a bridge currency between two fiat currencies.",
category_id: "payments",
category_name: "Payments",
link: "https://ripple.com/",
},
{
id: "sologenic-dex",
title: "Sologenic DEX",
description:
"Sologenic DEX is a popular decentralized exchange on the XRP Ledger made by Sologenic.",
category_id: "exchanges",
category_name: "Exchanges",
link: "https://sologenic.org/",
},
{
id: "sologenic-nft",
title: "Sologenic NFT",
description: "Sologenic NFT is an NFT marketplace designed by Sologenic.",
category_id: "nfts",
category_name: "NFTs",
link: "https://sologenic.org/nfts/marketplace?network=mainnet",
},
{
id: "towo-labs",
title: "Towo Labs",
description:
"Towo Labs was founded in 2019, to develop XRP Ledger and Interledger infrastructures and make non-custodial crypto management easier.",
category_id: "infrastructure",
category_name: "Infrastructure",
link: "https://towolabs.com/",
},
{
id: "x-tokenize",
title: "X-tokenize",
description:
"X-Tokenize is a command line tool to simplify the process of creating, managing and distributing issued currencies and eventually NFTs on the XRPL.",
category_id: "developer_tooling",
category_name: "Developer Tooling",
link: "https://x-tokenize.com/",
},
{
id: "xp-market",
title: "XP Market",
description:
"XP Market is a price-tracking website for cryptoassets on the XRPL coupled with a decentralized exchange.",
category_id: "exchanges",
category_name: "Exchanges",
link: "https://xpmarket.com/",
},
{
id: "xrp-cafe",
title: "XRP Cafe",
description:
"XRP Cafe is an NFT marketplace built by the community that aims to be the easiest way to build, sell and mint NFTs.",
category_id: "nfts",
category_name: "NFTs",
link: "https://xrp.cafe/",
},
{
id: "xrp-toolkit",
title: "XRP Toolkit",
description:
"XRP Toolkit is a platform for managing crypto assets and trading on the XRP Ledger's decentralized exchange.",
category_id: "infrastructure",
category_name: "Infrastructure",
link: "https://www.xrptoolkit.com/",
},
{
id: "xrpl-rosetta",
title: "XRPL Rosetta",
description:
"XRPL Rosetta explores fiat data on XRPL through visualization.",
category_id: "infrastructure",
category_name: "Infrastructure",
link: "https://threexrp.dev/",
},
{
id: "xrpl-org-ledger-explorer",
title: "XRPL.org Ledger Explorer",
description:
"XRPL.org's Ledger Explorer is a block explorer of the XRP Ledger.",
category_id: "infrastructure",
category_name: "Infrastructure",
link: "https://livenet.xrpl.org/",
},
{
id: "xrpscan",
title: "XRPScan",
description:
"XRPSCAN is an explorer and analytics platform for the XRP Ledger. We provide a clean and simple way to look up accounts, ledgers and transactions.",
category_id: "infrastructure",
category_name: "Infrastructure",
link: "https://xrpscan.com/",
},
{
id: "xumm-wallet",
title: "Xumm Wallet",
description:
"Xumm Wallet is a non custodial wallet with superpower for the XRP Ledger.",
category_id: "wallet",
category_name: "Wallet",
link: "https://xumm.app/#team",
},
];
const featured_categories = {
infrastructure: "Infrastructure",
developer_tooling: "Developer Tooling",
};
const other_categories = {
interoperability: "Interoperability",
wallet: "Wallet",
nfts: "NFTs",
exchanges: "Exchanges",
gaming: "Gaming",
security: "Security",
payments: "Payments",
sustainability: "Sustainability",
cbdcs: "CBDCs",
custody: "Custody",
};
const uses = [
{
id: "infrastructure",
title: "Infrastructure",
number: 7,
description:
"Build and operate components or systems that help the functionality of the XRP Ledger, such as Nodes, dev tools, storage, security and more.",
},
{
id: "developer_tooling",
title: "Developer Tooling",
number: 4,
description:
"Developers can leverage open-source libraries, SDKs and more to help build their project and access essential XRP Ledger functionality.",
},
{
id: "interoperability",
title: "Interoperability",
number: 3,
description:
"Developers and node operators can build and run custom sidechains while leveraging the XRPL’s lean and efficient feature set.",
},
{
id: "wallet",
title: "Wallet",
number: 4,
description:
"Build digital wallets to store passwords and interact with various blockchains to send and receive digital assets, including XRP.",
},
{
id: "nfts",
title: "NFTs",
number: 7,
description:
"XRPL supports the issuance of IOUs that represent a currency of any value, as well as non-fungible tokens (NFTs).",
},
{
id: "exchanges",
title: "Exchanges",
number: 2,
description:
"Build sophisticated exchanges where users can invest and trade crypto and assets such as stocks, ETFs, and commodities.",
},
{
id: "gaming",
title: "Gaming",
number: 5,
description:
"The XRPL supports gaming at high speed given its reliable throughput, low fees, and sidechain interoperability.",
},
{
id: "security",
title: "Security",
number: 1,
description:
"Build services and tools that help prevent and combat fraudulent activity with the XRPL.",
},
{
id: "payments",
title: "Payments",
number: 2,
description:
"Leverage the efficiency and speed of the XRP Ledger to move value all over the globe.",
},
{
id: "cbdc",
title: "CBDC",
number: 1,
description:
"A private version of the XRP Ledger provides Central Banks a secure, controlled, and flexible solution to issue and manage Central Bank Issued Digital Currencies (CBDCs).",
},
{
id: "sustainability",
title: "Sustainability",
number: 2,
description:
"Use the XRP Ledger to tokenize carbon offsets as non-fungible tokens (NFTs).",
},
{
id: "custody",
title: "Custody",
number: 2,
description:
"Use the XRP Ledger to build crypto custody and securely hold, store and use your assets.",
},
];
const target = { prefix: "" }; // TODO: fixme
export default function Uses() {
const { translate } = useTranslate();
return (
<div className="landing page-uses landing-builtin-bg">
<div>
{/* Modal */}
<div
className="modal fade "
id="categoryFilterModal"
tabIndex={-1}
aria-labelledby="categoryFilterModalLabel"
aria-hidden="true"
>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<a className="btn cancel" data-dismiss="modal">
<span className="chevron">
<span />
<span />
</span>{" "}
{translate("Cancel")}
</a>
<a className="btn apply" data-dismiss="modal">
{translate("Apply")}{" "}
<span className="chevron">
<span />
<span />
</span>
</a>
</div>
<div className="modal-body">
{/* */}
<div className="p-3 page-events">
<form>
<p className="category-header mb-4">
{translate("Featured Categories")}{" "}
<span
id="featured_count_old"
className="featured_count category_count"
>
2
</span>
</p>
{/* $$ for category_id, category_name in featured_categories.items() $$ */}
<div className="cat_checkbox category-checkbox pb-2">
<input
className="events-filter input_$$category_id$$"
type="checkbox"
name="categories"
id="input_$$category_id$$"
defaultValue="$$category_id$$"
defaultChecked
/>
<label
className="font-weight-bold"
htmlFor="input_$$category_id$$"
>
$$ category_name $$
</label>
</div>
{/* )) } */}
<p className="category-header pt-5 mt-3 mb-4">
{translate("Other Categories")}{" "}
<span
id="other_count_old"
className="other_count category_count"
>
0
</span>
</p>
{/* $$ for category_id, category_name in other_categories.items() $$ */}
<div className="cat_checkbox category-checkbox pb-2">
<input
className="events-filter input_$$category_id$$"
type="checkbox"
name="categories"
id="input_$$category_id$$"
defaultValue="$$category_id$$"
/>
<label htmlFor="input_$$category_id$$">
$$ category_name $$
</label>
</div>
{/* )) } */}
</form>
</div>
{/* */}
</div>
<div className="modal-footer">
<button
type="button"
className="btn btn-primary"
data-dismiss="modal"
>
{translate("Apply")}
</button>
<a className="btn " data-dismiss="modal">
{translate("Cancel")}
</a>
</div>
</div>
</div>
</div>
{/* end modal */}
<div className="overflow-hidden">
<section className="container-new py-26 text-lg-center">
<div className="p-3 col-lg-8 mx-lg-auto">
<div className="d-flex flex-column-reverse">
<h1 className="mb-0">
{translate("Powering Innovative Use Cases and Projects.")}
</h1>
<h6 className="eyebrow mb-3">{translate("XRPL Ecosystem")}</h6>
</div>
</div>
</section>
<section className="container-new py-26">
<div className="col-lg-5 p-3">
<div className="d-flex flex-column-reverse">
<div className="d-flex justify-content-start align-items-center">
<div className="arrow-animation" id="arrowAnimation">
{" "}
</div>
<span className="explore-projects">
Explore Featured Projects{" "}
</span>
</div>
<p className="text-sm">
{translate(
"The XRPL has a rich ecosystem with many contributors globally. Explore the community of developers, validators, and partners."
)}
</p>
<h6 className="eyebrow mb-3">
{translate("Introducing the XRPL Ecosystem")}
</h6>
</div>
</div>
<div className="col-lg-5 offset-lg-2 p-5 d-flex">
<div
className="mb-4 pb-3 numbers-animation"
id="numbersAnimation"
/>
<div
className="mb-4 pb-3 numbers-animation"
id="numbersAnimationLight"
/>
<div className="apps-built">
Apps/exchanges <br /> built on the <br /> XRPL{" "}
</div>
</div>
<ul
className="card-grid card-grid-4xN ls-none mt-4 pt-lg-2"
id="use-case-card-grid"
>
{uses.map((use) => (
<li
key={use.id}
className="col use-case-circle ls-none p-3 open-modal"
data-id={use.id}
data-title={use.title}
data-description={use.description}
data-number={use.number}
// data-src={use.src}
>
<div className="circle-content">
<img className="circle-img" id={use.id} alt="use-logos" />
<p className="circle-text">{use.title}</p>
<div className="pill-box">
<span className="pill-number">{use.number}</span>
</div>
</div>
</li>
))}
</ul>
</section>
<div className="modal modal-uses" id="myModal">
<div className="modal-content-uses">
<div className="arrows-container" id="arrows-container">
<button className="arrow-button left-arrow" id="leftArrow">
<img alt="left arrow" />
</button>
<button className="arrow-button right-arrow" id="rightArrow">
<img alt="right arrow" />
</button>
</div>
<div className="content-section">
<img
className="section-image"
alt="section image"
width={40}
height={40}
/>
</div>
<div className="content-section">
<p className="section-text-title">Title</p>
</div>
<div className="content-section">
<p className="section-text-description">Description</p>
</div>
<div className="content-section">
<hr className="section-separator" />
</div>
<div className="content-section">
<div className="section-logos">Group of logos here...</div>
</div>
</div>
</div>
<section className="join-xrpl-section py-26">
<div className="colorful-join-text-wrapper">
<span className="colorful-join-text">
{" "}
Join the XRPL Ecosystem and showcase your XRPL project,
application, or product. Get featured on the Developer
Reflections blog or Ecosystem page.{" "}
</span>
<div className="mt-10">
<a
target="_blank"
className="btn btn-primary btn-arrow"
href="https://xrpl.typeform.com/dev-spotlight"
>
{translate("Submit Your Project")}
</a>
</div>
</div>
</section>
<section className="container-new py-26">
<div className="col-12 col-lg-8 col-xl-6 p-3 mb-5">
<div className="d-flex flex-column-reverse">
<h3 className="h4 h2-sm">
{translate("Businesses and developers&nbsp;")}
<br className="until-sm" />
{translate(" rely on the XRP Ledger")}
</h3>
<h6 className="eyebrow mb-3">
{translate("Solving Real-World Problems")}
</h6>
</div>
<p className="mb-0 longform mt-8-until-sm mt-3 ">
{translate(
"With intentional innovations, tools and documentation that accelerate development and minimize time to market, XRP Ledger is used to create solutions across an expansive range of industries and use cases."
)}
</p>
</div>
<a
className="btn d-block d-lg-none"
data-toggle="modal"
data-target="#categoryFilterModal"
>
<span className="mr-3">
<img
src={require("./static/img/uses/usecase-filter.svg")}
alt="Filter button"
/>
</span>
{translate("Filter by Categories")}
<span className="ml-3 total_count category_count">2</span>
</a>
{/* Start company cards */}
<div className="row col-12 m-0 p-0 mt-4 pt-2">
<div className="left col-3 m-0 p-0 mt-2 d-none d-lg-block">
{/* Side bar Desktop. */}
<div className="p-3 category_sidebar">
<form>
<p className="category-header mb-4">
{translate("Featured Categories")}{" "}
<span
id="featured_count_old"
className="featured_count category_count"
>
2
</span>
</p>
{/* $$ for category_id, category_name in featured_categories.items() $$ */}
<div className="cat_checkbox category-checkbox pb-2">
<input
className="events-filter input_$$category_id$$"
type="checkbox"
name="categories"
id="input_$$category_id$$"
defaultValue="$$category_id$$"
defaultChecked
/>
<label
className="font-weight-bold"
htmlFor="input_$$category_id$$"
>
$$ category_name $$
</label>
</div>
{/* )) } */}
<p className="category-header pt-5 mt-3 mb-4">
{translate("Other Categories")}{" "}
<span
id="other_count_old"
className="other_count category_count"
>
0
</span>
</p>
{/* $$ for category_id, category_name in other_categories.items() $$ */}
<div className="cat_checkbox category-checkbox pb-2">
<input
className="events-filter input_$$category_id$$"
type="checkbox"
name="categories"
id="input_$$category_id$$"
defaultValue="$$category_id$$"
/>
<label htmlFor="input_$$category_id$$">
$$ category_name $$
</label>
</div>
{/* )) } */}
</form>
</div>
{/* End sidebar desktop */}
</div>
{/* cards */}
<div
className="right row col row-cols-lg-2 m-0 p-0"
id="use_case_companies_list"
>
{cards.map((card) => (
<a
className="card-uses category_{card.category_id}"
href={card.link}
target="_blank"
id={card.id}
>
<div className="card-body row">
<span className="w-100 mb-3 pb-3">
<img
className="mw-100 biz-logo"
alt="$$card.title|default(card.id)$$"
/>
</span>
<h4 className="card-title h6">{card.title}</h4>
<p className="card-text">{card.description}</p>
<div className="align-self-end">
<span className="label label-use-{card.category_id}">
{card.category_name}
</span>
</div>
</div>
</a>
))}
</div>
{/* end cards */}
</div>
{/* end company cards */}
</section>
</div>
</div>
</div>
);
}

500
content/xrp-overview.page.tsx Normal file
View File

@@ -0,0 +1,500 @@
import * as React from "react";
import { useTranslate } from "@portal/hooks";
import briefcaseIcon from "./static/img/icons/briefcase.svg";
import userIcon from "./static/img/icons/user.svg";
const links = [
{ hash: "#about-xrp", text: "About XRP" },
{ hash: "#xrp-trading", text: "XRP in Trading" },
{ hash: "#ripple", text: "Ripple vs. XRP" },
{ hash: "#wallets", text: "XRP Wallets" },
{ hash: "#exchanges", text: "XRP Exchanges" },
];
const softwallets = [
{ href: "https://towolabs.com/", id: "wallet-towo", alt: "Towo" },
{ href: "https://xumm.app/", id: "wallet-xumm", alt: "Xumm" },
{ href: "https://trustwallet.com/", id: "wallet-trust", alt: "Trust Wallet" },
{
href: "https://gatehub.net/",
id: "wallet-gatehub",
alt: "Gatehub",
imgclasses: "invertible-img",
},
];
const hardwallets = [
{
href: "https://www.ledger.com/",
id: "wallet-ledger",
alt: "Ledger",
imgclasses: "invertible-img",
},
{ href: "https://keyst.one/", id: "wallet-keystone", alt: "Keystone" },
{
href: "https://dcentwallet.com/?lang=en",
id: "wallet-dcent",
alt: "Dcent",
},
{
href: "https://trezor.io/",
id: "wallet-trezor",
alt: "Trezor",
imgclasses: "invertible-img",
},
];
const exchanges = [
{ href: "https://www.bitstamp.net/", id: "exch-bitstamp", alt: "Bitstamp" },
{ href: "https://www.kraken.com/", id: "exch-kraken", alt: "Kraken" },
{ href: "https://cex.io/", id: "exch-cex-io", alt: "Cex.io" },
{ href: "https://www.liquid.com/", id: "exch-liquid", alt: "Liquid" },
{ href: "https://www.lmax.com/", id: "exch-lmax", alt: "LMAX" },
{ href: "https://www.bitfinex.com/", id: "exch-bitfinex", alt: "Bitfinex" },
{
href: "https://www.etoro.com/crypto/exchange/",
id: "exch-etoro",
alt: "eToro",
},
{
href: "https://currency.com",
id: "exch-currency-com",
alt: "Currency.com",
},
{ href: "https://bittrex.com/", id: "exch-bittrex", alt: "Bittrex" },
];
export default function XrpOverview() {
const { translate } = useTranslate();
const [activeSection, setActiveSection] = React.useState(null);
React.useEffect(() => {
const handleScroll = () => {
const sections = [
"about-xrp",
"xrp-trading",
"ripple",
"wallets",
"exchanges",
];
let currentSection = null;
for (const id of sections) {
const element = document.getElementById(id);
if (element) {
const rect = element.getBoundingClientRect();
if (
rect.top <= window.innerHeight / 2 &&
rect.bottom >= window.innerHeight / 2
) {
currentSection = id;
break;
}
}
}
setActiveSection(currentSection);
};
window.addEventListener("scroll", handleScroll);
return () => {
window.removeEventListener("scroll", handleScroll);
};
}, []);
return (
<div className="landing">
<div>
<div className="position-relative">
<img
alt="default-alt-text"
src={require("./img/backgrounds/xrp-overview-blue.svg")}
className="landing-bg"
id="xrp-overview-blue"
/>
</div>
<section className="py-26 text-center">
<div className="col-lg-5 mx-auto text-center">
<div className="d-flex flex-column-reverse">
<h1 className="mb-0">
{translate("Your Questions About XRP, Answered")}
</h1>
<h6 className="eyebrow mb-3">{translate("XRP Overview")}</h6>
</div>
</div>
</section>
<section className="container-new my-20">
<div className="card-grid card-grid-1x2">
<div className="d-none-sm mt-lg-0">
<ul className="page-toc no-sideline p-0 sticky-top floating-nav">
{links.map((link) => (
<li
key={link.hash}
className={`nav-item ${
activeSection === link.hash.substring(1) ? "active" : ""
}`}
>
<a
className={`sidelinks nav-link ${
activeSection === link.hash.substring(1) ? "active" : ""
}`}
href={link.hash}
>
{link.text}
</a>
</li>
))}
</ul>
</div>
<div className="col mt-lg-0">
<div className="link-section pb-26" id="about-xrp">
<h2 className="h4 h2-sm mb-8">{translate("What Is XRP?")}</h2>
<h5 className="longform mb-10">
{translate(
"XRP is a digital asset that’s native to the XRP Ledger—an open-source, permissionless and decentralized"
)}{" "}
<a
href="https://www.distributedagreement.com/2018/09/24/what-is-a-blockchain/"
target="_blank"
rel="noopener noreferrer"
>
{translate("blockchain technology.")}
</a>
</h5>
<p className="mb-6">
{translate(
"Created in 2012 specifically for payments, XRP can settle transactions on the ledger in 3-5 seconds. It was built to be a better Bitcoin—faster, cheaper and greener than any other digital asset."
)}
</p>
<div className="overflow-x-xs">
<table className="mb-10 landing-table">
<thead>
<tr>
<th>
<h6>{translate("Benefits")}</h6>
</th>
<th>
<h6>{translate("XRP")}</h6>
</th>
<th>
<h6>{translate("Bitcoin")}</h6>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>{translate("Fast")}</td>
<td>{translate("3-5 seconds to settle")}</td>
<td>{translate("500 seconds to settle")}</td>
</tr>
<tr>
<td>{translate("Low-Cost")}</td>
<td>{translate("$0.0002/tx")}</td>
<td>{translate("$0.50/tx")}</td>
</tr>
<tr>
<td>{translate("Scalable")}</td>
<td>{translate("1,500 tx per second")}</td>
<td>{translate("3 tx per second")}</td>
</tr>
<tr>
<td>{translate("Sustainable")}</td>
<td>
{translate(
"Environmentally sustainable (negligible energy consumption)"
)}
</td>
<td>
{translate("0.3% of global energy consumption")}
</td>
</tr>
</tbody>
</table>
</div>
<p className="mb-10">
{translate(
"XRP can be sent directly without needing a central intermediary, making it a convenient instrument in bridging two different currencies quickly and efficiently. It is freely exchanged on the open market and used in the real world for enabling cross-border payments and microtransactions."
)}
</p>
<div className="card-grid card-grid-2xN mb-10">
<div>
<img
alt="default-alt-text"
className="mw-100 mb-2 invertible-img"
src={briefcaseIcon}
/>
<h6 className="fs-4-5">
{translate("Financial Institutions")}
</h6>
<p className="">
{translate(
"Leverage XRP as a bridge currency to facilitate faster, more affordable cross-border payments around the world."
)}
</p>
</div>
<div>
<img
alt="default-alt-text"
className="mw-100 mb-2 invertible-img"
src={userIcon}
/>
<h6 className="fs-4-5">
{translate("Individual Consumers")}
</h6>
<p>
{translate(
"Use XRP to move different currencies around the world. "
)}
</p>
</div>
</div>
<div className="mt-10 p-10 br-8 cta-card position-relative">
<img
alt="default-alt-text"
src={require("./img/backgrounds/cta-xrp-overview-magenta.svg")}
className="cta cta-bottom-right"
/>
<div className="z-index-1 position-relative">
<h2 className="h4 mb-10-until-sm mb-8-sm">
{translate(
"The XRP Ledger was designed with sustainability in mind."
)}
</h2>
<p className="mb-10">
{translate(
"Explore the impact of the world's first major, global, public carbon-neutral blockchain."
)}
</p>
<a className="btn btn-primary btn-arrow" href="impact">
{translate("Impact")}
</a>
</div>
</div>
</div>
<div className="py-26 link-section" id="xrp-trading">
<h2 className="h4 h2-sm mb-8">
{translate("How Is XRP Used in Trading?")}
</h2>
<h5 className="longform mb-10">
{translate(
"XRP is traded on more than 100 markets and exchanges worldwide."
)}
</h5>
<p className="mb-6">
{translate(
"XRP’s low transaction fees, reliability and high-speed enable traders to use the digital asset as high-speed, cost-efficient and reliable collateral across trading venues—"
)}
<a
href="https://ripple.com/insights/xrp-a-preferred-base-currency-for-arbitrage-trading/"
target="_blank"
>
{translate("seizing arbitrage opportunities")}
</a>
{translate(
", servicing margin calls and managing general trading inventory in real time."
)}
</p>
<p>
{translate(
"Because of the properties inherent to XRP and the ecosystem around it, traders worldwide are able to shift collateral, bridge currencies and switch from one crypto into another nearly instantly, across any exchange on the planet."
)}
</p>
</div>
<div className="py-26 link-section" id="ripple">
<h2 className="h4 h2-sm mb-8">
{translate(
"What Is the Relationship Between Ripple and XRP?"
)}
</h2>
<h5 className="longform mb-10">
<a href="https://ripple.com" target="_blank">
{translate("Ripple")}
</a>
{translate(
" is a technology company that makes it easier to build a high-performance, global payments business. XRP is a digital asset independent of this."
)}
</h5>
<p>
{translate(
"There is a finite amount of XRP. All XRP is already in existence today—no more than the original 100 billion can be created. The XRPL founders gifted 80 billion XRP, the platform’s native currency, to Ripple. To provide predictability to the XRP supply, Ripple has locked 55 billion XRP (55% of the total possible supply) into a series of escrows using the XRP Ledger itself. The XRPL's transaction processing rules, enforced by the consensus protocol, control the release of the XRP."
)}
</p>
<div className="mt-10 p-10 br-8 cta-card position-relative">
<img
alt="default-alt-text"
src={require("./img/backgrounds/cta-xrp-overview-green-2.svg")}
className="landing-bg cta cta-bottom-right"
/>
<div className="z-index-1 position-relative">
<h3 className="h4">
{translate("As of ")}
<span className="stat-highlight" id="ripple-escrow-as-of">
December 2017
</span>
<br />
<span className="d-inline-flex">
<img
id="xrp-mark-overview"
className="mw-100 invertible-img mr-2"
src={require("./img/logos/xrp-mark.svg")}
alt="XRP Logo Mark"
/>
<span
className="numbers stat-highlight"
id="ripple-escrow-amount"
>
55B
</span>
</span>
<br />
{translate("XRP remains in escrow")}
</h3>
</div>
</div>
</div>
<div className="link-section py-26" id="wallets">
<h2 className="h4 h2-sm mb-8">
{translate("What Wallets Support XRP?")}
</h2>
<h5 className="longform mb-10">
{translate(
"Digital wallets are pieces of software that allow people to send, receive, and store cryptocurrencies, including XRP. There are two types of digital wallets: hardware and software."
)}
</h5>
<ul className="nav nav-grid-lg cols-of-5" id="wallets">
<li className="nav-item nav-grid-head">
<h6 className="fs-4-5">{translate("Software Wallets")}</h6>
</li>
{softwallets.map((wallet) => (
<li key={wallet.id} className="nav-item">
<a
className="nav-link external-link"
href={wallet.href}
target="_blank"
>
<img
className="mw-100 $$ if wallet.imgclasses $${wallet.imgclasses}$$ endif $$"
id={wallet.id}
alt={wallet.alt}
/>
</a>
</li>
))}
<li className="nav-item nav-grid-head">
<h6 className="fs-4-5">{translate("Hardware Wallets")}</h6>
</li>
{hardwallets.map((wallet) => (
<li className="nav-item">
<a
className="nav-link external-link"
href={wallet.href}
target="_blank"
>
<img
className={`mw-100 ${
!!wallet.imgclasses && wallet.imgclasses
}`}
id={wallet.id}
alt={wallet.alt}
/>
</a>
</li>
))}
</ul>
<p className="fs-3 mt-10">
{translate(
"Disclaimer: This information is drawn from other sources on the internet. XRPL.org does not endorse or recommend any exchanges or make any representations with respect to exchanges or the purchase or sale of digital assets more generally. It’s advisable to conduct your own due diligence before relying on any third party or third-party technology, and providers may vary significantly in their compliance, data security, and privacy practices."
)}
</p>
</div>
<div className="py-26 link-section" id="exchanges">
<h2 className="h4 h2-sm mb-8">
{translate("What Exchanges Support XRP?")}
</h2>
<h5 className="longform mb-10">
{translate(
"Exchanges are where people trade currencies. XRP is traded on more than 100 markets and exchanges worldwide."
)}
</h5>
<p className="mb-10">
{translate(
"There are different types of exchanges that vary depending on the type of market (spot, futures, options, swaps), and the type of security model (custodial, non-custodial)."
)}
</p>
<div className="card-grid card-grid-2xN mb-10">
<div>
<h6 className="fs-4-5">{translate("Spot Exchanges")}</h6>
<p className="mb-0">
{translate(
"Spot exchanges allow people to buy and sell cryptocurrencies at current (spot) market rates."
)}
</p>
</div>
<div>
<h6 className="fs-4-5">
{translate("Futures, Options and Swap Exchanges")}
</h6>
<p className="mb-0">
{translate(
"Futures, options and swap exchanges allow people to buy and sell standardized contracts of cryptocurrency market rates in the future."
)}
</p>
</div>
<div>
<h6 className="fs-4-5">
{translate("Custodial Exchanges")}
</h6>
<p className="mb-0">
{translate(
"Custodial exchanges manage a user’s private keys, and publish centralized order books of buyers and sellers."
)}
</p>
</div>
<div>
<h6 className="fs-4-5">
{translate("Non-Custodial Exchanges")}
</h6>
<p className="mb-0">
{translate(
"Non-custodial exchanges, also known as decentralized exchanges, do not manage a user’s private keys, and publish decentralized order books of buyers and sellers on a blockchain."
)}
</p>
</div>
</div>
<h6>
{translate("Top Exchanges, according to CryptoCompare")}
</h6>
<ul
className="nav nav-grid-lg cols-of-5 mb-10"
id="top-exchanges"
>
{exchanges.map((exch, i) => (
<li className="nav-item" key={exch.id}>
<a
className="nav-link external-link"
href={exch.href}
target="_blank"
>
<span className="longform mr-3">{i}</span>
<img className="mw-100" id={exch.id} alt={exch.alt} />
</a>
</li>
))}
</ul>
<p className="fs-3 mt-10 mb-0">
{translate(
"Disclaimer: This information is drawn from other sources on the internet. XRPL.org does not endorse or recommend any exchanges or make any representations with respect to exchanges or the purchase or sale of digital assets more generally. It’s advisable to conduct your own due diligence before relying on any third party or third-party technology, and providers may vary significantly in their compliance, data security, and privacy practices."
)}
</p>
</div>
</div>
</div>
</section>
</div>
</div>
);
}