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.

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

Extend Money Component to show fiat value #175

Merged
merged 7 commits into from
Mar 22, 2021

Conversation

JKrupinski
Copy link
Contributor

This is related to #83

Where do you want to show kusama price?
Can I use coingecko api to get it? (Rate Limit: 100 requests/minute)

For now it looks like this (bottom right corner)
alt test

@vikiival
Copy link
Member

Hey @JKrupinski,

I would extend the Money component with a prop showFiatValue which would take fiat compatible argument for coingecko (it think eur / usd) .

Fiat value is important in the NFT detail.
Screenshot 2021-03-10 at 22 22 54

@JKrupinski
Copy link
Contributor Author

@vikiival Do you mean extend '@/components/shared/format/Money.vue'; component, add showFiatValue as a prop and import in my KusamaPrice component? or am I wrong

@yangwao
Copy link
Member

yangwao commented Mar 16, 2021

@JKrupinski yup, I guess so.

I mean showing price without context doesn't make any sense, so having it next to the value of NFT would give most of the contextual sense to me :)

Don't forget to post your KSM address! :)

@JKrupinski
Copy link
Contributor Author

@vikiival please review my code
it will look like this:

alt gallery item

@JKrupinski JKrupinski changed the title Add kusama price component Extend Money Component to show fiat value Mar 20, 2021
@yangwao yangwao mentioned this pull request Mar 22, 2021
@vikiival vikiival self-requested a review March 22, 2021 18:20
@vikiival vikiival added the UX first Improvement for UX label Mar 22, 2021
@vikiival vikiival added this to the Milestone 1.5 milestone Mar 22, 2021
Copy link
Member

@vikiival vikiival left a comment

Choose a reason for hiding this comment

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

Please fix those minor things.
On the other hand you made awesome job!

@@ -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


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

</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 😄

@vikiival vikiival merged commit fa71e04 into kodadot:main Mar 22, 2021
@JKrupinski JKrupinski deleted the feature/83 branch March 22, 2021 19:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
UX first Improvement for UX
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants