chore: upgrade @tanstack/query to 5.0.0 and starlight-openapi to 0.3.1 (

#19) * chore: upgrade @tanstack/query and starlight-openapi * chore: update eslint rules * fix: remove tanstack rules, add on extends * chore: run pnpm dedupe --------- Co-authored-by: Stefano Faieta <[email protected]>
Folks-Finance · Oct 19, 2023 · b52490f · b52490f
1 parent db23155
commit b52490f
Show file tree

Hide file tree

Showing 8 changed files with 316 additions and 136 deletions.
diff --git a/apps/website/.eslintrc.cjs b/apps/website/.eslintrc.cjs
@@ -21,6 +21,7 @@ const config = {
     "plugin:astro/recommended",
     "plugin:astro/jsx-a11y-recommended",
     "plugin:tailwindcss/recommended",
+    "plugin:@tanstack/eslint-plugin-query/recommended",
     "prettier",
   ],
   plugins: ["import", "simple-import-sort", "unicorn"],

diff --git a/apps/website/package.json b/apps/website/package.json
@@ -18,8 +18,8 @@
     "@astrojs/starlight-tailwind": "^2.0.0",
     "@astrojs/tailwind": "^5.0.1",
     "@fontsource/poppins": "^5.0.8",
-    "@tanstack/react-query": "^4.35.3",
-    "@tanstack/react-query-devtools": "^4.35.3",
+    "@tanstack/react-query": "^5.0.0",
+    "@tanstack/react-query-devtools": "^5.0.1",
     "@tremor/react": "^3.8.1",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
@@ -36,7 +36,7 @@
     "sharp": "^0.32.5",
     "shiki": "^0.14.4",
     "spin-delay": "^1.2.0",
-    "starlight-openapi": "^0.3.0",
+    "starlight-openapi": "^0.3.1",
     "tailwind-merge": "^1.14.0",
     "tailwindcss": "^3.3.3",
     "ts-pattern": "^5.0.5"
@@ -45,7 +45,7 @@
     "@iconify-json/lucide": "^1.1.128",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
-    "@tanstack/eslint-plugin-query": "^4.34.1",
+    "@tanstack/eslint-plugin-query": "^5.0.0",
     "@typescript-eslint/eslint-plugin": "^6.7.0",
     "@typescript-eslint/parser": "^6.7.0",
     "eslint": "^8.49.0",

diff --git a/...src/modules/metrics/metrics-dashboard/token-fees-volume-chart/token-fees-volume-chart.tsx b/...src/modules/metrics/metrics-dashboard/token-fees-volume-chart/token-fees-volume-chart.tsx
@@ -21,20 +21,20 @@ export const TokenFeesVolumeChart = () => {
 
   const {
     folksRouterAssets,
-    isLoading: isFolksRouterAssetsLoading,
+    isPending: isFolksRouterAssetsPending,
     isError: isFolksRouterAssetsError,
   } = useFolksRouterAssets();
   const selectedTimeframe = timeframes[selectedTimeframeIndex] || timeframes[1];
   const {
     data,
-    isLoading: isFolksRouterAssetInfoLoading,
+    isPending: isFolksRouterAssetInfoPending,
     isError: isFolksRouterAssetInfoError,
   } = useFolksRouterAssetInfo({
     assetId,
     timeframe: selectedTimeframe,
   });
 
-  const isDataLoading = useSpinDelay(isFolksRouterAssetsLoading || isFolksRouterAssetInfoLoading, {
+  const isDataPending = useSpinDelay(isFolksRouterAssetsPending || isFolksRouterAssetInfoPending, {
     delay: 0,
     minDuration: 1500,
   });
@@ -75,7 +75,7 @@ export const TokenFeesVolumeChart = () => {
         <TimeframeChartTabs index={selectedTimeframeIndex} onIndexChange={setSelectedTimeframeIndex} />
       </div>
 
-      {isDataLoading ? (
+      {isDataPending ? (
         <div className="flex h-[22.235rem] w-full items-center justify-center tablet:h-[20rem]">
           <ChartSkeleton />
         </div>

diff --git a/apps/website/src/modules/metrics/metrics-dashboard/token-volume-chart/token-volume-chart.tsx b/apps/website/src/modules/metrics/metrics-dashboard/token-volume-chart/token-volume-chart.tsx
@@ -21,20 +21,20 @@ export const TokenVolumeChart = () => {
 
   const {
     folksRouterAssets,
-    isLoading: isFolksRouterAssetsLoading,
+    isPending: isFolksRouterAssetsPending,
     isError: isFolksRouterAssetsError,
   } = useFolksRouterAssets();
   const selectedTimeframe = timeframes[selectedTimeframeIndex] || timeframes[1];
   const {
     data,
-    isLoading: isFolksRouterAssetInfoLoading,
+    isPending: isFolksRouterAssetInfoPending,
     isError: isFolksRouterAssetInfoError,
   } = useFolksRouterAssetInfo({
     assetId,
     timeframe: selectedTimeframe,
   });
 
-  const isDataLoading = useSpinDelay(isFolksRouterAssetsLoading || isFolksRouterAssetInfoLoading, {
+  const isDataPending = useSpinDelay(isFolksRouterAssetsPending || isFolksRouterAssetInfoPending, {
     delay: 0,
     minDuration: 1500,
   });
@@ -75,7 +75,7 @@ export const TokenVolumeChart = () => {
         <TimeframeChartTabs index={selectedTimeframeIndex} onIndexChange={setSelectedTimeframeIndex} />
       </div>
 
-      {isDataLoading ? (
+      {isDataPending ? (
         <div className="flex h-[22.235rem] w-full items-center justify-center tablet:h-[20rem]">
           <ChartSkeleton />
         </div>

diff --git a/...metrics/metrics-dashboard/transaction-fees-volume-chart/transaction-fees-volume-chart.tsx b/...metrics/metrics-dashboard/transaction-fees-volume-chart/transaction-fees-volume-chart.tsx
@@ -19,13 +19,13 @@ export const TransactionFeesVolumeChart = () => {
 
   const {
     data,
-    isLoading: isFolksRouterDataLoading,
+    isPending: isFolksRouterDataPending,
     isError: isFolksRouterDataError,
   } = useFolksRouterData({
     timeframe: selectedTimeframe,
   });
 
-  const isDataLoading = useSpinDelay(isFolksRouterDataLoading, {
+  const isDataPending = useSpinDelay(isFolksRouterDataPending, {
     delay: 0,
     minDuration: 1500,
   });
@@ -58,7 +58,7 @@ export const TransactionFeesVolumeChart = () => {
         <TimeframeChartTabs index={selectedTimeframeIndex} onIndexChange={setSelectedTimeframeIndex} />
       </div>
 
-      {isDataLoading ? (
+      {isDataPending ? (
         <div className="flex h-[22.235rem] w-full items-center justify-center tablet:h-[20rem]">
           <ChartSkeleton />
         </div>

diff --git a/...c/modules/metrics/metrics-dashboard/transaction-volume-chart/transaction-volume-chart.tsx b/...c/modules/metrics/metrics-dashboard/transaction-volume-chart/transaction-volume-chart.tsx
@@ -19,13 +19,13 @@ export const TransactionVolumeChart = () => {
 
   const {
     data,
-    isLoading: isFolksRouterDataLoading,
+    isPending: isFolksRouterDataPending,
     isError: isFolksRouterDataError,
   } = useFolksRouterData({
     timeframe: selectedTimeframe,
   });
 
-  const isDataLoading = useSpinDelay(isFolksRouterDataLoading, {
+  const isDataPending = useSpinDelay(isFolksRouterDataPending, {
     delay: 0,
     minDuration: 1500,
   });
@@ -58,7 +58,7 @@ export const TransactionVolumeChart = () => {
         <TimeframeChartTabs index={selectedTimeframeIndex} onIndexChange={setSelectedTimeframeIndex} />
       </div>
 
-      {isDataLoading ? (
+      {isDataPending ? (
         <div className="flex h-[22.235rem] w-full items-center justify-center tablet:h-[20rem]">
           <ChartSkeleton />
         </div>

diff --git a/...c/modules/metrics/metrics-dashboard/transaction-wallet-chart/transaction-wallet-chart.tsx b/...c/modules/metrics/metrics-dashboard/transaction-wallet-chart/transaction-wallet-chart.tsx
@@ -18,13 +18,13 @@ export const TransactionWalletNumberChart = () => {
 
   const {
     data,
-    isLoading: isFolksRouterDataLoading,
+    isPending: isFolksRouterDataPending,
     isError: isFolksRouterDataError,
   } = useFolksRouterData({
     timeframe: selectedTimeframe,
   });
 
-  const isDataLoading = useSpinDelay(isFolksRouterDataLoading, {
+  const isDataPending = useSpinDelay(isFolksRouterDataPending, {
     delay: 0,
     minDuration: 1500,
   });
@@ -68,7 +68,7 @@ export const TransactionWalletNumberChart = () => {
         <TimeframeChartTabs index={selectedTimeframeIndex} onIndexChange={setSelectedTimeframeIndex} />
       </div>
 
-      {isDataLoading ? (
+      {isDataPending ? (
         <div className="flex h-[22.235rem] w-full items-center justify-center tablet:h-[20rem]">
           <ChartSkeleton />
         </div>