xc-scan list improvements

apps/main/src/i18n/locales/en/common.json

@@ -24,6 +24,7 @@
   "timeFrame.month_other": "Months",
   "days": "Days",
   "all": "All",
+  "claimable": "Claimable",
   "from": "From",
   "to": "To",
   "protocol": "Protocol",

apps/main/src/modules/layout/components/NotificationCenter/MultisigNotification.tsx

@@ -62,7 +62,7 @@ export const MultisigNotification: React.FC<MultisigNotificationProps> = ({
       }
       actions={
         <ModalRoot>
-          <ModalTrigger>
+          <ModalTrigger asChild>
             <Button size="small" variant="secondary">
               {t("multisig.review")}
             </Button>

apps/main/src/modules/layout/components/NotificationCenter/NotificationCenter.tsx

@@ -11,7 +11,6 @@ import {
   Stack,
 } from "@galacticcouncil/ui/components"
 import { safeConvertPublicKeyToSS58 } from "@galacticcouncil/utils"
-import { useAccount } from "@galacticcouncil/web3-connect"
 import { FC } from "react"
 import { useTranslation } from "react-i18next"
 
@@ -21,25 +20,17 @@ import { MultisigNotification } from "@/modules/layout/components/NotificationCe
 import { NotificationBadge } from "@/modules/layout/components/NotificationCenter/NotificationBadge"
 import { NotificationGroup } from "@/modules/layout/components/NotificationCenter/NotificationGroup"
 import { NotificationToast } from "@/modules/layout/components/NotificationCenter/NotificationToast"
-import { usePendingClaimsStore } from "@/modules/xcm/history/hooks/usePendingClaimsStore"
-import { useXcScan } from "@/modules/xcm/history/useXcScan"
+import { useClaimableTransactions } from "@/modules/xcm/history/hooks/useClaimableTransactions"
 import { useMultisigContext } from "@/providers/MultisigProvider"
 import { useToasts } from "@/states/toasts"
 
 export const NotificationCenter: FC = () => {
   const { t } = useTranslation()
-  const { account } = useAccount()
 
   const { totalPendingTxCount, multisigs, pendingTxsByMultisig } =
     useMultisigContext()
   const { toasts } = useToasts()
-  const { data: claimable } = useXcScan(account?.address ?? "", {
-    claimableOnly: true,
-  })
-  const { pendingCorrelationIds } = usePendingClaimsStore()
-  const visibleClaimable = claimable.filter(
-    ({ correlationId }) => !pendingCorrelationIds.includes(correlationId),
-  )
+  const visibleClaimable = useClaimableTransactions()
 
   const groups = Object.groupBy(toasts, (toast) =>
     toast.variant === "pending" ? "pending" : "completed",

apps/main/src/modules/xcm/XcmPage.tsx

@@ -1,31 +1,35 @@
 import { Grid } from "@galacticcouncil/ui/components"
 import { useAccount } from "@galacticcouncil/web3-connect"
 
+import { useClaimableTransactions } from "@/modules/xcm/history/hooks/useClaimableTransactions"
 import { useXcScan } from "@/modules/xcm/history/useXcScan"
-import { XcScanJourneyList } from "@/modules/xcm/history/XcScanJourneyList"
+import { XcmHistoryPanel } from "@/modules/xcm/history/XcmHistoryPanel"
+import { XcScanJourneyListSkeleton } from "@/modules/xcm/history/XcScanJourneyListSkeleton"
 import { XcmTransferApp } from "@/modules/xcm/transfer/XcmTransferApp"
 
 export const XcmPage = () => {
   const { account } = useAccount()
   const address = account?.address ?? ""
-  const { data } = useXcScan(address)
 
-  const shouldRenderJourneyList = !!account && data.length > 0
+  const claimable = useClaimableTransactions()
+  const { data: all, dataUpdatedAt } = useXcScan(address)
+
+  const isLoading = !!account && dataUpdatedAt === 0
+  const isTwoColTemplate = !!account && (all.length > 0 || isLoading)
 
   return (
     <Grid
       columnGap="xl"
       rowGap={["xl", null, null, "xxxl"]}
+      justifyContent="center"
       columnTemplate={
-        shouldRenderJourneyList
-          ? ["1fr", null, null, "1fr 1fr", "32rem 32rem"]
-          : "1fr"
+        isTwoColTemplate ? ["1fr", null, null, "1fr 1fr", "32rem 32rem"] : "1fr"
       }
-      justifyContent="center"
     >
       <XcmTransferApp />
-      {shouldRenderJourneyList && (
-        <XcScanJourneyList data={data} pageSize={4} />
+      {isLoading && <XcScanJourneyListSkeleton />}
+      {!isLoading && all.length > 0 && (
+        <XcmHistoryPanel key={address} all={all} claimable={claimable} />
       )}
     </Grid>
   )

apps/main/src/modules/xcm/XcmPageSkeleton.tsx

@@ -0,0 +1,23 @@
+import { Grid } from "@galacticcouncil/ui/components"
+import { useAccount } from "@galacticcouncil/web3-connect"
+
+import { XcScanJourneyListSkeleton } from "@/modules/xcm/history/XcScanJourneyListSkeleton"
+import { XcmTransferSkeleton } from "@/modules/xcm/transfer/XcmTransferSkeleton"
+
+export const XcmPageSkeleton = () => {
+  const { isConnected } = useAccount()
+  return (
+    <Grid
+      columnGap="xl"
+      rowGap={["xl", null, null, "xxxl"]}
+      columnTemplate={
+        isConnected ? ["1fr", null, null, "1fr 1fr", "32rem 32rem"] : "1fr"
+      }
+      align="start"
+      justifyContent="center"
+    >
+      <XcmTransferSkeleton />
+      {isConnected && <XcScanJourneyListSkeleton />}
+    </Grid>
+  )
+}

apps/main/src/modules/xcm/history/XcJourneyCard.tsx

@@ -13,11 +13,12 @@ import {
   Text,
 } from "@galacticcouncil/ui/components"
 import { getToken } from "@galacticcouncil/ui/utils"
-import { shortenAccountAddress, xcscan } from "@galacticcouncil/utils"
+import { xcscan } from "@galacticcouncil/utils"
 import type { XcJourney } from "@galacticcouncil/xc-scan"
+import Big from "big.js"
 import { useTranslation } from "react-i18next"
-import { isNumber } from "remeda"
 
+import { AccountIdentity } from "@/components/AccountIdentity"
 import { ClaimButton } from "@/modules/xcm/history/components/ClaimButton"
 import { JourneyAssetLogo } from "@/modules/xcm/history/components/JourneyAssetLogo"
 import { JourneyChainLogo } from "@/modules/xcm/history/components/JourneyChainLogo"
@@ -49,6 +50,8 @@ export const XcJourneyCard: React.FC<XcJourney> = (journey) => {
   const isNotPending = !pendingCorrelationIds.includes(journey.correlationId)
   const isClaimable = isNotPending && isJourneyClaimable(journey)
 
+  const usdValue = Big(totalUsd || transferAsset?.usd || 0)
+
   return (
     <Stack as={Paper} px="primary">
       <Flex align="center">
@@ -111,9 +114,9 @@ export const XcJourneyCard: React.FC<XcJourney> = (journey) => {
                   symbol: transferAsset.symbol,
                 })}
               </Text>
-              {isNumber(totalUsd) && totalUsd > 0 && (
+              {usdValue.gt(0) && (
                 <Text fs="p6" lh={1} color={getToken("text.medium")}>
-                  {t("currency", { value: totalUsd })}
+                  {t("currency", { value: usdValue })}
                 </Text>
               )}
             </Stack>
@@ -123,16 +126,22 @@ export const XcJourneyCard: React.FC<XcJourney> = (journey) => {
         <Stack>
           <Flex gap="s" align="center">
             {from && (
-              <Text fs="p6" lh={1.3} color={getToken("text.medium")}>
-                {t("from")}: {shortenAccountAddress(from)}
-              </Text>
+              <Flex gap="s" align="center">
+                <Text fs="p6" lh={1.3} color={getToken("text.medium")}>
+                  {t("from")}:
+                </Text>
+                <AccountIdentity fs="p6" lh={1.3} address={from} />
+              </Flex>
             )}
           </Flex>
           <Flex gap="s" align="center">
             {to && (
-              <Text fs="p6" lh={1.3} color={getToken("text.medium")}>
-                {t("to")}: {shortenAccountAddress(to)}
-              </Text>
+              <Flex gap="s" align="center">
+                <Text fs="p6" lh={1.3} color={getToken("text.medium")}>
+                  {t("to")}:
+                </Text>
+                <AccountIdentity fs="p6" lh={1.3} address={to} />
+              </Flex>
             )}
           </Flex>
         </Stack>

apps/main/src/modules/xcm/history/XcScanHistoryTable.columns.tsx

@@ -7,16 +7,14 @@ import {
   Text,
 } from "@galacticcouncil/ui/components"
 import { getToken } from "@galacticcouncil/ui/utils"
-import {
-  shortenAccountAddress,
-  stringEquals,
-  xcscan,
-} from "@galacticcouncil/utils"
+import { stringEquals, xcscan } from "@galacticcouncil/utils"
 import type { XcJourney } from "@galacticcouncil/xc-scan"
 import { createColumnHelper } from "@tanstack/react-table"
+import Big from "big.js"
 import { useMemo } from "react"
 import { useTranslation } from "react-i18next"
 
+import { AccountIdentity } from "@/components/AccountIdentity"
 import { ClaimButton } from "@/modules/xcm/history/components/ClaimButton"
 import { JourneyAssetLogo } from "@/modules/xcm/history/components/JourneyAssetLogo"
 import { JourneyChainLogo } from "@/modules/xcm/history/components/JourneyChainLogo"
@@ -56,9 +54,11 @@ export const useXcScanHistoryColumns = () => {
         return (
           <Flex gap="base" align="center">
             <JourneyChainLogo networkUrn={row.original.origin} />
-            <Text fw={500} color={getToken("text.high")}>
-              {shortenAccountAddress(from)}
-            </Text>
+            <AccountIdentity
+              fw={500}
+              color={getToken("text.high")}
+              address={from}
+            />
           </Flex>
         )
       },
@@ -72,9 +72,11 @@ export const useXcScanHistoryColumns = () => {
         return (
           <Flex gap="base" align="center">
             <JourneyChainLogo networkUrn={row.original.destination} />
-            <Text fw={500} color={getToken("text.high")}>
-              {shortenAccountAddress(to)}
-            </Text>
+            <AccountIdentity
+              fw={500}
+              color={getToken("text.high")}
+              address={to}
+            />
           </Flex>
         )
       },
@@ -88,6 +90,8 @@ export const useXcScanHistoryColumns = () => {
 
         if (!transferAsset) return null
 
+        const usdValue = Big(row.original.totalUsd || transferAsset?.usd || 0)
+
         return (
           <Flex gap="base" align="center">
             <JourneyAssetLogo assetKey={transferAsset.asset} />
@@ -103,9 +107,11 @@ export const useXcScanHistoryColumns = () => {
                     })
                   : t("number", { value: transferAsset.amount })}
               </Text>
-              <Text fs="p6" lh={1} color={getToken("text.medium")}>
-                {t("currency", { value: row.original.totalUsd })}
-              </Text>
+              {usdValue.gt(0) && (
+                <Text fs="p6" lh={1} color={getToken("text.medium")}>
+                  {t("currency", { value: usdValue })}
+                </Text>
+              )}
             </Stack>
           </Flex>
         )

apps/main/src/modules/xcm/history/XcScanJourneyListSkeleton.tsx

@@ -0,0 +1,58 @@
+import { ArrowRight } from "@galacticcouncil/ui/assets/icons"
+import {
+  Box,
+  Flex,
+  Icon,
+  LogoSkeleton,
+  Paper,
+  Separator,
+  Skeleton,
+  Stack,
+} from "@galacticcouncil/ui/components"
+import { getToken } from "@galacticcouncil/ui/utils"
+
+const JourneyCardSkeleton = () => {
+  return (
+    <Stack as={Paper} px="primary">
+      <Flex py="m" gap="s" align="center">
+        <LogoSkeleton size="medium" />
+        <Icon
+          component={ArrowRight}
+          size="l"
+          mx="s"
+          sx={{ opacity: 0.5 }}
+          color={getToken("icons.onSurface")}
+        />
+        <LogoSkeleton size="medium" />
+
+        <Flex ml="auto">
+          <Skeleton sx={{ width: ["3rem", "6rem"] }} height="1rem" />
+        </Flex>
+      </Flex>
+
+      <Separator mx="-primary" />
+
+      <Flex align="center" py="m">
+        <Box mr="base">
+          <LogoSkeleton size="medium" />
+        </Box>
+        <Stack gap="xs">
+          <Skeleton width="4rem" height="1rem" />
+        </Stack>
+        <Flex ml="auto">
+          <Skeleton width="4rem" height="1.5rem" />
+        </Flex>
+      </Flex>
+    </Stack>
+  )
+}
+
+export const XcScanJourneyListSkeleton = () => {
+  return (
+    <Stack gap="base" maxWidth="6xl" width="100%" mx="auto">
+      {Array.from({ length: 4 }, (_, i) => (
+        <JourneyCardSkeleton key={i} />
+      ))}
+    </Stack>
+  )
+}

apps/main/src/modules/xcm/history/XcmHistoryPanel.tsx

@@ -0,0 +1,69 @@
+import {
+  Chip,
+  Stack,
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@galacticcouncil/ui/components"
+import type { XcJourney } from "@galacticcouncil/xc-scan"
+import { useEffect, useState } from "react"
+import { useTranslation } from "react-i18next"
+
+import { XcScanJourneyList } from "@/modules/xcm/history/XcScanJourneyList"
+
+enum TabView {
+  All = "all",
+  Claimable = "claimable",
+}
+
+type XcmHistoryPanelProps = {
+  all: XcJourney[]
+  claimable: XcJourney[]
+}
+
+const PAGE_SIZE = 4
+
+export const XcmHistoryPanel: React.FC<XcmHistoryPanelProps> = ({
+  all,
+  claimable,
+}) => {
+  const { t } = useTranslation(["common"])
+  const [filter, setFilter] = useState<TabView>(TabView.All)
+
+  const shouldRenderFilter = claimable.length > 0
+
+  useEffect(() => {
+    if (claimable.length === 0 && filter === TabView.Claimable) {
+      setFilter(TabView.All)
+    }
+  }, [claimable.length, filter])
+
+  return (
+    <Stack
+      gap="base"
+      justify="flex-start"
+      maxWidth="6xl"
+      width="100%"
+      mx="auto"
+    >
+      {shouldRenderFilter && (
+        <ToggleGroup<TabView>
+          type="single"
+          size="medium"
+          value={filter}
+          onValueChange={(value) => value && setFilter(value)}
+        >
+          <ToggleGroupItem value={TabView.All}>{t("all")}</ToggleGroupItem>
+          <ToggleGroupItem value={TabView.Claimable}>
+            {t("claimable")} <Chip size="small">{claimable.length}</Chip>
+          </ToggleGroupItem>
+        </ToggleGroup>
+      )}
+      {filter === TabView.All && (
+        <XcScanJourneyList data={all} pageSize={PAGE_SIZE} />
+      )}
+      {filter === TabView.Claimable && (
+        <XcScanJourneyList data={claimable} pageSize={PAGE_SIZE} />
+      )}
+    </Stack>
+  )
+}