feat(tangle-cloud): Blueprint Marketplace

apps/tangle-cloud/app/blueprints/BlueprintListing.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import BlueprintGallery from '@webb-tools/tangle-shared-ui/components/blueprints/BlueprintGallery';
+import useBlueprintListing from '@webb-tools/tangle-shared-ui/data/blueprints/useBlueprintListing';
+import Image from 'next/image';
+import { FC } from 'react';
+
+import { PagePath } from '../../types';
+
+const BlueprintListing: FC = () => {
+  const { blueprints, isLoading, error } = useBlueprintListing();
+
+  return (
+    <BlueprintGallery
+      blueprints={blueprints.map((blueprint) => ({
+        ...blueprint,
+        renderImage(imageUrl) {
+          return (
+            <Image
+              src={imageUrl}
+              width={72}
+              height={72}
+              alt={blueprint.name}
+              className="flex-shrink-0 bg-center rounded-full"
+              fill={false}
+            />
+          );
+        },
+      }))}
+      isLoading={isLoading}
+      error={error}
+      getBlueprintUrl={(blueprint) => `${PagePath.BLUEPRINTS}/${blueprint.id}`}
+    />
+  );
+};
+
+export default BlueprintListing;

apps/tangle-cloud/app/blueprints/layout.tsx

@@ -0,0 +1,14 @@
+import { PropsWithChildren } from 'react';
+import Header from '../../components/Header';
+
+const Layout = ({ children }: PropsWithChildren) => {
+  return (
+    <div className="max-w-screen-xl mx-auto my-5">
+      <Header />
+
+      {children}
+    </div>
+  );
+};
+
+export default Layout;

apps/tangle-cloud/app/blueprints/page.tsx

@@ -0,0 +1,14 @@
+import TopBanner from '@webb-tools/tangle-shared-ui/components/blueprints/TopBanner';
+import BlueprintListing from './BlueprintListing';
+
+const Page = () => {
+  return (
+    <div className="px-4 space-y-5">
+      <TopBanner />
+
+      <BlueprintListing />
+    </div>
+  );
+};
+
+export default Page;

apps/tangle-cloud/app/layout.tsx

@@ -2,17 +2,15 @@ import '@webb-tools/webb-ui-components/tailwind.css';
 import '../styles/globals.css';
 
 import getWagmiConfig from '@webb-tools/dapp-config/wagmi-config';
+import { getSidebarStateFromCookie } from '@webb-tools/webb-ui-components/next-utils';
 import { headers } from 'next/headers';
 import { Suspense } from 'react';
 import { cookieToInitialState } from 'wagmi';
-import Providers from './providers';
 import Layout from '../components/Layout';
-import { getSidebarStateFromCookie } from '@webb-tools/webb-ui-components/next-utils';
+import { DEFAULT_OPENGRAPH_METADATA } from '../constants/openGraph';
+import Providers from './providers';
 
-export const metadata = {
-  title: 'Welcome to tangle-cloud',
-  description: 'Generated by create-nx-workspace',
-};
+export const metadata = DEFAULT_OPENGRAPH_METADATA;
 
 export default function RootLayout({
   children,

apps/tangle-cloud/app/page.tsx

@@ -1,18 +1,6 @@
-import { Typography } from '@webb-tools/webb-ui-components/typography/Typography';
-import Header from '../components/Header';
+import { redirect } from 'next/navigation';
+import { PagePath } from '../types';
 
-export default function Index() {
-  return (
-    <div className="max-w-screen-xl mx-auto">
-      <Header />
-
-      <Typography
-        variant="h3"
-        ta="center"
-        className="flex items-center justify-center min-h-full"
-      >
-        Hello there, Welcome tangle-cloud 👋
-      </Typography>
-    </div>
-  );
+export default async function Index() {
+  redirect(PagePath.BLUEPRINTS);
 }

apps/tangle-cloud/components/Sidebar.tsx

@@ -1,24 +1,21 @@
 'use client';
 
-import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu';
-import { HomeIcon, PersonIcon } from '@radix-ui/react-icons';
-import { ArrowRight } from '@webb-tools/icons';
+import { HomeIcon } from '@radix-ui/react-icons';
 import CommandFillIcon from '@webb-tools/icons/CommandFillIcon';
 import { DocumentationIcon } from '@webb-tools/icons/DocumentationIcon';
 import GlobalLine from '@webb-tools/icons/GlobalLine';
 import { GridFillIcon } from '@webb-tools/icons/GridFillIcon';
-import { getIconSizeInPixel } from '@webb-tools/icons/utils';
-import Button from '@webb-tools/webb-ui-components/components/buttons/Button';
 import {
   Dropdown,
   DropdownBody,
+  DropdownButton,
   DropdownMenuItem,
 } from '@webb-tools/webb-ui-components/components/Dropdown';
 import {
+  MobileSidebar,
   SideBar as SideBarCmp,
   SideBarFooterType,
   SideBarItemProps,
-  MobileSidebar,
   SidebarTangleClosedIcon,
 } from '@webb-tools/webb-ui-components/components/SideBar';
 import { TangleCloudLogo } from '@webb-tools/webb-ui-components/components/TangleCloudLogo';
@@ -31,7 +28,7 @@ import cx from 'classnames';
 import capitalize from 'lodash/capitalize';
 import { usePathname } from 'next/navigation';
 import { FC, useMemo } from 'react';
-import useRoleStore, { Role } from '../stores/roleStore';
+import useRoleStore, { Role, ROLE_ICON_MAP } from '../stores/roleStore';
 import { PagePath } from '../types';
 
 type Props = {
@@ -89,39 +86,27 @@ const ActionButton: FC<{ isExpanded: boolean }> = ({ isExpanded }) => {
 
   return (
     <Dropdown>
-      <DropdownMenuTrigger asChild>
-        <Button
-          title={capitalizedRole}
-          isFullWidth
-          rightIcon={
-            isExpanded ? (
-              <ArrowRight size="lg" className="!fill-mono-0" />
-            ) : (
-              <PersonIcon
-                width={getIconSizeInPixel('lg')}
-                height={getIconSizeInPixel('lg')}
-              />
-            )
-          }
-          className={cx(!isExpanded && '!p-2')}
-        >
-          {isExpanded ? capitalizedRole : ''}
-        </Button>
-      </DropdownMenuTrigger>
+      <DropdownButton
+        isFullWidth
+        size="sm"
+        icon={ROLE_ICON_MAP[role]({ size: 'lg' })}
+        hideChevron={!isExpanded}
+        label={isExpanded ? capitalizedRole : ''}
+        className={cx('min-w-0 mx-auto', !isExpanded && 'px-2 w-fit')}
+      />
 
-      <DropdownBody
-        className={cx('mt-2', isExpanded && 'w-[248px]')}
-        align="center"
-      >
+      <DropdownBody className="ml-2" side="right" align="center">
         <DropdownMenuItem
           isActive={role === Role.OPERATOR}
           onClick={() => setRole(Role.OPERATOR)}
+          leftIcon={ROLE_ICON_MAP[Role.OPERATOR]()}
         >
           Operate
         </DropdownMenuItem>
         <DropdownMenuItem
           isActive={role === Role.DEPLOYER}
           onClick={() => setRole(Role.DEPLOYER)}
+          leftIcon={ROLE_ICON_MAP[Role.DEPLOYER]()}
         >
           Deploy
         </DropdownMenuItem>
@@ -143,7 +128,7 @@ const Sidebar: FC<Props> = ({ isExpandedByDefault }) => {
         Logo={TangleCloudLogo}
         logoLink={pathname}
         pathnameOrHash={pathname}
-        className="hidden lg:block"
+        className="hidden h-screen lg:block"
         isExpandedByDefault={isExpandedByDefault}
         onSideBarToggle={setSidebarCookieOnToggle}
         ActionButton={ActionButton}

apps/tangle-cloud/constants/openGraph.ts

@@ -0,0 +1,40 @@
+import { TANGLE_CLOUD_URL } from '@webb-tools/webb-ui-components/constants';
+import type { Metadata } from 'next';
+
+export const APP_NAME = 'Tangle Cloud';
+
+export const APP_SUBTITLE = 'Deploy and Scale Your Services Effortlessly';
+
+export const APP_DESCRIPTION =
+  'Streamline deployment, generate revenue, and innovate with Tangle Cloud. Deploy effortlessly.';
+
+export const DEFAULT_OPENGRAPH_METADATA = {
+  title: {
+    default: APP_NAME,
+    template: `${APP_NAME} | %s`,
+  },
+  description: APP_DESCRIPTION,
+  metadataBase: process.env.URL
+    ? new URL(process.env.URL)
+    : process.env.PORT != null
+      ? new URL(`http://localhost:${process.env.PORT}`)
+      : new URL(TANGLE_CLOUD_URL), // Fallback to the default URL
+  openGraph: {
+    title: `${APP_NAME} | ${APP_SUBTITLE}`,
+    description: APP_DESCRIPTION,
+    url: TANGLE_CLOUD_URL,
+    siteName: APP_NAME,
+    locale: 'en_US',
+    type: 'website',
+    // TODO: Add opengraph images
+    images: [],
+  },
+  icons: {
+    icon: '/favicon.ico',
+  },
+  twitter: {
+    title: `${APP_NAME} | ${APP_SUBTITLE}`,
+    card: 'summary_large_image',
+    description: APP_DESCRIPTION,
+  },
+} as const satisfies Metadata;

apps/tangle-cloud/stores/roleStore.tsx

@@ -0,0 +1,46 @@
+import { GearIcon } from '@radix-ui/react-icons';
+import { IconBase } from '@webb-tools/icons/types';
+import { UploadCloudIcon } from '@webb-tools/icons/UploadCloudIcon';
+import { getIconSizeInPixel } from '@webb-tools/icons/utils';
+import { twMerge } from 'tailwind-merge';
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+export enum Role {
+  OPERATOR = 'operator',
+  DEPLOYER = 'deployer',
+}
+
+export const ROLE_ICON_MAP = {
+  [Role.OPERATOR]: (props?: IconBase) => (
+    <GearIcon
+      width={getIconSizeInPixel(props?.size ?? 'md')}
+      height={getIconSizeInPixel(props?.size ?? 'md')}
+    />
+  ),
+  [Role.DEPLOYER]: (props?: IconBase) => (
+    <UploadCloudIcon
+      {...props}
+      className={twMerge('!fill-current', props?.className)}
+    />
+  ),
+} as const;
+
+export interface RoleState {
+  role: Role;
+  setRole: (role: Role) => void;
+}
+
+const useRoleStore = create<RoleState>()(
+  persist(
+    (set) => ({
+      role: Role.DEPLOYER,
+      setRole: (role) => set(() => ({ role })),
+    }),
+    {
+      name: 'role',
+    },
+  ),
+);
+
+export default useRoleStore;