Skip to content

docs: Reorganize Connect SDK documentation structure and UI #5816

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Dec 20, 2024
Merged

docs: Reorganize Connect SDK documentation structure and UI #5816

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
e6a93da
docs: Remove duplicate contract section heading
joaquim-verges Dec 19, 2024
9285e24
docs: Reorganize Connect SDK documentation structure and UI
joaquim-verges Dec 19, 2024
978fb26
Update page.mdx
joaquim-verges Dec 19, 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
69 changes: 60 additions & 9 deletions apps/portal/src/app/connect/account-abstraction/erc-20-paymaster/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";

# ERC-20 Paymaster

Expand All @@ -7,17 +7,20 @@ In traditional Ethereum transactions, users pay gas fees in the native cryptocur
### Get Started


1. Install Connect SDK

```bash
npm install thirdweb
```

2. Configure the Paymaster In your SDK code, specify the ERC-20 token you wish to use for gas fees.
Configure the Paymaster In your SDK code, specify the ERC-20 token you wish to use for gas fees.

Currently you may use Lisk LSK, Base USDC or Celo CUSD.

<Tabs>

<TabsList>
<TabsTrigger value="typescript">TypeScript</TabsTrigger>
<TabsTrigger value="react">React</TabsTrigger>
<TabsTrigger value="dotnet">.NET</TabsTrigger>
<TabsTrigger value="unity">Unity</TabsTrigger>
</TabsList>

<TabsContent value="typescript">
```tsx
import { base, lisk, celo } from "thirdweb/chains";
import { TokenPaymaster, smartWallet } from "thirdweb/wallets";
Expand Down Expand Up @@ -48,4 +51,52 @@ const cusdWallet = smartWallet({
tokenPaymaster: TokenPaymaster.CELO_CUSD,
},
});
```
```
</TabsContent>

<TabsContent value="react">
```tsx
import { base, lisk, celo } from "thirdweb/chains";
import { TokenPaymaster, smartWallet } from "thirdweb/wallets";

// Have users pay for gas in Base USDC
<ConnectButton
client={client}
accountAbstraction={{
chain: base,
sponsorGas: true,
overrides: {
tokenPaymaster: TokenPaymaster.BASE_USDC,
},
});
Comment on lines +63 to +71
Copy link
Contributor

@graphite-app graphite-app bot Dec 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The React code example has a syntax error - there is an extra semicolon before the closing parenthesis. The last line should be }) instead of });.

Spotted by Graphite Reviewer

Is this helpful? React 👍 or 👎 to let us know.

```
</TabsContent>

<TabsContent value="dotnet">
```csharp
var chainId = 1135; // lisk

var erc20SmartWallet = await SmartWallet.Create(
personalWallet: privateKeyWallet,
chainId: chainId,
tokenPaymaster: TokenPaymaster.LISK_LSK
);
```
</TabsContent>

<TabsContent value="unity">
```csharp
var chainId = 8453; // base

var erc20SmartWallet = await ConnectWallet(
new WalletOptions(
WalletProvider.InAppWallet,
chainId,
inAppWalletOptions: new InAppWalletOptions(authprovider: AuthProvider.Steam),
smartWalletOptions: new SmartWalletOptions(sponsorGas: true, tokenPaymaster: TokenPaymaster.BASE_USDC)
)
);
```
</TabsContent>

</Tabs>
50 changes: 25 additions & 25 deletions apps/portal/src/app/connect/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,10 @@ import {
Stack,
ConnectCard,
SDKCard,
Callout
Callout,
ArticleIconCard,
} from "@doc";
import { ExternalLink } from "lucide-react";
import { TypeScriptIcon, ReactIcon, DotNetIcon, UnityIcon, UnrealEngineIcon } from "@/icons";
import { cn } from "@/lib/utils";
import Link from "next/link";
Expand All @@ -28,29 +30,27 @@ export const metadata = createMetadata({

Connect is the complete toolkit for connecting every user to your application. It features customizable onboarding flows, self-custodial in-app wallets, account abstraction, onramps, and a performant API to interact with the blockchain.

<div
className={cn(
"my-4 grid gap-4 md:grid-cols-2 lg:grid-cols-2",
props.className,
)}
>
<ConnectCard
title="Playground"
href="https://playground.thirdweb.com"
iconUrl="/icons/connect/intros/demo.svg"
isExternal={true}
/>
<ConnectCard
title="Templates"
href="https://thirdweb.com/templates"
iconUrl="/icons/connect/intros/quickstart.svg"
/>
</div>
## Live Playground

You can interact with the React SDK in the [Live Playground](https://playground.thirdweb.com/).

### Quick starts
<Stack>

<ArticleIconCard
title="Try the demo"
icon={ExternalLink}
href="https://playground.thirdweb.com"
description="See the SDK in action on the live playground"
/>

</Stack>

## Quick starts

Get started with Connect in your preferred language.

<Grid>
<SDKCard
<SDKCard
title="TypeScript"
href="/typescript/v5/getting-started"
icon={TypeScriptIcon}
Expand Down Expand Up @@ -82,9 +82,9 @@ Connect is the complete toolkit for connecting every user to your application. I
/>
</Grid>

### With Connect, you can
## With Connect, you can

- **Connect to 350+ different wallet providers** with support for every EVM network
- **Connect to 500+ different wallet providers** with support for every EVM network
- **Log in and authenticate your users** with customizable and secure [email, phone, passkeys and social login](https://portal.thirdweb.com/connect/in-app-wallet/overview) flows.
- **Sponsor transactions** to seamlessly onboard non-native or new crypto users with [Account Abstraction](https://portal.thirdweb.com/connect/account-abstraction/overview).
- **Perform wallet actions** like connecting and disconnecting wallets, viewing balance, displaying ENS names, and execute transactions with our [perfomant, reliable and type safe API](https://portal.thirdweb.com/connect/blockchain-api)
Expand All @@ -107,11 +107,11 @@ Connect is the complete toolkit for connecting every user to your application. I
</div>
</Callout>

### Supported Chains
## Supported Chains

Connect is supported on every EVM compatible chain. To view the full list, visit [thirdweb chainlist](https://thirdweb.com/chainlist).

### Starter Kits & demos
## Starter Kits & demos

View all available starter kits, demos and templates on Github.

Expand Down
147 changes: 42 additions & 105 deletions apps/portal/src/app/connect/wallet/get-started/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { Callout, OpenSourceCard, createMetadata, InstallTabs, ArticleIconCard } from "@doc";
import { Callout, OpenSourceCard, createMetadata, InstallTabs, SDKCard, Grid, ArticleIconCard } from "@doc";
import {
ReactIcon,
TypeScriptIcon,
UnityIcon,
DotNetIcon,
ExternalLinkIcon,
UnrealEngineIcon
} from "@/icons"
import { ExternalLink } from "lucide-react";

export const metadata = createMetadata({
image: {
Expand All @@ -27,13 +27,13 @@ thirdweb offers multiple ways to add wallets to your application. Choose the met

These methods can be used independently or together in the same application to provide the best experience for your users.

## Try the demo
## Live Playground

We have a playground that lets you see all the various options via our prebuilt UI:
Check out the playground that lets you see all the various capabilities of Connect.

<ArticleIconCard
title="Connect demo"
icon={ExternalLinkIcon}
title="Try the demo"
icon={ExternalLink}
description="Play around with various wallet connection options"
href="https://playground.thirdweb.com/connect/sign-in/button"
/>
Expand All @@ -42,103 +42,40 @@ We have a playground that lets you see all the various options via our prebuilt

To use in-app wallets in your applications, you will need a client ID. You can get one for free on [your thirdweb dashboard](https://thirdweb.com/create-api-key).

## External Wallets

Connect to popular external wallets like Metamask, Rainbow, Coinbase, etc.

<div className="my-4 grid gap-2 md:grid-cols-2 lg:grid-cols-3">
<ArticleIconCard
title="TypeScript"
icon={TypeScriptIcon}
href="/typescript/v5/createWallet"
/>
<ArticleIconCard
title="React"
icon={ReactIcon}
href="/react/v5/connecting-wallets/ui-components"
/>
<ArticleIconCard
title="React Native"
icon={ReactIcon}
href="/react-native/v5/ConnectButton"
/>
<ArticleIconCard
title="Unity"
icon={UnityIcon}
href="/unity/v5/wallets/walletconnect"
/>
</div>

## In-App Wallets

Create in-app wallets with social/email/sms/passkey login.

<div className="my-4 grid gap-2 md:grid-cols-2 lg:grid-cols-3">
<ArticleIconCard
title="TypeScript"
icon={TypeScriptIcon}
href="/typescript/v5/inAppWallet"
/>
<ArticleIconCard
title="React"
icon={ReactIcon}
href="/react/v5/in-app-wallet/get-started"
/>
{/* TODO: Link to react native getting started for in appw allet */}
<ArticleIconCard
title="React Native"
icon={ReactIcon}
href="/react/v5/in-app-wallet/get-started"
/>
<ArticleIconCard
title=".NET"
icon={DotNetIcon}
href="/dotnet/wallets/providers/in-app-wallet"
/>
<ArticleIconCard
title="Unity"
icon={UnityIcon}
href="/unity/v5/wallets/in-app-wallet"
/>
<ArticleIconCard
title="Unreal Engine"
icon={UnrealEngineIcon}
href="/unreal-engine/blueprints/in-app-wallet"
/>
</div>

## Ecosystem Wallets

If you're looking to set up an ecosystem from scratch, refer to the [set-up guide](/connect/wallet/ecosystem/set-up)

If you're looking to integrate ecosystem wallets in your aplication, refer to the following guides:

<div className="my-4 grid gap-2 md:grid-cols-2 lg:grid-cols-3">
<ArticleIconCard
title="TypeScript"
icon={TypeScriptIcon}
href="/typescript/v5/ecosystemWallet"
/>
<ArticleIconCard
title="React"
icon={ReactIcon}
href="/react/v5/ecosystem-wallet/get-started"
/>
{/* TODO: Add react native specific getting started for ecosystem wallets */}
<ArticleIconCard
title="React Native"
icon={ReactIcon}
href="/react/v5/ecosystem-wallet/get-started"
/>
<ArticleIconCard
title=".NET"
icon={DotNetIcon}
href="/dotnet/wallets/providers/ecosystem-wallet"
/>
<ArticleIconCard
title="Unity"
icon={UnityIcon}
href="/unity/v5/wallets/ecosystem-wallet"
/>
</div>
## Pick your language

Start with Connect in your preferred language.

<Grid>
<SDKCard
title="TypeScript"
href="/typescript/v5/getting-started"
icon={TypeScriptIcon}
/>
<SDKCard
title="React"
href="/react/v5/getting-started"
icon={ReactIcon}
/>
<SDKCard
title="React Native"
href="/react-native/v5/getting-started"
icon={ReactIcon}
/>
<SDKCard
title="DotNet"
href="/dotnet/getting-started"
icon={DotNetIcon}
/>
<SDKCard
title="Unity"
href="/unity/v5/getting-started"
icon={UnityIcon}
/>
<SDKCard
title="Unreal Engine"
href="/unreal-engine/getting-started"
icon={UnrealEngineIcon}
/>
</Grid>

4 changes: 2 additions & 2 deletions apps/portal/src/app/connect/wallet/overview/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const metadata = createMetadata({

A flexible sign-up flow that accommodates different preferences is critical when onboarding users. thirdweb offers multiple wallet solutions to meet various integration needs:

1. **External Wallets** - Traditional wallet connection with 350+ providers
1. **External Wallets** - Traditional wallet connection with 500+ providers
2. **In-App Wallet** - Seamless onboarding with email, social, and passkey options
3. **Ecosystem Wallet** - Branded wallet service for cross-application authentication

Expand All @@ -30,7 +30,7 @@ A flexible sign-up flow that accommodates different preferences is critical when
>
<FeatureCard
title="Wallet Support"
description="350+ wallet providers supported"
description="500+ wallet providers supported"
iconUrl="/icons/feature-cards/wallet.svg"
/>
<FeatureCard
Expand Down
Loading
Loading