Skip to content

Commit 6709a83

Browse files
joaquim-vergesjoaquim-verges
committed
fix server rendering
1 parent 762c02e commit 6709a83

File tree

13 files changed

+388
-384
lines changed

13 files changed

+388
-384
lines changed

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

Lines changed: 92 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,12 @@ import { metadataBase } from "@/lib/constants";
33
import type { Metadata } from "next";
44
import Image from "next/image";
55
import Link from "next/link";
6-
import { ConnectSmartAccount } from "../../../components/account-abstraction/connect-smart-account";
7-
import { SponsoredTx } from "../../../components/account-abstraction/sponsored-tx";
6+
import {
7+
ConnectSmartAccountCustomPreview,
8+
ConnectSmartAccountPreview,
9+
} from "../../../components/account-abstraction/connect-smart-account";
10+
import { SponsoredTxPreview } from "../../../components/account-abstraction/sponsored-tx";
11+
import { CodeExample } from "../../../components/code/code-example";
812

913
export const metadata: Metadata = {
1014
metadataBase,
@@ -48,9 +52,12 @@ export default function Page() {
4852
<div className="w-full mx-auto my-auto sm:w-full order-first lg:order-last relative flex flex-col space-y-2">
4953
<div className="max-w-full sm:max-w-[500px] p-8">
5054
<Image
51-
src={require("../../../../public/account-abstraction.png")}
55+
src={"/account-abstraction.png"}
56+
width={600}
57+
height={400}
5258
objectFit={"contain"}
5359
alt=""
60+
priority={true}
5461
/>
5562
</div>
5663
</div>
@@ -67,3 +74,85 @@ export default function Page() {
6774
</main>
6875
);
6976
}
77+
78+
function ConnectSmartAccount() {
79+
return (
80+
<>
81+
<div className="space-y-2">
82+
<h2 className="text-2xl sm:text-3xl font-semibold tracking-tight">
83+
Connect smart accounts
84+
</h2>
85+
<p className="max-w-[600px]">
86+
Enable smart accounts on the UI components or build your own UI.
87+
</p>
88+
</div>
89+
<CodeExample
90+
preview={<ConnectSmartAccountPreview />}
91+
code={`// Using UI components
92+
import { ConnectButton } from "thirdweb/react";
93+
94+
function App(){
95+
return (<>
96+
<ConnectButton client={client}
97+
// account abstraction options
98+
accountAbstraction={{ chain, sponsorGas: true }} />
99+
</>);
100+
};`}
101+
lang="tsx"
102+
/>
103+
<CodeExample
104+
preview={<ConnectSmartAccountCustomPreview />}
105+
code={`// Using your own UI
106+
import { useConnect } from "thirdweb/react";
107+
import { createWallet } from "thirdweb/wallets";
108+
109+
function App(){
110+
const { connect } = useConnect({ client,
111+
// account abstraction options
112+
accountAbstraction: { chain, sponsorGas: true }});
113+
114+
return (<>
115+
<button onClick={() => connect(async () => {
116+
// any wallet connected here will be
117+
// converted to a smart account
118+
const adminWallet = createWallet("io.metamask");
119+
await adminWallet.connect({ client });
120+
return adminWallet;
121+
})}>Connect (metamask)</button>
122+
</>);
123+
};`}
124+
lang="tsx"
125+
/>
126+
</>
127+
);
128+
}
129+
130+
function SponsoredTx() {
131+
return (
132+
<>
133+
<div className="space-y-2">
134+
<h2 className="text-2xl sm:text-3xl font-semibold tracking-tight">
135+
Sponsored transactions
136+
</h2>
137+
<p className="max-w-[600px]">
138+
Set `sponsorGas: true` to enable gas-free transactions for your users.
139+
<br />
140+
Free on testnets, billed at the end of the month on mainnets.
141+
</p>
142+
</div>
143+
<CodeExample
144+
preview={<SponsoredTxPreview />}
145+
code={`import { claimTo } from "thirdweb/extensions/erc1155";
146+
import { TransactionButton } from "thirdweb/react";
147+
148+
function App(){
149+
return (<>
150+
{/* transactions will be sponsored */}
151+
<TransactionButton transaction={() => claimTo({ contract, to: "0x123...", tokenId: 0n, quantity: 1n })}>Mint</TransactionButton>
152+
</>);
153+
};`}
154+
lang="tsx"
155+
/>
156+
</>
157+
);
158+
}

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

Lines changed: 90 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import { metadataBase } from "@/lib/constants";
44
import type { Metadata } from "next";
55
import Image from "next/image";
66
import Link from "next/link";
7-
import { AnyAuth } from "../../../components/in-app-wallet/any-auth";
8-
import { SponsoredInAppTx } from "../../../components/in-app-wallet/sponsored-tx";
7+
import { SponsoredInAppTxPreview } from "../../../components/in-app-wallet/sponsored-tx";
8+
import { StyledConnectEmbed } from "../../../components/styled-connect-embed";
99

1010
export const metadata: Metadata = {
1111
metadataBase,
@@ -48,9 +48,12 @@ export default function Page() {
4848
<div className="w-full mx-auto my-auto sm:w-full order-first lg:order-last relative flex flex-col space-y-2">
4949
<div className="max-w-full sm:max-w-[600px]">
5050
<Image
51-
src={require("../../../../public/in-app-wallet.png")}
51+
src={"/in-app-wallet.png"}
52+
width={600}
53+
height={400}
5254
objectFit={"contain"}
5355
alt=""
56+
priority={true}
5457
/>
5558
</div>
5659
</div>
@@ -67,3 +70,87 @@ export default function Page() {
6770
</main>
6871
);
6972
}
73+
74+
function AnyAuth() {
75+
return (
76+
<>
77+
<div className="space-y-2">
78+
<h2 className="text-2xl sm:text-3xl font-semibold tracking-tight">
79+
Any Auth Method
80+
</h2>
81+
<p className="max-w-[600px]">
82+
Use any of the built-in auth methods or bring your own.
83+
<br />
84+
Supports custom auth endpoints to integrate with your existing user
85+
base.
86+
</p>
87+
</div>
88+
89+
<CodeExample
90+
preview={<StyledConnectEmbed />}
91+
code={`import { inAppWallet } from "thirdweb/wallets";
92+
import { ConnectEmbed } from "thirdweb/react";
93+
94+
95+
const wallets = [
96+
inAppWallet(
97+
// built-in auth methods
98+
{ auth: {
99+
options: ["email", "phone", "passkey", "google", "apple", "facebook"]
100+
}
101+
}
102+
// or bring your own auth endpoint
103+
)
104+
];
105+
106+
function App(){
107+
return (
108+
<ConnectEmbed client={client} wallets={wallets} />);
109+
};`}
110+
lang="tsx"
111+
/>
112+
</>
113+
);
114+
}
115+
116+
function SponsoredInAppTx() {
117+
return (
118+
<>
119+
<div className="space-y-2">
120+
<h2 className="text-2xl sm:text-3xl font-semibold tracking-tight">
121+
Signless Sponsored Transactions
122+
</h2>
123+
<p className="max-w-[600px]">
124+
With in-app wallets, users don&apos;t need to confirm every
125+
transaction.
126+
<br />
127+
Combine it with smart account flag to cover gas costs for the best UX.
128+
</p>
129+
</div>
130+
<CodeExample
131+
preview={<SponsoredInAppTxPreview />}
132+
code={`import { inAppWallet } from "thirdweb/wallets";
133+
import { claimTo } from "thirdweb/extensions/erc1155";
134+
import { ConnectButton, TransactionButton } from "thirdweb/react";
135+
136+
137+
const wallets = [
138+
inAppWallet(
139+
// turn on gas sponsorship for in-app wallets
140+
{ smartAccount: { chain, sponsorGas: true }}
141+
)
142+
];
143+
144+
function App(){
145+
return (<>
146+
<ConnectButton client={client} wallets={wallets} />
147+
148+
{/* signless, sponsored transactions */}
149+
<TransactionButton transaction={() => claimTo({ contract, to: "0x123...", tokenId: 0n, quantity: 1n })}>Mint</TransactionButton>
150+
</>);
151+
};`}
152+
lang="tsx"
153+
/>
154+
</>
155+
);
156+
}

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

Lines changed: 85 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@ import { metadataBase } from "@/lib/constants";
33
import type { Metadata } from "next";
44
import Image from "next/image";
55
import Link from "next/link";
6-
import { StyledPayEmbed } from "../../../components/pay/embed";
7-
import { PayTransactionButton } from "../../../components/pay/transaction-button";
6+
import { CodeExample } from "../../../components/code/code-example";
7+
import { StyledPayEmbedPreview } from "../../../components/pay/embed";
8+
import { PayTransactionButtonPreview } from "../../../components/pay/transaction-button";
89

910
export const metadata: Metadata = {
1011
metadataBase,
@@ -47,9 +48,12 @@ export default function Page() {
4748
<div className="w-full mx-auto my-auto sm:w-full order-first lg:order-last relative flex flex-col space-y-2">
4849
<div className="max-w-full sm:max-w-[600px]">
4950
<Image
50-
src={require("../../../../public/pay.png")}
51+
width={600}
52+
height={400}
53+
src={"/pay.png"}
5154
objectFit={"contain"}
5255
alt=""
56+
priority={true}
5357
/>
5458
</div>
5559
</div>
@@ -64,3 +68,81 @@ export default function Page() {
6468
</main>
6569
);
6670
}
71+
72+
function StyledPayEmbed() {
73+
return (
74+
<>
75+
<div className="space-y-2">
76+
<h2 className="text-2xl sm:text-3xl font-semibold tracking-tight">
77+
Embed component
78+
</h2>
79+
<p className="max-w-[600px]">
80+
Inline component that allows users to buy any currency.
81+
<br />
82+
Customize theme, currency, amounts, payment methods and more.
83+
</p>
84+
</div>
85+
86+
<CodeExample
87+
preview={<StyledPayEmbedPreview />}
88+
code={`
89+
import { PayEmbed } from "thirdweb/react";
90+
91+
function App() {
92+
return (
93+
<PayEmbed
94+
client={client}
95+
/>
96+
);
97+
};`}
98+
lang="tsx"
99+
/>
100+
</>
101+
);
102+
}
103+
104+
function PayTransactionButton() {
105+
return (
106+
<>
107+
<div className="space-y-2">
108+
<h2 className="text-2xl sm:text-3xl font-semibold tracking-tight">
109+
Transaction Button
110+
</h2>
111+
<p className="max-w-[600px]">
112+
Transaction Button is a handy component that handles transactions.
113+
<br />
114+
If your user doesn&apos;t have enough funds for that transaction, a
115+
pre-filled pay modal will appear with the exact amount needed.
116+
</p>
117+
</div>
118+
119+
<CodeExample
120+
preview={<PayTransactionButtonPreview />}
121+
code={`import { claimTo } from "thirdweb/extensions/erc1155";
122+
import { TransactionButton, useActiveAccount } from "thirdweb/react";
123+
124+
125+
function App() {
126+
const account = useActiveAccount();
127+
128+
return (
129+
<TransactionButton
130+
transaction={() => {
131+
// any transaction works
132+
return claimTo({
133+
contract,
134+
quantity: 1n,
135+
tokenId: 0n,
136+
to: account.address,
137+
});
138+
}}
139+
>
140+
Buy for 10 MATIC
141+
</TransactionButton>
142+
);
143+
};`}
144+
lang="tsx"
145+
/>
146+
</>
147+
);
148+
}

0 commit comments

Comments
 (0)