Skip to content

Commit c67d8a9

Browse files
joaquim-vergesjoaquim-verges
committed
feat(playground): add ecosystem and sponsored transaction pages for in-app wallet (#4719)
## Problem solved Short description of the bug fixed or feature added <!-- start pr-codex --> --- ## PR-Codex overview The focus of this PR is to enhance the in-app wallet feature by adding expanded navigation links, ecosystem connection, and sponsored transaction previews. ### Detailed summary - Added expanded navigation links in the in-app wallet section - Implemented ecosystem connection functionality - Included sponsored transaction previews for in-app wallets > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex -->
1 parent dab7b4e commit c67d8a9

File tree

6 files changed

+221
-29
lines changed

6 files changed

+221
-29
lines changed

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

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import { CodeExample } from "@/components/code/code-example";
2+
import ThirdwebProvider from "@/components/thirdweb-provider";
3+
import { metadataBase } from "@/lib/constants";
4+
import type { Metadata } from "next";
5+
import { APIHeader } from "../../../../components/blocks/APIHeader";
6+
import { EcosystemConnectEmbed } from "../../../../components/in-app-wallet/ecosystem";
7+
8+
export const metadata: Metadata = {
9+
metadataBase,
10+
title: "Sign In, Account Abstraction and SIWE Auth | thirdweb Connect",
11+
description:
12+
"Let users sign up with their email, phone number, social media accounts or directly with a wallet. Seamlessly integrate account abstraction and SIWE auth.",
13+
};
14+
15+
export default function Page() {
16+
return (
17+
<ThirdwebProvider>
18+
<main className="pb-20 container px-0">
19+
<APIHeader
20+
title="Onboard users to web3"
21+
description={
22+
<>
23+
Onboard anyone with flexible auth options, secure account
24+
recovery, and smart account integration.
25+
</>
26+
}
27+
docsLink="https://portal.thirdweb.com/connect/in-app-wallet/overview"
28+
heroLink="/in-app-wallet.png"
29+
/>
30+
31+
<section className="space-y-8">
32+
<AnyAuth />
33+
</section>
34+
</main>
35+
</ThirdwebProvider>
36+
);
37+
}
38+
39+
function AnyAuth() {
40+
return (
41+
<>
42+
<div className="space-y-2">
43+
<h2 className="text-2xl sm:text-3xl font-semibold tracking-tight">
44+
Your own Ecosystem
45+
</h2>
46+
<p className="max-w-[600px]">
47+
Build a public or permissioned ecosystem by allowing third party apps
48+
and games to connect to the same accounts.
49+
</p>
50+
</div>
51+
52+
<CodeExample
53+
preview={<EcosystemConnectEmbed />}
54+
code={`import { ecosystemWallet } from "thirdweb/wallets";
55+
import { ConnectEmbed } from "thirdweb/react";
56+
57+
58+
const wallets = [
59+
// all settings are controlled in your dashboard
60+
// including permissions, auth options, etc.
61+
ecosystemWallet("ecosystem.your-ecosystem-name")
62+
];
63+
64+
function App(){
65+
return (
66+
<ConnectEmbed client={client} wallets={wallets} />);
67+
};`}
68+
lang="tsx"
69+
/>
70+
</>
71+
);
72+
}

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

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import { CodeExample } from "@/components/code/code-example";
2+
import ThirdwebProvider from "@/components/thirdweb-provider";
3+
import { metadataBase } from "@/lib/constants";
4+
import type { Metadata } from "next";
5+
import { APIHeader } from "../../../../components/blocks/APIHeader";
6+
import { SponsoredInAppTxPreview } from "../../../../components/in-app-wallet/sponsored-tx";
7+
8+
export const metadata: Metadata = {
9+
metadataBase,
10+
title: "Sign In, Account Abstraction and SIWE Auth | thirdweb Connect",
11+
description:
12+
"Let users sign up with their email, phone number, social media accounts or directly with a wallet. Seamlessly integrate account abstraction and SIWE auth.",
13+
};
14+
15+
export default function Page() {
16+
return (
17+
<ThirdwebProvider>
18+
<main className="pb-20 container px-0">
19+
<APIHeader
20+
title="Onboard users to web3"
21+
description={
22+
<>
23+
Onboard anyone with flexible auth options, secure account
24+
recovery, and smart account integration.
25+
</>
26+
}
27+
docsLink="https://portal.thirdweb.com/connect/in-app-wallet/overview"
28+
heroLink="/in-app-wallet.png"
29+
/>
30+
31+
<section className="space-y-8">
32+
<SponsoredInAppTx />
33+
</section>
34+
35+
<div className="h-14" />
36+
</main>
37+
</ThirdwebProvider>
38+
);
39+
}
40+
41+
function SponsoredInAppTx() {
42+
return (
43+
<>
44+
<div className="space-y-2">
45+
<h2 className="text-2xl sm:text-3xl font-semibold tracking-tight">
46+
Signless Sponsored Transactions
47+
</h2>
48+
<p className="max-w-[600px]">
49+
With in-app wallets, users don&apos;t need to confirm every
50+
transaction.
51+
<br />
52+
Combine it with smart account flag to cover gas costs for the best UX.
53+
</p>
54+
</div>
55+
<CodeExample
56+
preview={<SponsoredInAppTxPreview />}
57+
code={`import { inAppWallet } from "thirdweb/wallets";
58+
import { claimTo } from "thirdweb/extensions/erc1155";
59+
import { ConnectButton, TransactionButton } from "thirdweb/react";
60+
61+
const wallets = [
62+
inAppWallet(
63+
// turn on gas sponsorship for in-app wallets
64+
{ smartAccount: { chain, sponsorGas: true }}
65+
)
66+
];
67+
68+
function App(){
69+
return (<>
70+
<ConnectButton client={client} wallets={wallets} />
71+
72+
{/* signless, sponsored transactions */}
73+
<TransactionButton transaction={() => claimTo({ contract, to: "0x123...", tokenId: 0n, quantity: 1n })}>Mint</TransactionButton>
74+
</>);
75+
};`}
76+
lang="tsx"
77+
/>
78+
</>
79+
);
80+
}

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

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,21 @@ export const navLinks: SidebarLink[] = [
3939
},
4040
{
4141
name: "In-App Wallet",
42-
href: "/connect/in-app-wallet",
42+
expanded: true,
43+
links: [
44+
{
45+
name: "Any auth method",
46+
href: "/connect/in-app-wallet",
47+
},
48+
{
49+
name: "Your own Ecosystem",
50+
href: "/connect/in-app-wallet/ecosystem",
51+
},
52+
{
53+
name: "Sponsor Gas",
54+
href: "/connect/in-app-wallet/sponsor",
55+
},
56+
],
4357
},
4458
{
4559
name: "Social",

‎apps/playground-web/src/components/in-app-wallet/ecosystem.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
"use client";
2+
import type { ConnectButtonProps } from "thirdweb/react";
3+
import { ecosystemWallet } from "thirdweb/wallets";
4+
import { StyledConnectEmbed } from "../styled-connect-embed";
5+
6+
const getEcosystem = () => {
7+
if (process.env.NEXT_PUBLIC_IN_APP_WALLET_URL?.endsWith(".thirdweb.com")) {
8+
// prod ecosystem
9+
return "ecosystem.new-age";
10+
}
11+
// dev ecosystem
12+
return "ecosystem.bonfire-development";
13+
};
14+
15+
export function EcosystemConnectEmbed(
16+
props?: Omit<ConnectButtonProps, "client" | "theme">,
17+
) {
18+
return (
19+
<StyledConnectEmbed
20+
{...props}
21+
wallets={[ecosystemWallet(getEcosystem())]}
22+
/>
23+
);
24+
}

‎apps/playground-web/src/components/in-app-wallet/sponsored-tx.tsx‎

Lines changed: 30 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
"use client";
22

3+
import { baseSepolia } from "thirdweb/chains";
34
import { claimTo, getNFT, getOwnedNFTs } from "thirdweb/extensions/erc1155";
45
import {
56
MediaRenderer,
@@ -8,6 +9,7 @@ import {
89
useReadContract,
910
} from "thirdweb/react";
1011
import { THIRDWEB_CLIENT } from "../../lib/client";
12+
import { StyledConnectButton } from "../styled-connect-button";
1113
import { editionDropContract, editionDropTokenId } from "./constants";
1214

1315
export function SponsoredInAppTxPreview() {
@@ -25,6 +27,14 @@ export function SponsoredInAppTxPreview() {
2527

2628
return (
2729
<div className="flex flex-col">
30+
<div className="flex justify-center">
31+
<StyledConnectButton
32+
accountAbstraction={{
33+
sponsorGas: true,
34+
chain: baseSepolia,
35+
}}
36+
/>
37+
</div>
2838
{isNftLoading ? (
2939
<div className="w-full mt-24">Loading...</div>
3040
) : (
@@ -42,24 +52,26 @@ export function SponsoredInAppTxPreview() {
4252
You own {ownedNfts?.[0]?.quantityOwned.toString() || "0"}{" "}
4353
Kittens
4454
</p>
45-
<TransactionButton
46-
transaction={() =>
47-
claimTo({
48-
contract: editionDropContract,
49-
tokenId: editionDropTokenId,
50-
to: smartAccount.address,
51-
quantity: 1n,
52-
})
53-
}
54-
onError={(error) => {
55-
alert(`Error: ${error.message}`);
56-
}}
57-
onTransactionConfirmed={async () => {
58-
alert("Minted successful!");
59-
}}
60-
>
61-
Mint
62-
</TransactionButton>
55+
<div className="flex justify-center">
56+
<TransactionButton
57+
transaction={() =>
58+
claimTo({
59+
contract: editionDropContract,
60+
tokenId: editionDropTokenId,
61+
to: smartAccount.address,
62+
quantity: 1n,
63+
})
64+
}
65+
onError={(error) => {
66+
alert(`Error: ${error.message}`);
67+
}}
68+
onTransactionConfirmed={async () => {
69+
alert("Minted successful!");
70+
}}
71+
>
72+
Mint
73+
</TransactionButton>
74+
</div>
6375
</>
6476
) : (
6577
<p

‎apps/playground-web/src/lib/constants.ts‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,6 @@ const getDomain = () => {
1414
return undefined;
1515
};
1616

17-
// const getEcosystem = () => {
18-
// if (process.env.NEXT_PUBLIC_IN_APP_WALLET_URL?.endsWith(".thirdweb.com")) {
19-
// // prod ecosystem
20-
// return "ecosystem.new-age";
21-
// }
22-
// // dev ecosystem
23-
// return "ecosystem.bonfire-development";
24-
// };
25-
2617
export const WALLETS = [
2718
createWallet("inApp", {
2819
auth: {
@@ -40,7 +31,6 @@ export const WALLETS = [
4031
passkeyDomain: getDomain(),
4132
},
4233
}),
43-
// ecosystemWallet(getEcosystem()), TODO put this in its own section
4434
createWallet("io.metamask"),
4535
createWallet("com.coinbase.wallet"),
4636
createWallet("io.rabby"),

0 commit comments

Comments
 (0)