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

Commit

Permalink
fix metamask references in v5 pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@joaquim-verges
joaquim-verges committed Apr 20, 2024
1 parent 7f7eed4 commit 59777a5
Show file tree
Hide file tree
Showing 5 changed files with 28 additions and 166 deletions.
10 changes: 3 additions & 7 deletions src/app/connect/pay/get-started/typescript-example.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,19 +34,15 @@ This function takes an object with the following properties:
Since you need to pass the `fromAddress` to function, you need to connect a wallet. Refer to [Connecting Wallets](/typescript/v5/wallets) guide to see how you can connect various wallets.

```tsx
import {
NATIVE_TOKEN_ADDRESS,
createThirdwebClient,
metamaskWallet,
} from "thirdweb";
import { metamaskWallet } from "thirdweb/wallets";
import { NATIVE_TOKEN_ADDRESS, createThirdwebClient } from "thirdweb";
import { createWallet } from "thirdweb/wallets";

const client = createThirdwebClient({
clientId: "YOUR_CLIENT_ID",
});

// connect a wallet to get an account
const metamask = metamaskWallet();
const metamask = createWallet("io.metamask");
const account = await metamask.connect();

const quote = await getBuyWithCryptoQuote({
Expand Down
75 changes: 4 additions & 71 deletions src/app/contracts/explore/pre-built-contracts/account-factory/page.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,75 +36,8 @@ This contract includes the following extensions:

## Use Cases & Examples

Use the `AccountFactory` contract alongside the [`SmartWallet`](/references/typescript/v5/smartWallet) connector or [`ConnectButton`](/typescript/v5/react/components/ConnectButton) to easily use account abstraction in your projects:
Use the `AccountFactory` contract alongside the [Connect SDK](/connect/account-abstraction) to easily use account abstraction in your projects:

### Connect Wallet

```tsx
import {
smartWallet,
metamaskWallet,
coinbaseWallet,
walletConnect,
} from "@thirdweb-dev/react";

const config = {
factoryAddress: "0x...",
gasless: true,
}

<ThirdwebProvider
supportedWallets={[
smartWallet(metamaskWallet(), config),
smartWallet(coinbaseWallet(), config),
smartWallet(walletConnect(), config),
]}
clientId="your-client-id"
>
<YourApp />
</ThirdwebProvider>;
```

```tsx
import { ConnectWallet } from "@thirdweb-dev/react";

// render ConnectWallet button wherever you want

function App() {
return (
<div>
<ConnectWallet />
</div>
);
}
```

### TypeScript

```tsx
import { LocalWallet, SmartWallet } from "@thirdweb-dev/wallets";
import { Goerli } from "@thirdweb-dev/chains";

// First, connect the personal wallet, which can be any wallet (metamask, walletconnect, etc.)
// Here we're just generating a new local wallet which can be saved later
const personalWallet = new LocalWallet();
await personalWallet.generate();

// Setup the Smart Wallet configuration
const config: SmartWalletConfig = {
chain: Goerli, // the chain where your smart wallet will be or is deployed
factoryAddress: "{{factory_address}}", // your own deployed account factory address
clientId: "YOUR_CLIENT_ID", // Use client id if using on the client side, get it from dashboard settings
secretKey: "YOUR_SECRET_KEY", // Use secret key if using on the server, get it from dashboard settings
gasless: true, // enable or disable gasless transactions
};

// Then, connect the Smart wallet
const wallet = new SmartWallet(config);
await wallet.connect({
personalWallet,
});

// You can then use this wallet to perform transactions via the SDK
const sdk = await ThirdwebSDK.fromWallet(wallet, Goerli);
```
- [React Guide](/connect/account-abstraction/guides/react)
- [Typescript Guide](/connect/account-abstraction/guides/typescript)
- [Unity Guide](/unity/wallets/providers/account-abstraction)
75 changes: 4 additions & 71 deletions src/app/contracts/explore/pre-built-contracts/managed-account-factory/page.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,75 +42,8 @@ This contract includes the following extensions:

## Use Cases & Examples

Use the `ManagedAccountFactory` contract alongside the [`SmartWallet`](/references/typescript/v5/smartWallet) connector or [`ConnectButton`](/typescript/v5/react/components/ConnectButton) to easily use account abstraction in your projects:
Use the `ManagedAccountFactory` contract alongside the [Connect SDK](/connect/account-abstraction) to easily use account abstraction in your projects:

### Connect Wallet

```tsx
import {
smartWallet,
metamaskWallet,
coinbaseWallet,
walletConnect,
} from "@thirdweb-dev/react";

const config = {
factoryAddress: "0x...",
gasless: true,
}

<ThirdwebProvider
supportedWallets={[
smartWallet(metamaskWallet(), config),
smartWallet(coinbaseWallet(), config),
smartWallet(walletConnect(), config),
]}
clientId="your-client-id"
>
<YourApp />
</ThirdwebProvider>
```

```tsx
import { ConnectWallet } from "@thirdweb-dev/react";

// render ConnectWallet button wherever you want

function App() {
return (
<div>
<ConnectWallet />
</div>
);
}
```

### TypeScript

```tsx
import { LocalWallet, SmartWallet } from "@thirdweb-dev/wallets";
import { Goerli } from "@thirdweb-dev/chains";

// First, connect the personal wallet, which can be any wallet (metamask, walletconnect, etc.)
// Here we're just generating a new local wallet which can be saved later
const personalWallet = new LocalWallet();
await personalWallet.generate();

// Setup the Smart Wallet configuration
const config: SmartWalletConfig = {
chain: Goerli, // the chain where your smart wallet will be or is deployed
factoryAddress: "{{factory_address}}", // your own deployed account factory address
clientId: "YOUR_CLIENT_ID", // Use client id if using on the client side, get it from dashboard settings
secretKey: "YOUR_SECRET_KEY", // Use secret key if using on the server, get it from dashboard settings
gasless: true, // enable or disable gasless transactions
};

// Then, connect the Smart wallet
const wallet = new SmartWallet(config);
await wallet.connect({
personalWallet,
});

// You can then use this wallet to perform transactions via the SDK
const sdk = await ThirdwebSDK.fromWallet(wallet, Goerli);
```
- [React Guide](/connect/account-abstraction/guides/react)
- [Typescript Guide](/connect/account-abstraction/guides/typescript)
- [Unity Guide](/unity/wallets/providers/account-abstraction)
22 changes: 11 additions & 11 deletions src/app/typescript/v5/migrate/page.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,24 +66,24 @@ const onClick = async () => {

### TypeScript Cheatsheet

| Task | `@thirdweb-dev/sdk` | `thirdweb` |
| ---------- | -------------------------------------------------------- | --------------------------------------------------- |
| Chains | `import { Sepolia } from "@thirdweb-dev/chains"` | `import { sepolia } from "thirdweb/chains"` |
| Wallets | `import { MetaMaskWallet } from "@thirdweb-dev/wallets"` | `import { metamaskWallet } from "thirdweb/wallets"` |
| Initialize | `new ThirdwebSDK(...)` | `createThirdwebClient({ ... })` |
| Contract | `await sdk.getContract(...)` | `getContract(...) // no await` |
| Read | `await contract.call(...)` | `await readContract(...)` |
| Prepare | `await contract.prepare(...)` | `prepareContractCall(...) // no await` |
| Send | `await contract.call(...)` | `await sendTransaction(...)` |
| Extensions | `await contract.erc721.getAll()` | `await getNFTs(...)` |
| Task | `@thirdweb-dev/sdk` | `thirdweb` |
| ---------- | -------------------------------------------------------- | ------------------------------------------------- |
| Chains | `import { Sepolia } from "@thirdweb-dev/chains"` | `import { sepolia } from "thirdweb/chains"` |
| Wallets | `import { MetaMaskWallet } from "@thirdweb-dev/wallets"` | `import { createWallet } from "thirdweb/wallets"` |
| Initialize | `new ThirdwebSDK(...)` | `createThirdwebClient({ ... })` |
| Contract | `await sdk.getContract(...)` | `getContract(...) // no await` |
| Read | `await contract.call(...)` | `await readContract(...)` |
| Prepare | `await contract.prepare(...)` | `prepareContractCall(...) // no await` |
| Send | `await contract.call(...)` | `await sendTransaction(...)` |
| Extensions | `await contract.erc721.getAll()` | `await getNFTs(...)` |

### React Cheatsheet

| Task | `@thirdweb-dev/react` | `thirdweb` |
| ---------- | ----------------------------------------------------- | --------------------------------------------------- |
| Provider | `import { ThirdwebProvider} from @thirdweb-dev/react` | `import { ThirdwebProvider } from "thirdweb/react"` |
| Contract | `useContract(...)` | `getContract(...) // not a hook` |
| Address | `useAddress(...)` | `useActiveAccount(...) // account?.address` |
| Address | `useAddress(...)` | `useActiveAccount(...) // account?.address` |
| Read | `useContractRead(...)` | `useReadContract(...)` |
| Write | `useContractWrite(...)` | `useSendTransaction()` |
| Extensions | `useNFTs(...)` | `useReadContract(getNFTs, { ... })` |
12 changes: 6 additions & 6 deletions src/app/typescript/v5/transactions/send/page.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ See [Wallets](/typescript/v5/wallets) for more information on how to create a wa

```ts
import { sendTransaction } from "thirdweb";
import { metamaskWallet } from "thirdweb/wallets";
import { createWallet } from "thirdweb/wallets";

const wallet = metamaskWallet();
const wallet = createWallet("io.metamask");
await wallet.connect();

const transactionResult = await sendTransaction({
Expand All @@ -27,9 +27,9 @@ Send a transaction and wait for it to be mined. Useful when you want to block un

```ts
import { sendAndConfirmTransaction } from "thirdweb";
import { metamaskWallet } from "thirdweb/wallets";
import { createWallet } from "thirdweb/wallets";

const wallet = metamaskWallet();
const wallet = createWallet("io.metamask");
await wallet.connect();

const receipt = await sendAndConfirmTransaction({
Expand All @@ -44,9 +44,9 @@ Wait for a transaction to be mined and get the transaction receipt.

```ts
import { sendTransaction, waitForReceipt } from "thirdweb";
import { metamaskWallet } from "thirdweb/wallets";
import { createWallet } from "thirdweb/wallets";

const wallet = metamaskWallet();
const wallet = createWallet("io.metamask");
await wallet.connect();

const transactionResult = await sendTransaction({
Expand Down

0 comments on commit 59777a5

Please sign in to comment.