From 69e67db4c1b4027852a47cacb30560205a8ad729 Mon Sep 17 00:00:00 2001 From: yu23ki14 Date: Sat, 1 Feb 2025 13:41:06 +0900 Subject: [PATCH] add navigation --- pkgs/frontend/app/components/StickyNav.tsx | 16 +++++- pkgs/frontend/app/routes/$treeId._index.tsx | 2 +- ....tsx => $treeId_.assistcredit.history.tsx} | 0 ....balance.tsx => $treeId_.assistcredit.tsx} | 4 +- pkgs/frontend/hooks/useFractionToken.ts | 52 ++++++++++--------- pkgs/frontend/hooks/useViem.ts | 31 ++++++++++- 6 files changed, 76 insertions(+), 29 deletions(-) rename pkgs/frontend/app/routes/{$treeId_.assistcredit-history.tsx => $treeId_.assistcredit.history.tsx} (100%) rename pkgs/frontend/app/routes/{$treeId_.balance.tsx => $treeId_.assistcredit.tsx} (91%) diff --git a/pkgs/frontend/app/components/StickyNav.tsx b/pkgs/frontend/app/components/StickyNav.tsx index ac7dc45..8d533b6 100644 --- 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} > { + + + + + + + + + AssistCredit + + + + diff --git a/pkgs/frontend/app/routes/$treeId._index.tsx b/pkgs/frontend/app/routes/$treeId._index.tsx index d4033ed..29ec092 100644 --- a/pkgs/frontend/app/routes/$treeId._index.tsx +++ b/pkgs/frontend/app/routes/$treeId._index.tsx @@ -33,7 +33,7 @@ const WorkspaceTop: FC = () => { 直近のアクティビティ - + もっと見る diff --git a/pkgs/frontend/app/routes/$treeId_.assistcredit-history.tsx b/pkgs/frontend/app/routes/$treeId_.assistcredit.history.tsx similarity index 100% rename from pkgs/frontend/app/routes/$treeId_.assistcredit-history.tsx rename to pkgs/frontend/app/routes/$treeId_.assistcredit.history.tsx diff --git a/pkgs/frontend/app/routes/$treeId_.balance.tsx b/pkgs/frontend/app/routes/$treeId_.assistcredit.tsx similarity index 91% rename from pkgs/frontend/app/routes/$treeId_.balance.tsx rename to pkgs/frontend/app/routes/$treeId_.assistcredit.tsx index d810a8e..79fc3ab 100644 --- a/pkgs/frontend/app/routes/$treeId_.balance.tsx +++ b/pkgs/frontend/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 ( - アシストクレジットの残高 + アシストクレジットの残高 {hatsWithBalance.map(({ hat, balance, isHolder }) => ( { ))} + ); }; diff --git a/pkgs/frontend/hooks/useFractionToken.ts b/pkgs/frontend/hooks/useFractionToken.ts index 636379b..fdc2ad8 100644 --- 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 index 09c6890..d63c3c5 100644 --- 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]), });