94 lines
4.0 KiB
Vue
94 lines
4.0 KiB
Vue
<template>
|
|
<needs-provider>
|
|
<!-- 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-safe-square-outline"/> Setup Vault</v-card-title>
|
|
<v-card-subtitle>Create Your Own Personal Dexorder Vault</v-card-subtitle>
|
|
<v-card-text>
|
|
Dexorder never has access to your tokens. Instead, you create a personal
|
|
vault which acts like your Dexorder account.
|
|
Create your own personal asset vault to get started with Dexorder. This vault
|
|
acts like your Dexorder account. For security, only <i>you</i> can deposit
|
|
or withdraw tokens from your vault, and no token approvals are ever given to
|
|
Dexorder. Instead, Dexorder sends trade requests to your vault at the right
|
|
times, then your vault checks the validity of those trade requests before
|
|
trading directly from your vault to the dex liquidity pool. Dexorder never
|
|
has any access to the funds in your vault.
|
|
</v-card-text>
|
|
<v-card-text>
|
|
Creating your personal vault is a one-time setup operation. Your vault address
|
|
is unique to you and never changes. You may deposit or withdraw funds in your
|
|
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><v-icon icon="mdi-safe-square-outline" size="small" color="red"/> 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-actions><v-btn prepend-icon="mdi-plus" text="Create Order" @click="$router.push('/orders')"/></v-card-actions>
|
|
</v-card>
|
|
<v-card v-if="s.vaults.length>num">
|
|
<v-card-title><v-icon icon="mdi-safe-square-outline" size="small"/> My Vault {{s.vaults.length>1?'#'+(num+1):''}}</v-card-title> <!-- todo vault nicknames -->
|
|
<v-card-subtitle v-if="exists" class="overflow-x-hidden"><copy-button :text="addr"/>{{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-if="!empty">
|
|
<v-table>
|
|
<tbody>
|
|
<suspense v-for="(amount,addr) of balances">
|
|
<token-row :addr="addr" :amount="amount" :onWithdraw="onWithdraw"/>
|
|
</suspense>
|
|
</tbody>
|
|
</v-table>
|
|
</v-card-item>
|
|
</v-card>
|
|
<withdraw :vault="addr" :token="withdrawToken" v-model="withdrawShow"/>
|
|
<!--
|
|
<div>
|
|
addr {{ addr }}<br/>
|
|
empty {{ empty }}<br/>
|
|
exists {{ exists }}<br/>
|
|
</div>
|
|
-->
|
|
</needs-provider>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {useStore} from "@/store/store.js";
|
|
import {computed, defineAsyncComponent, ref} from "vue";
|
|
import {vaultAddress} from "@/blockchain/contract.js";
|
|
import CopyButton from "@/components/CopyButton.vue";
|
|
import NeedsProvider from "@/components/NeedsProvider.vue";
|
|
import Withdraw from "@/components/Withdraw.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 empty = computed(()=>Object.keys(balances.value).length===0)
|
|
const exists = computed(()=>s.vaults.length>0)
|
|
|
|
const withdrawToken = ref(null)
|
|
const withdrawShow = ref(false)
|
|
function onWithdraw(addr) {
|
|
const token = s.tokens[addr]
|
|
console.log('withdraw', addr, token)
|
|
withdrawToken.value = token
|
|
withdrawShow.value = true
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use "../styles/vars" as *;
|
|
</style>
|