diff --git a/pkgs/frontend/app/components/Header.tsx b/pkgs/frontend/app/components/Header.tsx index 9009c5c..b8d6fc2 100644 --- a/pkgs/frontend/app/components/Header.tsx +++ b/pkgs/frontend/app/components/Header.tsx @@ -1,8 +1,10 @@ -import { useState, useEffect } from "react"; +import { useState, useEffect, useMemo } from "react"; import { Box, Flex, Text } from "@chakra-ui/react"; import { WorkspaceIcon } from "./icon/WorkspaceIcon"; import { UserIcon } from "./icon/UserIcon"; import { useLocation } from "@remix-run/react"; +import { useActiveWalletIdentity } from "hooks/useENS"; +import { ipfs2https } from "utils/ipfs"; const NO_HEADER_PATHS: string[] = ["/login", "/signup"]; // 適宜ヘッダーが不要なページのパスを追加 const WORKSPACES_PATHS: string[] = ["/workspaces"]; // 適宜ワークスペースが未選択な状態のページのパスを追加 @@ -34,7 +36,6 @@ export const Header = () => { const isWorkspaceSelected = true; // ToDo: ユーザーやワークスペースごとの各種データを取得するロジックを実装する - const userImageUrl: string | undefined = undefined; const workspaceName: string | undefined = "Workspace Name"; const workspaceImageUrl: string | undefined = undefined; @@ -62,6 +63,13 @@ export const Header = () => { workspaceName, ]); + const { identity } = useActiveWalletIdentity(); + + const userImageUrl = useMemo(() => { + const avatar = identity?.text_records?.["avatar"]; + return avatar ? ipfs2https(avatar) : undefined; + }, [identity]); + return headerType !== HeaderType.NonHeader ? ( diff --git a/pkgs/frontend/app/root.tsx b/pkgs/frontend/app/root.tsx index db9ca1d..ebbba57 100644 --- a/pkgs/frontend/app/root.tsx +++ b/pkgs/frontend/app/root.tsx @@ -32,6 +32,29 @@ export const Layout = withEmotionCache((props: LayoutProps, cache) => { /> + {children} + + + + + + ); +}); + +export default function App() { + return ( + + + {/* DarkMode 切り替えの実装の可能性に備え、ThemeProvider を残しておいてあります */} + {/* */} + { flexDirection="column" position="relative" > - {children} + - - - - - ); -}); - -export default function App() { - return ( - - - {/* DarkMode 切り替えの実装の可能性に備え、ThemeProvider を残しておいてあります */} - {/* */} - {/* */} diff --git a/pkgs/frontend/hooks/useENS.ts b/pkgs/frontend/hooks/useENS.ts index 4c080d9..1e4eee2 100644 --- a/pkgs/frontend/hooks/useENS.ts +++ b/pkgs/frontend/hooks/useENS.ts @@ -1,6 +1,23 @@ -import { useCallback, useEffect, useState } from "react"; +import { useCallback, useEffect, useMemo, useState } from "react"; import { NameData, TextRecords } from "namestone-sdk"; import axios from "axios"; +import { useActiveWallet } from "./useWallet"; + +export const useActiveWalletIdentity = () => { + const { wallet } = useActiveWallet(); + + const address = useMemo(() => { + return [wallet?.account?.address!]; + }, [wallet]); + const { names } = useNamesByAddresses(address); + + const identity = useMemo(() => { + if (!names || names.length === 0) return; + return names[0][0]; + }, [names]); + + return { identity }; +}; export const useNamesByAddresses = (addresses?: string[]) => { const [names, setNames] = useState([]); diff --git a/pkgs/frontend/hooks/useWallet.ts b/pkgs/frontend/hooks/useWallet.ts index 8fce2b8..65bd735 100644 --- a/pkgs/frontend/hooks/useWallet.ts +++ b/pkgs/frontend/hooks/useWallet.ts @@ -3,7 +3,7 @@ import { createSmartAccountClient, SmartAccountClient } from "permissionless"; import { toSimpleSmartAccount } from "permissionless/accounts"; import { createPimlicoClient } from "permissionless/clients/pimlico"; import { useCallback, useEffect, useMemo, useState } from "react"; -import { createWalletClient, custom, http, WalletClient } from "viem"; +import { Address, createWalletClient, custom, http, WalletClient } from "viem"; import { entryPoint07Address } from "viem/account-abstraction"; import { currentChain, publicClient } from "./useViem"; @@ -86,6 +86,7 @@ export const useAccountClient = () => { const walletClient = createWalletClient({ chain: currentChain, transport: custom(provider), + account: wallet.address as Address, }); setClient(walletClient); diff --git a/pkgs/frontend/utils/ipfs.ts b/pkgs/frontend/utils/ipfs.ts index d22d008..8797d59 100644 --- a/pkgs/frontend/utils/ipfs.ts +++ b/pkgs/frontend/utils/ipfs.ts @@ -49,3 +49,9 @@ export const ipfsUploadFile = async (file: File) => { throw error; } }; + +export const ipfs2https = (ipfsUri: string) => { + const { pinataGateway } = getPinataConfig(); + const cid = ipfsUri.replace("ipfs://", ""); + return `${pinataGateway}/ipfs/${cid}`; +};