V1.6.5

apps/docs/.eslintrc.js

@@ -0,0 +1,9 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ["@meshsdk/configs/eslint/next.js"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: true,
+  },
+};

apps/docs/next.config.mjs

@@ -3,17 +3,20 @@ const nextConfig = {
   images: {
     remotePatterns: [
       {
-        protocol: 'https',
-        hostname: 'meshjs.dev',
-        port: '',
-        pathname: '/**',
+        protocol: "https",
+        hostname: "meshjs.dev",
+        port: "",
+        pathname: "/**",
       },
     ],
   },
   webpack: (config) => {
     config.resolve.fallback = { fs: false };
     return config;
   },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
 };
 
 export default nextConfig;

apps/docs/package.json

@@ -27,13 +27,15 @@
     "simple-functional-loader": "1.2.1",
     "unist-util-filter": "5.0.1",
     "unist-util-visit": "5.0.0",
-    "uuid": "10.0.0",
+    "uuid": "^10.0.0",
     "zustand": "4.5.2"
   },
   "devDependencies": {
+    "@meshsdk/configs": "*",
     "@types/node": "20.14.2",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
+    "@types/uuid": "^10.0.0",
     "autoprefixer": "10.4.19",
     "postcss": "8.4.38",
     "tailwindcss": "3.4.4",

apps/docs/src/app/[package]/classes/[name]/page.tsx

@@ -23,7 +23,7 @@ export default function Page({ params }: { params: { name: string } }) {
         <Content comment={meshClass.comment} isMain={true} />
         <DefinedIn sources={meshClass.sources} />
 
-        {meshGroup.map((group, i) => {
+        {meshGroup.map((group: any) => {
           return <Group group={group} key={uuidv4()} />;
         })}
       </Prose>

apps/docs/src/components/Code.tsx

@@ -285,7 +285,7 @@ function useTabGroupProps(availableLanguages: Array<string>) {
   let activeLanguage = [...availableLanguages].sort(
     (a, z) => preferredLanguages.indexOf(z) - preferredLanguages.indexOf(a)
   )[0];
-  let languageIndex = availableLanguages.indexOf(activeLanguage);
+  let languageIndex = availableLanguages.indexOf(activeLanguage!);
   let newSelectedIndex = languageIndex === -1 ? selectedIndex : languageIndex;
   if (newSelectedIndex !== selectedIndex) {
     setSelectedIndex(newSelectedIndex);
@@ -299,7 +299,7 @@ function useTabGroupProps(availableLanguages: Array<string>) {
     selectedIndex,
     onChange: (newSelectedIndex: number) => {
       preventLayoutShift(() =>
-        addPreferredLanguage(availableLanguages[newSelectedIndex])
+        addPreferredLanguage(availableLanguages[newSelectedIndex]!)
       );
     },
   };

apps/docs/src/components/Logo.tsx

@@ -8,8 +8,8 @@ export function Logo(props: React.ComponentPropsWithoutRef<'svg'>) {
       <Image
         src={
           theme == 'light'
-            ? 'https://meshjs.dev/logo-mesh/black/logo-mesh-black-32x32.png'
-            : 'https://meshjs.dev/logo-mesh/white/logo-mesh-white-32x32.png'
+            ? 'https://meshjs.dev/logos/black/logo-mesh-black-32x32.png'
+            : 'https://meshjs.dev/logos/white/logo-mesh-white-32x32.png'
         }
         alt="Mesh SDK Docs"
         width={32}

apps/docs/src/components/SectionProvider.tsx

@@ -76,7 +76,7 @@ function useVisibleSections(sectionStore: StoreApi<SectionState>) {
         sectionIndex < sections.length;
         sectionIndex++
       ) {
-        let { id, headingRef, offsetRem = 0 } = sections[sectionIndex]
+        let { id, headingRef, offsetRem = 0 } = sections[sectionIndex]!
 
         if (!headingRef?.current) {
           continue

apps/docs/tsconfig.json

@@ -1,28 +1,16 @@
 {
+  "extends": "@meshsdk/configs/typescript/nextjs.json",
   "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
     "paths": {
       "@/*": ["./src/*"]
-    },
-    "noImplicitAny": false,
-    "strictNullChecks": false,
+    }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "next-env.d.ts",
+    "next.config.js",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
   "exclude": ["node_modules"]
 }

apps/playground/src/components/layouts/sidebar/index.tsx

@@ -10,7 +10,7 @@ export default function Sidebar({
     <div className="mb-6 mr-6 hidden lg:w-72 xl:block">
       <div className="sticky top-24">
         <aside>
-          <nav className="overflow-y-auto rounded-lg border border-gray-200 p-6 font-medium text-gray-500 dark:border-gray-700 dark:text-gray-400 h-96">
+          <nav className="overflow-y-auto rounded-lg border border-gray-200 p-6 font-medium text-gray-500 dark:border-gray-700 dark:text-gray-400 max-h-96">
             <ul className="space-y-4">
               {sidebarItems.map((item, i) => {
                 return (

apps/playground/src/data/cardano.ts

@@ -5,9 +5,9 @@ export const demoAddresses = {
   mainnet: "addr1v9vx0sacufuypa2k4sngk7q40zc5c4npl337uusdh64kv0c93pyfx",
   testnet: "addr_test1vpvx0sacufuypa2k4sngk7q40zc5c4npl337uusdh64kv0c7e4cxr",
   testnetPayment:
-    "addr_test1qzl2r3fpmav0fmh0vrry0e0tmzxxqwv32sylnlty2jj8dwg636sfudakhsh65qggs4ttjjsk8fuu3fkd65uaxcxv0tfqv3z0y3",
+    "addr_test1qpvx0sacufuypa2k4sngk7q40zc5c4npl337uusdh64kv0uafhxhu32dys6pvn6wlw8dav6cmp4pmtv7cc3yel9uu0nq93swx9",
   testnetStake:
-    "stake_test1uqdgagy7x7mtcta2qyyg244efgtr57wg5mxa2wwnvrx845s4sa2vp",
+    "stake_test1uzw5mnt7g4xjgdqkfa80hrk7kdvds6sa4k0vvgjvlj7w8eskffj2n",
 };
 
 export const demoMnemonic = "solution,".repeat(24).split(",").slice(0, 24);

apps/playground/src/data/links-guides.ts

@@ -18,7 +18,7 @@ export const guidenodejs = {
 };
 export const guideminting = {
   title: "Multi-Signatures Transaction",
-  desc: "Learn about multi-sig transaction, build a minting transaction involving AppWallet and BrowserWallet.",
+  desc: "Learn about multi-sig transaction, build a minting transaction involving MeshWallet and BrowserWallet.",
   link: "/guides/multisig-minting",
   thumbnail: "/guides/multi-signatures-transaction.png",
   image: "/guides/keys-g25a80b203_1280.jpg",

apps/playground/src/pages/apis/txbuilder/basics/build-with-object.tsx

@@ -45,7 +45,7 @@ function Left() {
     <>
       <p>
         One alternative to use the lower level APIs is to build the transaction
-        with an object.
+        with JSON.
       </p>
       <p>
         The following shows a simple example of building a transaction to send
@@ -100,8 +100,8 @@ function Right() {
   code += `const meshTxBody: Partial<MeshTxBuilderBody> = {\n`;
   code += `  outputs: [\n`;
   code += `    {\n`;
-  code += `      address: "addr_test1vpvx0sacufuypa2k4sngk7q40zc5c4npl337uusdh64kv0c7e4cxr",\n`;
-  code += `      amount: [{ unit: "lovelace", quantity: "2000000" }],\n`;
+  code += `      address: "${address}",\n`;
+  code += `      amount: [{ unit: "lovelace", quantity: "${amount}" }],\n`;
   code += `    },\n`;
   code += `  ],\n`;
   code += `  changeAddress: changeAddress,\n`;

apps/playground/src/pages/apis/txbuilder/basics/coin-selection.tsx

@@ -0,0 +1,65 @@
+import Link from "~/components/link";
+import TwoColumnsScroll from "~/components/sections/two-columns-scroll";
+import Codeblock from "~/components/text/codeblock";
+
+export default function TxbuilderCoinSelection() {
+  return (
+    <TwoColumnsScroll
+      sidebarTo="coinSelection"
+      title="Coin selection"
+      leftSection={Left()}
+    />
+  );
+}
+
+function Left() {
+  let code1 = ``;
+  code1 += `txBuilder\n`;
+  code1 += `  .txOut(address, [{ unit: "lovelace", quantity: amount }])\n`;
+  code1 += `  .changeAddress(changeAddress)\n`;
+  code1 += `  .selectUtxosFrom(utxos)\n`;
+  code1 += `  .complete();\n`;
+
+  let codeSignature = ``;
+  codeSignature += `selectUtxosFrom(\n`;
+  codeSignature += `  extraInputs: UTxO[]\n`;
+  codeSignature += `  strategy?: UtxoSelectionStrategy\n`;
+  codeSignature += `  threshold?: string\n`;
+  codeSignature += `  includeTxFees?: boolean\n`;
+  codeSignature += `)\n`;
+
+  return (
+    <>
+      <p>
+        You can select UTxOs from a list of UTxOs using the{" "}
+        <code>selectUtxosFrom</code> method. This method allows you to specify
+        the conditions for selecting UTxOs. The method signature is as follows:
+      </p>
+      <Codeblock data={codeSignature} />
+      <p>
+        The second parameter of <code>selectUtxosFrom</code> is the strategy to
+        be used for selecting UTxOs. There are 4 strategies (
+        <code>UtxoSelectionStrategy</code>) available for selecting UTxOs:
+      </p>
+      <ul>
+        <li>experimental</li>
+        <li>keepRelevant</li>
+        <li>largestFirst</li>
+        <li>largestFirstMultiAsset</li>
+      </ul>
+      <p>
+        We may introduce more strategies in the future. Check the{" "}
+        <Link href="https://docs.meshjs.dev/">Mesh Docs</Link> for more details.
+      </p>
+      <p>
+        The <code>threshold</code> parameter is used to specify the minimum
+        amount of lovelace to be selected. You may specify a larger amount to if
+        the transactions requires it.
+      </p>
+      <p>
+        The last parameter is <code>includeTxFees</code> which is a boolean
+        value to include transaction fees in the selection.
+      </p>
+    </>
+  );
+}

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

@@ -8,6 +8,7 @@ import { metaTxbuilderBasic } from "~/data/links-txbuilders";
 import { Intro } from "../common";
 import TxbuilderBuildWithObject from "./build-with-object";
 import TxbuilderCip20 from "./cip20";
+import TxbuilderCoinSelection from "./coin-selection";
 import TxbuilderInitializeTxbuilder from "./initialize-txbuilder";
 import TxbuilderMultisig from "./multisig";
 import TxbuilderSendValues from "./send-values";
@@ -20,6 +21,7 @@ const ReactPage: NextPage = () => {
     { label: "Send value", to: "sendValue" },
     { label: "Multi-signature", to: "multisig" },
     { label: "Build with object", to: "buildWithObject" },
+    { label: "Coin selection", to: "coinSelection" },
     { label: "Set metadata", to: "cip20" },
     { label: "Set required signers", to: "requiredSigners" },
     { label: "Set time", to: "setTime" },
@@ -66,6 +68,7 @@ const ReactPage: NextPage = () => {
         <TxbuilderMultisig />
         <TxbuilderBuildWithObject />
         {/* <TxbuilderSetMetadata /> */}
+        <TxbuilderCoinSelection />
         <TxbuilderCip20 />
         {/* <TxbuilderSetCollateral /> */}
         <TxbuilderSetRequiredSigners />

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

@@ -1,10 +1,8 @@
 import {
   AppWallet,
   ForgeScript,
-  Mint,
   resolveScriptHash,
   stringToHex,
-  Transaction,
 } from "@meshsdk/core";
 import { useWallet } from "@meshsdk/react";
 
@@ -106,6 +104,7 @@ function Right() {
   codeSnippet += `    words: demoMnemonic,\n`;
   codeSnippet += `  },\n`;
   codeSnippet += `});\n`;
+  codeSnippet += `\n`;
   codeSnippet += `const forgingScript = ForgeScript.withOneSignature(\n`;
   codeSnippet += `  mintingWallet.getPaymentAddress(),\n`;
   codeSnippet += `);\n`;

apps/playground/src/pages/apis/txbuilder/basics/send-values.tsx

@@ -1,5 +1,4 @@
 import { useState } from "react";
-import Link from "~/components/link";
 
 import { useWallet } from "@meshsdk/react";
 

apps/playground/src/pages/apis/txbuilder/minting/minting-plutus-script.tsx

@@ -1,5 +1,4 @@
 import { useState } from "react";
-import Link from "~/components/link";
 
 import {
   mConStr0,
@@ -11,6 +10,7 @@ import {
 import { useWallet } from "@meshsdk/react";
 
 import Input from "~/components/form/input";
+import Link from "~/components/link";
 import InputTable from "~/components/sections/input-table";
 import LiveCodeDemo from "~/components/sections/live-code-demo";
 import TwoColumnsScroll from "~/components/sections/two-columns-scroll";
@@ -72,41 +72,35 @@ function Left(userInput: string) {
         in minting or burning.
       </p>
       <h4>Script of the token</h4>
-      <div className="pl-4">
-        <p className="pl-4">
-          The actual script can be either provided by transaction builder or
-          referenced from an UTxO onchain.
-        </p>
-        <div className="pl-4">
-          <ul>
-            <li>
-              (i) Reference script{` `}
-              <Codeblock
-                data={`.mintTxInReference(txHash: string, txIndex: number)`}
-              />
-            </li>
-            <li>
-              (ii) Supplying script{` `}
-              <Codeblock data={`.mintingScript(scriptCbor: string)`} />
-            </li>
-          </ul>
-          <br />
-        </div>
+      <p>
+        The actual script can be either provided by transaction builder or
+        referenced from an UTxO onchain.
+      </p>
+      <div>
+        <ul>
+          <li>
+            (i) Reference script{` `}
+            <Codeblock
+              data={`.mintTxInReference(txHash: string, txIndex: number)`}
+            />
+          </li>
+          <li>
+            (ii) Supplying script{` `}
+            <Codeblock data={`.mintingScript(scriptCbor: string)`} />
+          </li>
+        </ul>
+        <br />
       </div>
       <h4>Redeemer of the mint</h4>
-      <div className="pl-4">
-        <p className="pl-4">
-          Redeemer can be provided in different{" "}
-          <Link href="/apis/data">data types</Link>. If your MeshTxBuilder does
-          not include an <code>evaluator</code> instance, you can also provide
-          your budget for the unlock with this redeemer endpoint
-        </p>
-        <p className="pl-4">
-          <Codeblock
-            data={`.mintRedeemerValue(redeemer: Data | object | string, type: "Mesh" | "CBOR" | "JSON", exUnits?: Budget)`}
-          />
-        </p>
-      </div>
+      <p>
+        Redeemer can be provided in different{" "}
+        <Link href="/apis/data">data types</Link>. If your MeshTxBuilder does
+        not include an <code>evaluator</code> instance, you can also provide
+        your budget for the unlock with this redeemer endpoint
+      </p>
+      <Codeblock
+        data={`.mintRedeemerValue(redeemer: Data | object | string, type: "Mesh" | "CBOR" | "JSON", exUnits?: Budget)`}
+      />
     </>
   );
 }