Frontend/equip modal fix (#52)

- [x] Fixed connect-wallet issue on the activate wallet page - [x] Removed blur filter from the character detail section in the landing page ![image](https://github.com/Kryha/KREAd/assets/20317699/0c970360-4829-4da8-80eb-28116d93e7ae) - [x] removed item counters from category mode ![image](https://github.com/Kryha/KREAd/assets/20317699/570bad0f-ee75-447e-9ede-292a778585df) - [x] removed all mobile ui ( moved to mobile branch) --------- Co-authored-by: Axel Verheul <[email protected]>
Kryha · Oct 12, 2023 · cacaf78 · cacaf78
1 parent b7a72a1
commit cacaf78
Show file tree

Hide file tree

Showing 26 changed files with 280 additions and 208 deletions.
diff --git a/frontend/src/components/asset-card/styles.ts b/frontend/src/components/asset-card/styles.ts
@@ -92,6 +92,7 @@ export const AssetImageContainer = styled.div`
 export const AssetImage = styled(Img)<ImageProps>`
   width: 100%;
   height: 100%;
+  padding: 24px;
 `;
 export const AssetInfoContainer = styled.div`
   display: flex;

diff --git a/frontend/src/components/atoms/text.ts b/frontend/src/components/atoms/text.ts
@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { color, fontSize, fontWeight } from "../../design";
+import { breakpoints, color, fontSize, fontWeight } from "../../design";
 
 interface TextProps {
   customColor?: string;
@@ -82,6 +82,10 @@ export const TitleText = styled.h3<TextProps>`
     text-transform: capitalize;
   }
   ${({ customColor }): string => `color: ${customColor || color.black};`};
+
+  @media screen and (max-width: ${breakpoints.tablet}) {
+    font-size: 16px;
+  }
 `;
 
 export const BodyText = styled.p<TextProps>`

diff --git a/frontend/src/components/base-route/styles.ts b/frontend/src/components/base-route/styles.ts
@@ -23,7 +23,6 @@ export const TopbarContainer = styled.header<AnimationProps>`
   padding-top: ${margins.medium};
   padding-bottom: ${margins.medium};
   background: transparent;
-  backdrop-filter: blur(5px);
 
   @media screen and (max-width: ${breakpoints.tablet}) {
     padding: ${margins.mini};

diff --git a/frontend/src/components/equipped-item-card/equipped-item-card.tsx b/frontend/src/components/equipped-item-card/equipped-item-card.tsx
@@ -1,5 +1,5 @@
-import { Item, Category } from "../../interfaces";
-import { FC } from "react";
+import { Category, Item } from "../../interfaces";
+import React, { FC } from "react";
 
 import { ItemCard } from "../item-card";
 import { VerticalInfo } from "../vertical-info";

diff --git a/frontend/src/components/equipped-item-card/styles.ts b/frontend/src/components/equipped-item-card/styles.ts
@@ -1,13 +1,15 @@
 import styled from "@emotion/styled";
 import { color } from "../../design";
 import { Id } from "../vertical-info/styles";
+import { ButtonText } from "../atoms";
 
 interface DirectionProps {
   isRight: boolean;
   isSecond?: boolean;
 }
 
 export const EquippedContainer = styled.div<DirectionProps>`
+  position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -18,3 +20,22 @@ export const EquippedContainer = styled.div<DirectionProps>`
     }
   }
 `;
+
+export const ItemCount = styled.div`
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: -8px;
+  right: -8px;
+  font-size: 12px;
+  border-radius: 50%;
+  border: 1px solid ${color.grey};
+  width: 26px;
+  height: 26px;
+  z-index: 1000;
+  background-color: ${color.grey};
+  ${ButtonText} {
+    font-size: 12px;
+  }
+`;
diff --git a/frontend/src/components/main-container/styles.ts b/frontend/src/components/main-container/styles.ts
@@ -7,9 +7,9 @@ interface MainProps {
 export const MainWrap = styled.div<MainProps>`
   display: flex;
   width: 100%;
-  height: 100%;
+  height: 100vh;
   flex-direction: column;
   overflow: hidden;
   position: relative;
-  ${({ height }): string => `height: ${height}px;`};
+  // ${({ height }): string => `height: ${height}px;`};
 `;
diff --git a/frontend/src/components/notification-detail/styles.ts b/frontend/src/components/notification-detail/styles.ts
@@ -21,15 +21,15 @@ export const ToastContainer = styled.div`
 `;
 
 export const Tick = styled(TickIcon)`
-  margin: 0px;
+  margin: 0;
   width: 9px;
   height: 6px;
 `;
 
 export const Exclamation = styled(ExclamationIcon)`
   width: 2px;
   height: 8px;
-  margin: 0px;
+  margin: 0;
 `;
 
 export const IconContainer = styled.div`
@@ -62,6 +62,14 @@ export const ArrowContainer = styled.div`
   margin-right: 14px;
 `;
 
+export const NotificationItemCardContainer = styled.div`
+  display: flex;
+  transition: transform 0.3s ease; /* Add CSS transition for smooth animation */
+  border-radius: ${margins.medium};
+  border: 1px solid ${color.grey};
+  width: 100%;
+`;
+
 export const Close = styled(CloseIcon)`
   width: ${margins.small};
   height: ${margins.small};
@@ -72,14 +80,14 @@ export const ReturnContainer = styled.div`
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  padding: 0px;
+  padding: 0;
 `;
 
 export const InfoContainer = styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  padding: 0px;
+  padding: 0;
   gap: 4px;
 `;
 

diff --git a/frontend/src/constants.ts b/frontend/src/constants.ts
@@ -8,8 +8,6 @@ export const CONFIRMATION_STEP = 2 as const;
 export const MINTING_COST = 5000000 as const;
 export const MONEY_DECIMALS = 6 as const;
 export const MINTING_COST_USD = MINTING_COST / Number("1".padEnd(MONEY_DECIMALS + 1, "0"));
-
-
 export const SUCCESSFUL_MINT_REPONSE_MSG = "Character mint successful, use attached public facet to purchase" as const;
 export const SELL_CHARACTER_DESCRIPTION = "Sell Character in KREAd marketplace" as const;
 export const SELL_ITEM_DESCRIPTION = "Sell Item in KREAd marketplace" as const;
@@ -134,7 +132,8 @@ export type InteractionMode = typeof ITEM_MODE | typeof MAIN_MODE | typeof CATEG
 export const CHARACTER_HEIGHT = 1190.5511 as const;
 export const CHARACTER_WIDTH = 841.8898 as const;
 
-export const NETWORK_CONFIG = import.meta.env.VITE_NETWORK_CONFIG || ("https://emerynet.agoric.net/network-config" as const);
+// export const NETWORK_CONFIG = import.meta.env.VITE_NETWORK_CONFIG || ("https://emerynet.agoric.net/network-config" as const);
+export const NETWORK_CONFIG = import.meta.env.VITE_NETWORK_CONFIG || ("https://main.agoric.net/network-config" as const);
 
 export const localBridgeHref = "http://localhost:3000/wallet/bridge.html" as const;
 export const prodBridgeHref = "https://wallet.agoric.app/wallet/bridge.html" as const;
@@ -165,7 +164,6 @@ export const PINATA_GATEWAY = import.meta.env.VITE_PINATA_GATEWAY || "https://pi
 
 export const KREAD_CONTRACT_ERRORS = {
   invalidName: "Offer error Error: (a string)",
-
-}
+};
 export const PLATFORM_RATE = 0.03;
 export const ROYALTY_RATE = 0.1;
diff --git a/frontend/src/containers/canvas/canvas-notification/canvas-notification.tsx b/frontend/src/containers/canvas/canvas-notification/canvas-notification.tsx
@@ -6,13 +6,12 @@ import {
   Close,
   Divider,
   DividerContainer,
-  Exclamation,
   IconContainer,
   InfoContainer,
   ReturnContainer,
   Tick,
-  ToastActions,
   ToastContainer,
+  ToastContent,
   ToastHeader,
   ToastTitle,
 } from "./styles";
@@ -30,7 +29,7 @@ export const CanvasNotification: FC<NotificationDetailProps> = ({ isError, title
   return (
     <ToastContainer>
       <ToastHeader>
-        <IconContainer>{isError ? <Exclamation /> : <Tick />}</IconContainer>
+        <IconContainer>{isError ? "!" : <Tick />}</IconContainer>
         <InfoContainer>
           <ToastTitle>{title}</ToastTitle>
           <ButtonText>{info}</ButtonText>
@@ -44,7 +43,7 @@ export const CanvasNotification: FC<NotificationDetailProps> = ({ isError, title
           </ReturnContainer>
         </DividerContainer>
       </ToastHeader>
-      <ToastActions>{children}</ToastActions>
+      <ToastContent>{children}</ToastContent>
     </ToastContainer>
   );
 };
diff --git a/frontend/src/containers/canvas/canvas-notification/styles.ts b/frontend/src/containers/canvas/canvas-notification/styles.ts
@@ -1,8 +1,24 @@
 import styled from "@emotion/styled";
 import { HeaderHorizontalDivider, NavigationTitle } from "../../../components";
 import { color, margins } from "../../../design";
-import { CloseIcon, ExclamationIcon, TickIcon } from "../../../assets";
+import { CloseIcon, TickIcon } from "../../../assets";
 
+export const ToastContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: ${margins.medium};
+  width: 100%;
+`;
+
+export const NotificationContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: ${margins.medium};
+`;
 export const ToastContainer = styled.div`
   display: flex;
   flex-direction: column;
@@ -23,13 +39,15 @@ export const ToastHeader = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  align-items: center;
   gap: ${margins.medium};
 `;
 
 export const ToastActions = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  width: 100%;
 `;
 
 export const Tick = styled(TickIcon)`
@@ -38,23 +56,15 @@ export const Tick = styled(TickIcon)`
   height: 6px;
 `;
 
-export const Exclamation = styled(ExclamationIcon)`
-  width: 2px;
-  height: 8px;
-  margin: 0;
-`;
-
 export const IconContainer = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: ${margins.nano};
   border-radius: 50%;
-  width: 18px;
-  height: 18px;
+  width: 24px;
+  height: 24px;
   border: 1px solid ${color.black};
-  min-width: 18px;
 `;
 
 export const ToastTitle = styled(NavigationTitle)``;

diff --git a/frontend/src/containers/canvas/category-cards/category-cards.tsx b/frontend/src/containers/canvas/category-cards/category-cards.tsx
@@ -1,16 +1,30 @@
 import React, { FC, useMemo } from "react";
 import { ItemCard, LoadingPage } from "../../../components";
-import { useSelectedCharacter } from "../../../service";
-import { useViewport } from "../../../hooks";
+import { useGetItemsInInventory, useSelectedCharacter } from "../../../service";
+import { useIsMobile, useViewport } from "../../../hooks";
 import { useCharacterBuilder } from "../../../context/character-builder-context";
-import { CategoryCard, CategoryCardsContainer, CategoryCardsWrapper, CategoryInfo, CategoryInfoCategory } from "./style";
+import { CategoryCard, CategoryCardsContainer, CategoryCardsWrapper, CategoryImage, CategoryInfo, CategoryInfoCategory } from "./style";
 import { CATEGORY, ITEM_MODE } from "../../../constants";
+import { breakpoints } from "../../../design";
+
+export type ItemCategoryCounts = {
+  [key: string]: number;
+};
 
 export const CategoryCards: FC = () => {
   const [selectedCharacter, isLoading] = useSelectedCharacter();
   const items = useMemo(() => selectedCharacter?.equippedItems || {}, [selectedCharacter]);
   const { selectedAssetCategory, setSelectedAssetCategory, setInteractionMode } = useCharacterBuilder();
   const itemKeys = Object.keys(CATEGORY) as (keyof typeof CATEGORY)[];
+  const [availableItems] = useGetItemsInInventory();
+  const isMobile = useIsMobile(breakpoints.tablet);
+
+  const unequippedAvailableItems = availableItems.filter((item) => item.equippedTo === "");
+  const itemCategoryCounts: ItemCategoryCounts = unequippedAvailableItems.reduce((countObj: ItemCategoryCounts, item) => {
+    const { category } = item;
+    countObj[category] = (countObj[category] || 0) + 1;
+    return countObj;
+  }, {});
 
   const { height, width } = useViewport();
 
@@ -26,21 +40,29 @@ export const CategoryCards: FC = () => {
   return (
     <CategoryCardsWrapper height={height} width={width}>
       <CategoryCardsContainer>
-        {itemKeys.map((itemKey) => (
-          <CategoryCard
-            key={itemKey}
-            isSelected={selectedAssetCategory === itemKey}
-            onClick={() => {
-              setSelectedAssetCategory(itemKey);
-              setInteractionMode(ITEM_MODE);
-            }}
-          >
-            <ItemCard key={itemKey} item={items[itemKey]} image={items[itemKey]?.thumbnail} />
-            <CategoryInfo>
-              <CategoryInfoCategory>{itemKey}</CategoryInfoCategory>
-            </CategoryInfo>
-          </CategoryCard>
-        ))}
+        {itemKeys.map((itemKey) => {
+          // Ensure itemKey is never undefined
+          if (!itemKey) return null;
+
+          return (
+            <CategoryCard
+              key={itemKey}
+              isSelected={selectedAssetCategory === itemKey}
+              onClick={() => {
+                setSelectedAssetCategory(itemKey);
+                setInteractionMode(ITEM_MODE);
+              }}
+            >
+              <CategoryImage>
+                <ItemCard key={itemKey} item={items[itemKey]} image={items[itemKey]?.thumbnail} />
+              </CategoryImage>
+              <CategoryInfo>
+                <CategoryInfoCategory>{itemKey}</CategoryInfoCategory>
+                {!isMobile && <CategoryInfoCategory>{itemCategoryCounts[itemKey] || 0} available in inventory</CategoryInfoCategory>}
+              </CategoryInfo>
+            </CategoryCard>
+          );
+        })}
       </CategoryCardsContainer>
     </CategoryCardsWrapper>
   );