mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-04 03:45:49 +00:00
508 lines
16 KiB
TypeScript
508 lines
16 KiB
TypeScript
import React, { useEffect } from "react";
|
||
import { useThemeHooks } from "@redocly/theme/core/hooks";
|
||
import { Link } from "@redocly/theme/components/Link/Link";
|
||
import { DeveloperResourcesSection } from "shared/components/developer-resources-section";
|
||
|
||
export const frontmatter = {
|
||
seo: {
|
||
title: "RWA Tokenization on XRP Ledger",
|
||
description:
|
||
"Power blockchain tokenization use cases on the XRP Ledger. Learn how to issue tokens or build real-world asset (RWA) tokenization solutions with developer tools and APIs.",
|
||
},
|
||
};
|
||
|
||
const benefitsData = [
|
||
{
|
||
iconClass: "low-fees",
|
||
title: "Fast Settlement and Low Fees",
|
||
description:
|
||
"Settle transactions in 3-5 seconds for a fraction of a cent — ideal for large-scale, high-volume RWA tokenization.",
|
||
},
|
||
{
|
||
iconClass: "access",
|
||
title: "Onchain Metadata",
|
||
description:
|
||
"Easily store key asset information or link to off-chain data using simple APIs giving token holders more transparency and functionality.",
|
||
},
|
||
{
|
||
iconClass: "native-compliance",
|
||
title: "Native Compliance Capabilities",
|
||
description:
|
||
"Automatically check investor credentials, control who can transfer assets, and keep a full record of every transaction. ",
|
||
},
|
||
{
|
||
iconClass: "delegated-token-management",
|
||
title: "Delegated Token Management",
|
||
description:
|
||
"Use a robust permission system to let trusted third parties manage the token on your behalf.",
|
||
},
|
||
];
|
||
|
||
const companies = [
|
||
{
|
||
className: "archax",
|
||
alt: "Archax",
|
||
aspectRatio: 1.25,
|
||
link: "https://archax.com/",
|
||
},
|
||
{
|
||
className: "zoniqx",
|
||
alt: "Zoniqx",
|
||
aspectRatio: 2.7,
|
||
link: "https://www.zoniqx.com/",
|
||
},
|
||
{
|
||
className: "axiology",
|
||
alt: "Axiology",
|
||
aspectRatio: 1.25,
|
||
link: "https://www.axiology.xyz/",
|
||
},
|
||
{
|
||
className: "palisade",
|
||
alt: "Palisade",
|
||
aspectRatio: 1.25,
|
||
link: "https://www.palisade.co/",
|
||
},
|
||
{
|
||
className: "open-eden",
|
||
alt: "Open Eden",
|
||
aspectRatio: 5,
|
||
link: "https://openeden.com/tbill",
|
||
},
|
||
{
|
||
className: "ondo",
|
||
alt: "Ondo",
|
||
aspectRatio: 1.25,
|
||
link: "https://ondo.finance/",
|
||
},
|
||
{
|
||
className: "ripple-logo",
|
||
alt: "Ripple",
|
||
aspectRatio: 3.89,
|
||
link: "https://ripple.com/rwa-tokenization",
|
||
},
|
||
{
|
||
className: "meld",
|
||
alt: "Meld",
|
||
aspectRatio: 0.81,
|
||
link: "https://www.meld.gold/",
|
||
},
|
||
{
|
||
className: "hidden-road",
|
||
alt: "Hidden Road",
|
||
aspectRatio: 0.81,
|
||
link: "https://www.hiddenroad.com/",
|
||
},
|
||
];
|
||
|
||
const features = [
|
||
{
|
||
title: "Get Started with JavaScript",
|
||
link: "https://github.com/XRPLF/xrpl.js",
|
||
},
|
||
{
|
||
title: "Get Started with Python",
|
||
link: "https://github.com/XRPLF/xrpl-py",
|
||
},
|
||
{
|
||
title: "DEX Integration",
|
||
link: "/docs/tutorials/how-tos/use-tokens/trade-in-the-decentralized-exchange",
|
||
},
|
||
{
|
||
title: "Cross-chain Interoperability",
|
||
link: "https://docs.xrplevm.org/docs/axelar/intro-to-axelar/",
|
||
},
|
||
];
|
||
const featuresToken = [
|
||
{
|
||
title: "Proven Open-Source Technology",
|
||
description:
|
||
"With over 3.9B transactions processed, XRP Ledger has been a trusted, battle-tested blockchain for over a decade, supported by a global developer community committed to financial innovation. ",
|
||
number: "01",
|
||
},
|
||
{
|
||
title: "Purpose-Built for Finance",
|
||
description:
|
||
"XRP Ledger provides out-of-the-box institutional-grade functionality, reducing development overhead and eliminating the need for smart contracts. ",
|
||
number: "02",
|
||
},
|
||
{
|
||
title: "Native Compliance & Security",
|
||
description:
|
||
"Maintain control over tokenized assets and enforce compliance with precision using XRP Ledger's native tools such as issuer-defined Authorization, onchain Freeze capabilities, detailed metadata for attestations, and multi-signature accounts.",
|
||
number: "03",
|
||
},
|
||
{
|
||
title: "Optimal Liquidity Pathways",
|
||
description:
|
||
"Streamline cross-currency transactions and trading as XRP Ledger’s embedded trading features automatically identify the most efficient routes to enhance liquidity issued tokens and XRP. ",
|
||
number: "04",
|
||
},
|
||
];
|
||
|
||
function FeatureCard({ title, description }) {
|
||
const { useTranslate } = useThemeHooks();
|
||
const { translate } = useTranslate();
|
||
return (
|
||
<article className="feature-card">
|
||
<header className="feature-header">
|
||
<h2 className="feature-title">{translate(title)}</h2>
|
||
</header>
|
||
<p className="feature-description">{translate(description)}</p>
|
||
</article>
|
||
);
|
||
}
|
||
|
||
function RwaTokenizationFeatures() {
|
||
const { useTranslate } = useThemeHooks();
|
||
const { translate } = useTranslate();
|
||
return (
|
||
<section className="token-features-section">
|
||
<div className="rwa-tokenization">
|
||
<div className="container max-w-1150">
|
||
<header className="rwa-header">
|
||
<h2 className="rwa-title">
|
||
{translate(
|
||
"Defining Features on XRPL"
|
||
)}
|
||
</h2>
|
||
</header>
|
||
<div className="feature-grid">
|
||
{featuresToken.map((feature, index) => (
|
||
<FeatureCard key={index} {...feature} />
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
export function FeatureItem({ title, link }) {
|
||
const { useTranslate } = useThemeHooks();
|
||
const { translate } = useTranslate();
|
||
return (
|
||
<li className="feature-item">
|
||
<Link to={link} target="_blank">
|
||
<div className="feature-item__content">
|
||
<span className="feature-item__title">{translate(title)}</span>
|
||
<span className="right-arrow-item"> </span>
|
||
</div>
|
||
<div className="feature-item__divider"></div>
|
||
</Link>
|
||
</li>
|
||
);
|
||
}
|
||
|
||
function DeveloperTools() {
|
||
const { useTranslate } = useThemeHooks();
|
||
const { translate } = useTranslate();
|
||
return (
|
||
<section className="token-developer-tools-section">
|
||
<div className="developer-tools">
|
||
<div className="container">
|
||
<div className="row">
|
||
<div className="col-lg-6">
|
||
<header className="developer-tools__header">
|
||
<h2 className="developer-tools__title">
|
||
{translate("Developer Tools & APIs")}
|
||
</h2>
|
||
<p className="developer-tools__description">
|
||
{translate(
|
||
"Streamline development and build powerful RWA tokenization solutions with XRP Ledger's comprehensive developer toolset:"
|
||
)}
|
||
</p>
|
||
</header>
|
||
<ul className="developer-tools__list">
|
||
{features.map((feature, index) => (
|
||
<FeatureItem
|
||
key={index}
|
||
link={feature.link}
|
||
title={feature.title}
|
||
/>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
<div className="col-lg-6 m-h-300">
|
||
<div
|
||
className="developer-tools__image"
|
||
role="img"
|
||
aria-label="Developer tools illustration"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function CompanyLogo({ className, alt, aspectRatio, link }) {
|
||
return (
|
||
<div
|
||
onClick={() => window.open(link, "_blank")}
|
||
className={`company-logo ${className}`}
|
||
role="img"
|
||
aria-label={alt}
|
||
style={{ "--aspect-ratio": aspectRatio } as React.CSSProperties}
|
||
/>
|
||
);
|
||
}
|
||
function UpcomingEvents() {
|
||
const { useTranslate } = useThemeHooks();
|
||
const { translate } = useTranslate();
|
||
return (
|
||
<section className="token-events-wrapper">
|
||
<div className="upcoming-events">
|
||
<h2 className="upcoming-events__title">
|
||
{translate(
|
||
"Trusted by Leaders in Real-World Asset Tokenization"
|
||
)}
|
||
</h2>
|
||
<div className="upcoming-events__logo-container">
|
||
{companies.map((company, index) => (
|
||
<CompanyLogo key={index} {...company} />
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
const marketIntegrationData = [
|
||
{
|
||
title: "Trading",
|
||
description: (
|
||
<>
|
||
Utilize XRP Ledger's native{" "}
|
||
<Link to="/docs/concepts/tokens/decentralized-exchange">
|
||
decentralized exchange (DEX)
|
||
</Link>{" "}
|
||
with integrated{" "}
|
||
<Link to="/docs/concepts/tokens/decentralized-exchange/automated-market-makers">
|
||
Automated Market Makers (AMM)
|
||
</Link>{" "}
|
||
and onchain 24/7 order books, providing a developer-friendly environment
|
||
to create <Link to="/docs/use-cases/defi">DeFi solutions</Link> for
|
||
traditional finance applications.
|
||
</>
|
||
),
|
||
},
|
||
{
|
||
title: "Collateral Mobility",
|
||
description: (
|
||
<>
|
||
Issuers can enable{" "}
|
||
<Link target="_blank" to="/docs/concepts/payment-types/escrow">
|
||
escrow functionality
|
||
</Link>{" "}
|
||
to lock tokens and facilitate secure, conditional transfers of assets
|
||
based on time-locks or other conditions to enable automated financial
|
||
use cases onchain.
|
||
</>
|
||
),
|
||
},
|
||
{
|
||
title: "Delegated Distribution",
|
||
description:
|
||
"Token issuers can delegate user onboarding and token movement to distribution specialists, enabling them to scale their distribution network easily with a single transaction, while avoiding complex off-chain development.",
|
||
},
|
||
{
|
||
title: "Cross-Chain Markets",
|
||
description:
|
||
"Access cross-chain trading and lending markets to enhance token utility and liquidity across ecosystems.",
|
||
},
|
||
];
|
||
|
||
function TokenUtilitySection() {
|
||
const { useTranslate } = useThemeHooks();
|
||
const { translate } = useTranslate();
|
||
return (
|
||
<section className="token-utility-section">
|
||
<div className="container">
|
||
<h2 className="section-title">
|
||
{translate("Token Utility and Market Integration")}
|
||
</h2>
|
||
<div className="utility-grid">
|
||
{marketIntegrationData.map((item, index) => (
|
||
<div key={index} className="utility-card">
|
||
<h3 className="utility-title">{translate(item.title)}</h3>
|
||
<p className="utility-description">{item.description}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function TokenVideoSection() {
|
||
const { useTranslate } = useThemeHooks();
|
||
const { translate } = useTranslate();
|
||
return (
|
||
<section className="token-video-container">
|
||
<div className="token-video">
|
||
<iframe
|
||
width="100%"
|
||
height="100%"
|
||
src="https://www.youtube.com/embed/oKbf-IgPHho"
|
||
title="Multi Purpose Tokens (MPTs) on the XRPL"
|
||
frameBorder="0"
|
||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||
allowFullScreen
|
||
></iframe>
|
||
</div>
|
||
<div className="token-video-text-container">
|
||
<p>
|
||
{translate(
|
||
"Issue, manage, and trade real-world assets without needing to build smart contracts."
|
||
)}
|
||
</p>
|
||
<p>
|
||
{translate(
|
||
"XRP Ledger's built-in functionality and compliance-enabling features allow asset tokenization without additional layers of complexity."
|
||
)}
|
||
</p>
|
||
<p>
|
||
{translate(
|
||
"Access the full white paper to learn how XRP Ledger’s new token standard is shaping institutional-grade finance."
|
||
)}
|
||
</p>
|
||
<div className="d-lg-block small-100 __button-container">
|
||
<a
|
||
className="btn btn-primary d-block d-md-inline-block small-100"
|
||
href="/static/pdf/Whitepaper_the_future_of_asset_tokenization.pdf"
|
||
target="_blank"
|
||
rel="noopener"
|
||
download
|
||
>
|
||
{translate("Download White Paper")}
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
const BenefitCard = ({ iconClass, title, description }) => {
|
||
const { useTranslate } = useThemeHooks();
|
||
const { translate } = useTranslate();
|
||
return (
|
||
<article className="benefit-card">
|
||
<div className={`benefit-icon ${iconClass}`}></div>
|
||
<h3 className="benefit-title">{translate(title)}</h3>
|
||
<p className="benefit-description">{translate(description)}</p>
|
||
</article>
|
||
);
|
||
};
|
||
|
||
function TokenHeroSection() {
|
||
const { useTranslate } = useThemeHooks();
|
||
const { translate } = useTranslate();
|
||
return (
|
||
<section className="token-hero-section">
|
||
<div className="position-relative d-none-sm">
|
||
<img
|
||
alt="orange waves"
|
||
src={require("./../../../static/img/backgrounds/events-orange.svg")}
|
||
id="events-orange"
|
||
/>
|
||
</div>
|
||
<div className="token-title-container">
|
||
<h1 className="token-title">
|
||
{translate("Real-World Asset (RWA) Tokenization")}
|
||
</h1>
|
||
<div className="d-lg-block small-100 ">
|
||
<Link
|
||
className="btn btn-primary btn-arrow-out"
|
||
target="_blank"
|
||
to="/docs/use-cases/tokenization/creating-an-asset-backed-multi-purpose-token"
|
||
>
|
||
{translate("Get Started Now")}
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function TokenBenefitsSection() {
|
||
const { useTranslate } = useThemeHooks();
|
||
const { translate } = useTranslate();
|
||
return (
|
||
<section className="token-cards-wrapper">
|
||
<div className="token-cards-container">
|
||
<div>
|
||
<h2 className="cards-title-token">
|
||
{translate(
|
||
"Why Financial Developers Choose XRPL as an RWA Tokenization Platform"
|
||
)}
|
||
</h2>
|
||
</div>
|
||
<div className="benefits-section">
|
||
<div className="benefits-container">
|
||
{benefitsData.map((benefit, index) => (
|
||
<BenefitCard key={index} {...benefit} />
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
export default function RwaTokenization() {
|
||
const developerResourcesCards = [
|
||
{
|
||
title: "Learn & Stay Updated",
|
||
description:
|
||
"Stay ahead of the curve with the latest developments in RWA tokenization on the XRP Ledger by joining the developer Discord and signing up for the XRPL Community Newsletter.",
|
||
links: [
|
||
{
|
||
text: "Join the Developer Discord",
|
||
url: "https://discord.gg/sfX3ERAMjH",
|
||
},
|
||
{
|
||
text: "Sign up for the Newsletter",
|
||
url: "https://xrplresources.org/subscribe",
|
||
},
|
||
],
|
||
backgroundClass: "learn-stay-updated"
|
||
},
|
||
];
|
||
|
||
useEffect(() => {
|
||
const script = document.createElement("script");
|
||
script.id = "video-schema";
|
||
script.type = "application/ld+json";
|
||
script.innerHTML = JSON.stringify({
|
||
"@context": "https://schema.org",
|
||
"@type": "VideoObject",
|
||
name: "Generate and Send MPTs",
|
||
description:
|
||
"Use the Account Configurator to create an Issuing account. Use the MPT Generator to create a Multi-purpose Token. Send the MPT from the Issuing account to any account that authorizes receipt of the MPT.",
|
||
thumbnailUrl: "https://i.ytimg.com/vi_webp/ZZ2KZTEJECg/sddefault.webp",
|
||
uploadDate: "2025-04-11",
|
||
embedUrl: "https://www.youtube.com/embed/ZZ2KZTEJECg",
|
||
});
|
||
document.head.appendChild(script);
|
||
// Remove the script from the head when the component unmounts
|
||
return () => {
|
||
document.head.removeChild(script);
|
||
};
|
||
}, []);
|
||
return (
|
||
<main className="page-rwa-tokenization">
|
||
<TokenHeroSection />
|
||
<TokenBenefitsSection />
|
||
<TokenVideoSection />
|
||
|
||
<UpcomingEvents />
|
||
<TokenUtilitySection />
|
||
<DeveloperTools />
|
||
<RwaTokenizationFeatures />
|
||
<DeveloperResourcesSection cards={developerResourcesCards} />
|
||
</main>
|
||
);
|
||
}
|