feat: Init Staking API GraphQL Plugin, discontinue Binance Spot (#2332)

packages/app/.env

@@ -1,6 +1,3 @@
-# Disable all mentioning of fiat values and token prices.
-# VITE_DISABLE_FIAT=1
-
 # Display an organisation label in the network bar.
 # VITE_ORGANISATION="© Parity Technologies"
 

packages/app/package.json

@@ -51,6 +51,7 @@
     "i18next-browser-languagedetector": "^8.0.0",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
+    "plugin-staking-api": "workspace:*",
     "qrcode-generator": "1.4.4",
     "rc-slider": "^11.1.6",
     "react": "^18.3.1",

packages/app/src/config/networks.ts

@@ -65,7 +65,6 @@ export const NetworkList: Networks = {
     },
     api: {
       unit: 'DOT',
-      priceTicker: 'DOTUSDT',
     },
     defaultFeeReserve: 0.1,
     maxExposurePageSize: new BigNumber(512),
@@ -121,7 +120,6 @@ export const NetworkList: Networks = {
     },
     api: {
       unit: 'KSM',
-      priceTicker: 'KSMUSDT',
     },
     defaultFeeReserve: 0.05,
     maxExposurePageSize: new BigNumber(512),
@@ -176,7 +174,6 @@ export const NetworkList: Networks = {
     },
     api: {
       unit: 'DOT',
-      priceTicker: 'DOTUSDT',
     },
     defaultFeeReserve: 0.1,
     maxExposurePageSize: new BigNumber(64),

packages/app/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 = 'staking_api' | 'subscan' | 'tips' | 'polkawatch';
 
 export const PluginsList: Plugin[] = [
+  'staking_api',
   'subscan',
-  'binance_spot',
   'tips',
   'polkawatch',
 ];

packages/app/src/contexts/Plugins/Utils.ts

@@ -6,21 +6,5 @@ import type { Plugin } from 'config/plugins';
 import { PluginsList } from 'config/plugins';
 
 // Get initial plugins from local storage.
-export const getAvailablePlugins = () => {
-  const localPlugins = localStorageOrDefault(
-    'plugins',
-    PluginsList,
-    true
-  ) as Plugin[];
-
-  // If fiat is disabled, remove `binance_spot` 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 (index !== -1) {
-      localPlugins.splice(index, 1);
-    }
-  }
-
-  return localPlugins;
-};
+export const getAvailablePlugins = () =>
+  localStorageOrDefault('plugins', PluginsList, true) as Plugin[];

packages/app/src/library/NetworkBar/TokenPrice.tsx

@@ -0,0 +1,58 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import { useEffectIgnoreInitial } from '@w3ux/hooks';
+import { useNetwork } from 'contexts/Network';
+import {
+  ApolloProvider,
+  client,
+  useTokenPrice,
+  formatResult,
+} from 'plugin-staking-api';
+
+export const TokenPriceInner = () => {
+  const {
+    networkData: {
+      api: { unit },
+    },
+  } = useNetwork();
+  const { loading, error, data, refetch } = useTokenPrice({
+    ticker: `${unit}USDT`,
+  });
+  const { price, change } = formatResult(loading, error, data);
+
+  const usdFormatter = new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+  });
+
+  // Initiate interval to refetch token price every 30 seconds.
+  useEffectIgnoreInitial(() => {
+    const interval = setInterval(() => {
+      refetch();
+    }, 30 * 1000);
+    return () => clearInterval(interval);
+  }, [refetch]);
+
+  return (
+    <>
+      <div className="stat">
+        <span
+          className={`change${change < 0 ? ' neg' : change > 0 ? ' pos' : ''}`}
+        >
+          {change < 0 ? '' : change > 0 ? '+' : ''}
+          {change}%
+        </span>
+      </div>
+      <div className="stat">
+        1 {unit} / {usdFormatter.format(price)}
+      </div>
+    </>
+  );
+};
+
+export const TokenPrice = () => (
+  <ApolloProvider client={client}>
+    <TokenPriceInner />
+  </ApolloProvider>
+);

packages/app/src/library/NetworkBar/index.tsx

@@ -6,7 +6,6 @@ import { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useApi } from 'contexts/Api';
 import { usePlugins } from 'contexts/Plugins';
-import { usePrices } from 'hooks/usePrices';
 import { useNetwork } from 'contexts/Network';
 import { Status } from './Status';
 import { Summary, Wrapper } from './Wrappers';
@@ -17,13 +16,13 @@ import BigNumber from 'bignumber.js';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faHive } from '@fortawesome/free-brands-svg-icons';
 import { Odometer } from '@w3ux/react-odometer';
+import { TokenPrice } from './TokenPrice';
 
 export const NetworkBar = () => {
   const { t } = useTranslation('library');
   const { plugins } = usePlugins();
   const { connectionType } = useApi();
   const { networkData, network } = useNetwork();
-  const prices = usePrices();
 
   const PRIVACY_URL = import.meta.env.VITE_PRIVACY_URL;
   const DISCLAIMER_URL = import.meta.env.VITE_DISCLAIMER_URL;
@@ -85,26 +84,8 @@ export const NetworkBar = () => {
         </section>
         <section>
           <div className="hide-small">
-            {plugins.includes('binance_spot') && (
-              <>
-                <div className="stat">
-                  <span
-                    className={`change${
-                      prices.change < 0
-                        ? ' neg'
-                        : prices.change > 0
-                          ? ' pos'
-                          : ''
-                    }`}
-                  >
-                    {prices.change < 0 ? '' : prices.change > 0 ? '+' : ''}
-                    {prices.change}%
-                  </span>
-                </div>
-                <div className="stat">
-                  1 {networkData.api.unit} / {prices.lastPrice} USD
-                </div>
-              </>
+            {plugins.includes('staking_api') && network !== 'westend' && (
+              <TokenPrice />
             )}
 
             <div className="stat last">

packages/app/src/locale/cn/modals.json

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

packages/app/src/locale/en/modals.json

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

packages/app/src/modals/Settings/index.tsx

@@ -12,15 +12,17 @@ export const Settings = () => {
   const { plugins, togglePlugin } = usePlugins();
   const { t } = useTranslation('modals');
 
-  // fetch flag to disable fiat
-  const DISABLE_FIAT = Number(import.meta.env.VITE_DISABLE_FIAT ?? 0);
-
   return (
     <>
       <Title title={t('settings')} />
       <ModalPadding>
         <ContentWrapper>
           <h4>{t('togglePlugins')}</h4>
+          <StatusButton
+            checked={plugins.includes('staking_api')}
+            label="Staking API"
+            onClick={() => togglePlugin('staking_api')}
+          />
           <StatusButton
             checked={plugins.includes('subscan')}
             label="Subscan API"
@@ -31,13 +33,6 @@ export const Settings = () => {
             label="Polkawatch API"
             onClick={() => togglePlugin('polkawatch')}
           />
-          {!DISABLE_FIAT && (
-            <StatusButton
-              checked={plugins.includes('binance_spot')}
-              label={t('binanceApi')}
-              onClick={() => togglePlugin('binance_spot')}
-            />
-          )}
 
           <h4>{t('toggleFeatures')}</h4>