feat: 更新 API 依赖版本，添加代币化产品相关组件和路由

2026-01-07 19:50:52 +07:00
parent 503ad3e8ad
commit d89e5323c1
16 changed files with 543 additions and 80 deletions
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
    "@elysiajs/eden": "^1.4.5",
    "@ionic/vue": "^8.7.11",
    "@ionic/vue-router": "^8.7.11",
-    "@riwa/api-types": "http://192.168.1.17:9527/api/riwa-eden-0.0.84.tgz",
+    "@riwa/api-types": "http://192.168.1.17:9527/api/riwa-eden-0.0.85.tgz",
    "@tailwindcss/vite": "^4.1.18",
    "@vee-validate/yup": "^4.15.1",
    "@vueuse/core": "^14.1.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -57,8 +57,8 @@ importers:
        specifier: ^8.7.11
        version: 8.7.11(@stencil/core@4.39.0)(vue-router@4.6.3(vue@3.5.25(typescript@5.9.3)))(vue@3.5.25(typescript@5.9.3))
      '@riwa/api-types':
-        specifier: http://192.168.1.17:9527/api/riwa-eden-0.0.84.tgz
-        version: '@riwa/eden@http://192.168.1.17:9527/api/riwa-eden-0.0.84.tgz(@elysiajs/eden@1.4.5(elysia@1.4.18(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))'
+        specifier: http://192.168.1.17:9527/api/riwa-eden-0.0.85.tgz
+        version: '@riwa/eden@http://192.168.1.17:9527/api/riwa-eden-0.0.85.tgz(@elysiajs/eden@1.4.5(elysia@1.4.18(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))'
      '@tailwindcss/vite':
        specifier: ^4.1.18
        version: 4.1.18(vite@7.2.7(@types/node@24.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.2))
@@ -2766,9 +2766,9 @@ packages:
  '@remirror/core-constants@3.0.0':
    resolution: {integrity: sha512-42aWfPrimMfDKDi4YegyS7x+/0tlzaqwPQCULLanv3DMIlu96KTJR0fM5isWX2UViOqlGnX6YFgqWepcX+XMNg==}

-  '@riwa/eden@http://192.168.1.17:9527/api/riwa-eden-0.0.84.tgz':
-    resolution: {tarball: http://192.168.1.17:9527/api/riwa-eden-0.0.84.tgz}
-    version: 0.0.84
+  '@riwa/eden@http://192.168.1.17:9527/api/riwa-eden-0.0.85.tgz':
+    resolution: {tarball: http://192.168.1.17:9527/api/riwa-eden-0.0.85.tgz}
+    version: 0.0.85
    peerDependencies:
      '@elysiajs/eden': ^1.4.5

@@ -12077,7 +12077,7 @@ snapshots:

  '@remirror/core-constants@3.0.0': {}

-  '@riwa/eden@http://192.168.1.17:9527/api/riwa-eden-0.0.84.tgz(@elysiajs/eden@1.4.5(elysia@1.4.18(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))':
+  '@riwa/eden@http://192.168.1.17:9527/api/riwa-eden-0.0.85.tgz(@elysiajs/eden@1.4.5(elysia@1.4.18(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))':
    dependencies:
      '@elysiajs/eden': 1.4.5(elysia@1.4.18(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3))

--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -72,6 +72,10 @@ export type AssetRecordBody = TreatyQuery<typeof client.api.ledger.entries.get>;

 export type AssetRecordData = Treaty.Data<typeof client.api.ledger.entries.get>["data"][number];

+export type TradableData = Treaty.Data<typeof client.api.rwa.tokenization.tradable_products.get>["data"][number];
+
+export type TradableBody = TreatyQuery<typeof client.api.rwa.tokenization.tradable_products.get>;
+
 /**
 * 应用版本信息
 */
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -200,6 +200,25 @@ const routes: Array<RouteRecordRaw> = [
      },
    ],
  },
+  {
+    path: "/trade-tokenized/:id",
+    props: true,
+    component: () => import("@/views/trade-tokenized/outlet.vue"),
+    meta: { requiresAuth: true },
+    children: [
+      {
+        path: "",
+        component: () => import("@/views/trade-tokenized/index.vue"),
+        meta: { requiresAuth: true },
+      },
+      {
+        path: "edit",
+        name: "trade-tokenized-edit",
+        component: () => import("@/views/trade-tokenized/edit.vue"),
+        meta: { requiresAuth: true },
+      },
+    ],
+  },
  {
    path: "/global-menu",
    component: () => import("@/views/global-menu/index.vue"),
--- a/src/views/market/components/rwa-list.vue
+++ b/src/views/market/components/rwa-list.vue
@@ -1,6 +1,5 @@
 <script lang='ts' setup>
 import type { RwaData } from "@/api/types";
-import CryptocurrencyColorAppc from "~icons/cryptocurrency-color/appc";
 import CryptocurrencyColorNuls from "~icons/cryptocurrency-color/nuls";

 defineProps<{
--- a/src/views/market/components/rwa-tab.vue
+++ b/src/views/market/components/rwa-tab.vue
@@ -0,0 +1,74 @@
+<script lang='ts' setup>
+import type { InfiniteScrollCustomEvent, RefresherCustomEvent } from "@ionic/vue";
+import type { AvailableSubscriptionBody, RwaData } from "@/api/types";
+import { client, safeClient } from "@/api";
+import Category from "./category.vue";
+import RwaList from "./rwa-list.vue";
+
+const { t } = useI18n();
+
+const [query] = useResetRef<AvailableSubscriptionBody>({
+  limit: 20,
+  offset: 0,
+  categoryId: "",
+});
+const rwaData = ref<RwaData[]>([]);
+const isFinished = ref(false);
+
+async function fetchRwaData() {
+  const { data } = await safeClient(() => client.api.rwa.subscription.available_editions.get({
+    query: query.value,
+  }));
+  rwaData.value.push(...(data.value?.data || []));
+  isFinished.value = (data.value?.data.length || 0) < query.value.limit!;
+}
+function resetRwaData() {
+  query.value.offset = 0;
+  rwaData.value = [];
+  isFinished.value = false;
+}
+async function handleRefresh() {
+  resetRwaData();
+  await fetchRwaData();
+}
+
+async function handleInfinite(event: InfiniteScrollCustomEvent) {
+  if (isFinished.value) {
+    event.target.complete();
+    event.target.disabled = true;
+    return;
+  }
+  query.value.offset! += query.value.limit!;
+  await fetchRwaData();
+  setTimeout(() => {
+    event.target.complete();
+  }, 500);
+}
+
+watch(() => query.value.categoryId, async () => {
+  resetRwaData();
+  await fetchRwaData();
+});
+
+onBeforeMount(() => {
+  fetchRwaData();
+});
+
+defineExpose({
+  handleRefresh,
+});
+</script>
+
+<template>
+  <Category v-model="query!.categoryId" />
+  <RwaList :data="rwaData" />
+
+  <ion-infinite-scroll threshold="100px" @ion-infinite="handleInfinite">
+    <ion-infinite-scroll-content
+      loading-spinner="bubbles"
+      :loading-text="t('market.loading.loadingMore')"
+    />
+  </ion-infinite-scroll>
+</template>
+
+<style lang='css' scoped></style>
--- a/src/views/market/components/tokenized-list.vue
+++ b/src/views/market/components/tokenized-list.vue
@@ -0,0 +1,73 @@
+<script lang='ts' setup>
+import type { TradableData } from "@/api/types";
+import CryptocurrencyColorNuls from "~icons/cryptocurrency-color/nuls";
+
+defineProps<{
+  data: TradableData[];
+}>();
+
+const router = useRouter();
+
+function gotoTokenized(id: string) {
+  router.push(`/trade-tokenized/${id}`);
+}
+</script>
+
+<template>
+  <div class="space-y-3 antialiased mt-5">
+    <ion-grid>
+      <ion-row class="ion-align-items-center text-xs text-text-500">
+        <ion-col size="6">
+          <div>名称/代码</div>
+        </ion-col>
+        <ion-col>
+          <div class="text-right">
+            涨跌幅
+          </div>
+        </ion-col>
+        <ion-col>
+          <div class="text-right">
+            交易价估算
+          </div>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+    <div v-for="item in data" :key="item.id" @click="gotoTokenized(item.id)">
+      <ion-grid>
+        <ion-row class="ion-align-items-center my-5">
+          <ion-col size="6" class="flex items-center">
+            <div class="mr-3">
+              <CryptocurrencyColorNuls class="text-3xl" />
+            </div>
+            <div>
+              <div class="text-sm font-semibold mb-1 truncate">
+                {{ item.product?.name }}
+              </div>
+              <div class="flex items-center space-x-2">
+                <div class="text-xs text-text-500">
+                  {{ item.product?.code }}
+                </div>
+                <div class="text-xs rounded-md px-1 py-0.5 bg-text-800">
+                  {{ item.product?.category?.name }}
+                </div>
+              </div>
+            </div>
+          </ion-col>
+
+          <ion-col>
+            <div class="text-xs text-right">
+              +12.6%
+            </div>
+          </ion-col>
+          <ion-col>
+            <div class="text-xs text-right">
+              连涨3天
+            </div>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+    </div>
+  </div>
+</template>
+
+<style lang='css' scoped></style>
--- a/src/views/market/components/tokenized-tab.vue
+++ b/src/views/market/components/tokenized-tab.vue
@@ -0,0 +1,72 @@
+<script lang='ts' setup>
+import type { InfiniteScrollCustomEvent } from "@ionic/vue";
+import type { TradableBody, TradableData } from "@/api/types";
+import { client, safeClient } from "@/api";
+import Category from "./category.vue";
+import TokenizedList from "./tokenized-list.vue";
+
+const { t } = useI18n();
+
+const [query] = useResetRef<TradableBody>({
+  limit: 20,
+  offset: 0,
+  categoryId: "",
+});
+const data = ref<TradableData[]>([]);
+const isFinished = ref(false);
+
+async function fetchData() {
+  const { data: responseData } = await safeClient(() => client.api.rwa.tokenization.tradable_products.get({
+    query: query.value,
+  }));
+  data.value.push(...(responseData.value?.data || []));
+  isFinished.value = (responseData.value?.data.length || 0) < query.value.limit!;
+}
+function resetData() {
+  query.value.offset = 0;
+  data.value = [];
+  isFinished.value = false;
+}
+async function handleRefresh() {
+}
+
+async function handleInfinite(event: InfiniteScrollCustomEvent) {
+  if (isFinished.value) {
+    event.target.complete();
+    event.target.disabled = true;
+    return;
+  }
+  query.value.offset! += query.value.limit!;
+  await fetchData();
+  setTimeout(() => {
+    event.target.complete();
+  }, 500);
+}
+
+watch(() => query.value.categoryId, async () => {
+  resetData();
+  await fetchData();
+});
+
+onBeforeMount(() => {
+  fetchData();
+});
+
+defineExpose({
+  handleRefresh,
+});
+</script>
+
+<template>
+  <Category v-model="query!.categoryId" />
+  <TokenizedList :data="data" />
+
+  <ion-infinite-scroll threshold="100px" @ion-infinite="handleInfinite">
+    <ion-infinite-scroll-content
+      loading-spinner="bubbles"
+      :loading-text="t('market.loading.loadingMore')"
+    />
+  </ion-infinite-scroll>
+</template>
+
+<style lang='css' scoped></style>
--- a/src/views/market/index.vue
+++ b/src/views/market/index.vue
@@ -1,61 +1,19 @@
 <script setup lang="ts">
-import type { InfiniteScrollCustomEvent, RefresherCustomEvent } from "@ionic/vue";
-import type { AvailableSubscriptionBody, RwaData } from "@/api/types";
-import { client, safeClient } from "@/api";
-import Category from "./components/category.vue";
-import RwaList from "./components/rwa-list.vue";
+import type { RefresherCustomEvent } from "@ionic/vue";
+import RwaTab from "./components/rwa-tab.vue";
+import TokenizedTab from "./components/tokenized-tab.vue";

 const { t } = useI18n();
+const rwaInst = useTemplateRef<InstanceType<typeof RwaTab>>("rwaInst");
+const tokenizedInst = useTemplateRef<InstanceType<typeof TokenizedTab>>("tokenizedInst");

-const [query] = useResetRef<AvailableSubscriptionBody>({
-  limit: 20,
-  offset: 0,
-  categoryId: "",
-});
-const rwaData = ref<RwaData[]>([]);
-const isFinished = ref(false);
-
-async function fetchRwaData() {
-  const { data } = await safeClient(() => client.api.rwa.subscription.available_editions.get({
-    query: query.value,
-  }));
-  rwaData.value.push(...(data.value?.data || []));
-  isFinished.value = (data.value?.data.length || 0) < query.value.limit!;
-}
-function resetRwaData() {
-  query.value.offset = 0;
-  rwaData.value = [];
-  isFinished.value = false;
-}
 async function handleRefresh(event: RefresherCustomEvent) {
-  resetRwaData();
-  await fetchRwaData();
+  await rwaInst.value?.handleRefresh();
+  await tokenizedInst.value?.handleRefresh();
  setTimeout(() => {
    event.target.complete();
  }, 500);
 }
-
-async function handleInfinite(event: InfiniteScrollCustomEvent) {
-  if (isFinished.value) {
-    event.target.complete();
-    event.target.disabled = true;
-    return;
-  }
-  query.value.offset! += query.value.limit!;
-  await fetchRwaData();
-  setTimeout(() => {
-    event.target.complete();
-  }, 500);
-}
-
-watch(() => query.value.categoryId, async () => {
-  resetRwaData();
-  await fetchRwaData();
-});
-
-onBeforeMount(() => {
-  fetchRwaData();
-});
 </script>

 <template>
@@ -74,19 +32,13 @@ onBeforeMount(() => {
      </ion-refresher>

      <ui-tabs type="segment" class="tabs" size="small">
-        <ui-tab-pane name="all" title="数字化产品">
-          <Category v-model="query!.categoryId" />
-          <RwaList :data="rwaData" />
+        <ui-tab-pane name="rwa" title="数字化产品">
+          <RwaTab ref="rwaInst" />
+        </ui-tab-pane>
+        <ui-tab-pane name="tokenized" title="代币化产品">
+          <TokenizedTab ref="tokenizedInst" />
        </ui-tab-pane>
-        <ui-tab-pane name="stocks" title="代币化产品" />
      </ui-tabs>
-
-      <ion-infinite-scroll threshold="100px" @ion-infinite="handleInfinite">
-        <ion-infinite-scroll-content
-          loading-spinner="bubbles"
-          :loading-text="t('market.loading.loadingMore')"
-        />
-      </ion-infinite-scroll>
    </IonContent>
  </IonPage>
 </template>
--- a/src/views/trade-rwa/components/about.vue
+++ b/src/views/trade-rwa/components/about.vue
@@ -9,7 +9,7 @@ const props = defineProps<{
 <template>
  <div class="mt-2">
    <!-- document -->
-    <div class="mt-5">
+    <div>
      <div class="font-semibold">
        相关文档
      </div>
--- a/src/views/trade-rwa/components/base.vue
+++ b/src/views/trade-rwa/components/base.vue
@@ -11,7 +11,7 @@ const { t } = useI18n();
 <template>
  <div class="mt-2">
    <!-- Rwa about -->
-    <div class="mt-5">
+    <div>
      <div class="font-semibold">
        {{ t('market.tradeRwa.about') }}
      </div>
@@ -89,16 +89,6 @@ const { t } = useI18n();
        {{ data?.status }}
      </div>
    </div>
-
-    <!-- Rwa status history -->
-    <div class="mt-5">
-      <div class="font-semibold">
-        状态历史
-      </div>
-      <div class="text-xs mt-2">
-        {{ data?.status }}
-      </div>
-    </div>
  </div>
 </template>

--- a/src/views/trade-tokenized/components/about.vue
+++ b/src/views/trade-tokenized/components/about.vue
@@ -0,0 +1,23 @@
+<script lang='ts' setup>
+import type { RwaData } from "@/api/types";
+
+const props = defineProps<{
+  data: RwaData | null;
+}>();
+</script>
+
+<template>
+  <div class="mt-2">
+    <!-- document -->
+    <div>
+      <div class="font-semibold">
+        相关文档
+      </div>
+      <div class="text-xs mt-2">
+        {{ data?.product.proofDocuments }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang='css' scoped></style>
--- a/src/views/trade-tokenized/components/base.vue
+++ b/src/views/trade-tokenized/components/base.vue
@@ -0,0 +1,95 @@
+<script lang='ts' setup>
+import type { RwaData } from "@/api/types";
+
+const props = defineProps<{
+  data: RwaData | null;
+}>();
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <div class="mt-2">
+    <!-- Rwa about -->
+    <div>
+      <div class="font-semibold">
+        {{ t('market.tradeRwa.about') }}
+      </div>
+      <div class="text-xs mt-2">
+        {{ data?.product.description || t('market.tradeRwa.noDescription') }}
+      </div>
+    </div>
+
+    <!-- Rwa fields -->
+    <ion-grid class="mt-5 text-sm space-y-5">
+      <ion-row>
+        <ion-col>
+          <div class="label">
+            {{ t('market.tradeRwa.fields.productCode') }}
+          </div>
+          <div>{{ data?.product.code }}</div>
+        </ion-col>
+        <ion-col>
+          <div class="label">
+            {{ t('market.tradeRwa.fields.valuation') }}
+          </div>
+          <div>${{ formatAmountWithUnit(data?.product.estimatedValue) }}</div>
+        </ion-col>
+      </ion-row>
+      <ion-row>
+        <ion-col>
+          <div class="label">
+            {{ t('market.tradeRwa.fields.unitPrice') }}
+          </div>
+          <div>${{ formatAmountWithUnit(data?.unitPrice) }}</div>
+        </ion-col>
+        <ion-col>
+          <div class="label">
+            {{ t('market.tradeRwa.fields.totalSupply') }}
+          </div>
+          <div>{{ Number(data?.totalSupply) }}{{ t('market.tradeRwa.units.shares') }}</div>
+        </ion-col>
+      </ion-row>
+      <ion-row>
+        <ion-col>
+          <div class="label">
+            {{ t('market.tradeRwa.fields.perUserLimit') }}
+          </div>
+          <div>{{ Number(data?.perUserLimit) }}{{ t('market.tradeRwa.units.shares') }}</div>
+        </ion-col>
+        <ion-col>
+          <div class="label">
+            {{ t('market.tradeRwa.fields.launchDate') }}
+          </div>
+          <div>{{ useDateFormat(data?.launchDate || '', 'YYYY/MM/DD HH:mm') }}</div>
+        </ion-col>
+      </ion-row>
+      <ion-row>
+        <ion-col>
+          <div class="label">
+            {{ t('market.tradeRwa.fields.subscriptionStartDate') }}
+          </div>
+          <div>{{ useDateFormat(data?.subscriptionStartDate || '', 'YYYY/MM/DD HH:mm') }}</div>
+        </ion-col>
+        <ion-col>
+          <div class="label">
+            {{ t('market.tradeRwa.fields.subscriptionEndDate') }}
+          </div>
+          <div>{{ useDateFormat(data?.subscriptionEndDate || '', 'YYYY/MM/DD HH:mm') }}</div>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+
+    <!-- Rwa status -->
+    <div class="mt-5">
+      <div class="font-semibold">
+        资产状态
+      </div>
+      <div class="text-xs mt-2">
+        {{ data?.status }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang='css' scoped></style>
--- a/src/views/trade-tokenized/edit.vue
+++ b/src/views/trade-tokenized/edit.vue
@@ -0,0 +1,23 @@
+<script lang='ts' setup>
+import type { RwaData } from "@/api/types";
+
+defineProps<{
+  data: RwaData;
+}>();
+</script>
+
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar class="ion-toolbar">
+        <ui-back-button slot="start" text="" />
+        <ion-title />
+      </ion-toolbar>
+    </ion-header>
+    <ion-content :fullscreen="true" class="ion-padding">
+      {{ data }}
+    </ion-content>
+  </ion-page>
+</template>
+
+<style lang='css' scoped></style>
--- a/src/views/trade-tokenized/index.vue
+++ b/src/views/trade-tokenized/index.vue
@@ -0,0 +1,112 @@
+<script lang='ts' setup>
+import type { RwaData } from "@/api/types";
+import { toastController } from "@ionic/vue";
+import CryptocurrencyColorNuls from "~icons/cryptocurrency-color/nuls";
+import IcSharpEditNote from "~icons/ic/sharp-edit-note";
+import { client, safeClient } from "@/api";
+import RwaAbout from "./components/about.vue";
+import RwaBase from "./components/base.vue";
+
+const props = defineProps<{
+  data: RwaData;
+}>();
+
+const { t } = useI18n();
+const router = useRouter();
+
+const model = useTemplateRef<ModalInstance>("model");
+
+async function handleSubscribe(val: number) {
+  await safeClient(client.api.rwa.subscription.apply.post({
+    editionId: props.data.id,
+    quantity: String(val),
+  }));
+  const toast = await toastController.create({
+    message: t("market.tradeRwa.subscribeSuccess"),
+    duration: 2000,
+    position: "bottom",
+    color: "success",
+  });
+
+  await toast.present();
+  model.value?.$el.dismiss();
+}
+function gotoEdit() {
+  router.push({ name: "trade-rwa-edit" });
+}
+</script>
+
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar class="ion-toolbar">
+        <ui-back-button slot="start" text="" />
+        <ion-title>
+          {{ data?.product.code }}
+        </ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content :fullscreen="true" class="ion-padding">
+      <div>
+        <div class="flex items-center space-x-2">
+          <CryptocurrencyColorNuls class="text-3xl" />
+
+          <div class="mr-2">
+            <div class="text-lg font-semibold">
+              {{ data?.product.name }}
+            </div>
+            <div class="text-xs text-gray-500 font-semibold">
+              {{ data?.product.category?.name }}
+            </div>
+          </div>
+        </div>
+        <!-- <div class="flex items-center my-3" @click="gotoEdit">
+          <IcSharpEditNote class="inline-block text-xl mr-1 text-text-500" />
+          <div class="text-xs">
+            编辑资产
+          </div>
+        </div> -->
+      </div>
+
+      <ui-tabs size="small" class="my-3">
+        <ui-tab-pane name="overview" :title="t('market.tradeRwa.tabs.overview')">
+          <RwaBase :data="data" />
+        </ui-tab-pane>
+        <ui-tab-pane name="about" title="相关文档">
+          <RwaAbout :data="data" />
+        </ui-tab-pane>
+      </ui-tabs>
+    </ion-content>
+
+    <ion-footer>
+      <ion-toolbar class="ion-padding-horizontal ion-toolbar">
+        <div class="flex justify-center my-2 gap-5">
+          <ion-button id="open-modal" shape="round" expand="block" color="success">
+            {{ t('market.tradeRwa.subscribe') }}
+          </ion-button>
+
+          <ion-modal ref="model" trigger="open-modal" :initial-breakpoint="0.4" :breakpoints="[0, 0.4]">
+            <subscribe-rwa :unit-price="Number(data?.unitPrice || 0)" :max="Number(data?.perUserLimit || 0)" @subscribed="handleSubscribe" />
+          </ion-modal>
+        </div>
+      </ion-toolbar>
+    </ion-footer>
+  </ion-page>
+</template>
+
+<style scoped>
+@reference "tailwindcss";
+
+.label {
+  @apply text-gray-500 mb-1;
+}
+
+ion-button {
+  width: 100%;
+  min-height: 40px;
+}
+
+ion-button::part(native) {
+  min-height: 40px;
+}
+</style>
--- a/src/views/trade-tokenized/outlet.vue
+++ b/src/views/trade-tokenized/outlet.vue
@@ -0,0 +1,27 @@
+<script lang='ts' setup>
+import { client, safeClient } from "@/api";
+
+const props = defineProps<{
+  id: string;
+}>();
+
+const { data } = safeClient(client.api.rwa.subscription.available_editions({ editionId: props.id }).get());
+</script>
+
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar class="ion-toolbar">
+        <ui-back-button slot="start" />
+        <ion-title>
+          {{ data?.product.code }}
+        </ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content :fullscreen="true" class="ion-padding">
+      <RouterView :data="data" />
+    </ion-content>
+  </ion-page>
+</template>
+
+<style scoped></style>