Skip to content

Commit

Permalink
docs: Reorganize Connect SDK documentation structure and UI (#5816)
Browse files Browse the repository at this point in the history
  • Loading branch information
@joaquim-verges
joaquim-verges authored Dec 20, 2024
1 parent 1ed2f86 commit 00af0ed
Show file tree
Hide file tree
Showing 16 changed files with 310 additions and 317 deletions.
69 changes: 60 additions & 9 deletions apps/portal/src/app/connect/account-abstraction/erc-20-paymaster/page.mdx
View file
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,
},
});
```
</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
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
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
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

0 comments on commit 00af0ed

Please sign in to comment.