Merge pull request #450 from MeshJS/playground-search

update search and update docs

apps/playground/src/backend/search.ts

@@ -1,18 +1,5 @@
 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;
+  return await post(`google/search`, { query });
 }

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

@@ -6,7 +6,7 @@ import {
 
 export const metaAppwallet = {
   link: `/apis/wallets/appwallet`,
-  title: "App Wallet",
+  title: "App Wallet (deprecated)",
   desc: "Core wallet functionality for building other user wallets and fully customed applications's backend.",
   icon: CodeBracketSquareIcon,
 };

apps/playground/src/data/search-blacklist-links.ts

@@ -0,0 +1,4 @@
+export const searchBlacklistLinks = [
+  "https://meshjs.dev/",
+  "https://meshjs.dev/apis/wallets/appwallet",
+];

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

@@ -1,16 +1,72 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import axios from "axios";
 
+import { searchBlacklistLinks } from "~/data/search-blacklist-links";
+
+async function querySearchApi(
+  query: string,
+  page = 1,
+): Promise<{
+  items: {
+    title: string;
+    link: string;
+    htmlFormattedUrl: string;
+    htmlSnippet: string;
+  }[];
+}> {
+  const start = (page - 1) * 10 + 1;
+  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}&start=${start}`,
+  );
+  return resGoogle.data;
+}
+
 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);
+
+    const results: any = [];
+
+    for (let i = 1; i <= 2; i++) {
+      const searchRes = await querySearchApi(query, i);
+
+      const items = searchRes.items
+        // filter results
+        .filter((item) => {
+          // filter out any results with middot, these are from the footer
+          if (item.htmlSnippet.includes("&middot;")) {
+            return false;
+          }
+          if (searchBlacklistLinks.includes(item.link)) {
+            return false;
+          }
+          return true;
+        })
+        // transform the data
+        .map((item) => {
+          return {
+            title: item.title,
+            url: item.link.replace("https://meshjs.dev/", "/"),
+            displayUrl: item.htmlFormattedUrl,
+            snippet: item.htmlSnippet,
+          };
+        })
+        // lastly filter any duplicated urls
+        .filter(
+          (item, index, self) =>
+            index === self.findIndex((t) => t.url === item.url),
+        );
+
+      results.push(...items);
+      if (searchRes.items.length < 10) {
+        break;
+      }
+    }
+
+    _res.status(200).json(results);
   } catch (error) {
     _res.status(500).json(error);
   }

apps/playground/src/pages/apis/txbuilder/basics/multisig-native-script.tsx

@@ -1,15 +1,8 @@
 import {
-  AppWallet,
   deserializeAddress,
-  ForgeScript,
-  MeshTxBuilder,
   MeshWallet,
   NativeScript,
-  resolveNativeScriptAddress,
-  resolveNativeScriptHash,
-  resolveScriptHash,
   serializeNativeScript,
-  stringToHex,
 } from "@meshsdk/core";
 import { useWallet } from "@meshsdk/react";
 
@@ -84,6 +77,10 @@ function Left() {
 
   return (
     <>
+      <p>
+        Here is an example of creating a multi-signature (multisig) transaction
+        with a native script, where you need to spend from a script address.
+      </p>
       <h4>Create native script</h4>
       <p>
         First, we need to create a native script. In this example, we will
@@ -218,8 +215,8 @@ function Right() {
 
   return (
     <LiveCodeDemo
-      title="Multi-signature Transaction with native script "
-      subtitle="Create a multi-signature transaction with a native script. In this demo, we will create a transaction with two signatures, where one signature is from the user wallet and the other is from a minting wallet."
+      title="Multi-signature Transaction with native script"
+      subtitle="Create a multi-signature transaction with a native script. In this demo, we will create a transaction with two signatures, where one signature is from the user wallet and the other is from the script."
       code={codeSnippet}
       runCodeFunction={runDemo}
       disabled={!connected}

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

@@ -43,7 +43,7 @@ function Left() {
   return (
     <>
       <p>
-        The main idea of a multi-signature transaction is to have multiple
+        The main idea of a multi-signature (multisig) transaction is to have multiple
         signatures to authorize a transaction.
       </p>
       <Codeblock data={codeTx} />

apps/playground/src/pages/apis/wallets/appwallet/index.tsx

@@ -2,6 +2,7 @@ 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";
 import Metatags from "~/components/site/metatags";
 import { metaAppwallet } from "~/data/links-wallets";
@@ -35,6 +36,14 @@ const ReactPage: NextPage = () => {
           description={metaAppwallet.desc}
           heroicon={metaAppwallet.icon}
         >
+          <p>
+            <code>AppWallet</code> has been deprecated and will be removed in
+            the next major release. Please use{" "}
+            <Link href="/apis/wallets/meshwallet">
+              <code>MeshWallet</code>
+            </Link>{" "}
+            instead.
+          </p>
           <p>
             <code>AppWallet</code> is useful for building other user wallets and
             fully customed applications's backend.

apps/playground/src/pages/search/index.tsx

@@ -1,12 +1,12 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useRouter } from "next/router";
 
 import { searchQuery } from "~/backend/search";
 import Link from "~/components/link";
+import Metatags from "~/components/site/metatags";
 
 export default function PageSearch() {
   const router = useRouter();
-
   const [query, setQuery] = useState<string>("");
   const [searchResults, setSearchResults] = useState<
     {
@@ -16,10 +16,13 @@ export default function PageSearch() {
       displayUrl: string;
     }[]
   >([]);
+  const lastSearchQuery = useRef("0");
 
   async function search(_query?: string) {
-    console.log("search", _query ? _query : query);
-    const res = await searchQuery(_query ? _query : query);
+    const thisQuery = _query ? _query : query;
+    console.log("search", thisQuery);
+    lastSearchQuery.current = thisQuery;
+    const res = await searchQuery(thisQuery);
     setSearchResults(res);
   }
 
@@ -39,6 +42,8 @@ export default function PageSearch() {
 
   return (
     <>
+      <Metatags title="Search Mesh SDK" />
+
       <section className="bg-white py-8 antialiased md:py-16 dark:bg-gray-900">
         <div className="mx-auto max-w-screen-lg px-4 2xl:px-0">
           <div className="lg:flex lg:items-center lg:justify-between lg:gap-4">