mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-21 04:05:49 +00:00
e94a5a0269
- Changed the payments page to use `index.page.tsx` instead of `index.md` for better component integration. - Added `AdvantagesSection` and `ProjectCards` components to both payments and tokenization pages to enhance content presentation. - Adjusted CSS styles for improved responsiveness and layout consistency across different screen sizes. - Removed outdated security card implementation in tokenization page and replaced it with a more streamlined advantages section.
306 lines
9.2 KiB
TypeScript
306 lines
9.2 KiB
TypeScript
import React, { useRef, useState } from "react";
|
|
import { useThemeHooks } from '@redocly/theme/core/hooks';
|
|
import { NavList } from "shared/components/nav-list";
|
|
import { Link } from "@redocly/theme/components/Link/Link";
|
|
import { AdvantagesSection } from "shared/components/advantages-section";
|
|
import { ProjectCards } from "shared/components/project-cards";
|
|
|
|
export const frontmatter = {
|
|
seo: {
|
|
title: "Tokenization",
|
|
description:
|
|
"Explore the possibilities of tokenization on the XRP Ledger, revolutionizing ownership, transactions, and value exchange with unparalleled efficiency and security.",
|
|
},
|
|
};
|
|
|
|
const useCases = [
|
|
{
|
|
description: "Stablecoin Issuer",
|
|
link: "/docs/use-cases/tokenization/stablecoin-issuer/",
|
|
},
|
|
{
|
|
description: "NFT Marketplace",
|
|
link: "/docs/use-cases/tokenization/nftoken-marketplace/",
|
|
},
|
|
{
|
|
description: "Multi-purpose Token Issuer",
|
|
link: "/docs/use-cases/tokenization/creating-an-asset-backed-multi-purpose-token"
|
|
},
|
|
{
|
|
description: "Authorized Minter",
|
|
link: "/docs/use-cases/tokenization/authorized-minter/",
|
|
},
|
|
{
|
|
description: "Digital Artist",
|
|
link: "/docs/use-cases/tokenization/digital-artist/",
|
|
},
|
|
];
|
|
|
|
|
|
|
|
const securityAdvantages = [
|
|
{
|
|
id: "trustlines",
|
|
title: "Trust Lines & Authorized Trust Lines",
|
|
contents: [
|
|
{
|
|
href: "/docs/concepts/tokens/fungible-tokens/",
|
|
subtitle: "Trust Lines",
|
|
description: "No spamming of wallets without permission.",
|
|
},
|
|
{
|
|
href: "/docs/concepts/tokens/fungible-tokens/authorized-trust-lines/",
|
|
subtitle: "Authorized Trustlines",
|
|
description: "Control who can hold your tokens with allowlisting.",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "freeze-clawbacks",
|
|
title: "Freeze & Clawbacks",
|
|
contents: [
|
|
{
|
|
href: "/docs/concepts/tokens/fungible-tokens/",
|
|
subtitle: "Freeze",
|
|
description: "If you see signs of suspicious activity, you can suspend trading of your token while investigating the issue.",
|
|
},
|
|
{
|
|
href: "/docs/concepts/tokens/fungible-tokens/clawing-back-tokens/",
|
|
subtitle: "Clawback",
|
|
description: "Recover tokens distributed to accounts in error: for example, reclaim funds sent to an account sanctioned for illegal activity.",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "ntf-tokens",
|
|
title: "Non-transferable Tokens",
|
|
contents: [
|
|
{
|
|
href: "/docs/concepts/tokens/nfts/non-transferable-tokens/",
|
|
subtitle: "Transferable flag",
|
|
description: "Native support for nontransferable items such as identity tokens, airline credits, and consumer rewards, honored by all on-chain participants.",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "royalties",
|
|
title: "Royalties",
|
|
contents: [
|
|
{
|
|
href: "/docs/references/protocol/data-types/nftoken/#transferfee",
|
|
subtitle: "NFT Transfer Fees",
|
|
description: "Reliably collect your percentage of the sale price of your tokens.",
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
const stats = [
|
|
{
|
|
id: "nfts-minted",
|
|
stat: "20K",
|
|
description: "NFTs minted",
|
|
},
|
|
{
|
|
id: "nft-trading-vol",
|
|
stat: "~1000",
|
|
description: "NFT trading volume",
|
|
},
|
|
{
|
|
id: "network-speed",
|
|
stat: "4",
|
|
description: "Seconds to confirmation",
|
|
},
|
|
{
|
|
id: "fee-per-tx",
|
|
stat: "$0.001",
|
|
description: "Avg fee per NFT tx",
|
|
},
|
|
];
|
|
|
|
const projects = [
|
|
{
|
|
id: "xrpcafe",
|
|
label: "XRP cafe",
|
|
url: "https://xrp.cafe",
|
|
},
|
|
{
|
|
id: "onXRP",
|
|
label: "onXRP",
|
|
url: "https://nft.onxrp.com",
|
|
},
|
|
{
|
|
id: "xaman",
|
|
label: "Xaman labs",
|
|
url: "https://Xaman.app",
|
|
},
|
|
{
|
|
id: "amy",
|
|
label: "amy.network",
|
|
url: "https://token.amy.network",
|
|
},
|
|
{
|
|
id: "sologenic",
|
|
label: "Sologenic",
|
|
url: "https://sologenic.org/trade",
|
|
},
|
|
{
|
|
id: "carbonland",
|
|
label: "Carbonland trust",
|
|
url: "https://www.carbonlandtrust.com",
|
|
},
|
|
{
|
|
id: "nautilus",
|
|
label: "Nautilus wallet",
|
|
url: "https://github.com/nautls/nautilus-wallet",
|
|
},
|
|
{
|
|
id: "evernode",
|
|
label: "Evernode",
|
|
url: "https://evernode.org",
|
|
},
|
|
{
|
|
id: "raised-in-space",
|
|
label: "Raised in space",
|
|
url: "https://raisedinspace.com",
|
|
},
|
|
];
|
|
|
|
const articles = [
|
|
{
|
|
time: "NOV 2023",
|
|
title: "NFTs and the XRPL: A Marriage of Art and Technology",
|
|
url: "https://medium.com/@MariaSolorzano/title-nfts-and-the-xrpl-a-marriage-of-art-and-technology-cf76a0432693",
|
|
},
|
|
// TODO: Add more articles that aren't focused on price speculation
|
|
];
|
|
|
|
|
|
|
|
export default function Tokenization() {
|
|
const modalRef = useRef(null);
|
|
const { useTranslate } = useThemeHooks();
|
|
const { translate } = useTranslate();
|
|
|
|
return (
|
|
<div className="landing page-tokenization">
|
|
<div className="position-relative"></div>
|
|
<div className="position-relative d-none-sm"></div>
|
|
<section className="container-new mt-lg-16">
|
|
<div className="card-grid card-grid-2xN">
|
|
<div className="col">
|
|
<img className="tokenization-graphic mw-100 hide-md" />
|
|
</div>
|
|
<div className="col">
|
|
<div className="d-flex flex-column-reverse">
|
|
<img className="tokenization-graphic mw-100 show-md" />
|
|
<h2 className="h4 h2-sm mb-10">
|
|
{translate(
|
|
"Work with a variety of tokens supported by the XRP Ledger."
|
|
)}
|
|
</h2>
|
|
<h6 className="eyebrow mb-3 text-large">
|
|
{translate("Tokenization")}
|
|
</h6>
|
|
</div>
|
|
<p className="mb-10">
|
|
{translate(
|
|
"Explore the possibilities of tokenization on the XRP Ledger, revolutionizing ownership, transactions, and value exchange with unparalleled efficiency and security."
|
|
)}
|
|
</p>
|
|
<div className="tokenization-color-bar" />
|
|
<div className="mb-10">
|
|
<NavList pages={useCases} bottomBorder={false} />
|
|
</div>
|
|
<div className="d-flex">
|
|
<Link
|
|
className="btn btn-primary d-inline-flex align-items-center"
|
|
to="/docs"
|
|
>
|
|
{translate("Quick Start")}
|
|
</Link>{" "}
|
|
<a
|
|
className="ml-4 video-external-link btn-none"
|
|
target="_blank"
|
|
href="https://www.youtube.com/playlist?list=PLJQ55Tj1hIVZtJ_JdTvSum2qMTsedWkNi"
|
|
>
|
|
<i className="fa fa-video-camera" />
|
|
<span className="link-text">{translate("Learn more")}</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<AdvantagesSection
|
|
title="Security advantages"
|
|
description="Check out the security features you can tap into right from the chain without the hassle of piecing together smart contracts."
|
|
advantages={securityAdvantages}
|
|
useLinks
|
|
/>
|
|
|
|
<section className="container-new py-20">
|
|
<div className="d-flex flex-column-reverse">
|
|
<h4 className="eyebrow mb-16">{translate("Stats")}</h4>
|
|
</div>
|
|
<div className="tokenization-stats">
|
|
{stats.map((statElement) => (
|
|
<div
|
|
className="stat-container align-items-center"
|
|
key={statElement.id}
|
|
>
|
|
<div className="stat">{statElement.stat}</div>
|
|
<div className="desc">{translate(statElement.description)}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
<ProjectCards
|
|
title="Featured real world projects"
|
|
projects={projects}
|
|
showCarousel={true}
|
|
/>
|
|
|
|
<section className="container-new py-20">
|
|
<div className="d-flex flex-column-reverse">
|
|
<h4 className="eyebrow mb-16">{translate("Related Articles")}</h4>
|
|
</div>
|
|
<div className="related-articles card-grid card-grid-3xN mb-16">
|
|
{articles.map((article, index) => (
|
|
<div className="article-card-container" key={`article-${index}`}>
|
|
<div className="article-card-background" />
|
|
<a
|
|
className="article-card col p-8 float-up-on-hover"
|
|
target="_blank"
|
|
href={article.url}
|
|
>
|
|
<div className="time h4 normal mb-8">
|
|
{translate(article.time)}
|
|
</div>
|
|
<div className="h5 mb-4">{translate(article.title)}</div>
|
|
<div className="btn btn-primary btn-arrow-out">
|
|
{translate("Read More")}
|
|
</div>
|
|
</a>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="more-related">
|
|
<div className="d-flex flex-column-reverse">
|
|
<h4 className="eyebrow mb-16">
|
|
{translate("More related articles")}
|
|
</h4>
|
|
</div>
|
|
<div className="video-external-link">
|
|
<a href="https://coincodecap.com/ripple-xrp">
|
|
{translate(
|
|
"Ripple (XRP): A Dive into its Working, Tokenomics, Price Factor and SEC Lawsuit"
|
|
)}
|
|
</a>
|
|
</div>
|
|
<div className="subtitle">{translate("November 2023")}</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|