[Documentation] Refactor: Update tsdoc references (#5374)
## Problem solved
Short description of the bug fixed or feature added
<!-- start pr-codex -->
---
## PR-Codex overview
This PR primarily focuses on refactoring the `NFT` component and its related functionalities to improve performance, enhance control over fetching logic, and simplify usage by removing the need for `React.Suspense`. It also introduces new props for better loading and error handling.
### Detailed summary
- Deleted several test files and an unused `NFT.tsx` file.
- Introduced `NFTProvider`, `NFTMedia`, `NFTName`, and `NFTDescription` components.
- Added `loadingComponent` and `fallbackComponent` props for better handling of loading states and errors.
- Updated references in tests to use new component structure.
- Renamed and adjusted documentation comments to reflect new functionality.
- Improved sidebar organization by updating links and names for consistency.
- Enhanced utility functions and hooks for better NFT data fetching and context management.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
This commit is contained in:
joaquim-verges
@@ -239,7 +239,7 @@ export const sidebar: SideBar = {
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Misc",
|
||||
name: "Miscellaneous",
|
||||
links: [
|
||||
{
|
||||
name: "TransferableERC20",
|
||||
@@ -283,7 +283,7 @@ export const sidebar: SideBar = {
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Misc",
|
||||
name: "Miscellaneous",
|
||||
links: [
|
||||
{
|
||||
name: "RoyaltyERC721",
|
||||
@@ -327,7 +327,7 @@ export const sidebar: SideBar = {
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Misc",
|
||||
name: "Miscellaneous",
|
||||
links: [
|
||||
{
|
||||
name: "RoyaltyERC1155",
|
||||
|
||||
@@ -9,7 +9,7 @@ We recommend starting a new thirdweb React Native project using our CLI, which s
|
||||
In your CLI, run:
|
||||
|
||||
```bash
|
||||
npx thirdweb create --legacy-peer-deps --react-native
|
||||
npx thirdweb create app --react-native
|
||||
```
|
||||
|
||||
or clone the [expo-starter](https://github.com/thirdweb-dev/expo-starter) repo using git.
|
||||
|
||||
@@ -60,7 +60,7 @@ Many of the components and hooks in the React Native SDK use a [`client`](/types
|
||||
If you want to get started quickly run:
|
||||
|
||||
```bash
|
||||
npx thirdweb create --legacy-peer-deps --react-native
|
||||
npx thirdweb create app --react-native
|
||||
```
|
||||
|
||||
or clone the [expo-starter](https://github.com/thirdweb-dev/expo-starter) repo using git.
|
||||
|
||||
@@ -9,7 +9,7 @@ You can get started by creating a new project or adding thirdweb to an existing
|
||||
You can quickly create a new project with the thirdweb CLI
|
||||
|
||||
```bash
|
||||
npx thirdweb create app --legacy-peer-deps
|
||||
npx thirdweb create app
|
||||
```
|
||||
|
||||
or clone the the Next.js or Vite starter repo:
|
||||
|
||||
@@ -52,7 +52,7 @@ Follow this [guide](/react/v5/getting-started) to get started with the React SDK
|
||||
You can quickly create a new project with the thirdweb CLI
|
||||
|
||||
```bash
|
||||
npx thirdweb create app --legacy-peer-deps
|
||||
npx thirdweb create app
|
||||
```
|
||||
|
||||
or clone the the Next.js or Vite starter repo:
|
||||
|
||||
@@ -320,13 +320,29 @@ export const sidebar: SideBar = {
|
||||
links: [
|
||||
{
|
||||
name: "UI Components",
|
||||
links: ["ClaimButton", "TransactionButton", "MediaRenderer"].map(
|
||||
(name) => ({
|
||||
name,
|
||||
href: `${slug}/${name}`,
|
||||
icon: <CodeIcon />,
|
||||
}),
|
||||
),
|
||||
links: [
|
||||
...["ClaimButton", "TransactionButton", "MediaRenderer"].map(
|
||||
(name) => ({
|
||||
name,
|
||||
href: `${slug}/${name}`,
|
||||
icon: <CodeIcon />,
|
||||
}),
|
||||
),
|
||||
{
|
||||
name: "NFT",
|
||||
isCollapsible: true,
|
||||
links: [
|
||||
"NFTProvider",
|
||||
"NFTMedia",
|
||||
"NFTName",
|
||||
"NFTDescription",
|
||||
].map((name) => ({
|
||||
name,
|
||||
href: `${slug}/${name}`,
|
||||
icon: <CodeIcon />,
|
||||
})),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Reading State",
|
||||
|
||||
@@ -26,7 +26,7 @@ const tagsToGroup = {
|
||||
"@connectWallet": "Connect Wallet",
|
||||
"@appURI": "App URI",
|
||||
"@storage": "Storage",
|
||||
"@others": "Others",
|
||||
"@others": "Miscellaneous",
|
||||
"@wallet": "Wallets",
|
||||
"@walletConfig": "WalletConfig",
|
||||
"@theme": "Theme",
|
||||
@@ -40,20 +40,25 @@ const tagsToGroup = {
|
||||
"@chain": "Chain",
|
||||
"@social": "Social API",
|
||||
"@modules": "Modules",
|
||||
"@client": "Client",
|
||||
} as const;
|
||||
|
||||
type TagKey = keyof typeof tagsToGroup;
|
||||
|
||||
const sidebarGroupOrder: TagKey[] = [
|
||||
"@client",
|
||||
"@wallet",
|
||||
"@abstractWallet",
|
||||
"@locale",
|
||||
"@chain",
|
||||
"@contract",
|
||||
"@networkConnection",
|
||||
"@walletConfig",
|
||||
"@walletConnection",
|
||||
"@walletUtils",
|
||||
"@chain",
|
||||
"@contract",
|
||||
"@transaction",
|
||||
"@social",
|
||||
"@auth",
|
||||
"@nft",
|
||||
"@buyCrypto",
|
||||
"@nftDrop",
|
||||
@@ -64,18 +69,15 @@ const sidebarGroupOrder: TagKey[] = [
|
||||
"@metadata",
|
||||
"@permissionControl",
|
||||
"@platformFees",
|
||||
"@auth",
|
||||
"@storage",
|
||||
"@smartWallet",
|
||||
"@connectWallet",
|
||||
"@appURI",
|
||||
"@extension",
|
||||
"@transaction",
|
||||
"@rpc",
|
||||
"@utils",
|
||||
"@social",
|
||||
"@modules",
|
||||
"@theme",
|
||||
"@utils",
|
||||
"@others",
|
||||
];
|
||||
|
||||
@@ -191,6 +193,7 @@ export function getSidebarLinkGroups(doc: TransformedDoc, path: string) {
|
||||
name: name,
|
||||
href: getLink(`${path}/${key}`),
|
||||
links: [{ name: "Extensions", links: extensionLinkGroups }],
|
||||
isCollapsible: false,
|
||||
});
|
||||
} else {
|
||||
linkGroups
|
||||
@@ -245,7 +248,12 @@ export function getSidebarLinkGroups(doc: TransformedDoc, path: string) {
|
||||
|
||||
// sort into groups
|
||||
for (const d of nonExtensions) {
|
||||
const [tag] = getCustomTag(d) || [];
|
||||
let [tag] = getCustomTag(d) || [];
|
||||
// for ungrouped functions - put it in utils
|
||||
// useful for re-exports that we can't tag
|
||||
if (!tag) {
|
||||
tag = "@others";
|
||||
}
|
||||
|
||||
if (tag) {
|
||||
if (!groups[tag]) {
|
||||
@@ -257,16 +265,6 @@ export function getSidebarLinkGroups(doc: TransformedDoc, path: string) {
|
||||
}
|
||||
}
|
||||
|
||||
// If a group only has one item, do not create a group for it and add it to noGroups
|
||||
for (const _tag in groups) {
|
||||
const tag = _tag as TagKey;
|
||||
const links = groups[tag];
|
||||
if (links && links.length === 1 && links[0]) {
|
||||
ungroupedLinks.push(links[0]);
|
||||
delete groups[tag];
|
||||
}
|
||||
}
|
||||
|
||||
// throw error if we don't know where to put the group in sidebar ( because this leads to it not being added in sidebar at all )
|
||||
for (const tag of Object.keys(groups)) {
|
||||
if (!sidebarGroupOrder.includes(tag as TagKey)) {
|
||||
@@ -314,6 +312,7 @@ export function getSidebarLinkGroups(doc: TransformedDoc, path: string) {
|
||||
name: name,
|
||||
links: links,
|
||||
href: getLink(`${path}/${key}`),
|
||||
isCollapsible: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -326,26 +325,10 @@ export function getSidebarLinkGroups(doc: TransformedDoc, path: string) {
|
||||
createSubGroups("hooks", doc.hooks);
|
||||
}
|
||||
|
||||
if (doc.classes) {
|
||||
createSubGroups("classes", doc.classes);
|
||||
}
|
||||
|
||||
if (doc.functions) {
|
||||
createSubGroups("functions", doc.functions);
|
||||
}
|
||||
|
||||
if (doc.variables) {
|
||||
createSubGroups("variables", doc.variables);
|
||||
}
|
||||
|
||||
if (doc.types) {
|
||||
createSubGroups("types", doc.types);
|
||||
}
|
||||
|
||||
if (doc.enums) {
|
||||
createSubGroups("enums", doc.enums);
|
||||
}
|
||||
|
||||
return linkGroups;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
export const subgroups = {
|
||||
components: "Components",
|
||||
hooks: "Hooks",
|
||||
components: "UI Components",
|
||||
hooks: "React Hooks",
|
||||
classes: "Classes",
|
||||
functions: "Functions",
|
||||
functions: "Core Functions",
|
||||
variables: "Variables",
|
||||
types: "Types",
|
||||
enums: "Enums",
|
||||
|
||||
@@ -5,7 +5,7 @@ import { createMetadata } from "@doc";
|
||||
export default getTDocLayout({
|
||||
getDoc: fetchTypeScriptDoc,
|
||||
packageSlug: "typescript",
|
||||
sdkTitle: "TypeScript SDK",
|
||||
sdkTitle: "Connect SDK",
|
||||
});
|
||||
|
||||
export const metadata = createMetadata({
|
||||
|
||||
@@ -46,7 +46,7 @@ This section allows you to define the default preferences for the SDK:
|
||||
- `Show Debug Logs`: Whether to show thirdweb SDK debug logs.
|
||||
- `Opt Out Usage Analytics`: Whether to opt out of Connect usage analytics, such as the number of wallets connected to your game.
|
||||
|
||||
### Misc
|
||||
### Miscellaneous
|
||||
|
||||
<DocImage src={thirdwebmanager_misc} />
|
||||
|
||||
|
||||
@@ -151,7 +151,7 @@ function DocSidebarNonCollapsible(props: {
|
||||
{href ? (
|
||||
<Link
|
||||
className={cn(
|
||||
"block font-medium text-base text-f-100 hover:text-accent-500",
|
||||
"block font-semibold text-base text-f-100 hover:text-accent-500",
|
||||
isCategoryActive && "!text-accent-500",
|
||||
)}
|
||||
href={href}
|
||||
|
||||
Reference in New Issue
Block a user