make role parser

pkgs/frontend/app/components/BasicRole.tsx

@@ -0,0 +1,19 @@
+import { Box, Image, Text } from "@chakra-ui/react";
+import { FC } from "react";
+import { HatsDetailSchama } from "types/hats";
+
+interface BasicRoleProps {
+  detail?: HatsDetailSchama;
+  imageUri?: string;
+}
+
+export const BasicRole: FC<BasicRoleProps> = (params?) => {
+  const { detail, imageUri } = params!;
+
+  return (
+    <Box>
+      <Text>{detail?.data.name}</Text>
+      <Image src={imageUri} />
+    </Box>
+  );
+};

pkgs/frontend/app/components/common/HatsListItemParser.tsx

@@ -0,0 +1,50 @@
+import {
+  Children,
+  cloneElement,
+  FC,
+  isValidElement,
+  ReactNode,
+  useEffect,
+  useState,
+} from "react";
+import { ipfs2https } from "utils/ipfs";
+import { HatsDetailSchama } from "types/hats";
+import axios from "axios";
+
+interface HatsListItemParserProps {
+  children: ReactNode;
+  detailUri?: string;
+  imageUri?: string;
+}
+
+export const HatsListItemParser: FC<HatsListItemParserProps> = (props) => {
+  const parsedImageUri = props.imageUri
+    ? ipfs2https(props.imageUri)
+    : props.imageUri;
+  const parsedDetailUri = props.detailUri
+    ? ipfs2https(props.detailUri)
+    : props.detailUri;
+
+  const [detail, setDetail] = useState<HatsDetailSchama>();
+
+  useEffect(() => {
+    if (!parsedDetailUri) return;
+
+    const fetch = async () => {
+      const { data } = await axios.get(parsedDetailUri);
+      setDetail(data);
+    };
+
+    fetch();
+  }, [parsedDetailUri]);
+
+  return (
+    <>
+      {Children.map(props.children, (child) =>
+        isValidElement(child)
+          ? cloneElement(child, { imageUri: parsedImageUri, detail } as any)
+          : child
+      )}
+    </>
+  );
+};

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

@@ -0,0 +1,37 @@
+import { FaCircle, FaPeopleGroup } from "react-icons/fa6";
+import { CommonIcon } from "../common/CommonIcon";
+import { useEffect, useState } from "react";
+import { ipfs2https } from "utils/ipfs";
+
+interface RoleIconProps {
+  roleImageUrl?: string;
+  size?: number | "full";
+}
+
+export const RoleIcon = ({ roleImageUrl, size = "full" }: RoleIconProps) => {
+  const [imageUrl, setImageUrl] = useState<string>();
+
+  useEffect(() => {
+    if (roleImageUrl?.includes("ipfs://")) {
+      setImageUrl(ipfs2https(roleImageUrl));
+    } else {
+      setImageUrl(roleImageUrl);
+    }
+  }, [roleImageUrl]);
+
+  return (
+    <CommonIcon
+      imageUrl={imageUrl}
+      size={size}
+      fallbackIconComponent={
+        <FaCircle
+          style={{
+            width: "90%",
+            height: "90%",
+            objectFit: "cover",
+          }}
+        />
+      }
+    />
+  );
+};

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

@@ -0,0 +1,29 @@
+import { Box } from "@chakra-ui/react";
+import { useParams } from "@remix-run/react";
+import { useTreeInfo } from "hooks/useHats";
+import { FC } from "react";
+import { BasicRole } from "~/components/BasicRole";
+import { HatsListItemParser } from "~/components/common/HatsListItemParser";
+
+const WorkspaceTop: FC = () => {
+  const { treeId } = useParams();
+
+  const tree = useTreeInfo(Number(treeId));
+
+  return (
+    // filterでlevelAtLocalTreeが0以上のものだけを表示にしているが、実際には2以上のものだけを表示される
+    <Box>
+      {tree?.hats
+        ?.filter((h) => Number(h.levelAtLocalTree) >= 0)
+        .map((h) => (
+          <HatsListItemParser
+            imageUri={h.imageUri}
+            detailUri={h.details}
+            children={(<BasicRole />) as any}
+          />
+        ))}
+    </Box>
+  );
+};
+
+export default WorkspaceTop;

pkgs/frontend/hooks/useHats.ts

@@ -1,12 +1,12 @@
 import { hatIdToTreeId } from "@hatsprotocol/sdk-v1-core";
-import { Hat, HatsSubgraphClient } from "@hatsprotocol/sdk-v1-subgraph";
+import { Hat, HatsSubgraphClient, Tree } from "@hatsprotocol/sdk-v1-subgraph";
 import { HATS_ABI } from "abi/hats";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { Address, decodeEventLog, encodeFunctionData } from "viem";
 import { base, optimism, sepolia } from "viem/chains";
 import { HATS_ADDRESS } from "./useContracts";
 import { useSmartAccountClient } from "./useWallet";
-import { publicClient } from "./useViem";
+import { currentChain, publicClient } from "./useViem";
 
 // ###############################################################
 // Read with subgraph
@@ -30,6 +30,30 @@ export const hatsSubgraphClient = new HatsSubgraphClient({
   },
 });
 
+export const useTreeInfo = (treeId: number) => {
+  const [treeInfo, setTreeInfo] = useState<Tree>();
+
+  const { getTreeInfo } = useHats();
+
+  useEffect(() => {
+    const fetch = async () => {
+      if (!treeId) return;
+      const tree = await getTreeInfo({
+        chainId: currentChain.id,
+        treeId: treeId,
+      });
+
+      if (!tree) return;
+
+      setTreeInfo(tree);
+    };
+
+    fetch();
+  }, [treeId]);
+
+  return treeInfo;
+};
+
 /**
  * Hats 向けの React Hooks
  * @returns
@@ -46,8 +70,6 @@ export const useHats = () => {
    */
   const getTreeInfo = useCallback(
     async (params: { chainId: number; treeId: number }) => {
-      if (!smartAccountClient) return;
-
       setIsLoading(true);
 
       try {
@@ -80,7 +102,7 @@ export const useHats = () => {
         setIsLoading(false);
       }
     },
-    [smartAccountClient]
+    []
   );
 
   /**
@@ -90,8 +112,6 @@ export const useHats = () => {
    */
   const getWearersInfo = useCallback(
     async (params: { chainId: number; hatId: string }) => {
-      if (!smartAccountClient) return;
-
       setIsLoading(true);
 
       try {
@@ -111,7 +131,7 @@ export const useHats = () => {
         setIsLoading(false);
       }
     },
-    [smartAccountClient]
+    []
   );
 
   /**
@@ -121,7 +141,7 @@ export const useHats = () => {
    */
   const getWearerInfo = useCallback(
     async (params: { chainId: number; walletAddress: string }) => {
-      if (!smartAccountClient) return;
+      if (!params.walletAddress) return;
 
       setIsLoading(true);
 
@@ -156,16 +176,14 @@ export const useHats = () => {
         setIsLoading(false);
       }
     },
-    [smartAccountClient]
+    []
   );
 
   /**
    * HatsTimeframeModuleコントラクトのアドレスを取得するコールバック関数
    */
   const getHatsTimeframeModuleAddress = useCallback(
     async (params: { chainId: number; hatId: string }) => {
-      if (!smartAccountClient) return;
-
       setIsLoading(true);
 
       try {
@@ -202,7 +220,7 @@ export const useHats = () => {
         setIsLoading(false);
       }
     },
-    [smartAccountClient]
+    []
   );
 
   /**

pkgs/frontend/package.json

@@ -27,7 +27,6 @@
     "@solana/web3.js": "^1.95.5",
     "axios": "^1.7.9",
     "isbot": "^5.1.11",
-    "lucide-react": "^0.399.0",
     "namestone-sdk": "^0.2.11",
     "next-themes": "^0.4.3",
     "permissionless": "^0.2.20",

pkgs/frontend/types/hats.ts

@@ -0,0 +1,20 @@
+export interface HatsDetailSchama {
+  type: "1.0";
+  data: {
+    name: string;
+    description?: string;
+    responsabilities?: {
+      label: string;
+      description?: string | undefined;
+      link?: string | undefined;
+      imageUrl?: string | undefined;
+    }[];
+    authorities?: {
+      label: string;
+      description?: string | undefined;
+      link?: string | undefined;
+      imageUrl?: string | undefined;
+      gate?: string | undefined;
+    }[];
+  };
+}

pkgs/frontend/utils/ipfs.ts

@@ -53,5 +53,5 @@ export const ipfsUploadFile = async (file: File) => {
 export const ipfs2https = (ipfsUri: string) => {
   const { pinataGateway } = getPinataConfig();
   const cid = ipfsUri.replace("ipfs://", "");
-  return `${pinataGateway}/ipfs/${cid}`;
+  return `${pinataGateway}/ipfs/${cid}?pinataGatewayToken=M-iEBglWoUCZWJYsihe1IRrngs7HIGeIr3s5lObVw96hv7GTuCw1QrlmnNtwvuXt`;
 };

yarn.lock

@@ -12435,11 +12435,6 @@ lru_map@^0.3.3:
   resolved "https://registry.yarnpkg.com/lru_map/-/lru_map-0.3.3.tgz#b5c8351b9464cbd750335a79650a0ec0e56118dd"
   integrity sha512-Pn9cox5CsMYngeDbmChANltQl+5pi6XmTrraMSzhPmMBbmgcxmqWry0U3PGapCU1yB4/LqCcom7qhHZiF/jGfQ==
 
-lucide-react@^0.399.0:
-  version "0.399.0"
-  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.399.0.tgz#cb072fd99fa751083cc08fba7266f1c7bff9e280"
-  integrity sha512-UyTNa3djBISdzL2UktgCrESXexQXaDQWi/WsDkbw6fBFfHlapajR58WoR+gxQ4laxfEyiHmoFrEIM3V+5XOVQg==
-
 make-error@^1.1.1:
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2"