mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-10 06:45:49 +00:00
546 lines
18 KiB
TypeScript
546 lines
18 KiB
TypeScript
import { useThemeHooks } from "@redocly/theme/core/hooks";
|
||
import { Link } from "@redocly/theme/components/Link/Link";
|
||
import { useEffect } from "react";
|
||
|
||
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: "On-Chain 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.3B 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: "Pathfinding & Auto-Bridging for Liquidity",
|
||
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)}
|
||
<span className="feature-arrow" aria-hidden="true"></span>
|
||
</h2>
|
||
</header>
|
||
<p className="feature-description">{translate(description)}</p>
|
||
</article>
|
||
);
|
||
}
|
||
|
||
function RwaTokenizationFeatures() {
|
||
const { useTranslate } = useThemeHooks();
|
||
const { translate } = useTranslate();
|
||
return (
|
||
<section className="rwa-tokenization">
|
||
<div className="container max-w-1150">
|
||
<header className="rwa-header">
|
||
<h2 className="rwa-title">
|
||
{translate("Key Features for Asset Tokenization and DeFi Development")}
|
||
</h2>
|
||
</header>
|
||
<div className="feature-grid">
|
||
{featuresToken.map((feature, index) => (
|
||
<FeatureCard key={index} {...feature} />
|
||
))}
|
||
</div>
|
||
<div className="cta-container">
|
||
<Link
|
||
to="/docs/concepts/tokens/decentralized-exchange/autobridging"
|
||
className="btn btn-primary small-100 auto-bridge"
|
||
>
|
||
{translate("Learn About Auto-bridging")}
|
||
</Link>
|
||
<Link
|
||
to="/docs/concepts/tokens/fungible-tokens/paths"
|
||
className="btn btn-link"
|
||
>
|
||
{translate("Explore Pathfinding")}
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
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="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>
|
||
</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="upcoming-events">
|
||
<h2 className="upcoming-events__title">
|
||
{translate(
|
||
"Explore the companies pioneering tokenization using XRP Ledger"
|
||
)}
|
||
</h2>
|
||
<div className="upcoming-events__logo-container">
|
||
{companies.map((company, index) => (
|
||
<CompanyLogo key={index} {...company} />
|
||
))}
|
||
</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 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>
|
||
);
|
||
}
|
||
|
||
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>
|
||
);
|
||
};
|
||
|
||
export default function RwaTokenization() {
|
||
const { useTranslate } = useThemeHooks();
|
||
const { translate } = useTranslate();
|
||
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 (
|
||
<div className="page-rwa-tokenization">
|
||
<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 on the XRP Ledger"
|
||
)}
|
||
</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>
|
||
<div className="token-video-container">
|
||
<div className="token-video">
|
||
<iframe
|
||
width="100%"
|
||
height="100%"
|
||
src="https://www.youtube.com/embed/ZZ2KZTEJECg"
|
||
title="Generate and Send MPTs"
|
||
frameBorder="0"
|
||
></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>
|
||
</div>
|
||
</div>
|
||
|
||
<div 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 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("Start Building Now")}
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="token-events-wrapper">
|
||
<UpcomingEvents />
|
||
</div>
|
||
<TokenUtilitySection />
|
||
<div className="token-developer-tools-section">
|
||
<DeveloperTools />
|
||
</div>
|
||
<div className="token-features-section">
|
||
<RwaTokenizationFeatures />
|
||
</div>
|
||
<div className="token-dev-resources-section page-community">
|
||
<section className="bottom-cards-section bug-bounty section-padding">
|
||
<div className="com-card">
|
||
<img
|
||
className="top-right-img bug-bounty-card-bg"
|
||
alt="Top Right Image"
|
||
/>
|
||
<div className="card-content custom-gap">
|
||
<h6 className="card-title">{translate("Developer Resources")}</h6>
|
||
<p className="card-description">
|
||
{translate("use-cases.rwa.dev-resources.p1", "Easily integrate with ")}
|
||
<Link
|
||
target="_blank"
|
||
to="/docs/tutorials/public-servers"
|
||
>
|
||
{translate("use-cases.rwa.dev-resources.p2", "existing infrastructure ")}
|
||
</Link>
|
||
{translate(
|
||
"use-cases.rwa.dev-resources.p3",
|
||
"and access resources to support your development journey. Fund your project with XRPL Grants or speak to our dev advocates today."
|
||
)}
|
||
</p>
|
||
<div className="card-links">
|
||
<Link
|
||
className="com-card-link mt-16"
|
||
target="_blank"
|
||
to="https://xrplgrants.org/"
|
||
>
|
||
{translate("Apply for XRPL Grants")}
|
||
</Link>
|
||
<Link
|
||
className="com-card-link "
|
||
target="_blank"
|
||
to="https://twitter.com/RippleDevRel"
|
||
>
|
||
{translate("Talk to a Dev Advocate")}
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="com-card">
|
||
<img
|
||
className="bottom-right-img bug-bounty-card-bg-2"
|
||
alt="Bottom Right Image"
|
||
/>
|
||
<div className="card-content custom-gap">
|
||
<h6 className="card-title">
|
||
{translate("Learn & Stay Updated")}
|
||
</h6>
|
||
<p className="card-description">
|
||
{translate(
|
||
"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."
|
||
)}
|
||
</p>
|
||
<div className="card-links">
|
||
<Link
|
||
target="_blank"
|
||
className="com-card-link mt-16"
|
||
to="https://discord.gg/sfX3ERAMjH"
|
||
>
|
||
{translate("Join the Developer Discord")}
|
||
</Link>
|
||
<Link
|
||
target="_blank"
|
||
className="com-card-link"
|
||
to="https://xrplresources.org/subscribe"
|
||
>
|
||
{translate("Sign up for the Newsletter")}
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|