feat: finish user assets page

server/controllers/user.ts

@@ -1,5 +1,6 @@
 import { Controller, RequestMapping } from '@rxts/koa-router-decorators'
 import { Context } from 'koa'
+import { BigNumber, bignumber } from 'mathjs'
 
 import { LoginRequired } from '../decorators'
 import { Member, MemberWallet, Project } from '../entities'
@@ -32,10 +33,20 @@ export class UserController {
   @RequestMapping('/assets')
   async assets(ctx: Context) {
     const userId = ctx.session.user.id
-    await ctx.conn.getRepository(MemberWallet).find({
+    const memberWallets = await ctx.conn.getRepository(MemberWallet).find({
       where: {
         userId,
       },
     })
+    ctx.body = memberWallets.reduce<Record<string, BigNumber>>(
+      (acc, { assetId, balance }) => {
+        if (acc[assetId] == null) {
+          acc[assetId] = bignumber(0)
+        }
+        acc[assetId] = acc[assetId].add(balance)
+        return acc
+      },
+      {},
+    )
   }
 }

src/pages/assets.vue

@@ -1,8 +1,8 @@
 <template>
   <v-container>
     <c-back-title>Assets</c-back-title>
-    <div class="headline">≈0.00783823 BTC</div>
-    <div class="mb-4 subtitle-1">≈$53.30</div>
+    <div class="headline">≈{{ prices.btc }} BTC</div>
+    <div class="mb-4 subtitle-1">≈${{ prices.usd }}</div>
     <tips v-if="!mixinAuth && !foxoneAuth" class="mb-4">
       Because we store assets in Mixin Network, you must connect to Mixin or
       Fox.ONE App to withdraw your assets.
@@ -53,44 +53,67 @@
       Connect with Fox.ONE
     </a>
     <v-list class="mx--4 py-0 transparent">
-      <v-list-item
-        v-for="{ asset_id, icon_url, name, symbol } of assets"
-        :key="asset_id"
-      >
+      <v-list-item v-for="a of assets" :key="a.asset_id">
         <v-list-item-avatar size="42" color="grey" class="mr-3 rounded">
-          <v-img :src="icon_url" />
+          <v-img :src="a.icon_url" />
         </v-list-item-avatar>
         <v-list-item-content>
-          <v-list-item-title class="subtitle-2 mb-0">
-            {{ symbol }}
-            <span class="float-right">0.00783</span>
-          </v-list-item-title>
-          <v-list-item-subtitle class="caption">
-            {{ name }}
-            <span class="float-right">$5147.85</span>
-          </v-list-item-subtitle>
+          <local-scope v-slot="{ amount, usd }" v-bind="getAssetAmount(a)">
+            <v-list-item-title class="subtitle-2 mb-0">
+              {{ a.symbol }}
+              <span class="float-right">{{ amount }}</span>
+            </v-list-item-title>
+            <v-list-item-subtitle class="caption">
+              {{ a.name }}
+              <span class="float-right">${{ usd }}</span>
+            </v-list-item-subtitle>
+          </local-scope>
         </v-list-item-content>
       </v-list-item>
     </v-list>
   </v-container>
 </template>
 <script lang="ts">
+import { bignumber } from 'mathjs'
 import { mapState } from 'vuex'
 
-import { Tips } from '@/components'
+import { LocalScope, Tips } from '@/components'
+import { Asset } from '@/types'
 
 export default {
   meta: {
     auth: true,
   },
   components: {
+    LocalScope,
     Tips,
   },
-  asyncData({ app }) {
-    return app.store.dispatch('getAssets')
+  async asyncData({ app }) {
+    const [userAssets] = await Promise.all([
+      app.http.get('/user/assets'),
+      app.store.dispatch('getAssets'),
+    ])
+    return {
+      userAssets,
+    }
   },
   computed: {
     ...mapState(['assets', 'envs', 'mixinAuth', 'foxoneAuth', 'randomUid']),
+    prices() {
+      return this.assets.reduce(
+        (acc, asset) => {
+          const amount = this.userAssets?.[asset.asset_id] || 0
+          return {
+            btc: acc.btc.add(asset.price_btc * amount),
+            usd: acc.usd.add(asset.price_usd * amount),
+          }
+        },
+        {
+          btc: bignumber(0),
+          usd: bignumber(0),
+        },
+      )
+    },
     mixinOauthUrl() {
       return this.$utils.normalizeUrl(this.$utils.MIXIN_OAUTH_URL, {
         client_id: this.envs.MIXIN_CLIENT_ID,
@@ -108,5 +131,14 @@ export default {
       })
     },
   },
+  methods: {
+    getAssetAmount(asset: Asset) {
+      const amount = this.userAssets?.[asset.asset_id] || 0
+      return {
+        amount,
+        usd: bignumber(asset.price_usd).mul(amount),
+      }
+    },
+  },
 }
 </script>