Skip to content

docs: restructure Payments sidebar and refresh homepage #84

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rtomas wants to merge 2 commits into
base: main
Choose a base branch
from
Open

docs: restructure Payments sidebar and refresh homepage #84

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dd218f7
docs: restructure Payments sidebar and refresh homepage
rtomas Jul 14, 2026
b197b3f
Update style.css
rtomas Jul 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
130 changes: 58 additions & 72 deletions docs.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"theme": "aspen",
"theme": "mint",
"name": "WalletConnect Pay Docs",
"description": "Documentation for WalletConnect Pay. Integrate secure crypto payments into your app with step-by-step guides, APIs, and best practices.",
"colors": {
Expand Down Expand Up @@ -38,30 +38,45 @@
"icon": "credit-card",
"groups": [
{
"group": "WalletConnect Pay",
"group": "Get Started",
"pages": [
"payments/overview",
"payments/for-users",
"payments/token-and-chain-coverage",
"payments/fiat-coverage",
"payments/wallet-coverage",
"payments/cex-coverage"
{
"group": "Coverage & Reference",
"pages": [
"payments/token-and-chain-coverage",
"payments/fiat-coverage",
"payments/wallet-coverage",
"payments/cex-coverage"
]
}
]
},
{
"group": "WalletConnect Pay for Merchants",
"group": "For PSPs",
"pages": [
"payments/merchant/quickstart"
"payments/psps/overview",
{
"group": "Headless SDK",
"pages": [
"payments/psps/headless-sdk/overview",
"payments/psps/headless-sdk/how-it-works",
"payments/psps/headless-sdk/implementation",
"payments/psps/headless-sdk/packages-reference"
]
}
]
},
{
"group": "Merchant API",
"group": "For Merchants",
"pages": [
"payments/merchant/quickstart",
"payments/merchant-api/logo-specification"
]
},
{
"group": "WalletConnect Pay for Wallets",
"group": "For Wallets",
"pages": [
"payments/wallets/overview",
{
Expand All @@ -75,7 +90,7 @@
]
},
{
"group": "Integrate using the Wallet SDK",
"group": "Integrate Wallet SDK",
"pages": [
"payments/wallets/walletkit/kotlin",
"payments/wallets/walletkit/swift",
Expand All @@ -85,42 +100,27 @@
]
},
"payments/wallets/api-first",
"payments/wallets/tap-to-pay",
{
"group": "Token & Chain Support",
"pages": [
"payments/wallets/token-chain-support",
"payments/wallets/token-chain-support/usdt-support",
"payments/wallets/token-chain-support/solana-support"
]
},
"payments/wallets/tap-to-pay"
]
},
{
"group": "WalletConnect Pay for PSPs",
"pages": [
"payments/psps/overview",
{
"group": "Headless SDK",
"pages": [
"payments/psps/headless-sdk/overview",
"payments/psps/headless-sdk/how-it-works",
"payments/psps/headless-sdk/implementation",
"payments/psps/headless-sdk/packages-reference"
]
}
]
},
{
"group": "Ecommerce and Online Checkout",
"group": "For Checkout",
"pages": [
"payments/ecommerce/overview",
"payments/ecommerce/integration",
"payments/ecommerce/api-reference"
]
},
{
"group": "WalletConnect AI Agent SDK",
"group": "AI Agents",
"pages": [
"agents/overview"
]
Expand Down Expand Up @@ -195,30 +195,45 @@
"icon": "credit-card",
"groups": [
{
"group": "WalletConnect Pay",
"group": "Get Started",
"pages": [
"payments/overview",
"payments/for-users",
"payments/token-and-chain-coverage",
"payments/fiat-coverage",
"payments/wallet-coverage",
"payments/cex-coverage"
{
"group": "Coverage & Reference",
"pages": [
"payments/token-and-chain-coverage",
"payments/fiat-coverage",
"payments/wallet-coverage",
"payments/cex-coverage"
]
}
]
},
{
"group": "WalletConnect Pay for Merchants",
"group": "For PSPs",
"pages": [
"payments/merchant/quickstart"
"payments/psps/overview",
{
"group": "Headless SDK",
"pages": [
"payments/psps/headless-sdk/overview",
"payments/psps/headless-sdk/how-it-works",
"payments/psps/headless-sdk/implementation",
"payments/psps/headless-sdk/packages-reference"
]
}
]
},
{
"group": "Merchant API",
"group": "For Merchants",
"pages": [
"payments/merchant/quickstart",
"payments/merchant-api/logo-specification"
]
},
{
"group": "WalletConnect Pay for Wallets",
"group": "For Wallets",
"pages": [
"payments/wallets/overview",
{
Expand All @@ -232,7 +247,7 @@
]
},
{
"group": "Integrate using the Wallet SDK",
"group": "Integrate Wallet SDK",
"pages": [
"payments/wallets/walletkit/kotlin",
"payments/wallets/walletkit/swift",
Expand All @@ -242,42 +257,27 @@
]
},
"payments/wallets/api-first",
"payments/wallets/tap-to-pay",
{
"group": "Token & Chain Support",
"pages": [
"payments/wallets/token-chain-support",
"payments/wallets/token-chain-support/usdt-support",
"payments/wallets/token-chain-support/solana-support"
]
},
"payments/wallets/tap-to-pay"
]
},
{
"group": "WalletConnect Pay for PSPs",
"pages": [
"payments/psps/overview",
{
"group": "Headless SDK",
"pages": [
"payments/psps/headless-sdk/overview",
"payments/psps/headless-sdk/how-it-works",
"payments/psps/headless-sdk/implementation",
"payments/psps/headless-sdk/packages-reference"
]
}
]
},
{
"group": "Ecommerce and Online Checkout",
"group": "For Checkout",
"pages": [
"payments/ecommerce/overview",
"payments/ecommerce/integration",
"payments/ecommerce/api-reference"
]
},
{
"group": "WalletConnect AI Agent SDK",
"group": "AI Agents",
"pages": [
"agents/overview"
]
Expand Down Expand Up @@ -343,21 +343,7 @@
],
"tag": "Preview"
}
],
"global": {
"anchors": [
{
"anchor": "WalletConnect Pay",
"href": "https://walletconnect.com",
"icon": "globe"
},
{
"anchor": "Blog",
"href": "https://walletconnect.network/blog",
"icon": "newspaper"
}
]
}
]
},
"logo": {
"light": "/logo/light.svg",
Expand Down
95 changes: 52 additions & 43 deletions index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,53 +10,20 @@ import { ProductTiles } from '/snippets/home/product-tiles.mdx';
import { appCategories } from '/snippets/home/data.mdx';
import { ProductCard } from '/snippets/home/product-cards.mdx';

<div className="px-5 divide-y divide-gray-100 dark:divide-white/10">
<Container>
<div className="w-full flex flex-col">
<div className="flex flex-col items-start justify-center w-full max-w-4xl text-left">
<div
<div className="px-5">

<Container className="pt-0 pb-14">
<div className="flex flex-col w-full mb-8">
<div
className="text-gray-900 dark:text-gray-200 text-4xl tracking-tight"
>
WalletConnect Pay
</div>
<p
className="text-md text-gray-600 dark:text-gray-400 text-left mt-3 mb-4"
>
The easiest way to enable crypto payments from any wallet, any asset, anywhere.
</p>
<div className="flex flex-row gap-4 mt-5">
<a href="/payments/overview">
<button
type="button"
className="px-5 flex items-center font-medium text-sm rounded-full py-2 shadow-sm text-white dark:text-gray-900 bg-primary-dark dark:bg-primary-light hover:opacity-[0.9] hover:bg-primary justify-center"
>
Get started
<svg
className="size-3 ml-2 bg-white dark:bg-gray-900"
style={{
maskImage: 'url("https://mintlify.b-cdn.net/solid/arrow-right-long.svg")',
maskRepeat: 'no-repeat',
maskPosition: 'center center'
}}
/>
</button>
</a>
</div>
</div>
</div>

</Container>
<Container>
<div className="flex flex-col w-full mb-8">
<div className="flex items-center justify-between w-full">
<Title>
Introducing WalletConnect Pay
</Title>

</div>
<p
className="text-[#5B616E] dark:text-gray-300 text-md mb-1 mt-3"
>
**[WalletConnect Pay](/payments/overview)** is a complete, end-to-end crypto payment solution that allows PSPs and merchants to enable crypto payments from any wallet and any asset through a single, familiar integration.
A complete, end-to-end crypto payment solution that allows PSPs and merchants to enable crypto payments from any wallet and any asset through a single, familiar integration.
</p>
</div>
<div className="dark:hidden block">
Expand All @@ -71,7 +38,7 @@ import { ProductCard } from '/snippets/home/product-cards.mdx';
/>
<ProductCard
title="Wallet Integration"
description="Add built in support for WalletConnect Pay and allow your users to pay in real-world context, retaining custody and control of the UX."
description="Add built-in WalletConnect Pay support so users can pay in real-world context, keeping custody and UX control."
href="/payments/wallets/overview"
img="/images/wallet.png"
model="For Wallets"
Expand Down Expand Up @@ -99,7 +66,7 @@ import { ProductCard } from '/snippets/home/product-cards.mdx';
/>
<ProductCard
title="Wallet Integration"
description="Add built in support for WalletConnect Pay and allow your users to pay in real-world context, retaining custody and control of the UX."
description="Add built-in WalletConnect Pay support so users can pay in real-world context, keeping custody and UX control."
href="/payments/wallets/overview"
img="/images/wallet.png"
model="For Wallets"
Expand All @@ -115,7 +82,49 @@ import { ProductCard } from '/snippets/home/product-cards.mdx';
/>
</CardGroup>
</div>
<ul class="not-prose pb-[1px] h-1 min-w-full mt-3 overflow-auto" />
</Container>

<Container>
<div className="flex flex-col w-full mb-5">
<Title>
What's supported
</Title>
<p
className="text-[#5B616E] dark:text-gray-300 text-md mb-1 mt-3"
>
See the tokens, chains, fiat currencies, wallets, and exchanges available with WalletConnect Pay.
</p>
</div>
<Columns cols={2}>
<Card
title="Tokens & Chains"
icon="coins"
href="/payments/token-and-chain-coverage"
>
Supported tokens and blockchain networks.
</Card>
<Card
title="Fiat Currencies"
icon="money-bill"
href="/payments/fiat-coverage"
>
Fiat currencies available for settlement and pricing.
</Card>
<Card
title="Wallets"
icon="wallet"
href="/payments/wallet-coverage"
>
Wallets that support WalletConnect Pay.
</Card>
<Card
title="Exchanges (CEX)"
icon="building-columns"
href="/payments/cex-coverage"
>
Centralized exchanges supported for payments.
</Card>
</Columns>
</Container>

<Container>
Expand Down
6 changes: 3 additions & 3 deletions snippets/home/product-cards.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
export const ProductCard = ({ img, href, title, description, model, type }) => {
return (
<a href={href} rel="noopener noreferrer" className="group mb-5">
<a href={href} rel="noopener noreferrer" className="group no-underline" style={{ textDecoration: 'none', borderBottom: 'none', backgroundImage: 'none', marginBottom: '0.25rem' }}>
<div className="flex flex-col rounded-xl md:p-1">
<div className="w-full h-32 overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800">
<img
Expand All @@ -11,8 +11,8 @@ export const ProductCard = ({ img, href, title, description, model, type }) => {
noZoom
/>
</div>
<div className="flex flex-col gap-3 pb-2">
<h2 className="text-md font-medium text-gray-900 dark:text-gray-200 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors mb-[-8px]">
<div className="flex flex-col gap-3 pb-2" style={{ marginTop: '1rem' }}>
<h2 className="text-md font-medium text-gray-900 dark:text-gray-200 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors mb-[-8px]" style={{ marginTop: 0 }}>
{title}
</h2>
<p className="text-gray-500 dark:text-gray-400 text-sm font-medium">
Expand Down
Loading