Merge pull request #17 from hyperweb-io/fix/chain-admin

Customize chain-admin for Hyperweb

Author: marslavish

templates/chain-admin/components/common/Footer.tsx

@@ -45,7 +45,7 @@ const TextDivider = () => {
 const socialLinks = [
   {
     icon: <Icon name="github" color="$blackAlpha600" />,
-    href: 'https://github.com/cosmology-tech',
+    href: 'https://github.com/hyperweb-io',
   },
   {
     icon: <Icon name="discord" color="$blackAlpha600" />,
@@ -57,7 +57,7 @@ const socialLinks = [
         <FaXTwitter size="16px" />
       </Box>
     ),
-    href: 'https://x.com/cosmology_tech',
+    href: 'https://x.com/Hyperweb_',
   },
   {
     icon: <Icon name="youtube" color="$blackAlpha600" />,

templates/chain-admin/components/common/Header/ChainDropdown.tsx

@@ -1,54 +1,25 @@
 import Image from 'next/image';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useChain, useManager } from '@cosmos-kit/react';
 import { Box, Combobox, Skeleton, Stack, Text } from '@interchain-ui/react';
 
 import { useStarshipChains, useDetectBreakpoints } from '@/hooks';
 import { chainStore, useChainStore } from '@/contexts';
-import { chainOptions } from '@/config';
-import { getSignerOptions } from '@/utils';
 
 export const ChainDropdown = () => {
   const { selectedChain } = useChainStore();
   const { chain } = useChain(selectedChain);
   const [input, setInput] = useState<string>(chain.pretty_name);
-  const { isMobile } = useDetectBreakpoints();
-  const { data: starshipChains, refetch } = useStarshipChains();
-
-  const [isChainsAdded, setIsChainsAdded] = useState(false);
-  const { addChains, getChainLogo } = useManager();
-
-  useEffect(() => {
-    if (
-      starshipChains?.chains.length &&
-      starshipChains?.assets.length &&
-      !isChainsAdded
-    ) {
-      addChains(
-        starshipChains.chains,
-        starshipChains.assets,
-        getSignerOptions()
-      );
-      setIsChainsAdded(true);
-    }
-  }, [starshipChains, isChainsAdded]);
+  const { data: starshipChains } = useStarshipChains();
+  const { getChainLogo } = useManager();
 
-  const onOpenChange = (isOpen: boolean) => {
-    if (isOpen && !isChainsAdded) {
-      refetch();
-    }
-  };
-
-  const chains = isChainsAdded
-    ? chainOptions.concat(starshipChains?.chains ?? [])
-    : chainOptions;
+  const { isMobile } = useDetectBreakpoints();
 
   return (
     <Combobox
       onInputChange={(input) => {
         setInput(input);
       }}
-      onOpenChange={onOpenChange}
       selectedKey={selectedChain}
       onSelectionChange={(key) => {
         const chainName = key as string | null;
@@ -77,7 +48,7 @@ export const ChainDropdown = () => {
         width: isMobile ? '130px' : '260px',
       }}
     >
-      {chains.map((c) => (
+      {(starshipChains?.chains ?? []).map((c) => (
         <Combobox.Item key={c.chain_name} textValue={c.pretty_name}>
           <Stack
             direction="horizontal"

templates/chain-admin/components/common/Header/Header.tsx

@@ -5,7 +5,7 @@ import { RxHamburgerMenu } from 'react-icons/rx';
 
 import { ChainDropdown } from './ChainDropdown';
 import { Button } from '../Button';
-import { useDetectBreakpoints } from '@/hooks';
+import { useDetectBreakpoints, useAddHyperwebChain } from '@/hooks';
 import { AddressButton } from './AddressButton';
 
 interface HeaderProps {
@@ -15,16 +15,14 @@ interface HeaderProps {
 export const Header = ({ onOpenSidebar }: HeaderProps) => {
   const { theme, setTheme } = useTheme();
   const { isDesktop, isMobile } = useDetectBreakpoints();
+  const { isHyperwebAdded } = useAddHyperwebChain();
 
   const brandLogo = useColorModeValue(
-    '/logos/brand-logo.svg',
-    '/logos/brand-logo-dark.svg'
+    '/logos/hyperweb-logo.svg',
+    '/logos/hyperweb-logo-dark.svg'
   );
 
-  const brandLogoSm = useColorModeValue(
-    '/logos/brand-logo-sm.svg',
-    '/logos/brand-logo-sm-dark.svg'
-  );
+  const brandLogoSm = '/logos/hyperweb-logo-sm.svg';
 
   return (
     <Box
@@ -40,13 +38,13 @@ export const Header = ({ onOpenSidebar }: HeaderProps) => {
             alt="your logo"
             width="0"
             height="0"
-            style={{ width: isMobile ? '40px' : '180px', height: 'auto' }}
+            style={{ width: isMobile ? '30px' : '150px', height: 'auto' }}
           />
         </Link>
       )}
       <Box display="flex" alignItems="center" gap="10px">
-        <AddressButton />
-        <ChainDropdown />
+        {isHyperwebAdded && <AddressButton />}
+        {isHyperwebAdded && <ChainDropdown />}
         <Button
           leftIcon={theme === 'dark' ? 'moonLine' : 'sunLine'}
           px="10px"

templates/chain-admin/components/common/Layout.tsx

@@ -1,14 +1,73 @@
 import Head from 'next/head';
-import { Box, useColorModeValue } from '@interchain-ui/react';
+import { useRouter } from 'next/router';
+import {
+  Box,
+  Callout,
+  Icon,
+  Text,
+  useColorModeValue,
+} from '@interchain-ui/react';
+import { useMemo } from 'react';
 
 import { Header } from './Header';
 import { Footer } from './Footer';
 import { Sidebar } from './Sidebar';
-import { useDisclosure } from '@/hooks';
+import { useDisclosure, useAddHyperwebChain, useStarshipChains } from '@/hooks';
 import styles from '@/styles/layout.module.css';
+import { Button } from './Button';
+import { ROUTES } from './Sidebar';
 
 export function Layout({ children }: { children: React.ReactNode }) {
   const { isOpen, onOpen, onClose } = useDisclosure();
+  const { isLoading } = useStarshipChains();
+  const { isHyperwebAdded, refetchAndAddChain } = useAddHyperwebChain();
+  const router = useRouter();
+
+  const showNotAddedWarning = !isLoading && !isHyperwebAdded;
+
+  const notRunningWarning = (
+    <Callout
+      title="Hyperweb is not running"
+      attributes={{
+        maxWidth: '400px',
+        position: 'absolute',
+        top: '20px',
+        left: '50%',
+        transform: 'translateX(-50%)',
+        display: showNotAddedWarning ? 'block' : 'none',
+      }}
+      iconRender={<Icon name="errorWarningLine" size="$xl" />}
+      intent="error"
+    >
+      <Box display="flex" alignItems="center" gap="$4">
+        <Text>Please run `yarn starship start` and try again.</Text>
+        <Button
+          variant="text"
+          size="sm"
+          color="$text"
+          textDecoration="underline"
+          height="$min"
+          px="0"
+          py="0"
+          onClick={refetchAndAddChain}
+        >
+          Refresh
+        </Button>
+      </Box>
+    </Callout>
+  );
+
+  const renderContent = useMemo(() => {
+    if (router.pathname === ROUTES.HOME)
+      return (
+        <>
+          {notRunningWarning}
+          {children}
+        </>
+      );
+    if (router.pathname === ROUTES.DOCS || isHyperwebAdded) return children;
+    return notRunningWarning;
+  }, [router.pathname, isHyperwebAdded, notRunningWarning, children]);
 
   return (
     <Box
@@ -30,7 +89,9 @@ export function Layout({ children }: { children: React.ReactNode }) {
           flexDirection="column"
         >
           <Header onOpenSidebar={onOpen} />
-          <Box flex="1">{children}</Box>
+          <Box flex="1" position="relative">
+            {renderContent}
+          </Box>
           <Footer />
         </Box>
       </Box>

templates/chain-admin/components/common/Sidebar/NavItems.tsx

@@ -13,41 +13,51 @@ type NavItem = {
   href: string;
 };
 
+export const ROUTES = {
+  HOME: '/',
+  STAKING: '/staking',
+  GOVERNANCE: '/governance',
+  ASSET_LIST: '/asset-list',
+  FAUCET: '/faucet',
+  CONTRACT: '/contract',
+  DOCS: '/docs',
+} as const;
+
 const navItems: NavItem[] = [
   {
     icon: <RiHome7Line size="20px" />,
     label: 'Home',
-    href: '/',
+    href: ROUTES.HOME,
   },
   {
     icon: <RiStackLine size="20px" />,
     label: 'Staking',
-    href: '/staking',
+    href: ROUTES.STAKING,
   },
   {
     icon: <MdOutlineHowToVote size="20px" />,
     label: 'Governance',
-    href: '/governance',
+    href: ROUTES.GOVERNANCE,
   },
   {
     icon: 'coinsLine',
     label: 'Asset List',
-    href: '/asset-list',
+    href: ROUTES.ASSET_LIST,
   },
   {
     icon: <MdOutlineWaterDrop size="20px" />,
     label: 'Faucet',
-    href: '/faucet',
+    href: ROUTES.FAUCET,
   },
   {
     icon: <LuFileJson size="20px" />,
     label: 'Contract',
-    href: '/contract',
+    href: ROUTES.CONTRACT,
   },
   {
     icon: 'document',
     label: 'Docs',
-    href: '/docs',
+    href: ROUTES.DOCS,
   },
 ];
 

templates/chain-admin/components/common/Sidebar/Sidebar.tsx

@@ -16,13 +16,14 @@ export const Sidebar = ({ isOpen, onClose }: SidebarProps) => {
   const { isDesktop } = useDetectBreakpoints();
 
   const brandLogoSrc = useColorModeValue(
-    '/logos/brand-logo.svg',
-    '/logos/brand-logo-dark.svg'
+    '/logos/hyperweb-logo.svg',
+    '/logos/hyperweb-logo-dark.svg'
   );
 
   const desktopSidebar = (
     <Box
-      width="240px"
+      width="$fit"
+      minWidth="240px"
       px="30px"
       pt="30px"
       pb="24px"
@@ -37,13 +38,13 @@ export const Sidebar = ({ isOpen, onClose }: SidebarProps) => {
       borderRightWidth="1px"
       borderRightStyle="solid"
     >
-      <Link href="/" style={{ marginBottom: '50px' }}>
+      <Link href="/" style={{ marginBottom: '40px' }}>
         <Image
           src={brandLogoSrc}
           alt="your logo"
           width="0"
           height="0"
-          style={{ width: '180px', height: 'auto' }}
+          style={{ width: '150px', height: 'auto' }}
         />
       </Link>
       <SidebarContent onClose={onClose} />