From 78ac78c3f3716e381cb938a7e289283ed0531c5a Mon Sep 17 00:00:00 2001 From: yu23ki14 Date: Fri, 17 Jan 2025 17:34:55 +0900 Subject: [PATCH] history design --- .../app/components/assistcredit/History.tsx | 103 +++++++++++++----- .../app/components/common/CommonIcon.tsx | 1 + 2 files changed, 75 insertions(+), 29 deletions(-) diff --git a/pkgs/frontend/app/components/assistcredit/History.tsx b/pkgs/frontend/app/components/assistcredit/History.tsx index e9e11d8..c54e610 100644 --- a/pkgs/frontend/app/components/assistcredit/History.tsx +++ b/pkgs/frontend/app/components/assistcredit/History.tsx @@ -1,10 +1,9 @@ -import { Box, HStack, Text, VStack } from "@chakra-ui/react"; +import { Box, Flex, Grid, Text, VStack } from "@chakra-ui/react"; import { OrderDirection, TransferFractionToken_OrderBy } from "gql/graphql"; import { useNamesByAddresses } from "hooks/useENS"; import { useGetTransferFractionTokens } from "hooks/useFractionToken"; import { useGetHat } from "hooks/useHats"; import { type FC, useMemo } from "react"; -import { FaChevronRight } from "react-icons/fa6"; import type { HatsDetailSchama } from "types/hats"; import { ipfs2https } from "utils/ipfs"; import { abbreviateAddress } from "utils/wallet"; @@ -25,37 +24,24 @@ interface ItemProps { } interface AssistCreditTextProps { - amount: number; detail?: HatsDetailSchama; } -const AssistCreaditText: FC = ({ detail, amount }) => { +const AssistCreaditText: FC = ({ detail }) => { return ( - - {detail?.data.name}のアシストクレジットを - - {amount} - - 送りました! + + {detail?.data.name} ); }; -const AssistCreditItem: FC = ({ - from, - to, - hatId, - amount, - timestamp, -}) => { +const AssistCreditItem: FC = ({ from, to, amount, hatId }) => { const addresses = useMemo(() => { return [from, to]; }, [from, to]); const { names } = useNamesByAddresses(addresses); - const { hat } = useGetHat(hatId); - const fromUser = useMemo(() => { return names?.[0]?.[0]; }, [names]); @@ -64,24 +50,83 @@ const AssistCreditItem: FC = ({ return names?.[1]?.[0]; }, [names]); + const { hat } = useGetHat(hatId); + return ( - - - <> + + + + + - {fromUser?.name || abbreviateAddress(from)} が + + {fromUser?.name || abbreviateAddress(from)} + + + + + + + + + {amount}{" "} + + tokens + + + + + + + {toUser?.name || abbreviateAddress(to)} + - {toUser?.name || abbreviateAddress(to)} に - - - - + + + ); }; @@ -96,7 +141,7 @@ export const AssistCreditHistory: FC = ({ treeId, limit }) => { }); return ( - + {data?.transferFractionTokens.map((token) => ( {!showFallbackIcon ? (