Skip to content

Commit 762c02e

Browse files
joaquim-vergesjoaquim-verges
committed
pay pages, disable light theme for now
1 parent c05cf3c commit 762c02e

File tree

8 files changed

+181
-99
lines changed

8 files changed

+181
-99
lines changed

‎apps/playground-web/public/pay.png‎

32.8 KB
Loading

‎apps/playground-web/src/app/connect/pay/page.tsx‎

Lines changed: 42 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { StyledPayEmbed } from "@/components/styled-pay-embed";
21
import { Button } from "@/components/ui/button";
32
import { metadataBase } from "@/lib/constants";
43
import type { Metadata } from "next";
4+
import Image from "next/image";
55
import Link from "next/link";
6-
import { CodeExample } from "../../../components/code/code-example";
7-
import { StyledPayTransaction } from "../../../components/styled-pay-transaction";
6+
import { StyledPayEmbed } from "../../../components/pay/embed";
7+
import { PayTransactionButton } from "../../../components/pay/transaction-button";
88

99
export const metadata: Metadata = {
1010
metadataBase,
@@ -15,87 +15,51 @@ export const metadata: Metadata = {
1515

1616
export default function Page() {
1717
return (
18-
<main className="flex-1 content-center relative">
19-
<section className="w-full py-12 md:py-24 lg:py-32 xl:py-48 z-10">
20-
<div className="container px-4 md:px-6">
21-
<div className="grid gap-10 lg:grid-cols-[1fr_400px] lg:gap-12 xl:grid-cols-[1fr_600px]">
22-
<div className="flex flex-col justify-center space-y-4 min-h-[100%]">
23-
<div className="space-y-2">
24-
<h1 className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none font-inter mb-6 text-balance">
25-
The easiest way for users to transact in your app
26-
</h1>
27-
<p className="max-w-[600px] text-gray-500 md:text-xl dark:text-gray-300 mb-6 font-inter">
28-
Onramp users in clicks with credit card &amp; cross-chain
29-
crypto payments — and generate revenue for each user
30-
transaction. Integrate for free.
31-
</p>
32-
</div>
33-
<div className="flex flex-col gap-4 min-[400px]:flex-row">
34-
<Button asChild size="lg">
35-
<Link
36-
target="_blank"
37-
href="https://portal.thirdweb.com/connect/pay/get-started"
38-
>
39-
View docs
40-
</Link>
41-
</Button>
42-
<Button asChild variant="outline" size="lg">
43-
<Link target="_blank" href="https://thirdweb.com/contact-us">
44-
Book a Demo
45-
</Link>
46-
</Button>
47-
</div>
48-
</div>
49-
<div className="w-full mx-auto my-auto sm:w-full lg:order-last relative flex flex-col space-y-2">
50-
<div className="shadow-xl md:w-[400px] md:mx-auto">
51-
<StyledPayEmbed />
52-
</div>
53-
<p className="md:text-xl text-center text-muted-foreground">
54-
<small>👆 This is live, try it out! 👆</small>
18+
<main className="flex-1 content-center relative py-12 md:py-24 lg:py-32 xl:py-48 space-y-12 md:space-y-24">
19+
<section className="container px-4 md:px-6">
20+
<div className="grid gap-10 lg:grid-cols-[1fr_400px] lg:gap-12 xl:grid-cols-[1fr_600px]">
21+
<div className="flex flex-col justify-center space-y-4 min-h-[100%]">
22+
<div className="space-y-2">
23+
<h1 className="text-4xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none font-inter mb-6 text-balance">
24+
The easiest way for users to transact in your app
25+
</h1>
26+
<p className="max-w-[600px] text-gray-500 md:text-xl dark:text-gray-300 mb-6 font-inter">
27+
Onramp users with credit card &amp; cross-chain crypto payments
28+
— and generate revenue for each user transaction.
5529
</p>
5630
</div>
31+
<div className="flex flex-col gap-4 min-[400px]:flex-row">
32+
<Button asChild size="lg">
33+
<Link
34+
target="_blank"
35+
href="https://portal.thirdweb.com/connect/pay/get-started"
36+
>
37+
View docs
38+
</Link>
39+
</Button>
40+
<Button asChild variant="outline" size="lg">
41+
<Link target="_blank" href="https://thirdweb.com/contact-us">
42+
Book a Demo
43+
</Link>
44+
</Button>
45+
</div>
46+
</div>
47+
<div className="w-full mx-auto my-auto sm:w-full order-first lg:order-last relative flex flex-col space-y-2">
48+
<div className="max-w-full sm:max-w-[600px]">
49+
<Image
50+
src={require("../../../../public/pay.png")}
51+
objectFit={"contain"}
52+
alt=""
53+
/>
54+
</div>
5755
</div>
5856
</div>
5957
</section>
6058
<section className="container px-4 md:px-6 space-y-8">
61-
<div className="space-y-2">
62-
<h2 className="text-4xl font-semibold tracking-tight">
63-
Transaction Button
64-
</h2>
65-
<p className="max-w-[600px]">
66-
Transaction Button is a handy component that handles transactions.
67-
<br />
68-
If your user doesn&apos;t have enough funds for that transaction, a
69-
pre-filled pay modal will appear with the exact amount needed.
70-
</p>
71-
</div>
72-
73-
<CodeExample
74-
preview={<StyledPayTransaction />}
75-
code={`import { TransactionButton } from "thirdweb/react";
76-
77-
78-
function App() {
79-
const account = useActiveAccount();
80-
81-
return (
82-
<TransactionButton
83-
transaction={() => {
84-
// any transaction works
85-
return claimTo({
86-
contract,
87-
quantity: 1n,
88-
tokenId: 0n,
89-
to: account?.address,
90-
});
91-
}}
92-
>
93-
Buy for 10 MATIC
94-
</TransactionButton>
95-
);
96-
};`}
97-
lang="tsx"
98-
/>
59+
<StyledPayEmbed />
60+
</section>
61+
<section className="container px-4 md:px-6 space-y-8">
62+
<PayTransactionButton />
9963
</section>
10064
</main>
10165
);

‎apps/playground-web/src/app/connect/sign-in/page.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
import { CodeExample } from "@/components/code/code-example";
2-
import { StyledConnectButton } from "@/components/styled-connect-button";
3-
import { StyledConnectEmbed } from "@/components/styled-connect-embed";
41
import { Button } from "@/components/ui/button";
52
import { metadataBase } from "@/lib/constants";
63
import type { Metadata } from "next";

‎apps/playground-web/src/app/features/Header.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export function Header() {
2323
</div>
2424

2525
<div className="flex items-center gap-1">
26-
<ThemeSelector />
26+
{/* <ThemeSelector /> */}
2727
<Button asChild size="icon" variant="ghost">
2828
<Link href="https://github.com/thirdweb-dev" target="_blank">
2929
<GithubIcon strokeWidth={1} />

‎apps/playground-web/src/app/providers.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { ThirdwebProvider } from "thirdweb/react";
66

77
export const Providers: React.FC<React.PropsWithChildren> = ({ children }) => {
88
return (
9-
<ThemeProvider attribute="class" enableSystem>
9+
<ThemeProvider attribute="class" defaultTheme="dark">
1010
<ThirdwebProvider>{children}</ThirdwebProvider>
1111
</ThemeProvider>
1212
);

‎apps/playground-web/src/components/pay/embed.tsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
"use client";
2+
3+
import { THIRDWEB_CLIENT } from "@/lib/client";
4+
import { useTheme } from "next-themes";
5+
import { PayEmbed } from "thirdweb/react";
6+
import { CodeExample } from "../code/code-example";
7+
8+
export function StyledPayEmbed() {
9+
return (
10+
<>
11+
<div className="space-y-2">
12+
<h2 className="text-2xl sm:text-3xl font-semibold tracking-tight">
13+
Embed component
14+
</h2>
15+
<p className="max-w-[600px]">
16+
Inline component that allows users to buy any currency.
17+
<br />
18+
Customize theme, currency, amounts, payment methods and more.
19+
</p>
20+
</div>
21+
22+
<CodeExample
23+
preview={<StyledPayEmbedPreview />}
24+
code={`
25+
import { PayEmbed } from "thirdweb/react";
26+
27+
function App() {
28+
return (
29+
<PayEmbed
30+
client={client}
31+
/>
32+
);
33+
};`}
34+
lang="tsx"
35+
/>
36+
</>
37+
);
38+
}
39+
40+
export function StyledPayEmbedPreview() {
41+
const { theme } = useTheme();
42+
43+
return (
44+
<PayEmbed
45+
client={THIRDWEB_CLIENT}
46+
theme={theme === "light" ? "light" : "dark"}
47+
/>
48+
);
49+
}

‎apps/playground-web/src/components/pay/transaction-button.tsx‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
"use client";
2+
3+
import { useTheme } from "next-themes";
4+
import { getContract } from "thirdweb";
5+
import { polygon } from "thirdweb/chains";
6+
import { claimTo } from "thirdweb/extensions/erc1155";
7+
import { TransactionButton, useActiveAccount } from "thirdweb/react";
8+
import { THIRDWEB_CLIENT } from "../../lib/client";
9+
import { CodeExample } from "../code/code-example";
10+
import { StyledConnectButton } from "../styled-connect-button";
11+
12+
export function PayTransactionButton() {
13+
return (
14+
<>
15+
<div className="space-y-2">
16+
<h2 className="text-2xl sm:text-3xl font-semibold tracking-tight">
17+
Transaction Button
18+
</h2>
19+
<p className="max-w-[600px]">
20+
Transaction Button is a handy component that handles transactions.
21+
<br />
22+
If your user doesn&apos;t have enough funds for that transaction, a
23+
pre-filled pay modal will appear with the exact amount needed.
24+
</p>
25+
</div>
26+
27+
<CodeExample
28+
preview={<PayTransactionButtonPreview />}
29+
code={`import { claimTo } from "thirdweb/extensions/erc1155";
30+
import { TransactionButton, useActiveAccount } from "thirdweb/react";
31+
32+
33+
function App() {
34+
const account = useActiveAccount();
35+
36+
return (
37+
<TransactionButton
38+
transaction={() => {
39+
// any transaction works
40+
return claimTo({
41+
contract,
42+
quantity: 1n,
43+
tokenId: 0n,
44+
to: account.address,
45+
});
46+
}}
47+
>
48+
Buy for 10 MATIC
49+
</TransactionButton>
50+
);
51+
};`}
52+
lang="tsx"
53+
/>
54+
</>
55+
);
56+
}
57+
58+
const contract = getContract({
59+
address: "0x96B30d36f783c7BC68535De23147e2ce65788e93",
60+
chain: polygon,
61+
client: THIRDWEB_CLIENT,
62+
});
63+
64+
function PayTransactionButtonPreview() {
65+
const account = useActiveAccount();
66+
const { theme } = useTheme();
67+
68+
return account ? (
69+
<TransactionButton
70+
transaction={() => {
71+
if (!account) throw new Error("No active account");
72+
return claimTo({
73+
contract,
74+
quantity: 1n,
75+
tokenId: 0n,
76+
to: account?.address,
77+
});
78+
}}
79+
payModal={{
80+
theme: theme === "light" ? "light" : "dark",
81+
}}
82+
>
83+
Buy for 10 MATIC
84+
</TransactionButton>
85+
) : (
86+
<StyledConnectButton />
87+
);
88+
}

‎apps/playground-web/src/components/styled-pay-embed.tsx‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

0 commit comments

Comments
 (0)