use thirdweb smart account

hackdays-io · Jan 9, 2025 · 3e67eaa · 3e67eaa
1 parent 9ae763c
commit 3e67eaa
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 68 deletions.
diff --git a/pkgs/frontend/app/components/icon/UserIcon.tsx b/pkgs/frontend/app/components/icon/UserIcon.tsx
@@ -11,6 +11,7 @@ export const UserIcon = ({ userImageUrl, size = "full" }: UserIconProps) => {
     <CommonIcon
       imageUrl={userImageUrl}
       size={size}
+      borderRadius="full"
       fallbackIconComponent={
         <FaCircleUser
           style={{

diff --git a/pkgs/frontend/app/routes/$treeId_.$hatId_.$address_.assistcredit.send.tsx b/pkgs/frontend/app/routes/$treeId_.$hatId_.$address_.assistcredit.send.tsx
@@ -103,7 +103,7 @@ const AssistCreditSend: FC = () => {
   return (
     <Grid
       gridTemplateRows={!receiver ? "auto auto auto 1fr" : "auto auto 1fr auto"}
-      minH="calc(100vh - 72px)"
+      minH="calc(100vh - 100px)"
     >
       <PageHeader
         title={

diff --git a/pkgs/frontend/app/routes/$treeId_.$hatId_.assign.tsx b/pkgs/frontend/app/routes/$treeId_.$hatId_.assign.tsx
@@ -1,5 +1,5 @@
 import { FC, useState, useEffect, useMemo, useCallback } from "react";
-import { Box, Button, Text, HStack } from "@chakra-ui/react";
+import { Box, Button, Text, HStack, Grid } from "@chakra-ui/react";
 import { useParams } from "@remix-run/react";
 import { Address } from "viem";
 import { useAddressesByNames } from "hooks/useENS";
@@ -100,43 +100,46 @@ const AssignRole: FC = () => {
   }, [hatId, resolvedAddress, inputValue, mintHat]);
 
   return (
-    <>
-      <PageHeader title="役割を割り当てる" />
-
-      <HatsListItemParser detailUri={hat?.details} imageUri={hat?.imageUri}>
-        <RoleDetail />
-      </HatsListItemParser>
-
-      {/* User name or address input */}
-      <Box mb={4}>
-        <Text fontSize="sm" fontWeight="medium" mb={1} color="gray.600">
-          ユーザー名 or ウォレットアドレス
-        </Text>
-        <CommonInput
-          placeholder="ユーザー名 or ウォレットアドレス"
-          value={inputValue}
-          onChange={(e) => setInputValue(e.target.value)}
-        />
-        {resolvedAddress && !isValidEthAddress(inputValue) && (
-          <HStack mt={1} fontSize="sm" justifyContent="end" color="blue.300">
-            <FaCircleCheck />
-            <Text color="gray.500">{abbreviateAddress(resolvedAddress)}</Text>
-          </HStack>
-        )}
-      </Box>
-
-      {/* Date input */}
-      <Box mb={4}>
-        <Text fontSize="sm" fontWeight="medium" mb={1} color="gray.600">
-          開始日
-        </Text>
-        <CommonInput
-          value={startDatetime!}
-          onChange={(e) => {
-            setStartDatetime(e.target.value);
-          }}
-          type="datetime-local"
-        />
+    <Grid gridTemplateRows="1fr auto" minH="calc(100vh - 100px)" pb={5}>
+      <Box>
+        <Box mb={5}>
+          <PageHeader title="役割を割り当てる" />
+        </Box>
+        <HatsListItemParser detailUri={hat?.details} imageUri={hat?.imageUri}>
+          <RoleDetail />
+        </HatsListItemParser>
+
+        {/* User name or address input */}
+        <Box mb={4}>
+          <Text fontSize="sm" fontWeight="medium" mb={1} color="gray.600">
+            ユーザー名 or ウォレットアドレス
+          </Text>
+          <CommonInput
+            placeholder="ユーザー名 or ウォレットアドレス"
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+          />
+          {resolvedAddress && !isValidEthAddress(inputValue) && (
+            <HStack mt={1} fontSize="sm" justifyContent="end" color="blue.300">
+              <FaCircleCheck />
+              <Text color="gray.500">{abbreviateAddress(resolvedAddress)}</Text>
+            </HStack>
+          )}
+        </Box>
+
+        {/* Date input */}
+        <Box mb={4}>
+          <Text fontSize="sm" fontWeight="medium" mb={1} color="gray.600">
+            開始日
+          </Text>
+          <CommonInput
+            value={startDatetime!}
+            onChange={(e) => {
+              setStartDatetime(e.target.value);
+            }}
+            type="datetime-local"
+          />
+        </Box>
       </Box>
 
       {/* Assign Button */}
@@ -151,7 +154,7 @@ const AssignRole: FC = () => {
       >
         Assign
       </CommonButton>
-    </>
+    </Grid>
   );
 };
 

diff --git a/pkgs/frontend/app/routes/$treeId_.splits.new.tsx b/pkgs/frontend/app/routes/$treeId_.splits.new.tsx
@@ -215,7 +215,7 @@ const SplitterNew: FC = () => {
 
   const [splitterName, setSplitterName] = useState<string>("");
   const _splitterName = useMemo(() => {
-    return [`${splitterName}.splitter`];
+    return [`${splitterName}.split`];
   }, [splitterName]);
   const { addresses } = useAddressesByNames(_splitterName, true);
   const availableName = useMemo(() => {
@@ -256,29 +256,32 @@ const SplitterNew: FC = () => {
   const calcParams = () => {
     const data = getValues();
 
-    return data.roles.map((role) => {
-      const [multiplierTop, multiplierBottom] = role.multiplier
-        ? String(role.multiplier).includes(".")
-          ? [
-              BigInt(
-                role.multiplier *
-                  10 ** String(role.multiplier).split(".")[1].length
-              ),
-              BigInt(10 ** String(role.multiplier).split(".")[1].length),
-            ]
-          : [BigInt(role.multiplier), BigInt(1)]
-        : [BigInt(1), BigInt(1)];
-
-      return {
-        hatId: BigInt(role.hatId),
-        multiplierTop,
-        multiplierBottom,
-        wearers: role.wearers,
-      };
-    });
+    return data.roles
+      .filter((r) => r.active)
+      .map((role) => {
+        const [multiplierTop, multiplierBottom] = role.multiplier
+          ? String(role.multiplier).includes(".")
+            ? [
+                BigInt(
+                  role.multiplier *
+                    10 ** String(role.multiplier).split(".")[1].length
+                ),
+                BigInt(10 ** String(role.multiplier).split(".")[1].length),
+              ]
+            : [BigInt(role.multiplier), BigInt(1)]
+          : [BigInt(1), BigInt(1)];
+
+        return {
+          hatId: BigInt(role.hatId),
+          multiplierTop,
+          multiplierBottom,
+          wearers: role.wearers,
+        };
+      });
   };
 
-  const handlePreview = async () => {
+  const handlePreview = useCallback(async () => {
+    if (!availableName) return;
     const params = calcParams();
     const res = await previewSplits(params);
 
@@ -296,7 +299,7 @@ const SplitterNew: FC = () => {
         })
       )
     );
-  };
+  }, [availableName]);
 
   const { setName } = useSetName();
   const handleCreateSplitter = async () => {
@@ -320,7 +323,7 @@ const SplitterNew: FC = () => {
 
   return (
     <Grid
-      minH="calc(100vh - 72px)"
+      minH="calc(100vh - 100px)"
       gridTemplateRows={preview ? "auto auto 1fr auto" : "auto auto 1fr auto"}
     >
       <PageHeader
@@ -388,7 +391,7 @@ const SplitterNew: FC = () => {
               ))}
             </List.Root>
           </Box>
-          <BasicButton onClick={handlePreview} mb={5}>
+          <BasicButton onClick={handlePreview} mb={5} disabled={!availableName}>
             プレビュー
           </BasicButton>
         </>

diff --git a/pkgs/frontend/app/routes/signup.tsx b/pkgs/frontend/app/routes/signup.tsx
@@ -34,7 +34,7 @@ const Login: FC = () => {
   }, [userName, addresses]);
 
   const handleSubmit = async () => {
-    if (!wallet) return;
+    if (!wallet || !availableName) return;
 
     const params: {
       name: string;

diff --git a/pkgs/frontend/hooks/useFractionToken.ts b/pkgs/frontend/hooks/useFractionToken.ts
@@ -379,6 +379,8 @@ export const useTransferFractionToken = (hatId: bigint, wearer: Address) => {
             functionName: "safeTransferFrom",
             args: [wallet.account.address, to, tokenId, amount, "0x"],
           });
+        } catch (_) {
+          setIsLoading(false);
         } finally {
           setIsLoading(false);
         }
@@ -404,6 +406,7 @@ export const useTransferFractionToken = (hatId: bigint, wearer: Address) => {
           });
         } catch (error) {
           console.error(error);
+          setIsLoading(false);
         } finally {
           await publicClient.waitForTransactionReceipt({ hash: txHash! });
           setIsLoading(false);

diff --git a/pkgs/frontend/hooks/useWallet.ts b/pkgs/frontend/hooks/useWallet.ts
@@ -1,6 +1,9 @@
 import { ConnectedWallet, usePrivy, useWallets } from "@privy-io/react-auth";
 import { createSmartAccountClient, SmartAccountClient } from "permissionless";
-import { toSimpleSmartAccount } from "permissionless/accounts";
+import {
+  toSimpleSmartAccount,
+  toThirdwebSmartAccount,
+} from "permissionless/accounts";
 import { createPimlicoClient } from "permissionless/clients/pimlico";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import {
@@ -62,7 +65,8 @@ export const useSmartAccountClient = (wallets: ConnectedWallet[]) => {
       const owner = await embeddedWallet?.getEthereumProvider();
       if (!owner) return;
 
-      const smartAccount = await toSimpleSmartAccount({
+      // We are using thirdweb smart account
+      const smartAccount = await toThirdwebSmartAccount({
         owner,
         client: publicClient as any,
         entryPoint: {