Merge pull request #205 from hackdays-io/feature/wallet

update wallet client and get identity
hackdays-io · Dec 5, 2024 · 8983f2b · 8983f2b
2 parents caf5b9f + b4213ff
commit 8983f2b
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 26 deletions.
diff --git 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 ? (
     <Flex justifyContent="space-between" w="100%">
       <Box display="flex" height={HEADER_SIZE} flex="1">

diff --git a/pkgs/frontend/app/root.tsx b/pkgs/frontend/app/root.tsx
@@ -32,6 +32,29 @@ export const Layout = withEmotionCache((props: LayoutProps, cache) => {
         />
       </head>
       <body>
+        {children}
+
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+});
+
+export default function App() {
+  return (
+    <PrivyProvider
+      appId={import.meta.env.VITE_PRIVY_APP_ID}
+      config={{
+        embeddedWallets: {
+          createOnLogin: "users-without-wallets",
+        },
+      }}
+    >
+      <ChakraProvider>
+        {/* DarkMode 切り替えの実装の可能性に備え、ThemeProvider を残しておいてあります */}
+        {/* <ThemeProvider disableTransitionOnChange attribute="class"> */}
+
         <Box
           bg="gray.50"
           width="100%"
@@ -60,31 +83,10 @@ export const Layout = withEmotionCache((props: LayoutProps, cache) => {
               flexDirection="column"
               position="relative"
             >
-              {children}
+              <Outlet />
             </Box>
           </Container>
         </Box>
-        <ScrollRestoration />
-        <Scripts />
-      </body>
-    </html>
-  );
-});
-
-export default function App() {
-  return (
-    <PrivyProvider
-      appId={import.meta.env.VITE_PRIVY_APP_ID}
-      config={{
-        embeddedWallets: {
-          createOnLogin: "users-without-wallets",
-        },
-      }}
-    >
-      <ChakraProvider>
-        {/* DarkMode 切り替えの実装の可能性に備え、ThemeProvider を残しておいてあります */}
-        {/* <ThemeProvider disableTransitionOnChange attribute="class"> */}
-        <Outlet />
         {/* </ThemeProvider> */}
       </ChakraProvider>
     </PrivyProvider>

diff --git 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<NameData[][]>([]);

diff --git 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
@@ -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}`;
+};