fix: add readme files and a small explanation

vechain · Nov 28, 2024 · 6e5cfc4 · 6e5cfc4
1 parent 4145d48
commit 6e5cfc4
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 0 deletions.
diff --git a/examples/sample-privy-next-app/README.md 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 (
+      <html lang="en">
+        <head>
+          <title>Privy Next JS</title>
+        </head>
+        <body>
+          <SocialLoginWrapper>
+            {children}
+          </SocialLoginWrapper>
+        </body>
+      </html>
+    );
+}
+```
+
+### 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
@@ -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
+```