Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
8 changes: 6 additions & 2 deletions examples/privy-next-cross-app-connect/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ This example showcases how to get started using Privy's React SDK inside a Next.

## Live Demo

[View Demo]({{DEPLOY_URL}})
[View Demo](cross-app-connect-demo.vercel.app)

## Getting Started

Expand Down Expand Up @@ -54,6 +54,7 @@ Open [http://localhost:3000](http://localhost:3000) in your browser to see the a
Login or sign up using Privy's pre-built modals.

[`src/app/page.tsx`](./src/app/page.tsx)

```tsx
import { usePrivy } from "@privy-io/react-auth";
const { login } = usePrivy();
Expand All @@ -65,13 +66,15 @@ login();
Programmatically create embedded wallets for multiple blockchains. Supports Ethereum, Solana, Bitcoin, and more.

[`src/components/sections/create-a-wallet.tsx`](./src/components/sections/create-a-wallet.tsx)

```tsx
import { useCreateWallet, useSolanaWallets } from "@privy-io/react-auth";
import { useCreateWallet as useCreateWalletExtendedChains } from "@privy-io/react-auth/extended-chains";

const { createWallet: createWalletEvm } = useCreateWallet();
const { createWallet: createWalletSolana } = useSolanaWallets();
const { createWallet: createWalletExtendedChains } = useCreateWalletExtendedChains();
const { createWallet: createWalletExtendedChains } =
useCreateWalletExtendedChains();

// Create Ethereum wallet
createWalletEvm({ createAdditional: true });
Expand All @@ -88,6 +91,7 @@ createWalletExtendedChains({ chainType: "bitcoin-segwit" });
Send transactions on both Ethereum and Solana with comprehensive wallet action support.

[`src/components/sections/wallet-actions.tsx`](./src/components/sections/wallet-actions.tsx)

```tsx
import { useSendTransaction } from "@privy-io/react-auth";
import { useSendTransaction as useSendTransactionSolana } from "@privy-io/react-auth/solana";
Expand Down
10 changes: 5 additions & 5 deletions examples/privy-next-cross-app-provider/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,6 @@

This example showcases how to get started using Privy's React SDK inside a Next.js application.

## Live Demo

[View Demo]({{DEPLOY_URL}})

## Getting Started

### 1. Clone the Project
Expand Down Expand Up @@ -54,6 +50,7 @@ Open [http://localhost:3000](http://localhost:3000) in your browser to see the a
Login or sign up using Privy's pre-built modals.

[`src/app/page.tsx`](./src/app/page.tsx)

```tsx
import { usePrivy } from "@privy-io/react-auth";
const { login } = usePrivy();
Expand All @@ -65,13 +62,15 @@ login();
Programmatically create embedded wallets for multiple blockchains. Supports Ethereum, Solana, Bitcoin, and more.

[`src/components/sections/create-a-wallet.tsx`](./src/components/sections/create-a-wallet.tsx)

```tsx
import { useCreateWallet, useSolanaWallets } from "@privy-io/react-auth";
import { useCreateWallet as useCreateWalletExtendedChains } from "@privy-io/react-auth/extended-chains";

const { createWallet: createWalletEvm } = useCreateWallet();
const { createWallet: createWalletSolana } = useSolanaWallets();
const { createWallet: createWalletExtendedChains } = useCreateWalletExtendedChains();
const { createWallet: createWalletExtendedChains } =
useCreateWalletExtendedChains();

// Create Ethereum wallet
createWalletEvm({ createAdditional: true });
Expand All @@ -88,6 +87,7 @@ createWalletExtendedChains({ chainType: "bitcoin-segwit" });
Send transactions on both Ethereum and Solana with comprehensive wallet action support.

[`src/components/sections/wallet-actions.tsx`](./src/components/sections/wallet-actions.tsx)

```tsx
import { useSendTransaction } from "@privy-io/react-auth";
import { useSendTransaction as useSendTransactionSolana } from "@privy-io/react-auth/solana";
Expand Down
8 changes: 6 additions & 2 deletions examples/privy-next-farcaster/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ This example showcases how to get started using Privy's React SDK inside a Next.

## Live Demo

[View Demo]({{DEPLOY_URL}})
[View Demo](farcaster-demo.vercel.app)

## Getting Started

Expand Down Expand Up @@ -54,6 +54,7 @@ Open [http://localhost:3000](http://localhost:3000) in your browser to see the a
Login or sign up using Privy's pre-built modals.

[`src/app/page.tsx`](./src/app/page.tsx)

```tsx
import { usePrivy } from "@privy-io/react-auth";
const { login } = usePrivy();
Expand All @@ -65,13 +66,15 @@ login();
Programmatically create embedded wallets for multiple blockchains. Supports Ethereum, Solana, Bitcoin, and more.

[`src/components/sections/create-a-wallet.tsx`](./src/components/sections/create-a-wallet.tsx)

```tsx
import { useCreateWallet, useSolanaWallets } from "@privy-io/react-auth";
import { useCreateWallet as useCreateWalletExtendedChains } from "@privy-io/react-auth/extended-chains";

const { createWallet: createWalletEvm } = useCreateWallet();
const { createWallet: createWalletSolana } = useSolanaWallets();
const { createWallet: createWalletExtendedChains } = useCreateWalletExtendedChains();
const { createWallet: createWalletExtendedChains } =
useCreateWalletExtendedChains();

// Create Ethereum wallet
createWalletEvm({ createAdditional: true });
Expand All @@ -88,6 +91,7 @@ createWalletExtendedChains({ chainType: "bitcoin-segwit" });
Send transactions on both Ethereum and Solana with comprehensive wallet action support.

[`src/components/sections/wallet-actions.tsx`](./src/components/sections/wallet-actions.tsx)

```tsx
import { useSendTransaction } from "@privy-io/react-auth";
import { useSendTransaction as useSendTransactionSolana } from "@privy-io/react-auth/solana";
Expand Down
14 changes: 7 additions & 7 deletions examples/privy-next-permissionless/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,31 @@

## Live Demo

[https://permissionless-example.privy.io/](https://permissionless-example.privy.io/)
[Live Demo](https://permissionless-example.privy.io/)

## Intro

This is a template for integrating [**Privy**](https://www.privy.io/) and [**`permissionless.js` (Pimlico)**](https://docs.pimlico.io/permissionless) into a [NextJS](https://nextjs.org/) project. Check out the deployed app [here](https://permissionless-example.privy.io/)!

In this demo app, a user can login with their email or Google account, and get a Privy embedded wallet. Once the user has logged in and created an embedded wallet, `permissionless.js` will create a **smart wallet** for the user behind the scenes, which can then be used to incorporate gas sponsorship, batched transactions, and more into your app.
In this demo app, a user can login with their email or Google account, and get a Privy embedded wallet. Once the user has logged in and created an embedded wallet, `permissionless.js` will create a **smart wallet** for the user behind the scenes, which can then be used to incorporate gas sponsorship, batched transactions, and more into your app.

You can test this by logging into the app and attempting to mint an NFT with your smart wallet; it should cost you no gas!

## Setup

1. Fork this repository, clone it, and open it in your terminal.

```sh
git clone https://github.com/<your-github-handle>/permissionless-example
```

2. Install the necessary dependencies (including [Privy](https://www.npmjs.com/package/@privy-io/react-auth) and [Permissionless](https://www.npmjs.com/package/permissionless)) with `npm`.

```sh
npm i
npm i
```

3. Initialize your environment variables by copying the `.env.example` file to an `.env.local` file. Then, in `.env.local`, paste your **Privy App ID** from the [Privy console](https://console.privy.io) and your **Pimlico Bundler and Paymaster URLs** from the [Pimlico dashboard](https://dashboard.pimlico.io/). This app uses the **Base Sepolia** testnet; you should make sure to apply the same settings to your Pimlico configuration in the dashboard.
3. Initialize your environment variables by copying the `.env.example` file to an `.env.local` file. Then, in `.env.local`, paste your **Privy App ID** from the [Privy console](https://console.privy.io) and your **Pimlico Bundler and Paymaster URLs** from the [Pimlico dashboard](https://dashboard.pimlico.io/). This app uses the **Base Sepolia** testnet; you should make sure to apply the same settings to your Pimlico configuration in the dashboard.

```sh
# In your terminal, create .env.local from .env.example
Expand All @@ -40,12 +42,10 @@ NEXT_PUBLIC_PIMLICO_BUNDLER_URL=<your-pimlico-bundler-url>

In your project directory, run `npm run dev`. You can now visit http://localhost:3000 to see your app and login with Privy!


## Check out:

- `pages/_app.tsx` for how to set your app up with the `PrivyProvider`
- `hooks/SmartAccountContext.tsx` for how to deploy a smart account for users, using their Privy embedded wallet as a signer, and how to store it in a React context
- `pages/dashboard.tsx` for how to use the custom `useSmartAccount` hook to send an NFT minting transaction

**Check out our [Pimlico integration guide](https://docs.privy.io/guide/frontend/account-abstraction/pimlico) for more guidance!**


4 changes: 0 additions & 4 deletions examples/privy-next-session-keys/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,6 @@

This example showcases how to integrate Privy's embedded wallets with ZeroDev session keys for automated transaction execution.

## Live Demo

[View Demo]({{DEPLOY_URL}})

## Getting Started

### 1. Clone the Project
Expand Down
17 changes: 9 additions & 8 deletions examples/privy-next-smart-wallets/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,12 @@ This example showcases how to get started using Multi-Chain EVM smart wallets wi

## Live Demo

[View Demo]({{DEPLOY_URL}})
[View Demo](https://smart-wallets-starter.vercel.app/)

## Quick Start

### 0. Dashboard set up

- Create an app in the Privy dashboard [here](https://dashboard.privy.io/)
- Configure the dashboard to enable smart wallets [here](https://docs.privy.io/wallets/using-wallets/evm-smart-wallets/setup/configuring-dashboard)

Expand Down Expand Up @@ -64,40 +65,40 @@ Open [http://localhost:3000](http://localhost:3000) in your browser to see the a
Configure your app to use smart wallets by wrapping your PrivyProvider with the SmartWalletsProvider.

[`src/providers/providers.tsx`](./src/providers/providers.tsx)

```tsx
import { PrivyProvider } from "@privy-io/react-auth";
import { SmartWalletsProvider } from "@privy-io/react-auth/smart-wallets";

export default function Providers({ children }: { children: React.ReactNode }) {
return (
<PrivyProvider appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID!}>
<SmartWalletsProvider>
{children}
</SmartWalletsProvider>
<SmartWalletsProvider>{children}</SmartWalletsProvider>
</PrivyProvider>
);
}
```

### 2. Create Smart Wallets

Create embedded wallets, smart wallets are automatically provisioned when the SmartWalletsProvider is configured.
Create embedded wallets, smart wallets are automatically provisioned when the SmartWalletsProvider is configured.

[`src/components/sections/create-a-wallet.tsx`](./src/components/sections/create-a-wallet.tsx)

```tsx
import { useCreateWallet } from "@privy-io/react-auth";
const { createWallet: createWalletEvm } = useCreateWallet();

// Create Ethereum embedded wallet (smart wallet created automatically!)
createWalletEvm({ createAdditional: true });

```

### 3. Send Batch Transactions

Send batch transactions, sign messages and typed data, manage session signers, and switch between chains using smart wallets.

[`src/components/sections/evm-smart-wallet-actions.tsx`](./src/components/sections/evm-smart-wallet-actions.tsx)

```tsx
import { useSmartWallets } from "@privy-io/react-auth/smart-wallets";
import { encodeFunctionData, erc20Abi } from "viem";
Expand All @@ -119,7 +120,7 @@ client.sendTransaction({
to: USDC_ADDRESS,
data: encodeFunctionData({
abi: erc20Abi,
functionName: "transfer",
functionName: "transfer",
args: [recipientAddress, amount],
}),
},
Expand All @@ -133,4 +134,4 @@ client.sendTransaction({
- [Privy Documentation](https://docs.privy.io)
- [React SDK](https://www.npmjs.com/package/@privy-io/react-auth)
- [Smart Wallets Guide](https://docs.privy.io/guide/react/smart-wallets)
- [Session Keys Guide](https://docs.privy.io/guide/react/recipes/misc/session-keys)
- [Session Keys Guide](https://docs.privy.io/guide/react/recipes/misc/session-keys)
11 changes: 5 additions & 6 deletions examples/privy-next-solana/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,6 @@

This example showcases how to get started using Solana with Privy's React SDK inside a Next.js application.

## Live Demo

[View Demo]({{DEPLOY_URL}})

## Quick Start

### 1. Clone the Project
Expand Down Expand Up @@ -59,8 +55,9 @@ Open [http://localhost:3000](http://localhost:3000) in your browser to see the a
Login or sign up using Privy's pre-built modals.

[`src/app/page.tsx`](./src/app/page.tsx)

```tsx
import { usePrivy } from "@privy-io/react-auth";
import { usePrivy } from "@privy-io/react-auth";
const { login } = usePrivy();
login();
```
Expand All @@ -70,6 +67,7 @@ login();
Programmatically create a Solana embedded wallet for your user. Wallets can also be automatically created on login by configuring your PrivyProvider, learn more [here](https://docs.privy.io/basics/react/advanced/automatic-wallet-creation).

[`src/components/sections/create-a-wallet.tsx`](./src/components/sections/create-a-wallet.tsx)

```tsx
import { useSolanaWallets } from "@privy-io/react-auth";
const { createWallet } = useSolanaWallets();
Expand All @@ -81,6 +79,7 @@ createWallet();
Send a transaction on Solana by either prompting your users for confirmation, or abstract away confirmations by enabling headless signing.

[`src/components/sections/wallet-actions.tsx`](./src/components/sections/wallet-actions.tsx)

```tsx
import { useSendTransaction } from "@privy-io/react-auth/solana";
const { sendTransaction } = useSendTransaction();
Expand All @@ -95,4 +94,4 @@ const receipt = await sendTransaction({

- [Privy Dashboard](https://dashboard.privy.io)
- [Privy Documentation](https://docs.privy.io)
- [React SDK](https://www.npmjs.com/package/@privy-io/react-auth)
- [React SDK](https://www.npmjs.com/package/@privy-io/react-auth)
9 changes: 6 additions & 3 deletions examples/privy-next-wagmi/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ This example showcases how to get started using Wagmi with Privy's React SDK ins

## Live Demo

[View Demo]({{DEPLOY_URL}})
[View Demo](wagmi-app.vercel.app)

## Quick Start

Expand Down Expand Up @@ -59,8 +59,9 @@ Open [http://localhost:3000](http://localhost:3000) in your browser to see the a
Login or sign up using Privy's pre-built modals.

[`src/app/page.tsx`](./src/app/page.tsx)

```tsx
import { usePrivy } from "@privy-io/react-auth";
import { usePrivy } from "@privy-io/react-auth";
const { login } = usePrivy();
login();
```
Expand All @@ -70,6 +71,7 @@ login();
Programmatically create an Ethereum embedded wallet for your user. Wallets can also be automatically created on login by configuring your PrivyProvider, learn more [here](https://docs.privy.io/basics/react/advanced/automatic-wallet-creation).

[`src/components/sections/create-a-wallet.tsx`](./src/components/sections/create-a-wallet.tsx)

```tsx
import { useCreateWallet } from "@privy-io/react-auth";
const { createWallet } = useCreateWallet();
Expand All @@ -81,6 +83,7 @@ createWallet({ createAdditional: true });
Use Wagmi hooks to interact with Ethereum wallets seamlessly. Wagmi provides type-safe hooks that work with both Privy embedded wallets and externally connected wallets.

[`src/components/sections/wagmi-wallet-actions.tsx`](./src/components/sections/wagmi-wallet-actions.tsx)

```tsx
import { useSendTransaction } from "wagmi";
import { useSetActiveWallet } from "@privy-io/wagmi";
Expand All @@ -102,4 +105,4 @@ await sendTransaction({
- [Privy Documentation](https://docs.privy.io)
- [React SDK](https://www.npmjs.com/package/@privy-io/react-auth)
- [Wagmi Documentation](https://wagmi.sh)
- [Privy Wagmi Connector](https://www.npmjs.com/package/@privy-io/wagmi)
- [Privy Wagmi Connector](https://www.npmjs.com/package/@privy-io/wagmi)
2 changes: 1 addition & 1 deletion examples/privy-react-farcaster/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ This example showcases how to get started using Farcaster social login and casti

## Live Demo

[View Demo]({{DEPLOY_URL}})
[View Demo](farcaster-demo.vercel.app)

## Quick Start

Expand Down
Loading