diff --git a/examples/sample-privy-next-app/README.md b/examples/sample-privy-next-app/README.md new file mode 100644 index 00000000..bc4a54c4 --- /dev/null +++ b/examples/sample-privy-next-app/README.md @@ -0,0 +1,48 @@ +# `sample-privy-next-app` + +This example demonstrates how to integrate the `@vechain/dapp-kit-react-privy` package into a Next.js application. It showcases how to leverage the library for seamless social login and VeChain ecosystem integration, providing a foundation for building robust and user-friendly decentralized applications (dApps). + +## How it works + +### Step 1: Dynamically Import the SocialLoginWrapper + +To ensure compatibility with server-side rendering, dynamically import the SocialLoginWrapper component in layout.tsx: + +```typescript +const SocialLoginWrapper = dynamic(async () => (await import('./components/SocialLoginWrapper')).SocialLoginWrapper, { + ssr: false +}); + +export default function RootLayout({ + children, + }: Readonly<{ + children: React.ReactNode; + }>) { + return ( + + + Privy Next JS + + + + {children} + + + + ); +} +``` + +### Step 2: Use Hooks and Components + +Import the necessary hooks and components from @vechain/dapp-kit-react-privy and use them to interact with the VeChain ecosystem in your application: + +```typescript +import { + useVOT3Balance, + useB3TRBalance, +} from "@vechain/dapp-kit-react-privy"; + +const b3trBalanceQuery = isConnected ? useB3TRBalance({ address: connectedAddress ?? '' }) : useB3TRBalance({ address: abstractedAccount.embeddedWallet?.address ?? '' }); + const vot3BalanceQuery = isConnected ? useVOT3Balance({ address: connectedAddress ?? '' }) : useVOT3Balance({ address: abstractedAccount.embeddedWallet?.address ?? '' }); +``` diff --git a/packages/dapp-kit-react-privy/README.md b/packages/dapp-kit-react-privy/README.md new file mode 100644 index 00000000..586028cc --- /dev/null +++ b/packages/dapp-kit-react-privy/README.md @@ -0,0 +1,9 @@ +# `@vechain/dapp-kit-react-privy` + +The `@vechain/dapp-kit-react-privy` package simplifies the development of decentralized applications (dApps) on VeChainThor and VeBetterDAO. It provides seamless integration with social login functionality powered by Privy, making it easier for developers to enhance user onboarding and authentication experiences. + +## Installation + +```bash +yarn add @vechain/dapp-kit-react-privy +```