create-dubhe 0.1.6 → 0.1.8

package/template/nextjs/aptos-template/src/components/header/index.tsx

@@ -1,173 +1,159 @@
-import Link from "next/link";
-import {useState} from "react";
-import { Popover } from '@headlessui/react'
-import { AnimatePresence, motion } from 'framer-motion'
-import * as React from "react";
+import Link from 'next/link';
+import { useState } from 'react';
+import { Popover } from '@headlessui/react';
+import { AnimatePresence, motion } from 'framer-motion';
+import * as React from 'react';
 
 function classNames(...classes) {
-    return classes.filter(Boolean).join(' ')
+  return classes.filter(Boolean).join(' ');
 }
 
 function MenuIcon(props) {
-    return (
-        <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" {...props}>
-            <path
-                d="M5 6h14M5 18h14M5 12h14"
-                strokeWidth={2}
-                strokeLinecap="round"
-                strokeLinejoin="round"
-            />
-        </svg>
-    )
+  return (
+    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" {...props}>
+      <path d="M5 6h14M5 18h14M5 12h14" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
 }
 
 function ChevronUpIcon(props) {
-    return (
-        <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" {...props}>
-            <path
-                d="M17 14l-5-5-5 5"
-                strokeWidth={2}
-                strokeLinecap="round"
-                strokeLinejoin="round"
-            />
-        </svg>
-    )
+  return (
+    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" {...props}>
+      <path d="M17 14l-5-5-5 5" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
 }
 
-
-const  Header = () =>{
-    const [scroll,setScroll]=useState(false)
-    const navigation = [
-        {name:"Test1", href:"#test1"},
-        {name:"Test2", href:"#test2"},
-        {name:"Test3", href:"#test3"},
-        // {name:"TEAM", href:"#team"},
-    ]
-
-    if(typeof window !== "undefined"){
-        window.onscroll = function() {myFunction()};
-    }
-
-    function myFunction() {
-        if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
-            setScroll(true)
-        } else {
-            setScroll(false)
-        }
+const Header = () => {
+  const [scroll, setScroll] = useState(false);
+  const navigation = [
+    { name: 'Test1', href: '#test1' },
+    { name: 'Test2', href: '#test2' },
+    { name: 'Test3', href: '#test3' },
+    // {name:"TEAM", href:"#team"},
+  ];
+
+  if (typeof window !== 'undefined') {
+    window.onscroll = function () {
+      myFunction();
     };
-    const to = (toEl)=>{
-       let  bridge=document.querySelector(toEl);
-       let body =document.body;
-       let height =0;
-       do{
-           height+=bridge.offsetTop;
-           bridge=bridge.offsetParent;
-       }while(bridge!==body)
+  }
 
-       window.scrollTo({
-           top:height,
-           behavior:'smooth'
-       })
-
-   }
-    return (
-        <div className={classNames(scroll?'p-3 backdrop-blur-sm bg-[#2E2E2E]/80':"py-4 ","flex fixed mx-auto z-40 inset-x-0 px-4 sm:px-6 lg:px-8 xl:px-24 2xl:px-56  w-full justify-between transition-all duration-700 ease-in-out  items-center")}>
-            <div className={"relative z-10 items-center flex "}>
-                <Link href="/" legacyBehavior>
-                <a>
-                    <img
-                        className="w-10 h-10 rounded-full flex lg:mr-5"
-                        src="/logo.svg"
-                        alt=""
+  function myFunction() {
+    if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
+      setScroll(true);
+    } else {
+      setScroll(false);
+    }
+  }
+  const to = toEl => {
+    let bridge = document.querySelector(toEl);
+    let body = document.body;
+    let height = 0;
+    do {
+      height += bridge.offsetTop;
+      bridge = bridge.offsetParent;
+    } while (bridge !== body);
+
+    window.scrollTo({
+      top: height,
+      behavior: 'smooth',
+    });
+  };
+  return (
+    <div
+      className={classNames(
+        scroll ? 'p-3 backdrop-blur-sm bg-[#2E2E2E]/80' : 'py-4 ',
+        'flex fixed mx-auto z-40 inset-x-0 px-4 sm:px-6 lg:px-8 xl:px-24 2xl:px-56  w-full justify-between transition-all duration-700 ease-in-out  items-center',
+      )}
+    >
+      <div className={'relative z-10 items-center flex '}>
+        <Link href="/" legacyBehavior>
+          <a>
+            <img className="w-10 h-10 rounded-full flex lg:mr-5" src="/logo.svg" alt="" />
+          </a>
+        </Link>
+        <div className="hidden lg:flex lg:gap-10">
+          {navigation.map(item => (
+            <button
+              key={item.name}
+              onClick={() => {
+                to(item.href);
+              }}
+              className="text-sm lg:text-base font-medium text-white transition duration-700 "
+            >
+              {item.name}
+            </button>
+          ))}
+        </div>
+      </div>
+      <div className="flex items-center  gap-6">
+        <Popover className="lg:hidden">
+          {({ open }) => (
+            <>
+              <Popover.Button
+                className="relative z-10 -m-2 inline-flex items-center rounded-lg stroke-gray-500 p-2 outline-none"
+                aria-label="Toggle site navigation"
+              >
+                {({ open }) => (open ? <ChevronUpIcon className="h-10 w-10" /> : <MenuIcon className="h-10 w-10" />)}
+              </Popover.Button>
+              <AnimatePresence initial={false}>
+                {open && (
+                  <>
+                    <Popover.Overlay
+                      static
+                      as={motion.div}
+                      initial={{ opacity: 0 }}
+                      animate={{ opacity: 1 }}
+                      exit={{ opacity: 0 }}
+                      className="fixed inset-0 z-0 bg-gray-300/60 backdrop-blur"
                     />
-                </a>
-                </Link>
-                <div className="hidden lg:flex lg:gap-10">
-                    {navigation.map((item) => (
-                        <button key={item.name}   onClick={()=>{to(item.href)}}
-                           className="text-sm lg:text-base font-medium text-white transition duration-700 ">
+                    <Popover.Panel
+                      static
+                      as={motion.div}
+                      initial={{ opacity: 0, y: -32 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      exit={{
+                        opacity: 0,
+                        y: -32,
+                        transition: { duration: 0.2 },
+                      }}
+                      className="absolute inset-x-0 top-0 z-0 origin-top rounded-b-2xl  bg-[#2E2E2E] px-6 pb-6 pt-24 shadow-2xl shadow-gray-900/20"
+                    >
+                      <div className="space-y-4 ">
+                        {navigation.map(item => (
+                          <button
+                            key={item.name}
+                            onClick={() => to(item.href)}
+                            className="block text-base leading-7 tracking-tight text-white"
+                          >
                             {item.name}
-                        </button>
-                    ))}
-                </div>
-            </div>
-            <div className="flex items-center  gap-6">
-
-                <Popover className="lg:hidden">
-
-                    {({ open }) => (
-                        <>
-                            <Popover.Button
-                                className="relative z-10 -m-2 inline-flex items-center rounded-lg stroke-gray-500 p-2 outline-none"
-                                aria-label="Toggle site navigation"
-                            >
-
-                                {({ open }) =>
-                                    open ? (
-                                        <ChevronUpIcon className="h-10 w-10" />
-                                    ) : (
-                                        <MenuIcon className="h-10 w-10" />
-                                    )
-                                }
-                            </Popover.Button>
-                            <AnimatePresence initial={false}>
-                                {open && (
-                                    <>
-                                        <Popover.Overlay
-                                            static
-                                            as={motion.div}
-                                            initial={{ opacity: 0 }}
-                                            animate={{ opacity: 1 }}
-                                            exit={{ opacity: 0 }}
-                                            className="fixed inset-0 z-0 bg-gray-300/60 backdrop-blur"
-                                        />
-                                        <Popover.Panel
-                                            static
-                                            as={motion.div}
-                                            initial={{ opacity: 0, y: -32 }}
-                                            animate={{ opacity: 1, y: 0 }}
-                                            exit={{
-                                                opacity: 0,
-                                                y: -32,
-                                                transition: { duration: 0.2 },
-                                            }}
-                                            className="absolute inset-x-0 top-0 z-0 origin-top rounded-b-2xl  bg-[#2E2E2E] px-6 pb-6 pt-24 shadow-2xl shadow-gray-900/20"
-                                        >
-
-                                            <div className="space-y-4 ">
-                                                {navigation.map((item) => (
-                                                    <button key={item.name}  onClick={()=>to(item.href)}
-                                                          className="block text-base leading-7 tracking-tight text-white">
-                                                        {item.name}
-                                                    </button>
-                                                ))}
-                                            </div>
-
-
-                                        </Popover.Panel>
-                                    </>
-                                )}
-                            </AnimatePresence>
-                        </>
-                    )}
-                </Popover>
-
-                <div className="hidden lg:flex gap-4 items-center ">
-                    <Link href="https://discord.gg/ceETxS2eTa" legacyBehavior>
-                        <a target="_blank">
-                        <img className="w-6 " src="discord.svg" alt=""/>
-                        </a>
-                    </Link>
-                    <Link href="https://twitter.com/suirobots" legacyBehavior>
-                        <a target="_blank">
-                        <img className="w-6" src="twitter.svg" alt=""/>
-                        </a>
-                    </Link>
-                </div>
-            </div>
+                          </button>
+                        ))}
+                      </div>
+                    </Popover.Panel>
+                  </>
+                )}
+              </AnimatePresence>
+            </>
+          )}
+        </Popover>
+
+        <div className="hidden lg:flex gap-4 items-center ">
+          <Link href="https://discord.gg/ceETxS2eTa" legacyBehavior>
+            <a target="_blank">
+              <img className="w-6 " src="discord.svg" alt="" />
+            </a>
+          </Link>
+          <Link href="https://twitter.com/suirobots" legacyBehavior>
+            <a target="_blank">
+              <img className="w-6" src="twitter.svg" alt="" />
+            </a>
+          </Link>
         </div>
+      </div>
+    </div>
+  );
+};
 
-    )
-}
-
-export default Header
+export default Header;

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

@@ -1,149 +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";
+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(' ')
+  return classes.filter(Boolean).join(' ');
 }
 
 //右侧弹出框
-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 "
+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="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={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 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>
-    )
-}
+          </div>
+        </Transition>
+      </div>
+    </div>
+  );
+};
 
 //加载弹出框
-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}
-
+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 };