From 1ee4c37d81c9f0d04a6c6820f0edd8a79daec2b7 Mon Sep 17 00:00:00 2001
From: yawn <69970183+yawn-c111@users.noreply.github.com>
Date: Mon, 16 Dec 2024 21:14:37 +0900
Subject: [PATCH 01/14] wip: tree id

---
 pkgs/frontend/.env.example                    |   6 +-
 pkgs/frontend/abi/bigbang.ts                  | 240 +++++++++++++++---
 pkgs/frontend/app/components/Header.tsx       |   7 +-
 .../app/components/common/CommonIcon.tsx      |   6 +-
 .../app/components/common/CommonInput.tsx     |   5 +
 .../app/components/common/CommonTextarea.tsx  |  21 +-
 .../app/components/icon/WorkspaceIcon.tsx     |   1 +
 pkgs/frontend/app/root.tsx                    |   2 +-
 pkgs/frontend/app/routes/$treeId.tsx          |  17 ++
 pkgs/frontend/app/routes/workspace._index.tsx | 115 +++++++++
 pkgs/frontend/app/routes/workspace.new.tsx    | 182 +++++++++++++
 pkgs/frontend/app/routes/workspace.tsx        |   7 -
 pkgs/frontend/hooks/useBigBang.ts             |  52 ++--
 pkgs/frontend/hooks/useHats.ts                |  30 +--
 pkgs/frontend/hooks/useWallet.ts              |  73 +++++-
 15 files changed, 664 insertions(+), 100 deletions(-)
 create mode 100644 pkgs/frontend/app/routes/$treeId.tsx
 create mode 100644 pkgs/frontend/app/routes/workspace._index.tsx
 create mode 100644 pkgs/frontend/app/routes/workspace.new.tsx
 delete mode 100644 pkgs/frontend/app/routes/workspace.tsx

diff --git a/pkgs/frontend/.env.example b/pkgs/frontend/.env.example
index 86c625b..4b9cfab 100644
--- a/pkgs/frontend/.env.example
+++ b/pkgs/frontend/.env.example
@@ -2,13 +2,13 @@ VITE_CHAIN_ID=11155111
 
 VITE_PRIVY_APP_ID=
 
-VITE_BIGBANG_ADDRESS=0x5d7a64Cc808294C516076d371685ed4E6aDd6337
+VITE_BIGBANG_ADDRESS=0x08B4c53b98f46B14E2AD00189C2Aa3b9F3d0c8f3
 
 VITE_HATS_ADDRESS=0x3bc1A0Ad72417f2d411118085256fC53CBdDd137
 
-VITE_FRACTION_TOKEN_ADDRESS=0xb8f7ca7a5b1e457b8735884419e114f90d53e1d5
+VITE_FRACTION_TOKEN_ADDRESS=0xd921517fdF141d97C289bDb9686f51A1375dCc69
 
-VITE_SPLITS_CREATOR_ADDRESS=0x9c3648df4bb82fdf067a9b083900a986f9b27e9a
+VITE_SPLITS_CREATOR_ADDRESS=0x6b5d2e27ff74e9adf4d23aebb9efb52867823583
 
 VITE_PIMLICO_API_KEY=
 
diff --git a/pkgs/frontend/abi/bigbang.ts b/pkgs/frontend/abi/bigbang.ts
index 96fde08..0c494e1 100644
--- a/pkgs/frontend/abi/bigbang.ts
+++ b/pkgs/frontend/abi/bigbang.ts
@@ -1,44 +1,85 @@
 export const BIGBANG_ABI = [
+  {
+    inputs: [],
+    name: "InvalidInitialization",
+    type: "error",
+  },
+  {
+    inputs: [],
+    name: "NotInitializing",
+    type: "error",
+  },
   {
     inputs: [
       {
         internalType: "address",
-        name: "_trustedForwarder",
+        name: "owner",
         type: "address",
       },
+    ],
+    name: "OwnableInvalidOwner",
+    type: "error",
+  },
+  {
+    inputs: [
       {
         internalType: "address",
-        name: "_hatsAddress",
+        name: "account",
         type: "address",
       },
+    ],
+    name: "OwnableUnauthorizedAccount",
+    type: "error",
+  },
+  {
+    anonymous: false,
+    inputs: [
       {
+        indexed: true,
         internalType: "address",
-        name: "_hatsModuleFactory",
+        name: "owner",
         type: "address",
       },
       {
-        internalType: "address",
-        name: "_hatsTimeFrameModule_IMPL",
-        type: "address",
+        indexed: true,
+        internalType: "uint256",
+        name: "topHatId",
+        type: "uint256",
       },
       {
-        internalType: "address",
-        name: "_splitsCreatorFactory",
-        type: "address",
+        indexed: true,
+        internalType: "uint256",
+        name: "hatterHatId",
+        type: "uint256",
       },
       {
+        indexed: false,
         internalType: "address",
-        name: "_splitFactoryV2",
+        name: "hatsTimeFrameModule",
         type: "address",
       },
       {
+        indexed: false,
         internalType: "address",
-        name: "_fractionToken",
+        name: "splitCreator",
         type: "address",
       },
     ],
-    stateMutability: "nonpayable",
-    type: "constructor",
+    name: "Executed",
+    type: "event",
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: false,
+        internalType: "uint64",
+        name: "version",
+        type: "uint64",
+      },
+    ],
+    name: "Initialized",
+    type: "event",
   },
   {
     anonymous: false,
@@ -46,30 +87,31 @@ export const BIGBANG_ABI = [
       {
         indexed: true,
         internalType: "address",
-        name: "owner",
+        name: "previousOwner",
         type: "address",
       },
       {
         indexed: true,
-        internalType: "uint256",
-        name: "topHatId",
-        type: "uint256",
-      },
-      {
-        indexed: false,
         internalType: "address",
-        name: "hatsTimeFrameModule",
+        name: "newOwner",
         type: "address",
       },
+    ],
+    name: "OwnershipTransferred",
+    type: "event",
+  },
+  {
+    inputs: [],
+    name: "FractionToken",
+    outputs: [
       {
-        indexed: false,
         internalType: "address",
-        name: "splitCreator",
+        name: "",
         type: "address",
       },
     ],
-    name: "Executed",
-    type: "event",
+    stateMutability: "view",
+    type: "function",
   },
   {
     inputs: [],
@@ -123,6 +165,19 @@ export const BIGBANG_ABI = [
     stateMutability: "view",
     type: "function",
   },
+  {
+    inputs: [],
+    name: "SplitsFactoryV2",
+    outputs: [
+      {
+        internalType: "address",
+        name: "",
+        type: "address",
+      },
+    ],
+    stateMutability: "view",
+    type: "function",
+  },
   {
     inputs: [
       {
@@ -168,16 +223,46 @@ export const BIGBANG_ABI = [
     type: "function",
   },
   {
-    inputs: [],
-    name: "fractionToken",
-    outputs: [
+    inputs: [
       {
         internalType: "address",
-        name: "",
+        name: "_trustedForwarder",
+        type: "address",
+      },
+      {
+        internalType: "address",
+        name: "_hatsAddress",
+        type: "address",
+      },
+      {
+        internalType: "address",
+        name: "_hatsModuleFactory",
+        type: "address",
+      },
+      {
+        internalType: "address",
+        name: "_hatsTimeFrameModule_IMPL",
+        type: "address",
+      },
+      {
+        internalType: "address",
+        name: "_splitsCreatorFactory",
+        type: "address",
+      },
+      {
+        internalType: "address",
+        name: "_splitFactoryV2",
+        type: "address",
+      },
+      {
+        internalType: "address",
+        name: "_fractionToken",
         type: "address",
       },
     ],
-    stateMutability: "view",
+    name: "initialize",
+    outputs: [],
+    stateMutability: "nonpayable",
     type: "function",
   },
   {
@@ -201,7 +286,7 @@ export const BIGBANG_ABI = [
   },
   {
     inputs: [],
-    name: "splitFactoryV2",
+    name: "owner",
     outputs: [
       {
         internalType: "address",
@@ -214,15 +299,100 @@ export const BIGBANG_ABI = [
   },
   {
     inputs: [],
-    name: "trustedForwarder",
-    outputs: [
+    name: "renounceOwnership",
+    outputs: [],
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    inputs: [
       {
         internalType: "address",
-        name: "",
+        name: "_fractionToken",
         type: "address",
       },
     ],
-    stateMutability: "view",
+    name: "setFractionToken",
+    outputs: [],
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    inputs: [
+      {
+        internalType: "address",
+        name: "_hats",
+        type: "address",
+      },
+    ],
+    name: "setHats",
+    outputs: [],
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    inputs: [
+      {
+        internalType: "address",
+        name: "_hatsModuleFactory",
+        type: "address",
+      },
+    ],
+    name: "setHatsModuleFactory",
+    outputs: [],
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    inputs: [
+      {
+        internalType: "address",
+        name: "_hatsTimeFrameModuleImpl",
+        type: "address",
+      },
+    ],
+    name: "setHatsTimeFrameModuleImpl",
+    outputs: [],
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    inputs: [
+      {
+        internalType: "address",
+        name: "_splitsCreatorFactory",
+        type: "address",
+      },
+    ],
+    name: "setSplitsCreatorFactory",
+    outputs: [],
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    inputs: [
+      {
+        internalType: "address",
+        name: "_splitsFactoryV2",
+        type: "address",
+      },
+    ],
+    name: "setSplitsFactoryV2",
+    outputs: [],
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    inputs: [
+      {
+        internalType: "address",
+        name: "newOwner",
+        type: "address",
+      },
+    ],
+    name: "transferOwnership",
+    outputs: [],
+    stateMutability: "nonpayable",
     type: "function",
   },
 ] as const;
diff --git a/pkgs/frontend/app/components/Header.tsx b/pkgs/frontend/app/components/Header.tsx
index 9009c5c..3063141 100644
--- a/pkgs/frontend/app/components/Header.tsx
+++ b/pkgs/frontend/app/components/Header.tsx
@@ -5,7 +5,7 @@ import { UserIcon } from "./icon/UserIcon";
 import { useLocation } from "@remix-run/react";
 
 const NO_HEADER_PATHS: string[] = ["/login", "/signup"]; // 適宜ヘッダーが不要なページのパスを追加
-const WORKSPACES_PATHS: string[] = ["/workspaces"]; // 適宜ワークスペースが未選択な状態のページのパスを追加
+const WORKSPACES_PATHS: string[] = ["/workspace", "/workspace/new"]; // 適宜ワークスペースが未選択な状態のページのパスを追加
 const HEADER_SIZE: number = 12; // 偶数のnumberだとアイコンが対応しているため望ましい
 
 const headerTextStyle = {
@@ -22,6 +22,8 @@ enum HeaderType {
 }
 
 export const Header = () => {
+  console.log("=== Header render ===");
+
   const [headerType, setHeaderType] = useState<HeaderType>(
     HeaderType.NonHeader
   );
@@ -31,7 +33,7 @@ export const Header = () => {
   // ToDo: ページのパスや hooks で柔軟にロジックを実装する（切り替えてテストできます）
   const isWalletConnected = true;
   const isUserTobanEnsFound = true;
-  const isWorkspaceSelected = true;
+  const isWorkspaceSelected = false;
 
   // ToDo: ユーザーやワークスペースごとの各種データを取得するロジックを実装する
   const userImageUrl: string | undefined = undefined;
@@ -40,6 +42,7 @@ export const Header = () => {
 
   useEffect(() => {
     const determineHeaderType = () => {
+      console.log("pathname", pathname);
       if (
         !NO_HEADER_PATHS.includes(pathname) &&
         isWalletConnected &&
diff --git a/pkgs/frontend/app/components/common/CommonIcon.tsx b/pkgs/frontend/app/components/common/CommonIcon.tsx
index ed32b50..6c9197a 100644
--- a/pkgs/frontend/app/components/common/CommonIcon.tsx
+++ b/pkgs/frontend/app/components/common/CommonIcon.tsx
@@ -4,6 +4,7 @@ import { Box, Image } from "@chakra-ui/react";
 interface CommonIconProps {
   imageUrl: string | undefined;
   size: number | "full";
+  borderRadius?: string;
   fallbackIconComponent?: ReactNode;
 }
 
@@ -11,6 +12,7 @@ export const CommonIcon = ({
   size,
   imageUrl,
   fallbackIconComponent,
+  borderRadius,
 }: CommonIconProps) => {
   const [showFallbackIcon, setShowFallbackIcon] = useState(!imageUrl);
 
@@ -26,7 +28,7 @@ export const CommonIcon = ({
       alignItems="center"
       justifyContent="center"
       my="auto"
-      borderRadius="full"
+      borderRadius={borderRadius}
       flexShrink={0}
       overflow="hidden"
     >
@@ -36,7 +38,7 @@ export const CommonIcon = ({
           width="100%"
           height="100%"
           objectFit="cover"
-          borderRadius="full"
+          borderRadius={borderRadius}
           onError={() => setShowFallbackIcon(true)}
         />
       ) : (
diff --git a/pkgs/frontend/app/components/common/CommonInput.tsx b/pkgs/frontend/app/components/common/CommonInput.tsx
index b052289..edfdba9 100644
--- a/pkgs/frontend/app/components/common/CommonInput.tsx
+++ b/pkgs/frontend/app/components/common/CommonInput.tsx
@@ -1,11 +1,13 @@
 import { Input, InputProps } from "@chakra-ui/react";
 
 interface CommonInputProps extends Omit<InputProps, "value"> {
+  minHeight?: string;
   value: string | number;
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 export const CommonInput = ({
+  minHeight,
   value,
   placeholder,
   onChange,
@@ -15,8 +17,11 @@ export const CommonInput = ({
       value={value}
       placeholder={placeholder}
       width="100%"
+      minHeight={minHeight}
       onChange={onChange}
       borderColor="gray.800"
+      borderRadius="xl"
+      backgroundColor="white"
     />
   );
 };
diff --git a/pkgs/frontend/app/components/common/CommonTextarea.tsx b/pkgs/frontend/app/components/common/CommonTextarea.tsx
index 6691c6c..ac9cba5 100644
--- a/pkgs/frontend/app/components/common/CommonTextarea.tsx
+++ b/pkgs/frontend/app/components/common/CommonTextarea.tsx
@@ -1,10 +1,27 @@
 import { Textarea, TextareaProps } from "@chakra-ui/react";
 
 interface CommonTextAreaProps extends Omit<TextareaProps, "value"> {
+  minHeight?: string;
   value: string;
   onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
 }
 
-export const CommonTextArea = ({ value, onChange }: CommonTextAreaProps) => {
-  return <Textarea value={value} onChange={onChange} />;
+export const CommonTextArea = ({
+  minHeight,
+  value,
+  placeholder,
+  onChange,
+}: CommonTextAreaProps) => {
+  return (
+    <Textarea
+      value={value}
+      placeholder={placeholder}
+      width="100%"
+      minHeight={minHeight}
+      onChange={onChange}
+      borderColor="gray.800"
+      borderRadius="xl"
+      backgroundColor="white"
+    />
+  );
 };
diff --git a/pkgs/frontend/app/components/icon/WorkspaceIcon.tsx b/pkgs/frontend/app/components/icon/WorkspaceIcon.tsx
index 26585c4..da2d192 100644
--- a/pkgs/frontend/app/components/icon/WorkspaceIcon.tsx
+++ b/pkgs/frontend/app/components/icon/WorkspaceIcon.tsx
@@ -20,6 +20,7 @@ export const WorkspaceIcon = ({
             width: "90%",
             height: "90%",
             objectFit: "cover",
+            backgroundColor: "yellow",
           }}
         />
       }
diff --git a/pkgs/frontend/app/root.tsx b/pkgs/frontend/app/root.tsx
index db9ca1d..df7896a 100644
--- a/pkgs/frontend/app/root.tsx
+++ b/pkgs/frontend/app/root.tsx
@@ -52,7 +52,7 @@ export const Layout = withEmotionCache((props: LayoutProps, cache) => {
             alignItems="center"
             position="relative"
           >
-            <Header />
+            {/* <Header /> */}
             <Box
               width="100%"
               height="100%"
diff --git a/pkgs/frontend/app/routes/$treeId.tsx b/pkgs/frontend/app/routes/$treeId.tsx
new file mode 100644
index 0000000..493aab0
--- /dev/null
+++ b/pkgs/frontend/app/routes/$treeId.tsx
@@ -0,0 +1,17 @@
+import { useSmartAccountClient } from "hooks/useWallet";
+
+export default function Tree({ treeId }: { treeId: string }) {
+  console.log("=== Tree render ===");
+
+  const smartWallet = useSmartAccountClient();
+  console.log("smartWallet.account.address", smartWallet?.account?.address);
+
+  return (
+    <>
+      <div>
+        Tree {treeId}
+        <div>{smartWallet?.account?.address}</div>
+      </div>
+    </>
+  );
+}
diff --git a/pkgs/frontend/app/routes/workspace._index.tsx b/pkgs/frontend/app/routes/workspace._index.tsx
new file mode 100644
index 0000000..11ed8e0
--- /dev/null
+++ b/pkgs/frontend/app/routes/workspace._index.tsx
@@ -0,0 +1,115 @@
+import { FC, useEffect, useMemo, useState } from "react";
+import { Box, Text } from "@chakra-ui/react";
+import { WorkspaceIcon } from "~/components/icon/WorkspaceIcon";
+import { BasicButton } from "~/components/BasicButton";
+import { useNavigate } from "@remix-run/react";
+import { useActiveWallet } from "hooks/useWallet";
+import { useHats } from "../../hooks/useHats";
+// import { Tree } from "@hatsprotocol/sdk-v1-subgraph";
+
+const WorkspaceCard: FC<{ name: string; imageUrl: string }> = ({
+  name,
+  imageUrl,
+}) => {
+  console.log("WorkspaceCard render");
+
+  return (
+    <Box
+      // bg="red"
+      w="100%"
+      borderRadius="xl"
+      border="1px solid #E0E0E0"
+      mb={3}
+      p={3}
+      display="flex"
+      alignItems="center"
+    >
+      <WorkspaceIcon workspaceImageUrl={imageUrl} size={10} />
+      <Text ml={4}>{name}</Text>
+    </Box>
+  );
+};
+
+const Workspace: FC = () => {
+  const [treesInfo, setTreesInfo] = useState<any>();
+  const [workspacesList, setWorkspacesList] = useState<
+    {
+      name: string;
+      imageUrl: string;
+    }[]
+  >([]);
+  const navigate = useNavigate();
+
+  console.log("Workspace render");
+  const { preferredAddress } = useActiveWallet();
+  const { getWearerInfo, getTreesInfoByWearer } = useHats();
+
+  console.log("preferredAddress", preferredAddress);
+
+  const address = useMemo(() => {
+    if (preferredAddress) {
+      return preferredAddress as `0x${string}`;
+    }
+  }, [preferredAddress]);
+
+  console.log("address", address);
+
+  useEffect(() => {
+    const fetchWearerInfo = async () => {
+      const wearer = await getWearerInfo({
+        walletAddress: address as `0x${string}`,
+      });
+      console.log("wearer", wearer);
+    };
+    fetchWearerInfo();
+  }, [address, getWearerInfo]);
+
+  useEffect(() => {
+    const fetchTreesInfo = async () => {
+      const _treesInfo = await getTreesInfoByWearer({
+        walletAddress: address as `0x${string}`,
+      });
+      console.log("treesInfo in workspace", _treesInfo);
+      // setTreesInfo(_treesInfo);
+      // const _workspacesList = await Promise.all(
+      //   treesInfo.map(async (tree: Tree | null | undefined) => {
+      //     return {
+      //       name: "workspace",
+      //       imageUrl: tree?.hats?.[0]?.imageUri,
+      //     };
+      //   })
+      // );
+      // console.log("workspacesList", _workspacesList);
+
+      // const _workspacesList = [
+      //   {
+      //     name: "Workspace 1",
+      //     imageUrl: "https://example.com/image1.jpg",
+      //   },
+      //   {
+      //     name: "Workspace 2",
+      //     imageUrl: "https://example.com/image2.jpg",
+      //   },
+      // ];
+      // setWorkspacesList(_workspacesList);
+    };
+
+    fetchTreesInfo();
+  }, [address, getTreesInfoByWearer]);
+
+  return (
+    <>
+      {/* <Box mt={5}>
+        {workspacesList.map((workspace) => (
+          <WorkspaceCard key={workspace.name} {...workspace} />
+        ))}
+      </Box>
+      <>{JSON.stringify(treesInfo)}</>
+      <BasicButton mt={7} onClick={() => navigate("/workspace/new")}>
+        新しいワークスペースを作成
+      </BasicButton> */}
+    </>
+  );
+};
+
+export default Workspace;
diff --git a/pkgs/frontend/app/routes/workspace.new.tsx b/pkgs/frontend/app/routes/workspace.new.tsx
new file mode 100644
index 0000000..76e8e04
--- /dev/null
+++ b/pkgs/frontend/app/routes/workspace.new.tsx
@@ -0,0 +1,182 @@
+import { FC, useState } from "react";
+import { Box, Float, Input, Text } from "@chakra-ui/react";
+import { HiOutlinePlus } from "react-icons/hi2";
+import { CommonInput } from "~/components/common/CommonInput";
+import { BasicButton } from "~/components/BasicButton";
+import { CommonTextArea } from "~/components/common/CommonTextarea";
+import {
+  useUploadMetadataToIpfs,
+  useUploadImageFileToIpfs,
+} from "hooks/useIpfs";
+import { useNavigate } from "@remix-run/react";
+import { CommonIcon } from "~/components/common/CommonIcon";
+import { useBigBang } from "hooks/useBigBang";
+import { useActiveWallet } from "hooks/useWallet";
+import { Address } from "viem";
+import { hatIdToTreeId } from "@hatsprotocol/sdk-v1-core";
+
+const WorkspaceNew: FC = () => {
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const { uploadMetadataToIpfs } = useUploadMetadataToIpfs();
+  const { uploadImageFileToIpfs, imageFile, setImageFile } =
+    useUploadImageFileToIpfs();
+  const { bigbang } = useBigBang();
+  const { preferredAddress } = useActiveWallet();
+  const navigate = useNavigate();
+
+  const handleSubmit = async () => {
+    if (!name || !description || !imageFile) {
+      alert("全ての項目を入力してください。");
+      return;
+    }
+    setIsLoading(true);
+
+    try {
+      const resUploadMetadata = await uploadMetadataToIpfs({
+        name,
+        description,
+        responsibilities: "",
+        authorities: "",
+        eligibility: true,
+        toggle: true,
+      });
+      if (!resUploadMetadata)
+        throw new Error("Failed to upload metadata to ipfs");
+      console.log(resUploadMetadata);
+
+      const resUploadImage = await uploadImageFileToIpfs();
+      if (!resUploadImage) throw new Error("Failed to upload image to ipfs");
+      console.log(resUploadImage);
+
+      const parsedLog = await bigbang({
+        owner: preferredAddress as Address,
+        topHatDetails: resUploadMetadata.ipfsUri,
+        topHatImageURI: resUploadImage.ipfsUri,
+        hatterHatDetails: resUploadMetadata.ipfsUri,
+        hatterHatImageURI: resUploadImage.ipfsUri,
+        trustedForwarder: "0x0000000000000000000000000000000000000000",
+      });
+
+      // if (!decodedLog) throw new Error("Tx failed");
+      console.log("parsedLog", parsedLog);
+
+      // const topHatId = parsedLog.args.topHatId;
+      // console.log(topHatId);
+
+      // const treeId = hatIdToTreeId(BigInt(topHatId));
+      // // const treeId = 1;
+      // console.log(treeId);
+
+      // const treeIdStr = treeId.toString();
+
+      // navigate(`/${treeIdStr}`);
+      navigate("/workspace");
+    } catch (error) {
+      console.error(error);
+      alert("エラーが発生しました。");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const EmptyImage = () => {
+    return (
+      <Box
+        borderRadius="3xl"
+        border="1px solid"
+        borderColor="#1e1e1e"
+        bg="#e9ecef"
+        p={5}
+        w={200}
+        h={200}
+      >
+        <Box
+          display="flex"
+          flexDirection="column"
+          justifyContent="center"
+          alignItems="center"
+          w="33%"
+          mx="auto"
+          mt={9}
+          mb={1}
+        >
+          <HiOutlinePlus size="full" />
+        </Box>
+        <Text textAlign="center">画像を選択</Text>
+      </Box>
+    );
+  };
+
+  return (
+    <>
+      <Box mt={5} w="100%">
+        <Text fontSize="lg">新しいワークスペースを作成</Text>
+        <Box
+          display="flex"
+          flexDirection="column"
+          justifyContent="center"
+          mt={10}
+          alignItems="center"
+        >
+          <Box as="label" cursor="pointer" m="100px auto 40px">
+            <Input
+              type="file"
+              accept="image/*"
+              display="none"
+              onChange={(e) => {
+                const file = e.target.files?.[0];
+                if (file && file.type.startsWith("image/")) {
+                  setImageFile(file);
+                } else {
+                  alert("画像ファイルを選択してください");
+                }
+              }}
+            />
+            <CommonIcon
+              imageUrl={imageFile ? URL.createObjectURL(imageFile) : undefined}
+              fallbackIconComponent={<EmptyImage />}
+              size={200}
+              borderRadius="3xl"
+            />
+          </Box>
+          <Box w="100%" mt={8}>
+            <CommonInput
+              minHeight="45px"
+              placeholder="Name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+            />
+          </Box>
+          <Box minH="100px" w="100%" mt={6}>
+            <CommonTextArea
+              minHeight="125px"
+              placeholder="Description"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+            />
+          </Box>
+          <Float
+            placement="bottom-center"
+            mb="4vh"
+            width="100%"
+            display="flex"
+            flexDirection="column"
+            alignItems="center"
+          >
+            <BasicButton
+              onClick={handleSubmit}
+              disabled={!name || !description || !imageFile}
+              loading={isLoading}
+            >
+              作成
+            </BasicButton>
+          </Float>
+        </Box>
+      </Box>
+    </>
+  );
+};
+
+export default WorkspaceNew;
diff --git a/pkgs/frontend/app/routes/workspace.tsx b/pkgs/frontend/app/routes/workspace.tsx
deleted file mode 100644
index 546c2b1..0000000
--- a/pkgs/frontend/app/routes/workspace.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { FC } from "react";
-
-const Workspace: FC = () => {
-  return <div>Workspace</div>;
-};
-
-export default Workspace;
diff --git a/pkgs/frontend/hooks/useBigBang.ts b/pkgs/frontend/hooks/useBigBang.ts
index b91c813..396f873 100644
--- a/pkgs/frontend/hooks/useBigBang.ts
+++ b/pkgs/frontend/hooks/useBigBang.ts
@@ -1,7 +1,12 @@
 import { hatIdToTreeId } from "@hatsprotocol/sdk-v1-core";
 import { BIGBANG_ABI } from "abi/bigbang";
 import { useCallback, useState } from "react";
-import { Address, decodeEventLog, encodeFunctionData } from "viem";
+import {
+  Address,
+  decodeEventLog,
+  encodeFunctionData,
+  parseEventLogs,
+} from "viem";
 import { BIGBANG_ADDRESS } from "./useContracts";
 import { useSmartAccountClient } from "./useWallet";
 import { publicClient } from "./useViem";
@@ -52,35 +57,34 @@ export const useBigBang = () => {
           ],
         });
 
+        console.log("txHash:", txHash);
+
         const receipt = await publicClient.waitForTransactionReceipt({
           hash: txHash,
         });
+        console.log("receipt:", receipt);
+
+        // @help イベントが取れない（undefinedになる）
+        const parsedLog = parseEventLogs({
+          abi: BIGBANG_ABI,
+          eventName: "Executed",
+          logs: receipt.logs,
+          strict: false,
+        });
 
-        const log = receipt.logs.find((log) => {
-          try {
-            const decodedLog = decodeEventLog({
-              abi: BIGBANG_ABI,
-              data: log.data,
-              topics: log.topics,
-            });
-            return decodedLog.eventName === "Executed";
-          } catch (error) {}
-        })!;
+        console.log("parsedLog:", parsedLog);
 
-        if (log) {
-          const decodedLog = decodeEventLog({
-            abi: BIGBANG_ABI,
-            data: log.data,
-            topics: log.topics,
-          });
-          console.log(decodedLog);
-          console.log(
-            "Tree Link:",
-            `https://app.hatsprotocol.xyz/trees/${String(
-              publicClient.chain?.id
-            )}/${hatIdToTreeId(BigInt(decodedLog.args.topHatId))}`
-          );
+        if (parsedLog) {
+          console.log("parsedLog.args:", parsedLog.args);
+          // console.log(
+          //   "Tree Link:",
+          //   `https://app.hatsprotocol.xyz/trees/${String(
+          //     publicClient.chain?.id
+          //   )}/${hatIdToTreeId(BigInt(parsedLog.args.topHatId))}`
+          // );
         }
+
+        return parsedLog;
       } finally {
         setIsLoading(false);
       }
diff --git a/pkgs/frontend/hooks/useHats.ts b/pkgs/frontend/hooks/useHats.ts
index 0f7b2e4..de06020 100644
--- a/pkgs/frontend/hooks/useHats.ts
+++ b/pkgs/frontend/hooks/useHats.ts
@@ -35,7 +35,7 @@ export const hatsSubgraphClient = new HatsSubgraphClient({
  * @returns
  */
 export const useHats = () => {
-  const smartAccountClient = useSmartAccountClient();
+  const { smartWallet } = useActiveWallet();
 
   const [isLoading, setIsLoading] = useState(false);
 
@@ -46,7 +46,7 @@ export const useHats = () => {
    */
   const getTreeInfo = useCallback(
     async (params: { chainId: number; treeId: number }) => {
-      if (!smartAccountClient) return;
+      if (!smartWallet) return;
 
       setIsLoading(true);
 
@@ -80,7 +80,7 @@ export const useHats = () => {
         setIsLoading(false);
       }
     },
-    [smartAccountClient]
+    [smartWallet]
   );
 
   /**
@@ -90,7 +90,7 @@ export const useHats = () => {
    */
   const getWearersInfo = useCallback(
     async (params: { chainId: number; hatId: string }) => {
-      if (!smartAccountClient) return;
+      if (!smartWallet) return;
 
       setIsLoading(true);
 
@@ -111,7 +111,7 @@ export const useHats = () => {
         setIsLoading(false);
       }
     },
-    [smartAccountClient]
+    [smartWallet]
   );
 
   /**
@@ -121,7 +121,7 @@ export const useHats = () => {
    */
   const getWearerInfo = useCallback(
     async (params: { chainId: number; walletAddress: string }) => {
-      if (!smartAccountClient) return;
+      if (!smartWallet) return;
 
       setIsLoading(true);
 
@@ -156,7 +156,7 @@ export const useHats = () => {
         setIsLoading(false);
       }
     },
-    [smartAccountClient]
+    [smartWallet]
   );
 
   /**
@@ -164,7 +164,7 @@ export const useHats = () => {
    */
   const getHatsTimeframeModuleAddress = useCallback(
     async (params: { chainId: number; hatId: string }) => {
-      if (!smartAccountClient) return;
+      if (!smartWallet) return;
 
       setIsLoading(true);
 
@@ -202,7 +202,7 @@ export const useHats = () => {
         setIsLoading(false);
       }
     },
-    [smartAccountClient]
+    [smartWallet]
   );
 
   /**
@@ -225,12 +225,12 @@ export const useHats = () => {
       mutable?: boolean;
       imageURI?: string;
     }) => {
-      if (!smartAccountClient) return;
+      if (!smartWallet) return;
 
       setIsLoading(true);
 
       try {
-        const txHash = await smartAccountClient.sendTransaction({
+        const txHash = await smartWallet.sendTransaction({
           calls: [
             {
               to: HATS_ADDRESS,
@@ -284,7 +284,7 @@ export const useHats = () => {
         setIsLoading(false);
       }
     },
-    [smartAccountClient]
+    [smartWallet]
   );
 
   /**
@@ -294,12 +294,12 @@ export const useHats = () => {
    */
   const mintHat = useCallback(
     async (params: { hatId: bigint; wearer: Address }) => {
-      if (!smartAccountClient) return;
+      if (!smartWallet) return;
 
       setIsLoading(true);
 
       try {
-        const txHash = await smartAccountClient.sendTransaction({
+        const txHash = await smartWallet.sendTransaction({
           calls: [
             {
               to: HATS_ADDRESS,
@@ -325,7 +325,7 @@ export const useHats = () => {
         setIsLoading(false);
       }
     },
-    [smartAccountClient]
+    [smartWallet]
   );
 
   return {
diff --git a/pkgs/frontend/hooks/useWallet.ts b/pkgs/frontend/hooks/useWallet.ts
index 7441f92..3691be6 100644
--- a/pkgs/frontend/hooks/useWallet.ts
+++ b/pkgs/frontend/hooks/useWallet.ts
@@ -1,4 +1,4 @@
-import { useWallets } from "@privy-io/react-auth";
+import { ConnectedWallet, useWallets } from "@privy-io/react-auth";
 import { createSmartAccountClient, SmartAccountClient } from "permissionless";
 import { toSimpleSmartAccount } from "permissionless/accounts";
 import { createPimlicoClient } from "permissionless/clients/pimlico";
@@ -7,10 +7,11 @@ import { http } from "viem";
 import { entryPoint07Address } from "viem/account-abstraction";
 import { currentChain, publicClient } from "./useViem";
 
+const PIMLICO_API_KEY = import.meta.env.VITE_PIMLICO_API_KEY as string;
 // Pimlico API endpoint URL
 export const pimlicoUrl = `https://api.pimlico.io/v2/${
   currentChain.id
-}/rpc?apikey=${import.meta.env.VITE_PIMLICO_API_KEY}`;
+}/rpc?apikey=${PIMLICO_API_KEY}`;
 
 /**
  * Pimlico client
@@ -27,8 +28,26 @@ export const pimlicoClient = createPimlicoClient({
  * Pimlico 向けの React Hooks
  */
 export const useSmartAccountClient = () => {
+  const [_wallets, setWallets] = useState<ConnectedWallet[] | undefined>(
+    undefined
+  );
   const [client, setClient] = useState<SmartAccountClient>();
+  // @help walletsがやたらレンダリングされる
   const { wallets } = useWallets();
+  const walletsMemo = useMemo(() => {
+    if (wallets && wallets.length !== 0) {
+      console.log("=== walletsMemo ===", wallets);
+      return wallets;
+    }
+  }, [wallets]);
+  console.log("useSmartAccountClient");
+
+  useEffect(() => {
+    if (walletsMemo && walletsMemo.length !== 0 && walletsMemo !== _wallets) {
+      console.log("=== setWallets ===");
+      setWallets(walletsMemo);
+    }
+  }, [walletsMemo]);
 
   useEffect(() => {
     /**
@@ -36,9 +55,13 @@ export const useSmartAccountClient = () => {
      * @returns
      */
     const create = async () => {
-      const embeddedWallet = wallets.find(
+      console.log("=== create ===", _wallets);
+
+      const embeddedWallet = _wallets?.find(
         (wallet) => wallet.connectorType === "embedded"
       );
+      if (!embeddedWallet) return;
+
       const owner = await embeddedWallet?.getEthereumProvider();
       if (!owner) return;
 
@@ -63,26 +86,58 @@ export const useSmartAccountClient = () => {
         },
       });
 
-      setClient(smartAccountClient);
+      if (smartAccountClient !== client) {
+        console.log("=== setClient ===", smartAccountClient);
+        setClient(smartAccountClient);
+      }
     };
-    create();
-  }, [wallets]);
+
+    if (_wallets && _wallets.length !== 0) {
+      create();
+    }
+  }, [_wallets]);
 
   return client;
 };
 
 export const useActiveWallet = () => {
   const { wallets } = useWallets();
+  const [_wallets, setWallets] = useState<ConnectedWallet[] | undefined>(
+    undefined
+  );
+
+  const walletsMemo = useMemo(() => {
+    if (wallets && wallets.length !== 0) {
+      console.log("=== walletsMemo ===", wallets);
+      return wallets;
+    }
+  }, [wallets]);
+  console.log("useSmartAccountClient");
+
+  useEffect(() => {
+    if (walletsMemo && walletsMemo.length !== 0 && walletsMemo !== _wallets) {
+      console.log("=== setWallets ===");
+      setWallets(walletsMemo);
+    }
+  }, [walletsMemo]);
 
   const smartWallet = useSmartAccountClient();
 
   const wallet = useMemo(() => {
-    return wallets[0];
-  }, [wallets]);
+    return _wallets && _wallets[0];
+  }, [_wallets]);
 
   const isSmartWallet = useMemo(() => {
     return smartWallet ? true : false;
   }, [smartWallet]);
 
-  return { wallet, smartWallet, isSmartWallet };
+  const preferredAddress = useMemo(() => {
+    if (smartWallet) {
+      return smartWallet.account?.address;
+    } else if (wallet) {
+      return wallet.address;
+    }
+  }, [smartWallet, wallet]);
+
+  return { wallet, smartWallet, isSmartWallet, preferredAddress };
 };

From a12fa82b09273dc1556e7659fd6278b11054d7fb Mon Sep 17 00:00:00 2001
From: yawn <69970183+yawn-c111@users.noreply.github.com>
Date: Mon, 16 Dec 2024 22:14:46 +0900
Subject: [PATCH 02/14] wip: treesid 2

---
 pkgs/frontend/app/routes/workspace._index.tsx |   4 +-
 pkgs/frontend/hooks/useHats.ts                | 114 ++++++++++++++----
 pkgs/frontend/hooks/useWallet.ts              | 106 ++++++----------
 3 files changed, 131 insertions(+), 93 deletions(-)

diff --git a/pkgs/frontend/app/routes/workspace._index.tsx b/pkgs/frontend/app/routes/workspace._index.tsx
index 11ed8e0..2a373d2 100644
--- a/pkgs/frontend/app/routes/workspace._index.tsx
+++ b/pkgs/frontend/app/routes/workspace._index.tsx
@@ -41,9 +41,11 @@ const Workspace: FC = () => {
   const navigate = useNavigate();
 
   console.log("Workspace render");
-  const { preferredAddress } = useActiveWallet();
+  const { wallet } = useActiveWallet();
   const { getWearerInfo, getTreesInfoByWearer } = useHats();
 
+  const preferredAddress = wallet?.account?.address;
+
   console.log("preferredAddress", preferredAddress);
 
   const address = useMemo(() => {
diff --git a/pkgs/frontend/hooks/useHats.ts b/pkgs/frontend/hooks/useHats.ts
index de06020..8881a71 100644
--- a/pkgs/frontend/hooks/useHats.ts
+++ b/pkgs/frontend/hooks/useHats.ts
@@ -5,8 +5,8 @@ import { useCallback, 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 { useActiveWallet } from "./useWallet";
+import { currentChain, publicClient } from "./useViem";
 
 // ###############################################################
 // Read with subgraph
@@ -35,7 +35,7 @@ export const hatsSubgraphClient = new HatsSubgraphClient({
  * @returns
  */
 export const useHats = () => {
-  const { smartWallet } = useActiveWallet();
+  const { wallet } = useActiveWallet();
 
   const [isLoading, setIsLoading] = useState(false);
 
@@ -45,14 +45,14 @@ export const useHats = () => {
    * @param treeId
    */
   const getTreeInfo = useCallback(
-    async (params: { chainId: number; treeId: number }) => {
-      if (!smartWallet) return;
+    async (params: { treeId: number }) => {
+      if (!wallet) return;
 
       setIsLoading(true);
 
       try {
         const tree = await hatsSubgraphClient.getTree({
-          chainId: params.chainId,
+          chainId: currentChain.id,
           treeId: params.treeId,
           props: {
             hats: {
@@ -80,7 +80,7 @@ export const useHats = () => {
         setIsLoading(false);
       }
     },
-    [smartWallet]
+    [wallet]
   );
 
   /**
@@ -89,14 +89,14 @@ export const useHats = () => {
    * @param hatId
    */
   const getWearersInfo = useCallback(
-    async (params: { chainId: number; hatId: string }) => {
-      if (!smartWallet) return;
+    async (params: { hatId: string }) => {
+      if (!wallet) return;
 
       setIsLoading(true);
 
       try {
         const wearers = await hatsSubgraphClient.getWearersOfHatPaginated({
-          chainId: params.chainId,
+          chainId: currentChain.id,
           props: {},
           hatId: BigInt(params.hatId),
           page: 0,
@@ -111,7 +111,7 @@ export const useHats = () => {
         setIsLoading(false);
       }
     },
-    [smartWallet]
+    [wallet]
   );
 
   /**
@@ -120,14 +120,14 @@ export const useHats = () => {
    * @param walletAddress
    */
   const getWearerInfo = useCallback(
-    async (params: { chainId: number; walletAddress: string }) => {
-      if (!smartWallet) return;
+    async (params: { walletAddress: string }) => {
+      if (!wallet) return;
 
       setIsLoading(true);
 
       try {
         const wearer = await hatsSubgraphClient.getWearer({
-          chainId: params.chainId,
+          chainId: currentChain.id,
           wearerAddress: params.walletAddress as `0x${string}`,
           props: {
             currentHats: {
@@ -156,15 +156,79 @@ export const useHats = () => {
         setIsLoading(false);
       }
     },
-    [smartWallet]
+    [wallet]
   );
 
+  const getTreesInfoByWearer = useCallback(
+    async (params: { walletAddress: string }) => {
+      const wearer = await getWearerInfo({
+        walletAddress: params.walletAddress as `0x${string}`,
+      });
+
+      console.log("wearer", wearer);
+
+      if (!wearer?.currentHats) return [];
+
+      const treesIds = wearer.currentHats.map((hat) => {
+        const treeId = hatIdToTreeId(BigInt(hat.id));
+        console.log("treeId", treeId);
+        return treeId;
+      });
+
+      const treesInfo = await hatsSubgraphClient.getTreesByIds({
+        chainId: currentChain.id,
+        treeIds: treesIds,
+        props: {
+          hats: {
+            props: {
+              details: true,
+              imageUri: true,
+            },
+          },
+        },
+      });
+
+      // const treesInfo = await Promise.all(
+      //   wearer.currentHats.map(async (hat) => {
+      //     const treeId = hatIdToTreeId(BigInt(hat.id));
+      //     console.log("treeId", treeId);
+      //     const treeInfo = await getTreeInfo({
+      //       treeId: treeId,
+      //     });
+      //     console.log("treeInfo", treeInfo);
+      //     return treeInfo;
+      //   })
+      // );
+
+      console.log("treesInfo", treesInfo);
+
+      return treesInfo;
+    },
+    [getWearerInfo]
+  );
+
+  const getWorkspacesList = useCallback(async () => {
+    const treesInfo = await getTreesInfoByWearer({
+      walletAddress: "0x0000000000000000000000000000000000000000",
+    });
+    console.log("treesInfo", treesInfo);
+    const workspacesList = await Promise.all(
+      treesInfo.map(async (tree) => {
+        return {
+          name: "workspace",
+          imageUrl: tree?.hats?.[0]?.imageUri,
+        };
+      })
+    );
+    return workspacesList;
+  }, [getTreesInfoByWearer]);
+
   /**
    * HatsTimeframeModuleコントラクトのアドレスを取得するコールバック関数
    */
   const getHatsTimeframeModuleAddress = useCallback(
     async (params: { chainId: number; hatId: string }) => {
-      if (!smartWallet) return;
+      if (!wallet) return;
 
       setIsLoading(true);
 
@@ -172,7 +236,6 @@ export const useHats = () => {
         const treeId = hatIdToTreeId(BigInt(params.hatId));
         // get TreeInfo
         const tree = await getTreeInfo({
-          chainId: params.chainId,
           treeId,
         });
         const hatterHat = tree?.hats?.find(
@@ -184,7 +247,6 @@ export const useHats = () => {
         // get WearersInfo
         const wearers = await getWearersInfo({
           hatId: hatterHat.id,
-          chainId: params.chainId,
         });
 
         if (wearers!.length === 0) {
@@ -202,7 +264,7 @@ export const useHats = () => {
         setIsLoading(false);
       }
     },
-    [smartWallet]
+    [wallet]
   );
 
   /**
@@ -225,12 +287,12 @@ export const useHats = () => {
       mutable?: boolean;
       imageURI?: string;
     }) => {
-      if (!smartWallet) return;
+      if (!wallet) return;
 
       setIsLoading(true);
 
       try {
-        const txHash = await smartWallet.sendTransaction({
+        const txHash = await wallet.sendTransaction({
           calls: [
             {
               to: HATS_ADDRESS,
@@ -284,7 +346,7 @@ export const useHats = () => {
         setIsLoading(false);
       }
     },
-    [smartWallet]
+    [wallet]
   );
 
   /**
@@ -294,12 +356,12 @@ export const useHats = () => {
    */
   const mintHat = useCallback(
     async (params: { hatId: bigint; wearer: Address }) => {
-      if (!smartWallet) return;
+      if (!wallet) return;
 
       setIsLoading(true);
 
       try {
-        const txHash = await smartWallet.sendTransaction({
+        const txHash = await wallet.sendTransaction({
           calls: [
             {
               to: HATS_ADDRESS,
@@ -325,7 +387,7 @@ export const useHats = () => {
         setIsLoading(false);
       }
     },
-    [smartWallet]
+    [wallet]
   );
 
   return {
@@ -333,6 +395,8 @@ export const useHats = () => {
     getTreeInfo,
     getWearersInfo,
     getWearerInfo,
+    getTreesInfoByWearer,
+    getWorkspacesList,
     getHatsTimeframeModuleAddress,
     createHat,
     mintHat,
diff --git a/pkgs/frontend/hooks/useWallet.ts b/pkgs/frontend/hooks/useWallet.ts
index 16f8bf6..a2bc046 100644
--- a/pkgs/frontend/hooks/useWallet.ts
+++ b/pkgs/frontend/hooks/useWallet.ts
@@ -1,4 +1,4 @@
-import { ConnectedWallet, usePrivy, useWallets } from "@privy-io/react-auth";
+import { usePrivy, useWallets } from "@privy-io/react-auth";
 import { createSmartAccountClient, SmartAccountClient } from "permissionless";
 import { toSimpleSmartAccount } from "permissionless/accounts";
 import { createPimlicoClient } from "permissionless/clients/pimlico";
@@ -7,11 +7,10 @@ import { Address, createWalletClient, custom, http, WalletClient } from "viem";
 import { entryPoint07Address } from "viem/account-abstraction";
 import { currentChain, publicClient } from "./useViem";
 
-const PIMLICO_API_KEY = import.meta.env.VITE_PIMLICO_API_KEY as string;
 // Pimlico API endpoint URL
 export const pimlicoUrl = `https://api.pimlico.io/v2/${
   currentChain.id
-}/rpc?apikey=${PIMLICO_API_KEY}`;
+}/rpc?apikey=${import.meta.env.VITE_PIMLICO_API_KEY}`;
 
 /**
  * Pimlico client
@@ -28,26 +27,8 @@ export const pimlicoClient = createPimlicoClient({
  * Pimlico 向けの React Hooks
  */
 export const useSmartAccountClient = () => {
-  const [_wallets, setWallets] = useState<ConnectedWallet[] | undefined>(
-    undefined
-  );
   const [client, setClient] = useState<SmartAccountClient>();
-  // @help walletsがやたらレンダリングされる
   const { wallets } = useWallets();
-  const walletsMemo = useMemo(() => {
-    if (wallets && wallets.length !== 0) {
-      console.log("=== walletsMemo ===", wallets);
-      return wallets;
-    }
-  }, [wallets]);
-  console.log("useSmartAccountClient");
-
-  useEffect(() => {
-    if (walletsMemo && walletsMemo.length !== 0 && walletsMemo !== _wallets) {
-      console.log("=== setWallets ===");
-      setWallets(walletsMemo);
-    }
-  }, [walletsMemo]);
 
   useEffect(() => {
     /**
@@ -55,15 +36,11 @@ export const useSmartAccountClient = () => {
      * @returns
      */
     const create = async () => {
-      console.log("=== create ===", _wallets);
-
       setClient(undefined);
       console.log(wallets);
-      const embeddedWallet = _wallets?.find(
+      const embeddedWallet = wallets.find(
         (wallet) => wallet.connectorType === "embedded"
       );
-      if (!embeddedWallet) return;
-
       const owner = await embeddedWallet?.getEthereumProvider();
       if (!owner) return;
 
@@ -88,58 +65,53 @@ export const useSmartAccountClient = () => {
         },
       });
 
-      if (smartAccountClient !== client) {
-        console.log("=== setClient ===", smartAccountClient);
-        setClient(smartAccountClient);
-      }
+      setClient(smartAccountClient);
     };
-
-    if (_wallets && _wallets.length !== 0) {
-      create();
-    }
-  }, [_wallets]);
+    create();
+  }, [wallets]);
 
   return client;
 };
 
 export const useAccountClient = () => {
   const { wallets } = useWallets();
-  const [_wallets, setWallets] = useState<ConnectedWallet[] | undefined>(
-    undefined
-  );
-
-  const walletsMemo = useMemo(() => {
-    if (wallets && wallets.length !== 0) {
-      console.log("=== walletsMemo ===", wallets);
-      return wallets;
-    }
-  }, [wallets]);
-  console.log("useSmartAccountClient");
+
+  const [client, setClient] = useState<WalletClient>();
 
   useEffect(() => {
-    if (walletsMemo && walletsMemo.length !== 0 && walletsMemo !== _wallets) {
-      console.log("=== setWallets ===");
-      setWallets(walletsMemo);
-    }
-  }, [walletsMemo]);
+    const create = async () => {
+      setClient(undefined);
+      if (!wallets[0]) return;
+      const wallet = wallets[0];
 
-  const smartWallet = useSmartAccountClient();
+      const provider = await wallet.getEthereumProvider();
 
-  const wallet = useMemo(() => {
-    return _wallets && _wallets[0];
-  }, [_wallets]);
+      const walletClient = createWalletClient({
+        chain: currentChain,
+        transport: custom(provider),
+        account: wallet.address as Address,
+      });
+
+      setClient(walletClient);
+    };
+
+    create();
+  }, [wallets]);
+
+  return client;
+};
+
+export const useActiveWallet = () => {
+  const walletClient = useAccountClient();
+  const smartWalletClient = useSmartAccountClient();
 
   const isSmartWallet = useMemo(() => {
-    return smartWallet ? true : false;
-  }, [smartWallet]);
-
-  const preferredAddress = useMemo(() => {
-    if (smartWallet) {
-      return smartWallet.account?.address;
-    } else if (wallet) {
-      return wallet.address;
-    }
-  }, [smartWallet, wallet]);
-
-  return { wallet, smartWallet, isSmartWallet, preferredAddress };
+    return !!smartWalletClient;
+  }, [smartWalletClient]);
+
+  const wallet = useMemo(() => {
+    return smartWalletClient ? smartWalletClient : walletClient;
+  }, [walletClient, smartWalletClient]);
+
+  return { wallet, isSmartWallet };
 };

From 13b9f63429980de121270cd62b879fedf25d2b16 Mon Sep 17 00:00:00 2001
From: yawn <69970183+yawn-c111@users.noreply.github.com>
Date: Wed, 18 Dec 2024 11:35:54 +0900
Subject: [PATCH 03/14] feat: workspace index page

---
 pkgs/frontend/.env.example                    |  2 +
 .../app/components/icon/WorkspaceIcon.tsx     |  2 +-
 pkgs/frontend/app/routes/$treeId.tsx          |  1 +
 pkgs/frontend/app/routes/workspace._index.tsx | 87 ++++++-------------
 pkgs/frontend/hooks/useHats.ts                | 55 ++++++------
 pkgs/frontend/utils/ipfs.ts                   | 25 +++++-
 6 files changed, 79 insertions(+), 93 deletions(-)

diff --git a/pkgs/frontend/.env.example b/pkgs/frontend/.env.example
index 57c9abb..6dee7b5 100644
--- a/pkgs/frontend/.env.example
+++ b/pkgs/frontend/.env.example
@@ -16,4 +16,6 @@ VITE_PINATA_JWT=
 
 VITE_PINATA_GATEWAY=
 
+VITE_PINATA_GATEWAY_TOKEN="M-iEBglWoUCZWJYsihe1IRrngs7HIGeIr3s5lObVw96hv7GTuCw1QrlmnNtwvuXt"
+
 VITE_NAMESTONE_API_KEY=
\ No newline at end of file
diff --git a/pkgs/frontend/app/components/icon/WorkspaceIcon.tsx b/pkgs/frontend/app/components/icon/WorkspaceIcon.tsx
index da2d192..441d21a 100644
--- a/pkgs/frontend/app/components/icon/WorkspaceIcon.tsx
+++ b/pkgs/frontend/app/components/icon/WorkspaceIcon.tsx
@@ -2,7 +2,7 @@ import { FaPeopleGroup } from "react-icons/fa6";
 import { CommonIcon } from "../common/CommonIcon";
 
 interface WorkspaceIconProps {
-  workspaceImageUrl?: string;
+  workspaceImageUrl?: string | undefined;
   size?: number | "full";
 }
 
diff --git a/pkgs/frontend/app/routes/$treeId.tsx b/pkgs/frontend/app/routes/$treeId.tsx
index 03f05dd..f8a073a 100644
--- a/pkgs/frontend/app/routes/$treeId.tsx
+++ b/pkgs/frontend/app/routes/$treeId.tsx
@@ -17,6 +17,7 @@ const WorkspaceTop: FC = () => {
         ?.filter((h) => Number(h.levelAtLocalTree) >= 0)
         .map((h) => (
           <HatsListItemParser
+            key={h.id}
             imageUri={h.imageUri}
             detailUri={h.details}
             children={(<BasicRole />) as any}
diff --git a/pkgs/frontend/app/routes/workspace._index.tsx b/pkgs/frontend/app/routes/workspace._index.tsx
index 2a373d2..79015e4 100644
--- a/pkgs/frontend/app/routes/workspace._index.tsx
+++ b/pkgs/frontend/app/routes/workspace._index.tsx
@@ -5,17 +5,16 @@ import { BasicButton } from "~/components/BasicButton";
 import { useNavigate } from "@remix-run/react";
 import { useActiveWallet } from "hooks/useWallet";
 import { useHats } from "../../hooks/useHats";
-// import { Tree } from "@hatsprotocol/sdk-v1-subgraph";
 
-const WorkspaceCard: FC<{ name: string; imageUrl: string }> = ({
-  name,
-  imageUrl,
-}) => {
-  console.log("WorkspaceCard render");
+const WorkspaceCard: FC<{
+  treeId: string;
+  name: string;
+  imageUrl: string | undefined;
+}> = ({ treeId, name, imageUrl }) => {
+  const navigate = useNavigate();
 
   return (
     <Box
-      // bg="red"
       w="100%"
       borderRadius="xl"
       border="1px solid #E0E0E0"
@@ -23,6 +22,7 @@ const WorkspaceCard: FC<{ name: string; imageUrl: string }> = ({
       p={3}
       display="flex"
       alignItems="center"
+      onClick={() => navigate(`/${treeId}`)}
     >
       <WorkspaceIcon workspaceImageUrl={imageUrl} size={10} />
       <Text ml={4}>{name}</Text>
@@ -31,85 +31,54 @@ const WorkspaceCard: FC<{ name: string; imageUrl: string }> = ({
 };
 
 const Workspace: FC = () => {
-  const [treesInfo, setTreesInfo] = useState<any>();
   const [workspacesList, setWorkspacesList] = useState<
     {
+      treeId: string;
       name: string;
-      imageUrl: string;
+      imageUrl: string | undefined;
     }[]
   >([]);
   const navigate = useNavigate();
 
-  console.log("Workspace render");
   const { wallet } = useActiveWallet();
-  const { getWearerInfo, getTreesInfoByWearer } = useHats();
-
-  const preferredAddress = wallet?.account?.address;
+  const { getWorkspacesList } = useHats();
 
-  console.log("preferredAddress", preferredAddress);
+  useEffect(() => {
+    console.log("wallet?.account?.address", wallet?.account?.address);
+  }, [wallet?.account?.address]);
 
   const address = useMemo(() => {
-    if (preferredAddress) {
-      return preferredAddress as `0x${string}`;
+    if (wallet?.account?.address) {
+      return wallet?.account?.address as `0x${string}`;
     }
-  }, [preferredAddress]);
-
-  console.log("address", address);
+  }, [wallet?.account?.address]);
 
   useEffect(() => {
-    const fetchWearerInfo = async () => {
-      const wearer = await getWearerInfo({
-        walletAddress: address as `0x${string}`,
-      });
-      console.log("wearer", wearer);
-    };
-    fetchWearerInfo();
-  }, [address, getWearerInfo]);
+    console.log("address", address);
+  }, [address]);
 
   useEffect(() => {
-    const fetchTreesInfo = async () => {
-      const _treesInfo = await getTreesInfoByWearer({
-        walletAddress: address as `0x${string}`,
+    const fetchWorkspacesList = async () => {
+      const _workspacesList = await getWorkspacesList({
+        walletAddress: wallet?.account?.address as `0x${string}`,
       });
-      console.log("treesInfo in workspace", _treesInfo);
-      // setTreesInfo(_treesInfo);
-      // const _workspacesList = await Promise.all(
-      //   treesInfo.map(async (tree: Tree | null | undefined) => {
-      //     return {
-      //       name: "workspace",
-      //       imageUrl: tree?.hats?.[0]?.imageUri,
-      //     };
-      //   })
-      // );
-      // console.log("workspacesList", _workspacesList);
+      console.log("_workspacesList", _workspacesList);
 
-      // const _workspacesList = [
-      //   {
-      //     name: "Workspace 1",
-      //     imageUrl: "https://example.com/image1.jpg",
-      //   },
-      //   {
-      //     name: "Workspace 2",
-      //     imageUrl: "https://example.com/image2.jpg",
-      //   },
-      // ];
-      // setWorkspacesList(_workspacesList);
+      setWorkspacesList(_workspacesList);
     };
-
-    fetchTreesInfo();
-  }, [address, getTreesInfoByWearer]);
+    fetchWorkspacesList();
+  }, [wallet?.account?.address, getWorkspacesList]);
 
   return (
     <>
-      {/* <Box mt={5}>
+      <Box mt={5}>
         {workspacesList.map((workspace) => (
-          <WorkspaceCard key={workspace.name} {...workspace} />
+          <WorkspaceCard key={workspace.treeId} {...workspace} />
         ))}
       </Box>
-      <>{JSON.stringify(treesInfo)}</>
       <BasicButton mt={7} onClick={() => navigate("/workspace/new")}>
         新しいワークスペースを作成
-      </BasicButton> */}
+      </BasicButton>
     </>
   );
 };
diff --git a/pkgs/frontend/hooks/useHats.ts b/pkgs/frontend/hooks/useHats.ts
index 49c1146..22b05a3 100644
--- a/pkgs/frontend/hooks/useHats.ts
+++ b/pkgs/frontend/hooks/useHats.ts
@@ -7,6 +7,7 @@ import { base, optimism, sepolia } from "viem/chains";
 import { HATS_ADDRESS } from "./useContracts";
 import { useActiveWallet } from "./useWallet";
 import { currentChain, publicClient } from "./useViem";
+import { ipfs2https, ipfs2httpsJson } from "utils/ipfs";
 
 // ###############################################################
 // Read with subgraph
@@ -39,7 +40,6 @@ export const useTreeInfo = (treeId: number) => {
     const fetch = async () => {
       if (!treeId) return;
       const tree = await getTreeInfo({
-        chainId: currentChain.id,
         treeId: treeId,
       });
 
@@ -195,7 +195,6 @@ export const useHats = () => {
 
       const treesIds = wearer.currentHats.map((hat) => {
         const treeId = hatIdToTreeId(BigInt(hat.id));
-        console.log("treeId", treeId);
         return treeId;
       });
 
@@ -212,18 +211,6 @@ export const useHats = () => {
         },
       });
 
-      // const treesInfo = await Promise.all(
-      //   wearer.currentHats.map(async (hat) => {
-      //     const treeId = hatIdToTreeId(BigInt(hat.id));
-      //     console.log("treeId", treeId);
-      //     const treeInfo = await getTreeInfo({
-      //       treeId: treeId,
-      //     });
-      //     console.log("treeInfo", treeInfo);
-      //     return treeInfo;
-      //   })
-      // );
-
       console.log("treesInfo", treesInfo);
 
       return treesInfo;
@@ -231,21 +218,31 @@ export const useHats = () => {
     [getWearerInfo]
   );
 
-  const getWorkspacesList = useCallback(async () => {
-    const treesInfo = await getTreesInfoByWearer({
-      walletAddress: "0x0000000000000000000000000000000000000000",
-    });
-    console.log("treesInfo", treesInfo);
-    const workspacesList = await Promise.all(
-      treesInfo.map(async (tree) => {
-        return {
-          name: "workspace",
-          imageUrl: tree?.hats?.[0]?.imageUri,
-        };
-      })
-    );
-    return workspacesList;
-  }, [getTreesInfoByWearer]);
+  const getWorkspacesList = useCallback(
+    async (params: { walletAddress: string }) => {
+      const treesInfo = await getTreesInfoByWearer({
+        walletAddress: params.walletAddress,
+      });
+      console.log("treesInfo", treesInfo);
+      const workspacesList = await Promise.all(
+        treesInfo.map(async (tree) => {
+          const detailsUri = tree?.hats?.[0]?.details;
+          const detailsJson = detailsUri
+            ? await ipfs2httpsJson(detailsUri)
+            : undefined;
+          const imageIpfsUri = tree?.hats?.[0].imageUri;
+          const imageHttps = ipfs2https(imageIpfsUri);
+          return {
+            treeId: tree?.id,
+            name: detailsJson?.data.name,
+            imageUrl: imageHttps,
+          };
+        })
+      );
+      return workspacesList;
+    },
+    [getTreesInfoByWearer]
+  );
 
   /**
    * HatsTimeframeModuleコントラクトのアドレスを取得するコールバック関数
diff --git a/pkgs/frontend/utils/ipfs.ts b/pkgs/frontend/utils/ipfs.ts
index 5d59aef..28888d0 100644
--- a/pkgs/frontend/utils/ipfs.ts
+++ b/pkgs/frontend/utils/ipfs.ts
@@ -3,6 +3,8 @@ import { PinataSDK } from "pinata-web3";
 const getPinataConfig = () => {
   const pinataJwt = import.meta.env.VITE_PINATA_JWT;
   const pinataGateway = import.meta.env.VITE_PINATA_GATEWAY;
+  // const pinataGatewayToken = import.meta.env.VITE_PINATA_GATEWAY_TOKEN;
+  const pinataGatewayToken = import.meta.env.VITE_PINATA_GATEWAY_TOKEN;
 
   if (!pinataJwt) {
     throw new Error("VITE_PINATA_JWT is not defined");
@@ -10,8 +12,11 @@ const getPinataConfig = () => {
   if (!pinataGateway) {
     throw new Error("VITE_PINATA_GATEWAY is not defined");
   }
+  if (!pinataGatewayToken) {
+    throw new Error("VITE_PINATA_GATEWAY_TOKEN is not defined");
+  }
 
-  return { pinataJwt, pinataGateway };
+  return { pinataJwt, pinataGateway, pinataGatewayToken };
 };
 
 let ipfsClient: PinataSDK | null = null;
@@ -50,8 +55,20 @@ export const ipfsUploadFile = async (file: File) => {
   }
 };
 
-export const ipfs2https = (ipfsUri: string) => {
-  const { pinataGateway } = getPinataConfig();
+export const ipfs2https = (ipfsUri: string | undefined) => {
+  if (!ipfsUri) return undefined;
+
+  const { pinataGateway, pinataGatewayToken } = getPinataConfig();
   const cid = ipfsUri.replace("ipfs://", "");
-  return `${pinataGateway}/ipfs/${cid}?pinataGatewayToken=M-iEBglWoUCZWJYsihe1IRrngs7HIGeIr3s5lObVw96hv7GTuCw1QrlmnNtwvuXt`;
+  return `https://${pinataGateway}/ipfs/${cid}?pinataGatewayToken=${pinataGatewayToken}`;
+};
+
+export const ipfs2httpsJson = async (ipfsUri: string | undefined) => {
+  if (!ipfsUri) return undefined;
+
+  const httpsUri = ipfs2https(ipfsUri);
+  if (!httpsUri) return undefined;
+  const response = await fetch(httpsUri);
+  if (!response.ok) return undefined;
+  return response.json();
 };

From 3bec9c828e5ea52c9c697bb85d8b91cca43bf8c9 Mon Sep 17 00:00:00 2001
From: yawn <69970183+yawn-c111@users.noreply.github.com>
Date: Wed, 18 Dec 2024 11:42:01 +0900
Subject: [PATCH 04/14] fix: enable header in the root

---
 pkgs/frontend/app/root.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pkgs/frontend/app/root.tsx b/pkgs/frontend/app/root.tsx
index 8d1f6bd..ebbba57 100644
--- a/pkgs/frontend/app/root.tsx
+++ b/pkgs/frontend/app/root.tsx
@@ -75,7 +75,7 @@ export default function App() {
             alignItems="center"
             position="relative"
           >
-            {/* <Header /> */}
+            <Header />
             <Box
               width="100%"
               height="100%"

From 710eb46c0846d3c3f2ade06ea30fa6928a926aeb Mon Sep 17 00:00:00 2001
From: yawn <69970183+yawn-c111@users.noreply.github.com>
Date: Wed, 18 Dec 2024 11:50:43 +0900
Subject: [PATCH 05/14] refactor: deleted unnecessary log

---
 pkgs/frontend/app/components/Header.tsx       |  3 ---
 pkgs/frontend/app/routes/workspace._index.tsx | 10 ----------
 pkgs/frontend/hooks/useHats.ts                |  3 ---
 3 files changed, 16 deletions(-)

diff --git a/pkgs/frontend/app/components/Header.tsx b/pkgs/frontend/app/components/Header.tsx
index de36552..4d4da27 100644
--- a/pkgs/frontend/app/components/Header.tsx
+++ b/pkgs/frontend/app/components/Header.tsx
@@ -28,8 +28,6 @@ enum HeaderType {
 }
 
 export const Header = () => {
-  console.log("=== Header render ===");
-
   const [headerType, setHeaderType] = useState<HeaderType>(
     HeaderType.NonHeader
   );
@@ -48,7 +46,6 @@ export const Header = () => {
 
   useEffect(() => {
     const determineHeaderType = () => {
-      console.log("pathname", pathname);
       if (
         !NO_HEADER_PATHS.includes(pathname) &&
         isWalletConnected &&
diff --git a/pkgs/frontend/app/routes/workspace._index.tsx b/pkgs/frontend/app/routes/workspace._index.tsx
index 79015e4..ce7574a 100644
--- a/pkgs/frontend/app/routes/workspace._index.tsx
+++ b/pkgs/frontend/app/routes/workspace._index.tsx
@@ -47,16 +47,6 @@ const Workspace: FC = () => {
     console.log("wallet?.account?.address", wallet?.account?.address);
   }, [wallet?.account?.address]);
 
-  const address = useMemo(() => {
-    if (wallet?.account?.address) {
-      return wallet?.account?.address as `0x${string}`;
-    }
-  }, [wallet?.account?.address]);
-
-  useEffect(() => {
-    console.log("address", address);
-  }, [address]);
-
   useEffect(() => {
     const fetchWorkspacesList = async () => {
       const _workspacesList = await getWorkspacesList({
diff --git a/pkgs/frontend/hooks/useHats.ts b/pkgs/frontend/hooks/useHats.ts
index d23f90e..d94bb8b 100644
--- a/pkgs/frontend/hooks/useHats.ts
+++ b/pkgs/frontend/hooks/useHats.ts
@@ -214,8 +214,6 @@ export const useHats = () => {
         },
       });
 
-      console.log("treesInfo", treesInfo);
-
       return treesInfo;
     },
     [getWearerInfo]
@@ -226,7 +224,6 @@ export const useHats = () => {
       const treesInfo = await getTreesInfoByWearer({
         walletAddress: params.walletAddress,
       });
-      console.log("treesInfo", treesInfo);
       const workspacesList = await Promise.all(
         treesInfo.map(async (tree) => {
           const detailsUri = tree?.hats?.[0]?.details;

From 0007415478a3e508d56d975930f060aa52604b3e Mon Sep 17 00:00:00 2001
From: yawn <69970183+yawn-c111@users.noreply.github.com>
Date: Wed, 18 Dec 2024 11:57:04 +0900
Subject: [PATCH 06/14] fix: workspace cards icon size

---
 pkgs/frontend/app/components/icon/WorkspaceIcon.tsx | 1 +
 pkgs/frontend/app/routes/workspace._index.tsx       | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/pkgs/frontend/app/components/icon/WorkspaceIcon.tsx b/pkgs/frontend/app/components/icon/WorkspaceIcon.tsx
index 441d21a..af1dce7 100644
--- a/pkgs/frontend/app/components/icon/WorkspaceIcon.tsx
+++ b/pkgs/frontend/app/components/icon/WorkspaceIcon.tsx
@@ -14,6 +14,7 @@ export const WorkspaceIcon = ({
     <CommonIcon
       imageUrl={workspaceImageUrl}
       size={size}
+      borderRadius="xl"
       fallbackIconComponent={
         <FaPeopleGroup
           style={{
diff --git a/pkgs/frontend/app/routes/workspace._index.tsx b/pkgs/frontend/app/routes/workspace._index.tsx
index ce7574a..def3590 100644
--- a/pkgs/frontend/app/routes/workspace._index.tsx
+++ b/pkgs/frontend/app/routes/workspace._index.tsx
@@ -24,7 +24,7 @@ const WorkspaceCard: FC<{
       alignItems="center"
       onClick={() => navigate(`/${treeId}`)}
     >
-      <WorkspaceIcon workspaceImageUrl={imageUrl} size={10} />
+      <WorkspaceIcon workspaceImageUrl={imageUrl} size={12} />
       <Text ml={4}>{name}</Text>
     </Box>
   );

From 1015e1e9f832372b5e3e2f4bc363653a80d1625e Mon Sep 17 00:00:00 2001
From: yawn <69970183+yawn-c111@users.noreply.github.com>
Date: Wed, 18 Dec 2024 12:01:15 +0900
Subject: [PATCH 07/14] refactor: remove commented-out code in tree id page

---
 pkgs/frontend/app/routes/$treeId.tsx | 18 ------------------
 1 file changed, 18 deletions(-)

diff --git a/pkgs/frontend/app/routes/$treeId.tsx b/pkgs/frontend/app/routes/$treeId.tsx
index f8a073a..a3dd287 100644
--- a/pkgs/frontend/app/routes/$treeId.tsx
+++ b/pkgs/frontend/app/routes/$treeId.tsx
@@ -28,21 +28,3 @@ const WorkspaceTop: FC = () => {
 };
 
 export default WorkspaceTop;
-
-// import { useSmartAccountClient } from "hooks/useWallet";
-
-// export default function Tree({ treeId }: { treeId: string }) {
-//   console.log("=== Tree render ===");
-
-//   const smartWallet = useSmartAccountClient();
-//   console.log("smartWallet.account.address", smartWallet?.account?.address);
-
-//   return (
-//     <>
-//       <div>
-//         Tree {treeId}
-//         <div>{smartWallet?.account?.address}</div>
-//       </div>
-//     </>
-//   );
-// }

From 5b9b5e4d34837ffce24f821ca9176c0e9153c623 Mon Sep 17 00:00:00 2001
From: yawn <69970183+yawn-c111@users.noreply.github.com>
Date: Wed, 18 Dec 2024 15:01:49 +0900
Subject: [PATCH 08/14] update: bigbang for new contract without ERC2771

---
 pkgs/frontend/abi/bigbang.ts               | 37 +++-------------
 pkgs/frontend/app/routes/workspace.new.tsx | 35 ++++++++-------
 pkgs/frontend/hooks/useBigBang.ts          | 50 ++++++++--------------
 3 files changed, 43 insertions(+), 79 deletions(-)

diff --git a/pkgs/frontend/abi/bigbang.ts b/pkgs/frontend/abi/bigbang.ts
index 0c494e1..b20e511 100644
--- a/pkgs/frontend/abi/bigbang.ts
+++ b/pkgs/frontend/abi/bigbang.ts
@@ -34,6 +34,12 @@ export const BIGBANG_ABI = [
   {
     anonymous: false,
     inputs: [
+      {
+        indexed: true,
+        internalType: "address",
+        name: "creator",
+        type: "address",
+      },
       {
         indexed: true,
         internalType: "address",
@@ -47,7 +53,7 @@ export const BIGBANG_ABI = [
         type: "uint256",
       },
       {
-        indexed: true,
+        indexed: false,
         internalType: "uint256",
         name: "hatterHatId",
         type: "uint256",
@@ -205,11 +211,6 @@ export const BIGBANG_ABI = [
         name: "_hatterHatImageURI",
         type: "string",
       },
-      {
-        internalType: "address",
-        name: "_trustedForwarder",
-        type: "address",
-      },
     ],
     name: "bigbang",
     outputs: [
@@ -224,11 +225,6 @@ export const BIGBANG_ABI = [
   },
   {
     inputs: [
-      {
-        internalType: "address",
-        name: "_trustedForwarder",
-        type: "address",
-      },
       {
         internalType: "address",
         name: "_hatsAddress",
@@ -265,25 +261,6 @@ export const BIGBANG_ABI = [
     stateMutability: "nonpayable",
     type: "function",
   },
-  {
-    inputs: [
-      {
-        internalType: "address",
-        name: "forwarder",
-        type: "address",
-      },
-    ],
-    name: "isTrustedForwarder",
-    outputs: [
-      {
-        internalType: "bool",
-        name: "",
-        type: "bool",
-      },
-    ],
-    stateMutability: "view",
-    type: "function",
-  },
   {
     inputs: [],
     name: "owner",
diff --git a/pkgs/frontend/app/routes/workspace.new.tsx b/pkgs/frontend/app/routes/workspace.new.tsx
index 76e8e04..f024378 100644
--- a/pkgs/frontend/app/routes/workspace.new.tsx
+++ b/pkgs/frontend/app/routes/workspace.new.tsx
@@ -23,10 +23,14 @@ const WorkspaceNew: FC = () => {
   const { uploadImageFileToIpfs, imageFile, setImageFile } =
     useUploadImageFileToIpfs();
   const { bigbang } = useBigBang();
-  const { preferredAddress } = useActiveWallet();
+  const { wallet } = useActiveWallet();
   const navigate = useNavigate();
 
   const handleSubmit = async () => {
+    if (!wallet) {
+      alert("ウォレットを接続してください。");
+      return;
+    }
     if (!name || !description || !imageFile) {
       alert("全ての項目を入力してください。");
       return;
@@ -48,34 +52,33 @@ const WorkspaceNew: FC = () => {
 
       const resUploadImage = await uploadImageFileToIpfs();
       if (!resUploadImage) throw new Error("Failed to upload image to ipfs");
-      console.log(resUploadImage);
+      console.log("resUploadImage", resUploadImage);
 
       const parsedLog = await bigbang({
-        owner: preferredAddress as Address,
+        owner: wallet?.account.address as Address,
         topHatDetails: resUploadMetadata.ipfsUri,
         topHatImageURI: resUploadImage.ipfsUri,
         hatterHatDetails: resUploadMetadata.ipfsUri,
         hatterHatImageURI: resUploadImage.ipfsUri,
-        trustedForwarder: "0x0000000000000000000000000000000000000000",
       });
 
-      // if (!decodedLog) throw new Error("Tx failed");
-      console.log("parsedLog", parsedLog);
-
-      // const topHatId = parsedLog.args.topHatId;
-      // console.log(topHatId);
+      const topHatId = parsedLog?.[0].args.topHatId;
+      console.log("topHatId", topHatId);
 
-      // const treeId = hatIdToTreeId(BigInt(topHatId));
-      // // const treeId = 1;
-      // console.log(treeId);
+      if (topHatId) {
+        const treeId = hatIdToTreeId(topHatId);
+        console.log(treeId);
 
-      // const treeIdStr = treeId.toString();
+        const treeIdStr = treeId.toString();
+        console.log("treeIdStr", treeIdStr);
 
-      // navigate(`/${treeIdStr}`);
-      navigate("/workspace");
+        navigate(`/${treeIdStr}`);
+      } else {
+        navigate("/workspace");
+      }
     } catch (error) {
       console.error(error);
-      alert("エラーが発生しました。");
+      alert("エラーが発生しました。" + error);
     } finally {
       setIsLoading(false);
     }
diff --git a/pkgs/frontend/hooks/useBigBang.ts b/pkgs/frontend/hooks/useBigBang.ts
index 396f873..84b9cb4 100644
--- a/pkgs/frontend/hooks/useBigBang.ts
+++ b/pkgs/frontend/hooks/useBigBang.ts
@@ -8,7 +8,7 @@ import {
   parseEventLogs,
 } from "viem";
 import { BIGBANG_ADDRESS } from "./useContracts";
-import { useSmartAccountClient } from "./useWallet";
+import { useActiveWallet } from "./useWallet";
 import { publicClient } from "./useViem";
 
 /**
@@ -16,7 +16,7 @@ import { publicClient } from "./useViem";
  * @returns
  */
 export const useBigBang = () => {
-  const smartAccountClient = useSmartAccountClient();
+  const { wallet } = useActiveWallet();
 
   const [isLoading, setIsLoading] = useState(false);
 
@@ -30,30 +30,25 @@ export const useBigBang = () => {
       topHatImageURI: string;
       hatterHatDetails: string;
       hatterHatImageURI: string;
-      trustedForwarder: Address;
     }) => {
-      if (!smartAccountClient) return;
+      if (!wallet) return;
 
       setIsLoading(true);
 
+      console.log("wallet", wallet);
+      console.log("params", params);
+
       try {
-        const txHash = await smartAccountClient.sendTransaction({
-          calls: [
-            {
-              to: BIGBANG_ADDRESS,
-              data: encodeFunctionData({
-                abi: BIGBANG_ABI,
-                functionName: "bigbang",
-                args: [
-                  params.owner,
-                  params.topHatDetails,
-                  params.topHatImageURI,
-                  params.hatterHatDetails,
-                  params.hatterHatImageURI,
-                  params.trustedForwarder,
-                ],
-              }),
-            },
+        const txHash = await wallet.writeContract({
+          abi: BIGBANG_ABI,
+          address: BIGBANG_ADDRESS,
+          functionName: "bigbang",
+          args: [
+            params.owner,
+            params.topHatDetails,
+            params.topHatImageURI,
+            params.hatterHatDetails,
+            params.hatterHatImageURI,
           ],
         });
 
@@ -64,7 +59,6 @@ export const useBigBang = () => {
         });
         console.log("receipt:", receipt);
 
-        // @help イベントが取れない（undefinedになる）
         const parsedLog = parseEventLogs({
           abi: BIGBANG_ABI,
           eventName: "Executed",
@@ -74,22 +68,12 @@ export const useBigBang = () => {
 
         console.log("parsedLog:", parsedLog);
 
-        if (parsedLog) {
-          console.log("parsedLog.args:", parsedLog.args);
-          // console.log(
-          //   "Tree Link:",
-          //   `https://app.hatsprotocol.xyz/trees/${String(
-          //     publicClient.chain?.id
-          //   )}/${hatIdToTreeId(BigInt(parsedLog.args.topHatId))}`
-          // );
-        }
-
         return parsedLog;
       } finally {
         setIsLoading(false);
       }
     },
-    [smartAccountClient]
+    [wallet]
   );
 
   return { bigbang, isLoading };

From 0bdf9fea0535707ddf8daff103c032bac01c510b Mon Sep 17 00:00:00 2001
From: yawn <69970183+yawn-c111@users.noreply.github.com>
Date: Wed, 18 Dec 2024 15:02:17 +0900
Subject: [PATCH 09/14] update: treeId from hex to number

---
 pkgs/frontend/hooks/useHats.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pkgs/frontend/hooks/useHats.ts b/pkgs/frontend/hooks/useHats.ts
index d94bb8b..cac8679 100644
--- a/pkgs/frontend/hooks/useHats.ts
+++ b/pkgs/frontend/hooks/useHats.ts
@@ -1,4 +1,4 @@
-import { hatIdToTreeId } from "@hatsprotocol/sdk-v1-core";
+import { hatIdToTreeId, treeIdHexToDecimal } from "@hatsprotocol/sdk-v1-core";
 import { Hat, HatsSubgraphClient, Tree } from "@hatsprotocol/sdk-v1-subgraph";
 import { HATS_ABI } from "abi/hats";
 import { useCallback, useEffect, useState } from "react";
@@ -233,7 +233,7 @@ export const useHats = () => {
           const imageIpfsUri = tree?.hats?.[0].imageUri;
           const imageHttps = ipfs2https(imageIpfsUri);
           return {
-            treeId: tree?.id,
+            treeId: treeIdHexToDecimal(tree?.id),
             name: detailsJson?.data.name,
             imageUrl: imageHttps,
           };

From 177a7720fb3eb8132c4d7f1703699d94bbced97e Mon Sep 17 00:00:00 2001
From: yawn <69970183+yawn-c111@users.noreply.github.com>
Date: Wed, 18 Dec 2024 15:06:07 +0900
Subject: [PATCH 10/14] refactor: clean up useBigBang hook

---
 pkgs/frontend/hooks/useBigBang.ts | 14 +-------------
 1 file changed, 1 insertion(+), 13 deletions(-)

diff --git a/pkgs/frontend/hooks/useBigBang.ts b/pkgs/frontend/hooks/useBigBang.ts
index 84b9cb4..305f367 100644
--- a/pkgs/frontend/hooks/useBigBang.ts
+++ b/pkgs/frontend/hooks/useBigBang.ts
@@ -1,12 +1,6 @@
-import { hatIdToTreeId } from "@hatsprotocol/sdk-v1-core";
 import { BIGBANG_ABI } from "abi/bigbang";
 import { useCallback, useState } from "react";
-import {
-  Address,
-  decodeEventLog,
-  encodeFunctionData,
-  parseEventLogs,
-} from "viem";
+import { Address, parseEventLogs } from "viem";
 import { BIGBANG_ADDRESS } from "./useContracts";
 import { useActiveWallet } from "./useWallet";
 import { publicClient } from "./useViem";
@@ -35,9 +29,6 @@ export const useBigBang = () => {
 
       setIsLoading(true);
 
-      console.log("wallet", wallet);
-      console.log("params", params);
-
       try {
         const txHash = await wallet.writeContract({
           abi: BIGBANG_ABI,
@@ -57,7 +48,6 @@ export const useBigBang = () => {
         const receipt = await publicClient.waitForTransactionReceipt({
           hash: txHash,
         });
-        console.log("receipt:", receipt);
 
         const parsedLog = parseEventLogs({
           abi: BIGBANG_ABI,
@@ -66,8 +56,6 @@ export const useBigBang = () => {
           strict: false,
         });
 
-        console.log("parsedLog:", parsedLog);
-
         return parsedLog;
       } finally {
         setIsLoading(false);

From 2cf3a9f7a9c7a8cc7ad05e704d76a9053a308d9c Mon Sep 17 00:00:00 2001
From: yawn <69970183+yawn-c111@users.noreply.github.com>
Date: Wed, 18 Dec 2024 15:06:44 +0900
Subject: [PATCH 11/14] refactor: remove unused imports in useHats hook

---
 pkgs/frontend/hooks/useHats.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pkgs/frontend/hooks/useHats.ts b/pkgs/frontend/hooks/useHats.ts
index cac8679..10d871f 100644
--- a/pkgs/frontend/hooks/useHats.ts
+++ b/pkgs/frontend/hooks/useHats.ts
@@ -2,10 +2,10 @@ import { hatIdToTreeId, treeIdHexToDecimal } from "@hatsprotocol/sdk-v1-core";
 import { Hat, HatsSubgraphClient, Tree } from "@hatsprotocol/sdk-v1-subgraph";
 import { HATS_ABI } from "abi/hats";
 import { useCallback, useEffect, useState } from "react";
-import { Address, decodeEventLog, encodeFunctionData } from "viem";
+import { Address, decodeEventLog } from "viem";
 import { base, optimism, sepolia } from "viem/chains";
 import { HATS_ADDRESS } from "./useContracts";
-import { useActiveWallet, useSmartAccountClient } from "./useWallet";
+import { useActiveWallet } from "./useWallet";
 import { currentChain, publicClient } from "./useViem";
 import { ipfs2https, ipfs2httpsJson } from "utils/ipfs";
 

From c4133c3cc67bd864c3f69e0931161e4a72421241 Mon Sep 17 00:00:00 2001
From: yawn <69970183+yawn-c111@users.noreply.github.com>
Date: Wed, 18 Dec 2024 18:26:35 +0900
Subject: [PATCH 12/14] fix: fetch error about treesInfo with wallet address

---
 pkgs/frontend/app/routes/workspace._index.tsx | 31 +++++++++++++------
 pkgs/frontend/hooks/useHats.ts                |  2 +-
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/pkgs/frontend/app/routes/workspace._index.tsx b/pkgs/frontend/app/routes/workspace._index.tsx
index def3590..293dc9f 100644
--- a/pkgs/frontend/app/routes/workspace._index.tsx
+++ b/pkgs/frontend/app/routes/workspace._index.tsx
@@ -1,10 +1,11 @@
-import { FC, useEffect, useMemo, useState } from "react";
+import { FC, useEffect, useMemo, useRef, useState } from "react";
 import { Box, Text } from "@chakra-ui/react";
 import { WorkspaceIcon } from "~/components/icon/WorkspaceIcon";
 import { BasicButton } from "~/components/BasicButton";
 import { useNavigate } from "@remix-run/react";
 import { useActiveWallet } from "hooks/useWallet";
 import { useHats } from "../../hooks/useHats";
+import { Address } from "viem";
 
 const WorkspaceCard: FC<{
   treeId: string;
@@ -38,26 +39,38 @@ const Workspace: FC = () => {
       imageUrl: string | undefined;
     }[]
   >([]);
+  const smartWalletRef = useRef<Address | undefined>(undefined);
+
   const navigate = useNavigate();
 
-  const { wallet } = useActiveWallet();
+  const { wallet, isSmartWallet } = useActiveWallet();
   const { getWorkspacesList } = useHats();
 
-  useEffect(() => {
-    console.log("wallet?.account?.address", wallet?.account?.address);
-  }, [wallet?.account?.address]);
+  const address = useMemo(() => {
+    if (smartWalletRef.current) {
+      return smartWalletRef.current;
+    } else if (isSmartWallet) {
+      smartWalletRef.current = wallet?.account?.address;
+      return smartWalletRef.current;
+    } else {
+      return wallet?.account?.address;
+    }
+  }, [wallet?.account?.address, isSmartWallet]);
 
   useEffect(() => {
+    if (smartWalletRef.current !== undefined && !isSmartWallet) return;
+
     const fetchWorkspacesList = async () => {
       const _workspacesList = await getWorkspacesList({
-        walletAddress: wallet?.account?.address as `0x${string}`,
+        walletAddress: address as `0x${string}`,
       });
-      console.log("_workspacesList", _workspacesList);
 
-      setWorkspacesList(_workspacesList);
+      if (smartWalletRef.current === undefined || isSmartWallet) {
+        setWorkspacesList(_workspacesList);
+      }
     };
     fetchWorkspacesList();
-  }, [wallet?.account?.address, getWorkspacesList]);
+  }, [address, getWorkspacesList]);
 
   return (
     <>
diff --git a/pkgs/frontend/hooks/useHats.ts b/pkgs/frontend/hooks/useHats.ts
index 10d871f..1f8efa7 100644
--- a/pkgs/frontend/hooks/useHats.ts
+++ b/pkgs/frontend/hooks/useHats.ts
@@ -233,7 +233,7 @@ export const useHats = () => {
           const imageIpfsUri = tree?.hats?.[0].imageUri;
           const imageHttps = ipfs2https(imageIpfsUri);
           return {
-            treeId: treeIdHexToDecimal(tree?.id),
+            treeId: String(treeIdHexToDecimal(tree?.id)),
             name: detailsJson?.data.name,
             imageUrl: imageHttps,
           };

From d7db497de076043b54d70179b1befbbb3512bdd5 Mon Sep 17 00:00:00 2001
From: yawn <69970183+yawn-c111@users.noreply.github.com>
Date: Wed, 18 Dec 2024 18:37:15 +0900
Subject: [PATCH 13/14] chore: add comment about workspacesList in workspace
 page

---
 pkgs/frontend/app/routes/workspace._index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/pkgs/frontend/app/routes/workspace._index.tsx b/pkgs/frontend/app/routes/workspace._index.tsx
index 293dc9f..463db06 100644
--- a/pkgs/frontend/app/routes/workspace._index.tsx
+++ b/pkgs/frontend/app/routes/workspace._index.tsx
@@ -65,6 +65,7 @@ const Workspace: FC = () => {
         walletAddress: address as `0x${string}`,
       });
 
+      // このセッションでスマートウォレットに接続した記録があれば、ユーザー自身のウォレットによるワークスペースの更新は無視する
       if (smartWalletRef.current === undefined || isSmartWallet) {
         setWorkspacesList(_workspacesList);
       }

From 7c5909912bc867039272b4c9d6510a9913c9a256 Mon Sep 17 00:00:00 2001
From: yu23ki14 <yuki_021423@yahoo.co.jp>
Date: Wed, 18 Dec 2024 19:16:03 +0900
Subject: [PATCH 14/14] check using embed wallet or not

---
 pkgs/frontend/app/routes/workspace._index.tsx | 24 ++++++-------------
 pkgs/frontend/hooks/useWallet.ts              | 20 +++++++++-------
 2 files changed, 18 insertions(+), 26 deletions(-)

diff --git a/pkgs/frontend/app/routes/workspace._index.tsx b/pkgs/frontend/app/routes/workspace._index.tsx
index 463db06..84a0a1f 100644
--- a/pkgs/frontend/app/routes/workspace._index.tsx
+++ b/pkgs/frontend/app/routes/workspace._index.tsx
@@ -39,36 +39,26 @@ const Workspace: FC = () => {
       imageUrl: string | undefined;
     }[]
   >([]);
-  const smartWalletRef = useRef<Address | undefined>(undefined);
 
   const navigate = useNavigate();
 
-  const { wallet, isSmartWallet } = useActiveWallet();
+  const { wallet, isSmartWallet, isConnectingEmbeddedWallet } =
+    useActiveWallet();
   const { getWorkspacesList } = useHats();
 
   const address = useMemo(() => {
-    if (smartWalletRef.current) {
-      return smartWalletRef.current;
-    } else if (isSmartWallet) {
-      smartWalletRef.current = wallet?.account?.address;
-      return smartWalletRef.current;
-    } else {
-      return wallet?.account?.address;
-    }
-  }, [wallet?.account?.address, isSmartWallet]);
+    if (isConnectingEmbeddedWallet && !isSmartWallet) return;
+    return wallet?.account?.address as Address;
+  }, [wallet?.account?.address, isSmartWallet, isConnectingEmbeddedWallet]);
 
   useEffect(() => {
-    if (smartWalletRef.current !== undefined && !isSmartWallet) return;
-
     const fetchWorkspacesList = async () => {
+      if (!address) return;
       const _workspacesList = await getWorkspacesList({
         walletAddress: address as `0x${string}`,
       });
 
-      // このセッションでスマートウォレットに接続した記録があれば、ユーザー自身のウォレットによるワークスペースの更新は無視する
-      if (smartWalletRef.current === undefined || isSmartWallet) {
-        setWorkspacesList(_workspacesList);
-      }
+      setWorkspacesList(_workspacesList);
     };
     fetchWorkspacesList();
   }, [address, getWorkspacesList]);
diff --git a/pkgs/frontend/hooks/useWallet.ts b/pkgs/frontend/hooks/useWallet.ts
index 17469d3..1b3fdf6 100644
--- a/pkgs/frontend/hooks/useWallet.ts
+++ b/pkgs/frontend/hooks/useWallet.ts
@@ -1,4 +1,4 @@
-import { usePrivy, useWallets } from "@privy-io/react-auth";
+import { ConnectedWallet, usePrivy, useWallets } from "@privy-io/react-auth";
 import { createSmartAccountClient, SmartAccountClient } from "permissionless";
 import { toSimpleSmartAccount } from "permissionless/accounts";
 import { createPimlicoClient } from "permissionless/clients/pimlico";
@@ -39,7 +39,7 @@ export const pimlicoClient = createPimlicoClient({
 /**
  * Pimlico 向けの React Hooks
  */
-export const useSmartAccountClient = () => {
+export const useSmartAccountClient = (wallets: ConnectedWallet[]) => {
   const [client, setClient] =
     useState<
       SmartAccountClient<
@@ -48,7 +48,6 @@ export const useSmartAccountClient = () => {
         SmartAccount<SmartAccountImplementation>
       >
     >();
-  const { wallets } = useWallets();
 
   useEffect(() => {
     /**
@@ -92,9 +91,7 @@ export const useSmartAccountClient = () => {
   return client;
 };
 
-export const useAccountClient = () => {
-  const { wallets } = useWallets();
-
+export const useAccountClient = (wallets: ConnectedWallet[]) => {
   const [client, setClient] =
     useState<WalletClient<CustomTransport, typeof currentChain, Account>>();
 
@@ -122,8 +119,13 @@ export const useAccountClient = () => {
 };
 
 export const useActiveWallet = () => {
-  const walletClient = useAccountClient();
-  const smartWalletClient = useSmartAccountClient();
+  const { wallets } = useWallets();
+  const walletClient = useAccountClient(wallets);
+  const smartWalletClient = useSmartAccountClient(wallets);
+
+  const isConnectingEmbeddedWallet = useMemo(() => {
+    return wallets.some((wallet) => wallet.connectorType === "embedded");
+  }, [wallets]);
 
   const isSmartWallet = useMemo(() => {
     return !!smartWalletClient;
@@ -133,5 +135,5 @@ export const useActiveWallet = () => {
     return smartWalletClient ? smartWalletClient : walletClient;
   }, [walletClient, smartWalletClient]);
 
-  return { wallet, isSmartWallet };
+  return { wallet, isSmartWallet, isConnectingEmbeddedWallet };
 };