Skip to content

Commit

Permalink
feat: adapt new graph endpoint for PoolDetailView
Browse files Browse the repository at this point in the history
  • Loading branch information
@tmrdlt @mmpetarpeshev
tmrdlt authored and mmpetarpeshev committed Nov 19, 2024
1 parent ad285d5 commit 9ff8ab3
Show file tree
Hide file tree
Showing 3 changed files with 44 additions and 143 deletions.
36 changes: 21 additions & 15 deletions src/components/explore/PriceHistoryGraph.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@
v-for="label in labels"
:key="label"
class="p-16 hidden md:block"
:fill="label === selectedChart ? 'light' : 'transparent'"
:fill="label.type === selectedChart.type ? 'light' : 'transparent'"
@click="changeChartContent(label)"
>
{{ label }}
{{ label.text }}
</ButtonDefault>
<div class="border border-gray-800 p-2 md:hidden rounded-xl">
<label for="chart-select" class="hidden">Select Option</label>
Expand All @@ -18,7 +18,7 @@
@change="changeChartContent($event.target.value)"
>
<option v-for="label in labels" :key="label" :value="label" class="bg-gray-800">
{{ label }}
{{ label.text }}
</option>
</select>
</div>
Expand Down Expand Up @@ -71,7 +71,6 @@ import {
import { Line, Bar } from 'vue-chartjs';
import 'chartjs-adapter-date-fns';
import ButtonDefault from '@/components/ButtonDefault.vue';
import BigNumber from 'bignumber.js';
const TIME_FRAMES = {
'1H': 1,
Expand Down Expand Up @@ -103,15 +102,17 @@ export default {
},
props: {
availableGraphTypes: { type: Array, required: true },
datasets: { type: Array, required: true },
x: { type: Array, required: true },
initialChart: { type: String, default: 'Volume' },
initialChart: { type: Object, required: true },
initialTimeFrame: { type: String, default: 'MAX' },
pairId: { type: String, default: null },
},
data() {
return {
selectedTimeFrame: null,
selectedChart: null,
selectedChart: {
type: null,
text: null,
},
colors: ['red', 'green', 'blue', 'purple', 'orange'],
timeFrames: TIME_FRAMES,
graph: {
Expand Down Expand Up @@ -150,7 +151,7 @@ export default {
ticks: {
// Include a dollar sign in the ticks
callback: (value) =>
['TVL', 'Fees', 'Volume'].includes(this.selectedChart) ? `$${value}` : value,
['TVL', 'Fees', 'Volume'].includes(this.selectedChart.type) ? `$${value}` : value,
},
},
},
Expand All @@ -164,18 +165,18 @@ export default {
labels: this.graph.labels.map((l) => Number(l)),
datasets: this.graph.datasets.map((d) => ({
label: d.label,
data: d.data.map((d) => Number(d)),
data: d.data.map((n) => Number(n)),
borderColor: 'rgb(0 255 157 / 80%)',
backgroundColor: 'rgb(0 255 157 / 80%)',
})),
};
},
showBar() {
return ['TVL', 'Volume', 'Fees', 'Locked'].includes(this.selectedChart);
return ['TVL', 'Volume', 'Fees', 'Locked'].includes(this.selectedChart.type);
},
},
async mounted() {
this.fetchData();
await this.fetchData();
},
created() {
this.selectedTimeFrame = this.initialTimeFrame;
Expand All @@ -188,14 +189,19 @@ export default {
},
changeChartContent(newChart) {
this.selectedChart = newChart;
this.fetchData();
},
async fetchData() {
this.loading = true;
this.graph.datasets = [];
this.graph = await this.$store.dispatch('backend/fetchGraph', {
graphType: this.selectedChart,
let options = {
graphType: this.selectedChart.type,
timeFrame: this.selectedTimeFrame,
});
};
if (this.pairId) {
options = { ...options, pairAddress: this.pairId };
}
this.graph = await this.$store.dispatch('backend/fetchGraph', options);
this.loading = false;
},
},
Expand Down
59 changes: 4 additions & 55 deletions src/views/ExploreView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,15 @@
<div class="flex-1">
<h1 class="text-2xl">TVL</h1>
<PriceHistoryGraph
v-if="graphData"
:x="graphData.x"
:available-graph-types="['TVL']"
:datasets="tvl"
initial-chart="TVL"
:available-graph-types="[{ type: 'TVL', text: 'TVL' }]"
:initial-chart="{ type: 'TVL', text: 'TVL' }"
/>
</div>
<div class="flex-1">
<h1 class="text-2xl">Volume</h1>
<PriceHistoryGraph
v-if="graphData"
:x="graphData.x"
:available-graph-types="['Volume']"
:datasets="volume"
initial-chart="Volume"
:available-graph-types="[{ type: 'Volume', text: 'Volume' }]"
:initial-chart="{ type: 'Volume', text: 'Volume' }"
/>
</div>
</div>
Expand Down Expand Up @@ -74,7 +68,6 @@
import { defineComponent } from 'vue';
import ExploreWrapper from '@/components/explore/ExploreWrapper.vue';
import { mapGetters } from 'vuex';
import BigNumber from 'bignumber.js';
import PriceHistoryGraph from '@/components/explore/PriceHistoryGraph.vue';
import PairTable from '@/components/explore/PairTable.vue';
import TransactionTable from '@/components/explore/TransactionTable.vue';
Expand All @@ -101,12 +94,6 @@ export default defineComponent({
},
computed: {
...mapGetters(['activeNetwork']),
tvl() {
return [this.graphData.datasets[0]];
},
volume() {
return [this.graphData.datasets[1]];
},
pairTable() {
return this.pairs.map((pair) => ({
...pair,
Expand All @@ -124,44 +111,6 @@ export default defineComponent({
tokenTable() {
return [...this.tokenMap.values()];
},
graphData() {
let tvl = new BigNumber(0);
return this.history.reduce(
(acc, tx) => {
// TVL
// deltaUsdValue is already calculated but absolute, so we need to check the deltaReserve to get the sign
const delta0 = new BigNumber(tx.delta0UsdValue).times(Math.sign(tx.deltaReserve0));
const delta1 = new BigNumber(tx.delta1UsdValue).times(Math.sign(tx.deltaReserve1));
tvl = tvl.plus(delta0.isNaN() ? 0 : delta0).plus(delta1.isNaN() ? 0 : delta1);
acc.datasets[0].data = [...acc.datasets[0].data, tvl.toString()].map((d) => d || 0);
// VOLUME
if (tx.type === 'SwapTokens') {
acc.datasets[1].data = [
...acc.datasets[1].data,
new BigNumber(tx.delta0UsdValue).plus(tx.delta1UsdValue).toString(),
].map((d) => d || 0);
} else {
acc.datasets[1].data = [...acc.datasets[1].data, 0].map((d) => d || 0);
}
acc.x = [...acc.x, tx.microBlockTime];
return acc;
},
{
x: [],
datasets: [
{
label: 'TVL',
data: [],
},
{
label: 'Volume',
data: [],
},
],
},
);
},
},
async mounted() {
// fetch all tokens
Expand Down
92 changes: 19 additions & 73 deletions src/views/PoolDetailView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,29 @@
<div class="flex flex-row px-6 pt-6 items-center">
<span v-if="pairId" class="logo"><AddressAvatar :address="pairId" /></span>
<h1 class="text-2xl">
<router-link :to="`/explore/tokens/${pair?.token0.address}`">{{
pair?.token0.symbol
}}</router-link>
<router-link :to="`/explore/tokens/${pair?.token0.address}`"
>{{ pair?.token0.symbol }}
</router-link>
/
<router-link :to="`/explore/tokens/${pair?.token1.address}`">{{
pair?.token1.symbol
}}</router-link>
<router-link :to="`/explore/tokens/${pair?.token1.address}`"
>{{ pair?.token1.symbol }}
</router-link>
</h1>
</div>
<div class="flex flex-col md:flex-row">
<div class="flex-auto p-4 md:p-6">
<PriceHistoryGraph :loading="loading" :datasets="graphData.datasets" :x="graphData.x" />
<PriceHistoryGraph
v-if="pair"
:available-graph-types="[
{ type: 'Price0_1', text: `${pair?.token1.symbol} / ${pair?.token0.symbol} Price` },
{ type: 'Price1_0', text: `${pair?.token0.symbol} / ${pair?.token1.symbol} Price` },
{ type: 'TVL', text: 'TVL' },
{ type: 'Fees', text: 'Fees' },
{ type: 'Volume', text: 'Volume' },
]"
:initial-chart="{ type: 'Volume', text: 'Volume' }"
:pair-id="pairId"
/>
</div>
<div class="flex flex-col flex-auto p-4 md:p-0 md:mr-2">
<div class="flex flex-row space-x-2 mb-4">
Expand All @@ -31,7 +42,7 @@
})
"
>
{{ $t('poolDetail.swap') }}
{{ $t('poolDetail.swap') }}x
</ButtonDefault>
<ButtonDefault
fill="light"
Expand Down Expand Up @@ -185,71 +196,6 @@ export default defineComponent({
const tx = this.history[this.history.length - 1];
return formatAmountPretty(tx?.reserve1, this.pair?.token1.decimals);
},
graphData() {
return this.history.reduce(
(acc, tx) => {
// Price 0/1
acc.datasets[0].data = [
...acc.datasets[0].data,
new BigNumber(tx.reserve0)
.div(BigNumber(10).pow(this.pair.token0.decimals))
.div(new BigNumber(tx.reserve1).div(BigNumber(10).pow(this.pair.token1.decimals)))
.toString(),
].map((d) => d || 0);
// Price 1/0
acc.datasets[1].data = [
...(acc.datasets[1].data || []),
new BigNumber(tx.reserve1)
.div(BigNumber(10).pow(this.pair.token1.decimals))
.div(new BigNumber(tx.reserve0).div(BigNumber(10).pow(this.pair.token0.decimals)))
.toString(),
].map((d) => d || 0);
// TVL
acc.datasets[2].data = [
...acc.datasets[2].data,
new BigNumber(tx.reserve0Usd).plus(tx.reserve1Usd).toString(),
].map((d) => d || 0);
// Fee
acc.datasets[3].data = [...acc.datasets[3].data, tx.txUsdFee].map((d) => d || 0);
// Volume
if (tx.type === 'SwapTokens') {
acc.datasets[4].data = [
...acc.datasets[4].data,
new BigNumber(tx.delta0UsdValue).plus(tx.delta1UsdValue).toString(),
].map((d) => d || 0);
} else {
acc.datasets[4].data = [...acc.datasets[4].data, 0].map((d) => d || 0);
}
acc.x = [...acc.x, tx.microBlockTime];
return acc;
},
{
x: [],
datasets: [
{
label: `${this.pair?.token1.symbol} / ${this.pair?.token0.symbol} Price`,
data: [],
},
{
label: `${this.pair?.token0.symbol} / ${this.pair?.token1.symbol} Price`,
data: [],
},
{
label: 'TVL',
data: [],
},
{
label: 'Fees',
data: [],
},
{
label: 'Volume',
data: [],
},
],
},
);
},
},
async mounted() {
this.loading = true;
Expand Down

0 comments on commit 9ff8ab3

Please sign in to comment.