dexorder/web
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

token metadata fixes for vault and orders view; faucet fix

Browse Source
This commit is contained in:
Tim
2024-03-26 14:55:07 -04:00
parent 9ab0f89950
commit 9e2f11b421
9 changed files with 95 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/blockchain/token.js
View File

@@ -2,6 +2,7 @@ import {socket} from "@/socket.js";
import {useStore} from "@/store/store.js"; import {useStore} from "@/store/store.js";
import {erc20Abi} from "@/blockchain/abi.js"; import {erc20Abi} from "@/blockchain/abi.js";
import {ethers} from "ethers"; import {ethers} from "ethers";
import {metadata, metadataMap} from "@/version.js";
// synchronous version may return null but will trigger a lookup // synchronous version may return null but will trigger a lookup
@@ -24,19 +25,31 @@ export function token(addr) {
// async version doesnt return until it has a token value // async version doesnt return until it has a token value
export async function getToken(addr) { export async function getToken(chainId, addr) {
// todo deprecated. use metadataMap[chainId][addr] // todo deprecated. use metadataMap[chainId][addr]
console.warn('getToken() is deprecated')
const s = useStore() const s = useStore()
if (addr===undefined) {
console.warn('getToken(addr) is deprecated. use getToken(chainId,addr)')
addr = chainId
chainId = s.chainId
}
let found = metadataMap[chainId][addr]
if (found)
return found
if (!(addr in s.tokens)) if (!(addr in s.tokens))
await addExtraToken(addr) await addExtraToken(chainId, addr)
return s.tokens[addr] return s.tokens[addr]
} }
const _inFlightLookups = {} const _inFlightLookups = {}
export async function addExtraToken(addr) { export async function addExtraToken(chainId, addr) {
if (addr===undefined) {
console.warn('addExtraToken(addr) is deprecated. use addExtraToken(chainId,addr)')
addr = chainId
chainId = s.chainId
}
if( !addr ) { if( !addr ) {
console.log('ignoring call to add extra token', addr) console.log('ignoring call to add extra token', addr)
return return
@@ -45,7 +58,6 @@ export async function addExtraToken(addr) {
_inFlightLookups[addr] = true _inFlightLookups[addr] = true
const prom = new Promise((resolve) => { const prom = new Promise((resolve) => {
const s = useStore() const s = useStore()
const chainId = s.chainId
console.log('querying token', addr) console.log('querying token', addr)
socket.emit('lookupToken', chainId, addr, (info) => { socket.emit('lookupToken', chainId, addr, (info) => {
console.log('server token info', addr, info) console.log('server token info', addr, info)

13
src/components/CopyButton.vue
View File

@@ -1,11 +1,14 @@
<template> <template>
<v-tooltip :model-value="!error&&copied" :open-on-hover="false"> <v-tooltip :model-value="!error&&copied" :open-on-hover="false">
<template v-slot:activator="{ props }"> <template v-slot:activator="{ props }">
<v-btn v-bind="props" v-if="permitted" rounded variant="text" size="small" density="compact" @click="copy()" <span v-bind="props" style="cursor: pointer" @click="copy()">
:class="error?'error':copied?'success':''" <v-btn v-bind="props" v-if="permitted" rounded variant="text" size="small" density="compact" @click="copy()"
:icon="error?'mdi-close-box-outline':copied?'mdi-check-circle-outline':'mdi-content-copy'" :class="error?'error':copied?'success':''"
:text="showText?text:''" :icon="error?'mdi-close-box-outline':copied?'mdi-check-circle-outline':'mdi-content-copy'"
/> :text="showText?text:''"
/>
<slot/>
</span>
</template> </template>
<span>Copied!</span> <span>Copied!</span>
</v-tooltip> </v-tooltip>

6
src/components/TokenAmount.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<span>{{fmtAmount}} {{ raw ? '' : (token.symbol || '') }}</span> <span>{{fmtAmount}} {{ raw ? '' : (token.s || '') }}</span>
</template> </template>
<script setup> <script setup>
@@ -14,9 +14,9 @@ const token = await getToken(props.addr)
const fmtAmount = computed(() => { const fmtAmount = computed(() => {
if( props.amount === null || props.amount === undefined ) if( props.amount === null || props.amount === undefined )
return '' return ''
return FixedNumber.fromValue(props.amount, token.decimals, { return FixedNumber.fromValue(props.amount, token.d, {
width: 256, width: 256,
decimals: token.decimals decimals: token.d
}).toUnsafeFloat().toPrecision(5) // todo precision }).toUnsafeFloat().toPrecision(5) // todo precision
}) })
</script> </script>

12
src/components/TokenRow.vue
View File

@@ -3,9 +3,9 @@
<td> <td>
<v-avatar v-if="imageSrc" :image="imageSrc"/> <v-avatar v-if="imageSrc" :image="imageSrc"/>
</td> </td>
<td class="d-none d-sm-table-cell">{{ token.name || '' }}</td> <td class="d-none d-sm-table-cell">{{ token.n || '' }}</td>
<td class="text-right">{{ fixed }}</td> <td class="text-right">{{ fixed }}</td>
<td class="text-left">{{ token.symbol }}</td> <td class="text-left">{{ token.s }}</td>
<!-- todo price and value columns --> <!-- todo price and value columns -->
<td> <td>
<v-menu> <v-menu>
@@ -13,9 +13,9 @@
<v-btn variant="plain" v-bind="props" icon="mdi-dots-vertical"/> <v-btn variant="plain" v-bind="props" icon="mdi-dots-vertical"/>
</template> </template>
<v-list> <v-list>
<v-list-subheader :title="token.symbol"/> <v-list-subheader :title="token.s"/>
<v-list-item title="Withdraw" key="withdraw" value="withdraw" prepend-icon="mdi-arrow-down-bold" <v-list-item title="Withdraw" key="withdraw" value="withdraw" prepend-icon="mdi-arrow-down-bold"
@click="()=>onWithdraw(token.address)"/> @click="()=>onWithdraw(token.a)"/>
</v-list> </v-list>
</v-menu> </v-menu>
</td> </td>
@@ -31,9 +31,9 @@ import {computed, ref} from "vue";
const s = useStore() const s = useStore()
const props = defineProps(['addr', 'amount', 'onWithdraw']) const props = defineProps(['addr', 'amount', 'onWithdraw'])
const token = await getToken(props.addr) const token = await getToken(props.addr)
const fixed = computed(() => FixedNumber.fromValue(props.amount, token.decimals, { const fixed = computed(() => FixedNumber.fromValue(props.amount, token.d, {
width: 256, width: 256,
decimals: token.decimals decimals: token.d
})) }))
const imageSrc = computed(() => token.image) const imageSrc = computed(() => token.image)
</script> </script>

3
src/components/Vault.vue
View File

@@ -53,8 +53,7 @@
Your Deposit Address {{ s.vaults.length > 1 ? '#' + (num + 1) : '' }} Your Deposit Address {{ s.vaults.length > 1 ? '#' + (num + 1) : '' }}
</v-card-title> <!-- todo vault nicknames --> </v-card-title> <!-- todo vault nicknames -->
<v-card-subtitle v-if="exists" class="overflow-x-hidden"> <v-card-subtitle v-if="exists" class="overflow-x-hidden">
<copy-button :text="addr"/> <copy-button :text="addr">{{addr}}</copy-button>
{{ addr }}
</v-card-subtitle> </v-card-subtitle>
<v-card-text v-if="empty"> <v-card-text v-if="empty">
<!-- <!--

18
src/components/chart/ChartOrders.vue
View File

@@ -1,15 +1,19 @@
<template> <template>
<div class="d-flex flex-column h-100"> <toolbar-pane title="Orders" icon="mdi-format-list-bulleted-square">
<toolbar title="Orders" icon="mdi-format-list-bulleted-square"> <needs-provider>
</toolbar> <needs-signer>
<orders-view/> <orders/>
</div> </needs-signer>
</needs-provider>
</toolbar-pane>
</template> </template>
<script setup> <script setup>
import Toolbar from "@/components/chart/Toolbar.vue"; import ToolbarPane from "@/components/chart/ToolbarPane.vue";
import OrdersView from "@/views/OrdersView.vue"; import NeedsProvider from "@/components/NeedsProvider.vue";
import Orders from "@/components/Orders.vue";
import NeedsSigner from "@/components/NeedsSigner.vue";
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

49
src/components/chart/ChartPlaceOrder.vue
View File

@@ -1,29 +1,27 @@
<template> <template>
<div class="d-flex flex-column h-100"> <toolbar-pane>
<toolbar> <template v-slot:toolbar>
<v-btn variant="flat" prepend-icon="mdi-plus" @click="co.newOrder" v-if="co.orders.length===0">New Order</v-btn> <v-btn variant="flat" prepend-icon="mdi-plus" @click="co.newOrder" v-if="co.orders.length===0">New Order</v-btn>
<v-btn variant="text" prepend-icon="mdi-send" @click="placeOrder" <v-btn variant="text" prepend-icon="mdi-send" @click="placeOrder"
:color="orderColor" v-if="co.orders.length>0" :disabled="co.drawing"> :color="orderColor" v-if="co.orders.length>0" :disabled="co.drawing">
Place Order Place Order
</v-btn> </v-btn>
<v-btn variant="flat" prepend-icon="mdi-cancel" v-if="co.orders.length>0" @click="cancelOrder">Cancel</v-btn> <v-btn variant="flat" prepend-icon="mdi-cancel" v-if="co.orders.length>0" @click="cancelOrder">Cancel</v-btn>
</toolbar> </template>
<v-dialog v-model="showCancel" max-width="300"> <!-- <div v-for="b in co.builderList">{{JSON.stringify(b)}}</div>-->
<v-card title="Cancel Order?" text="Do you want to cancel this order and create a new one?"> <template v-for="o in co.orders">
<v-card-actions> <chart-order :order="o"/>
<v-spacer/> </template>
<v-btn @click="()=>showCancel=false">Keep Existing</v-btn> <v-dialog v-model="showCancel" max-width="300">
<v-btn @click="()=>{co.orders.shift(); showCancel=false}" color="red">Cancel Order</v-btn> <v-card title="Cancel Order?" text="Do you want to cancel this order and create a new one?">
</v-card-actions> <v-card-actions>
</v-card> <v-spacer/>
</v-dialog> <v-btn @click="()=>showCancel=false">Keep Existing</v-btn>
<!-- <div v-for="b in co.builderList">{{JSON.stringify(b)}}</div>--> <v-btn @click="()=>{co.orders.shift(); showCancel=false}" color="red">Cancel Order</v-btn>
<div class="overflow-y-auto"> </v-card-actions>
<template v-for="o in co.orders"> </v-card>
<chart-order :order="o"/> </v-dialog>
</template> </toolbar-pane>
</div>
</div>
</template> </template>
<script setup> <script setup>
@@ -38,6 +36,7 @@ import {useTheme} from "vuetify";
import Toolbar from "@/components/chart/Toolbar.vue"; import Toolbar from "@/components/chart/Toolbar.vue";
import {Exchange, newOrder} from "@/blockchain/orderlib.js"; import {Exchange, newOrder} from "@/blockchain/orderlib.js";
import {pendOrder} from "@/blockchain/wallet.js"; import {pendOrder} from "@/blockchain/wallet.js";
import ToolbarPane from "@/components/chart/ToolbarPane.vue";
const s = useStore() const s = useStore()
const co = useChartOrderStore() const co = useChartOrderStore()

6
src/components/chart/ChartVault.vue
View File

@@ -1,11 +1,10 @@
<template> <template>
<div class="d-flex flex-column h-100"> <toolbar-pane title="Assets" icon="mdi-currency-btc">
<toolbar title="Assets" icon="mdi-currency-btc"></toolbar>
<needs-signer> <needs-signer>
<vault :owner="s.account" :num="0"/> <vault :owner="s.account" :num="0"/>
<faucet variant="outlined" text="Get Free Testnet Coins!" style="width: 15em"/> <faucet variant="outlined" text="Get Free Testnet Coins!" style="width: 15em"/>
</needs-signer> </needs-signer>
</div> </toolbar-pane>
</template> </template>
<script setup> <script setup>
@@ -15,6 +14,7 @@ import Vault from "@/components/Vault.vue";
import NeedsSigner from "@/components/NeedsSigner.vue"; import NeedsSigner from "@/components/NeedsSigner.vue";
import Faucet from "@/components/Faucet.vue"; import Faucet from "@/components/Faucet.vue";
import {useStore} from "@/store/store.js"; import {useStore} from "@/store/store.js";
import ToolbarPane from "@/components/chart/ToolbarPane.vue";
const s = useStore() const s = useStore()

22
src/components/chart/ToolbarPane.vue Normal file
View File

@@ -0,0 +1,22 @@
<template>
<div class="d-flex flex-column h-100">
<toolbar :title="title" :icon="icon">
<slot name="toolbar"/>
</toolbar>
<div class="overflow-y-auto">
<slot/>
</div>
</div>
</template>
<script setup>
import Toolbar from "@/components/chart/Toolbar.vue";
const props = defineProps(['title', 'icon'])
</script>
<style scoped lang="scss">
</style>