(
+ initialHashParams.get("recipient") ?? null,
+)
+recipient$.subscribe((recipient) => setHashParams({ recipient }))
+const RecipientPicker = () => {
+ const recipient = useStateObservable(recipient$)
+
+ return (
+
+ )
+}
+
+export const setupConfig$ = state(
+ combineLatest([
+ origin$,
+ selectedAccount$,
+ selectedAsset$,
+ selectedDest$,
+ amount$,
+ recipient$,
+ ]).pipe(
+ map(([origin, account, asset, dest, amount, recipient]) => {
+ if (
+ !origin ||
+ !account ||
+ !asset ||
+ !dest ||
+ amount == null ||
+ !recipient
+ )
+ return null
+
+ return { origin, account, asset, dest, amount, recipient }
+ }),
+ ),
+ null,
+)
+export const paraspellBuilder$ = setupConfig$.pipeState(
+ withLatestFrom(client$),
+ map(([v, client]) =>
+ v
+ ? Builder({
+ abstractDecimals: false,
+ apiOverrides: {
+ [v.origin]: client,
+ },
+ })
+ .from(v.origin)
+ .to(v.dest)
+ .currency({ location: v.asset.location, amount: v.amount })
+ .recipient(v.recipient)
+ .sender(v.account.address)
+ : null,
+ ),
+)
+
+const SetupCard: FC<
+ PropsWithChildren<{
+ title: string
+ icon?: ReactNode
+ }>
+> = ({ title, icon, children }) => (
+
+
+ {icon ? {icon} : null}
+ {title}
+
+ {children}
+
+)
+
+const KeyValue: FC<{ label: string; value: ReactNode }> = ({
+ label,
+ value,
+}) => (
+
+ {label}
+ {value}
+
+)
diff --git a/src/pages/Teleport/Submit.tsx b/src/pages/Teleport/Submit.tsx
new file mode 100644
index 0000000..579252e
--- /dev/null
+++ b/src/pages/Teleport/Submit.tsx
@@ -0,0 +1,372 @@
+import { Link } from "@/hashParams"
+import {
+ TDryRunChainResult,
+ TDryRunResult,
+ TPapiTransaction,
+} from "@paraspell/sdk"
+import { formatToken } from "@polkadot-api/react-components"
+import { Button } from "@polkahub/ui-components"
+import { state, useStateObservable, withDefault } from "@react-rxjs/core"
+import { createSignal } from "@react-rxjs/utils"
+import {
+ CheckCircle2,
+ CircleAlert,
+ ExternalLink,
+ Loader2,
+ LockKeyhole,
+ Play,
+ TriangleAlert,
+ XCircle,
+} from "lucide-react"
+import { PolkadotClient } from "polkadot-api"
+import { jsonSerialize, toHex } from "polkadot-api/utils"
+import { useSelectedAccount } from "polkahub"
+import { FC, ReactNode } from "react"
+import {
+ catchError,
+ filter,
+ from,
+ map,
+ startWith,
+ switchMap,
+ withLatestFrom,
+} from "rxjs"
+import { trackTx } from "../Extrinsics/ExtrinsicsWorkspaceEntry"
+import { routeInfo$ } from "./RoutePreview"
+import { paraspellBuilder$, setupConfig$ } from "./Setup"
+
+export const Submit = () => {
+ return (
+
+
+
Validation & submit
+
+
+
+
+
+
+
+ )
+}
+
+const Validation = () => {
+ const setupConfig = useStateObservable(setupConfig$)
+ const routeInfo = useStateObservable(routeInfo$)
+
+ const formatChecks = setupConfig ? !!routeInfo : null
+ const balanceFeeChecks =
+ routeInfo && routeInfo !== "loading"
+ ? routeInfo.origin.xcmFee.sufficient &&
+ (typeof routeInfo.destination.receivedCurrency.receivedAmount ===
+ "bigint"
+ ? routeInfo.destination.receivedCurrency.receivedAmount > 0n
+ : null)
+ : null
+
+ return (
+
+ )
+}
+
+const [dryRun$, dryRun] = createSignal()
+const dryRunResult$ = state(
+ dryRun$.pipe(
+ withLatestFrom(paraspellBuilder$),
+ map(([, b]) => b),
+ filter((v) => v != null),
+ switchMap((builder) =>
+ from(builder.dryRun()).pipe(
+ map((value) => ({ type: "success" as const, value })),
+ startWith({ type: "loading" as const }),
+ catchError((ex: any) => [
+ { type: "error" as const, value: ex.message },
+ ]),
+ ),
+ ),
+ ),
+ null,
+)
+const DryRun = () => {
+ const builder = useStateObservable(paraspellBuilder$)
+ const dryRunResult = useStateObservable(dryRunResult$)
+
+ return (
+
+
+
Dry run
+
+
+ {!dryRunResult ? (
+
+ Not run
+
+ ) : dryRunResult.type === "loading" ? (
+
+
+ Running simulation
+
+ ) : dryRunResult.type === "success" ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
Dry run failed
+
+ {message || "Unknown error"}
+
+
+
+
+
+
+
+ {result.hops.map((hop, i) => (
+
+
+
+ ))}
+ {result.destination ? (
+
+
+
+ ) : null}
+
+)
+const DryRunChainResult: FC<{ result: TDryRunChainResult }> = ({ result }) => {
+ if (!result.success) {
+ return (
+
+
+
+ {result.failureReason}
+
+ {result.failureSubReason ?
{result.failureSubReason}
: null}
+
+
+
+ {result.destParaId != null ? (
+
+ ) : null}
+ {result.forwardedXcms &&
+ (!Array.isArray(result.forwardedXcms) ||
+ result.forwardedXcms.length > 0) ? (
+
+
+ Forwarded XCM
+
+
+ {JSON.stringify(result.forwardedXcms, jsonSerialize, 2)}
+
+
+ ) : null}
+
+
+ {resultTransactions ? (
+ resultTransactions.map((result, i) => (
+ 1 ? i + 1 : null}
+ />
+ ))
+ ) : (
+
+ )}
+
+ )
+}
+
+const DevelopmentDisclaimer = () => (
+
+
+
+
This feature is under development
+
+ Verify the generated call data before signing.
+
+
+
+ {number != null ?
#{number}
: null}
+
+ {api ? null : (
+
+
+ Open in extrinsics
+
+ )}
+
+ {children}
+
+)
+
+const ValidationRow: FC<{ label: string; value: boolean | null }> = ({
+ label,
+ value,
+}) => (
+
+ {label}
+
+
+)
+
+const StatusBadge: FC<{ value: boolean | null }> = ({ value }) => {
+ if (value == null) {
+ return (
+
+
+ Not run
+
+ )
+ }
+
+ return value ? (
+
+
+ Passed
+
+ ) : (
+
+
+ Failed
+
+ )
+}
+
+const DryRunSection: FC<{
+ title: string
+ children: ReactNode
+}> = ({ title, children }) => (
+
+)
+
+const DetailRow: FC<{
+ label: string
+ value: ReactNode
+}> = ({ label, value }) => (
+
+ {label}
+
+ {value}
+
+
+)
diff --git a/src/pages/Teleport/Teleport.tsx b/src/pages/Teleport/Teleport.tsx
new file mode 100644
index 0000000..1b47667
--- /dev/null
+++ b/src/pages/Teleport/Teleport.tsx
@@ -0,0 +1,63 @@
+import { withSubscribe } from "@/components/withSuspense"
+import { useStateObservable } from "@react-rxjs/core"
+import { AlertTriangle } from "lucide-react"
+import { CenteredScrollContainer } from "../AppShell"
+import { RoutePreview } from "./RoutePreview"
+import { origin$, Setup } from "./Setup"
+import { Submit } from "./Submit"
+
+const Teleport = withSubscribe(() => {
+ const origin = useStateObservable(origin$)
+
+ if (!origin) {
+ // TODO explore custom chains
+ return (
+
+
+
+
+
+
Chain not supported
+
+ Teleport is currently available only for chains supported by
+ Paraspell.
+
+
+
+