(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"
+ />
+
+
+
+ )
+}
diff --git a/src/Teleport/index.ts b/src/Teleport/index.ts
new file mode 100644
index 0000000..8b68b25
--- /dev/null
+++ b/src/Teleport/index.ts
@@ -0,0 +1 @@
+export { Teleport } from "./Teleport"
diff --git a/src/Teleport/use-balance.ts b/src/Teleport/use-balance.ts
new file mode 100644
index 0000000..9e42a0b
--- /dev/null
+++ b/src/Teleport/use-balance.ts
@@ -0,0 +1,24 @@
+import { AssetId, ChainId, chains } from "@/api"
+import { useSelectedAccount } from "@/context"
+import { useEffect, useState } from "react"
+
+export 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/api/chains.ts b/src/api/chains.ts
new file mode 100644
index 0000000..bde5dd1
--- /dev/null
+++ b/src/api/chains.ts
@@ -0,0 +1,33 @@
+import dot from "./dot"
+import ksm from "./ksm"
+import wnd from "./wnd"
+import roc from "./roc"
+import { AssetId, AssetInChain, ChainId } from "./types"
+
+const assetsInChains = [...wnd, ...roc, ...dot, ...ksm]
+
+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,
+ ROC: 12,
+}
+
+export const CHAIN_NAMES: Record = {
+ dot: "Polkadot RelayChain",
+ dotAh: "Polkadot AssetHub",
+ ksm: "Kusama RelayChain",
+ ksmAh: "Kusama AssetHub",
+ wnd: "Westend RelayChain",
+ wndAh: "Westend AssetHub",
+ roc: "Rococo RelayChain",
+ rocAh: "Rococo 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..3144f19
--- /dev/null
+++ b/src/api/clients/index.ts
@@ -0,0 +1,11 @@
+export { dotClient } from "./dot"
+export { dotAhClient } from "./dotAh"
+
+export { ksmClient } from "./ksm"
+export { ksmAhClient } from "./ksmAh"
+
+export { wndClient } from "./wnd"
+export { wndAhClient } from "./wndAh"
+
+export { rocClient } from "./roc"
+export { rocAhClient } from "./rocAh"
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/clients/roc.ts b/src/api/clients/roc.ts
new file mode 100644
index 0000000..ac8d947
--- /dev/null
+++ b/src/api/clients/roc.ts
@@ -0,0 +1,9 @@
+import { createClient } from "polkadot-api"
+import { getSmProvider } from "polkadot-api/sm-provider"
+import { smoldot } from "./smoldot"
+
+export const rocRelayChain = import("polkadot-api/chains/rococo_v2_2").then(
+ ({ chainSpec }) => smoldot.addChain({ chainSpec }),
+)
+
+export const rocClient = createClient(getSmProvider(rocRelayChain))
diff --git a/src/api/clients/rocAh.ts b/src/api/clients/rocAh.ts
new file mode 100644
index 0000000..8ef305e
--- /dev/null
+++ b/src/api/clients/rocAh.ts
@@ -0,0 +1,31 @@
+import { createClient } from "polkadot-api"
+import { getSmProvider } from "polkadot-api/sm-provider"
+import { smoldot } from "./smoldot"
+import { rocRelayChain } from "./roc"
+
+const chainSpec = `{
+ "name": "Rococo Asset Hub",
+ "id": "asset-hub-rococo",
+ "chainType": "Live",
+ "bootNodes": [
+ "/dns/rococo-asset-hub-bootnode-0.polkadot.io/tcp/443/wss/p2p/12D3KooWRrZMndHAopzao34uGsN7srjS3gh9nAjTGKLSyJeU31Lg"
+ ],
+ "telemetryEndpoints": null,
+ "protocolId": null,
+ "properties": {
+ "tokenDecimals": 12,
+ "tokenSymbol": "ROC"
+ },
+ "relay_chain": "rococo_v2_2",
+ "para_id": 1000,
+ "codeSubstitutes": {},
+ "genesis": {
+ "stateRootHash": "0xad0224198565f04f9f7a6120231d310f9280669ec3395b898dd2bb69e1deb87d"
+ }
+}`
+
+const smoldotParaChain = rocRelayChain.then((relayChain) =>
+ smoldot.addChain({ chainSpec, potentialRelayChains: [relayChain] }),
+)
+
+export const rocAhClient = createClient(getSmProvider(smoldotParaChain))
diff --git a/src/api/clients/smoldot.ts b/src/api/clients/smoldot.ts
new file mode 100644
index 0000000..250e079
--- /dev/null
+++ b/src/api/clients/smoldot.ts
@@ -0,0 +1,78 @@
+import SmWorker from "polkadot-api/smoldot/worker?worker"
+import { startFromWorker } from "polkadot-api/smoldot/from-worker"
+
+/*
+interface QueueNode {
+ value: T
+ next?: QueueNode
+}
+
+export default class Queue {
+ private first?: QueueNode
+ private last?: QueueNode
+
+ constructor(...vals: T[]) {
+ if (vals.length === 0) return
+ vals.forEach((val) => this.push(val))
+ }
+
+ push(value: T) {
+ const nextLast: QueueNode = { value }
+ if (this.last === undefined) {
+ this.last = nextLast
+ this.first = this.last
+ } else {
+ this.last.next = nextLast
+ this.last = nextLast
+ }
+ }
+
+ pop() {
+ const result = this.first?.value
+ if (this.first) {
+ this.first = this.first.next
+ if (!this.first) {
+ this.last = undefined
+ }
+ }
+ return result
+ }
+
+ peek() {
+ return this.first?.value
+ }
+}
+
+const messages = new Queue()
+
+let tickDate = ""
+
+const setTickDate = () => {
+ tickDate = new Date().toISOString()
+ setTimeout(setTickDate, 0)
+}
+setTickDate()
+
+const getTickDate = () => tickDate
+*/
+
+export const smoldot = startFromWorker(
+ new SmWorker() /*, {
+ maxLogLevel: 9,
+ logCallback: (level: number, target: string, message: string) => {
+ messages.push(`${getTickDate()} (${level})${target}\n${message}\n\n`)
+ },
+}*/,
+)
+/*;(window as any).getLogs = () => {
+ console.log("touch the window now!")
+ setTimeout(() => {
+ console.log("putting the logs in place")
+ let data = ``
+ while (messages.peek() !== undefined) {
+ data += messages.pop()!
+ }
+ navigator.clipboard.writeText(data)
+ console.log("copied!")
+ }, 3_000)
+}*/
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
new file mode 100644
index 0000000..e375a84
--- /dev/null
+++ b/src/api/index.ts
@@ -0,0 +1,2 @@
+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..c9987c9
--- /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.Polkadot(),
+ 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/roc/ah.ts b/src/api/roc/ah.ts
new file mode 100644
index 0000000..b2b6f8a
--- /dev/null
+++ b/src/api/roc/ah.ts
@@ -0,0 +1,73 @@
+import {
+ DotXcmV3Junctions,
+ DotXcmV3MultiassetAssetId,
+ XcmV3Junction,
+ XcmV3JunctionNetworkId,
+ XcmV3MultiassetFungibility,
+ XcmVersionedMultiAssets,
+ rocAh as descriptors,
+} from "@polkadot-api/descriptors"
+import { rocAhClient } from "@/api/clients"
+import { AssetInChain } from "../types"
+import {
+ fromAssetHubToForeign,
+ fromAssetHubToRelay,
+ getNativeAsset,
+ watchAccoutFreeBalance,
+ watchForeingAssetAccoutFreeBalance,
+} from "../common"
+
+const api = rocAhClient.getTypedApi(descriptors)
+
+const chain = "rocAh"
+const roc: AssetInChain = {
+ chain,
+ symbol: "ROC",
+ watchFreeBalance: watchAccoutFreeBalance(api),
+ teleport: {
+ roc: (...args) =>
+ api.tx.PolkadotXcm.limited_teleport_assets(fromAssetHubToRelay(...args)),
+ wndAh: (from, amount, to) =>
+ api.tx.PolkadotXcm.limited_reserve_transfer_assets(
+ fromAssetHubToForeign(
+ XcmV3JunctionNetworkId.Westend(),
+ 1000,
+ getNativeAsset(1, amount),
+ from,
+ to,
+ ),
+ ),
+ },
+}
+
+const wndInRocAh: Parameters[0] = {
+ parents: 2,
+ interior: DotXcmV3Junctions.X1(
+ XcmV3Junction.GlobalConsensus(XcmV3JunctionNetworkId.Westend()),
+ ),
+}
+
+const wnd: AssetInChain = {
+ chain,
+ symbol: "WND",
+ watchFreeBalance: watchForeingAssetAccoutFreeBalance(api, wndInRocAh),
+ teleport: {
+ wndAh: (from, amount, to) =>
+ api.tx.PolkadotXcm.limited_reserve_transfer_assets(
+ fromAssetHubToForeign(
+ XcmV3JunctionNetworkId.Westend(),
+ 1000,
+ XcmVersionedMultiAssets.V3([
+ {
+ id: DotXcmV3MultiassetAssetId.Concrete(wndInRocAh),
+ fun: XcmV3MultiassetFungibility.Fungible(amount),
+ },
+ ]),
+ from,
+ to,
+ ),
+ ),
+ },
+}
+
+export default [wnd, roc]
diff --git a/src/api/roc/index.ts b/src/api/roc/index.ts
new file mode 100644
index 0000000..2b9dd85
--- /dev/null
+++ b/src/api/roc/index.ts
@@ -0,0 +1,4 @@
+import relay from "./relay"
+import ah from "./ah"
+
+export default [...relay, ...ah]
diff --git a/src/api/roc/relay.ts b/src/api/roc/relay.ts
new file mode 100644
index 0000000..0564c0c
--- /dev/null
+++ b/src/api/roc/relay.ts
@@ -0,0 +1,18 @@
+import { roc as descriptors } from "@polkadot-api/descriptors"
+import { rocClient } from "@/api/clients"
+import { AssetInChain } from "../types"
+import { fromRelayToAssetHub, watchAccoutFreeBalance } from "../common"
+
+const api = rocClient.getTypedApi(descriptors)
+
+const roc: AssetInChain = {
+ chain: "roc",
+ symbol: "ROC",
+ watchFreeBalance: watchAccoutFreeBalance(api),
+ teleport: {
+ rocAh: (...args) =>
+ api.tx.XcmPallet.limited_teleport_assets(fromRelayToAssetHub(...args)),
+ },
+}
+
+export default [roc]
diff --git a/src/api/types.ts b/src/api/types.ts
new file mode 100644
index 0000000..4cefc23
--- /dev/null
+++ b/src/api/types.ts
@@ -0,0 +1,26 @@
+import type { Observable } from "rxjs"
+import type { PolkadotSigner, SS58String, Transaction } from "polkadot-api"
+
+export type ChainId =
+ | "dot"
+ | "dotAh"
+ | "wnd"
+ | "wndAh"
+ | "ksm"
+ | "ksmAh"
+ | "roc"
+ | "rocAh"
+export type AssetId = "DOT" | "KSM" | "WND" | "ROC"
+
+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..84cc73d
--- /dev/null
+++ b/src/api/wnd/ah.ts
@@ -0,0 +1,72 @@
+import {
+ DotXcmV3Junctions,
+ DotXcmV3MultiassetAssetId,
+ XcmV3Junction,
+ XcmV3JunctionNetworkId,
+ XcmV3MultiassetFungibility,
+ XcmVersionedMultiAssets,
+ wndAssethub as descriptors,
+} from "@polkadot-api/descriptors"
+import { wndAhClient } from "@/api/clients"
+import { AssetInChain } from "../types"
+import {
+ fromAssetHubToForeign,
+ fromAssetHubToRelay,
+ getNativeAsset,
+ watchAccoutFreeBalance,
+ watchForeingAssetAccoutFreeBalance,
+} 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)),
+ rocAh: (from, amount, to) =>
+ api.tx.PolkadotXcm.limited_reserve_transfer_assets(
+ fromAssetHubToForeign(
+ XcmV3JunctionNetworkId.Rococo(),
+ 1000,
+ getNativeAsset(1, amount),
+ from,
+ to,
+ ),
+ ),
+ },
+}
+
+const rocInWndAh: Parameters[0] = {
+ parents: 2,
+ interior: DotXcmV3Junctions.X1(
+ XcmV3Junction.GlobalConsensus(XcmV3JunctionNetworkId.Rococo()),
+ ),
+}
+
+const roc: AssetInChain = {
+ chain: "wndAh",
+ symbol: "ROC",
+ watchFreeBalance: watchForeingAssetAccoutFreeBalance(api, rocInWndAh),
+ teleport: {
+ rocAh: (from, amount, to) =>
+ api.tx.PolkadotXcm.limited_reserve_transfer_assets(
+ fromAssetHubToForeign(
+ XcmV3JunctionNetworkId.Rococo(),
+ 1000,
+ XcmVersionedMultiAssets.V3([
+ {
+ id: DotXcmV3MultiassetAssetId.Concrete(rocInWndAh),
+ fun: XcmV3MultiassetFungibility.Fungible(amount),
+ },
+ ]),
+ from,
+ to,
+ ),
+ ),
+ },
+}
+
+export default [wnd, roc]
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
new file mode 100644
index 0000000..e600cc2
--- /dev/null
+++ b/src/context/AccountProvider.tsx
@@ -0,0 +1,100 @@
+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 Accounts: React.FC<{ extension: InjectedExtension }> = ({
+ extension,
+}) => {
+ const accounts = useSyncExternalStore(
+ extension.subscribe,
+ extension.getAccounts,
+ )
+
+ return (
+
+ {extension.name}
+ {accounts.map((account) => (
+
+ {account.name ?? account.address}
+
+ ))}
+
+ )
+}
+
+const SignerCtx: React.FC> = ({
+ account,
+ children,
+}) => {
+ const extensions = useSelectedExtensions()
+ const [injectedPolkadotAccount, setInjectedPolkadotAccount] =
+ useState(null)
+
+ useEffect(() => {
+ if (!account) {
+ setInjectedPolkadotAccount(null)
+ return
+ }
+
+ const separator = account.indexOf("-")
+ const address = account.slice(0, separator)
+ const extensionName = account.slice(separator + 1)
+
+ setInjectedPolkadotAccount(
+ extensions
+ .find((x) => x.name === extensionName)
+ ?.getAccounts()
+ .find((account) => account.address === address) ?? null,
+ )
+ }, [extensions, account])
+
+ return (
+ injectedPolkadotAccount && (
+
+ {children}
+
+ )
+ )
+}
+
+export const AccountProvider: React.FC = ({ children }) => {
+ const [selectedAccount, setSelectedAcount] = useState(null)
+ const extensions = useSelectedExtensions()
+
+ return (
+ <>
+
+ {children}
+
+ )
+}
diff --git a/src/context/ExtensionProvider.tsx b/src/context/ExtensionProvider.tsx
new file mode 100644
index 0000000..7f7e145
--- /dev/null
+++ b/src/context/ExtensionProvider.tsx
@@ -0,0 +1,94 @@
+import {
+ InjectedExtension,
+ connectInjectedExtension,
+} from "polkadot-api/pjs-signer"
+import { PropsWithChildren, useSyncExternalStore } from "react"
+import { extensionCtx, useAvailableExtensions } from "./extensionCtx"
+import { TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Label } from "@/components/ui/label"
+
+const getExtensionsStore = () => {
+ let connectedExtensions = new Map()
+ const getSnapshot = () => connectedExtensions
+
+ const listeners = new Set<() => void>()
+ const update = () => {
+ connectedExtensions = new Map(connectedExtensions)
+ listeners.forEach((cb) => {
+ cb()
+ })
+ }
+ const subscribe = (cb: () => void) => {
+ listeners.add(cb)
+ return () => {
+ listeners.delete(cb)
+ }
+ }
+
+ let isRunning = false
+ const onToggleExtension = (name: string) => {
+ if (isRunning) return
+
+ if (connectedExtensions.has(name)) {
+ connectedExtensions.delete(name)
+ return update()
+ }
+
+ isRunning = true
+ connectInjectedExtension(name)
+ .then(
+ (extension) => {
+ connectedExtensions.set(name, extension)
+ update()
+ },
+ () => {},
+ )
+ .finally(() => {
+ isRunning = false
+ })
+ }
+
+ return {
+ subscribe,
+ getSnapshot,
+ onToggleExtension,
+ }
+}
+
+const extensionsStore = getExtensionsStore()
+
+export const ExtensionProvider: React.FC = ({
+ children,
+}) => {
+ const availableExtensions = useAvailableExtensions()
+ const selectedExtensions = useSyncExternalStore(
+ extensionsStore.subscribe,
+ extensionsStore.getSnapshot,
+ )
+
+ if (availableExtensions.length === 0)
+ return No extension provider detected
+
+ return (
+ <>
+
+
+ {availableExtensions.map((extensionName) => (
+ {
+ extensionsStore.onToggleExtension(extensionName)
+ }}
+ active={selectedExtensions.has(extensionName)}
+ key={extensionName}
+ >
+ {extensionName}
+
+ ))}
+
+
+ {selectedExtensions.size ? children : null}
+
+
+ )
+}
diff --git a/src/context/accountCtx.tsx b/src/context/accountCtx.tsx
new file mode 100644
index 0000000..015ef5a
--- /dev/null
+++ b/src/context/accountCtx.tsx
@@ -0,0 +1,7 @@
+import { type InjectedPolkadotAccount } from "polkadot-api/pjs-signer"
+import { createContext, useContext } from "react"
+
+export const SelectedAccountCtx = createContext(
+ null,
+)
+export const useSelectedAccount = () => useContext(SelectedAccountCtx)!
diff --git a/src/context/extensionCtx.tsx b/src/context/extensionCtx.tsx
new file mode 100644
index 0000000..a13e4c8
--- /dev/null
+++ b/src/context/extensionCtx.tsx
@@ -0,0 +1,30 @@
+import {
+ InjectedExtension,
+ getInjectedExtensions,
+} from "polkadot-api/pjs-signer"
+import { createContext, useContext, useEffect, useMemo, useState } from "react"
+
+const getJoinedInjectedExtensions = () => getInjectedExtensions()?.join(",")
+
+export const useAvailableExtensions = (): string[] => {
+ const [extensions, setExtensions] = useState(getJoinedInjectedExtensions)
+
+ useEffect(() => {
+ let token: any
+ const updateExtensions = () => {
+ const jointedExtensions = getJoinedInjectedExtensions()
+ setExtensions(jointedExtensions)
+ token = setTimeout(updateExtensions, jointedExtensions ? 2_000 : 100)
+ }
+ updateExtensions()
+
+ return () => {
+ clearTimeout(token)
+ }
+ }, [])
+
+ return useMemo(() => extensions?.split(",") ?? [], [extensions])
+}
+
+export const extensionCtx = createContext([])
+export const useSelectedExtensions = () => useContext(extensionCtx)
diff --git a/src/context/index.ts b/src/context/index.ts
new file mode 100644
index 0000000..37c765d
--- /dev/null
+++ b/src/context/index.ts
@@ -0,0 +1,2 @@
+export { useSelectedExtensions, useAvailableExtensions } from "./extensionCtx"
+export { useSelectedAccount } from "./accountCtx"
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..8b663d5
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,76 @@
+@tailwind base;
+ @tailwind components;
+ @tailwind utilities;
+
+ @layer base {
+ :root {
+ --background: 0 0% 100%;
+ --foreground: 0 0% 3.9%;
+
+ --card: 0 0% 100%;
+ --card-foreground: 0 0% 3.9%;
+
+ --popover: 0 0% 100%;
+ --popover-foreground: 0 0% 3.9%;
+
+ --primary: 0 0% 9%;
+ --primary-foreground: 0 0% 98%;
+
+ --secondary: 0 0% 96.1%;
+ --secondary-foreground: 0 0% 9%;
+
+ --muted: 0 0% 96.1%;
+ --muted-foreground: 0 0% 45.1%;
+
+ --accent: 0 0% 96.1%;
+ --accent-foreground: 0 0% 9%;
+
+ --destructive: 0 84.2% 60.2%;
+ --destructive-foreground: 0 0% 98%;
+
+ --border: 0 0% 89.8%;
+ --input: 0 0% 89.8%;
+ --ring: 0 0% 3.9%;
+
+ --radius: 0.5rem;
+ }
+
+ .dark {
+ --background: 0 0% 3.9%;
+ --foreground: 0 0% 98%;
+
+ --card: 0 0% 3.9%;
+ --card-foreground: 0 0% 98%;
+
+ --popover: 0 0% 3.9%;
+ --popover-foreground: 0 0% 98%;
+
+ --primary: 0 0% 98%;
+ --primary-foreground: 0 0% 9%;
+
+ --secondary: 0 0% 14.9%;
+ --secondary-foreground: 0 0% 98%;
+
+ --muted: 0 0% 14.9%;
+ --muted-foreground: 0 0% 63.9%;
+
+ --accent: 0 0% 14.9%;
+ --accent-foreground: 0 0% 98%;
+
+ --destructive: 0 62.8% 30.6%;
+ --destructive-foreground: 0 0% 98%;
+
+ --border: 0 0% 14.9%;
+ --input: 0 0% 14.9%;
+ --ring: 0 0% 83.1%;
+ }
+ }
+
+ @layer base {
+ * {
+ @apply border-border;
+ }
+ body {
+ @apply bg-background text-foreground;
+ }
+ }
\ No newline at end of file
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 0000000..9dcaeaa
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,91 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
+
+export const decimalSeparatorDisplay = "."
+export const decimalSeparatorsInput = [".", ","]
+export const decimalSeparatorRegex = ",|."
+
+export const getDecimalSeparator = (inputString: string) => {
+ const parts = new RegExp(
+ `^(-)?(\\d*)(${decimalSeparatorRegex})?((\\d+))?$`,
+ ).exec(inputString)
+
+ return parts ? parts[3] : null
+}
+
+export type FormatCurrencyOptions = {
+ nDecimals: number
+ padToDecimals: boolean
+ decimalSeparator: string
+}
+
+const defaultOptions: FormatCurrencyOptions = {
+ nDecimals: Infinity,
+ padToDecimals: true,
+ decimalSeparator: decimalSeparatorDisplay,
+}
+
+export const formatCurrency = (
+ value: bigint | null,
+ precision: number,
+ options: Partial = {},
+): string => {
+ const { nDecimals, padToDecimals, decimalSeparator } = {
+ ...defaultOptions,
+ ...options,
+ }
+ if (value === null) return ""
+ const precisionMultiplier = 10n ** BigInt(precision)
+ if (nDecimals < precision) {
+ value = value / 10n ** BigInt(precision - (nDecimals + 1))
+ const rounded = Math.abs(Number(value % 10n)) > 4
+ const rounding = rounded ? (value < 0 ? -1n : 1n) : 0n
+ value = value / 10n + rounding
+ value *= 10n ** BigInt(precision - nDecimals)
+ }
+ const isNegative = value < 0n
+ const absValue = isNegative ? value * -1n : value
+ let intPartStr = (absValue / precisionMultiplier).toString()
+ if (isNegative) intPartStr = "-" + intPartStr
+ const decimalPart = absValue % precisionMultiplier
+
+ if (
+ nDecimals === 0 ||
+ (nDecimals === Infinity && decimalPart === 0n) ||
+ (padToDecimals === false && decimalPart === 0n)
+ )
+ return intPartStr
+
+ let newDecimalPart = decimalPart
+ .toString()
+ .padStart(precision, "0")
+ .replace(/00*$/, "")
+
+ if (nDecimals !== Infinity && padToDecimals === true) {
+ newDecimalPart = newDecimalPart.padEnd(nDecimals, "0")
+ }
+
+ return intPartStr + decimalSeparator + newDecimalPart
+}
+
+type BigNumber = {
+ value: bigint
+ precision: bigint
+}
+
+export const divideBigInt = (
+ numerator: BigNumber,
+ denominator: BigNumber,
+ targetPrecision?: bigint,
+) => {
+ const precision = targetPrecision ?? numerator.precision
+ return (
+ (10n ** precision * (numerator.value * 10n ** denominator.precision)) /
+ denominator.value /
+ 10n ** numerator.precision
+ )
+}
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..0f28bdc
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,10 @@
+import React from "react"
+import ReactDOM from "react-dom/client"
+import App from "./App.tsx"
+import "./index.css"
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+
+
+ ,
+)
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..7cb7e37
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,77 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ darkMode: ["class"],
+ content: [
+ './pages/**/*.{ts,tsx}',
+ './components/**/*.{ts,tsx}',
+ './app/**/*.{ts,tsx}',
+ './src/**/*.{ts,tsx}',
+ ],
+ prefix: "",
+ theme: {
+ container: {
+ center: true,
+ padding: "2rem",
+ screens: {
+ "2xl": "1400px",
+ },
+ },
+ extend: {
+ colors: {
+ border: "hsl(var(--border))",
+ input: "hsl(var(--input))",
+ ring: "hsl(var(--ring))",
+ background: "hsl(var(--background))",
+ foreground: "hsl(var(--foreground))",
+ primary: {
+ DEFAULT: "hsl(var(--primary))",
+ foreground: "hsl(var(--primary-foreground))",
+ },
+ secondary: {
+ DEFAULT: "hsl(var(--secondary))",
+ foreground: "hsl(var(--secondary-foreground))",
+ },
+ destructive: {
+ DEFAULT: "hsl(var(--destructive))",
+ foreground: "hsl(var(--destructive-foreground))",
+ },
+ muted: {
+ DEFAULT: "hsl(var(--muted))",
+ foreground: "hsl(var(--muted-foreground))",
+ },
+ accent: {
+ DEFAULT: "hsl(var(--accent))",
+ foreground: "hsl(var(--accent-foreground))",
+ },
+ popover: {
+ DEFAULT: "hsl(var(--popover))",
+ foreground: "hsl(var(--popover-foreground))",
+ },
+ card: {
+ DEFAULT: "hsl(var(--card))",
+ foreground: "hsl(var(--card-foreground))",
+ },
+ },
+ borderRadius: {
+ lg: "var(--radius)",
+ md: "calc(var(--radius) - 2px)",
+ sm: "calc(var(--radius) - 4px)",
+ },
+ keyframes: {
+ "accordion-down": {
+ from: { height: "0" },
+ to: { height: "var(--radix-accordion-content-height)" },
+ },
+ "accordion-up": {
+ from: { height: "var(--radix-accordion-content-height)" },
+ to: { height: "0" },
+ },
+ },
+ animation: {
+ "accordion-down": "accordion-down 0.2s ease-out",
+ "accordion-up": "accordion-up 0.2s ease-out",
+ },
+ },
+ },
+ plugins: [require("tailwindcss-animate")],
+}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..139580b
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,29 @@
+{
+ "compilerOptions": {
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["./src/*"]
+ },
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src"],
+ "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000..97ede7e
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,11 @@
+{
+ "compilerOptions": {
+ "composite": true,
+ "skipLibCheck": true,
+ "module": "ESNext",
+ "moduleResolution": "bundler",
+ "allowSyntheticDefaultImports": true,
+ "strict": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..5790e82
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,12 @@
+import path from "path"
+import react from "@vitejs/plugin-react"
+import { defineConfig } from "vite"
+
+export default defineConfig({
+ plugins: [react()],
+ resolve: {
+ alias: {
+ "@": path.resolve(__dirname, "./src"),
+ },
+ },
+})
diff --git a/wnd.scale b/wnd.scale
new file mode 100644
index 0000000..21370e9
Binary files /dev/null and b/wnd.scale differ
diff --git a/wndAssethub.scale b/wndAssethub.scale
new file mode 100644
index 0000000..923da6c
Binary files /dev/null and b/wndAssethub.scale differ