diff --git a/.gitignore b/.gitignore
index b8767f530a..104664bbd1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -76,3 +76,4 @@ db.sqlite
 db.sqlite3*
 
 move/*/build
+.tsup
diff --git a/app/src/lib/components/connect/connection.svelte b/app/src/lib/components/connect/connection.svelte
index aae6036396..6db181fb05 100644
--- a/app/src/lib/components/connect/connection.svelte
+++ b/app/src/lib/components/connect/connection.svelte
@@ -42,8 +42,7 @@ const onCopyClick = () => [toggleCopy(), setTimeout(() => toggleCopy(), 1_500)]
 let sanitizeWalletInformation =
   chainWalletsInformation.filter(
     (predicate, index, array) =>
-      array.findIndex(t => t.name.toLowerCase().startsWith(predicate.name.toLowerCase())) ===
-      index,
+      array.findIndex(t => t.name.toLowerCase().startsWith(predicate.name.toLowerCase())) === index
   ) ?? chainWalletsInformation
 
 $: walletListToRender =
diff --git a/docs/docs.nix b/docs/docs.nix
index 452a7fda3c..e45e0354bc 100644
--- a/docs/docs.nix
+++ b/docs/docs.nix
@@ -9,7 +9,7 @@
     {
       packages = {
         docs = mkCi false (unstablePkgs.buildNpmPackage {
-          npmDepsHash = "sha256-3Ip3T+Kfc5X2gZ/KzgLWTtfnQf7lCK+CsoTKwAB9ynw=";
+          npmDepsHash = "sha256-nnugNuwQybGENX7QAna0oZgtenUGsHaxKkIMxl/HrF8=";
           src = ./.;
           srcs = [ ./. ./../evm/. ./../networks/genesis/. ./../versions/. ];
           sourceRoot = "docs";
diff --git a/docs/package-lock.json b/docs/package-lock.json
index 743467a52d..6d79d21958 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -17,7 +17,7 @@
         "@astrojs/vue": "^4.5.0",
         "@expressive-code/plugin-collapsible-sections": "^0.36.1",
         "@expressive-code/plugin-line-numbers": "^0.36.1",
-        "@unionlabs/client": "^0.0.17",
+        "@unionlabs/client": "^0.0.18",
         "@webcontainer/api": "^1.3.0-internal.7",
         "@xterm/addon-clipboard": "^0.1.0",
         "@xterm/addon-fit": "^0.10.0",
@@ -2628,9 +2628,9 @@
       "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ=="
     },
     "node_modules/@unionlabs/client": {
-      "version": "0.0.17",
-      "resolved": "https://registry.npmjs.org/@unionlabs/client/-/client-0.0.17.tgz",
-      "integrity": "sha512-NU2i/brS+dc3xeKYydkS7XvEOZP1ftqU9W/HKDDchlL4L+GwzxFphinb2tG3w7dmcUHmFKkWGyy8MX8iDIaKNg==",
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/@unionlabs/client/-/client-0.0.18.tgz",
+      "integrity": "sha512-9PsMf4LyqFFU0YE+B1gVpS4MXRT5I+K6R7rujtL8hfXRWoxqyeCNx1+YUqPDU0UdvTgvfkhMrFd3H8Xj8areUQ==",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
diff --git a/docs/package.json b/docs/package.json
index da4646b490..af4d19da2d 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -21,7 +21,7 @@
     "@astrojs/vue": "^4.5.0",
     "@expressive-code/plugin-collapsible-sections": "^0.36.1",
     "@expressive-code/plugin-line-numbers": "^0.36.1",
-    "@unionlabs/client": "^0.0.17",
+    "@unionlabs/client": "^0.0.18",
     "@webcontainer/api": "^1.3.0-internal.7",
     "@xterm/addon-clipboard": "^0.1.0",
     "@xterm/addon-fit": "^0.10.0",
diff --git a/docs/src/components/Terminal.astro b/docs/src/components/Terminal.astro
index d4d8000491..5f3e7b10e2 100644
--- a/docs/src/components/Terminal.astro
+++ b/docs/src/components/Terminal.astro
@@ -1,9 +1,20 @@
 ---
 import "@xterm/xterm/css/xterm.css"
 
-interface Props {}
+interface Props {
+  webcontainerFiles?: string
+}
+
+const { webcontainerFiles } = Astro.props
 ---
 
+<pre
+  style="display: none;"
+  id="webcontainer-files"
+  data-webcontainer-files="">
+  {webcontainerFiles}
+</pre>
+
 <textarea
   required={true}
   readonly={false}
@@ -24,99 +35,30 @@ interface Props {}
 <iframe class="hidden" allow="cross-origin-isolated"></iframe>
 
 <script>
-  import dedent from 'ts-dedent'
-  // import { highlightCode } from '#/lib/highlight-code.ts'
+  import {
+    WebContainer,
+    type FileNode,
+    type FileSystemTree,
+    type WebContainerProcess,
+  } from '@webcontainer/api'
   import { initiateTerminal, type Terminal } from '#/lib/xterm/terminal'
-  import { WebContainer, type FileSystemTree, type WebContainerProcess } from '@webcontainer/api'
-
-  const files = {
-    'mod.ts': {
-      file: {
-        contents: dedent(/* ts */ `
-          import { http } from 'viem'
-          import { arbitrumSepolia } from 'viem/chains'
-          import { privateKeyToAccount } from 'viem/accounts'
-          import { createUnionClient } from '@unionlabs/client'
-
-          const account = privateKeyToAccount(\`0x$\{process.env.PRIVATE_KEY}\`)
-
-          const client = createUnionClient({
-            account,
-            chainId: '421614',
-            transport: http('https://sepolia-rollup.arbitrum.io/rpc'),
-          })
-
-          const gasResponse = await client.simulateTransaction({
-            amount: 1n,
-            autoApprove: true,
-            destinationChainId: 'stride-internal-1',
-            denomAddress: '0xb1d4538b4571d411f07960ef2838ce337fe1e80e', // LINK
-            receiver: 'stride14qemq0vw6y3gc3u3e0aty2e764u4gs5l66hpe3'
-          })
-
-          if (gasResponse.isErr()) {
-            console.error(gasResponse.error)
-            process.exit(1)
-          }
-
-          console.info(\`gas: \${gasResponse.value\}\`)
-`).trim(),
-      },
-    },
-    '.npmrc': {
-      file: {
-        contents: dedent(`
-          engine-strict=true
-          npm_config_yes=true
-          auto-install-peers=true
-          enable-pre-post-scripts=true
-          strict-peer-dependencies=false
-          node-options="--no-warnings"
-        `).trim(),
-      },
-    },
-    'package.json': {
-      file: {
-        contents: dedent(/* json */ `
-          {
-            "name": "demo",
-            "type": "module",
-            "dependencies": {
-              "tsx": "latest",
-              "viem": "latest",
-              "@unionlabs/client": "latest"
-            }
-          }
-        `).trim(),
-      },
-    },
-  } satisfies FileSystemTree
 
-  type FileName = keyof typeof files
-
-  const writeToWebContainerFile = async ({
-    path,
-    content,
-  }: {
-    path: FileName
-    content: string
-  }) => {
+  const writeToWebContainerFile = async ({ path, content }: { path: string; content: string }) => {
     await webcontainerInstance.fs.writeFile(path, content)
   }
 
   async function installDependencies() {
     // Install dependencies
     const promises = [
-      webcontainerInstance.spawn('npm', ['install', '--global', 'bun']).catch(() => {}),
-      webcontainerInstance.spawn('npm', ['install']).catch(() => {}),
+      webcontainerInstance.spawn('npm', ['install']).catch(error => {
+        console.error('npm install failed', error)
+      }),
     ] as Array<Promise<WebContainerProcess>>
     const installProcesses = await Promise.all(promises)
     return installProcesses.map(installProcess => {
       installProcess.output.pipeTo(
         new WritableStream({
-          write: data => {
-            console.log(data)
-          },
+          write: (chunk, _controller) => console.info(chunk),
         }),
       )
       // Wait for install command to exit
@@ -131,16 +73,12 @@ interface Props {}
     })
     shellProcess.output.pipeTo(
       new WritableStream({
-        write: data => {
-          terminal.write(data)
-        },
+        write: (chunk, _controller) => terminal.write(chunk),
       }),
     )
 
     const input = shellProcess.input.getWriter()
-    terminal.onData(data => {
-      input.write(data)
-    })
+    terminal.onData(data => input.write(data))
 
     return shellProcess
   }
@@ -150,7 +88,12 @@ interface Props {}
   window.addEventListener('load', async () => {
     if (!textareaElement || !terminalElement || !iframeElement) return
 
-    textareaElement.value = files['mod.ts'].file.contents
+    let files: FileSystemTree = {}
+    if (webcontainerFilesElement && webcontainerFilesElement.textContent) {
+      files = JSON.parse(webcontainerFilesElement.textContent) as FileSystemTree
+    }
+
+    textareaElement.value = (files['mod.ts'] as FileNode).file.contents.toString()
     textareaElement.addEventListener('input', event => {
       if (!event.target?.value) return
       writeToWebContainerFile({ path: 'mod.ts', content: event.target.value })
@@ -168,10 +111,6 @@ interface Props {}
 
     await webcontainerInstance.mount(files)
 
-    // webcontainerInstance.on('server-ready', (port, url) => {
-    //   iframeElement.src = url
-    // })
-
     const shellProcess = await startShell(terminal)
     await installDependencies()
     window.addEventListener('resize', () => {
@@ -179,10 +118,6 @@ interface Props {}
       shellProcess.resize({ cols: terminal.cols, rows: terminal.rows })
     })
 
-    // const code = textareaElement.value
-    // const highlightedCode = await highlightCode({ code })
-    // textareaElement.insertAdjacentHTML("afterend", highlightedCode)
-
     const xtermViewport = document.querySelector('div.xterm-viewport')
     if (!xtermViewport) return
   })
@@ -190,12 +125,14 @@ interface Props {}
   const iframeElement = document.querySelector('iframe')
   const textareaElement = document.querySelector('textarea')
   const terminalElement = document.querySelector('article#terminal')
+  const webcontainerFilesElement = document.querySelector('pre#webcontainer-files')
 </script>
 
 <style is:inline>
   .sl-markdown-content {
     margin-top: 0.3rem;
   }
+
   .xterm {
     --at-apply: h-full;
     --at-apply: p-3;
@@ -203,7 +140,8 @@ interface Props {}
   .xterm .xterm-viewport {
     --at-apply: transition-theme;
   }
-  canvas {
+  canvas,
+  .xterm-decoration-container {
     margin-top: 0 !important;
   }
   .xterm,
@@ -233,7 +171,7 @@ interface Props {}
   textarea {
     width: 100%;
     resize: none;
-    height: 35rem;
+    height: 48rem;
     color: white;
     padding: 0.5rem 1rem;
     margin-bottom: 10px;
diff --git a/docs/src/content/docs/integrations/api/typescript-sdk/_data/demo-files.ts b/docs/src/content/docs/integrations/api/typescript-sdk/_data/demo-files.ts
new file mode 100644
index 0000000000..fbea4ee5a6
--- /dev/null
+++ b/docs/src/content/docs/integrations/api/typescript-sdk/_data/demo-files.ts
@@ -0,0 +1,87 @@
+import { dedent } from "ts-dedent"
+import type { FileSystemTree } from "@webcontainer/api"
+
+export const demoFiles = {
+  "mod.ts": {
+    file: {
+      contents: dedent(/* ts */ `
+import { http } from "viem"
+import { arbitrumSepolia } from "viem/chains"
+import { privateKeyToAccount } from "viem/accounts"
+import { createUnionClient, type TransferAssetsParameters } from "@unionlabs/client"
+
+const account = privateKeyToAccount(\`0x$\{process.env["PRIVATE_KEY"]\}\`)
+
+console.info(\`Account address: $\{JSON.stringify(account, undefined, 2)\}\`)
+
+const client = createUnionClient({
+  account,
+  chainId: \`$\{arbitrumSepolia.id\}\`,
+  transport: http("https://sepolia-rollup.arbitrum.io/rpc")
+})
+
+const payload = {
+  amount: 1n,
+  autoApprove: false,
+  destinationChainId: "stride-internal-1",
+  receiver: "stride14qemq0vw6y3gc3u3e0aty2e764u4gs5l66hpe3",
+  denomAddress: "0xb1d4538b4571d411f07960ef2838ce337fe1e80e" // LINK
+} satisfies TransferAssetsParameters<\`$\{typeof arbitrumSepolia.id\}\`>
+
+const gasResponse = await client.simulateTransaction(payload)
+
+if (gasResponse.isErr()) {
+  console.error(\`Gas estimation error: $\{gasResponse.error\}\`)
+  process.exit(1)
+}
+
+console.info(\`Gas estimation: $\{gasResponse.value\}\`)
+
+const approval = await client.approveTransaction(payload)
+
+if (approval.isErr()) {
+  console.error(\`Approval error: $\{approval.error\}\`)
+  process.exit(1)
+}
+
+console.info(\`Approval hash: $\{approval.value\}\`)
+
+const transfer = await client.transferAsset(payload)
+
+if (transfer.isErr()) {
+  console.error(\`Transfer error: $\{transfer.error\}\`)
+  process.exit(1)
+}
+
+console.info(\`Transfer hash: $\{transfer.value\}\`)
+        `).trim()
+    }
+  },
+  ".npmrc": {
+    file: {
+      contents: dedent(`
+          engine-strict=true
+          npm_config_yes=true
+          auto-install-peers=true
+          enable-pre-post-scripts=true
+          strict-peer-dependencies=false
+          node-options="--no-warnings"
+        `).trim()
+    }
+  },
+  "package.json": {
+    file: {
+      contents: dedent(/* json */ `
+          {
+            "name": "demo",
+            "type": "module",
+            "dependencies": {
+              "tsx": "latest",
+              "viem": "latest",
+              "@unionlabs/client": "latest"
+            }
+          }
+        `).trim()
+    }
+  }
+} satisfies FileSystemTree
diff --git a/docs/src/content/docs/integrations/api/typescript-sdk.mdx b/docs/src/content/docs/integrations/api/typescript-sdk/index.mdx
similarity index 83%
rename from docs/src/content/docs/integrations/api/typescript-sdk.mdx
rename to docs/src/content/docs/integrations/api/typescript-sdk/index.mdx
index df3313d545..23405bd9f9 100644
--- a/docs/src/content/docs/integrations/api/typescript-sdk.mdx
+++ b/docs/src/content/docs/integrations/api/typescript-sdk/index.mdx
@@ -7,20 +7,21 @@ sidebar:
     variant: default
 ---
 import Code from '#/components/Code.astro'
+import { demoFiles } from './_data/demo-files.ts'
 import Terminal from '#/components/Terminal.astro'
 import { PackageManagers } from 'starlight-package-managers'
 import { Tabs, TabItem } from '@astrojs/starlight/components'
 
 <PackageManagers
+  type="add"
   frame="none"
   pkg="@unionlabs/client"
-  pkgManagers={['npm', 'bun', 'pnpm', 'yarn']}
+  pkgManagers={['pnpm','npm', 'bun', 'yarn']}
 />
 
-<Terminal />
+## Quickstart
 
-{/* 
-```ts
+{/* ```ts title="transfer.ts"
 import { http } from "viem"
 import { privateKeyToAccount } from "viem/accounts"
 import { createUnionClient } from "@unionlabs/client"
@@ -32,13 +33,14 @@ const client = createUnionClient({
   // ^ private key if running from cli,
   // else pass `connectorClient.account` from `wagmi` config
 })
-```
+``` */}
 
+<Terminal
+  webcontainerFiles={JSON.stringify(demoFiles)}
+/>
 
-## Quickstart
-
-In this example, we'll transfer 1 `HONEY` from _**Berachain bArtio**_ (`80084`) to _**Stride Testnet**_ (`stride-internal-1`).
-
+{/* In this example, we'll transfer 1 `HONEY` from _**Berachain bArtio**_ (`80084`) to _**Stride Testnet**_ (`stride-internal-1`). */}
+{/* 
 ##### Initialize the client
 
 <Code
diff --git a/docs/src/styles/starlight.css b/docs/src/styles/starlight.css
index b15d27bfb0..606bb08a27 100644
--- a/docs/src/styles/starlight.css
+++ b/docs/src/styles/starlight.css
@@ -1,6 +1,8 @@
 :root {
   --sl-text-h1: 3.5rem;
   --dark-blue: #00262f;
+  /* --sl-sidebar-width: 15rem; */
+  /* --sl-content-width: 80%; */
 }
 
 :root[data-theme="light"] {
diff --git a/typescript-sdk/.gitignore b/typescript-sdk/.gitignore
index 72f1176ac1..1679108b00 100644
--- a/typescript-sdk/.gitignore
+++ b/typescript-sdk/.gitignore
@@ -175,3 +175,4 @@ dist
 .DS_Store
 .env
 .editorconfig
+.tsup
diff --git a/typescript-sdk/README.md b/typescript-sdk/README.md
index 76eb6f59b7..d820529504 100644
--- a/typescript-sdk/README.md
+++ b/typescript-sdk/README.md
@@ -50,9 +50,10 @@ const client = createUnionClient({
 
 const transfer = await client.transferAsset({
   amount: 1n,
+  autoApprove: true,
   denomAddress: "strd",
   destinationChainId: "11155111",
-  recipient: "0x8478B37E983F520dBCB5d7D3aAD8276B82631aBd",
+  receiver: "0x8478B37E983F520dBCB5d7D3aAD8276B82631aBd",
 })
 
 if (transfer.isErr()) {
diff --git a/typescript-sdk/jsr.json b/typescript-sdk/jsr.json
index 2aedd82834..537423142f 100644
--- a/typescript-sdk/jsr.json
+++ b/typescript-sdk/jsr.json
@@ -1,12 +1,17 @@
 {
   "$schema": "https://jsr.io/schema/config-file.v1.json",
   "name": "@union/client",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "license": "MIT",
   "exports": {
     ".": "./src/mod.ts"
   },
   "publish": {
-    "include": ["./src/**/*.ts", "./jsr.json", "./README.md", "./LICENSE"]
+    "include": [
+      "./src/**/*.ts",
+      "./jsr.json",
+      "./README.md",
+      "./LICENSE"
+    ]
   }
 }
diff --git a/typescript-sdk/package.json b/typescript-sdk/package.json
index 22bf8a2898..42cc619b7b 100644
--- a/typescript-sdk/package.json
+++ b/typescript-sdk/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@unionlabs/client",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "homepage": "https://jsr.io/@union/client",
   "description": "Union Labs cross-chain transfers client",
   "type": "module",
@@ -15,7 +15,12 @@
     },
     "./package.json": "./package.json"
   },
-  "files": ["dist", "LICENSE", "README.md", "package.json"],
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md",
+    "package.json"
+  ],
   "scripts": {
     "build": "tsup --config='tsup.config.ts'",
     "typecheck": "tsc --project tsconfig.json --noEmit",
diff --git a/typescript-sdk/playground/index.ts b/typescript-sdk/playground/index.ts
index 6d4705b745..1ab6e47ef1 100644
--- a/typescript-sdk/playground/index.ts
+++ b/typescript-sdk/playground/index.ts
@@ -1,45 +1,47 @@
 import { http } from "viem"
-import { consola } from "scripts/logger.ts"
+import { arbitrumSepolia } from "viem/chains"
 import { privateKeyToAccount } from "viem/accounts"
-import { createMultiUnionClient } from "../dist/index.mjs"
-import type { TransferAssetsParameters } from "../dist/index.d.ts"
+import { createUnionClient, type TransferAssetsParameters } from "@unionlabs/client"
 
 const account = privateKeyToAccount(`0x${process.env["PRIVATE_KEY"]}`)
 
-const clients = createMultiUnionClient([
-  {
-    chainId: "stride-internal-1",
-    transport: http("stride.testnet-1.stridenet.co")
-  },
-  {
-    account,
-    chainId: "421614",
-    transport: http("https://sepolia-rollup.arbitrum.io/rpc")
-  }
-])
+const client = createUnionClient({
+  account,
+  chainId: `${arbitrumSepolia.id}`,
+  transport: http("https://sepolia-rollup.arbitrum.io/rpc")
+})
 
 const payload = {
   amount: 1n,
-  autoApprove: true,
+  autoApprove: false,
   destinationChainId: "stride-internal-1",
-  denomAddress: "0xb1d4538b4571d411f07960ef2838ce337fe1e80e", // LINK
-  receiver: "stride14qemq0vw6y3gc3u3e0aty2e764u4gs5l66hpe3"
-} satisfies TransferAssetsParameters<"421614">
+  receiver: "stride14qemq0vw6y3gc3u3e0aty2e764u4gs5l66hpe3",
+  denomAddress: "0xb1d4538b4571d411f07960ef2838ce337fe1e80e" // LINK
+} satisfies TransferAssetsParameters<`${typeof arbitrumSepolia.id}`>
 
-const gasResponse = await clients["421614"].simulateTransaction(payload)
+const gasResponse = await client.simulateTransaction(payload)
 
 if (gasResponse.isErr()) {
-  consola.error(gasResponse.error)
+  console.error(`Gas estimation error: ${gasResponse.error}`)
   process.exit(1)
 }
 
-consola.success(`gas: ${gasResponse.value}`)
+console.info(`Gas estimation: ${gasResponse.value}`)
 
-// const sepoliaTransfer = await clients['421614'].transferAsset(payload)
+const approval = await client.approveTransaction(payload)
 
-// if (sepoliaTransfer.isErr()) {
-//   console.error(sepoliaTransfer.error)
-//   process.exit(1)
-// }
+if (approval.isErr()) {
+  console.error(`Approval error: ${approval.error}`)
+  process.exit(1)
+}
+
+console.info(`Approval hash: ${approval.value}`)
+
+const transfer = await client.transferAsset(payload)
+
+if (transfer.isErr()) {
+  console.error(`Transfer error: ${transfer.error}`)
+  process.exit(1)
+}
 
-// consola.success(`Transfer success: ${sepoliaTransfer.value}`)
+console.info(`Transfer hash: ${transfer.value}`)
diff --git a/typescript-sdk/src/query/offchain/tenderly.ts b/typescript-sdk/src/query/offchain/tenderly.ts
index 3905226786..a85838699a 100644
--- a/typescript-sdk/src/query/offchain/tenderly.ts
+++ b/typescript-sdk/src/query/offchain/tenderly.ts
@@ -43,7 +43,7 @@ function getTenderlyCreds(slug: {
  *   amount: 1n,
  *   account: evmAccount,
  *   sourceChannel: "channel-1",
- *   recipient: "0x8478B37E983F520dBCB5d7D3aAD8276B82631aBd",
+ *   receiver: "0x8478B37E983F520dBCB5d7D3aAD8276B82631aBd",
  *   denomAddress: "0x779877A7B0D9E8603169DdbD7836e478b4624789",
  *   relayContractAddress: "0x2222222222222222222222222222222222222222",
  * })
diff --git a/typescript-sdk/src/transfer/cosmos.ts b/typescript-sdk/src/transfer/cosmos.ts
index 89e6f8667f..a0d5ca9a42 100644
--- a/typescript-sdk/src/transfer/cosmos.ts
+++ b/typescript-sdk/src/transfer/cosmos.ts
@@ -344,7 +344,7 @@ export async function cosmwasmTransferSimulate({
  * const transfer = await cosmosSameChainTransfer(client, {
  *   asset: { denom: "muno", amount: "1" },
  *   gasPrice: { amount: "0.0025", denom: "muno" },
- *   recipient: "0x8478B37E983F520dBCB5d7D3aAD8276B82631aBd",
+ *   receiver: "0x8478B37E983F520dBCB5d7D3aAD8276B82631aBd",
  *   account: cosmosAccount,
  *   rpcUrl: "https://rpc.testnet-8.union.build",
  * })