Fix for charts using USD for points instead of user selected currency (…

…#6051) * fix chart points in wrong currency * format
rainbow-me · Aug 30, 2024 · 5516162 · 5516162
1 parent 63aafb9
commit 5516162
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 7 deletions.
diff --git a/src/graphql/queries/metadata.graphql b/src/graphql/queries/metadata.graphql
@@ -571,8 +571,17 @@ query tokenMetadata($address: String!, $chainId: Int!, $currency: String) {
   }
 }
 
-query priceChart($chainId: Int!, $address: String!, $day: Boolean!, $hour: Boolean!, $week: Boolean!, $month: Boolean!, $year: Boolean!) {
-  token(chainID: $chainId, address: $address) {
+query priceChart(
+  $chainId: Int!
+  $address: String!
+  $currency: String
+  $day: Boolean!
+  $hour: Boolean!
+  $week: Boolean!
+  $month: Boolean!
+  $year: Boolean!
+) {
+  token(chainID: $chainId, address: $address, currency: $currency) {
     priceCharts {
       day @include(if: $day) {
         points

diff --git a/src/hooks/charts/useChartInfo.ts b/src/hooks/charts/useChartInfo.ts
@@ -4,6 +4,7 @@ import { DEFAULT_CHART_TYPE } from '../../redux/charts';
 import { metadataClient } from '@/graphql';
 import { useQuery } from '@tanstack/react-query';
 import { createQueryKey } from '@/react-query';
+import { SupportedCurrencyKey } from '@/references';
 import { ChainId } from '@/networks/types';
 
 const chartTimes = ['hour', 'day', 'week', 'month', 'year'] as const;
@@ -15,17 +16,37 @@ const getChartTimeArg = (selected: ChartTime) =>
 
 export type ChartData = { x: number; y: number };
 
-const fetchPriceChart = async (time: ChartTime, chainId: ChainId, address: string) => {
+const fetchPriceChart = async ({
+  address,
+  chainId,
+  currency,
+  time,
+}: {
+  address: string;
+  chainId: ChainId;
+  currency: SupportedCurrencyKey;
+  time: ChartTime;
+}) => {
   const priceChart = await metadataClient
-    .priceChart({ address, chainId, ...getChartTimeArg(time) })
+    .priceChart({ address, chainId, currency, ...getChartTimeArg(time) })
     .then(d => d.token?.priceCharts[time] as PriceChartTimeData);
   return priceChart?.points?.reduce((result, point) => {
     result.push({ x: point[0], y: point[1] });
     return result;
   }, [] as ChartData[]);
 };
 
-export const usePriceChart = ({ mainnetAddress, address, chainId }: { mainnetAddress?: string; address: string; chainId: ChainId }) => {
+export const usePriceChart = ({
+  mainnetAddress,
+  address,
+  currency,
+  chainId,
+}: {
+  mainnetAddress?: string;
+  address: string;
+  currency: SupportedCurrencyKey;
+  chainId: ChainId;
+}) => {
   const { setParams } = useNavigation();
   const updateChartType = useCallback(
     (type: ChartTime) => {
@@ -41,8 +62,9 @@ export const usePriceChart = ({ mainnetAddress, address, chainId }: { mainnetAdd
   const chartType = params?.chartType ?? DEFAULT_CHART_TYPE;
   const query = useQuery({
     queryFn: async () => {
-      const chart = await fetchPriceChart(chartType, chainId, address);
-      if (!chart && mainnetAddress) return fetchPriceChart(chartType, ChainId.mainnet, mainnetAddress);
+      const chart = await fetchPriceChart({ address, chainId, currency, time: chartType });
+      if (!chart && mainnetAddress)
+        return fetchPriceChart({ address: mainnetAddress, chainId: ChainId.mainnet, currency, time: chartType });
       return chart || null;
     },
     queryKey: createQueryKey('price chart', { address, chainId, chartType }),

diff --git a/src/hooks/charts/useChartThrottledPoints.ts b/src/hooks/charts/useChartThrottledPoints.ts
@@ -100,6 +100,7 @@ export default function useChartThrottledPoints({
     address: asset.address,
     chainId: asset.chainId,
     mainnetAddress: asset?.mainnet_address || asset?.mainnetAddress,
+    currency: nativeCurrency,
   });
   const [throttledPoints, setThrottledPoints] = useState(() => traverseData({ nativePoints: [], points: [] }, chart));