Merge pull request #227 from hackdays-io/issue/198-aowheel

Issue/198 aowheel

pkgs/frontend/app/components/icon/RoleIcon.tsx

@@ -1,14 +1,19 @@
-import { FaCircle, FaPeopleGroup } from "react-icons/fa6";
+import { MdOutlineBadge } from "react-icons/md";
 import { CommonIcon } from "../common/CommonIcon";
-import { useEffect, useState } from "react";
+import { FC, useEffect, useState } from "react";
 import { ipfs2https } from "utils/ipfs";
 
 interface RoleIconProps {
   roleImageUrl?: string;
   size?: number | `${number}px` | "full";
+  borderRadius?: string;
 }
 
-export const RoleIcon = ({ roleImageUrl, size = "full" }: RoleIconProps) => {
+export const RoleIcon: FC<RoleIconProps> = ({
+  roleImageUrl,
+  size = "full",
+  borderRadius = "xl",
+}) => {
   const [imageUrl, setImageUrl] = useState<string>();
 
   useEffect(() => {
@@ -23,8 +28,9 @@ export const RoleIcon = ({ roleImageUrl, size = "full" }: RoleIconProps) => {
     <CommonIcon
       imageUrl={imageUrl}
       size={size}
+      borderRadius={borderRadius}
       fallbackIconComponent={
-        <FaCircle
+        <MdOutlineBadge
           style={{
             width: "90%",
             height: "90%",

pkgs/frontend/app/components/roles/MyRole.tsx

@@ -0,0 +1,41 @@
+import { HStack, Image, Text, VStack } from "@chakra-ui/react";
+import { useNavigate } from "@remix-run/react";
+import { FC } from "react";
+import { HatsDetailSchama } from "types/hats";
+import { RoleIcon } from "../icon/RoleIcon";
+import CommonButton from "../common/CommonButton";
+
+interface MyRoleProps {
+  detail?: HatsDetailSchama;
+  imageUri?: string;
+  address?: `0x${string}`;
+  treeId?: string;
+  hatId?: `0x${string}`;
+}
+
+export const MyRole: FC<MyRoleProps> = (params) => {
+  const { address, detail, imageUri, treeId, hatId } = params;
+
+  const navigate = useNavigate();
+
+  return (
+    <HStack w="full" gap={5}>
+      <RoleIcon size="130px" roleImageUrl={imageUri} />
+      <VStack alignItems="start" width="full">
+        <Text textStyle="xl">{detail?.data.name}</Text>
+        <CommonButton
+          onClick={() => navigate(`/${treeId}/${hatId}/${address}`)}
+        >
+          See Detail
+        </CommonButton>
+        <CommonButton
+          onClick={() =>
+            navigate(`/${treeId}/${hatId}/${address}/assistcredit/send`)
+          }
+        >
+          Transfer Assist Credit
+        </CommonButton>
+      </VStack>
+    </HStack>
+  );
+};

pkgs/frontend/app/components/roles/RoleTag.tsx

@@ -0,0 +1,25 @@
+import { HStack, Text, VStack } from "@chakra-ui/react";
+import { FC } from "react";
+import { HatsDetailSchama } from "types/hats";
+import { RoleIcon } from "../icon/RoleIcon";
+
+interface BasicRoleProps {
+  detail?: HatsDetailSchama;
+  imageUri?: string;
+  bgColor?: string;
+}
+
+export const RoleTag: FC<BasicRoleProps> = ({
+  detail,
+  imageUri,
+  bgColor = "yellow.400",
+}) => {
+  return (
+    <HStack rounded="md" backgroundColor={bgColor} gap={1}>
+      <RoleIcon size="30px" roleImageUrl={imageUri} borderRadius="md" />
+      <Text pl={1} pr={2}>
+        {detail?.data?.name}
+      </Text>
+    </HStack>
+  );
+};

pkgs/frontend/app/components/roles/VRole.tsx

@@ -0,0 +1,23 @@
+import { Text, VStack } from "@chakra-ui/react";
+import { FC } from "react";
+import { HatsDetailSchama } from "types/hats";
+import { RoleIcon } from "../icon/RoleIcon";
+
+interface BasicRoleProps {
+  detail?: HatsDetailSchama;
+  imageUri?: string;
+  iconSize?: number | `${number}px` | "full";
+}
+
+export const VRole: FC<BasicRoleProps> = ({
+  detail,
+  imageUri,
+  iconSize = "130px",
+}) => {
+  return (
+    <VStack>
+      <RoleIcon size={iconSize} roleImageUrl={imageUri} />
+      <Text>{detail?.data?.name}</Text>
+    </VStack>
+  );
+};

pkgs/frontend/app/routes/$treeId.tsx

@@ -1,28 +1,79 @@
-import { Box } from "@chakra-ui/react";
-import { useParams } from "@remix-run/react";
+import {
+  AspectRatio,
+  Box,
+  Heading,
+  SimpleGrid,
+  Text,
+  VStack,
+} from "@chakra-ui/react";
+import { Link, useNavigate, useParams } from "@remix-run/react";
 import { useTreeInfo } from "hooks/useHats";
+import { useActiveWallet } from "hooks/useWallet";
 import { FC } from "react";
-import { BasicRole } from "~/components/BasicRole";
+import { FaPlus } from "react-icons/fa6";
+import { MyRole } from "~/components/roles/MyRole";
+import { CommonButton } from "~/components/common/CommonButton";
 import { HatsListItemParser } from "~/components/common/HatsListItemParser";
+import { VRole } from "~/components/roles/VRole";
 
 const WorkspaceTop: FC = () => {
-  const { treeId } = useParams();
+  const { wallet } = useActiveWallet();
+  const me = wallet?.account?.address;
 
+  const { treeId } = useParams();
   const tree = useTreeInfo(Number(treeId));
 
+  const navigate = useNavigate();
+
   return (
-    <Box>
-      {tree?.hats
-        ?.filter((h) => Number(h.levelAtLocalTree) >= 2)
-        .map((h) => (
-          <HatsListItemParser
-            key={h.id}
-            imageUri={h.imageUri}
-            detailUri={h.details}
-            children={(<BasicRole />) as any}
-          />
-        ))}
-    </Box>
+    <>
+      {/* My roles */}
+      <Box my={4}>
+        <Heading py={4}>My Roles</Heading>
+        <VStack>
+          {tree?.hats
+            ?.filter((h) => Number(h.levelAtLocalTree) >= 2)
+            .filter((h) => h.wearers?.some((w) => w.id === me?.toLowerCase()))
+            .map((h) => (
+              <HatsListItemParser
+                key={h.id}
+                imageUri={h.imageUri}
+                detailUri={h.details}
+              >
+                <MyRole address={me} treeId={treeId} hatId={h.id} />
+              </HatsListItemParser>
+            ))}
+        </VStack>
+      </Box>
+
+      {/* All roles */}
+      <Box my={4}>
+        <Heading py={4}>All Roles</Heading>
+        <SimpleGrid columns={4} gap={4}>
+          {tree?.hats
+            ?.filter((h) => Number(h.levelAtLocalTree) >= 2)
+            .map((h) => (
+              <Link key={"allrole" + h.id} to={`/${treeId}/${h.id}`}>
+                <HatsListItemParser imageUri={h.imageUri} detailUri={h.details}>
+                  <VRole iconSize="80px" />
+                </HatsListItemParser>
+              </Link>
+            ))}
+          <VStack>
+            <AspectRatio width="80px" ratio={1}>
+              <CommonButton
+                rounded="xl"
+                onClick={() => navigate(`/${treeId}/roles/new`)}
+                bgColor="gray.300"
+              >
+                <FaPlus />
+              </CommonButton>
+            </AspectRatio>
+            <Text>Add role</Text>
+          </VStack>
+        </SimpleGrid>
+      </Box>
+    </>
   );
 };