Add Privy Provider

examples/sample-privy-next-app/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+    extends: ['next'],
+    rules: {
+        '@typescript-eslint/unbound-method': 'off',
+    },
+};

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

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;

examples/sample-privy-next-app/package.json

@@ -0,0 +1,31 @@
+{
+    "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": "*",
+        "framer-motion": "^11.11.17",
+        "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"
+    }
+}

examples/sample-privy-next-app/src/app/components/SocialLoginWrapper.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import dynamic from 'next/dynamic';
+import { ChakraProvider } from "@chakra-ui/react";
+
+const PrivyProvider = dynamic(
+    async () => (await import('@vechain/dapp-kit-react-privy')).DAppKitPrivyProvider,
+    {
+        ssr: false
+    }
+);
+
+interface Props {
+    children: React.ReactNode;
+}
+
+export function SocialLoginWrapper({ children }: Props) {
+    return (
+        <ChakraProvider>
+            <PrivyProvider
+                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://cleanify.vet/logo/cleanify_green.png",
+                }}
+                embeddedWallets={{
+                    createOnLogin: "all-users",
+                }}
+                smartAccountConfig={{
+                    nodeUrl: "https://node.vechain.energy",
+                    delegatorUrl: "https://delegator.vechain.energy",
+                    accountFactoryAddress: "0x0000000000000000000000000000000000000000",
+                }}
+                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: [],
+                    },
+                    colorMode: "LIGHT",
+                    projectId: process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID!,
+                    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}
+            </PrivyProvider>
+        </ChakraProvider>
+    );
+}

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;
+}

examples/sample-privy-next-app/src/app/layout.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import localFont from "next/font/local";
+import "./globals.css";
+import dynamic from "next/dynamic";
+
+const SocialLoginWrapper = dynamic(async () => (await import('./components/SocialLoginWrapper')).SocialLoginWrapper, {
+  ssr: false
+});
+
+const geistSans = localFont({
+    src: "./fonts/GeistVF.woff",
+    variable: "--font-geist-sans",
+  });
+
+  const geistMono = localFont({
+    src: "./fonts/GeistMonoVF.woff",
+    variable: "--font-geist-mono",
+  });
+
+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>
+    );
+}

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 />
+    );
+}

examples/sample-privy-next-app/src/app/pages/homepage.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { type ReactElement } from 'react';
+import { useDisclosure, Button } from "@chakra-ui/react";
+import {
+    useWalletAdapter,
+    // dappKitModal,
+    ConnectModal,
+} from "@vechain/dapp-kit-react-privy";
+
+const HomePage = (): ReactElement => {
+    const { isConnected, isConnectedWithPrivy, isConnectedWithDappKit, connectedAddress, abstractedAccount, logout } =
+        useWalletAdapter();
+
+    const {
+        isOpen: isLoginOpen,
+        onOpen: onLoginOpen,
+        onClose: onLoginClose,
+    } = useDisclosure();
+    //const isInAppBrowser = window.vechain && window.vechain.isInAppBrowser;
+
+    return (
+        <div className="container">
+            {isConnected ? (
+                <Button onClick={logout}>Disconnect</Button>
+            ) : (
+                <Button onClick={onLoginOpen}>Connect</Button>
+            )}
+
+            {isConnected && (
+                <div>
+                    <p>Connected with Privy: {isConnectedWithPrivy.toString()}</p>
+                    <p>Connected with DappKit: {isConnectedWithDappKit.toString()}</p>
+                    <p>Abstracted Account: {abstractedAccount.embeddedWallet?.address}</p>
+                    <p>Connected Address: {connectedAddress}</p>
+                </div>
+            )}
+
+            <ConnectModal
+                isOpen={isLoginOpen}
+                onClose={onLoginClose}
+                logo={"https://cleanify.vet/logo/cleanify_green.png"}
+            />
+        </div>
+    );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default HomePage;

examples/sample-privy-next-app/tsconfig.json

@@ -0,0 +1,34 @@
+{
+    "compilerOptions": {
+        "target": "es5",
+        "lib": ["dom", "dom.iterable", "esnext"],
+        "allowJs": true,
+        "skipLibCheck": true,
+        "strict": true,
+        "noEmit": true,
+        "esModuleInterop": true,
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "resolveJsonModule": true,
+        "allowImportingTsExtensions": true,
+        "isolatedModules": true,
+        "jsx": "preserve",
+        "incremental": true,
+        "plugins": [
+            {
+                "name": "next"
+            }
+        ],
+        "paths": {
+            "@/*": ["./src/*"]
+        }
+    },
+    "include": [
+        "next-env.d.ts",
+        "**/*.ts",
+        "**/*.tsx",
+        ".next/types/**/*.ts",
+        "dist/types/**/*.ts"
+    ],
+    "exclude": ["node_modules"]
+}

packages/dapp-kit-react-privy/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Vechain
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/dapp-kit-react-privy/eslint.config.mjs

@@ -0,0 +1,17 @@
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config({
+    ignores: ['**/*.config.ts', 'dist/**'],
+    extends: [...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    rules: {
+        '@typescript-eslint/no-explicit-any': 'off',
+        '@typescript-eslint/ban-ts-comment': 'off',
+        'no-console': ['error', { allow: ['error'] }],
+        'eslint-comments/no-unused-disable': 'off',
+        '@typescript-eslint/no-unused-vars': [
+            'error',
+            { argsIgnorePattern: '^_' },
+        ],
+    },
+});