Add coingecko api

src/config/networks.ts

@@ -76,7 +76,7 @@ export const NetworkList: Networks = {
     },
     api: {
       unit: 'VARA',
-      priceTicker: 'VARAUSDT',
+      id: 'vara-network',
     },
     defaultFeeReserve: 0.1,
     maxExposurePageSize: new BigNumber(512),

src/config/plugins.ts

@@ -2,11 +2,11 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 // List of available plugins.
-export type Plugin = 'subscan' | 'binance_spot' | 'tips' | 'polkawatch';
+export type Plugin = 'subscan' | 'coingecko' | 'tips' | 'polkawatch';
 
 export const PluginsList: Plugin[] = [
   'subscan',
-  'binance_spot',
+  'coingecko',
   'tips',
   'polkawatch',
 ];

src/contexts/Plugins/Utils.ts

@@ -13,10 +13,10 @@ export const getAvailablePlugins = () => {
     true
   ) as Plugin[];
 
-  // If fiat is disabled, remove `binance_spot` service.
+  // If fiat is disabled, remove `coingecko` service.
   const DISABLE_FIAT = Number(import.meta.env.VITE_DISABLE_FIAT ?? 0);
-  if (DISABLE_FIAT && localPlugins.includes('binance_spot')) {
-    const index = localPlugins.indexOf('binance_spot');
+  if (DISABLE_FIAT && localPlugins.includes('coingecko')) {
+    const index = localPlugins.indexOf('coingecko');
     if (index !== -1) {
       localPlugins.splice(index, 1);
     }

src/hooks/usePrices/index.tsx

@@ -71,7 +71,7 @@ export const usePrices = () => {
 
   // servie toggle
   useEffect(() => {
-    if (plugins.includes('binance_spot')) {
+    if (plugins.includes('coingecko')) {
       if (priceHandle) {
         initiatePriceInterval();
       }

src/hooks/useUnitPrice/index.tsx

@@ -1,43 +1,36 @@
 // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-// import { NetworkList } from 'config/networks';
-// import { useNetwork } from 'contexts/Network';
+import { NetworkList } from 'config/networks';
+import { useNetwork } from 'contexts/Network';
 
 export const useUnitPrice = () => {
-  // const { network } = useNetwork();
-
-  const fetchUnitPrice = () =>
-    // const endpoint = `https://api.binance.com/api/v3/ticker/24hr?symbol=`;
-
-    // const urls = [`${endpoint}${NetworkList[network].api.priceTicker}`];
-
-    // const responses = await Promise.all(
-    //   urls.map((u) => fetch(u, { method: 'GET' }))
-    // );
-    // const texts = await Promise.all(responses.map((res) => res.json()));
-    // const newPrice = texts[0];
-
-    // if (
-    //   newPrice.lastPrice !== undefined &&
-    //   newPrice.priceChangePercent !== undefined
-    // ) {
-    //   const price: string = (Math.ceil(newPrice.lastPrice * 100) / 100).toFixed(
-    //     2
-    //   );
-
-    //   return {
-    //     lastPrice: price,
-    //     change: (Math.round(newPrice.priceChangePercent * 100) / 100).toFixed(
-    //       2
-    //     ),
-    //   };
-    // }
-
-    ({
-      lastPrice: '0',
-      change: 0,
-    });
+  const { network } = useNetwork();
+
+  const fetchUnitPrice = async () => {
+    const endpoint = `https://api.coingecko.com/api/v3/simple/price`;
+
+    const urls = [
+      `${endpoint}?ids=${NetworkList[network].api.id}&vs_currencies=usd&include_24hr_change=true`,
+    ];
+
+    const responses = await Promise.all(
+      urls.map((u) => fetch(u, { method: 'GET' }))
+    );
+    const texts = await Promise.all(responses.map((res) => res.json()));
+    const newPrice = texts[0][NetworkList[network].api.id];
+
+    if (newPrice.usd !== undefined && newPrice.usd_24h_change !== undefined) {
+      const price: string = (Math.ceil(newPrice.usd * 100) / 100).toFixed(2);
+
+      return {
+        lastPrice: price,
+        change: (Math.round(newPrice.usd_24h_change * 100) / 100).toFixed(2),
+      };
+    }
+
+    return null;
+  };
 
   return fetchUnitPrice;
 };

src/library/NetworkBar/index.tsx

@@ -85,7 +85,7 @@ export const NetworkBar = () => {
         </section>
         <section>
           <div className="hide-small">
-            {plugins.includes('binance_spot') && (
+            {plugins.includes('coingecko') && (
               <>
                 <div className="stat">
                   <span

src/locale/cn/modals.json

@@ -27,7 +27,7 @@
     "beingDestroyed": "正在销毁此池。",
     "belowExisting": "低于现有",
     "beyondMaxIncrease": "超出最大增量",
-    "binanceApi": "币安API",
+    "coingeckoApi": "CoinGecko API",
     "bond": "质押",
     "bondAll": "质押所有",
     "bondAllAvailable": "质押所有可用金额",

src/locale/en/modals.json

@@ -30,7 +30,7 @@
     "beingDestroyed": "This pool is being destroyed.",
     "belowExisting": "Below Existing",
     "beyondMaxIncrease": "Beyond Max Increase",
-    "binanceApi": "Binance Spot API",
+    "coingeckoApi": "CoinGecko API",
     "bond": "Bond",
     "bondAll": "Bond All",
     "bondAllAvailable": "Bond all available",

src/modals/Settings/index.tsx

@@ -33,9 +33,9 @@ export const Settings = () => {
           />
           {!DISABLE_FIAT && (
             <StatusButton
-              checked={plugins.includes('binance_spot')}
-              label={t('binanceApi')}
-              onClick={() => togglePlugin('binance_spot')}
+              checked={plugins.includes('coingecko')}
+              label={t('coingeckoApi')}
+              onClick={() => togglePlugin('coingecko')}
             />
           )}
 

src/pages/Overview/BalanceChart.tsx

@@ -153,7 +153,7 @@ export const BalanceChart = () => {
             zeroDecimals={2}
           />
           <span className="note">
-            {plugins.includes('binance_spot') ? (
+            {plugins.includes('coingecko') ? (
               <>&nbsp;{usdFormatter.format(freeFiat.toNumber())}</>
             ) : null}
           </span>

src/types.ts

@@ -92,7 +92,7 @@ export interface Network {
   };
   api: {
     unit: string;
-    priceTicker: string;
+    id: string;
   };
   defaultFeeReserve: number;
   maxExposurePageSize: BigNumber;