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

Commit

Permalink
revamp
Browse files Browse the repository at this point in the history
  • Loading branch information
joaquim-verges committed Jul 28, 2024
1 parent cc8f793 commit f918c40
Show file tree
Hide file tree
Showing 45 changed files with 792 additions and 238 deletions.
6 changes: 3 additions & 3 deletions src/app/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -62,12 +62,12 @@ const sdkLinks = [
},
{
name: "React",
href: "/typescript/v5/react",
href: "/react/v5",
icon: "/icons/navbar/nav-icon-react.svg",
},
{
name: "React Native",
href: "/typescript/v5/react-native",
href: "/react-native/v5",
icon: "/icons/navbar/nav-icon-react.svg",
// icon: "/icons/navbar/nav-icon-react-native.svg",
},
Expand All @@ -90,7 +90,7 @@ const sdkLinks = [
name: "Unreal",
href: "/unreal",
icon: "/icons/navbar/nav-icon-unreal.svg",
}
},
];

const supportLinks = [
Expand Down
4 changes: 2 additions & 2 deletions src/app/connect/blockchain-api/page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,14 @@ Perfomant, reliable and type safe API to read write to any contract on any EVM c
<ArticleIconCard
title="React"
icon={ReactIcon}
href="/typescript/v5/react"
href="/react/v5"
description="React components and hooks"
/>

<ArticleIconCard
title="React Native"
icon={ReactIcon}
href="/typescript/v5/react-native"
href="/react-native/v5"
description="React Native components and hooks"
/>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export const metadata = createMetadata({

## Using the Connect UI components

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.
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.

<Tabs defaultValue="react">

Expand Down
2 changes: 1 addition & 1 deletion src/app/connect/page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ Connect is the complete toolkit for connecting every user to your application. I
/>
<ConnectCard
title="Quickstart"
href="https://portal.thirdweb.com/typescript/v5/react/getting-started"
href="https://portal.thirdweb.com/react/v5/getting-started"
iconUrl="/icons/connect/intros/quickstart.svg"
/>
{/* <ConnectCard
Expand Down
2 changes: 1 addition & 1 deletion src/app/connect/pay/buy-with-crypto/get-started/page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ Learn how to get a quote and send crypto purchase transactions.

## Using the Connect Interface

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

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.

Expand Down
4 changes: 2 additions & 2 deletions src/app/connect/sidebar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -478,11 +478,11 @@ export const sidebar: SideBar = {
},
{
name: "React",
href: "/typescript/v5/react",
href: "/react/v5",
},
{
name: "React Native",
href: "/typescript/v5/react-native",
href: "/react-native/v5",
},
{
name: "Unity",
Expand Down
8 changes: 2 additions & 6 deletions src/app/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -342,13 +342,9 @@ function SDKSection() {
title="TypeScript"
icon={TypeScriptIcon}
/>
<SDKCardIndex href="/react/v5" title="React" icon={ReactIcon} />
<SDKCardIndex
href="/typescript/v5/react"
title="React"
icon={ReactIcon}
/>
<SDKCardIndex
href="/typescript/v5/react-native"
href="/react-native/v5"
title="React Native"
icon={ReactIcon}
/>
Expand Down
17 changes: 17 additions & 0 deletions src/app/react-native/v5/[...slug]/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { getTDocPage } from "@/app/references/components/TDoc/PageLayout";
import { fetchTypeScriptDoc } from "@/app/references/components/TDoc/fetchDocs/fetchTypeScriptDoc";

const config = getTDocPage({
sdkTitle: "TypeScript SDK",
getDoc: fetchTypeScriptDoc,
packageSlug: "typescript",
async getVersions() {
return ["v4", "v5"];
},
metadataIcon: "typescript",
});

export default config.default;
export const generateStaticParams = config.generateStaticParams;
export const generateMetadata = config.generateMetadata;
export const dynamic = config.dynamic;
39 changes: 39 additions & 0 deletions src/app/react-native/v5/layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import { DocLayout } from "@/components/Layouts/DocLayout";
import { createMetadata } from "@doc";
import { sidebar } from "./sidebar";
import { VersionSelector } from "../../../components/others/VersionSelector";

export default async function Layout(props: { children: React.ReactNode }) {
return (
<DocLayout
sideBar={sidebar}
editPageButton={true}
sidebarHeader={
<div className="flex items-center gap-1">
<p className="py-5 text-lg font-semibold text-f-100">Connect SDK</p>
<VersionSelector
versions={[
{
name: "v4",
href: "/react-native/v4/",
},
{
name: "v5",
href: "/react-native/v5/",
},
]}
selected={"v5"}
/>
</div>
}
>
<div data-noindex>{props.children}</div>
</DocLayout>
);
}

export const metadata = createMetadata({
title: "thirdweb React Native SDK",
description:
"A type-safe library to interact with any EVM-compatible blockchain in React Native applications",
});
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,14 @@ Many of the components and hooks in the React Native SDK use a [`client`](/types
<ArticleIconCard
title="Getting started"
icon={ZapIcon}
href="/typescript/v5/react-native/installation"
href="/react-native/v5/installation"
description="Get started with the React Native SDK"
/>

<ArticleIconCard
title="Differences from React"
icon={ComponentIcon}
href="/typescript/v5/react-native/differences"
href="/react-native/v5/differences"
description="Get to know the differences between React and React Native usage"
/>

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

Expand Down
164 changes: 164 additions & 0 deletions src/app/react-native/v5/sidebar.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@
import type { SideBar } from "../../../components/Layouts/DocLayout";
import { ReactIcon } from "../../../icons";
import { fetchTypeScriptDoc } from "../../references/components/TDoc/fetchDocs/fetchTypeScriptDoc";
import { getCustomTag } from "../../references/components/TDoc/utils/getSidebarLinkgroups";

const slug = "/react-native/v5";
const docs = await fetchTypeScriptDoc("v5");

export const sidebar: SideBar = {
name: "Connect React Native SDK",
links: [
{
icon: <ReactIcon className="size-4" />,
name: "React Native",
isCollapsible: false,
links: [
{
separator: true,
},
{
name: "Overview",
href: slug,
},
{
name: "Getting Started",
href: `${slug}/getting-started`,
},
{
name: "Differences from React",
href: `${slug}/differences`,
},
{
name: "Core",
isCollapsible: false,
links: [
{
name: "ThirdwebProvider",
href: `${slug}/ThirdwebProvider`,
},
{
name: "Themes",
links:
docs.functions
?.filter((f) => {
const [tag] = getCustomTag(f) || [];
return tag === "@theme";
})
?.map((f) => ({
name: f.name,
href: `${slug}/${f.name}`,
})) || [],
},
],
},
{
name: "Wallets",
isCollapsible: false,
links: [
{
name: "UI Components",
href: `${slug}/connecting-wallets/ui-components`,
links:
docs.components
?.filter((hook) => {
// TODO should tag individual components
return hook.name.toLowerCase().includes("connect");
})
?.map((hook) => ({
name: hook.name,
href: `${slug}/${hook.name}`,
})) || [],
},
{
name: "Connection Hooks",
href: `${slug}/connecting-wallets/hooks`,
links:
docs.hooks
?.filter((hook) => {
const [tag] = getCustomTag(hook) || [];
return tag === "@walletConnection";
})
?.map((hook) => ({
name: hook.name,
href: `${slug}/${hook.name}`,
})) || [],
},
{
name: "Wallet Hooks",
links:
docs.hooks
?.filter((hook) => {
const [tag] = getCustomTag(hook) || [];
return tag === "@wallet";
})
?.map((hook) => ({
name: hook.name,
href: `${slug}/${hook.name}`,
})) || [],
},
],
},
{
name: "Blockchain API",
isCollapsible: false,
links: [
{
name: "UI Components",
links:
docs.components
?.filter((hook) => {
// TODO should tag individual components
return !hook.name.toLowerCase().includes("connect");
})
?.map((hook) => ({
name: hook.name,
href: `${slug}/${hook.name}`,
})) || [],
},
{
name: "Reading State",
href: `${slug}/reading-state`,
links:
docs.hooks
?.filter((hook) => {
const [tag] = getCustomTag(hook) || [];
return tag === "@contract";
})
?.map((hook) => ({
name: hook.name,
href: `${slug}/${hook.name}`,
})) || [],
},
{
name: "Transactions",
href: `${slug}/transactions`,
links:
docs.hooks
?.filter((hook) => {
const [tag] = getCustomTag(hook) || [];
return tag === "@transaction";
})
?.map((hook) => ({
name: hook.name,
href: `${slug}/${hook.name}`,
})) || [],
},
{
name: "Extensions",
href: `${slug}/extensions`,
},
],
},
],
},
{
separator: true,
},
{
name: "Full Reference",
href: "/references/typescript/v5/hooks",
isCollapsible: false,
},
],
};
17 changes: 17 additions & 0 deletions src/app/react/v5/[...slug]/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { getTDocPage } from "@/app/references/components/TDoc/PageLayout";
import { fetchTypeScriptDoc } from "@/app/references/components/TDoc/fetchDocs/fetchTypeScriptDoc";

const config = getTDocPage({
sdkTitle: "TypeScript SDK",
getDoc: fetchTypeScriptDoc,
packageSlug: "typescript",
async getVersions() {
return ["v4", "v5"];
},
metadataIcon: "typescript",
});

export default config.default;
export const generateStaticParams = config.generateStaticParams;
export const generateMetadata = config.generateMetadata;
export const dynamic = config.dynamic;
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@ Automatically connects the last connected wallet in the case a user reloads the
This component has no UI, simply mount it anywher in your app to trigger the auto connection flow on page load.

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

</Callout>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export const metadata = createMetadata({

# ConnectEmbed

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.
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.
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.

<Callout variant='info' title="Playground">
Expand Down
Loading

0 comments on commit f918c40

Please sign in to comment.