111 lines
2.4 KiB
Vue
111 lines
2.4 KiB
Vue
<template>
|
|
<PageToolbar
|
|
v-model:search="searchTerm"
|
|
search-label="Search an asset"
|
|
>
|
|
<UiButton
|
|
size="large"
|
|
@click="notify({ id: 'wip', type: 'warning', text: 'Work in progress' })"
|
|
>
|
|
Manage assets
|
|
</UiButton>
|
|
</PageToolbar>
|
|
|
|
<div class="asset-list">
|
|
<AssetCard
|
|
v-for="asset in filteredAssets"
|
|
:key="asset.code"
|
|
v-bind="asset"
|
|
:is-active="sidebarOptions.modelValue && sidebarOptions.attrs.asset?.code === asset.code"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useModal } from 'vue-final-modal'
|
|
import { AssetSidebar } from '#components'
|
|
|
|
definePageMeta({
|
|
middleware: ['auth'],
|
|
})
|
|
|
|
const { data: account } = useNuxtData('account')
|
|
|
|
const route = useRoute()
|
|
const notify = useNotify()
|
|
const { open, patchOptions, options: sidebarOptions } = useModal({
|
|
component: AssetSidebar,
|
|
attrs: {
|
|
projectId: route.params.projectId,
|
|
},
|
|
})
|
|
|
|
const searchTerm = ref('')
|
|
|
|
const assets = shallowRef([
|
|
'USDT:Tether',
|
|
'LTC:Litecoin',
|
|
'DOGE:Dogecoin',
|
|
'BTC:Bitcoin',
|
|
'XRP:Ripple',
|
|
'BNB:Binance',
|
|
'BAT:Basic Attention Token',
|
|
'EOS:EOS Network',
|
|
'MKR:Maker',
|
|
'DAI:Dai',
|
|
'ETH:Ethereum',
|
|
'DASH:Dash',
|
|
].map((item, idx) => {
|
|
const [code, name] = item.split(':')
|
|
const balance = $money.format(code === 'USDT' ? account.value.balance : 0, code)
|
|
const rate = code === 'USDT' ? 1 : 213.25
|
|
const withdraw = undefined
|
|
// const balance = $money.format(code === 'USDT' ? account.value.balance : 0.002741, code)
|
|
// const withdraw = idx % 2 !== 0 ? $money.format(0.15484, code) : undefined
|
|
const disabled = code !== 'USDT'
|
|
|
|
return {
|
|
code,
|
|
name,
|
|
balance,
|
|
rate,
|
|
withdraw,
|
|
disabled,
|
|
onClick: () => {
|
|
if (!disabled) {
|
|
patchOptions({
|
|
attrs: {
|
|
asset: {
|
|
code,
|
|
name,
|
|
balance,
|
|
rate,
|
|
withdraw,
|
|
},
|
|
},
|
|
})
|
|
|
|
open()
|
|
}
|
|
// else {
|
|
// notify({ type: 'warning', title: 'Work in progress', text: 'At the moment we only work with USDT', id: 'wip' })
|
|
// }
|
|
},
|
|
}
|
|
}))
|
|
|
|
const { result: filteredAssets } = useFuseSearch(assets, { keys: ['code', 'name'] }, searchTerm)
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.asset-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 16px;
|
|
padding: 16px;
|
|
border-radius: 12px;
|
|
background-color: $clr-white;
|
|
margin-top: 24px;
|
|
}
|
|
</style>
|