125 lines
5.8 KiB
Vue
125 lines
5.8 KiB
Vue
<template>
|
|
<!-- 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>
|
|
-->
|
|
<phone-card v-if="s.vaults.length<=num">
|
|
<v-card-title><v-icon icon="mdi-safe-square" size="small" color="grey-darken-1"/> Create a Dexorder Vault</v-card-title>
|
|
<v-card-text v-if="num!==0"><!--todo-->Multiple vaults are not yet supported</v-card-text>
|
|
<!-- todo restore the vault-on-order approach for public beta
|
|
<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('/twap')"/></v-card-actions>
|
|
-->
|
|
<!-- User-actioned but dexorder executed
|
|
<v-card-text v-if="num===0">
|
|
Your vault is a smart contract that securely holds your funds plus any orders you place. When your order
|
|
conditions are met, Dexorder creates a blockchain transaction for <code>vault.execute()</code>,
|
|
asking your vault to the order. Your vault then checks that order against the
|
|
current blockchain time and pool price, and only trades if everything looks good.
|
|
|
|
Start placing dexorders by clicking the button below to create your own personal Vault!
|
|
</v-card-text>
|
|
<v-card-actions><btn icon="mdi-safe-square" color="grey-darken-1" text="Create Vault" @click="ensureVault"/></v-card-actions>
|
|
-->
|
|
<v-card-text v-if="num===0">
|
|
Please wait while your vault is being created. This should only take a few seconds.
|
|
</v-card-text>
|
|
</phone-card>
|
|
<v-card v-if="s.vaults.length>num" :class="empty?'maxw':''">
|
|
<v-card-title><v-icon icon="mdi-safe-square" color="grey-darken-2" 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>
|
|
Your vault is a smart contract that securely holds your funds plus any orders you place. When your order
|
|
conditions are met, Dexorder creates a blockchain transaction for <code>vault.execute()</code>,
|
|
asking your vault to the order. Your vault then checks that order against the
|
|
current blockchain time and pool price, and only trades if everything looks good.
|
|
</p>
|
|
<p v-if="!s.mockenv">There are no funds currently in your vault. Send tokens to the address above to fund your vault.</p>
|
|
<p v-if="s.mockenv">There are no funds currently in your vault. Use the faucet below to mint some fake coins into 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>
|
|
-->
|
|
</template>
|
|
|
|
<script setup>
|
|
import {useStore} from "@/store/store.js";
|
|
import {computed, defineAsyncComponent, ref} from "vue";
|
|
import {vaultAddress} from "@/blockchain/contract.js";
|
|
import {ensureVault} from "@/blockchain/wallet.js";
|
|
import CopyButton from "@/components/CopyButton.vue";
|
|
import NeedsProvider from "@/components/NeedsProvider.vue";
|
|
import Withdraw from "@/components/Withdraw.vue";
|
|
import PhoneCard from "@/components/PhoneCard.vue";
|
|
import Btn from "@/components/Btn.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
|
|
}
|
|
|
|
// todo remove automatic vault creation for Alpha 2
|
|
if(props.num===0 && !s.vault)
|
|
ensureVault()
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use "../styles/vars" as *;
|
|
p {
|
|
margin-top: 1.5em;
|
|
}
|
|
</style>
|