create-dubhe 0.0.1

package/template/nextjs/sui-template/src/jotai/index.tsx

@@ -0,0 +1,13 @@
+import {atom} from "jotai";
+
+const SellPopUpBoxState = atom(false)
+const SellState = atom({
+    type:"",
+    hash:"",
+    state:false
+})
+const OpenBoxState = atom(false)
+const Value = atom("")
+
+
+export {SellPopUpBoxState,SellState,OpenBoxState,Value}

package/template/nextjs/sui-template/src/pages/_app.tsx

@@ -0,0 +1,32 @@
+import 'tailwindcss/tailwind.css';
+import type { AppProps } from 'next/app';
+import '../css/font-awesome.css';
+import '@mysten/dapp-kit/dist/index.css';
+
+import { createNetworkConfig, SuiClientProvider, WalletProvider } from '@mysten/dapp-kit';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { getFullnodeUrl } from '@mysten/sui/client';
+import { NETWORK } from '../chain/config';
+
+// Config options for the networks you want to connect to
+const { networkConfig } = createNetworkConfig({
+  localnet: { url: getFullnodeUrl('localnet') },
+  devnet: { url: getFullnodeUrl('devnet') },
+  testnet: { url: getFullnodeUrl('testnet') },
+  mainnet: { url: getFullnodeUrl('mainnet') },
+});
+const queryClient = new QueryClient();
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <SuiClientProvider networks={networkConfig} defaultNetwork={NETWORK}>
+        <WalletProvider>
+          <Component {...pageProps} />
+        </WalletProvider>
+      </SuiClientProvider>
+    </QueryClientProvider>
+  );
+}
+
+export default MyApp;

package/template/nextjs/sui-template/src/pages/home/index.tsx

@@ -0,0 +1,147 @@
+import { loadMetadata, Dubhe, Transaction, DevInspectResults } from '@0xobelisk/sui-client';
+import { useEffect, useState } from 'react';
+import { useAtom } from 'jotai';
+import { Value } from '../../jotai';
+import { useRouter } from 'next/router';
+import { Counter_Object_Id, NETWORK, PACKAGE_ID } from '../../chain/config';
+import { ConnectButton, useCurrentWallet, useSignAndExecuteTransaction, useCurrentAccount } from '@mysten/dapp-kit';
+
+/**
+ * Home component for the counter application
+ * Manages the counter state, user balance, and interactions with the Sui blockchain
+ */
+const Home: React.FC = () => {
+  const router = useRouter();
+  const { mutateAsync: signAndExecuteTransaction } = useSignAndExecuteTransaction();
+  const { connectionStatus } = useCurrentWallet();
+  const address = useCurrentAccount()?.address;
+
+  const [value, setValue] = useAtom(Value);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [balance, setBalance] = useState<string>('0');
+
+  /**
+   * Queries the current counter value from the blockchain
+   */
+  const queryCounter = async (): Promise<void> => {
+    try {
+      const metadata = await loadMetadata(NETWORK, PACKAGE_ID);
+      const dubhe = new Dubhe({
+        networkType: NETWORK,
+        packageId: PACKAGE_ID,
+        metadata: metadata,
+      });
+      const tx = new Transaction();
+      console.log('Counter Object ID:', Counter_Object_Id);
+      const queryValue = (await dubhe.query.counter_system.get(tx, [
+        tx.object(Counter_Object_Id),
+      ])) as DevInspectResults;
+      console.log('Counter value:', dubhe.view(queryValue)[0]);
+      setValue(dubhe.view(queryValue)[0]);
+    } catch (error) {
+      console.error('Failed to query counter:', error);
+    }
+  };
+
+  /**
+   * Fetches the current balance of the connected wallet
+   */
+  const getBalance = async (): Promise<void> => {
+    if (!address) return;
+    try {
+      const dubhe = new Dubhe({ networkType: NETWORK });
+      const balance = await dubhe.balanceOf(address);
+      setBalance((Number(balance.totalBalance) / 1_000_000_000).toFixed(4));
+    } catch (error) {
+      console.error('Failed to fetch balance:', error);
+    }
+  };
+
+  /**
+   * Increments the counter on the blockchain
+   */
+  const incrementCounter = async (): Promise<void> => {
+    setLoading(true);
+    try {
+      const metadata = await loadMetadata(NETWORK, PACKAGE_ID);
+      const dubhe = new Dubhe({
+        networkType: NETWORK,
+        packageId: PACKAGE_ID,
+        metadata: metadata,
+      });
+      const tx = new Transaction();
+      await dubhe.tx.counter_system.inc(tx, [tx.object(Counter_Object_Id)], undefined, true);
+      await signAndExecuteTransaction(
+        {
+          transaction: tx.serialize(),
+          chain: `sui:${NETWORK}`,
+        },
+        {
+          onSuccess: async () => {
+            // Wait for a short period before querying the latest data
+            setTimeout(async () => {
+              await queryCounter();
+              await getBalance();
+              setLoading(false);
+            }, 2000); // Wait for 2 seconds before querying, adjust as needed
+          },
+          onError: error => {
+            console.error('Transaction failed:', error);
+            setLoading(false);
+          },
+        },
+      );
+    } catch (error) {
+      console.error('Transaction error:', error);
+      setLoading(false);
+    }
+  };
+
+  // Initialize counter and balance when the component mounts and wallet is connected
+  useEffect(() => {
+    if (router.isReady && address) {
+      queryCounter();
+      getBalance();
+    }
+  }, [router.isReady, address]);
+
+  return (
+    <div className="flex justify-between items-start">
+      <div className="max-w-7xl mx-auto text-center py-12 px-4 sm:px-6 lg:py-16 lg:px-8 flex-6">
+        {connectionStatus !== 'connected' ? (
+          <ConnectButton />
+        ) : (
+          <>
+            <div>
+              <ConnectButton />
+              <div className="mt-4 text-lg">
+                {Number(balance) === 0 ? (
+                  <span className="text-red-500">Balance is 0. Please acquire some {NETWORK} tokens first.</span>
+                ) : (
+                  <span>Balance: {balance} SUI</span>
+                )}
+              </div>
+            </div>
+            <div className="flex flex-col gap-6 mt-12">
+              <div className="flex flex-col gap-4">
+                <div className="flex flex-col gap-6 text-2xl text-green-600 mt-6">Counter: {value}</div>
+                <div className="flex flex-col gap-6">
+                  <button
+                    type="button"
+                    className="mx-auto px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 disabled:bg-gray-400"
+                    onClick={incrementCounter}
+                    disabled={loading || Number(balance) === 0}
+                  >
+                    {loading ? 'Processing...' : 'Increment'}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Home;

package/template/nextjs/sui-template/src/pages/index.tsx

@@ -0,0 +1,15 @@
+import type { NextPage } from 'next';
+import Home from "./home";
+
+
+const IndexPage: NextPage = () => {
+  return (
+      <main>
+          <Home/>
+      </main>
+  )
+}
+
+export default IndexPage
+
+

package/template/nextjs/sui-template/tailwind.config.js

@@ -0,0 +1,56 @@
+const defaultTheme = require('tailwindcss/defaultTheme')
+
+module.exports = {
+
+    content: ['./src/**/*.{js,ts,jsx,tsx}'],
+    darkMode: 'media', // or 'media' or 'class'
+    theme: {
+        extend: {
+            spacing: {
+                "70":"17rem",
+                '78':'18rem',
+                '82': '20rem',
+                '90': '22rem',
+                '93': '23rem',
+                '97': '25rem',
+                '98': '27rem',
+                '99': "30rem",
+                "new":"34rem",
+                "new-1":"39rem",
+                "100":"43rem",
+                "105":"46rem",
+                "106":"48rem",
+            },
+            colors: {
+                transparent: 'transparent',
+                current: 'currentColor',
+                custom:{
+                    DEFAULT:'#8861D1',
+                    light:"#8861D1",
+                    dark:"#8861D1",
+                }
+
+            },
+            screens: {
+                '3xl': '1700px',
+            },
+            fontFamily: {
+                sans: ['Inter var', ...defaultTheme.fontFamily.sans],
+            },
+
+        },
+
+
+
+    },
+    plugins: [
+
+        require('@tailwindcss/line-clamp'),
+        require('tailwind-scrollbar'),
+    ],
+    variants: {
+        scrollbar: ['rounded']
+    }
+
+}
+

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

@@ -0,0 +1,35 @@
+{
+  "ts-node": {
+    "compilerOptions": {
+      "module": "CommonJS"
+    }
+  },
+  "compilerOptions": {
+    "target": "es6",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}