feat: add react-kit to ZeroDev example app (#164)

Author: OmarBasem

apps/zerodev-signer-demo/package.json

@@ -16,6 +16,7 @@
     "@zerodev/sdk": "^5.0.0",
     "@zerodev/wallet-core": "workspace:*",
     "@zerodev/wallet-react": "workspace:*",
+    "@zerodev/wallet-react-kit": "workspace:*",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.545.0",

apps/zerodev-signer-demo/src/app/dashboard/page.tsx

@@ -3,6 +3,7 @@
 
 import { useQuery } from "@tanstack/react-query";
 import { useAuthenticators } from "@zerodev/wallet-react";
+import { SignatureRequest } from "@zerodev/wallet-react-kit";
 import {
   Check,
   Copy,
@@ -69,7 +70,7 @@ export default function DashboardPage() {
       retry: false,
     }
   )
-  
+
   useEffect(() => {
     const loadBalance = async () => {
       if (address && isAddress(address)) {
@@ -135,6 +136,7 @@ export default function DashboardPage() {
     <>
       <ExportWalletModal isOpen={showExportModal} onClose={() => setShowExportModal(false)} />
       <ExportPrivateKeyModal isOpen={showExportPrivateKeyModal} onClose={() => setShowExportPrivateKeyModal(false)} />
+      <SignatureRequest className='absolute right-0 top-20 w-[400px] h-[600px]' />
       <div className="min-h-screen bg-white">
         {/* Header */}
         <header className="bg-white border-b border-gray-100">

apps/zerodev-signer-demo/src/app/globals.css

@@ -1,4 +1,6 @@
 @import "tailwindcss";
+@config "../../../../packages/react-kit/tailwind.config.ts";
+@source "../../../../packages/react-kit/src";
 
 :root {
   --background: #ffffff;
@@ -12,13 +14,6 @@
   --font-mono: var(--font-geist-mono);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
 body {
   background: var(--background);
   color: var(--foreground);