create-dubhe 0.1.13 → 1.2.0-pre.51

package/templates/nextjs/aptos-template/public/fail.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 34 34" style="enable-background:new 0 0 34 34;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#D35959;}
+	.st1{fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;}
+</style>
+<circle class="st0" cx="17" cy="17" r="17"/>
+<line class="st1" x1="21" y1="12.8" x2="12.8" y2="21"/>
+<line class="st1" x1="20.9" y1="21" x2="12.7" y2="12.8"/>
+</svg>

package/templates/nextjs/aptos-template/public/successful.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 35 35" style="enable-background:new 0 0 35 35;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#78DB8A;}
+	.st1{fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;}
+</style>
+<circle class="st0" cx="17.5" cy="17.5" r="17.5"/>
+<path class="st1" d="M26,12L15,23l-5-5"/>
+</svg>

package/templates/nextjs/aptos-template/src/components/Animation.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { motion } from 'framer-motion';
+
+// Animation effect for sliding to specified position
+const visible = { opacity: 1, y: 0, transition: { duration: 0.5 } };
+
+const itemVariants = {
+  hidden: { opacity: 0, y: 40 },
+  visible,
+};
+const InertiaTitle = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 100 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, transition: { duration: 1 } }}
+      variants={{
+        visible: {
+          opacity: 1,
+          transition: { duration: 2 },
+        },
+      }}
+      transition={{ type: 'inertia', velocity: 180 }}
+      viewport={{ once: true }}
+    >
+      <div className="w-full">{children}</div>
+    </motion.div>
+  );
+};
+const TweenTitle = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 100 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, transition: { duration: 1 } }}
+      variants={{
+        visible: {
+          opacity: 1,
+          transition: { duration: 2 },
+        },
+      }}
+      transition={{ duration: 1, type: 'tween', delay: 0.01 }}
+      viewport={{ once: true }}
+    >
+      <div className="w-full">{children}</div>
+    </motion.div>
+  );
+};
+
+const Animation = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 100 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, transition: { duration: 1 } }}
+      variants={{
+        visible: {
+          opacity: 1,
+          transition: { duration: 2 },
+        },
+      }}
+      transition={{ type: 'spring', stiffness: 300, delay: 0.01 }}
+      viewport={{ once: true }}
+    >
+      <div className="w-full">{children}</div>
+    </motion.div>
+  );
+};
+
+export { InertiaTitle, Animation, TweenTitle };

package/templates/nextjs/aptos-template/src/components/pop_up_box/index.tsx

@@ -0,0 +1,161 @@
+import { useAtom } from 'jotai';
+import React, { Fragment, useEffect } from 'react';
+import Link from 'next/link';
+import { Dialog, Transition } from '@headlessui/react';
+import { OpenBoxState, SellPopUpBoxState, SellState } from '../../jotai';
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(' ');
+}
+
+// Right side popup box
+const PopUpBox = () => {
+  const [pop_up_boxState, setSop_up_boxState] = useAtom(SellPopUpBoxState);
+  const [pop_up_boxData] = useAtom(SellState);
+  let time;
+  useEffect(() => {
+    clearTimeout(time);
+    if (pop_up_boxState) {
+      time = setTimeout(() => {
+        setSop_up_boxState(false);
+      }, 6000);
+    }
+    const Pop_up_box = document.getElementById('Pop_up_box');
+    Pop_up_box.onmouseover = function () {
+      clearInterval(time);
+    };
+    Pop_up_box.onmouseout = function () {
+      time = setTimeout(() => {
+        setSop_up_boxState(false);
+      }, 3000);
+    };
+  }, [pop_up_boxState]);
+  return (
+    <div
+      id="Pop_up_box"
+      aria-live="assertive"
+      className="pointer-events-none z-50 fixed inset-0 top-12 flex items-end px-4 py-6 sm:items-start sm:p-6 "
+    >
+      <div className="flex w-full flex-col items-center space-y-4 sm:items-end">
+        {/* Notification panel, dynamically insert this into the live region when it needs to be displayed */}
+        <Transition
+          show={pop_up_boxState}
+          as={Fragment}
+          enter="transform ease-out duration-300 transition"
+          enterFrom="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
+          enterTo="translate-y-0 opacity-100 sm:translate-x-0"
+          leave="transition ease-in duration-100"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div
+            className={classNames(
+              pop_up_boxData.state ? 'bg-green-50' : 'bg-red-50',
+              'pointer-events-auto w-full max-w-xs overflow-hidden rounded-lg  ',
+            )}
+          >
+            <div className="p-4">
+              <div className="flex items-center">
+                <img className={pop_up_boxData.state ? 'w-10  mt-1' : 'hidden'} src="/successful.svg" alt="" />
+                <img className={pop_up_boxData.state ? 'hidden' : 'w-10  mt-1'} src="/fail.svg" alt="" />
+                <div className="ml-3 w-0 flex-1 pt-0.5 text-white text-sm">
+                  <p
+                    className={classNames(
+                      pop_up_boxData.state ? 'text-green-800' : 'text-red-800',
+                      'text-sm font-medium ',
+                    )}
+                  >
+                    {pop_up_boxData.type} {classNames(pop_up_boxData.state ? 'success' : 'fail')}
+                  </p>
+                  <p className={pop_up_boxData.state ? 'hidden' : 'mt-1 text-red-800 font-black'}>Please try again</p>
+                  <div className={pop_up_boxData.hash == '' ? 'hidden' : ''}>
+                    <Link
+                      legacyBehavior
+                      href={`https://explorer.sui.io/transaction/${pop_up_boxData.hash}?network=https%3A%2F%2Fwallet-rpc.devnet.sui.io%2F`}
+                      target="_Blank"
+                    >
+                      <a
+                        className={classNames(
+                          pop_up_boxData.state
+                            ? 'bg-green-50 text-green-500 hover:bg-green-100'
+                            : 'bg-red-50 text-red-500 hover:bg-red-100',
+                          'mt-1 underline font-semibold ',
+                        )}
+                        target="_Blank"
+                      >
+                        View on Explorer
+                      </a>
+                    </Link>
+                  </div>
+                </div>
+
+                <div className="-mt-4 flex flex-shrink-0">
+                  <button
+                    type="button"
+                    className={classNames(
+                      pop_up_boxData.state
+                        ? 'bg-green-50 text-green-500 hover:bg-green-100'
+                        : 'bg-red-50 text-red-500 hover:bg-red-100',
+                      'inline-flex rounded-md  p-1.5',
+                    )}
+                    onClick={() => {
+                      setSop_up_boxState(false);
+                    }}
+                  >
+                    <i className="fa fa-times" aria-hidden="true"></i>
+                    <span className="sr-only">Close</span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </div>
+  );
+};
+
+// Loading popup box
+const Loading = () => {
+  const [openLoading, setOpenLoading] = useAtom(OpenBoxState);
+  return (
+    <>
+      <Transition.Root show={openLoading} as={Fragment}>
+        <Dialog as="div" className="relative z-50" onClose={() => false}>
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <div className="fixed inset-0 bg-gray-400 bg-opacity-50 transition-opacity" />
+          </Transition.Child>
+
+          <div className="fixed inset-0 z-10 overflow-y-auto">
+            <div className="flex min-h-full items-center  justify-center p-4 text-center sm:items-center sm:p-0">
+              <Transition.Child
+                as={Fragment}
+                enter="ease-out duration-300"
+                enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                enterTo="opacity-100 translate-y-0 sm:scale-100"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+                leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              >
+                <Dialog.Panel className="">
+                  <div className="animate-spin text-white">
+                    <i className="fa fa-spinner f-spin fa-2x fa-fw"></i>
+                  </div>
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </Dialog>
+      </Transition.Root>
+    </>
+  );
+};
+export { PopUpBox, Loading };

package/templates/nextjs/sui-template/.gitignore_

@@ -0,0 +1,51 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# dubhe 
+contracts/dubhe-framework/.history
+contracts/dubhe-framework/Move.lock
+**/build/
+src/chain/key.ts
+indexer.db
+node_logs
+mprocs.log
+.data/

package/templates/nextjs/sui-template/UPGRADE_NOTES.md

@@ -0,0 +1,88 @@
+# Dubhe NextJS Template Upgrade Notes
+
+## Overview
+This document outlines the major improvements made to the NextJS template based on the latest patterns from the 101 template.
+
+## Major Updates
+
+### 1. New Dependencies Added
+- `@0xobelisk/graphql-client`: Advanced GraphQL client for data querying and subscriptions
+- `@0xobelisk/ecs`: Entity Component System world client for game-oriented data management
+- `viem`: Updated blockchain library for enhanced transaction handling
+
+### 2. New Architecture Components
+
+#### useContract Hook (`src/app/dubhe/useContract.ts`)
+- Centralized contract management with optimized caching
+- Integrated GraphQL client initialization
+- ECS World setup with batch optimization
+- Automatic reconnection on errors
+- Configurable query timeouts and debouncing
+
+### 3. Enhanced Query Logic
+
+#### Dual Client System
+- **ECS Client**: Optimized for game development with component-based architecture
+- **GraphQL Client**: Universal data access with flexible query capabilities
+
+#### Real-time Features
+- Live subscriptions to data changes
+- Automatic UI updates when transactions complete
+- Error handling and reconnection logic
+
+### 4. Improved User Interface
+
+#### Tab-based Navigation
+- Switch between ECS and GraphQL clients
+- Visual indicators for recommended approaches
+- Responsive design with modern styling
+
+#### Advanced Data Querying
+- Component data exploration with entity browsing
+- Resource data querying with filtering
+- Table data inspection with field information
+- Real-time data count display
+
+#### Enhanced UX Features
+- Loading states for all operations
+- Comprehensive error handling
+- Transaction success notifications with explorer links
+- Detailed logging for debugging
+
+### 5. Performance Optimizations
+- Memoized client instances to prevent unnecessary re-renders
+- Batch query optimization for ECS operations
+- Debounced subscriptions to prevent spam
+- Cached component and resource data
+
+## Usage Instructions
+
+1. **Install Dependencies**: The new dependencies are already added to package.json
+2. **Environment Setup**: Configure GraphQL endpoints in your environment variables:
+   ```
+   NEXT_PUBLIC_GRAPHQL_ENDPOINT=http://localhost:4000/graphql
+   NEXT_PUBLIC_GRAPHQL_WS_ENDPOINT=ws://localhost:4000/graphql
+   ```
+3. **Development**: The application now provides two separate client interfaces - use the ECS client for game development scenarios and GraphQL client for general data access.
+
+## Migration Notes
+
+- The old query logic has been completely replaced with the new dual-client system
+- All existing functionality is preserved but with improved performance and capabilities
+- The UI is now more comprehensive and provides better developer experience
+- Real-time subscriptions are now available out of the box
+
+## Benefits
+
+1. **Better Performance**: Optimized queries and caching reduce unnecessary network calls
+2. **Enhanced Developer Experience**: Rich UI provides better insight into data structures
+3. **Future-Proof**: Modern architecture supports both current and upcoming features
+4. **Flexibility**: Choice between ECS and GraphQL clients based on use case
+5. **Reliability**: Improved error handling and automatic reconnection features
+
+## Next Steps
+
+- Test the new functionality in your development environment
+- Explore the component and resource querying features
+- Utilize the real-time subscription capabilities for your application
+- Consider migrating existing query logic to use the new patterns

package/templates/nextjs/sui-template/mprocs.yaml

@@ -0,0 +1,14 @@
+scrollback: 10000
+procs:
+  client:
+    cwd: packages/client
+    shell: pnpm dubhe wait --localnet && pnpm dev
+  graphql:
+    cwd: packages/contracts
+    shell: rm -rf .data/postgres && docker-compose up --remove-orphans
+  contracts:
+    cwd: packages/contracts
+    shell: pnpm dubhe wait --localnet && pnpm setup:localnet
+  node:
+    cwd: packages/contracts
+    shell: pnpm dubhe node --force

package/templates/nextjs/sui-template/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "dubhe-nextjs-template",
+  "version": "1.0.0",
+  "description": "Simple dubhe sui nextjs template",
+  "type": "module",
+  "scripts": {
+    "dev": "mprocs",
+    "lint": "next lint",
+    "lint:fix": "next lint --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "type-check": "tsc --noEmit",
+    "validate": "pnpm lint && pnpm format:check && pnpm type-check"
+  },
+  "dependencies": {
+    "@0xobelisk/sui-cli": "{{dubhe-version}}",
+    "@0xobelisk/sui-client": "{{dubhe-version}}",
+    "@0xobelisk/sui-common": "{{dubhe-version}}",
+    "dotenv": "^16.4.5",
+    "jotai": "^1.7.2",
+    "next": "^15.1.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "sonner": "^1.5.0"
+  },
+  "devDependencies": {
+    "wait-on": "^8.0.3",
+    "mprocs": "^0.7.1",
+    "@eslint/eslintrc": "^3",
+    "@types/node": "^18",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "eslint-config-next": "15.1.6",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.7.2",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "prettier": "3.3.3"
+  },
+  "packageManager": "pnpm@9.12.3",
+  "engines": {
+    "node": "18.x",
+    "pnpm": "9.x"
+  }
+}

package/templates/nextjs/sui-template/packages/client/.gitignore_

@@ -0,0 +1,48 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# dubhe 
+contracts/dubhe/.history
+contracts/dubhe/Move.lock
+**/build/
+src/chain/key.ts
+indexer.db

package/templates/nextjs/sui-template/packages/client/.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": true,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 100,
+  "trailingComma": "none"
+}

package/templates/nextjs/sui-template/packages/client/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "client",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "// Next Environment": "----------------",
+    "build": "next build",
+    "start": "next start",
+    "dev": "pnpm next",
+    "// Utility Commands": "----------------",
+    "lint": "next lint",
+    "lint:fix": "next lint --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "type-check": "tsc --noEmit",
+    "validate": "pnpm lint && pnpm format:check && pnpm type-check",
+    "faucet": "pnpm dubhe faucet --network",
+    "account:gen": "pnpm dubhe generate-key --use-next-public",
+    "check-balance": "pnpm dubhe check-balance --network"
+  },
+  "dependencies": {
+    "@0xobelisk/sui-cli": "{{dubhe-version}}",
+    "@0xobelisk/sui-client": "{{dubhe-version}}",
+    "@0xobelisk/sui-common": "{{dubhe-version}}",
+    "@0xobelisk/graphql-client": "{{dubhe-version}}",
+    "@0xobelisk/ecs": "{{dubhe-version}}",
+    "contracts": "workspace:*",
+    "@mysten/dapp-kit": "0.14.46",
+    "@tanstack/react-query": "^5.17.19",
+    "dotenv": "^16.4.5",
+    "jotai": "^1.7.2",
+    "next": "^15.1.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "sonner": "^1.5.0",
+    "viem": "2.21.19"
+  },
+  "devDependencies": {
+    "wait-on": "^8.0.3",
+    "mprocs": "^0.7.1",
+    "@eslint/eslintrc": "^3",
+    "@types/node": "^18",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "eslint-config-next": "15.1.6",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.7.2",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "prettier": "3.3.3"
+  }
+}

package/templates/nextjs/sui-template/packages/client/src/app/dubhe/useContract.ts

@@ -0,0 +1,67 @@
+import { NETWORK, PACKAGE_ID } from 'contracts/deployment';
+import dubheMetadata from 'contracts/dubhe.config.json';
+import metadata from 'contracts/metadata.json';
+import { Dubhe, SuiMoveNormalizedModules } from '@0xobelisk/sui-client';
+import { createDubheGraphqlClient } from '@0xobelisk/graphql-client';
+import { createECSWorld } from '@0xobelisk/ecs';
+import { useMemo } from 'react';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+export function useContract() {
+  // Cache Dubhe contract instance
+  const contract = useMemo(() => {
+    console.log('🔧 Creating Dubhe contract instance...');
+    return new Dubhe({
+      networkType: NETWORK,
+      packageId: PACKAGE_ID,
+      metadata: metadata as SuiMoveNormalizedModules,
+      secretKey: process.env.NEXT_PUBLIC_PRIVATE_KEY
+    });
+  }, []);
+
+  // Cache GraphQL client instance
+  const graphqlClient = useMemo(() => {
+    console.log('🔧 Creating GraphQL client...');
+    return createDubheGraphqlClient({
+      endpoint: process.env.NEXT_PUBLIC_GRAPHQL_ENDPOINT || 'http://localhost:4000/graphql',
+      subscriptionEndpoint:
+        process.env.NEXT_PUBLIC_GRAPHQL_WS_ENDPOINT || 'ws://localhost:4000/graphql',
+      dubheMetadata
+    });
+  }, []);
+
+  // Cache ECS World instance
+  const ecsWorld = useMemo(() => {
+    console.log('🔧 Creating ECS World...');
+    return createECSWorld(graphqlClient, {
+      queryConfig: {
+        enableBatchOptimization: true, // Enable batch query optimization
+        defaultCacheTimeout: 5000 // 5 second cache timeout
+      },
+      subscriptionConfig: {
+        defaultDebounceMs: 100, // 100ms debounce
+        reconnectOnError: true // Auto-reconnect on error
+      }
+    });
+  }, [graphqlClient]);
+
+  // Cache address (avoid recalculating each time)
+  const address = useMemo(() => {
+    return contract.getAddress();
+  }, [contract]);
+
+  return useMemo(
+    () => ({
+      contract,
+      graphqlClient,
+      ecsWorld,
+      metadata,
+      network: NETWORK,
+      packageId: PACKAGE_ID,
+      address
+    }),
+    [contract, graphqlClient, ecsWorld, address]
+  );
+}

package/templates/nextjs/sui-template/packages/client/src/app/layout.tsx

@@ -0,0 +1,38 @@
+import type { Metadata } from 'next';
+import { Geist, Geist_Mono } from 'next/font/google';
+import { Providers } from './providers';
+
+import './globals.css';
+import '@mysten/dapp-kit/dist/index.css';
+
+const geistSans = Geist({
+  variable: '--font-geist-sans',
+  subsets: ['latin']
+});
+
+const geistMono = Geist_Mono({
+  variable: '--font-geist-mono',
+  subsets: ['latin']
+});
+
+export const metadata: Metadata = {
+  title: 'sui nextjs template',
+  description: 'Generated by create dubhe'
+};
+
+export default function RootLayout({
+  children
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        suppressHydrationWarning
+      >
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}