Skip to content

Commit 7823d35

Browse files
0xFirekeeper0xFirekeeper
committed
Revamp wallets docs: add monitoring, sponsorship, and API tabs
Added new documentation pages for monitoring transactions and sponsorship policies. Updated the sidebar to include new guides and reorganized navigation. Enhanced existing wallet docs with HTTP API tabs, OpenAPI endpoints, and improved instructions for exporting private keys and linking profiles. Removed the APIs dropdown from the header and updated the main page to highlight HTTP API resources.
1 parent 25c9278 commit 7823d35

File tree

8 files changed

+505
-239
lines changed

8 files changed

+505
-239
lines changed

‎apps/portal/src/app/Header.tsx‎

Lines changed: 0 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -95,17 +95,6 @@ export const connectLinks: Array<{
9595
},
9696
] as const;
9797

98-
const apisLinks = [
99-
{
100-
href: "https://api.thirdweb.com/reference",
101-
name: "HTTP API",
102-
},
103-
{
104-
href: "/bundler",
105-
name: "Bundler",
106-
},
107-
];
108-
10998
const sdkLinks = [
11099
{
111100
href: "/references/typescript/v5",
@@ -251,11 +240,6 @@ export function Header() {
251240
links={sdkLinks}
252241
onLinkClick={() => setShowBurgerMenu(false)}
253242
/>
254-
<DropdownLinks
255-
category="APIs"
256-
links={apisLinks}
257-
onLinkClick={() => setShowBurgerMenu(false)}
258-
/>
259243
<DropdownLinks
260244
category="Support"
261245
links={supportLinks}
@@ -303,18 +287,6 @@ export function Header() {
303287
))}
304288
</div>
305289

306-
<div className="flex flex-col gap-4">
307-
<h3 className="font-semibold text-lg">APIs</h3>
308-
{apisLinks.map((link) => (
309-
<NavLink
310-
href={link.href}
311-
key={link.name}
312-
name={link.name}
313-
onClick={() => setShowBurgerMenu(false)}
314-
/>
315-
))}
316-
</div>
317-
318290
<div className="flex flex-col gap-4">
319291
<h3 className="font-semibold text-lg">Support</h3>
320292
{supportLinks.map((link) => (

‎apps/portal/src/app/page.tsx‎

Lines changed: 38 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,4 @@
1-
import {
2-
ArrowUpRightIcon,
3-
BrainIcon,
4-
CoinsIcon,
5-
WebhookIcon,
6-
ZapIcon,
7-
} from "lucide-react";
1+
import { ArrowUpRightIcon, BrainIcon, CoinsIcon, ZapIcon } from "lucide-react";
82
import Image from "next/image";
93
import Link from "next/link";
104
import { Heading } from "@/components/Document";
@@ -19,13 +13,15 @@ import {
1913
UnrealEngineIcon,
2014
} from "../icons";
2115
import { ConnectIcon } from "../icons/products/ConnectIcon";
22-
import { EngineIcon } from "../icons/products/EngineIcon";
2316
import DocsHeroDark from "./_images/docs-hero-dark.png";
2417
import DocsHeroLight from "./_images/docs-hero-light.png";
2518

2619
export default function Page() {
2720
return (
28-
<main className="container max-w-5xl grow pb-20" data-noindex>
21+
<main
22+
className="container max-w-5xl grow pb-[4.75rem] scale-y-[0.95] origin-top"
23+
data-noindex
24+
>
2925
<Hero />
3026
<div className="space-y-8">
3127
<LearningResourcesSection />
@@ -74,49 +70,33 @@ function Hero() {
7470

7571
function ReferenceSection() {
7672
return (
77-
<>
78-
<section>
79-
<SectionTitle anchorId="client" title="Client libraries" />
80-
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
81-
<SDKCard
82-
href="/references/typescript/v5"
83-
icon={TypeScriptIcon}
84-
title="TypeScript"
85-
/>
86-
<SDKCard
87-
href="/references/typescript/v5"
88-
icon={ReactIcon}
89-
title="React"
90-
/>
91-
<SDKCard
92-
href="/references/typescript/v5"
93-
icon={ReactIcon}
94-
title="React Native"
95-
/>
96-
<SDKCard href="/dotnet" icon={DotNetIcon} title="DotNet" />
97-
<SDKCard href="/unity" icon={UnityIcon} title="Unity" />
98-
<SDKCard
99-
href="/unreal-engine"
100-
icon={UnrealEngineIcon}
101-
title="Unreal Engine"
102-
/>
103-
</div>
104-
</section>
105-
106-
<section>
107-
<SectionTitle anchorId="backend" title="Backend APIs" />
108-
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
109-
<SDKCard href="/reference" icon={ConnectIcon} title="HTTP API" />
110-
<SDKCard
111-
href="https://engine.thirdweb.com/reference"
112-
icon={EngineIcon}
113-
title="Engine"
114-
/>
115-
<SDKCard href="/bundler" icon={ConnectIcon} title="Bundler" />
116-
<SDKCard href="/webhooks" icon={WebhookIcon} title="Webhooks" />
117-
</div>
118-
</section>
119-
</>
73+
<section>
74+
<SectionTitle anchorId="client" title="Client libraries" />
75+
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
76+
<SDKCard
77+
href="/references/typescript/v5"
78+
icon={TypeScriptIcon}
79+
title="TypeScript"
80+
/>
81+
<SDKCard
82+
href="/references/typescript/v5"
83+
icon={ReactIcon}
84+
title="React"
85+
/>
86+
<SDKCard
87+
href="/references/typescript/v5"
88+
icon={ReactIcon}
89+
title="React Native"
90+
/>
91+
<SDKCard href="/dotnet" icon={DotNetIcon} title="DotNet" />
92+
<SDKCard href="/unity" icon={UnityIcon} title="Unity" />
93+
<SDKCard
94+
href="/unreal-engine"
95+
icon={UnrealEngineIcon}
96+
title="Unreal Engine"
97+
/>
98+
</div>
99+
</section>
120100
);
121101
}
122102

@@ -155,6 +135,12 @@ function LearningResourcesSection() {
155135
icon={BrainIcon}
156136
title="AI"
157137
/>
138+
<ArticleCardIndex
139+
description="Build products with our HTTP API"
140+
href="/reference"
141+
icon={ConnectIcon}
142+
title="HTTP API"
143+
/>
158144
</div>
159145
</section>
160146
);

‎apps/portal/src/app/wallets/faq/page.mdx‎

Lines changed: 46 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
import { createMetadata, Details } from "@doc";
1+
import { createMetadata, Details, DocImage, Callout, Step, Steps } from "@doc";
2+
import ManageWallet from '../export-private-key/manage-wallet.png'
3+
import ExportKey from '../export-private-key/export-key.png'
4+
import ConfirmReveal from '../export-private-key/confirm-reveal.png'
5+
import ExportedKey from '../export-private-key/exported-key.png'
26

37
export const metadata = createMetadata({
48
title: "Wallets FAQs | thirdweb documentation",
@@ -64,3 +68,44 @@ Yes, you can change your Ecosystem Wallet name and icon. However, you cannot cha
6468
<Details summary="What happens if thirdweb or my database gets breached?">
6569
Using enclave, your customers' assets are safe even if thirdweb or you are compromised. This is because the attacker will only be able to access the encrypted keys, and that is not enough to reconstruct the private key.
6670
</Details>
71+
72+
<Details summary="How do I export my private key?">
73+
Learn how to export the private key for a thirdweb wallet using the Connect modal.
74+
75+
<Callout variant="info" title="Programmatic Exports">
76+
It's not possible to export a user's private key programmatically. Our system is designed to be non-custodial and only users can access their full keys.
77+
</Callout>
78+
79+
<Steps>
80+
<Step title="Login">
81+
Login to your wallet on the application.
82+
</Step>
83+
84+
<Step title="Manage">
85+
Select "Manage Wallet".
86+
<DocImage src={ManageWallet} />
87+
</Step>
88+
89+
<Step title="Export">
90+
Choose "Export Private Key" and confirm the action to reveal the private key.
91+
<DocImage src={ExportKey} />
92+
</Step>
93+
94+
<Step title="Confirm">
95+
Confirm you want to reveal your private key.
96+
<Callout variant="warning" title="Secure Private Keys">
97+
Revealing private keys can compromise your assets and security. Keep them safe and confidential at all times.
98+
</Callout>
99+
<DocImage src={ConfirmReveal} />
100+
</Step>
101+
102+
<Step title="Reveal">
103+
Copy the exported private key directly from the modal.
104+
<DocImage src={ExportedKey} />
105+
</Step>
106+
</Steps>
107+
108+
<Callout variant="info" title="Advanced Configuration">
109+
As an advanced option, to hide the export private key option from the modal, set the `hidePrivateKeyOption` to `true` when initializing the typescript or react SDK.
110+
</Callout>
111+
</Details>

‎apps/portal/src/app/wallets/link-profiles/page.mdx‎

Lines changed: 35 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import { createMetadata, ArticleIconCard, Callout, Tabs, TabsList, TabsTrigger, TabsContent } from "@doc";
1+
import { createMetadata, ArticleIconCard, Callout, Tabs, TabsList, TabsTrigger, TabsContent, OpenApiEndpoint } from "@doc";
22
import {
33
ReactIcon,
44
TypeScriptIcon,
55
UnityIcon,
66
DotNetIcon,
77
ExternalLinkIcon,
8-
UnrealEngineIcon
8+
UnrealEngineIcon,
9+
EngineIcon
910
} from "@/icons"
1011

1112
export const metadata = createMetadata({
@@ -22,8 +23,12 @@ export const metadata = createMetadata({
2223

2324
thirdweb Wallets allow users to tie the same wallet address to multiple social identities. Developers can programmatically link additional identities at any point in their user journey.
2425

25-
<Tabs defaultValue="typescript">
26+
<Tabs defaultValue="http">
2627
<TabsList>
28+
<TabsTrigger value="http" className="flex items-center gap-2 [&>p]:mb-0">
29+
<EngineIcon className="w-4 h-4" />
30+
HTTP
31+
</TabsTrigger>
2732
<TabsTrigger value="typescript" className="flex items-center gap-2 [&>p]:mb-0">
2833
<TypeScriptIcon className="w-4 h-4" />
2934
TypeScript
@@ -46,6 +51,22 @@ thirdweb Wallets allow users to tie the same wallet address to multiple social i
4651
</TabsTrigger>
4752
</TabsList>
4853

54+
<TabsContent value="http">
55+
56+
### Link Profile
57+
58+
Link an additional authentication method to an existing wallet.
59+
60+
<OpenApiEndpoint path="/v1/auth/link" method="POST" />
61+
62+
### Unlink Profile
63+
64+
Remove a linked authentication method from a wallet.
65+
66+
<OpenApiEndpoint path="/v1/auth/unlink" method="POST" />
67+
68+
</TabsContent>
69+
4970
<TabsContent value="typescript">
5071
**OAuth Authentication (Discord, Google, Apple, etc.)**
5172

@@ -210,8 +231,12 @@ var linkedAccounts = await ThirdwebManager.Instance.LinkAccount(mainInAppWallet,
210231

211232
Once linked, you can retrieve the user profiles via either identity.
212233

213-
<Tabs defaultValue="typescript">
234+
<Tabs defaultValue="http">
214235
<TabsList>
236+
<TabsTrigger value="http" className="flex items-center gap-2 [&>p]:mb-0">
237+
<EngineIcon className="w-4 h-4 mr-2" />
238+
HTTP
239+
</TabsTrigger>
215240
<TabsTrigger value="typescript" className="flex items-center gap-2 [&>p]:mb-0">
216241
<TypeScriptIcon className="w-4 h-4 mr-2" />
217242
TypeScript
@@ -226,6 +251,12 @@ Once linked, you can retrieve the user profiles via either identity.
226251
</TabsTrigger>
227252
</TabsList>
228253

254+
<TabsContent value="http">
255+
256+
Retrieve linked profiles using the [Fetch Users API](/wallets/get-users#http-api).
257+
258+
</TabsContent>
259+
229260
<TabsContent value="typescript">
230261
```typescript
231262
import { getProfiles } from "thirdweb/wallets";

‎apps/portal/src/app/wallets/monitor/page.mdx‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import {
2+
Grid,
3+
Callout,
4+
OpenSourceCard,
5+
ArticleIconCard,
6+
createMetadata,
7+
Steps,
8+
Step,
9+
OpenApiEndpoint,
10+
} from "@doc";
11+
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
12+
import { WalletsSmartIcon } from "@/icons";
13+
import { TypeScriptIcon, DotNetIcon, EngineIcon } from "@/icons";
14+
15+
export const metadata = createMetadata({
16+
image: {
17+
title: "Monitor transactions",
18+
icon: "wallets",
19+
},
20+
title: "Monitor Transactions | thirdweb Documentation",
21+
description: "Monitor and get notified about transactions in your application.",
22+
});
23+
24+
# Monitor Transactions
25+
26+
Monitor and get notified about transactions in your application, both on your project dashboard and programmatically.
27+
28+
<Tabs defaultValue="http">
29+
<TabsList>
30+
<TabsTrigger value="http" className="flex items-center gap-2 [&>p]:mb-0">
31+
<EngineIcon className="w-4 h-4" />
32+
HTTP
33+
</TabsTrigger>
34+
<TabsTrigger value="typescript" className="flex items-center gap-2 [&>p]:mb-0">
35+
<TypeScriptIcon className="size-4" />
36+
TypeScript / React
37+
</TabsTrigger>
38+
</TabsList>
39+
40+
<TabsContent value="http">
41+
42+
### Get transaction status
43+
44+
Get the information about a transaction by its id.
45+
46+
<OpenApiEndpoint path="/v1/transactions/{transactionId}" method="GET" />
47+
48+
### List transactions
49+
50+
List all transactions for your project with filtering and pagination.
51+
52+
<OpenApiEndpoint path="/v1/transactions" method="GET" />
53+
54+
</TabsContent>
55+
56+
<TabsContent value="typescript">
57+
58+
You can track the status of transactions sent via the [transactions API](https://engine.thirdweb.com/reference) using its transaction id.
59+
60+
```typescript
61+
import { Engine } from "thirdweb";
62+
63+
const executionResult = await Engine.getTransactionStatus({
64+
client,
65+
transactionId, // the transaction id returned from enqueueTransaction
66+
});
67+
```
68+
69+
You can also poll for the transaction hash with this convenience function:
70+
71+
```typescript
72+
import { Engine } from "thirdweb";
73+
74+
const { transactionHash } = await Engine.waitForTransactionHash({
75+
client,
76+
transactionId, // the transaction id returned from enqueueTransaction
77+
});
78+
```
79+
80+
</TabsContent>
81+
82+
</Tabs>

0 commit comments

Comments
 (0)