feat: names changes

CheesecakeLabs · Sep 15, 2023 · ca40752 · ca40752
1 parent 7744101
commit ca40752
Show file tree

Hide file tree

Showing 15 changed files with 205 additions and 125 deletions.
diff --git a/frontend/src/components/atoms/nav-item/index.tsx b/frontend/src/components/atoms/nav-item/index.tsx
@@ -11,11 +11,13 @@ interface INavItemProps extends FlexProps {
   children: ReactNode
   path: string
   highlightMenu: PathRoute
+  comingSoon?: boolean
 }
 export const NavItem: React.FC<INavItemProps> = ({
   icon,
   path,
   highlightMenu,
+  comingSoon,
   children,
   ...rest
 }: INavItemProps) => {
@@ -28,6 +30,7 @@ export const NavItem: React.FC<INavItemProps> = ({
   return (
     <Link
       onClick={(): void => {
+        if (comingSoon) return
         if (path === PathRoute.BLOCKCHAIN_EXPLORER) {
           window.open(`${STELLAR_EXPERT_URL}`, '_blank')
           return
@@ -39,14 +42,13 @@ export const NavItem: React.FC<INavItemProps> = ({
     >
       <Flex
         align="center"
-        cursor="pointer"
         fontSize="sm"
         mb={2}
         fontWeight={400}
         color={isCurrent() ? 'black' : 'gray.900'}
         _dark={isCurrent() ? { color: 'white' } : { color: 'gray.900' }}
         _hover={{
-          cursor: 'pointer',
+          cursor: comingSoon ? 'default' : 'pointer',
         }}
         pl="2rem"
         py="0.375rem"

diff --git a/frontend/src/components/molecules/sidebar-content/index.tsx b/frontend/src/components/molecules/sidebar-content/index.tsx
@@ -4,6 +4,7 @@ import {
   CloseButton,
   Flex,
   Spacer,
+  Tag,
   Text,
 } from '@chakra-ui/react'
 
@@ -69,8 +70,23 @@ export const SidebarContent: React.FC<ISidebarProps> = ({
               icon={item.icon}
               path={item.path}
               highlightMenu={highlightMenu}
+              comingSoon={item.comingSoon}
             >
               {item.name}
+              {item.comingSoon && (
+                <Tag
+                  fontSize="10px"
+                  py={0}
+                  px="0.5rem"
+                  w="fit-content"
+                  variant="blue_sky"
+                  bg="gray.400"
+                  color="black.900"
+                  mb="0.25rem"
+                >
+                  Coming soon
+                </Tag>
+              )}
             </NavItem>
           </Box>
         ))}
@@ -91,7 +107,7 @@ export const SidebarContent: React.FC<ISidebarProps> = ({
         >
           Administration
         </NavItem>
-        <Flex  mt="1rem" alignItems="center">
+        <Flex mt="1rem" alignItems="center">
           <Flex
             fill="black"
             _dark={{ fill: 'white' }}

diff --git a/frontend/src/components/organisms/sidebar/index.tsx b/frontend/src/components/organisms/sidebar/index.tsx
@@ -1,13 +1,23 @@
-import { Box, Drawer, DrawerContent, Flex, useDisclosure } from '@chakra-ui/react';
-import React, { ReactNode } from 'react';
-
-
-
-import { PathRoute } from 'components/enums/path-route';
-import { ContractIcon, DashboardIcon, ExplorerIcon, HomeIcon, PaymentsIcon, VaultIcon } from 'components/icons';
-import { SidebarContent } from 'components/molecules';
-import { Header } from 'components/molecules/header';
+import {
+  Box,
+  Drawer,
+  DrawerContent,
+  Flex,
+  useDisclosure,
+} from '@chakra-ui/react'
+import React, { ReactNode } from 'react'
 
+import { PathRoute } from 'components/enums/path-route'
+import {
+  ContractIcon,
+  DashboardIcon,
+  ExplorerIcon,
+  HomeIcon,
+  PaymentsIcon,
+  VaultIcon,
+} from 'components/icons'
+import { SidebarContent } from 'components/molecules'
+import { Header } from 'components/molecules/header'
 
 interface IProps {
   highlightMenu: PathRoute
@@ -19,6 +29,7 @@ export interface ILinkItemProps {
   icon: ReactNode
   path: string
   alerts?: number
+  comingSoon?: boolean
 }
 const linkItems: ILinkItemProps[] = [
   {
@@ -35,6 +46,7 @@ const linkItems: ILinkItemProps[] = [
     name: 'Smart Contracts',
     icon: <ContractIcon />,
     path: PathRoute.SOROBAN_SMART_CONTRACTS,
+    comingSoon: true,
   },
   {
     name: 'Treasury',
@@ -89,4 +101,4 @@ export const Sidebar: React.FC<IProps> = ({ children, highlightMenu }) => {
       </Flex>
     </Box>
   )
-}
+}
diff --git a/frontend/src/components/templates/dashboards/components/asset-item/index.tsx b/frontend/src/components/templates/dashboards/components/asset-item/index.tsx
@@ -4,20 +4,19 @@ import React, { Dispatch, SetStateAction } from 'react'
 import { getCurrencyIcon } from 'utils/constants/constants'
 import { toCrypto } from 'utils/formatter'
 
-import { ChevronDownIcon } from 'components/icons'
-
 interface IAssetItem {
   asset: Hooks.UseAssetsTypes.IAssetDto
   assetSelected: Hooks.UseAssetsTypes.IAssetDto | undefined
   setAssetSelected: Dispatch<
     SetStateAction<Hooks.UseAssetsTypes.IAssetDto | undefined>
   >
+  onSelectAsset(asset: Hooks.UseAssetsTypes.IAssetDto): void
 }
 
 export const AssetItem: React.FC<IAssetItem> = ({
   asset,
   assetSelected,
-  setAssetSelected,
+  onSelectAsset,
 }) => {
   return (
     <Container
@@ -29,8 +28,9 @@ export const AssetItem: React.FC<IAssetItem> = ({
       cursor="pointer"
       bg={asset.id === assetSelected?.id ? 'primary.normal' : undefined}
       onClick={(): void => {
-        setAssetSelected(assetSelected?.id === asset.id ? undefined : asset)
+        onSelectAsset(asset)
       }}
+      _hover={asset.id === assetSelected?.id ? undefined : { bg: 'purple.50' }}
     >
       <Flex alignItems="center" h="full">
         <Box
@@ -56,13 +56,6 @@ export const AssetItem: React.FC<IAssetItem> = ({
             {toCrypto(Number(asset.assetData?.amount || 0))}
           </Text>
         </Flex>
-        {asset.id === assetSelected?.id ? (
-          <Box fill="white">
-            <ChevronDownIcon />
-          </Box>
-        ) : (
-          <ChevronDownIcon />
-        )}
       </Flex>
     </Container>
   )