fix: some account identity timeline and transfer list issues (#4015)

opensquare-network · Mar 18, 2024 · b0bef06 · b0bef06
1 parent 67b5f7b
commit b0bef06
Show file tree

Hide file tree

Showing 10 changed files with 39 additions and 25 deletions.
diff --git a/packages/next-common/components/identityTimeline/timeline/blockHeight.js b/packages/next-common/components/identityTimeline/timeline/blockHeight.js
@@ -11,7 +11,7 @@ const BlockIcon = tw(InfoBlock)`
 export default function BlockHeight({ number }) {
   return (
     <div className="flex items-center text12Medium">
-      <BlockIcon className="mr-[4px]" />
+      <BlockIcon />
       <div className="text-textTertiary">{number}</div>
     </div>
   );

diff --git a/packages/next-common/components/identityTimeline/timeline/blockTime.js b/packages/next-common/components/identityTimeline/timeline/blockTime.js
@@ -13,7 +13,7 @@ const ClockIcon = tw(InfoTime)`
 export default function BlockTime({ ts }) {
   return (
     <div className="flex items-center text12Medium whitespace-nowrap">
-      <ClockIcon className="mr-[4px]" />
+      <ClockIcon />
       <div className="mr-[4px] text-textTertiary">
         {dayjs(ts).format("YYYY-MM-DD HH:mm:ss")}
       </div>

diff --git a/packages/next-common/components/identityTimeline/timeline/item.js b/packages/next-common/components/identityTimeline/timeline/item.js
@@ -10,14 +10,14 @@ const NavigationLine = tw.div`
 
 const TopLine = tw.div`
   w-[2px]
-  ${(p) => p.isFirst && "mt-[4px] h-[4px]"}
-  ${(p) => !p.isFirst && "h-[8px] bg-theme300"}
+  ${(p) => p.$isFirst && "mt-[4px] h-[4px]"}
+  ${(p) => !p.$isFirst && "h-[8px] bg-theme300"}
 `;
 
 const BottomLine = tw.div`
   w-[2px]
   grow
-  ${(p) => !p.isLast && "bg-theme300"}
+  ${(p) => !p.$isLast && "bg-theme300"}
 `;
 
 const InfoPanel = tw.div`
@@ -46,9 +46,9 @@ export default function TimelineItem({
   return (
     <div className="flex">
       <NavigationLine>
-        <TopLine isFirst={isFirst} />
+        <TopLine $isFirst={isFirst} />
         <Circle />
-        <BottomLine isLast={isLast} />
+        <BottomLine $isLast={isLast} />
       </NavigationLine>
       <InfoPanel>
         <TimelineItemInfo

diff --git a/packages/next-common/components/identityTimeline/timeline/itemFields.js b/packages/next-common/components/identityTimeline/timeline/itemFields.js
@@ -13,21 +13,25 @@ const Title = tw.div`
   grow-0
   shrink-0
   basis-auto
+  text14Medium
+  text-textTertiary
 `;
 
 const Body = tw.div`
   flex
   items-center
   grow
+  text14Medium
+  text-textPrimary
 `;
 
 export default function TimelineItemFields({ fields, className = "" }) {
   return (
     <Wrapper className={className}>
       {fields.map((field, index) => (
         <div key={index} className="flex max-sm:flex-col gap-[4px] my-[4px]">
-          <Title className="text14Medium text-textTertiary">{field[0]}</Title>
-          <Body className="text14Medium text-textPrimary">{field[1]}</Body>
+          <Title>{field[0]}</Title>
+          <Body>{field[1]}</Body>
         </div>
       ))}
     </Wrapper>

diff --git a/packages/next-common/components/identityTimeline/timeline/itemHeader.js b/packages/next-common/components/identityTimeline/timeline/itemHeader.js
@@ -15,14 +15,16 @@ export default function TimelineItemInfoHeader({ item }) {
       </div>
       <div className="flex gap-[8px]">
         <Link
-          name="Extrinsic"
           href={`https://${chain}.statescan.io/#/extrinsics/${item.indexer.blockHeight}-${item.indexer.extrinsicIndex}`}
-        />
+        >
+          Extrinsic
+        </Link>
         {!isNil(item.indexer.eventIndex) && (
           <Link
-            name="Event"
             href={`https://${chain}.statescan.io/#/events/${item.indexer.blockHeight}-${item.indexer.eventIndex}`}
-          />
+          >
+            Event
+          </Link>
         )}
       </div>
     </div>

diff --git a/packages/next-common/components/identityTimeline/timeline/link.js b/packages/next-common/components/identityTimeline/timeline/link.js
@@ -1,9 +1,9 @@
 import ExternalLink from "next-common/components/externalLink";
 
-export default function Link({ name, href }) {
+export default function Link({ children, href }) {
   return (
     <ExternalLink href={href} className="text12Medium text-theme500">
-      {name}
+      {children}
     </ExternalLink>
   );
 }
diff --git a/packages/next-common/components/profile/identityTimeline/index.js b/packages/next-common/components/profile/identityTimeline/index.js
@@ -10,6 +10,7 @@ import {
 } from "next-common/store/reducers/profile/identityTimeline";
 import { useSelector } from "react-redux";
 import useIsMounted from "next-common/utils/hooks/useIsMounted";
+import ExternalLink from "next-common/components/externalLink";
 
 function useIdentityTimeline() {
   const dispatch = useDispatch();
@@ -64,11 +65,21 @@ function useIdentityTimeline() {
 }
 
 export default function ProfileIdentityTimeline() {
+  const chain = useChain();
+  const address = useProfileAddress();
   const timeline = useIdentityTimeline();
 
   return (
     <SecondaryCard>
       <IdentityTimeline timelineData={timeline} />
+      <div className="flex w-full justify-end mt-[24px]">
+        <ExternalLink
+          className="text14Medium text-theme500"
+          href={`https://${chain}.statescan.io/#/accounts/${address}?sub=identity_timeline&tab=identity`}
+        >
+          View More
+        </ExternalLink>
+      </div>
     </SecondaryCard>
   );
 }
diff --git a/packages/next-common/components/profile/tabs/content.js b/packages/next-common/components/profile/tabs/content.js
@@ -26,9 +26,7 @@ export default function useProfileTabContent() {
     return <ProfileDelegation />;
   } else if (pathname.startsWith(`/user/${maybeEvmAddress}/transfers`)) {
     return <ProfileTransfers />;
-  } else if (
-    pathname.startsWith(`/user/${maybeEvmAddress}/identity-timeline`)
-  ) {
+  } else if (pathname.startsWith(`/user/${maybeEvmAddress}/identity`)) {
     return <ProfileIdentityTimeline />;
   }
 

diff --git a/packages/next-common/components/profile/tabs/index.js b/packages/next-common/components/profile/tabs/index.js
@@ -68,8 +68,8 @@ export default function useProfileTabs() {
 
     if (hasIdentityTimeline) {
       tabs.push({
-        label: "Identity timeline",
-        url: `${prefix}identity-timeline`,
+        label: "Identity",
+        url: `${prefix}identity`,
         exactMatch: false,
       });
     }

diff --git a/packages/next-common/components/profile/transfers/index.js b/packages/next-common/components/profile/transfers/index.js
@@ -27,10 +27,9 @@ export default function ProfileTransfers() {
       return;
     }
 
-    fetch(`https://${chain}-api.statescan.io/accounts/${address}/transfers`, {
-      page,
-      pageSize: DEFAULT_PAGE_SIZE,
-    })
+    fetch(
+      `https://${chain}-api.statescan.io/accounts/${address}/transfers?page=${page}&page_size=${DEFAULT_PAGE_SIZE}`,
+    )
       .then((response) => {
         if (!response.ok) {
           throw new Error(response.statusText);
@@ -50,7 +49,7 @@ export default function ProfileTransfers() {
       <TransferList isLoading={!transfers} items={transfers?.items} />
       <Pagination
         page={page}
-        pageSize={DEFAULT_PAGE_SIZE}
+        pageSize={transfers?.pageSize}
         onPageChange={(e, page) => {
           e.stopPropagation();
           e.preventDefault();