Basejump 🪂

apps/main/src/api/xcm.ts

@@ -135,6 +135,7 @@ export type XcmTransferArgs = {
   readonly destAddress: string
   readonly destAsset: string
   readonly destChain: string
+  readonly bridgeTag?: string
 }
 
 export const xcmTransferQuery = (
@@ -146,6 +147,7 @@ export const xcmTransferQuery = (
     destAddress,
     destChain,
     destAsset,
+    bridgeTag,
   }: XcmTransferArgs,
   options?: UseQueryOptions<Transfer>,
 ) => {
@@ -162,17 +164,28 @@ export const xcmTransferQuery = (
       destAsset,
       srcChain,
       destChain,
+      bridgeTag,
     ],
-    queryFn: () =>
-      TransferBuilder(wallet)
+    queryFn: async () => {
+      const builder = TransferBuilder(wallet)
         .withAsset(srcAsset)
         .withSource(srcChain)
         .withDestination(destChain)
-        .build({
-          srcAddress: srcAddress,
-          dstAddress: destAddress,
-          dstAsset: destAsset,
-        }),
+
+      // Do not pass invalid/stale dest asset
+      const validDstAsset = builder.routes.some(
+        (r) => r.destination.asset.key === destAsset,
+      )
+        ? destAsset
+        : undefined
+
+      return builder.build({
+        srcAddress,
+        dstAddress: destAddress,
+        dstAsset: validDstAsset,
+        tag: bridgeTag,
+      })
+    },
     enabled:
       !!srcAddress &&
       !!destAddress &&

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

@@ -4,8 +4,12 @@
   "approve.title": "Approve spending cap",
   "approve.toast.submitted": "Approving {{ amount, number }} {{ symbol }} spending cap on {{ srcChain }}",
   "approve.toast.success": "Approved {{ amount, number }} {{ symbol }} spending cap on {{ srcChain }}",
+  "approve.pending.title": "Approval Pending",
+  "approve.pending.description": "Your approval transaction is being confirmed on the blockchain.",
   "bridge.wormhole": "Wormhole",
   "bridge.snowbridge": "Snowbridge",
+  "bridge.basejump": "Basejump",
+  "bridge.selector.label": "Via",
   "chainAssetSelect.button.selectAssetChain": "Select asset & chain",
   "chainAssetSelect.emptyState.noAssets": "No assets found",
   "chainAssetSelect.modal.title": "Chain & asset",
@@ -45,6 +49,8 @@
   "report.destFee.insufficientBalance": "You need to have at least {{ amount, number }} {{ symbol }} on {{ chain }}",
   "report.asset.frozen": "Your account on {{ chain }} has frozen balance for {{ symbol }}",
   "report.account.insufficientDeposit": "You need to have {{ amount, number }} {{ symbol }} on {{ chain }} for existential deposit",
+  "journey.fastDelivery": "fast delivery",
+  "journey.delivered": "Delivered",
   "journey.status.sent": "In Progress",
   "journey.status.pending": "In Progress",
   "journey.status.received": "Completed",

apps/main/src/modules/transactions/review/ReviewMultiTransaction.tsx

@@ -1,10 +1,11 @@
 import {
   Modal,
+  ModalBody,
   ModalFooter,
   ModalHeader,
   Stepper,
 } from "@galacticcouncil/ui/components"
-import { useEffect, useState } from "react"
+import React, { useEffect, useState } from "react"
 import { useTranslation } from "react-i18next"
 import { isFunction, omit } from "remeda"
 
@@ -41,6 +42,7 @@ export const ReviewMultiTransaction: React.FC<ReviewMultiTransactionProps> = ({
   const [resolvedTx, setResolvedTx] = useState<AnyTransaction | null>(null)
   const [resolvedConfig, setResolvedConfig] =
     useState<TransactionCommon | null>(null)
+  const [isPendingResolution, setIsPendingResolution] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
   const [isLastSubmitted, setIsLastSubmitted] = useState(false)
   const [hasUserClosedModal, setHasUserClosedModal] = useState(false)
@@ -63,12 +65,15 @@ export const ReviewMultiTransaction: React.FC<ReviewMultiTransactionProps> = ({
     const tx = currentBaseConfig.tx
 
     if (isFunction(tx)) {
+      setIsPendingResolution(true)
       const previousResults = transactionResults.slice(0, currentIndex)
       Promise.resolve(tx(previousResults)).then((resolved) => {
+        setIsPendingResolution(false)
         setResolvedTx(resolved.tx)
         setResolvedConfig(omit(resolved, ["tx"]))
       })
     } else {
+      setIsPendingResolution(false)
       setResolvedTx(tx)
       setResolvedConfig(null)
     }
@@ -138,6 +143,9 @@ export const ReviewMultiTransaction: React.FC<ReviewMultiTransactionProps> = ({
 
   const { title, description } = currentConfig
 
+  const PendingComponent =
+    isPendingResolution && currentBaseConfig?.pendingComponent
+
   return (
     <TransactionProvider key={currentConfig.id} transaction={currentConfig}>
       <Modal
@@ -169,7 +177,13 @@ export const ReviewMultiTransaction: React.FC<ReviewMultiTransactionProps> = ({
           title={title ?? t("transaction.title")}
           description={description ?? t("transaction.description")}
         />
-        <ReviewTransactionContent />
+        {PendingComponent ? (
+          <ModalBody>
+            <PendingComponent />
+          </ModalBody>
+        ) : (
+          <ReviewTransactionContent />
+        )}
         <ModalFooter justify="space-between">
           <ReviewTransactionFooter closable={isClosable} />
         </ModalFooter>

apps/main/src/modules/transactions/review/ReviewTransactionSummary.tsx

@@ -6,7 +6,7 @@ import {
   Text,
 } from "@galacticcouncil/ui/components"
 import { getToken } from "@galacticcouncil/ui/utils"
-import { HYDRATION_CHAIN_KEY } from "@galacticcouncil/utils"
+import { HYDRATION_CHAIN_KEY, isValidBigSource } from "@galacticcouncil/utils"
 import {
   useAccount,
   useActiveMultisigConfig,
@@ -135,19 +135,26 @@ const XcmSummary = () => {
   const srcChain = chainsMap.get(meta.srcChainKey)
 
   const isPolkadotEcosystem = srcChain?.ecosystem === ChainEcosystem.Polkadot
+
   return (
     <Stack
       separated
       separator={<RowSeparator />}
       sx={{ mb: "var(--modal-content-inset)" }}
     >
-      <SummaryRow
-        label={t("transaction.summary.srcFee.label")}
-        content={t("currency", {
-          value: meta.srcChainFee,
-          symbol: meta.srcChainFeeSymbol,
-        })}
-      />
+      {!!meta.srcChainFee && (
+        <SummaryRow
+          label={t("transaction.summary.srcFee.label")}
+          content={
+            isValidBigSource(meta.srcChainFee)
+              ? t("currency", {
+                  value: meta.srcChainFee,
+                  symbol: meta.srcChainFeeSymbol,
+                })
+              : meta.srcChainFee
+          }
+        />
+      )}
       {Big(meta.dstChainFee || "0").gt(0) && (
         <SummaryRow
           label={t("transaction.summary.destFee.label")}

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

@@ -12,9 +12,9 @@ export const XcmPage = () => {
   const address = account?.address ?? ""
 
   const claimable = useClaimableTransactions()
-  const { data: all, dataUpdatedAt } = useXcScan(address)
+  const { data: all, isLoading: isLoadingXcScan } = useXcScan(address)
 
-  const isLoading = !!account && dataUpdatedAt === 0
+  const isLoading = !!account && isLoadingXcScan
   const isTwoColTemplate = !!account && (all.length > 0 || isLoading)
 
   return (

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

@@ -1,5 +1,6 @@
 import {
   ArrowRight,
+  JetSki,
   QuestionCircleRegular,
 } from "@galacticcouncil/ui/assets/icons"
 import {
@@ -13,7 +14,7 @@ import {
   Text,
 } from "@galacticcouncil/ui/components"
 import { getToken } from "@galacticcouncil/ui/utils"
-import { xcscan } from "@galacticcouncil/utils"
+import { basejumpscan, xcscan } from "@galacticcouncil/utils"
 import type { XcJourney } from "@galacticcouncil/xc-scan"
 import Big from "big.js"
 import { useTranslation } from "react-i18next"
@@ -23,6 +24,7 @@ import { ClaimButton } from "@/modules/xcm/history/components/ClaimButton"
 import { JourneyAssetLogo } from "@/modules/xcm/history/components/JourneyAssetLogo"
 import { JourneyChainLogo } from "@/modules/xcm/history/components/JourneyChainLogo"
 import { JourneyDate } from "@/modules/xcm/history/components/JourneyDate"
+import { JourneyProtocol } from "@/modules/xcm/history/components/JourneyProtocol"
 import { JourneyStatus } from "@/modules/xcm/history/components/JourneyStatus"
 import { usePendingClaimsStore } from "@/modules/xcm/history/hooks/usePendingClaimsStore"
 import {
@@ -35,8 +37,15 @@ import { isOptimisticJourney } from "@/modules/xcm/history/utils/optimistic"
 import { toDecimal } from "@/utils/formatting"
 
 export const XcJourneyCard: React.FC<XcJourney> = (journey) => {
-  const { origin, destination, sentAt, correlationId, status, totalUsd } =
-    journey
+  const {
+    origin,
+    destination,
+    sentAt,
+    correlationId,
+    status,
+    totalUsd,
+    originProtocol,
+  } = journey
   const { t } = useTranslation(["common", "xcm"])
   const { pendingCorrelationIds } = usePendingClaimsStore()
 
@@ -45,7 +54,10 @@ export const XcJourneyCard: React.FC<XcJourney> = (journey) => {
   const transferAsset = getTransferAsset(journey)
   const { from, to } = getFormattedAddresses(journey)
 
-  const link = xcscan.tx(correlationId)
+  const link =
+    originProtocol === "basejump"
+      ? basejumpscan.tx(correlationId)
+      : xcscan.tx(correlationId)
 
   const isNotPending = !pendingCorrelationIds.includes(journey.correlationId)
   const isClaimable = isNotPending && isJourneyClaimable(journey)
@@ -88,8 +100,25 @@ export const XcJourneyCard: React.FC<XcJourney> = (journey) => {
         </Flex>
 
         {sentAt && (
-          <Flex align="center" justify="space-between" ml="auto">
+          <Flex
+            direction={["column", "row"]}
+            align={["flex-end", "center"]}
+            gap={["xs", "m"]}
+            justify="space-between"
+            ml="auto"
+          >
+            {originProtocol === "basejump" && (
+              <Flex gap="s">
+                <Icon
+                  component={JetSki}
+                  size="m"
+                  color={getToken("colors.skyBlue.600")}
+                />
+                <JourneyProtocol fs="p5" protocol={originProtocol} />
+              </Flex>
+            )}
             <JourneyDate
+              truncate
               timestamp={sentAt}
               fs="p5"
               color={getToken("text.medium")}

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

@@ -7,7 +7,7 @@ import {
   Text,
 } from "@galacticcouncil/ui/components"
 import { getToken } from "@galacticcouncil/ui/utils"
-import { stringEquals, xcscan } from "@galacticcouncil/utils"
+import { basejumpscan, stringEquals, xcscan } from "@galacticcouncil/utils"
 import type { XcJourney } from "@galacticcouncil/xc-scan"
 import { createColumnHelper } from "@tanstack/react-table"
 import Big from "big.js"
@@ -188,7 +188,7 @@ export const useXcScanHistoryColumns = () => {
 
         const durationMs = recvAt - sentAt
 
-        if (durationMs < 0) {
+        if (durationMs <= 0) {
           return null
         }
 
@@ -203,11 +203,13 @@ export const useXcScanHistoryColumns = () => {
     const actionColumn = columnHelper.display({
       id: XcScanHistoryTableColumnId.Action,
       cell: ({ row }) => {
-        const link = xcscan.tx(row.original.correlationId)
+        const { correlationId, originProtocol } = row.original
+        const link =
+          originProtocol === "basejump"
+            ? basejumpscan.tx(correlationId)
+            : xcscan.tx(correlationId)
 
-        const isNotPending = !pendingCorrelationIds.includes(
-          row.original.correlationId,
-        )
+        const isNotPending = !pendingCorrelationIds.includes(correlationId)
         const isClaimable = isNotPending && isJourneyClaimable(row.original)
 
         return (

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

@@ -27,13 +27,12 @@ export const XcScanJourneyList = ({ data, pageSize = 10 }: Props) => {
         {paginatedData.map((journey) => (
           <XcJourneyCard key={journey.correlationId} {...journey} />
         ))}
+        <Pagination
+          totalPages={totalPages}
+          currentPage={currentPage}
+          onPageChange={handlePageChange}
+        />
       </Stack>
-
-      <Pagination
-        totalPages={totalPages}
-        currentPage={currentPage}
-        onPageChange={handlePageChange}
-      />
     </Stack>
   )
 }

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

@@ -49,7 +49,13 @@ const JourneyCardSkeleton = () => {
 
 export const XcScanJourneyListSkeleton = () => {
   return (
-    <Stack gap="base" maxWidth="6xl" width="100%" mx="auto">
+    <Stack
+      gap="base"
+      maxWidth="6xl"
+      width="100%"
+      mx="auto"
+      justify="flex-start"
+    >
       {Array.from({ length: 4 }, (_, i) => (
         <JourneyCardSkeleton key={i} />
       ))}

apps/main/src/modules/xcm/history/hooks/useXcmBridgeTxStore.ts

@@ -0,0 +1,27 @@
+import { create } from "zustand"
+import { persist } from "zustand/middleware"
+
+export type XcmBridgeTxEntry = {
+  bridgeProvider: string
+  /** Intended destination chain URN (may differ from xc-scan's tracked destination) */
+  destUrn?: string
+}
+
+type XcmBridgeTxStore = {
+  /** Maps originTxPrimary (txHash on source chain) → entry */
+  entries: Record<string, XcmBridgeTxEntry>
+  addEntry: (txHash: string, entry: XcmBridgeTxEntry) => void
+}
+
+export const useXcmBridgeTxStore = create<XcmBridgeTxStore>()(
+  persist(
+    (set) => ({
+      entries: {},
+      addEntry: (txHash, entry) =>
+        set((state) => ({
+          entries: { ...state.entries, [txHash]: entry },
+        })),
+    }),
+    { name: "xcm-bridge-tx-store", version: 2 },
+  ),
+)

apps/main/src/modules/xcm/history/index.ts

@@ -1,3 +1,4 @@
+export { useBasejumpScanSubscription } from "./useBasejumpScan"
 export { useXcScanSubscription } from "./useXcScan"
 export { XcScanHistory } from "./XcScanHistory"
 export { xcStore } from "./xcScanStore"