@getpara/cli 2.15.0

package/templates/nextjs/src/components/layout/Header.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { useModal, useAccount, useWallet } from "@getpara/react-sdk";
+
+export function Header() {
+  const { openModal } = useModal();
+  const { isConnected } = useAccount();
+  const { data: wallet } = useWallet();
+
+  const handleConnectClick = () => {
+    openModal();
+  };
+
+  return (
+    <header className="border-b border-gray-200 bg-white">
+      <div className="container mx-auto px-4 py-4 flex justify-between items-center">
+        <div className="flex items-center gap-2">
+          <span className="font-semibold text-lg">{{appName}}</span>
+        </div>
+
+        <div className="flex items-center gap-4">
+          {isConnected && wallet?.address ? (
+            <div className="flex items-center gap-2">
+              <span className="text-sm text-gray-600 font-mono">
+                {wallet.address.slice(0, 6)}...{wallet.address.slice(-4)}
+              </span>
+              <button
+                onClick={handleConnectClick}
+                className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-none hover:bg-gray-200 transition-colors">
+                Manage
+              </button>
+            </div>
+          ) : (
+            <button
+              onClick={handleConnectClick}
+              className="px-4 py-2 text-sm font-medium text-white bg-black rounded-none hover:bg-gray-800 transition-colors">
+              Connect
+            </button>
+          )}
+        </div>
+      </div>
+    </header>
+  );
+}

package/templates/nextjs/src/components/ui/ConnectCard.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+interface ConnectCardProps {
+  onConnect: () => void;
+}
+
+export function ConnectCard({ onConnect }: ConnectCardProps) {
+  return (
+    <div className="max-w-md mx-auto text-center">
+      <div className="border border-gray-200 rounded-none p-8">
+        <h2 className="text-xl font-semibold mb-4">Connect Your Wallet</h2>
+        <p className="text-gray-600 mb-6">
+          Connect your wallet to sign messages and interact with the app.
+        </p>
+        <button
+          onClick={onConnect}
+          data-testid="auth-connect-button"
+          className="w-full px-6 py-3 text-white bg-black rounded-none hover:bg-gray-800 transition-colors font-medium">
+          Connect with Para
+        </button>
+      </div>
+    </div>
+  );
+}

package/templates/nextjs/src/components/ui/SignMessage.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+interface SignMessageProps {
+  message: string;
+  onSign: () => void;
+  isPending: boolean;
+  error: Error | null;
+  signature?: string;
+}
+
+export function SignMessage({
+  message,
+  onSign,
+  isPending,
+  error,
+  signature,
+}: SignMessageProps) {
+  return (
+    <div className="rounded-none border border-gray-200">
+      <div className="px-6 py-3 bg-gray-50 border-b border-gray-200">
+        <h3 className="text-sm font-medium text-gray-900">Sign Message</h3>
+      </div>
+      <div className="p-6">
+        <div className="mb-4">
+          <p className="text-sm text-gray-500 mb-1">Message to sign</p>
+          <p className="text-lg font-mono text-gray-900">{message}</p>
+        </div>
+
+        <button
+          onClick={onSign}
+          disabled={isPending}
+          className="w-full px-4 py-2 text-white bg-black rounded-none hover:bg-gray-800 transition-colors disabled:bg-gray-400 disabled:cursor-not-allowed font-medium">
+          {isPending ? "Signing..." : "Sign Message"}
+        </button>
+
+        {error && (
+          <div className="mt-4 p-3 bg-red-50 border border-red-200 rounded-none">
+            <p className="text-sm text-red-600">{error.message}</p>
+          </div>
+        )}
+
+        {signature && (
+          <div className="mt-4">
+            <p className="text-sm text-gray-500 mb-1">Signature</p>
+            <p className="text-xs font-mono text-gray-900 break-all bg-gray-50 p-3 rounded-none">
+              {signature}
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/nextjs/src/components/ui/WalletInfo.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { useWallet } from "@getpara/react-sdk";
+
+export function WalletInfo() {
+  const { data: wallet } = useWallet();
+  const address = wallet?.address;
+
+  return (
+    <div className="mb-8 rounded-none border border-gray-200">
+      <div className="px-6 py-3 bg-gray-50 border-b border-gray-200">
+        <h3 className="text-sm font-medium text-gray-900">Connected Wallet</h3>
+      </div>
+      <div className="px-6 py-3">
+        <p className="text-sm text-gray-500">Address</p>
+        <p className="text-lg font-medium text-gray-900 font-mono">
+          {address?.slice(0, 6)}...{address?.slice(-4)}
+        </p>
+      </div>
+    </div>
+  );
+}

package/templates/nextjs/src/hooks/useSignHelloWorld.ts

@@ -0,0 +1,23 @@
+import { useWallet, useSignMessage } from "@getpara/react-sdk";
+
+const HELLO_WORLD_MESSAGE = "Hello World!";
+
+export function useSignHelloWorld() {
+  const { data: wallet } = useWallet();
+  const signMessage = useSignMessage();
+
+  const sign = () =>
+    wallet?.id &&
+    signMessage.signMessage({
+      walletId: wallet.id,
+      messageBase64: btoa(HELLO_WORLD_MESSAGE),
+    });
+
+  return {
+    sign,
+    message: HELLO_WORLD_MESSAGE,
+    isPending: signMessage.isPending,
+    error: signMessage.error,
+    signature: signMessage.data && "signature" in signMessage.data ? signMessage.data.signature : undefined,
+  };
+}

package/templates/nextjs/src/styles/globals.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/templates/nextjs/tsconfig.json

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