Skip to content

Commit 16e3aa2

Browse files
committed
update
1 parent 5b02ff0 commit 16e3aa2

File tree

6 files changed

+740
-3
lines changed

6 files changed

+740
-3
lines changed
Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import { APIHeader } from "@/components/blocks/APIHeader";
2+
import {
3+
AccountAddressBasic,
4+
AccountAddressFormat,
5+
AccountAvatarBasic,
6+
AccountBalanceBasic,
7+
AccountBalanceCustomToken,
8+
AccountBalanceFormat,
9+
AccountBalanceUSD,
10+
AccountBalanceUSDFormatted,
11+
AccountBlobbieBasic,
12+
AccountNameBasic,
13+
AccountNameCustom,
14+
ConnectDetailsButtonClone,
15+
} from "@/components/headless-ui/account-examples";
16+
import ThirdwebProvider from "@/components/thirdweb-provider";
17+
import { metadataBase } from "@/lib/constants";
18+
import type { Metadata } from "next";
19+
20+
export const metadata: Metadata = {
21+
metadataBase,
22+
title: "Integrate Fiat & Cross-Chain Crypto Payments | thirdweb Pay",
23+
description:
24+
"The easiest way for users to transact in your app. Onramp users in clicks and generate revenue for each user transaction. Integrate for free.",
25+
};
26+
27+
export default function Page() {
28+
return (
29+
<ThirdwebProvider>
30+
<main className="container px-0 pb-20">
31+
<APIHeader
32+
title="Lorem ipsum"
33+
description={
34+
<>
35+
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
36+
Accusantium reprehenderit corrupti sapiente nobis impedit, beatae
37+
sit unde nihil, facilis vitae sunt. Aperiam sed vero repudiandae
38+
nisi maiores repellat molestiae illum.
39+
</>
40+
}
41+
docsLink="https://portal.thirdweb.com/react/v5/connecting-wallets/ui-components"
42+
heroLink="/pay.png"
43+
/>
44+
45+
<section className="space-y-8">
46+
<AccountAddressBasic />
47+
</section>
48+
<section className="space-y-8">
49+
<AccountAddressFormat />
50+
</section>
51+
<section className="space-y-8">
52+
<AccountNameBasic />
53+
</section>
54+
<section className="space-y-8">
55+
<AccountNameCustom />
56+
</section>
57+
<section className="space-y-8">
58+
<AccountBalanceBasic />
59+
</section>
60+
<section className="space-y-8">
61+
<AccountBalanceCustomToken />
62+
</section>
63+
<section className="space-y-8">
64+
<AccountBalanceFormat />
65+
</section>
66+
<section className="space-y-8">
67+
<AccountBalanceUSD />
68+
</section>
69+
<section className="space-y-8">
70+
<AccountBalanceUSDFormatted />
71+
</section>
72+
<section className="space-y-8">
73+
<AccountAvatarBasic />
74+
</section>
75+
<section className="space-y-8">
76+
<AccountBlobbieBasic />
77+
</section>
78+
<section className="space-y-8">
79+
<ConnectDetailsButtonClone />
80+
</section>
81+
</main>
82+
</ThirdwebProvider>
83+
);
84+
}

apps/playground-web/src/app/navLinks.ts

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,4 +85,26 @@ export const navLinks: SidebarLink[] = [
8585
name: "Blockchain API",
8686
href: "/connect/blockchain-api",
8787
},
88+
{
89+
name: "Headless UI",
90+
expanded: true,
91+
links: [
92+
{
93+
name: "Account",
94+
href: "/connect/ui",
95+
},
96+
{
97+
name: "NFT",
98+
href: "/connect/ui/nft",
99+
},
100+
{
101+
name: "Token",
102+
href: "/connect/ui/Token",
103+
},
104+
{
105+
name: "Transaction",
106+
href: "/connect/ui/transaction",
107+
},
108+
],
109+
},
88110
];

apps/playground-web/src/app/page.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,12 @@ function WalletsSection() {
6060
description="Performant, and reliable blockchain API"
6161
icon={CodeIcon}
6262
/>
63+
<ArticleCardIndex
64+
href="/connect/ui"
65+
title="Headless UI"
66+
description="Modular & composable set of UIs for your web3 applications"
67+
icon={CodeIcon}
68+
/>
6369
</div>
6470
</section>
6571
);

0 commit comments

Comments
 (0)