Merge pull request #445 from MeshJS/playground-and-hydra

Playground and hydra

apps/playground/.env.example

@@ -6,4 +6,7 @@ BLOCKFROST_API_KEY_PREPROD=
 DONATE_ADA_ADDRESS=
 DONATE_MESHTOKEN_WALLET=
 
-NEXT_PUBLIC_GOOGLE_ANALYTICS=
+NEXT_PUBLIC_GOOGLE_ANALYTICS=
+
+GOOGLE_SEARCH_API=
+GOOGLE_SEARCH_CX=

apps/playground/src/backend/search.ts

@@ -0,0 +1,18 @@
+import { post } from "./";
+
+export async function searchQuery(query: string) {
+  const googleSearchResults = await post(`google/search`, { query });
+
+  const results: any[] = [];
+
+  for (const result of googleSearchResults.items) {
+    results.push({
+      title: result.title,
+      url: result.link.replace("https://meshjs.dev/", "/"),
+      displayUrl: result.htmlFormattedUrl,
+      snippet: result.htmlSnippet,
+    });
+  }
+
+  return results;
+}

apps/playground/src/components/site/navbar/index.tsx

@@ -26,6 +26,8 @@ export default function Navbar() {
   const [showMobileMenu, setShowMobileMenu] = useState(false);
   const router = useRouter();
 
+  const [query, setQuery] = useState<string>("");
+
   useEffect(() => {
     setIsSSR(false);
   }, []);
@@ -38,6 +40,13 @@ export default function Navbar() {
     setShowMobileMenu(!showMobileMenu);
   }
 
+  function search() {
+    router.push({
+      pathname: "/search",
+      query: { q: query },
+    });
+  }
+
   useEffect(() => {
     function setDarkTheme(bool: boolean) {
       if (bool) {
@@ -75,6 +84,46 @@ export default function Navbar() {
 
           {/* right icons start */}
           <div className="flex items-center lg:order-2">
+            <div id="search-div" className="mr-3 hidden w-full lg:inline-block">
+              <label
+                htmlFor="search-bar"
+                className="sr-only mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+              >
+                Search
+              </label>
+              <div className="relative">
+                <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+                  <svg
+                    className="h-5 w-5 text-gray-500 dark:text-gray-400"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                    ></path>
+                  </svg>
+                </div>
+                <input
+                  type="search"
+                  id="search-bar"
+                  className="focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 block w-full rounded-lg border border-gray-300 bg-gray-50 px-4 py-2 pl-10 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
+                  placeholder="Search"
+                  value={query}
+                  onChange={(e) => setQuery(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      search();
+                    }
+                  }}
+                />
+              </div>
+            </div>
+
             {socials.map((social, i) => {
               return (
                 <Link
@@ -122,6 +171,60 @@ export default function Navbar() {
               !showMobileMenu && "hidden"
             } w-full items-center justify-between lg:order-1 lg:flex lg:w-auto`}
           >
+            <div className="mt-4 flex items-center lg:hidden">
+              <label htmlFor="search-mobile" className="sr-only">
+                Search
+              </label>
+              <div className="relative w-full">
+                <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+                  <svg
+                    className="h-5 w-5 text-gray-500 dark:text-gray-400"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+                      clipRule="evenodd"
+                    ></path>
+                  </svg>
+                </div>
+                <input
+                  type="search"
+                  id="search-mobile"
+                  className="focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 pl-10  text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
+                  placeholder="Search for anything..."
+                  value={query}
+                  onChange={(e) => setQuery(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      search();
+                    }
+                  }}
+                />
+              </div>
+              <button
+                className="bg-primary-700 border-primary-700 hover:bg-primary-800 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 ml-2 inline-flex items-center rounded-lg border p-2.5 text-sm font-medium text-white focus:outline-none focus:ring-4"
+                onClick={() => search()}
+              >
+                <svg
+                  className="mr-2 h-5 w-5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                  ></path>
+                </svg>{" "}
+                Search
+              </button>
+            </div>
             <ul className="mt-4 flex flex-col font-medium lg:mt-0 lg:flex-row lg:space-x-8">
               <MenuItemDropdown title="SDK" items={linksApi} />
               <MenuItemDropdown title="Resources" items={linksResources} />

apps/playground/src/pages/api/blockfrost/[...slug].ts

@@ -1,8 +1,7 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import axios from "axios";
 
-import { bytesToHex, toBytes } from "@meshsdk/common";
-import { fromBytes } from "@meshsdk/core-csl";
+import { toBytes } from "@meshsdk/common";
 
 export default async function handler(
   _req: NextApiRequest,

apps/playground/src/pages/api/google/search.ts

@@ -0,0 +1,17 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import axios from "axios";
+
+export default async function handler(
+  _req: NextApiRequest,
+  _res: NextApiResponse,
+) {
+  try {
+    const query = _req.body.query;
+    const resGoogle = await axios.get(
+      `https://customsearch.googleapis.com/customsearch/v1?key=${process.env.GOOGLE_SEARCH_API}&cx=${process.env.GOOGLE_SEARCH_CX}&num=10&q=${query}`,
+    );
+    _res.status(200).json(resGoogle.data);
+  } catch (error) {
+    _res.status(500).json(error);
+  }
+}

apps/playground/src/pages/apis/txbuilder/common.tsx

@@ -1,6 +1,7 @@
 import { MeshTxBuilder } from "@meshsdk/core";
 
 import { getProvider } from "~/components/cardano/mesh-wallet";
+import Link from "~/components/link";
 
 export function getTxBuilder() {
   const blockchainProvider = getProvider();
@@ -20,8 +21,13 @@ export function Intro() {
   return (
     <>
       <p>
-        The <code>MeshTxBuilder</code> is a powerful low-level APIs that allows
-        you to build and sign transactions.
+        In the code snippet, you will find <code>txBuilder</code>, which is an
+        instance of <code>MeshTxBuilder</code>, a powerful low-level APIs that
+        allows you to build transactions. Learn how to initialize{" "}
+        <Link href="/apis/txbuilder/basics#initializeTxbuilder">
+          <code>MeshTxBuilder</code>
+        </Link>
+        .
       </p>
     </>
   );

apps/playground/src/pages/apis/txbuilder/governance/registration.tsx

@@ -42,15 +42,8 @@ function Left() {
   codeAnchor += `const anchorUrl = "https://meshjs.dev/governance/meshjs.jsonld";\n`;
   codeAnchor += `const anchorHash = await getMeshJsonHash(anchorUrl);\n`;
 
-  let codeUtxo = ``;
-  codeUtxo += `// get utxo to pay for the registration\n`;
-  codeUtxo += `const utxos = await wallet.getUtxos();\n`;
-  codeUtxo += `const registrationFee = "500000000";\n`;
-  codeUtxo += `const assetMap = new Map<Unit, Quantity>();\n`;
-  codeUtxo += `assetMap.set("lovelace", registrationFee);\n`;
-  codeUtxo += `const selectedUtxos = keepRelevant(assetMap, utxos);\n`;
-
   let codeTx = ``;
+  codeTx += `const utxos = await wallet.getUtxos();\n`;
   codeTx += `const changeAddress = await wallet.getChangeAddress();\n`;
   codeTx += `\n`;
   codeTx += `txBuilder\n`;
@@ -109,16 +102,12 @@ function Left() {
         anchor from the given URL and returns the hash of the anchor.
       </p>
       <Codeblock data={codeAnchor} />
-      <p>
-        Then, we select the UTxOs to pay for the registration. According to the
-        current protocol parameters, the deposit for registering a DRep is 500
-        ADA.
-      </p>
-      <Codeblock data={codeUtxo} />
       <p>
         We can now build the transaction by adding the DRep registration
         certificate to the transaction. We also need to add the change address
-        and the selected UTxOs to the transaction.
+        and the selected UTxOs to the transaction. Note that the deposit for
+        registering a DRep is 500 ADA, we would set 505 ADA as UTxO selection
+        threshold.
       </p>
       <Codeblock data={codeTx} />
       <p>
@@ -163,21 +152,17 @@ function Right() {
         anchorDataHash: anchorHash,
       };
     }
-    
+
     // get utxo to pay for the registration
     const utxos = await wallet.getUtxos();
-    const registrationFee = "500000000";
-    const assetMap = new Map<Unit, Quantity>();
-    assetMap.set("lovelace", registrationFee);
-    const selectedUtxos = keepRelevant(assetMap, utxos);
 
     const changeAddress = await wallet.getChangeAddress();
 
     const txBuilder = getTxBuilder();
     txBuilder
       .drepRegistrationCertificate(dRepId, anchor)
       .changeAddress(changeAddress)
-      .selectUtxosFrom(selectedUtxos);
+      .selectUtxosFrom(utxos, "keepRelevant", "505000000");
 
     const unsignedTx = await txBuilder.complete();
     const signedTx = await wallet.signTx(unsignedTx);
@@ -194,11 +179,6 @@ function Right() {
   codeSnippet += `\n`;
   codeSnippet += `// get utxo to pay for the registration\n`;
   codeSnippet += `const utxos = await wallet.getUtxos();\n`;
-  codeSnippet += `const registrationFee = "500000000";\n`;
-  codeSnippet += `const assetMap = new Map<Unit, Quantity>();\n`;
-  codeSnippet += `assetMap.set("lovelace", registrationFee);\n`;
-  codeSnippet += `const selectedUtxos = keepRelevant(assetMap, utxos);\n`;
-  codeSnippet += `\n`;
   codeSnippet += `const changeAddress = await wallet.getChangeAddress();\n`;
   codeSnippet += `\n`;
   codeSnippet += `txBuilder\n`;
@@ -207,7 +187,7 @@ function Right() {
   codeSnippet += `    anchorDataHash: anchorHash,\n`;
   codeSnippet += `  })\n`;
   codeSnippet += `  .changeAddress(changeAddress)\n`;
-  codeSnippet += `  .selectUtxosFrom(selectedUtxos);\n`;
+  codeSnippet += `  .selectUtxosFrom(utxos, "keepRelevant", "505000000");\n`;
   codeSnippet += `\n`;
   codeSnippet += `const unsignedTx = await txBuilder.complete();\n`;
   codeSnippet += `const signedTx = await wallet.signTx(unsignedTx);\n`;