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

Various DEVX issues update #400

Merged
merged 3 commits into from
May 13, 2024
Merged

Various DEVX issues update #400

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8928592
Reduce gap between footer items
kien-cavies May 12, 2024
db5db5d
Update new dotnet icon
kien-cavies May 12, 2024
c0e8b2b
DEVX-1713 - Update code snippet for /account/api-keys/use
kien-cavies May 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 10 additions & 3 deletions public/icons/navbar/nav-icon-dotnet.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
39 changes: 11 additions & 28 deletions src/app/account/api-keys/use/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@ import { createMetadata } from "@doc";

export const metadata = createMetadata({
title: "Using thirdweb API Key",
description:
"How to use thirdweb API key in TypeScript, React, and Unity.",
description: "How to use thirdweb API key in TypeScript, React, and Unity.",
image: {
title: "Using thirdweb API Key",
icon: "thirdweb",
Expand All @@ -16,48 +15,32 @@ export const metadata = createMetadata({
<Tabs defaultValue="typescript">

<TabsList>
<TabsTrigger value="typescript">TypeScript</TabsTrigger>
<TabsTrigger value="react">React</TabsTrigger>
<TabsTrigger value="typescript">TypeScript & React</TabsTrigger>
<TabsTrigger value="unity">Unity</TabsTrigger>
</TabsList>

<TabsContent value='typescript'>
When writing backends or scripts, you can use the secret key to instantiate the SDK:
When working with backend environments (including React Server Components), you can use the secret key to instantiate the thirdweb Client:

```ts
// Read-only mode
const readOnlySdk = new ThirdwebSDK("goerli", {
import { createThirdwebClient } from "thirdweb";

const client = createThirdwebClient({
secretKey: "YOUR_SECRET_KEY", // Use secret key if using on the server, get it from dashboard settings
});
```

When using the Typescript SDK for frontend applications, use the client id:

```ts
import { ThirdwebSDK } from "@thirdweb-dev/sdk";
// Read-only mode
const readOnlySdk = new ThirdwebSDK("goerli", {
clientId: "YOUR_CLIENT_ID", // Use client id if using on the client side, get it from dashboard settings
import { createThirdwebClient } from "thirdweb";

const client = createThirdwebClient({
clientKey: "YOUR_CLIENT_ID", // Use client id if using on the client side, get it from dashboard settings
});
```

</TabsContent>

<TabsContent value="react">

When using the React SDK, you can use the client id to instantiate the SDK:

```jsx
import { ThirdwebProvider } from "@thirdweb-dev/react";

function MyApp() {
return (
<ThirdwebProvider activeChain="ethereum" clientId="your-client-id">
<YourApp />
</ThirdwebProvider>
);
}
```
The `client` can be utilized to initiate [contracts](/typescript/v5/contract) or used in some React components such as [ConnectButton](/references/typescript/v5/ConnectButton).

</TabsContent>

Expand Down
2 changes: 1 addition & 1 deletion src/components/Document/PageFooter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ function FooterLinkItem(props: {
icon: LucideIcon;
}) {
return (
<li className="flex items-center gap-3 text-f-300">
<li className="flex items-center gap-2 text-f-300">
<div className="flex items-center gap-2 font-medium">
<props.icon className="size-5" />
<span>{props.prefix}</span>
Expand Down
Loading