vault balances UI

src/components/Vault.vue

@@ -1,5 +1,6 @@
 <template>
-  <v-card v-if="s.vault===null">
+<!-- todo we can use something like this for ethereum where the vault creation is too expensive to subsidize
+  <PhoneCard v-if="s.vault===null || s.vault.length === 0">
     <v-card-title><v-icon color="warning" icon="mdi-alert"/>&nbsp;Setup&nbsp;Vault</v-card-title>
     <v-card-subtitle>Create Your Own Personal Dexorder Vault</v-card-subtitle>
     <v-card-text>
@@ -19,17 +20,54 @@
       vault at any time, and you may save your vault address in your wallet for
       easy access.
     </v-card-text>
+  </PhoneCard>
+-->
+  <v-card v-if="s.vaults.length<num">
+    <v-card-title>No Vault Yet</v-card-title>
+    <v-card-text v-if="num!==0"><!--todo-->Multiple vaults are not yet supported</v-card-text>
+    <v-card-text v-if="num===0">Create an order first, then your vault account will appear here to accept a deposit of trading funds.</v-card-text>
+  </v-card>
+  <v-card v-if="s.vaults.length>num">
+    <v-card-title>Vault {{s.vaults.length>1?'#'+(num+1):''}}</v-card-title> <!-- todo vault nicknames -->
+    <v-card-subtitle v-if="exists">{{addr}} <copy-button :text="addr"/></v-card-subtitle>
+    <v-card-text v-if="empty">
+      <p>There are no funds currently in your vault.</p>
+      <p>Send tokens to the address above to fund your vault.</p>
+    </v-card-text>
+    <v-card-item>
+      <v-table v-if="!empty">
+        <tbody>
+          <suspense v-for="(amount,addr) of balances">
+            <token-row :addr="addr" :amount="amount"/>
+          </suspense>
+        </tbody>
+      </v-table>
+    </v-card-item>
   </v-card>
 </template>
 
 <script setup>
 import {useStore} from "@/store/store.js";
+import PhoneCard from "@/components/PhoneCard.vue";
+import {computed, defineAsyncComponent} from "vue";
+import {vaultAddress} from "@/blockchain/contract.js";
+import CopyButton from "@/components/CopyButton.vue";
 
+const TokenRow = defineAsyncComponent(()=>import('./TokenRow.vue'))
 const s = useStore()
 
+const props = defineProps(['owner', 'num'])
+const addr = computed(()=>vaultAddress(props.owner, props.num))
+const balances = computed(()=>{
+  const bs = s.vaultBalances[addr.value]
+  console.log('balances', addr.value, s.vaultBalances, bs)
+  return bs || {}
+})
+const tokenAddrs = computed(()=>Object.keys(balances))
+const empty = computed(()=>Object.keys(balances.value).length===0)
+const exists = computed(()=>s.vaults.length>0)
 </script>
 
 <style scoped lang="scss">
 @use "../styles/vars" as *;
-
 </style>