Update aiken lib

apps/playground/package.json

@@ -21,17 +21,17 @@
     "@next/mdx": "^14.2.3",
     "@next/third-parties": "^14.2.5",
     "copy-to-clipboard": "^3.3.3",
-    "flowbite": "^2.3.0",
+    "flowbite": "^2.5.1",
     "flowbite-react": "^0.9.0",
     "flowbite-typography": "^1.0.3",
+    "json-bigint": "^1.0.0",
     "next": "^14.1.1",
     "persist-and-sync": "^1.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-highlight": "^0.15.0",
     "react-scroll": "^1.9.0",
-    "zustand": "^4.5.4",
-    "json-bigint": "^1.0.0"
+    "zustand": "^4.5.4"
   },
   "devDependencies": {
     "@meshsdk/configs": "*",
@@ -51,4 +51,4 @@
     "typescript": "^5.3.3"
   },
   "prettier": "@meshsdk/configs/prettier"
-}
+}

apps/playground/src/components/button/button-float-documentation.tsx

@@ -0,0 +1,14 @@
+import { DocumentTextIcon } from "@heroicons/react/24/solid";
+
+import Link from "../link";
+import Button from "./button";
+
+export default function ButtonFloatDocumentation({ href }: { href: string }) {
+  return (
+    <Link href={href}>
+      <Button className="fixed bottom-0 left-2 z-30" tooltip="Documentation" style="info">
+        <DocumentTextIcon className="h-5 w-5" />
+      </Button>
+    </Link>
+  );
+}

apps/playground/src/components/button/button.tsx

@@ -4,6 +4,8 @@ export default function Button({
   style,
   onClick,
   disabled,
+  id,
+  tooltip,
 }: {
   children: React.ReactNode;
   className?: string;
@@ -15,8 +17,10 @@ export default function Button({
     | "info"
     | "light"
     | "dark";
-  onClick: () => void;
+  onClick?: () => void;
   disabled?: boolean;
+  id?: string;
+  tooltip?: string;
 }) {
   const styles = {
     primary:
@@ -36,24 +40,32 @@ export default function Button({
   let _style = style && styles[style] ? styles[style] : styles.primary;
 
   if (className) {
-    style += ` ${className}`;
+    _style += ` ${className}`;
   }
 
   if (disabled) {
     _style += ` cursor-not-allowed`;
   }
 
-  style += ` not-format`;
+  _style += ` not-format button-with-tooltip`;
 
   return (
-    <button
-      type="button"
-      className={_style}
-      onClick={onClick}
-      disabled={disabled}
-      aria-label={`button`}
-    >
-      {children}
-    </button>
+    <>
+      <button
+        type="button"
+        className={_style}
+        onClick={onClick}
+        disabled={disabled}
+        aria-label={`button`}
+        id={id}
+      >
+        {children}
+        {tooltip && (
+          <div className="button-with-tooltip-content tooltip invisible absolute z-10 -ml-4 mb-20 inline-block rounded-lg bg-gray-900 px-3 py-2 text-sm font-medium text-white shadow-sm dark:bg-gray-700">
+            {tooltip}
+          </div>
+        )}
+      </button>
+    </>
   );
 }

apps/playground/src/components/layouts/image-header-and-body.tsx

@@ -1,18 +1,23 @@
 import Metatags from "~/components/site/metatags";
 import Markdown from "./markdown";
+import StickySidebar from "./sidebar/sticky-sidebar";
 
 export default function LayoutImageHeaderAndBody({
   children,
   title,
   description,
   image,
   cover,
+  sidebarItems,
+  authors,
 }: {
   children: React.ReactNode;
   title: string;
   description: string;
   image: string;
   cover: string;
+  sidebarItems?: { to: string; label: string }[];
+  authors?: { url: string; image: string; name: string; about: string }[];
 }) {
   return (
     <>
@@ -34,16 +39,21 @@ export default function LayoutImageHeaderAndBody({
           <article className="format format-blue dark:format-invert prose prose-slate w-full max-w-none xl:w-[828px]">
             <Markdown>{children}</Markdown>
           </article>
-          {/* <aside className="hidden xl:block" aria-labelledby="sidebar-label">
-            <div className="xl:w-[336px] sticky top-24">
-              <h3 id="sidebar-label" className="sr-only">
-                Sidebar
-              </h3>
-              <div className="mb-8">
-                <StickySidebar sidebarItems={sidebarItems} authors={authors} />
+          {sidebarItems && (
+            <aside className="hidden xl:block" aria-labelledby="sidebar-label">
+              <div className="sticky top-24 xl:w-[336px]">
+                <h3 id="sidebar-label" className="sr-only">
+                  Sidebar
+                </h3>
+                <div className="mb-8">
+                  <StickySidebar
+                    sidebarItems={sidebarItems}
+                    authors={authors}
+                  />
+                </div>
               </div>
-            </div>
-          </aside> */}
+            </aside>
+          )}
         </div>
       </main>
     </>

apps/playground/src/components/layouts/markdown.tsx

@@ -16,6 +16,7 @@ export default function Markdown({ children }: { children: React.ReactNode }) {
         components={{
           //@ts-ignore
           pre: (props) => <Codeblock data={props.children.props.children} />,
+          h2: (props) => <h2 id={(props.children as string).replace(/[^a-z0-9]/gi, '').toLowerCase()}>{props.children}</h2>,
         }}
       >
         {children}

apps/playground/src/components/layouts/sidebar/sticky-sidebar.tsx

@@ -0,0 +1,97 @@
+import { Link } from "react-scroll";
+
+export default function StickySidebar({
+  sidebarItems,
+  authors,
+}: {
+  sidebarItems: { to: string; label: string }[];
+  authors?: { url: string; image: string; name: string; about: string }[];
+}) {
+  return (
+    <div className="mb-6 hidden lg:w-72 xl:block">
+      <div className="sticky top-20">
+        {authors && (
+          <div className="mb-6 rounded-lg border border-gray-200 p-6 text-gray-500 dark:border-gray-700 dark:text-gray-400">
+            {authors &&
+              authors!.map((author, i) => {
+                return (
+                  <a
+                    href={author.url}
+                    className="mb-4 flex items-center"
+                    target="_blank"
+                    rel="noreferrer"
+                    key={i}
+                  >
+                    <div className="mr-3 shrink-0">
+                      <img
+                        className="mt-1 h-8 w-8 rounded-full"
+                        src={author.image}
+                        alt={author.name}
+                      />
+                    </div>
+                    <div className="mr-3">
+                      <span className="block font-medium text-gray-900 dark:text-white">
+                        {author.name}
+                      </span>
+                      <span className="text-sm">{author.about}</span>
+                    </div>
+                  </a>
+                );
+              })}
+          </div>
+        )}
+
+        <aside aria-labelledby="categories-label">
+          <h3 id="categories-label" className="sr-only">
+            Topics
+          </h3>
+          <nav className="rounded-lg border border-gray-200 p-6 font-medium text-gray-500 dark:border-gray-700 dark:text-gray-400">
+            <ul className="space-y-4">
+              {sidebarItems.map((item, i) => {
+                return (
+                  <li key={i}>
+                    <Link
+                      activeClass="text-primary-600 dark:text-primary-500"
+                      className="cursor-pointer hover:text-black dark:hover:text-white"
+                      to={item.to}
+                      spy={true}
+                      smooth={true}
+                      duration={500}
+                      offset={-80}
+                    >
+                      {item.label}
+                    </Link>
+                  </li>
+                );
+              })}
+            </ul>
+            {/* <h4 className="mb-4 text-gray-900 dark:text-white">Others</h4> */}
+          </nav>
+        </aside>
+        {/* <aside>
+          <div className="flex justify-center items-center mb-3 w-full h-32 bg-gray-100 rounded-lg dark:bg-gray-800">
+            <svg
+              aria-hidden="true"
+              className="w-8 h-8 text-gray-400"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z"
+                clip-rule="evenodd"
+              ></path>
+            </svg>
+          </div>
+          <p className="mb-2 text-sm font-light text-gray-500 dark:text-gray-400">
+            Students and Teachers, save up to 60% on Flowbite Creative Cloud.
+          </p>
+          <p className="text-xs font-light text-gray-400 uppercase dark:text-gray-500">
+            Ads placeholder
+          </p>
+        </aside> */}
+      </div>
+    </div>
+  );
+}

apps/playground/src/pages/apis/transaction/basics/index.tsx

@@ -1,5 +1,6 @@
 import type { NextPage } from "next";
 
+import ButtonFloatDocumentation from "~/components/button/button-float-documentation";
 import SidebarFullwidth from "~/components/layouts/sidebar-fullwidth";
 import TitleIconDescriptionBody from "~/components/sections/title-icon-description-body";
 import Metatags from "~/components/site/metatags";
@@ -66,6 +67,7 @@ const ReactPage: NextPage = () => {
             sending assets and various options to customize the transaction.
           </p>
         </TitleIconDescriptionBody>
+        <ButtonFloatDocumentation href="https://docs.meshjs.dev/transactions/classes/Transaction" />
 
         <TransactionSendLovelace />
         <TransactionSendAssets />

apps/playground/src/pages/apis/transaction/minting/index.tsx

@@ -1,5 +1,6 @@
 import type { NextPage } from "next";
 
+import ButtonFloatDocumentation from "~/components/button/button-float-documentation";
 import SidebarFullwidth from "~/components/layouts/sidebar-fullwidth";
 import TitleIconDescriptionBody from "~/components/sections/title-icon-description-body";
 import Metatags from "~/components/site/metatags";
@@ -44,6 +45,7 @@ const ReactPage: NextPage = () => {
             minting and burning assets.
           </p>
         </TitleIconDescriptionBody>
+        <ButtonFloatDocumentation href="https://docs.meshjs.dev/transactions/classes/Transaction" />
 
         <MintingOneSignature />
         <BurningOneSignature />

apps/playground/src/pages/apis/transaction/smart-contract/index.tsx

@@ -1,5 +1,6 @@
 import type { NextPage } from "next";
 
+import ButtonFloatDocumentation from "~/components/button/button-float-documentation";
 import SidebarFullwidth from "~/components/layouts/sidebar-fullwidth";
 import TitleIconDescriptionBody from "~/components/sections/title-icon-description-body";
 import Metatags from "~/components/site/metatags";
@@ -48,6 +49,7 @@ const ReactPage: NextPage = () => {
             smart contracts.
           </p>
         </TitleIconDescriptionBody>
+        <ButtonFloatDocumentation href="https://docs.meshjs.dev/transactions/classes/Transaction" />
 
         <ContractLockAssets />
         <ContractUnlockAssets />

apps/playground/src/pages/apis/transaction/staking/index.tsx

@@ -1,5 +1,6 @@
 import type { NextPage } from "next";
 
+import ButtonFloatDocumentation from "~/components/button/button-float-documentation";
 import SidebarFullwidth from "~/components/layouts/sidebar-fullwidth";
 import TitleIconDescriptionBody from "~/components/sections/title-icon-description-body";
 import Metatags from "~/components/site/metatags";
@@ -42,6 +43,8 @@ const ReactPage: NextPage = () => {
             staking process.
           </p>
         </TitleIconDescriptionBody>
+        <ButtonFloatDocumentation href="https://docs.meshjs.dev/transactions/classes/Transaction" />
+
         <StakingRegister />
         <StakingDelegate />
         <StakingWithdraw />

apps/playground/src/pages/apis/txbuilder/basics/index.tsx

@@ -1,5 +1,6 @@
 import type { NextPage } from "next";
 
+import ButtonFloatDocumentation from "~/components/button/button-float-documentation";
 import SidebarFullwidth from "~/components/layouts/sidebar-fullwidth";
 import Link from "~/components/link";
 import TitleIconDescriptionBody from "~/components/sections/title-icon-description-body";
@@ -11,11 +12,11 @@ import TxbuilderCip20 from "./cip20";
 import TxbuilderCoinSelection from "./coin-selection";
 import TxbuilderInitializeTxbuilder from "./initialize-txbuilder";
 import TxbuilderMultisig from "./multisig";
+import TxbuilderMultisigNativeScript from "./multisig-native-script";
 import TxbuilderSendValues from "./send-values";
 import TxbuilderSetNetwork from "./set-network";
 import TxbuilderSetRequiredSigners from "./set-required-signers";
 import TxbuilderSetTime from "./set-time";
-import TxbuilderMultisigNativeScript from "./multisig-native-script";
 
 const ReactPage: NextPage = () => {
   const sidebarItems = [
@@ -65,6 +66,7 @@ const ReactPage: NextPage = () => {
             </p>
           </>
         </TitleIconDescriptionBody>
+        <ButtonFloatDocumentation href="https://docs.meshjs.dev/transactions/classes/MeshTxBuilder" />
 
         <TxbuilderInitializeTxbuilder />
         {/* <TxbuilderCommonFunctions /> */}

apps/playground/src/pages/apis/txbuilder/minting/index.tsx

@@ -1,5 +1,6 @@
 import type { NextPage } from "next";
 
+import ButtonFloatDocumentation from "~/components/button/button-float-documentation";
 import SidebarFullwidth from "~/components/layouts/sidebar-fullwidth";
 import TitleIconDescriptionBody from "~/components/sections/title-icon-description-body";
 import Metatags from "~/components/site/metatags";
@@ -47,6 +48,7 @@ const ReactPage: NextPage = () => {
             </p>
           </>
         </TitleIconDescriptionBody>
+        <ButtonFloatDocumentation href="https://docs.meshjs.dev/transactions/classes/MeshTxBuilder" />
 
         <TxbuilderMintAsset />
         <TxbuilderBurningOneSignature />

apps/playground/src/pages/apis/txbuilder/smart-contract/index.tsx

@@ -1,5 +1,6 @@
 import type { NextPage } from "next";
 
+import ButtonFloatDocumentation from "~/components/button/button-float-documentation";
 import SidebarFullwidth from "~/components/layouts/sidebar-fullwidth";
 import TitleIconDescriptionBody from "~/components/sections/title-icon-description-body";
 import Metatags from "~/components/site/metatags";
@@ -53,6 +54,7 @@ const ReactPage: NextPage = () => {
             <Codeblock data={code} />
           </>
         </TitleIconDescriptionBody>
+        <ButtonFloatDocumentation href="https://docs.meshjs.dev/transactions/classes/MeshTxBuilder" />
 
         <TxbuilderContractLockAssets />
         <TxbuilderContractUnlockAssets />