vechain · fabiorigam · Nov 21, 2024 · Nov 21, 2024 · Nov 21, 2024 · Nov 22, 2024
diff --git a/examples/sample-privy-next-app/.eslintrc.js b/examples/sample-privy-next-app/.eslintrc.js
@@ -0,0 +1,6 @@
+module.exports = {
+    extends: ['next'],
+    rules: {
+        '@typescript-eslint/unbound-method': 'off',
+    },
+};
diff --git a/examples/sample-privy-next-app/.gitignore b/examples/sample-privy-next-app/.gitignore
@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/examples/sample-privy-next-app/README.md b/examples/sample-privy-next-app/README.md
@@ -0,0 +1,55 @@
+# `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: connectedAccount ?? '' })
+    : useB3TRBalance({
+          address: abstractedAccount.embeddedWallet?.address ?? '',
+      });
+const vot3BalanceQuery = isConnected
+    ? useVOT3Balance({ address: connectedAccount ?? '' })
+    : useVOT3Balance({
+          address: abstractedAccount.embeddedWallet?.address ?? '',
+      });
+```
diff --git a/examples/sample-privy-next-app/next.config.js b/examples/sample-privy-next-app/next.config.js
@@ -0,0 +1,18 @@
+const basePath = process.env.BASE_PATH ?? '';
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+    basePath,
+    output: 'export',
+    distDir: 'dist',
+    env: {
+        basePath,
+    },
+    eslint: {
+        // Warning: This allows production builds to successfully complete even if
+        // your project has ESLint errors.
+        ignoreDuringBuilds: true,
+    },
+};
+
+module.exports = nextConfig;
diff --git a/examples/sample-privy-next-app/package.json b/examples/sample-privy-next-app/package.json
@@ -0,0 +1,30 @@
+{
+    "name": "sample-privy-next-app",
+    "version": "0.1.0",
+    "private": true,
+    "scripts": {
+        "build": "next build",
+        "clean": "rm -rf .next dist .turbo",
+        "dev": "next dev"
+    },
+    "dependencies": {
+        "@chakra-ui/react": "2.8.2",
+        "@emotion/react": "^11.13.5",
+        "@emotion/styled": "^11.13.5",
+        "@vechain/dapp-kit": "*",
+        "@vechain/dapp-kit-react": "*",
+        "@vechain/dapp-kit-react-privy": "*",
+        "next": "14.2.10",
+        "react": "^18",
+        "react-dom": "^18"
+    },
+    "devDependencies": {
+        "@next/eslint-plugin-next": "^14.1.4",
+        "@types/node": "^20",
+        "@types/react": "^18",
+        "@types/react-dom": "^18",
+        "eslint": "^9.12.0",
+        "eslint-config-next": "14.1.4",
+        "typescript": "5.3.3"
+    }
+}
diff --git a/examples/sample-privy-next-app/src/app/components/SocialLoginWrapper.tsx b/examples/sample-privy-next-app/src/app/components/SocialLoginWrapper.tsx
@@ -0,0 +1,89 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+const DAppKitPrivyProvider = dynamic(
+    async () =>
+        (await import('@vechain/dapp-kit-react-privy')).DAppKitPrivyProvider,
+    {
+        ssr: false,
+    },
+);
+
+interface Props {
+    children: React.ReactNode;
+}
+
+export function SocialLoginWrapper({ children }: Props) {
+    return (
+        <DAppKitPrivyProvider
+            privyConfig={{
+                appId: process.env.NEXT_PUBLIC_PRIVY_APP_ID!,
+                clientId: process.env.NEXT_PUBLIC_PRIVY_CLIENT_ID!,
+                loginMethods: ['google', 'twitter'],
+                appearance: {
+                    theme: 'light',
+                    accentColor: '#696FFD',
+                    loginMessage: 'Select a social media profile',
+                    logo: 'https://i.ibb.co/ZHGmq3y/image-21.png',
+                },
+                embeddedWallets: {
+                    createOnLogin: 'all-users',
+                },
+                ecosystemAppsID: [
+                    'clxdoatq601h35inz6qykgmai',
+                    'clz41gcg00e4ay75dmq3uzzgr',
+                ],
+            }}
+            feeDelegationConfig={{
+                delegatorUrl: 'https://sponsor.vechain.energy/by/749',
+                delegateAllTransactions: true,
+            }}
+            dappKitConfig={{
+                nodeUrl: 'https://node.vechain.energy',
+                genesis: {
+                    number: 0,
+                    id: '0x00000000851caf3cfdb6e899cf5958bfb1ac3413d346d43539627e6be7ec1b4a',
+                    size: 170,
+                    parentID:
+                        '0xffffffff53616c757465202620526573706563742c20457468657265756d2100',
+                    timestamp: 1530316800,
+                    gasLimit: 10000000,
+                    beneficiary: '0x0000000000000000000000000000000000000000',
+                    gasUsed: 0,
+                    totalScore: 0,
+                    txsRoot:
+                        '0x45b0cfc220ceec5b7c1c62c4d4193d38e4eba48e8815729ce75f9c0ab0e4c1c0',
+                    txsFeatures: 0,
+                    stateRoot:
+                        '0x09bfdf9e24dd5cd5b63f3c1b5d58b97ff02ca0490214a021ed7d99b93867839c',
+                    receiptsRoot:
+                        '0x45b0cfc220ceec5b7c1c62c4d4193d38e4eba48e8815729ce75f9c0ab0e4c1c0',
+                    signer: '0x0000000000000000000000000000000000000000',
+                    isTrunk: true,
+                    transactions: [],
+                },
+                themeMode: 'LIGHT',
+                walletConnectOptions: {
+                    projectId:
+                        process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID!,
+                    metadata: {
+                        name: 'Your App',
+                        description: 'Your app description',
+                        url:
+                            typeof window !== 'undefined'
+                                ? window.location.origin
+                                : '',
+                        icons: [
+                            typeof window !== 'undefined'
+                                ? `${window.location.origin}/images/logo/my-dapp.png`
+                                : '',
+                        ],
+                    },
+                },
+            }}
+        >
+            {children}
+        </DAppKitPrivyProvider>
+    );
+}
diff --git a/examples/sample-privy-next-app/src/app/constants.ts b/examples/sample-privy-next-app/src/app/constants.ts
@@ -0,0 +1,28 @@
+import { Interface } from 'ethers';
+
+export const b3trMainnetAddress = '0x5ef79995FE8a89e0812330E4378eB2660ceDe699';
+export const b3trTestnetAddress = '0xbf64cf86894Ee0877C4e7d03936e35Ee8D8b864F';
+export const b3trAbi = new Interface([
+    // Replace this with your actual transfer function ABI
+    {
+        inputs: [
+            {
+                name: 'recipient',
+                type: 'address',
+            },
+            {
+                name: 'amount',
+                type: 'uint256',
+            },
+        ],
+        name: 'transfer',
+        outputs: [
+            {
+                name: '',
+                type: 'bool',
+            },
+        ],
+        stateMutability: 'nonpayable',
+        type: 'function',
+    },
+]);
diff --git a/examples/sample-privy-next-app/src/app/fonts/GeistMonoVF.woff b/examples/sample-privy-next-app/src/app/fonts/GeistMonoVF.woff
diff --git a/examples/sample-privy-next-app/src/app/fonts/GeistVF.woff b/examples/sample-privy-next-app/src/app/fonts/GeistVF.woff
diff --git a/examples/sample-privy-next-app/src/app/globals.css b/examples/sample-privy-next-app/src/app/globals.css
@@ -0,0 +1,23 @@
+body {
+  margin: 0;
+  display: flex;
+  height: 100vh;
+  align-items: center;
+  justify-content: center;
+}
+h2 {
+  margin: 0;
+}
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #000;
+  border-radius: 20px;
+  padding: 20px;
+}
+.label {
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
diff --git a/examples/sample-privy-next-app/src/app/layout.tsx b/examples/sample-privy-next-app/src/app/layout.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import './globals.css';
+import dynamic from 'next/dynamic';
+
+const SocialLoginWrapper = dynamic(
+    async () =>
+        (await import('./components/SocialLoginWrapper')).SocialLoginWrapper,
+    {
+        ssr: false,
+    },
+);
+
+export default function RootLayout({
+    children,
+}: Readonly<{
+    children: React.ReactNode;
+}>) {
+    return (
+        <html lang="en" suppressHydrationWarning={true}>
+            <head>
+                <title>Privy Next JS</title>
+            </head>
+            <body>
+                <SocialLoginWrapper>{children}</SocialLoginWrapper>
+            </body>
+        </html>
+    );
+}
diff --git a/examples/sample-privy-next-app/src/app/page.tsx b/examples/sample-privy-next-app/src/app/page.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import React from "react";
+
+const Homepage = dynamic(() => import('./pages/homepage'), {
+    ssr: false,
+});
+
+export default function Page() {
+    return (
+        <Homepage />
+    );
+}