Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Extend Money Component to show fiat value #175

Merged
merged 7 commits into from
Mar 22, 2021
Merged

Extend Money Component to show fiat value #175

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2e8d6d3
Add kusama price component
Mar 10, 2021
425657d
Merge remote-tracking branch 'upstream/main' into feature/83
Mar 20, 2021
6bf5aca
Remove KusamaPrice component
Mar 20, 2021
23cf92f
Show fiat value for gallery item
Mar 20, 2021
40fad82
Extend Money component, get fiat value
Mar 20, 2021
22dab32
Merge branch 'main' into feature/83
Mar 22, 2021
133c973
Add axios instance for coingecko, move to separated file
Mar 22, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion dashboard/src/components/rmrk/Gallery/GalleryItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
</p>
<p class="subtitle is-size-7">
<b-tag v-if="hasPrice" type="is-dark" size="is-medium">
<Money :value="nft.price" :inline="true" />
<Money :value="nft.price" showFiatValue="usd" inline />
</b-tag>
<p v-if="!isLoading"
class="subtitle is-size-5">
Expand Down
51 changes: 44 additions & 7 deletions dashboard/src/components/shared/format/Money.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,30 @@
<template>
<div v-if="!inline">{{value | formatBalance(decimals, unit)}}</div>
<span v-else>{{value | formatBalance(decimals, unit)}}</span>
<div :class="['money', { 'money--inline': inline }]">
<span>
{{ value | formatBalance(decimals, unit) }}
</span>
<span v-if="fiatValue">
/ {{ fiatValue | formatBalance(decimals, showFiatValue.toUpperCase()) }}
</span>
</div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { mapGetters } from 'vuex'

import axios from 'axios'

@Component
export default class Money extends Vue {
@Prop({default: 0}) readonly value: number | string | undefined;
@Prop({default: 0}) readonly value: number | string | undefined
@Prop(Boolean) readonly inline!: boolean
@Prop({default: ''}) readonly showFiatValue!: string

private readonly apiUrl: string = 'https://api.coingecko.com/api/v3'
private readonly coinId: string = 'kusama'
private fiatValue: number = 0

get chainProperties() {
return this.$store.getters.getChainProperties;
return this.$store.getters.getChainProperties
}

get decimals(): number {
Expand All @@ -25,6 +35,33 @@ export default class Money extends Vue {
return this.chainProperties.tokenSymbol
}

}
public created() {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use mounted instead of created.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

changed but I don't know why do you want to use mounted here
with created hook we can get data faster

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I always used mounted for fetching. However, it looks like it doesn't matter.
https://stackoverflow.com/a/57089636

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I always use created for fetching because it's executed before mounted and I don't need DOM elements here

if (this.showFiatValue) {
this.getFiatValue()
}
}

private async getFiatValue() {
try {
const { data } = await axios.get(`${this.apiUrl}/simple/price`, {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would move this to separate file src/utils/coingecko.ts or src/coingecko.ts or under src/fetch.ts

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

moved to src/coingecko.ts please check if it is that you want, I've added just new axios instance with default url to coingecko

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If I misunderstood it and you wanted to move whole request to separate file just let me know

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I just wanted to move it so separate file

params: {
ids: this.coinId,
vs_currencies: this.showFiatValue
}
})

this.fiatValue = data[this.coinId][this.showFiatValue] * Number(this.value)
} catch (error) {
console.log(error)
}
}
}
</script>

<style lang="scss">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wow nice !

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

simple solution 😄

.money {
&--inline {
display: inline-block;
}
}
</style>