Merge pull request #4 from gear-foundation/vs/price-api

src/config/networks.ts

@@ -62,7 +62,7 @@ export const NetworkList: Networks = {
     },
     api: {
       unit: 'VARA',
-      priceTicker: 'VARAUSDT',
+      id: 'vara-network',
     },
     params: {
       ...DefaultParams,

src/consts.ts

@@ -35,7 +35,7 @@ export const TipsThresholdMedium = 1200;
  */
 export const PluginsList: Plugin[] = [
   'subscan',
-  'binance_spot',
+  'coingecko',
   'tips',
   'polkawatch',
 ];
@@ -64,9 +64,9 @@ export const MaxEraRewardPointsEras = 14;
  * Third party API keys and endpoints
  */
 export const ApiSubscanKey = 'd37149339f64775155a82a53f4253b27';
-export const EndpointPrice = 'https://api.binance.com/api/v3';
+export const EndpointPrice = 'https://api.coingecko.com/api/v3';
 export const ApiEndpoints = {
-  priceChange: `${EndpointPrice}/ticker/24hr?symbol=`,
+  priceChange: `${EndpointPrice}/simple/price`,
   subscanRewardSlash: '/api/v2/scan/account/reward_slash',
   subscanPoolRewards: '/api/scan/nomination_pool/rewards',
   subscanEraStat: '/api/scan/staking/era_stat',

src/contexts/Plugins/index.tsx

@@ -21,10 +21,10 @@ export const PluginsProvider = ({
       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);
     }
     return localPlugins;

src/library/Hooks/usePrices/index.tsx

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

src/library/Hooks/useUnitPrice/index.tsx

@@ -10,26 +10,26 @@ export const useUnitPrice = () => {
 
   const fetchUnitPrice = async () => {
     const urls = [
-      `${ApiEndpoints.priceChange}${NetworkList[network].api.priceTicker}`,
+      `${ApiEndpoints.priceChange}?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];
+    const newPrice = texts[0][NetworkList[network].api.id];
 
     if (
-      newPrice.lastPrice !== undefined &&
-      newPrice.priceChangePercent !== undefined
+      newPrice.usd !== undefined &&
+      newPrice.usd_24h_change !== undefined
     ) {
-      const price: string = (Math.ceil(newPrice.lastPrice * 100) / 100).toFixed(
+      const price: string = (Math.ceil(newPrice.usd * 100) / 100).toFixed(
         2
       );
 
       return {
         lastPrice: price,
-        change: (Math.round(newPrice.priceChangePercent * 100) / 100).toFixed(
+        change: (Math.round(newPrice.usd_24h_change * 100) / 100).toFixed(
           2
         ),
       };

src/library/NetworkBar/index.tsx

@@ -73,7 +73,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

@@ -25,7 +25,6 @@
     "beingDestroyed": "正在销毁此池。",
     "belowExisting": "低于现有",
     "beyondMaxIncrease": "超出最大增量",
-    "binanceApi": "币安API",
     "bond": "质押",
     "bondAll": "质押所有",
     "bondAllAvailable": "质押所有可用金额",
@@ -49,6 +48,7 @@
     "claimReward1": "提交后，收益将被绑定回提名池中。可以随时提取",
     "claimReward2": "提取收益将立即将其作为余额转入帐户",
     "claimsOnBehalf": "代表所有提名同一验证人的提名人申领收益。交易费通常更高,大多数提名人都依赖验证人代表他们进行收益申领",
+    "coingeckoApi": "CoinGecko API",
     "commissionRate": "佣金值率",
     "compound": "复利",
     "confirmReset": "确认重设",

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

@@ -161,7 +161,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/index.ts

@@ -58,7 +58,7 @@ export interface Network {
   };
   api: {
     unit: string;
-    priceTicker: string;
+    id: string;
   };
   params: Record<string, number>;
   defaultFeeReserve: number;
@@ -100,7 +100,7 @@ export type MaybeAddress = string | null;
 export type MaybeString = string | null;
 
 // list of available plugins.
-export type Plugin = 'subscan' | 'binance_spot' | 'tips' | 'polkawatch';
+export type Plugin = 'subscan' | 'coingecko' | 'tips' | 'polkawatch';
 
 // track the status of a syncing / fetching process.
 export type Sync = 'unsynced' | 'syncing' | 'synced';