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/components/RelativeDateText/RelativeDateText.tsx

@@ -4,13 +4,15 @@ import { useRelativeDate } from "@/hooks/useRelativeDate"
 
 export type RelativeDateTextProps = TextProps & {
   date: Date
+  shortFormat?: boolean
 }
 
 export const RelativeDateText: React.FC<RelativeDateTextProps> = ({
   date,
+  shortFormat = false,
   ...props
 }) => {
-  const dateString = useRelativeDate(date)
+  const dateString = useRelativeDate(date, { shortFormat })
 
   return <Text {...props}>{dateString}</Text>
 }

apps/main/src/hooks/useRelativeDate.ts

@@ -4,15 +4,24 @@ import { useState } from "react"
 import { useTranslation } from "react-i18next"
 import { useHarmonicIntervalFn } from "react-use"
 
-export function useRelativeDate(date: Date) {
+type UseRelativeDateOptions = {
+  shortFormat?: boolean
+}
+
+export function useRelativeDate(
+  date: Date,
+  { shortFormat = false }: UseRelativeDateOptions = {},
+) {
   const { t } = useTranslation("common")
 
   const [dateString, setDateString] = useState(() =>
-    t("date.relative", { value: date }),
+    t(shortFormat ? "date.relative.short" : "date.relative", { value: date }),
   )
 
   useHarmonicIntervalFn(() => {
-    setDateString(t("date.relative", { value: date }))
+    setDateString(
+      t(shortFormat ? "date.relative.short" : "date.relative", { value: date }),
+    )
   }, getUpdateInterval(date))
 
   return dateString

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

@@ -260,7 +260,7 @@
   "date.relative.short": "{{ value, relative(format: 'short') }}",
   "date.time": "{{ value, date(format: 'HH:mm') }}",
   "date.datetime": "{{ value, date(format: 'dd/MM/yyyy HH:mm:ss') }}",
-  "date.datetime.short": "{{ value, date(format: 'dd/MM/yyyy HH:mm') }}",
+  "date.datetime.short": "{{ value, date(format: 'dd/MM/yy HH:mm') }}",
   "date.long": "{{ value, date(format: 'MMMM do, yyyy') }}",
   "date.day": "{{ value, date(format: 'MMM dd') }}",
   "date.daytime": "{{ value, date(format: 'MMM dd yyyy, HH:mm') }}",

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

@@ -4,8 +4,11 @@
   "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",
   "chainAssetSelect.button.selectAssetChain": "Select asset & chain",
   "chainAssetSelect.emptyState.noAssets": "No assets found",
   "chainAssetSelect.modal.title": "Chain & asset",

apps/main/src/modules/transactions/hooks/useTransactionToastProcessorFn.ts

@@ -1,3 +1,4 @@
+import { useAccount } from "@galacticcouncil/web3-connect"
 import { useQueryClient } from "@tanstack/react-query"
 import { useMemo } from "react"
 
@@ -6,14 +7,21 @@ import { createToastProcessorFn } from "@/modules/transactions/utils/toasts"
 import { useRpcProvider } from "@/providers/rpcProvider"
 
 export const useTransactionToastProcessorFn = () => {
+  const { account } = useAccount()
   const queryClient = useQueryClient()
   const indexerClient = useIndexerClient()
   const snowbridgeClient = useSnowbridgeClient()
   const { evm } = useRpcProvider()
 
   return useMemo(
     () =>
-      createToastProcessorFn(queryClient, indexerClient, snowbridgeClient, evm),
-    [queryClient, indexerClient, snowbridgeClient, evm],
+      createToastProcessorFn(
+        account?.address ?? "",
+        queryClient,
+        indexerClient,
+        snowbridgeClient,
+        evm,
+      ),
+    [account?.address, queryClient, indexerClient, snowbridgeClient, evm],
   )
 }

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/transactions/utils/toasts/index.ts

@@ -17,6 +17,7 @@ enum ToastProcessorType {
   Substrate = "Substrate",
   Wormhole = "Wormhole",
   Snowbridge = "Snowbridge",
+  Basejump = "Basejump",
   Unknown = "Unknown",
 }
 
@@ -25,6 +26,7 @@ const MAX_TOAST_MINUTE_AGE = {
   [ToastProcessorType.Substrate]: 60,
   [ToastProcessorType.Wormhole]: 70,
   [ToastProcessorType.Snowbridge]: 70,
+  [ToastProcessorType.Basejump]: 60,
   [ToastProcessorType.Unknown]: 0,
 } as const
 
@@ -68,12 +70,16 @@ const getToastProcessorType = (toast: ToastData): ToastProcessorType => {
     case type === TransactionType.Xcm && tags.includes(XcmTag.Snowbridge):
       return ToastProcessorType.Snowbridge
 
+    case type === TransactionType.Xcm && tags.includes(XcmTag.Basejump):
+      return ToastProcessorType.Basejump
+
     default:
       return ToastProcessorType.Unknown
   }
 }
 
 export const createToastProcessorFn = (
+  address: string,
   queryClient: QueryClient,
   indexerSdk: IndexerSdk,
   snowbridgeSdk: SnowbridgeSdk,
@@ -83,6 +89,7 @@ export const createToastProcessorFn = (
   const evmProcessor = processors.evm(queryClient, indexerSdk, evm)
   const wormholeProcessor = processors.wormhole(queryClient, indexerSdk, evm)
   const snowbridgeProcessor = processors.snowbridge(queryClient, snowbridgeSdk)
+  const basejumpProcessor = processors.basejump(address, queryClient)
   const invalidProcessor = processors.invalid()
 
   return async (toast) => {
@@ -102,6 +109,8 @@ export const createToastProcessorFn = (
         return wormholeProcessor(toast)
       case ToastProcessorType.Snowbridge:
         return snowbridgeProcessor(toast)
+      case ToastProcessorType.Basejump:
+        return basejumpProcessor(toast)
       case ToastProcessorType.Unknown:
         return invalidProcessor(toast)
     }

apps/main/src/modules/transactions/utils/toasts/processors.ts

@@ -11,17 +11,21 @@ import {
   TransferStatusToPolkadotQuery,
 } from "@galacticcouncil/indexer/snowbridge"
 import {
+  basejumpscan,
   HexString,
   HYDRATION_CHAIN_KEY,
   snowbridgescan,
+  stringEquals,
   wormholescan,
 } from "@galacticcouncil/utils"
 import { CallType } from "@galacticcouncil/xc-core"
+import { XcJourney } from "@galacticcouncil/xc-scan"
 import { QueryClient } from "@tanstack/react-query"
 import { first } from "remeda"
 import { PublicClient } from "viem"
 
 import { getWormholeHashByExtrinsicIndex } from "@/modules/transactions/utils/wormhole"
+import { createBasejumpScanQueryKey } from "@/modules/xcm/history/useBasejumpScan"
 import { ToastData } from "@/states/toasts"
 
 type ToastStatus = {
@@ -286,10 +290,39 @@ const snowbridge =
     }
   }
 
+const basejump =
+  (address: string, queryClient: QueryClient): ToastProcessorFn =>
+  async (toast) => {
+    const bjScanJourneys = queryClient.getQueryData<XcJourney[]>(
+      createBasejumpScanQueryKey(address),
+    )
+    const completedJourney = bjScanJourneys?.find(
+      (journey) =>
+        stringEquals(journey.originTxPrimary ?? "", toast.meta.txHash) &&
+        journey.status === "received",
+    )
+    if (completedJourney) {
+      return {
+        status: "success",
+        link: basejumpscan.tx(completedJourney.correlationId),
+        processed: true,
+        dateUpdated: completedJourney.recvAt
+          ? new Date(completedJourney.recvAt).toISOString()
+          : new Date().toISOString(),
+      }
+    }
+    return {
+      status: "unknown",
+      processed: false,
+      dateUpdated: new Date().toISOString(),
+    }
+  }
+
 export const processors = {
   evm,
   substrate,
   wormhole,
   snowbridge,
+  basejump,
   invalid,
 } as const

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 (