Assist credit history page

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<AssistCreditTextProps> = ({ detail, amount }) => {
+const AssistCreaditText: FC<AssistCreditTextProps> = ({ detail }) => {
   return (
-    <Text as="span">
-      {detail?.data.name}のアシストクレジットを
-      <Box as="span" fontWeight="bold">
-        {amount}
-      </Box>
-      送りました！
+    <Text fontSize="xs" lineHeight={1}>
+      {detail?.data.name}
     </Text>
   );
 };
 
-const AssistCreditItem: FC<ItemProps> = ({
-  from,
-  to,
-  hatId,
-  amount,
-  timestamp,
-}) => {
+const AssistCreditItem: FC<ItemProps> = ({ 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<ItemProps> = ({
     return names?.[1]?.[0];
   }, [names]);
 
+  const { hat } = useGetHat(hatId);
+
   return (
-    <HStack flexWrap="wrap" rowGap={0}>
-      <HatsListItemParser imageUri={hat?.imageUri} detailUri={hat?.details}>
-        <>
+    <Box
+      h="60px"
+      py={3}
+      px={2}
+      w="full"
+      borderColor="gray.200"
+      position="relative"
+      bgColor="blue.100"
+      borderRadius={5}
+      overflow="hidden"
+    >
+      <Box
+        position="absolute"
+        w="55%"
+        h="100%"
+        top={0}
+        left={0}
+        bgColor="blue.300"
+        opacity={0.5}
+      />
+      <Box
+        position="absolute"
+        top={0}
+        left="55%"
+        as="span"
+        display="inline-block"
+        width="0"
+        height="0"
+        borderTop="30px solid transparent"
+        borderBottom="30px solid transparent"
+        borderLeft="60px solid"
+        borderLeftColor="blue.300"
+        opacity={0.5}
+        marginRight={2}
+      />
+      <Grid
+        position="relative"
+        gridTemplateColumns="37.5% 25% 37.5%"
+        justifyContent="space-between"
+        alignItems="center"
+      >
+        <Flex alignItems="center" gap={2}>
           <UserIcon
             size="25px"
             userImageUrl={ipfs2https(fromUser?.text_records?.avatar)}
           />
-          <Text as="span">{fromUser?.name || abbreviateAddress(from)} が</Text>
+          <Text fontSize="sm" fontWeight="medium" color="gray.700">
+            {fromUser?.name || abbreviateAddress(from)}
+          </Text>
+        </Flex>
+
+        <Box textAlign="left">
+          <HatsListItemParser imageUri={hat?.imageUri} detailUri={hat?.details}>
+            <AssistCreaditText />
+          </HatsListItemParser>
+          <Text fontSize="lg" fontWeight="semibold" color="blue.600">
+            {amount}{" "}
+            <Box fontSize="xs" as="span">
+              tokens
+            </Box>
+          </Text>
+        </Box>
+
+        <Flex justifyContent="flex-end" alignItems="center" gap={2}>
+          <Text fontSize="sm" fontWeight="medium" color="gray.700">
+            {toUser?.name || abbreviateAddress(to)}
+          </Text>
           <UserIcon
             size="25px"
             userImageUrl={ipfs2https(toUser?.text_records?.avatar)}
           />
-          <Text as="span">{toUser?.name || abbreviateAddress(to)} に</Text>
-        </>
-        <AssistCreaditText amount={amount} />
-      </HatsListItemParser>
-    </HStack>
+        </Flex>
+      </Grid>
+    </Box>
   );
 };
 
@@ -96,7 +141,7 @@ export const AssistCreditHistory: FC<Props> = ({ treeId, limit }) => {
   });
 
   return (
-    <VStack rowGap={4}>
+    <VStack gap={2}>
       {data?.transferFractionTokens.map((token) => (
         <AssistCreditItem
           key={`th_${token.id}`}

pkgs/frontend/app/components/common/CommonIcon.tsx

@@ -32,6 +32,7 @@ export const CommonIcon = ({
       borderRadius={borderRadius}
       flexShrink={0}
       overflow="hidden"
+      backgroundColor={showFallbackIcon ? "gray.300" : "transparent"}
     >
       {!showFallbackIcon ? (
         <Image