update icon

Author: jinglescode

.gitignore

@@ -48,3 +48,4 @@ apps/docs/src/data/mesh-wallets.json
 
 # svelte
 .svelte-kit/
+vite.config.ts.*

apps/playground/src/components/card/card-title-desc-image.tsx

@@ -2,30 +2,31 @@ import React from "react";
 import Image from "next/image";
 
 import Link from "~/components/link";
+import Icon from "../icon";
 import Card from "./card";
 
 export default function CardTitleDescImage({
   title,
   desc,
   link,
-  thumbnailHeroicon,
+  icon,
   thumbnailImage,
   thumbnailNotioly,
 }: {
   title: string;
   desc?: string;
   link: string;
-  thumbnailHeroicon?: any;
+  icon?: any;
   thumbnailImage?: string;
   thumbnailNotioly?: string;
 }) {
   return (
     <Link href={link}>
       <Card className="h-full cursor-pointer">
         <div className="flex flex-row items-center gap-2">
-          {thumbnailHeroicon ? (
+          {icon ? (
             <div className="w-8 dark:text-white">
-              {React.createElement(thumbnailHeroicon)}
+              <Icon icon={icon} />
             </div>
           ) : thumbnailNotioly ? (
             <div className="relative h-40 w-full bg-white">

apps/playground/src/components/icon.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+export default function Icon({
+  icon,
+  className,
+}: {
+  icon: any;
+  className?: string;
+}) {
+  if (icon) {
+    if (typeof icon === "object" || typeof icon === "function") {
+      return React.createElement(icon, { className: className });
+    }
+
+    if (typeof icon === "string") {
+      return <img src={icon} alt={icon} className={className} />;
+    }
+  }
+
+  return <></>;
+}

apps/playground/src/components/layouts/header-and-cards.tsx

@@ -27,7 +27,7 @@ export default function HeaderAndCards({
                 title={item.title}
                 desc={item.desc}
                 link={item.link}
-                thumbnailHeroicon={item.icon}
+                icon={item.icon}
                 thumbnailImage={item.thumbnail}
                 key={i}
               />

apps/playground/src/components/link/index.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import NextLink from "next/link";
 
+import Icon from "../icon";
+
 export default function Link({
   children,
   href,
@@ -21,7 +23,7 @@ export default function Link({
       target={target ? target : href.startsWith("http") ? "_blank" : "_self"}
       rel="noreferrer"
     >
-      {icon && React.createElement(icon, { className: "mr-2 w-4 h-4" })}
+      <Icon icon={icon} className="mr-2 h-4 w-4" />
       {children}
     </NextLink>
   );

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

@@ -1,6 +1,7 @@
 import React from "react";
 import Image from "next/image";
 
+import Icon from "~/components/icon";
 import Link from "~/components/link";
 import { socials } from "~/data/social";
 import Sitemap from "./sitemap";
@@ -42,9 +43,7 @@ export default function Footer() {
                     className="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
                     key={i}
                   >
-                    {React.createElement(social.icon, {
-                      className: "w-5 h-5",
-                    })}
+                    <Icon icon={social.icon} className="h-5 w-5" />
                   </Link>
                 </li>
               );

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

@@ -7,6 +7,7 @@ import {
   XMarkIcon,
 } from "@heroicons/react/24/solid";
 
+import Icon from "~/components/icon";
 import Link from "~/components/link";
 import SvgMesh from "~/components/svgs/mesh";
 import { linksAbout } from "~/data/links-about";
@@ -131,7 +132,7 @@ export default function Navbar() {
                   key={i}
                   aria-label={social.link}
                 >
-                  {React.createElement(social.icon, { className: "w-6 h-6" })}
+                  <Icon icon={social.icon} className="h-6 w-6" />
                 </Link>
               );
             })}

apps/playground/src/components/site/navbar/submenu-item-dropdown.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from "react";
-import Link from "~/components/link";
 import { ChevronRightIcon } from "@heroicons/react/24/solid";
 
+import Icon from "~/components/icon";
+import Link from "~/components/link";
 import { MenuItem } from "~/types/menu-item";
 
 export default function SubmenuItemDropdown({
@@ -26,10 +27,10 @@ export default function SubmenuItemDropdown({
       <Link href={link ?? "#"}>
         <button
           type="button"
-          className="hover:text-black dark:hover:text-white flex w-full items-center justify-between px-4 py-2"
+          className="flex w-full items-center justify-between px-4 py-2 hover:text-black dark:hover:text-white"
         >
           <span className="flex items-center">
-            {icon && React.createElement(icon, { className: "mr-2 w-4 h-4" })}
+            <Icon icon={icon} className="mr-2 h-4 w-4" />
             {title}
           </span>
           <ChevronRightIcon className="h-4 w-4" />
@@ -71,9 +72,9 @@ function Item({
     <li>
       <Link
         href={link}
-        className="hover:text-black dark:hover:text-white flex w-full items-center px-4 py-2"
+        className="flex w-full items-center px-4 py-2 hover:text-black dark:hover:text-white"
       >
-        {icon && React.createElement(icon, { className: "mr-2 w-4 h-4" })}
+        <Icon icon={icon} className="mr-2 h-4 w-4" />
         {title}
       </Link>
     </li>

apps/playground/src/components/site/navbar/submenu-item.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 
+import Icon from "~/components/icon";
 import Link from "~/components/link";
 
 export default function SubmenuItem({
@@ -15,10 +16,10 @@ export default function SubmenuItem({
     <li>
       <Link
         href={link}
-        className="hover:text-black dark:hover:text-white flex w-full items-center px-4 py-2"
+        className="flex w-full items-center px-4 py-2 hover:text-black dark:hover:text-white"
         target={link.startsWith("http") ? "_blank" : "_self"}
       >
-        {icon && React.createElement(icon, { className: "mr-2 w-4 h-4" })}
+        <Icon icon={icon} className="mr-2 w-4 h-4" />
         {title}
       </Link>
     </li>

apps/playground/src/components/svgs/discord.tsx

@@ -6,14 +6,6 @@ const SvgDiscord = ({
   fill?: string;
 }) => {
   return (
-    // <svg
-    //   xmlns="http://www.w3.org/2000/svg"
-    //   viewBox="0 0 48 48"
-    //   className={className}
-    //   fill={fill}
-    // >
-    //   <path d="M39.248,10.177c-2.804-1.287-5.812-2.235-8.956-2.778c-0.057-0.01-0.114,0.016-0.144,0.068	c-0.387,0.688-0.815,1.585-1.115,2.291c-3.382-0.506-6.747-0.506-10.059,0c-0.3-0.721-0.744-1.603-1.133-2.291	c-0.03-0.051-0.087-0.077-0.144-0.068c-3.143,0.541-6.15,1.489-8.956,2.778c-0.024,0.01-0.045,0.028-0.059,0.051	c-5.704,8.522-7.267,16.835-6.5,25.044c0.003,0.04,0.026,0.079,0.057,0.103c3.763,2.764,7.409,4.442,10.987,5.554	c0.057,0.017,0.118-0.003,0.154-0.051c0.846-1.156,1.601-2.374,2.248-3.656c0.038-0.075,0.002-0.164-0.076-0.194	c-1.197-0.454-2.336-1.007-3.432-1.636c-0.087-0.051-0.094-0.175-0.014-0.234c0.231-0.173,0.461-0.353,0.682-0.534	c0.04-0.033,0.095-0.04,0.142-0.019c7.201,3.288,14.997,3.288,22.113,0c0.047-0.023,0.102-0.016,0.144,0.017	c0.22,0.182,0.451,0.363,0.683,0.536c0.08,0.059,0.075,0.183-0.012,0.234c-1.096,0.641-2.236,1.182-3.434,1.634	c-0.078,0.03-0.113,0.12-0.075,0.196c0.661,1.28,1.415,2.498,2.246,3.654c0.035,0.049,0.097,0.07,0.154,0.052	c3.595-1.112,7.241-2.79,11.004-5.554c0.033-0.024,0.054-0.061,0.057-0.101c0.917-9.491-1.537-17.735-6.505-25.044	C39.293,10.205,39.272,10.187,39.248,10.177z M16.703,30.273c-2.168,0-3.954-1.99-3.954-4.435s1.752-4.435,3.954-4.435	c2.22,0,3.989,2.008,3.954,4.435C20.658,28.282,18.906,30.273,16.703,30.273z M31.324,30.273c-2.168,0-3.954-1.99-3.954-4.435	s1.752-4.435,3.954-4.435c2.22,0,3.989,2.008,3.954,4.435C35.278,28.282,33.544,30.273,31.324,30.273z" />
-    // </svg>
     <svg
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 512 512"

apps/playground/src/components/text/header2.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 
+import Icon from "../icon";
+
 export default function Header2({
   children,
   heroicon,
@@ -12,7 +14,7 @@ export default function Header2({
       <Title>
         <div className="flex items-center">
           <div className="mr-4 p-2">
-            {React.createElement(heroicon, { className: "w-16 h-16" })}
+            <Icon icon={heroicon} className="h-16 w-16" />
           </div>
           <span>{children}</span>
         </div>

apps/playground/src/data/catalyst.ts

@@ -19,7 +19,7 @@ export const fund13 = [
       `Transaction building`,
       `End-to-end working example`,
     ],
-    status: "Voting",
+    status: "In Progress",
   },
   {
     title: "Cardano Devkit - 'Ganache' of Cardano for better DevXP",
@@ -31,7 +31,8 @@ export const fund13 = [
       `Desktop app to launch local blockchain`,
       `Get blockchain data e.g. UTXOs and balances`,
     ],
-    status: "Voting",
+    status: "In Progress",
+    funded: false
   },
   {
     title: "Cquisitor - Transaction Investigation Tool",
@@ -44,7 +45,7 @@ export const fund13 = [
       `Phase-2 validation`,
       `Integration with Whisky and Mesh`,
     ],
-    status: "Voting",
+    status: "In Progress",
   },
   {
     title: "Multisig Platform",
@@ -58,7 +59,7 @@ export const fund13 = [
       `Fluidtokens and Minswap integrations`,
       `Plutus script multisig wallet`,
     ],
-    status: "Voting",
+    status: "In Progress",
   },
   {
     title: "Builder Fest #2 in Asia",
@@ -69,7 +70,7 @@ export const fund13 = [
       `Gathering of developers in Vietnam`,
       `Increase collaboration between projects for Cardano ecosystem open-source`,
     ],
-    status: "Voting",
+    status: "In Progress",
   },
   {
     title: "Maintain Mesh and Build Developer Community",
@@ -82,7 +83,7 @@ export const fund13 = [
       `Create tutorials and documentation`,
       `Create workshops and live coding sessions`,
     ],
-    status: "Voting",
+    status: "In Progress",
   },
 ];
 

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

@@ -39,4 +39,5 @@ export const metaAiken: MenuItem = {
   desc: "A functional programming language created for Cardano smart contract development",
   link: "/aiken",
   items: linksAiken,
+  icon: "/images/aiken/aiken-icon.png",
 };

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

@@ -32,4 +32,5 @@ export const metaYaci: MenuItem = {
   desc: "A custom Cardano devnet to tailor your devnet needs with a builtin indexer",
   link: "/yaci",
   items: linksYaci,
+  icon: "/providers/yaci.png",
 };

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

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

apps/playground/src/pages/about/catalyst/index.tsx

@@ -31,37 +31,15 @@ function Section({ title, items }: { title: string; items: any[] }) {
         <Header3>{title}</Header3>
         <div className="grid w-full grid-cols-1 gap-2 lg:grid-cols-3">
           {items.map((item, index) => (
-            <CardLink
-              title={item.title}
-              desc={item.desc}
-              url={item.url}
-              completed={item.completed}
-              tobecompleted={item.tobecompleted}
-              status={item.status}
-              key={index}
-            />
+            <CardLink item={item} key={index} />
           ))}
         </div>
       </div>
     </div>
   );
 }
 
-function CardLink({
-  title,
-  desc,
-  url,
-  completed,
-  tobecompleted,
-  status,
-}: {
-  title: string;
-  desc: string;
-  url?: string;
-  completed: string[];
-  tobecompleted: string[];
-  status: string;
-}) {
+function CardLink({ item }: { item: any }) {
   function getDomain(url) {
     url = url.replace(/(https?:\/\/)?(www.)?/i, "");
 
@@ -74,16 +52,23 @@ function CardLink({
   return (
     <div className="block max-w-sm rounded-lg border border-gray-200 bg-white p-6 shadow dark:border-gray-700 dark:bg-gray-800">
       <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
-        {title}
+        {item.title}
       </h5>
       <div className="mb-2 flex gap-2">
         <span className="me-2 rounded bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800 dark:bg-green-900 dark:text-green-300">
-          {status}
+          {item.status}
         </span>
+        {item.funded != undefined && item.funded == false && (
+          <span className="rounded bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-800 dark:bg-red-900 dark:text-red-300">
+            Not funded
+          </span>
+        )}
       </div>
-      <p className="font-normal text-gray-700 dark:text-gray-400">{desc}</p>
+      <p className="font-normal text-gray-700 dark:text-gray-400">
+        {item.desc}
+      </p>
       <ul className="mt-4 text-sm text-gray-500 dark:text-gray-300">
-        {completed.map((item, index) => (
+        {item.completed.map((item, index) => (
           <li key={index} className="flex">
             <div className="mr-2 h-4 w-4">
               <svg
@@ -106,7 +91,7 @@ function CardLink({
         ))}
       </ul>
       <ul className="mt-4 text-sm text-gray-500 dark:text-gray-300">
-        {tobecompleted.map((item, index) => (
+        {item.tobecompleted.map((item, index) => (
           <li key={index} className="flex">
             <div className="mr-2 h-4 w-4">
               <svg
@@ -123,11 +108,11 @@ function CardLink({
           </li>
         ))}
       </ul>
-      {url && (
+      {item.url && (
         <div className="mt-4 text-sm text-gray-500 dark:text-gray-300">
-          <Link href={url}>
+          <Link href={item.url}>
             <span className="text-blue-500 hover:text-blue-700">
-              {getDomain(url)}
+              {getDomain(item.url)}
             </span>
           </Link>
         </div>

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

@@ -40,7 +40,8 @@ export default async function handler(
           if (item.htmlSnippet.includes("·")) {
             return false;
           }
-          if (searchBlacklistLinks.includes(item.link)) {
+          // if link is in blacklist, filter it out
+          if (searchBlacklistLinks.some((link) => item.link.includes(link))) {
             return false;
           }
           return true;

apps/playground/src/pages/home/features.tsx

@@ -12,7 +12,7 @@ export default function SectionFeatures() {
             title={item.title}
             desc={item.desc}
             link={item.link}
-            thumbnailHeroicon={item.icon}
+            icon={item.icon}
             thumbnailImage={item.thumbnail}
             key={i}
           />