feat: 更新环境配置，修改 API 地址，添加格式化金额功能，优化 RWA 交易视图

src/api/index.ts

@@ -24,8 +24,10 @@ export interface SafeClientReturn<T, E> {
   stopWatching?: () => void;
 }
 
+export type RequestPromise<T, E> = Promise<{ data: T; error: E; status?: number; response?: Response }>;
+
 export function safeClient<T, E>(
-  requestPromise: (() => Promise<{ data: T; error: E }>) | Promise<{ data: T; error: E }>,
+  requestPromise: (() => RequestPromise<T, E>) | RequestPromise<T, E>,
   options: SafeClientOptions = {},
 ): SafeClientReturn<T, E> & Promise<SafeClientReturn<T, E>> {
   const { immediate = true, watchSource } = options;
@@ -37,7 +39,7 @@ export function safeClient<T, E>(
 
   const execute = async () => {
     isPending.value = true;
-    let request: () => Promise<{ data: T; error: E }>;
+    let request: () => RequestPromise<T, E>;
     if (typeof requestPromise !== "function") {
       request = () => Promise.resolve(requestPromise);
     }
@@ -49,21 +51,10 @@ export function safeClient<T, E>(
       isPending.value = false;
     });
 
-    if (res.error) {
-      let errMsg = "";
-      if (!res.error) {
-        errMsg = "Request failed. Please try again.";
-      }
-      else if (typeof res.error === "string") {
-        errMsg = res.error;
-      }
-      else if (res.error && "value" in (res.error as unknown as object)) {
-        errMsg = String((res.error as unknown as { value: string }).value);
-      }
-      // if(res.error && typeof res.error === 'object' && 'err' in res.error) {
+    if (res.error && res.status === 418) {
       if (!options.silent) {
         const toast = await toastController.create({
-          message: errMsg,
+          message: (res.error as any).value.message,
           duration: 3000,
           position: "bottom",
           color: "danger",

src/main.ts

@@ -28,8 +28,8 @@ import "@ionic/vue/css/display.css";
  * https://ionicframework.com/docs/theming/dark-mode
  */
 
-/* @import '@ionic/vue/css/palettes/dark.always.css'; */
-/* @import '@ionic/vue/css/palettes/dark.class.css'; */
+// import "@ionic/vue/css/palettes/dark.always.css";
+// import "@ionic/vue/css/palettes/dark.class.css";
 import "@ionic/vue/css/palettes/dark.system.css";
 
 /* Theme variables */

src/utils/helper.ts

@@ -14,3 +14,31 @@ export function timeToLocal(originalTime: number) {
   const d = new Date(originalTime * 1000);
   return Date.UTC(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds(), d.getMilliseconds()) / 1000;
 }
+
+export function formatAmount(amount: MaybeRefOrGetter<number | string | null | undefined>): string {
+  const value = toValue(amount);
+  if (Number.isNaN(Number(value))) {
+    return "0";
+  }
+
+  const num = Number(value);
+
+  // 不超过1万，原样显示
+  if (num < 10000) {
+    return String(num);
+  }
+
+  // 1亿以上，显示为xx亿
+  if (num >= 100000000) {
+    const yi = (num / 100000000).toFixed(1);
+    return yi.endsWith(".0") ? `${Number.parseInt(yi)}亿` : `${yi}亿`;
+  }
+
+  // 1万到1亿，显示为xx万
+  if (num >= 10000) {
+    const wan = (num / 10000).toFixed(1);
+    return wan.endsWith(".0") ? `${Number.parseInt(wan)}万` : `${wan}万`;
+  }
+
+  return String(num);
+}

src/views/market/components/rwa-list.vue

@@ -55,7 +55,7 @@ function gotoTradeRwa(id: string) {
                   {{ item.product?.code }}
                 </div>
                 <div class="text-xs rounded-md px-1 py-0.5 bg-text-800">
-                  {{ item.product?.code }}
+                  {{ item.product.category?.name }}
                 </div>
               </div>
             </div>

src/views/trade-rwa/index.vue

@@ -1,26 +1,98 @@
 <script lang='ts' setup>
+import CryptocurrencyColorNuls from "~icons/cryptocurrency-color/nuls";
 import { client, safeClient } from "@/api";
 
 const props = defineProps<{
   id: string;
 }>();
 
-const { data } = safeClient(client.api.rwa.subscription({ orderId: props.id }).get());
+const { data } = safeClient(client.api.rwa.subscription.available_editions({ editionId: props.id }).get());
 </script>
 
 <template>
   <ion-page>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>RWA Trade</ion-title>
+    <ion-header class="ion-no-border">
+      <ion-toolbar class="ui-toolbar">
+        <ion-back-button slot="start" text="" />
+        <ion-title>
+          {{ data?.product.code }}
+        </ion-title>
       </ion-toolbar>
+      <ui-tabs size="small" class="px-4">
+        <ui-tab-pane name="overview" title="Overview" />
+        <ui-tab-pane name="moment" title="Moment" />
+      </ui-tabs>
     </ion-header>
-    <ion-content :fullscreen="true">
-      <ion-padding>
-        RWA Trade Page
-      </ion-padding>
+    <ion-content :fullscreen="true" class="ion-padding">
+      <div class="mt-5">
+        <div class="flex items-center space-x-2">
+          <CryptocurrencyColorNuls class="text-2xl" />
+          <div class="mr-2 text-lg font-semibold">
+            {{ data?.product.name }}
+          </div>
+        </div>
+        <ion-grid class="mt-5 text-sm space-y-5">
+          <ion-row>
+            <ion-col>
+              <div class="label">
+                产品编号
+              </div>
+              <div>{{ data?.product.code }}</div>
+            </ion-col>
+            <ion-col>
+              <div class="label">
+                估值
+              </div>
+              <div>${{ formatAmount(data?.product.estimatedValue) }}</div>
+            </ion-col>
+          </ion-row>
+          <ion-row>
+            <ion-col>
+              <div class="label">
+                总发行量
+              </div>
+              <div>{{ Number(data?.totalSupply) }}份</div>
+            </ion-col>
+            <ion-col>
+              <div class="label">
+                每人限量
+              </div>
+              <div>{{ Number(data?.perUserLimit) }}份</div>
+            </ion-col>
+          </ion-row>
+          <ion-row>
+            <ion-col>
+              <div class="label">
+                发行时间
+              </div>
+              <div>{{ useDateFormat(data?.launchDate || '', 'YYYY/MM/DD') }}</div>
+            </ion-col>
+            <ion-col>
+              <div class="label">
+                认购截止时间
+              </div>
+              <div>{{ useDateFormat(data?.subscriptionDeadline || '', 'YYYY/MM/DD') }}</div>
+            </ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <div class="mt-5">
+          <div class="font-semibold">
+            About
+          </div>
+          <div class="text-xs mt-2">
+            {{ data?.product.description || 'No description available.' }}
+          </div>
+        </div>
+      </div>
     </ion-content>
   </ion-page>
 </template>
 
-<style lang='css' scoped></style>
+<style scoped>
+@reference "tailwindcss";
+
+.label {
+  @apply text-gray-500 mb-1;
+}
+</style>