add navigation

hackdays-io · Feb 1, 2025 · 69e67db · 69e67db
1 parent 001ec46
commit 69e67db
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 29 deletions.
diff --git a/pkgs/frontend/app/components/StickyNav.tsx b/pkgs/frontend/app/components/StickyNav.tsx
@@ -1,6 +1,7 @@
 import { Box, Grid, GridItem, Icon, IconButton } from "@chakra-ui/react";
 import { Link, useParams } from "@remix-run/react";
 import type { FC } from "react";
+import { FaCoins } from "react-icons/fa6";
 import { GoHomeFill } from "react-icons/go";
 import { MdCallSplit } from "react-icons/md";
 import { RiTeamFill } from "react-icons/ri";
@@ -20,7 +21,7 @@ export const StickyNav: FC = () => {
         zIndex={100}
       >
         <Grid
-          gridTemplateColumns="1fr 1fr 1fr"
+          gridTemplateColumns="1fr 1fr 1fr 1fr"
           maxW="430px"
           width="100%"
           m="0 auto"
@@ -55,6 +56,19 @@ export const StickyNav: FC = () => {
             </Link>
           </GridItem>
 
+          <GridItem textAlign="center">
+            <Link to={`/${treeId}/assistcredit`}>
+              <IconButton backgroundColor="transparent" color="blue.500">
+                <Icon fontSize={30}>
+                  <FaCoins size="30px" />
+                </Icon>
+              </IconButton>
+              <Box fontWeight="bold" fontSize="sm">
+                AssistCredit
+              </Box>
+            </Link>
+          </GridItem>
+
           <GridItem textAlign="center">
             <Link to={`/${treeId}/splits`}>
               <IconButton backgroundColor="transparent" color="blue.500">

diff --git a/pkgs/frontend/app/routes/$treeId._index.tsx b/pkgs/frontend/app/routes/$treeId._index.tsx
@@ -33,7 +33,7 @@ const WorkspaceTop: FC = () => {
       <Box my={4}>
         <HStack justify="space-between" alignItems="center" pb={4}>
           <Heading>直近のアクティビティ</Heading>
-          <Link to={`/${treeId}/assistcredit-history`}>
+          <Link to={`/${treeId}/assistcredit/history`}>
             <CommonButton size="xs" bgColor="blue.400">
               もっと見る
             </CommonButton>

diff --git a/.../routes/$treeId_.assistcredit-history.tsx → .../routes/$treeId_.assistcredit.history.tsx b/.../routes/$treeId_.assistcredit-history.tsx → .../routes/$treeId_.assistcredit.history.tsx
diff --git a/.../frontend/app/routes/$treeId_.balance.tsx → ...tend/app/routes/$treeId_.assistcredit.tsx b/.../frontend/app/routes/$treeId_.balance.tsx → ...tend/app/routes/$treeId_.assistcredit.tsx
@@ -4,6 +4,7 @@ import { useBalancesWithHat } from "hooks/useFractionToken";
 import { useGetHats } from "hooks/useHats";
 import { useActiveWallet } from "hooks/useWallet";
 import { type FC, useMemo } from "react";
+import { StickyNav } from "~/components/StickyNav";
 import { HatsListItemParser } from "~/components/common/HatsListItemParser";
 import RoleWithBalance from "~/components/roles/RoleWithBalance";
 
@@ -32,7 +33,7 @@ const WorkspaceWithBalance: FC = () => {
 
   return (
     <Box>
-      <Heading paddingY={5}>アシストクレジットの残高</Heading>
+      <Heading pb={5}>アシストクレジットの残高</Heading>
       <VStack width="full" marginY={5} gapY={5}>
         {hatsWithBalance.map(({ hat, balance, isHolder }) => (
           <HatsListItemParser
@@ -50,6 +51,7 @@ const WorkspaceWithBalance: FC = () => {
           </HatsListItemParser>
         ))}
       </VStack>
+      <StickyNav />
     </Box>
   );
 };

diff --git a/pkgs/frontend/hooks/useFractionToken.ts b/pkgs/frontend/hooks/useFractionToken.ts
@@ -9,7 +9,13 @@ import type {
   TransferFractionToken_OrderBy,
 } from "gql/graphql";
 import { useCallback, useEffect, useState } from "react";
-import { type Address, decodeEventLog, encodeFunctionData } from "viem";
+import {
+  type Address,
+  decodeEventLog,
+  encodeFunctionData,
+  encodePacked,
+  keccak256,
+} from "viem";
 import {
   FRACTION_TOKEN_ADDRESS,
   fractionTokenBaseConfig,
@@ -37,7 +43,7 @@ export const useTokenRecipients = (
       try {
         const fetchedRecipients = await Promise.all(
           params.map(async ({ hatId, wearer }) => {
-            const tokenId = await getTokenId({
+            const tokenId = getTokenId({
               hatId: BigInt(hatId),
               account: wearer,
             });
@@ -98,7 +104,7 @@ export const useHoldersWithoutWearers = ({
       try {
         const fetchedRecipients = await Promise.all(
           wearers.map(async (w) => {
-            const tokenId = await getTokenId({
+            const tokenId = getTokenId({
               hatId: BigInt(hatId),
               account: w as Address,
             });
@@ -142,13 +148,14 @@ export const useHoldersWithBalance = ({
     const fetch = async () => {
       if (!wearer || !hatId) return;
       try {
-        const tokenId = await getTokenId({
+        const tokenId = getTokenId({
           hatId: BigInt(hatId),
           account: wearer as Address,
         });
         if (!tokenId) return;
         const holders = [...((await getTokenRecipients({ tokenId })) || [])];
 
+        if (!holders.length) return;
         const balances = await publicClient.readContract({
           ...fractionTokenBaseConfig,
           functionName: "balanceOfBatch",
@@ -311,26 +318,23 @@ export const useFractionToken = () => {
    * @param hatId
    * @param account address
    */
-  const getTokenId = useCallback(
-    async (params: { hatId: bigint; account: Address }) => {
-      setIsLoading(true);
-
-      try {
-        const res = await publicClient.readContract({
-          ...fractionTokenBaseConfig,
-          functionName: "getTokenId",
-          args: [params.hatId, params.account],
-        });
+  const getTokenId = (params: { hatId: bigint; account: Address }) => {
+    setIsLoading(true);
+
+    try {
+      const tokenId = BigInt(
+        keccak256(
+          encodePacked(["uint256", "address"], [params.hatId, params.account]),
+        ).toString(),
+      );
 
-        return res;
-      } catch (error) {
-        console.error("error occured when fetching tokenId:", error);
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [],
-  );
+      return tokenId;
+    } catch (error) {
+      console.error("error occured when fetching tokenId:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
   const mintInitialSupplyFractionToken = useCallback(
     async (params: { hatId: bigint; account: Address; amount?: bigint }) => {
@@ -516,7 +520,7 @@ export const useTransferFractionToken = (hatId: bigint, wearer: Address) => {
 
   useEffect(() => {
     const fetch = async () => {
-      const _tokenId = await getTokenId({
+      const _tokenId = getTokenId({
         hatId: hatId,
         account: wearer,
       });

diff --git a/pkgs/frontend/hooks/useViem.ts b/pkgs/frontend/hooks/useViem.ts
@@ -1,4 +1,4 @@
-import { http, createPublicClient } from "viem";
+import { http, createPublicClient, fallback } from "viem";
 import { base, mainnet, optimism, sepolia } from "viem/chains";
 
 export const chainId = Number(import.meta.env.VITE_CHAIN_ID) || 1;
@@ -14,10 +14,37 @@ export const currentChain =
           ? base
           : sepolia;
 
+export const currentChainRPCBaseURL =
+  chainId === 1
+    ? [http(`https://eth.g.alchemy.com/v2/${import.meta.env.VITE_ALCHEMY_KEY}`)]
+    : chainId === 11155111
+      ? [
+          http(
+            `https://eth-sepolia.g.alchemy.com/v2/${import.meta.env.VITE_ALCHEMY_KEY}`,
+          ),
+        ]
+      : chainId === 10
+        ? [
+            http(
+              `https://eth-optimism.g.alchemy.com/v2/${import.meta.env.VITE_ALCHEMY_KEY}`,
+            ),
+          ]
+        : chainId === 8453
+          ? [
+              http(
+                `https://eth-base.g.alchemy.com/v2/${import.meta.env.VITE_ALCHEMY_KEY}`,
+              ),
+            ]
+          : [
+              http(
+                `https://eth-sepolia.g.alchemy.com/v2/${import.meta.env.VITE_ALCHEMY_KEY}`,
+              ),
+            ];
+
 /**
  * Public client for fetching data from the blockchain
  */
 export const publicClient = createPublicClient({
   chain: currentChain,
-  transport: http(),
+  transport: fallback([http(), ...currentChainRPCBaseURL]),
 });