Skip to content

Commit

Permalink
add mobile view
Browse files Browse the repository at this point in the history
  • Loading branch information
@janmichek
janmichek committed Aug 7, 2024
1 parent c9a528f commit 7ebfae4
Show file tree
Hide file tree
Showing 3 changed files with 251 additions and 165 deletions.
86 changes: 64 additions & 22 deletions src/components/DexTradesTable.vue
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,49 @@
<template>
<table>
<!-- todo hints-->
<!-- todo mobile view-->
<!-- todo test-->
<!-- todo naming-->
<table class="dex-trades-table">
<tr>
<th>Hash</th>
<th>
Hash
<hint-tooltip>
{{ dexTradesHints.hash }}
</hint-tooltip>
</th>
<th>
<time-toggle-button>Executed</time-toggle-button>
<hint-tooltip>
{{ dexTradesHints.executed }}
</hint-tooltip>
</th>
<th>
Action
<hint-tooltip>
{{ dexTradesHints.action }}
</hint-tooltip>
</th>

<th>
Token Amount (Out)
<hint-tooltip>
{{ dexTradesHints.tokenAmountOut }}
</hint-tooltip>
</th>

<th>
Token Amount (In)
<hint-tooltip>
{{ dexTradesHints.tokenAmountIn }}
</hint-tooltip>
</th>
<th>
Swapped Rate
<hint-tooltip>
{{ dexTradesHints.swappedRate }}
</hint-tooltip>
</th>
<th>
Value
<hint-tooltip>
{{ dexTradesHints.value }}
</hint-tooltip>
</th>
<th>Action</th>
<th>Token Amount (In)</th>
Expand Down Expand Up @@ -37,35 +73,41 @@
{{ trade.action }}
</app-chip>
</td>

<td>
{{ formatNumber(trade.fromAmount) }}
<app-link
:to="`/tokens/${trade.fromContract}`">
{{ trade.fromToken }}
</app-link>
<price-label
:contract-id="trade.fromContract"
:currency="trade.fromToken"
:price="trade.fromAmount"
:max-digits="4"
:has-link="true"/>
</td>
<td>
<price-label
:contract-id="trade.toContract"
:currency="trade.toToken"
:price="trade.toAmount"
:max-digits="4"
:has-link="true"/>
</td>
<td>
<transaction-arrow-right-icon/>
<not-available-label v-if="!trade.rate"/>
{{ trade.rate }}
</td>
<td>
{{ formatNumber(trade.toAmount) }}
<app-link
:to="`tokens/${trade.toContract}`">
{{ trade.toToken }}
</app-link>
<not-available-label v-if="trade.value === '0'"/>
<template v-else>
$ {{ trade.value }}
</template>
</td>
<td>{{ trade.rate }}</td>
<td>$ {{ trade.value }}</td>
</tr>
</table>
</template>

<script setup>
import { dexTradesHints } from "@/utils/hints/dexTradesHints";
defineProps({
trades: {
type: Array,
type: Object,
required: true,
},
})
Expand Down
163 changes: 163 additions & 0 deletions src/components/DexTradesTableCondensed.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
<template>
<div>
<table
v-for="trade in trades.data"
:key="trade.txHash"
class="dex-trades-table-condensed__table">
<tbody>
<tr class="dex-trades-table-condensed__row">
<th class="dex-trades-table-condensed__header">
<app-tooltip>
Hash
<template #tooltip>
{{ dexTradesHints.hash }}
</template>
</app-tooltip>
</th>
<td class="dex-trades-table-condensed__data">
<value-hash-ellipsed
:link-to="`/transactions/${trade.txHash}`"
:hash="trade.txHash"/>
</td>
</tr>

<tr class="dex-trades-table-condensed__row">
<th class="dex-trades-table-condensed__header">
<app-tooltip>
<time-toggle-button>Executed</time-toggle-button>
<template #tooltip>
{{ dexTradesHints.executed }}
</template>
</app-tooltip>
</th>
<td class="dex-trades-table-condensed__data">
<block-time-cell
:height="trade.height"
:timestamp="trade.timestamp"/>
</td>
</tr>
<tr class="dex-trades-table-condensed__row">
<th class="dex-trades-table-condensed__header">
<app-tooltip>
Action
<template #tooltip>
{{ dexTradesHints.action }}
</template>
</app-tooltip>
</th>
<td class="dex-trades-table-condensed__data">
<app-chip :variant="getChipVariant(trade.action)">
{{ trade.action }}
</app-chip>
</td>
</tr>
<tr class="dex-trades-table-condensed__row">
<th class="dex-trades-table-condensed__header">
<app-tooltip>
Token Amount (Out)
<template #tooltip>
{{ dexTradesHints.tokenAmountOut }}
</template>
</app-tooltip>
</th>
<td class="dex-trades-table-condensed__data">
<price-label
:contract-id="trade.fromContract"
:currency="trade.fromToken"
:price="trade.fromAmount"
:max-digits="4"
:has-link="true"/>
</td>
</tr>
<tr class="dex-trades-table-condensed__row">
<th class="dex-trades-table-condensed__header">
<app-tooltip>
Token Amount (In)
<template #tooltip>
{{ dexTradesHints.tokenAmountIn }}
</template>
</app-tooltip>
</th>
<td class="dex-trades-table-condensed__data">
<price-label
:contract-id="trade.toContract"
:currency="trade.toToken"
:price="trade.toAmount"
:max-digits="4"
:has-link="true"/>
</td>
</tr>
<tr class="dex-trades-table-condensed__row">
<th class="dex-trades-table-condensed__header">
<app-tooltip>
Swapped Rate
<template #tooltip>
{{ dexTradesHints.swappedRate }}
</template>
</app-tooltip>
</th>
<td class="dex-trades-table-condensed__data">
<not-available-label v-if="!trade.rate"/>
{{ trade.rate }}
</td>
</tr>
<tr class="dex-trades-table-condensed__row">
<th class="dex-trades-table-condensed__header">
<app-tooltip>
Value
<template #tooltip>
{{ dexTradesHints.value }}
</template>
</app-tooltip>
</th>
<td class="dex-trades-table-condensed__data">
<not-available-label v-if="trade.value === '0'"/>
<template v-else>
$ {{ trade.value }}
</template>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script setup>
import { dexTradesHints } from '@/utils/hints/dexTradesHints'
defineProps({
trades: {
type: Object,
required: true,
},
})
function getChipVariant(action) {
const variants = {
BUY: 'error',
SELL: 'success',
SWAP: 'primary',
}
return variants[action]
}
</script>

<style scoped>
.dex-trades-table-condensed {
&__table {
padding: 0 var(--space-1) var(--space-7);
margin-bottom: var(--space-5);
}
&__header {
border-bottom: 1px solid var(--color-midnight-25);
}
&__row:last-of-type &__header {
border-bottom: 0;
}
&__data {
text-align: right;
}
}
</style>
Loading

0 comments on commit 7ebfae4

Please sign in to comment.