Skip to content
This repository was archived by the owner on Aug 5, 2024. It is now read-only.

Commit f918c40

Browse files
joaquim-vergesjoaquim-verges
committed
revamp
1 parent cc8f793 commit f918c40

File tree

45 files changed

+792
-238
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+792
-238
lines changed

‎src/app/Header.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -62,12 +62,12 @@ const sdkLinks = [
6262
},
6363
{
6464
name: "React",
65-
href: "/typescript/v5/react",
65+
href: "/react/v5",
6666
icon: "/icons/navbar/nav-icon-react.svg",
6767
},
6868
{
6969
name: "React Native",
70-
href: "/typescript/v5/react-native",
70+
href: "/react-native/v5",
7171
icon: "/icons/navbar/nav-icon-react.svg",
7272
// icon: "/icons/navbar/nav-icon-react-native.svg",
7373
},
@@ -90,7 +90,7 @@ const sdkLinks = [
9090
name: "Unreal",
9191
href: "/unreal",
9292
icon: "/icons/navbar/nav-icon-unreal.svg",
93-
}
93+
},
9494
];
9595

9696
const supportLinks = [

‎src/app/connect/blockchain-api/page.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,14 @@ Perfomant, reliable and type safe API to read write to any contract on any EVM c
1616
<ArticleIconCard
1717
title="React"
1818
icon={ReactIcon}
19-
href="/typescript/v5/react"
19+
href="/react/v5"
2020
description="React components and hooks"
2121
/>
2222

2323
<ArticleIconCard
2424
title="React Native"
2525
icon={ReactIcon}
26-
href="/typescript/v5/react-native"
26+
href="/react-native/v5"
2727
description="React Native components and hooks"
2828
/>
2929

‎src/app/connect/in-app-wallet/how-to/connect-users/page.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export const metadata = createMetadata({
2424

2525
## Using the Connect UI components
2626

27-
If you're building a [React website](/typescript/v5/react/components/ConnectButton), [React Native app](/typescript/v5/react-native), or [Unity game](/unity/ConnectWallet) you can use the prebuilt connect UI components to authenticate users and connect their wallets.
27+
If you're building a [React website](/typescript/react/v5/ConnectButton), [React Native app](/react-native/v5/), or [Unity game](/unity/ConnectWallet) you can use the prebuilt connect UI components to authenticate users and connect their wallets.
2828

2929
<Tabs defaultValue="react">
3030

‎src/app/connect/page.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ Connect is the complete toolkit for connecting every user to your application. I
3636
/>
3737
<ConnectCard
3838
title="Quickstart"
39-
href="https://portal.thirdweb.com/typescript/v5/react/getting-started"
39+
href="https://portal.thirdweb.com/react/v5/getting-started"
4040
iconUrl="/icons/connect/intros/quickstart.svg"
4141
/>
4242
{/* <ConnectCard

‎src/app/connect/pay/buy-with-crypto/get-started/page.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ Learn how to get a quote and send crypto purchase transactions.
3333

3434
## Using the Connect Interface
3535

36-
Buy With Crypto comes by default with our [ConnectButton](/typescript/v5/react/components/ConnectButton) React component.
36+
Buy With Crypto comes by default with our [ConnectButton](/react/v5/ConnectButton) React component.
3737

3838
You can simply add the `ConnectButton` component to your React app. Connect handles everything including connecting the user to various wallets, sending & receiving tokens, and buying with crypto.
3939

‎src/app/connect/sidebar.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -478,11 +478,11 @@ export const sidebar: SideBar = {
478478
},
479479
{
480480
name: "React",
481-
href: "/typescript/v5/react",
481+
href: "/react/v5",
482482
},
483483
{
484484
name: "React Native",
485-
href: "/typescript/v5/react-native",
485+
href: "/react-native/v5",
486486
},
487487
{
488488
name: "Unity",

‎src/app/page.tsx

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -342,13 +342,9 @@ function SDKSection() {
342342
title="TypeScript"
343343
icon={TypeScriptIcon}
344344
/>
345+
<SDKCardIndex href="/react/v5" title="React" icon={ReactIcon} />
345346
<SDKCardIndex
346-
href="/typescript/v5/react"
347-
title="React"
348-
icon={ReactIcon}
349-
/>
350-
<SDKCardIndex
351-
href="/typescript/v5/react-native"
347+
href="/react-native/v5"
352348
title="React Native"
353349
icon={ReactIcon}
354350
/>

‎src/app/react-native/v5/[...slug]/page.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { getTDocPage } from "@/app/references/components/TDoc/PageLayout";
2+
import { fetchTypeScriptDoc } from "@/app/references/components/TDoc/fetchDocs/fetchTypeScriptDoc";
3+
4+
const config = getTDocPage({
5+
sdkTitle: "TypeScript SDK",
6+
getDoc: fetchTypeScriptDoc,
7+
packageSlug: "typescript",
8+
async getVersions() {
9+
return ["v4", "v5"];
10+
},
11+
metadataIcon: "typescript",
12+
});
13+
14+
export default config.default;
15+
export const generateStaticParams = config.generateStaticParams;
16+
export const generateMetadata = config.generateMetadata;
17+
export const dynamic = config.dynamic;

‎src/app/typescript/v5/react-native/differences/page.mdx renamed to ‎src/app/react-native/v5/differences/page.mdx

File renamed without changes.

‎src/app/typescript/v5/react-native/getting-started/page.mdx renamed to ‎src/app/react-native/v5/getting-started/page.mdx

File renamed without changes.

‎src/app/react-native/v5/layout.tsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { DocLayout } from "@/components/Layouts/DocLayout";
2+
import { createMetadata } from "@doc";
3+
import { sidebar } from "./sidebar";
4+
import { VersionSelector } from "../../../components/others/VersionSelector";
5+
6+
export default async function Layout(props: { children: React.ReactNode }) {
7+
return (
8+
<DocLayout
9+
sideBar={sidebar}
10+
editPageButton={true}
11+
sidebarHeader={
12+
<div className="flex items-center gap-1">
13+
<p className="py-5 text-lg font-semibold text-f-100">Connect SDK</p>
14+
<VersionSelector
15+
versions={[
16+
{
17+
name: "v4",
18+
href: "/react-native/v4/",
19+
},
20+
{
21+
name: "v5",
22+
href: "/react-native/v5/",
23+
},
24+
]}
25+
selected={"v5"}
26+
/>
27+
</div>
28+
}
29+
>
30+
<div data-noindex>{props.children}</div>
31+
</DocLayout>
32+
);
33+
}
34+
35+
export const metadata = createMetadata({
36+
title: "thirdweb React Native SDK",
37+
description:
38+
"A type-safe library to interact with any EVM-compatible blockchain in React Native applications",
39+
});

‎src/app/typescript/v5/react-native/page.mdx renamed to ‎src/app/react-native/v5/page.mdx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,14 +26,14 @@ Many of the components and hooks in the React Native SDK use a [`client`](/types
2626
<ArticleIconCard
2727
title="Getting started"
2828
icon={ZapIcon}
29-
href="/typescript/v5/react-native/installation"
29+
href="/react-native/v5/installation"
3030
description="Get started with the React Native SDK"
3131
/>
3232

3333
<ArticleIconCard
3434
title="Differences from React"
3535
icon={ComponentIcon}
36-
href="/typescript/v5/react-native/differences"
36+
href="/react-native/v5/differences"
3737
description="Get to know the differences between React and React Native usage"
3838
/>
3939

@@ -66,7 +66,7 @@ or clone the [expo-starter](https://github.com/thirdweb-dev/expo-starter) repo u
6666
<ArticleIconCard
6767
title="React"
6868
icon={ReactIcon}
69-
href="/typescript/v5/react"
69+
href="/react/v5"
7070
description="Follow the React docs for hooks, providers and components"
7171
/>
7272

‎src/app/react-native/v5/sidebar.tsx

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
import type { SideBar } from "../../../components/Layouts/DocLayout";
2+
import { ReactIcon } from "../../../icons";
3+
import { fetchTypeScriptDoc } from "../../references/components/TDoc/fetchDocs/fetchTypeScriptDoc";
4+
import { getCustomTag } from "../../references/components/TDoc/utils/getSidebarLinkgroups";
5+
6+
const slug = "/react-native/v5";
7+
const docs = await fetchTypeScriptDoc("v5");
8+
9+
export const sidebar: SideBar = {
10+
name: "Connect React Native SDK",
11+
links: [
12+
{
13+
icon: <ReactIcon className="size-4" />,
14+
name: "React Native",
15+
isCollapsible: false,
16+
links: [
17+
{
18+
separator: true,
19+
},
20+
{
21+
name: "Overview",
22+
href: slug,
23+
},
24+
{
25+
name: "Getting Started",
26+
href: `${slug}/getting-started`,
27+
},
28+
{
29+
name: "Differences from React",
30+
href: `${slug}/differences`,
31+
},
32+
{
33+
name: "Core",
34+
isCollapsible: false,
35+
links: [
36+
{
37+
name: "ThirdwebProvider",
38+
href: `${slug}/ThirdwebProvider`,
39+
},
40+
{
41+
name: "Themes",
42+
links:
43+
docs.functions
44+
?.filter((f) => {
45+
const [tag] = getCustomTag(f) || [];
46+
return tag === "@theme";
47+
})
48+
?.map((f) => ({
49+
name: f.name,
50+
href: `${slug}/${f.name}`,
51+
})) || [],
52+
},
53+
],
54+
},
55+
{
56+
name: "Wallets",
57+
isCollapsible: false,
58+
links: [
59+
{
60+
name: "UI Components",
61+
href: `${slug}/connecting-wallets/ui-components`,
62+
links:
63+
docs.components
64+
?.filter((hook) => {
65+
// TODO should tag individual components
66+
return hook.name.toLowerCase().includes("connect");
67+
})
68+
?.map((hook) => ({
69+
name: hook.name,
70+
href: `${slug}/${hook.name}`,
71+
})) || [],
72+
},
73+
{
74+
name: "Connection Hooks",
75+
href: `${slug}/connecting-wallets/hooks`,
76+
links:
77+
docs.hooks
78+
?.filter((hook) => {
79+
const [tag] = getCustomTag(hook) || [];
80+
return tag === "@walletConnection";
81+
})
82+
?.map((hook) => ({
83+
name: hook.name,
84+
href: `${slug}/${hook.name}`,
85+
})) || [],
86+
},
87+
{
88+
name: "Wallet Hooks",
89+
links:
90+
docs.hooks
91+
?.filter((hook) => {
92+
const [tag] = getCustomTag(hook) || [];
93+
return tag === "@wallet";
94+
})
95+
?.map((hook) => ({
96+
name: hook.name,
97+
href: `${slug}/${hook.name}`,
98+
})) || [],
99+
},
100+
],
101+
},
102+
{
103+
name: "Blockchain API",
104+
isCollapsible: false,
105+
links: [
106+
{
107+
name: "UI Components",
108+
links:
109+
docs.components
110+
?.filter((hook) => {
111+
// TODO should tag individual components
112+
return !hook.name.toLowerCase().includes("connect");
113+
})
114+
?.map((hook) => ({
115+
name: hook.name,
116+
href: `${slug}/${hook.name}`,
117+
})) || [],
118+
},
119+
{
120+
name: "Reading State",
121+
href: `${slug}/reading-state`,
122+
links:
123+
docs.hooks
124+
?.filter((hook) => {
125+
const [tag] = getCustomTag(hook) || [];
126+
return tag === "@contract";
127+
})
128+
?.map((hook) => ({
129+
name: hook.name,
130+
href: `${slug}/${hook.name}`,
131+
})) || [],
132+
},
133+
{
134+
name: "Transactions",
135+
href: `${slug}/transactions`,
136+
links:
137+
docs.hooks
138+
?.filter((hook) => {
139+
const [tag] = getCustomTag(hook) || [];
140+
return tag === "@transaction";
141+
})
142+
?.map((hook) => ({
143+
name: hook.name,
144+
href: `${slug}/${hook.name}`,
145+
})) || [],
146+
},
147+
{
148+
name: "Extensions",
149+
href: `${slug}/extensions`,
150+
},
151+
],
152+
},
153+
],
154+
},
155+
{
156+
separator: true,
157+
},
158+
{
159+
name: "Full Reference",
160+
href: "/references/typescript/v5/hooks",
161+
isCollapsible: false,
162+
},
163+
],
164+
};

‎src/app/react/v5/[...slug]/page.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { getTDocPage } from "@/app/references/components/TDoc/PageLayout";
2+
import { fetchTypeScriptDoc } from "@/app/references/components/TDoc/fetchDocs/fetchTypeScriptDoc";
3+
4+
const config = getTDocPage({
5+
sdkTitle: "TypeScript SDK",
6+
getDoc: fetchTypeScriptDoc,
7+
packageSlug: "typescript",
8+
async getVersions() {
9+
return ["v4", "v5"];
10+
},
11+
metadataIcon: "typescript",
12+
});
13+
14+
export default config.default;
15+
export const generateStaticParams = config.generateStaticParams;
16+
export const generateMetadata = config.generateMetadata;
17+
export const dynamic = config.dynamic;

‎src/app/typescript/v5/react/components/AutoConnect/page.mdx renamed to ‎src/app/react/v5/components/AutoConnect/page.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@ Automatically connects the last connected wallet in the case a user reloads the
2727
This component has no UI, simply mount it anywher in your app to trigger the auto connection flow on page load.
2828

2929
<Callout variant='info'>
30-
If you are using [`ConnectButton`](/typescript/v5/react/components/ConnectButton)
31-
or [`ConnectEmbed`](/typescript/v5/react/components/ConnectEmbed) components, You don't need to use this component because it is already included.
30+
If you are using [`ConnectButton`](/react/v5/ConnectButton)
31+
or [`ConnectEmbed`](/react/v5/ConnectEmbed) components, You don't need to use this component because it is already included.
3232

3333
</Callout>
3434

‎src/app/typescript/v5/react/components/ConnectButton/images/connect-wallet-hero.webp renamed to ‎src/app/react/v5/components/ConnectButton/images/connect-wallet-hero.webp

File renamed without changes.

‎src/app/typescript/v5/react/components/ConnectButton/page.mdx renamed to ‎src/app/react/v5/components/ConnectButton/page.mdx

File renamed without changes.

‎src/app/typescript/v5/react/components/ConnectEmbed/_assets/ConnectEmbed-default.png renamed to ‎src/app/react/v5/components/ConnectEmbed/_assets/ConnectEmbed-default.png

File renamed without changes.

‎src/app/typescript/v5/react/components/ConnectEmbed/_assets/ConnectEmbed-signin.png renamed to ‎src/app/react/v5/components/ConnectEmbed/_assets/ConnectEmbed-signin.png

File renamed without changes.

‎src/app/typescript/v5/react/components/ConnectEmbed/page.mdx renamed to ‎src/app/react/v5/components/ConnectEmbed/page.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export const metadata = createMetadata({
2525

2626
# ConnectEmbed
2727

28-
ConnectEmbed component renders a UI to connect to various wallets. It renders the same UI as the [`ConnectButton`](/typescript/v5/react/components/ConnectButton) component's Modal UI.
28+
ConnectEmbed component renders a UI to connect to various wallets. It renders the same UI as the [`ConnectButton`](/react/v5/ConnectButton) component's Modal UI.
2929
This is really useful for Implementing a "Sign in" page by embedding the UI for connecting wallets directly in the page instead of showing inside a modal.
3030

3131
<Callout variant='info' title="Playground">

‎src/app/typescript/v5/react/components/MediaRenderer/page.mdx renamed to ‎src/app/react/v5/components/MediaRenderer/page.mdx

File renamed without changes.

‎src/app/typescript/v5/react/components/TransactionButton/page.mdx renamed to ‎src/app/react/v5/components/TransactionButton/page.mdx

File renamed without changes.

‎src/app/typescript/v5/react/components/TransactionButton/tx-button.png renamed to ‎src/app/react/v5/components/TransactionButton/tx-button.png

File renamed without changes.

0 commit comments

Comments
 (0)