- (#{formatNumber(finalized)}
- {best && best !== finalized ? <> - #{formatNumber(best)} : null})
-
- )
-}
diff --git a/src/Teleport.tsx b/src/Teleport.tsx
index aeae35b..0c0d038 100644
--- a/src/Teleport.tsx
+++ b/src/Teleport.tsx
@@ -1,54 +1,306 @@
-import React, { useRef, useState } from "react"
-import { teleportToParaChain, teleportToRelayChain } from "./api"
-import { useSelectedAccount, useToken } from "./context"
-import { TxEvent } from "polkadot-api"
-
-const teleportFns = {
- para: teleportToParaChain,
- relay: teleportToRelayChain,
-}
+import React, { Reducer, useEffect, useReducer, useRef, useState } from "react"
+import { ASSET_DECIMALS, CHAIN_NAMES, chains } from "./api"
+import { AssetId, ChainId } from "./api/types"
+import {
+ SelectTrigger,
+ SelectValue,
+ Select,
+ SelectContent,
+ SelectItem,
+} from "@/components/ui/select"
+import { Label } from "./components/ui/label"
+import { Card, CardHeader } from "./components/ui/card"
+import { useSelectedAccount } from "./context"
+import { formatCurrency } from "./utils"
+import { Input } from "./components/ui/input"
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogTitle,
+ DialogTrigger,
+} from "./components/ui/dialog"
+import { Button } from "./components/ui/button"
+import { Transaction } from "polkadot-api"
+
+const fromChains = [...chains.keys()]
+
+const Selector: React.FC<{
+ value: string
+ onChange: (value: string) => void
+ values: Array<{ key: string; display: string }>
+}> = ({ onChange, values, value }) => (
+ (null)
+ const fromBalance = useBalance(from, asset)
+
+ return (
+ <>
+
+
+
+ dispatch({ type: "from", value: value as ChainId })
+ }
+ values={fromChains.map(chainToSelectorValue)}
+ />
+
+
+
+
+ dispatch({ type: "asset", value: value as AssetId })
+ }
+ values={[...chains.get(from)!.keys()].map((key) => ({
+ key,
+ display: key,
+ }))}
+ />
+
+
+
+
+ dispatch({ type: "to", value: value as ChainId })
+ }
+ values={getToChains(from, asset).map(chainToSelectorValue)}
+ />
+
+
+
+ Transferable Balances
+
+
+ -
+ {CHAIN_NAMES[from]}
+
+
+
+
+ -
+ {CHAIN_NAMES[to]}
+
+
+
+
+
+
+
+
+ {
+ const amount = Number(value)
+ setAmount(isNaN(amount) ? null : amount)
+ }}
+ type="number"
+ id="amount"
+ placeholder="Amount to teleport"
+ />
+
+ {amount ? (
+
+ ) : null}
+
+ )
+}
+
+const Fees: React.FC<{
+ from: ChainId
+ to: ChainId
+ asset: AssetId
+ amount: number
+}> = ({ from, to, asset, amount }) => {
const account = useSelectedAccount()
- const ref = useRef(0n)
- const [txStatus, setTxStatus] = useState(null)
-
- const teleport = (to: "para" | "relay") => {
- teleportFns[to](account.address, ref.current)
- .signSubmitAndWatch(account.polkadotSigner)
- .subscribe((x) => {
- setTxStatus(x)
- if (x.type === "finalized")
- setTimeout(() => {
- setTxStatus(null)
- }, 2_000)
+ const [fees, setFees] = useState()
+ const [openDialog, setOpenDialog] = useState(false)
+ const signSubmitAndWatch =
+ useRef["signSubmitAndWatch"]>()
+ const [dialogText, setDialogText] = useState()
+
+ const fixedAmount = BigInt(amount * 10 ** ASSET_DECIMALS[asset])
+
+ useEffect(() => {
+ setFees(null)
+ let token: any = setTimeout(() => {
+ const call = chains.get(from)!.get(asset)!.teleport[to]!(
+ account.polkadotSigner,
+ fixedAmount,
+ )
+
+ signSubmitAndWatch.current = call.signSubmitAndWatch
+ call.getEstimatedFees().then((fees) => {
+ if (token) setFees(fees)
})
- }
+ }, 50)
+
+ return () => {
+ signSubmitAndWatch.current = undefined
+ clearTimeout(token)
+ token = null
+ }
+ }, [from, to, asset, amount])
+
+ return (
+ <>
+
+ -
+ Estimated fees
+
+ {fees ? (
+
+ ) : (
+ "Loading"
+ )}
+
+
+
+
+
+ )
+}
+
+const FormattedToken: React.FC<{
+ asset: AssetId
+ value: bigint | null
+}> = ({ asset, value }) => {
+ const decimals = ASSET_DECIMALS[asset]
return (
-
-
Teleport:
-
- {
- ref.current = BigInt(Number(e.target.value) * 10 ** decimals)
- }}
- defaultValue={0}
- />
-
-
-
+ <>
+ {value === null
+ ? "Loading..."
+ : formatCurrency(value, decimals, {
+ nDecimals: 4,
+ }) +
+ " " +
+ asset}
+
)
}
+
+const useBalance = (chain: ChainId, asset: AssetId) => {
+ const account = useSelectedAccount()
+ const [balance, setBalance] = useState(null)
+
+ useEffect(() => {
+ setBalance(null)
+
+ const subscription = chains
+ .get(chain)!
+ .get(asset)!
+ .watchFreeBalance(account.address)
+ .subscribe(setBalance)
+
+ return () => {
+ subscription.unsubscribe()
+ }
+ }, [account, chain, asset])
+
+ return balance
+}
diff --git a/src/TransferrableBalance.tsx b/src/TransferrableBalance.tsx
deleted file mode 100644
index 4cf47ab..0000000
--- a/src/TransferrableBalance.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { useEffect, useState } from "react"
-import { SS58String } from "polkadot-api"
-import { useChain, useToken, useSelectedAccount } from "./context"
-import { formatCurrency } from "./utils"
-
-const useTranferrableBalance = (address: SS58String) => {
- const { api } = useChain()
- const [balance, setBalance] = useState(null)
- useEffect(() => {
- setBalance(null)
-
- const subscription = api.query.System.Account.watchValue(
- address,
- "best",
- ).subscribe(({ data }) => {
- setBalance(data.free - data.frozen)
- })
-
- return () => {
- subscription.unsubscribe()
- }
- }, [api, address])
-
- return balance
-}
-
-export const TransferrableBalance: React.FC = () => {
- const { decimals, symbol } = useToken()
- const { address } = useSelectedAccount()
- const transferrableBalance = useTranferrableBalance(address)
-
- return (
-
- Transferrable Balance:{" "}
- {transferrableBalance === null
- ? "Loading..."
- : formatCurrency(transferrableBalance, decimals, {
- nDecimals: 2,
- }) +
- " " +
- symbol}
-
- )
-}
diff --git a/src/api/chains.ts b/src/api/chains.ts
new file mode 100644
index 0000000..4d5a5d8
--- /dev/null
+++ b/src/api/chains.ts
@@ -0,0 +1,29 @@
+import dot from "./dot"
+import ksm from "./ksm"
+import wnd from "./wnd"
+import { AssetId, AssetInChain, ChainId } from "./types"
+
+const assetsInChains = [...dot, ...ksm, ...wnd]
+
+export const chains = new Map>()
+assetsInChains.forEach((assetinChain) => {
+ const { chain, symbol } = assetinChain
+ if (!chains.has(chain)) chains.set(chain, new Map())
+
+ chains.get(chain)!.set(symbol, assetinChain)
+})
+
+export const ASSET_DECIMALS: Record = {
+ DOT: 10,
+ KSM: 12,
+ WND: 12,
+}
+
+export const CHAIN_NAMES: Record = {
+ dot: "Polkadot RelayChain",
+ dotAh: "Polkadot AssetHub",
+ ksm: "Kusama RelayChain",
+ ksmAh: "Kusama AssetHub",
+ wnd: "Westend RelayChain",
+ wndAh: "Westend AssetHub",
+}
diff --git a/src/api/clients/dot.ts b/src/api/clients/dot.ts
new file mode 100644
index 0000000..9327801
--- /dev/null
+++ b/src/api/clients/dot.ts
@@ -0,0 +1,9 @@
+import { createClient } from "polkadot-api"
+import { getSmProvider } from "polkadot-api/sm-provider"
+import { smoldot } from "./smoldot"
+
+export const dotRelayChain = import("polkadot-api/chains/polkadot").then(
+ ({ chainSpec }) => smoldot.addChain({ chainSpec }),
+)
+
+export const dotClient = createClient(getSmProvider(dotRelayChain))
diff --git a/src/api/clients/dotAh.ts b/src/api/clients/dotAh.ts
new file mode 100644
index 0000000..5f78ac9
--- /dev/null
+++ b/src/api/clients/dotAh.ts
@@ -0,0 +1,13 @@
+import { createClient } from "polkadot-api"
+import { getSmProvider } from "polkadot-api/sm-provider"
+import { smoldot } from "./smoldot"
+import { dotRelayChain } from "./dot"
+
+const smoldotParaChain = Promise.all([
+ dotRelayChain,
+ import("polkadot-api/chains/polkadot_asset_hub"),
+]).then(([relayChain, { chainSpec }]) =>
+ smoldot.addChain({ chainSpec, potentialRelayChains: [relayChain] }),
+)
+
+export const dotAhClient = createClient(getSmProvider(smoldotParaChain))
diff --git a/src/api/clients/index.ts b/src/api/clients/index.ts
new file mode 100644
index 0000000..e727c0d
--- /dev/null
+++ b/src/api/clients/index.ts
@@ -0,0 +1,8 @@
+export { dotClient } from "./dot"
+export { dotAhClient } from "./dotAh"
+
+export { ksmClient } from "./ksm"
+export { ksmAhClient } from "./ksmAh"
+
+export { wndClient } from "./wnd"
+export { wndAhClient } from "./wndAh"
diff --git a/src/api/clients/ksm.ts b/src/api/clients/ksm.ts
new file mode 100644
index 0000000..276f6d6
--- /dev/null
+++ b/src/api/clients/ksm.ts
@@ -0,0 +1,9 @@
+import { createClient } from "polkadot-api"
+import { getSmProvider } from "polkadot-api/sm-provider"
+import { smoldot } from "./smoldot"
+
+export const ksmRelayChain = import("polkadot-api/chains/ksmcc3").then(
+ ({ chainSpec }) => smoldot.addChain({ chainSpec }),
+)
+
+export const ksmClient = createClient(getSmProvider(ksmRelayChain))
diff --git a/src/api/clients/ksmAh.ts b/src/api/clients/ksmAh.ts
new file mode 100644
index 0000000..e25839e
--- /dev/null
+++ b/src/api/clients/ksmAh.ts
@@ -0,0 +1,13 @@
+import { createClient } from "polkadot-api"
+import { getSmProvider } from "polkadot-api/sm-provider"
+import { smoldot } from "./smoldot"
+import { ksmRelayChain } from "./ksm"
+
+const smoldotParaChain = Promise.all([
+ ksmRelayChain,
+ import("polkadot-api/chains/ksmcc3_asset_hub"),
+]).then(([relayChain, { chainSpec }]) =>
+ smoldot.addChain({ chainSpec, potentialRelayChains: [relayChain] }),
+)
+
+export const ksmAhClient = createClient(getSmProvider(smoldotParaChain))
diff --git a/src/api/smoldot.ts b/src/api/clients/smoldot.ts
similarity index 100%
rename from src/api/smoldot.ts
rename to src/api/clients/smoldot.ts
diff --git a/src/api/clients/wnd.ts b/src/api/clients/wnd.ts
new file mode 100644
index 0000000..4595f32
--- /dev/null
+++ b/src/api/clients/wnd.ts
@@ -0,0 +1,9 @@
+import { createClient } from "polkadot-api"
+import { getSmProvider } from "polkadot-api/sm-provider"
+import { smoldot } from "./smoldot"
+
+export const wndRelayChain = import("polkadot-api/chains/westend2").then(
+ ({ chainSpec }) => smoldot.addChain({ chainSpec }),
+)
+
+export const wndClient = createClient(getSmProvider(wndRelayChain))
diff --git a/src/api/clients/wndAh.ts b/src/api/clients/wndAh.ts
new file mode 100644
index 0000000..1830eb7
--- /dev/null
+++ b/src/api/clients/wndAh.ts
@@ -0,0 +1,13 @@
+import { createClient } from "polkadot-api"
+import { getSmProvider } from "polkadot-api/sm-provider"
+import { smoldot } from "./smoldot"
+import { wndRelayChain } from "./wnd"
+
+const smoldotParaChain = Promise.all([
+ wndRelayChain,
+ import("polkadot-api/chains/westend2_asset_hub"),
+]).then(([relayChain, { chainSpec }]) =>
+ smoldot.addChain({ chainSpec, potentialRelayChains: [relayChain] }),
+)
+
+export const wndAhClient = createClient(getSmProvider(smoldotParaChain))
diff --git a/src/api/common.ts b/src/api/common.ts
new file mode 100644
index 0000000..ccc7d80
--- /dev/null
+++ b/src/api/common.ts
@@ -0,0 +1,140 @@
+import { AccountId, PolkadotSigner, TypedApi } from "polkadot-api"
+import {
+ DotXcmV3Junctions,
+ DotXcmV3MultiassetAssetId,
+ XcmV3Junction,
+ XcmV3JunctionNetworkId,
+ XcmV3MultiassetFungibility,
+ XcmV3WeightLimit,
+ XcmVersionedMultiAssets,
+ XcmVersionedMultiLocation,
+ dotAh,
+} from "@polkadot-api/descriptors"
+import { Binary, Enum, SS58String } from "polkadot-api"
+import { map } from "rxjs"
+
+const encodeAccount = AccountId().enc
+
+export const getBeneficiary = (address: SS58String | Uint8Array) =>
+ XcmVersionedMultiLocation.V3({
+ parents: 0,
+ interior: DotXcmV3Junctions.X1(
+ XcmV3Junction.AccountId32({
+ network: undefined,
+ id: Binary.fromBytes(
+ address instanceof Uint8Array ? address : encodeAccount(address),
+ ),
+ }),
+ ),
+ })
+
+export const getNativeAsset = (parents: number, amount: bigint) =>
+ XcmVersionedMultiAssets.V3([
+ {
+ id: DotXcmV3MultiassetAssetId.Concrete({
+ parents,
+ interior: Enum("Here"),
+ }),
+ fun: XcmV3MultiassetFungibility.Fungible(amount),
+ },
+ ])
+
+export const fromRelayToAssetHub = (
+ from: PolkadotSigner,
+ amount: bigint,
+ to?: SS58String,
+) => ({
+ dest: XcmVersionedMultiLocation.V3({
+ parents: 0,
+ interior: DotXcmV3Junctions.X1(XcmV3Junction.Parachain(1000)),
+ }),
+ beneficiary: getBeneficiary(to ?? from.publicKey),
+ assets: getNativeAsset(0, amount),
+ fee_asset_item: 0,
+ weight_limit: XcmV3WeightLimit.Unlimited(),
+})
+
+export const fromAssetHubToRelay = (
+ from: PolkadotSigner,
+ amount: bigint,
+ to?: SS58String,
+) => ({
+ dest: XcmVersionedMultiLocation.V3({
+ parents: 1,
+ interior: DotXcmV3Junctions.Here(),
+ }),
+ beneficiary: getBeneficiary(to ?? from.publicKey),
+ assets: getNativeAsset(1, amount),
+ fee_asset_item: 0,
+ weight_limit: XcmV3WeightLimit.Unlimited(),
+})
+
+export const fromAssetHubToForeign = (
+ network: XcmV3JunctionNetworkId,
+ parachainId: number,
+ assets: XcmVersionedMultiAssets,
+ from: PolkadotSigner,
+ to?: SS58String,
+) => ({
+ dest: XcmVersionedMultiLocation.V3({
+ parents: 2,
+ interior: DotXcmV3Junctions.X2([
+ XcmV3Junction.GlobalConsensus(network),
+ XcmV3Junction.Parachain(parachainId),
+ ]),
+ }),
+ beneficiary: getBeneficiary(to ?? from.publicKey),
+ assets,
+ fee_asset_item: 0,
+ weight_limit: XcmV3WeightLimit.Unlimited(),
+})
+
+export const toAssetHub = (
+ from: PolkadotSigner,
+ amount: bigint,
+ to?: SS58String,
+) => ({
+ dest: XcmVersionedMultiLocation.V3({
+ parents: 1,
+ interior: DotXcmV3Junctions.Here(),
+ }),
+ beneficiary: getBeneficiary(to ?? from.publicKey),
+ assets: getNativeAsset(1, amount),
+ fee_asset_item: 0,
+ weight_limit: XcmV3WeightLimit.Unlimited(),
+})
+
+type GenericApi = TypedApi
+
+export const watchAccoutFreeBalance =
+ (api: {
+ query: {
+ System: {
+ Account: {
+ watchValue: GenericApi["query"]["System"]["Account"]["watchValue"]
+ }
+ }
+ }
+ }) =>
+ (account: SS58String) =>
+ api.query.System.Account.watchValue(account, "best").pipe(
+ map(({ data }) => data.free - data.frozen),
+ )
+
+export const watchForeingAssetAccoutFreeBalance =
+ (
+ api: {
+ query: {
+ ForeignAssets: {
+ Account: {
+ watchValue: GenericApi["query"]["ForeignAssets"]["Account"]["watchValue"]
+ }
+ }
+ }
+ },
+ asset: { parents: number; interior: DotXcmV3Junctions },
+ ) =>
+ (account: SS58String) =>
+ api.query.ForeignAssets.Account.watchValue(asset, account, "best").pipe(
+ map((data) => (data?.status.is("Liquid") ? data.balance : 0n)),
+ )
diff --git a/src/api/dot/ah.ts b/src/api/dot/ah.ts
new file mode 100644
index 0000000..e39c394
--- /dev/null
+++ b/src/api/dot/ah.ts
@@ -0,0 +1,72 @@
+import {
+ DotXcmV3Junctions,
+ DotXcmV3MultiassetAssetId,
+ XcmV3Junction,
+ XcmV3JunctionNetworkId,
+ XcmV3MultiassetFungibility,
+ XcmVersionedMultiAssets,
+ dotAh,
+} from "@polkadot-api/descriptors"
+import { dotAhClient } from "@/api/clients"
+import { AssetInChain } from "../types"
+import {
+ fromAssetHubToRelay,
+ fromAssetHubToForeign,
+ getNativeAsset,
+ watchAccoutFreeBalance,
+ watchForeingAssetAccoutFreeBalance,
+} from "../common"
+
+const api = dotAhClient.getTypedApi(dotAh)
+
+const dot: AssetInChain = {
+ chain: "dotAh",
+ symbol: "DOT",
+ watchFreeBalance: watchAccoutFreeBalance(api),
+ teleport: {
+ dot: (...args) =>
+ api.tx.PolkadotXcm.limited_teleport_assets(fromAssetHubToRelay(...args)),
+ ksmAh: (from, amount, to) =>
+ api.tx.PolkadotXcm.limited_reserve_transfer_assets(
+ fromAssetHubToForeign(
+ XcmV3JunctionNetworkId.Kusama(),
+ 1000,
+ getNativeAsset(1, amount),
+ from,
+ to,
+ ),
+ ),
+ },
+}
+
+const ksmInDotAh: Parameters[0] = {
+ parents: 2,
+ interior: DotXcmV3Junctions.X1(
+ XcmV3Junction.GlobalConsensus(XcmV3JunctionNetworkId.Kusama()),
+ ),
+}
+
+const ksm: AssetInChain = {
+ chain: "dotAh",
+ symbol: "KSM",
+ watchFreeBalance: watchForeingAssetAccoutFreeBalance(api, ksmInDotAh),
+ teleport: {
+ ksmAh: (from, amount, to) =>
+ api.tx.PolkadotXcm.limited_reserve_transfer_assets(
+ fromAssetHubToForeign(
+ XcmV3JunctionNetworkId.Kusama(),
+ 1000,
+ XcmVersionedMultiAssets.V3([
+ {
+ id: DotXcmV3MultiassetAssetId.Concrete(ksmInDotAh),
+ fun: XcmV3MultiassetFungibility.Fungible(amount),
+ },
+ ]),
+ from,
+ to,
+ ),
+ ),
+ },
+}
+
+export default [dot, ksm]
diff --git a/src/api/dot/index.ts b/src/api/dot/index.ts
new file mode 100644
index 0000000..2b9dd85
--- /dev/null
+++ b/src/api/dot/index.ts
@@ -0,0 +1,4 @@
+import relay from "./relay"
+import ah from "./ah"
+
+export default [...relay, ...ah]
diff --git a/src/api/dot/relay.ts b/src/api/dot/relay.ts
new file mode 100644
index 0000000..9b9ce32
--- /dev/null
+++ b/src/api/dot/relay.ts
@@ -0,0 +1,18 @@
+import { dot as dotDescriptors } from "@polkadot-api/descriptors"
+import { dotClient } from "@/api/clients"
+import { AssetInChain } from "../types"
+import { fromRelayToAssetHub, watchAccoutFreeBalance } from "../common"
+
+const api = dotClient.getTypedApi(dotDescriptors)
+
+const dot: AssetInChain = {
+ chain: "dot",
+ symbol: "DOT",
+ watchFreeBalance: watchAccoutFreeBalance(api),
+ teleport: {
+ dotAh: (...args) =>
+ api.tx.XcmPallet.limited_teleport_assets(fromRelayToAssetHub(...args)),
+ },
+}
+
+export default [dot]
diff --git a/src/api/index.ts b/src/api/index.ts
index f67db94..e375a84 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -1,3 +1,2 @@
-export * from "./para-chain"
-export * from "./relay-chain"
-export * from "./teleport"
+export * from "./types"
+export * from "./chains"
diff --git a/src/api/ksm/ah.ts b/src/api/ksm/ah.ts
new file mode 100644
index 0000000..c1f290d
--- /dev/null
+++ b/src/api/ksm/ah.ts
@@ -0,0 +1,72 @@
+import {
+ DotXcmV3Junctions,
+ DotXcmV3MultiassetAssetId,
+ XcmV3Junction,
+ XcmV3JunctionNetworkId,
+ XcmV3MultiassetFungibility,
+ XcmVersionedMultiAssets,
+ ksmAh,
+} from "@polkadot-api/descriptors"
+import { ksmAhClient } from "@/api/clients"
+import { AssetInChain } from "../types"
+import {
+ fromAssetHubToForeign,
+ fromAssetHubToRelay,
+ getNativeAsset,
+ watchAccoutFreeBalance,
+ watchForeingAssetAccoutFreeBalance,
+} from "../common"
+
+const api = ksmAhClient.getTypedApi(ksmAh)
+
+const ksm: AssetInChain = {
+ chain: "ksmAh",
+ symbol: "KSM",
+ watchFreeBalance: watchAccoutFreeBalance(api),
+ teleport: {
+ ksm: (...args) =>
+ api.tx.PolkadotXcm.limited_teleport_assets(fromAssetHubToRelay(...args)),
+ dotAh: (from, amount, to) =>
+ api.tx.PolkadotXcm.limited_reserve_transfer_assets(
+ fromAssetHubToForeign(
+ XcmV3JunctionNetworkId.Kusama(),
+ 1000,
+ getNativeAsset(1, amount),
+ from,
+ to,
+ ),
+ ),
+ },
+}
+
+const dotInKsmAh: Parameters[0] = {
+ parents: 2,
+ interior: DotXcmV3Junctions.X1(
+ XcmV3Junction.GlobalConsensus(XcmV3JunctionNetworkId.Polkadot()),
+ ),
+}
+
+const dot: AssetInChain = {
+ chain: "ksmAh",
+ symbol: "DOT",
+ watchFreeBalance: watchForeingAssetAccoutFreeBalance(api, dotInKsmAh),
+ teleport: {
+ dotAh: (from, amount, to) =>
+ api.tx.PolkadotXcm.limited_reserve_transfer_assets(
+ fromAssetHubToForeign(
+ XcmV3JunctionNetworkId.Polkadot(),
+ 1000,
+ XcmVersionedMultiAssets.V3([
+ {
+ id: DotXcmV3MultiassetAssetId.Concrete(dotInKsmAh),
+ fun: XcmV3MultiassetFungibility.Fungible(amount),
+ },
+ ]),
+ from,
+ to,
+ ),
+ ),
+ },
+}
+
+export default [dot, ksm]
diff --git a/src/api/ksm/index.ts b/src/api/ksm/index.ts
new file mode 100644
index 0000000..2b9dd85
--- /dev/null
+++ b/src/api/ksm/index.ts
@@ -0,0 +1,4 @@
+import relay from "./relay"
+import ah from "./ah"
+
+export default [...relay, ...ah]
diff --git a/src/api/ksm/relay.ts b/src/api/ksm/relay.ts
new file mode 100644
index 0000000..9f3271a
--- /dev/null
+++ b/src/api/ksm/relay.ts
@@ -0,0 +1,18 @@
+import { ksm as descriptors } from "@polkadot-api/descriptors"
+import { ksmClient } from "@/api/clients"
+import { AssetInChain } from "../types"
+import { fromRelayToAssetHub, watchAccoutFreeBalance } from "../common"
+
+const api = ksmClient.getTypedApi(descriptors)
+
+const ksm: AssetInChain = {
+ chain: "ksm",
+ symbol: "KSM",
+ watchFreeBalance: watchAccoutFreeBalance(api),
+ teleport: {
+ ksmAh: (...args) =>
+ api.tx.XcmPallet.limited_teleport_assets(fromRelayToAssetHub(...args)),
+ },
+}
+
+export default [ksm]
diff --git a/src/api/para-chain.ts b/src/api/para-chain.ts
deleted file mode 100644
index 5f33abe..0000000
--- a/src/api/para-chain.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { TypedApi, createClient } from "polkadot-api"
-import { getSmProvider } from "polkadot-api/sm-provider"
-import { smoldotRelayChain } from "./relay-chain"
-import { wndAssethub } from "@polkadot-api/descriptors"
-import { smoldot } from "./smoldot"
-
-const smoldotParaChain = Promise.all([
- smoldotRelayChain,
- import("polkadot-api/chains/westend2_asset_hub"),
-]).then(([relayChain, { chainSpec }]) =>
- smoldot.addChain({ chainSpec, potentialRelayChains: [relayChain] }),
-)
-
-const provider = getSmProvider(smoldotParaChain)
-export const paraChain = createClient(provider)
-
-export const PARACHAIN_ID = 1000
-export const paraChainApi = paraChain.getTypedApi(wndAssethub)
-export type ParaChainApi = TypedApi
diff --git a/src/api/relay-chain.ts b/src/api/relay-chain.ts
deleted file mode 100644
index 93557ab..0000000
--- a/src/api/relay-chain.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { TypedApi, createClient } from "polkadot-api"
-import { wnd } from "@polkadot-api/descriptors"
-import { getSmProvider } from "polkadot-api/sm-provider"
-import { smoldot } from "./smoldot"
-
-export const smoldotRelayChain = import("polkadot-api/chains/westend2").then(
- ({ chainSpec }) => smoldot.addChain({ chainSpec }),
-)
-
-const provider = getSmProvider(smoldotRelayChain)
-export const relayChain = createClient(provider)
-
-export const relayChainApi = relayChain.getTypedApi(wnd)
-export type RelayChainApi = TypedApi
diff --git a/src/api/teleport.ts b/src/api/teleport.ts
deleted file mode 100644
index 025eb57..0000000
--- a/src/api/teleport.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { SS58String, Binary, AccountId } from "polkadot-api"
-import {
- XcmV3Junctions,
- XcmV3MultiassetAssetId,
- XcmV3MultiassetFungibility,
- XcmV3WeightLimit,
- XcmV4Junction,
- XcmVersionedAssets,
- XcmVersionedLocation,
-} from "@polkadot-api/descriptors"
-
-import { relayChainApi } from "./relay-chain"
-import { PARACHAIN_ID, paraChainApi } from "./para-chain"
-
-const encodeAccount = AccountId().enc
-
-const getBeneficiary = (address: SS58String) =>
- XcmVersionedLocation.V3({
- parents: 0,
- interior: XcmV3Junctions.X1(
- XcmV4Junction.AccountId32({
- network: undefined,
- id: Binary.fromBytes(encodeAccount(address)),
- }),
- ),
- })
-
-const getNativeAsset = (amount: bigint, parents: 1 | 0) =>
- XcmVersionedAssets.V3([
- {
- id: XcmV3MultiassetAssetId.Concrete({
- parents,
- interior: XcmV3Junctions.Here(),
- }),
- fun: XcmV3MultiassetFungibility.Fungible(amount),
- },
- ])
-
-export const teleportToParaChain = (address: SS58String, amount: bigint) =>
- relayChainApi.tx.XcmPallet.limited_teleport_assets({
- dest: XcmVersionedLocation.V3({
- parents: 0,
- interior: XcmV3Junctions.X1(XcmV4Junction.Parachain(PARACHAIN_ID)),
- }),
- beneficiary: getBeneficiary(address),
- assets: getNativeAsset(amount, 0),
- fee_asset_item: 0,
- weight_limit: XcmV3WeightLimit.Unlimited(),
- })
-
-export const teleportToRelayChain = (address: SS58String, amount: bigint) =>
- paraChainApi.tx.PolkadotXcm.limited_teleport_assets({
- dest: XcmVersionedLocation.V3({
- parents: 1,
- interior: XcmV3Junctions.Here(),
- }),
- beneficiary: getBeneficiary(address),
- assets: getNativeAsset(amount, 1),
- fee_asset_item: 0,
- weight_limit: XcmV3WeightLimit.Unlimited(),
- })
diff --git a/src/api/types.ts b/src/api/types.ts
new file mode 100644
index 0000000..8b6420d
--- /dev/null
+++ b/src/api/types.ts
@@ -0,0 +1,18 @@
+import type { Observable } from "rxjs"
+import type { PolkadotSigner, SS58String, Transaction } from "polkadot-api"
+
+export type ChainId = "dot" | "dotAh" | "wnd" | "wndAh" | "ksm" | "ksmAh"
+export type AssetId = "DOT" | "KSM" | "WND"
+
+export type TeleportAsset = (
+ from: PolkadotSigner,
+ amount: bigint,
+ to?: SS58String,
+) => Transaction
+
+export interface AssetInChain {
+ chain: ChainId
+ symbol: AssetId
+ watchFreeBalance: (from: SS58String) => Observable
+ teleport: Partial>
+}
diff --git a/src/api/wnd/ah.ts b/src/api/wnd/ah.ts
new file mode 100644
index 0000000..d8d2608
--- /dev/null
+++ b/src/api/wnd/ah.ts
@@ -0,0 +1,18 @@
+import { wndAssethub as descriptors } from "@polkadot-api/descriptors"
+import { wndAhClient } from "@/api/clients"
+import { AssetInChain } from "../types"
+import { fromAssetHubToRelay, watchAccoutFreeBalance } from "../common"
+
+const api = wndAhClient.getTypedApi(descriptors)
+
+const wnd: AssetInChain = {
+ chain: "wndAh",
+ symbol: "WND",
+ watchFreeBalance: watchAccoutFreeBalance(api),
+ teleport: {
+ wnd: (...args) =>
+ api.tx.PolkadotXcm.limited_teleport_assets(fromAssetHubToRelay(...args)),
+ },
+}
+
+export default [wnd]
diff --git a/src/api/wnd/index.ts b/src/api/wnd/index.ts
new file mode 100644
index 0000000..2b9dd85
--- /dev/null
+++ b/src/api/wnd/index.ts
@@ -0,0 +1,4 @@
+import relay from "./relay"
+import ah from "./ah"
+
+export default [...relay, ...ah]
diff --git a/src/api/wnd/relay.ts b/src/api/wnd/relay.ts
new file mode 100644
index 0000000..7ca8a01
--- /dev/null
+++ b/src/api/wnd/relay.ts
@@ -0,0 +1,18 @@
+import { wnd as descriptors } from "@polkadot-api/descriptors"
+import { wndClient } from "@/api/clients"
+import { AssetInChain } from "../types"
+import { fromRelayToAssetHub, watchAccoutFreeBalance } from "../common"
+
+const api = wndClient.getTypedApi(descriptors)
+
+const wnd: AssetInChain = {
+ chain: "wnd",
+ symbol: "WND",
+ watchFreeBalance: watchAccoutFreeBalance(api),
+ teleport: {
+ wndAh: (...args) =>
+ api.tx.XcmPallet.limited_teleport_assets(fromRelayToAssetHub(...args)),
+ },
+}
+
+export default [wnd]
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
new file mode 100644
index 0000000..0ba4277
--- /dev/null
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+ "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+ {
+ variants: {
+ variant: {
+ default: "bg-primary text-primary-foreground hover:bg-primary/90",
+ destructive:
+ "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+ outline:
+ "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+ secondary:
+ "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+ ghost: "hover:bg-accent hover:text-accent-foreground",
+ link: "text-primary underline-offset-4 hover:underline",
+ },
+ size: {
+ default: "h-10 px-4 py-2",
+ sm: "h-9 rounded-md px-3",
+ lg: "h-11 rounded-md px-8",
+ icon: "h-10 w-10",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ }
+)
+
+export interface ButtonProps
+ extends React.ButtonHTMLAttributes,
+ VariantProps {
+ asChild?: boolean
+}
+
+const Button = React.forwardRef(
+ ({ className, variant, size, asChild = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : "button"
+ return (
+
+ )
+ }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
new file mode 100644
index 0000000..afa13ec
--- /dev/null
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..777eaf1
--- /dev/null
+++ b/src/components/ui/dialog.tsx
@@ -0,0 +1,115 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+ {children}
+
+
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+ Dialog,
+ DialogPortal,
+ DialogOverlay,
+ DialogClose,
+ DialogTrigger,
+ DialogContent,
+ DialogHeader,
+ DialogFooter,
+ DialogTitle,
+ DialogDescription,
+}
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
new file mode 100644
index 0000000..677d05f
--- /dev/null
+++ b/src/components/ui/input.tsx
@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+ extends React.InputHTMLAttributes {}
+
+const Input = React.forwardRef(
+ ({ className, type, ...props }, ref) => {
+ return (
+
+ )
+ }
+)
+Input.displayName = "Input"
+
+export { Input }
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
new file mode 100644
index 0000000..683faa7
--- /dev/null
+++ b/src/components/ui/label.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+ "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef &
+ VariantProps
+>(({ className, ...props }, ref) => (
+
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
new file mode 100644
index 0000000..fe56d4d
--- /dev/null
+++ b/src/components/ui/select.tsx
@@ -0,0 +1,158 @@
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+ span]:line-clamp-1",
+ className
+ )}
+ {...props}
+ >
+ {children}
+
+
+
+
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+
+))
+SelectScrollDownButton.displayName =
+ SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, position = "popper", ...props }, ref) => (
+
+
+
+
+ {children}
+
+
+
+
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+
+
+
+
+ {children}
+
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+ Select,
+ SelectGroup,
+ SelectValue,
+ SelectTrigger,
+ SelectContent,
+ SelectLabel,
+ SelectItem,
+ SelectSeparator,
+ SelectScrollUpButton,
+ SelectScrollDownButton,
+}
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
new file mode 100644
index 0000000..63cf153
--- /dev/null
+++ b/src/components/ui/tabs.tsx
@@ -0,0 +1,44 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type DivProps = React.DetailedHTMLProps<
+ React.HTMLAttributes,
+ HTMLDivElement
+>
+/*
+
+ polkadot-js
+ talisman
+ subwallet
+
+ */
+
+export const TabsList: React.FC = ({ className, children }) => (
+
+ {children}
+
+)
+
+export const TabsTrigger: React.FC = ({
+ className,
+ children,
+ active,
+ ...props
+}) => (
+
+ {children}
+
+)
diff --git a/src/context/AccountProvider.tsx b/src/context/AccountProvider.tsx
index d619315..e600cc2 100644
--- a/src/context/AccountProvider.tsx
+++ b/src/context/AccountProvider.tsx
@@ -1,54 +1,100 @@
-import { type InjectedPolkadotAccount } from "polkadot-api/pjs-signer"
-import { PropsWithChildren, useEffect, useState } from "react"
-import { useSelectedExtension } from "./extensionCtx"
+import {
+ InjectedExtension,
+ InjectedPolkadotAccount,
+} from "polkadot-api/pjs-signer"
+import React, {
+ PropsWithChildren,
+ useEffect,
+ useState,
+ useSyncExternalStore,
+} from "react"
+import { useSelectedExtensions } from "./extensionCtx"
+import {
+ Select,
+ SelectContent,
+ SelectGroup,
+ SelectItem,
+ SelectLabel,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select"
import { SelectedAccountCtx } from "./accountCtx"
-export const AccountProvider: React.FC = ({ children }) => {
- const [accounts, setAccounts] = useState([])
- const [selectedAccount, setSelectedAccount] = useState<
- InjectedPolkadotAccount | undefined
- >()
- const extension = useSelectedExtension()
-
- useEffect(
- () =>
- extension.subscribe((accounts) => {
- setSelectedAccount((x) => x ?? accounts[0])
- setAccounts(accounts)
- }),
- [extension],
+export const Accounts: React.FC<{ extension: InjectedExtension }> = ({
+ extension,
+}) => {
+ const accounts = useSyncExternalStore(
+ extension.subscribe,
+ extension.getAccounts,
)
return (
-
-
-
- Selected Account:{" "}
- {selectedAccount
- ? selectedAccount.name || selectedAccount.address
- : "None"}
-
- {selectedAccount && (
-
- {children}
-
- )}
-
No extension provider detected
- if (!selectedExtension)
- return (
-
-
-
- {availableExtensions.map((extension) => (
- -
- {" "}
-
- ))}
-
-