Skip to content

Commit 81c9ee9

Browse files
gregfromstlgregfromstl
committed
[Playground] Refactor: Move ThirdwebProvider to each individual page for separate context (#4292)
<!-- start pr-codex --> ## PR-Codex overview The focus of this PR is to refactor the codebase by introducing a `ThirdwebProvider` component and removing unnecessary wallet-related logic from different components. ### Detailed summary - Introduced `ThirdwebProvider` component to wrap children with `_ThirdwebProvider` - Removed wallet-related logic from `ConnectSmartAccountPreview`, `SponsoredTxPreview`, `SponsoredTxZksyncPreview` components - Updated various components to use `ThirdwebProvider` instead of `ThirdwebProvider` directly > The following files were skipped due to too many changes: `apps/playground-web/src/app/connect/in-app-wallet/page.tsx`, `apps/playground-web/src/app/connect/pay/page.tsx`, `apps/playground-web/src/app/connect/auth/page.tsx`, `apps/playground-web/src/app/connect/sign-in/button/page.tsx`, `apps/playground-web/src/app/connect/blockchain-api/page.tsx` > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex -->
1 parent c6d1f79 commit 81c9ee9

File tree

15 files changed

+258
-252
lines changed

15 files changed

+258
-252
lines changed

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

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import ThirdwebProvider from "@/components/thirdweb-provider";
12
import { metadataBase } from "@/lib/constants";
23
import type { Metadata } from "next";
34
import {
@@ -16,24 +17,26 @@ export const metadata: Metadata = {
1617

1718
export default function Page() {
1819
return (
19-
<main className="pb-20 container px-0">
20-
<APIHeader
21-
title="Account Abstraction"
22-
description={
23-
<>
24-
Let users connect to their smart accounts with any wallet and unlock
25-
gas sponsorship, batched transactions, session keys and full wallet
26-
programmability.
27-
</>
28-
}
29-
docsLink="https://portal.thirdweb.com/connect/account-abstraction/overview"
30-
heroLink="/account-abstraction.png"
31-
/>
20+
<ThirdwebProvider>
21+
<main className="pb-20 container px-0">
22+
<APIHeader
23+
title="Account Abstraction"
24+
description={
25+
<>
26+
Let users connect to their smart accounts with any wallet and
27+
unlock gas sponsorship, batched transactions, session keys and
28+
full wallet programmability.
29+
</>
30+
}
31+
docsLink="https://portal.thirdweb.com/connect/account-abstraction/overview"
32+
heroLink="/account-abstraction.png"
33+
/>
3234

33-
<section className="space-y-8">
34-
<ConnectSmartAccount />
35-
</section>
36-
</main>
35+
<section className="space-y-8">
36+
<ConnectSmartAccount />
37+
</section>
38+
</main>
39+
</ThirdwebProvider>
3740
);
3841
}
3942

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

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import ThirdwebProvider from "@/components/thirdweb-provider";
12
import { metadataBase } from "@/lib/constants";
23
import type { Metadata } from "next";
34
import { SponsoredTxZksyncPreview } from "../../../../components/account-abstraction/sponsored-tx-zksync";
@@ -13,24 +14,26 @@ export const metadata: Metadata = {
1314

1415
export default function Page() {
1516
return (
16-
<main className="pb-20 container px-0">
17-
<APIHeader
18-
title="Account Abstraction"
19-
description={
20-
<>
21-
Let users connect to their smart accounts with any wallet and unlock
22-
gas sponsorship, batched transactions, session keys and full wallet
23-
programmability.
24-
</>
25-
}
26-
docsLink="https://portal.thirdweb.com/connect/account-abstraction/overview"
27-
heroLink="/account-abstraction.png"
28-
/>
17+
<ThirdwebProvider>
18+
<main className="pb-20 container px-0">
19+
<APIHeader
20+
title="Account Abstraction"
21+
description={
22+
<>
23+
Let users connect to their smart accounts with any wallet and
24+
unlock gas sponsorship, batched transactions, session keys and
25+
full wallet programmability.
26+
</>
27+
}
28+
docsLink="https://portal.thirdweb.com/connect/account-abstraction/overview"
29+
heroLink="/account-abstraction.png"
30+
/>
2931

30-
<section className="space-y-8">
31-
<SponsoredZksyncTx />
32-
</section>
33-
</main>
32+
<section className="space-y-8">
33+
<SponsoredZksyncTx />
34+
</section>
35+
</main>
36+
</ThirdwebProvider>
3437
);
3538
}
3639

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

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import ThirdwebProvider from "@/components/thirdweb-provider";
12
import { metadataBase } from "@/lib/constants";
23
import type { Metadata } from "next";
34
import { SponsoredTxPreview } from "../../../../components/account-abstraction/sponsored-tx";
@@ -13,24 +14,26 @@ export const metadata: Metadata = {
1314

1415
export default function Page() {
1516
return (
16-
<main className="pb-20 container px-0">
17-
<APIHeader
18-
title="Account Abstraction"
19-
description={
20-
<>
21-
Let users connect to their smart accounts with any wallet and unlock
22-
gas sponsorship, batched transactions, session keys and full wallet
23-
programmability.
24-
</>
25-
}
26-
docsLink="https://portal.thirdweb.com/connect/account-abstraction/overview"
27-
heroLink="/account-abstraction.png"
28-
/>
17+
<ThirdwebProvider>
18+
<main className="pb-20 container px-0">
19+
<APIHeader
20+
title="Account Abstraction"
21+
description={
22+
<>
23+
Let users connect to their smart accounts with any wallet and
24+
unlock gas sponsorship, batched transactions, session keys and
25+
full wallet programmability.
26+
</>
27+
}
28+
docsLink="https://portal.thirdweb.com/connect/account-abstraction/overview"
29+
heroLink="/account-abstraction.png"
30+
/>
2931

30-
<section className="space-y-8">
31-
<SponsoredTx />
32-
</section>
33-
</main>
32+
<section className="space-y-8">
33+
<SponsoredTx />
34+
</section>
35+
</main>
36+
</ThirdwebProvider>
3437
);
3538
}
3639

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

Lines changed: 24 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ export const dynamic = "force-dynamic";
33
import { BasicAuthPreview } from "@/components/auth/basic-auth";
44
import { GatedContentPreview } from "@/components/auth/gated-content";
55
import { CodeExample } from "@/components/code/code-example";
6+
import ThirdwebProvider from "@/components/thirdweb-provider";
67
import { metadataBase } from "@/lib/constants";
78
import type { Metadata } from "next";
89
import { APIHeader } from "../../../components/blocks/APIHeader";
@@ -15,30 +16,32 @@ export const metadata: Metadata = {
1516

1617
export default function Page() {
1718
return (
18-
<main className="pb-20 container px-0">
19-
<APIHeader
20-
title="Auth"
21-
description={
22-
<>
23-
Authenticate users to your backend using only their wallet. This is
24-
a secure and easy way to authenticate users without requiring them
25-
to create an additional account.
26-
</>
27-
}
28-
docsLink="https://portal.thirdweb.com/typescript/v5/auth"
29-
heroLink="/auth.png"
30-
/>
19+
<ThirdwebProvider>
20+
<main className="pb-20 container px-0">
21+
<APIHeader
22+
title="Auth"
23+
description={
24+
<>
25+
Authenticate users to your backend using only their wallet. This
26+
is a secure and easy way to authenticate users without requiring
27+
them to create an additional account.
28+
</>
29+
}
30+
docsLink="https://portal.thirdweb.com/typescript/v5/auth"
31+
heroLink="/auth.png"
32+
/>
3133

32-
<section className="space-y-8">
33-
<BasicAuth />
34-
</section>
34+
<section className="space-y-8">
35+
<BasicAuth />
36+
</section>
3537

36-
<div className="h-14" />
38+
<div className="h-14" />
3739

38-
<section className="space-y-8">
39-
<GatedContent />
40-
</section>
41-
</main>
40+
<section className="space-y-8">
41+
<GatedContent />
42+
</section>
43+
</main>
44+
</ThirdwebProvider>
4245
);
4346
}
4447

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

Lines changed: 44 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { WatchEventPreview } from "@/components/blockchain-api/watch-event-previ
44
import { WriteContractExtensionPreview } from "@/components/blockchain-api/write-contract-extension";
55
import { WriteContractRawPreview } from "@/components/blockchain-api/write-contract-raw";
66
import { CodeExample } from "@/components/code/code-example";
7+
import ThirdwebProvider from "@/components/thirdweb-provider";
78
import { metadataBase } from "@/lib/constants";
89
import type { Metadata } from "next";
910
import { APIHeader } from "../../../components/blocks/APIHeader";
@@ -17,47 +18,49 @@ export const metadata: Metadata = {
1718

1819
export default function Page() {
1920
return (
20-
<main className="pb-20 container px-0">
21-
<APIHeader
22-
title="Blockchain API"
23-
description={
24-
<>
25-
Performant, reliable and type safe API to read write to any contract
26-
on any EVM chain through our RPC Edge endpoints.
27-
</>
28-
}
29-
docsLink="https://portal.thirdweb.com/typescript/v5"
30-
heroLink="/blockchain-api.png"
31-
/>
32-
33-
<section className="space-y-8">
34-
<ReadContractRaw />
35-
</section>
36-
37-
<div className="h-14" />
38-
39-
<section className="space-y-8">
40-
<ReadContractExtension />
41-
</section>
42-
43-
<div className="h-14" />
44-
45-
<section className="space-y-8">
46-
<WriteContractExtension />
47-
</section>
48-
49-
<div className="h-14" />
50-
51-
<section className="space-y-8">
52-
<WriteContractRaw />
53-
</section>
54-
55-
<div className="h-14" />
56-
57-
<section className="space-y-8">
58-
<WatchEvent />
59-
</section>
60-
</main>
21+
<ThirdwebProvider>
22+
<main className="pb-20 container px-0">
23+
<APIHeader
24+
title="Blockchain API"
25+
description={
26+
<>
27+
Performant, reliable and type safe API to read write to any
28+
contract on any EVM chain through our RPC Edge endpoints.
29+
</>
30+
}
31+
docsLink="https://portal.thirdweb.com/typescript/v5"
32+
heroLink="/blockchain-api.png"
33+
/>
34+
35+
<section className="space-y-8">
36+
<ReadContractRaw />
37+
</section>
38+
39+
<div className="h-14" />
40+
41+
<section className="space-y-8">
42+
<ReadContractExtension />
43+
</section>
44+
45+
<div className="h-14" />
46+
47+
<section className="space-y-8">
48+
<WriteContractExtension />
49+
</section>
50+
51+
<div className="h-14" />
52+
53+
<section className="space-y-8">
54+
<WriteContractRaw />
55+
</section>
56+
57+
<div className="h-14" />
58+
59+
<section className="space-y-8">
60+
<WatchEvent />
61+
</section>
62+
</main>
63+
</ThirdwebProvider>
6164
);
6265
}
6366

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

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { CodeExample } from "@/components/code/code-example";
2+
import ThirdwebProvider from "@/components/thirdweb-provider";
23
import { metadataBase } from "@/lib/constants";
34
import type { Metadata } from "next";
45
import { APIHeader } from "../../../components/blocks/APIHeader";
@@ -14,29 +15,31 @@ export const metadata: Metadata = {
1415

1516
export default function Page() {
1617
return (
17-
<main className="pb-20 container px-0">
18-
<APIHeader
19-
title="Onboard users to web3"
20-
description={
21-
<>
22-
Onboard anyone with flexible auth options, secure account recovery,
23-
and smart account integration.
24-
</>
25-
}
26-
docsLink="https://portal.thirdweb.com/connect/in-app-wallet/overview"
27-
heroLink="/in-app-wallet.png"
28-
/>
18+
<ThirdwebProvider>
19+
<main className="pb-20 container px-0">
20+
<APIHeader
21+
title="Onboard users to web3"
22+
description={
23+
<>
24+
Onboard anyone with flexible auth options, secure account
25+
recovery, and smart account integration.
26+
</>
27+
}
28+
docsLink="https://portal.thirdweb.com/connect/in-app-wallet/overview"
29+
heroLink="/in-app-wallet.png"
30+
/>
2931

30-
<section className="space-y-8">
31-
<AnyAuth />
32-
</section>
32+
<section className="space-y-8">
33+
<AnyAuth />
34+
</section>
3335

34-
<div className="h-14" />
36+
<div className="h-14" />
3537

36-
<section className="space-y-8">
37-
<SponsoredInAppTx />
38-
</section>
39-
</main>
38+
<section className="space-y-8">
39+
<SponsoredInAppTx />
40+
</section>
41+
</main>
42+
</ThirdwebProvider>
4043
);
4144
}
4245

0 commit comments

Comments
 (0)