issue #867 2. added usd value using coingecko api

[sahil7886]

Description

Implements 2. in Issue #867
Added functionality to display the USD value of the connected wallet's APT balance. Created a new hook, useGetAPTPrice.ts that uses the coingecko api to fetch the current price of APT in USD. The BalanceCard.tsx then uses that hook to fetch the current price, do a few calculations on it and displays it. The USD Value only shows if the user has selected the mainnet.

Related Links

#867

Checklist

[gregnazario]

Awesome, we should make this getPrice and take in any coingecko Id.

Then we can use it for anything that has a coingecko ID

[sahil7886]

That makes a lot of sense. Changed that and set the default value of the argument to the aptos id, so as to not change existing implementations of the function.

[gregnazario]

Can we make the fallback null, so then we can handle elsewhere to hide the dollar amount if it doesn't apply.

[sahil7886]

Done.

[gregnazario]

Let me know if don't feel like changing it, and I will follow up later about it

[kaw2k]

Thank you for contributing! Some food for thought!

This lives in the hooks folder, however this as implemented is not a hook. I like the idea you were going with of having a separate fetch function and hook (ie: getPrice and useGetPrice). Perhaps export both functions, and the caller can choose which function to use.

Bellow is a simple example of how you might approach this. Note, this repo uses react-query which helps manage caching and state. Your code in BalanceCard.tsx can be simplified o remove the use of useState if you use react-query

import { useQuery } from "@tanstack/react-query";

export function useGetPrice(id: string) {
  return useQuery({
    queryKey: ["price", id],
    queryFn: () => getAPTPrice(id),
  });
}

// No need for state!
const {data: price} = useGetPrice('coin_id')

[sahil7886]

Understood. I've implemented the useGetPrice() hook using react query. Let me know if I've done it right and if any more changes need to made. I've also kept the getPrice() function there as it is. Would it make sense to add the getPrice() function to api/index.ts and keep just the hook in the useGetPrice.ts file?

[gregnazario]

Love it! Thank you. @kaw2k give it a second look

[kaw2k]

Nice work!