tangle-network · drewstone · Nov 13, 2024 · Nov 5, 2024 · Nov 5, 2024 · Nov 6, 2024
@@ -10,6 +10,7 @@ _Put an `x` in the boxes that apply._
 
 - [ ] `apps/tangle-dapp`
 - [ ] `apps/tangle-cloud`
+- [ ] `libs/tangle-shared-ui`
 - [ ] `libs/webb-ui-components`
 
 ### Associated issue(s)

diff --git a/.husky/commit-msg b/.husky/commit-msg
@@ -0,0 +1 @@
+npx --no-install commitlint --edit $1
diff --git a/.husky/pre-push b/.husky/pre-push
@@ -0,0 +1,8 @@
+yarn run lint
+
+yarn run format:check
+
+if [ $? -ne 0 ]; then
+  echo "Lint or format check(s) failed, aborting push."
+  exit 1
+fi
@@ -6,6 +6,8 @@ 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';
 
 export const metadata = {
   title: 'Welcome to tangle-cloud',
@@ -22,11 +24,17 @@ export default function RootLayout({
     headers().get('cookie'),
   );
 
+  const isSidebarInitiallyExpanded = getSidebarStateFromCookie();
+
   return (
     <html lang="en" suppressHydrationWarning>
       <body>
         <Suspense>
-          <Providers wagmiInitialState={initialState}>{children}</Providers>
+          <Providers wagmiInitialState={initialState}>
+            <Layout isSidebarInitiallyExpanded={isSidebarInitiallyExpanded}>
+              {children}
+            </Layout>
+          </Providers>
         </Suspense>
       </body>
     </html>

@@ -1,18 +1,18 @@
 import { Typography } from '@webb-tools/webb-ui-components/typography/Typography';
+import Header from '../components/Header';
 
 export default function Index() {
-  /*
-   * Replace the elements below with your own.
-   *
-   * Note: The corresponding styles are in the ./index.css file.
-   */
   return (
-    <Typography
-      variant="h3"
-      ta="center"
-      className="flex items-center justify-center min-h-screen"
-    >
-      Hello there, Welcome tangle-cloud 👋
-    </Typography>
+    <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>
   );
 }
@@ -0,0 +1,22 @@
+import NetworkSelectorDropdown from '@webb-tools/tangle-shared-ui/components/NetworkSelectorDropdown';
+import ConnectWalletButton from '@webb-tools/tangle-shared-ui/components/ConnectWalletButton';
+import { ComponentProps } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+export default function Header({
+  className,
+  ...props
+}: ComponentProps<'header'>) {
+  return (
+    <header
+      className={twMerge('p-4 max-w-screen-xl mx-auto', className)}
+      {...props}
+    >
+      <div className="flex items-center justify-end gap-2">
+        <NetworkSelectorDropdown />
+
+        <ConnectWalletButton />
+      </div>
+    </header>
+  );
+}
@@ -0,0 +1,44 @@
+import { Footer } from '@webb-tools/webb-ui-components/components/Footer';
+import Sidebar from './Sidebar';
+import { FC, PropsWithChildren } from 'react';
+import {
+  bottomLinks,
+  TANGLE_PRIVACY_POLICY_URL,
+  TANGLE_SOCIAL_URLS_RECORD,
+  TANGLE_TERMS_OF_SERVICE_URL,
+} from '@webb-tools/webb-ui-components/constants';
+
+type Props = {
+  isSidebarInitiallyExpanded?: boolean;
+};
+
+const BOTTOM_LINK_OVERRIDES: Partial<
+  Record<(typeof bottomLinks)[number]['name'], string>
+> = {
+  'Terms of Service': TANGLE_TERMS_OF_SERVICE_URL,
+  'Privacy Policy': TANGLE_PRIVACY_POLICY_URL,
+};
+
+const Layout: FC<PropsWithChildren<Props>> = ({
+  children,
+  isSidebarInitiallyExpanded,
+}) => {
+  return (
+    <div className={`flex min-h-screen bg-body body-bg`}>
+      <Sidebar isExpandedAtDefault={isSidebarInitiallyExpanded} />
+
+      <div className="flex flex-col flex-1 min-h-screen overflow-y-auto scrollbar-hide">
+        <main className="flex-1">{children}</main>
+
+        <Footer
+          socialsLinkOverrides={TANGLE_SOCIAL_URLS_RECORD}
+          bottomLinkOverrides={BOTTOM_LINK_OVERRIDES}
+          isMinimal
+          className="px-6 py-8"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Layout;
@@ -0,0 +1,167 @@
+'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 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,
+  DropdownMenuItem,
+} from '@webb-tools/webb-ui-components/components/Dropdown';
+import {
+  SideBar as SideBarCmp,
+  SideBarFooterType,
+  SideBarItemProps,
+  SideBarMenu,
+  SidebarTangleClosedIcon,
+} from '@webb-tools/webb-ui-components/components/SideBar';
+import { TangleCloudLogo } from '@webb-tools/webb-ui-components/components/TangleCloudLogo';
+import {
+  TANGLE_DAPP_URL,
+  TANGLE_DOCS_URL,
+} from '@webb-tools/webb-ui-components/constants';
+import { setSidebarCookieOnToggle } from '@webb-tools/webb-ui-components/next-utils';
+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 { PagePath } from '../types';
+
+type Props = {
+  isExpandedAtDefault?: boolean;
+};
+
+const SIDEBAR_ITEMS: SideBarItemProps[] = [
+  {
+    name: 'Home',
+    href: PagePath.HOME,
+    isInternal: true,
+    isNext: true,
+    Icon: HomeIcon,
+    subItems: [],
+  },
+  {
+    name: 'Blueprints',
+    href: PagePath.BLUEPRINTS,
+    isInternal: true,
+    isNext: true,
+    Icon: GridFillIcon,
+    subItems: [],
+  },
+  {
+    name: 'Operators',
+    href: PagePath.OPERATORS,
+    isInternal: true,
+    isNext: true,
+    Icon: GlobalLine,
+    subItems: [],
+  },
+
+  // External links
+  {
+    Icon: CommandFillIcon,
+    href: TANGLE_DAPP_URL,
+    isInternal: false,
+    name: 'dApp',
+    subItems: [],
+  },
+];
+
+const SIDEBAR_FOOTER: SideBarFooterType = {
+  Icon: DocumentationIcon,
+  href: TANGLE_DOCS_URL,
+  isInternal: false,
+  name: 'Docs',
+  useNextThemesForThemeToggle: true,
+};
+
+const ActionButton: FC<{ isExpanded: boolean }> = ({ isExpanded }) => {
+  const { role, setRole } = useRoleStore();
+
+  const capitalizedRole = useMemo(() => capitalize(role), [role]);
+
+  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>
+
+      <DropdownBody
+        className={cx('mt-2', isExpanded && 'w-[248px]')}
+        align="center"
+      >
+        <DropdownMenuItem
+          isActive={role === Role.OPERATOR}
+          onClick={() => setRole(Role.OPERATOR)}
+        >
+          Operate
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          isActive={role === Role.DEPLOYER}
+          onClick={() => setRole(Role.DEPLOYER)}
+        >
+          Deploy
+        </DropdownMenuItem>
+      </DropdownBody>
+    </Dropdown>
+  );
+};
+
+const Sidebar: FC<Props> = ({ isExpandedAtDefault }) => {
+  const pathname = usePathname();
+
+  return (
+    <>
+      {/* Large screen sidebar */}
+      <SideBarCmp
+        ClosedLogo={SidebarTangleClosedIcon}
+        items={SIDEBAR_ITEMS}
+        footer={SIDEBAR_FOOTER}
+        Logo={TangleCloudLogo}
+        logoLink={pathname}
+        pathnameOrHash={pathname}
+        className="hidden lg:block"
+        isExpandedAtDefault={isExpandedAtDefault}
+        onSideBarToggle={setSidebarCookieOnToggle}
+        ActionButton={ActionButton}
+      />
+
+      {/* Small screen sidebar */}
+      <SideBarMenu
+        ClosedLogo={SidebarTangleClosedIcon}
+        items={SIDEBAR_ITEMS}
+        footer={SIDEBAR_FOOTER}
+        Logo={TangleCloudLogo}
+        logoLink={pathname}
+        pathnameOrHash={pathname}
+        className="fixed top-4 left-5 lg:hidden"
+        ActionButton={ActionButton}
+      />
+    </>
+  );
+};
+
+export default Sidebar;
@@ -24,7 +24,8 @@
       "defaultConfiguration": "development",
       "options": {
         "buildTarget": "tangle-cloud:build",
-        "dev": true
+        "dev": true,
+        "port": 4300
       },
       "configurations": {
         "development": {

@@ -0,0 +1,26 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+export enum Role {
+  OPERATOR = 'operator',
+  DEPLOYER = 'deployer',
+}
+
+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;
@@ -0,0 +1,5 @@
+export enum PagePath {
+  HOME = '/',
+  BLUEPRINTS = '/blueprints',
+  OPERATORS = '/operators',
+}
@@ -1,9 +1,9 @@
 import type { Option } from '@polkadot/types';
 import type { TanglePrimitivesServicesOperatorPreferences } from '@polkadot/types/lookup';
+import useNetworkStore from '@webb-tools/tangle-shared-ui/context/useNetworkStore';
 import { useCallback } from 'react';
 import { combineLatest, switchMap } from 'rxjs';
 
-import useNetworkStore from '../../../context/useNetworkStore';
 import { extractOperatorData } from '../../../data/blueprints/utils/blueprintHelpers';
 import { toPrimitiveBlueprint } from '../../../data/blueprints/utils/toPrimitiveBlueprint';
 import useRestakeAssetMap from '../../../data/restake/useRestakeAssetMap';

@@ -3,14 +3,14 @@
 import { isAddress } from '@polkadot/util-crypto';
 import { ChainConfig } from '@webb-tools/dapp-config/chains/chain-config.interface';
 import { AddressType } from '@webb-tools/dapp-config/types';
+import ensureError from '@webb-tools/tangle-shared-ui/utils/ensureError';
 import { useWebbUI } from '@webb-tools/webb-ui-components/hooks/useWebbUI';
 import Decimal from 'decimal.js';
 import { useCallback, useEffect, useMemo } from 'react';
 import useSWR from 'swr';
 
 import { useBridge } from '../../../context/BridgeContext';
 import useActiveAccountAddress from '../../../hooks/useActiveAccountAddress';
-import ensureError from '../../../utils/ensureError';
 import { isEvmAddress } from '../../../utils/isEvmAddress';
 import {
   getEvmContractBalance,

@@ -1,9 +1,10 @@
 'use client';
 
+import { BridgeType } from '@webb-tools/tangle-shared-ui/types/bridge';
 import { useEffect } from 'react';
 
 import { useBridge } from '../../../context/BridgeContext';
-import { BridgeFeeType, BridgeType } from '../../../types/bridge';
+import { BridgeFeeType } from '../../../types/bridge';
 import useSelectedToken from './useSelectedToken';
 
 export default function useBridgeFee() {