added: local currency conversion options

package.json

@@ -5,6 +5,7 @@
   "homepage": "https://dex.projectserum.com/",
   "dependencies": {
     "@ant-design/icons": "^4.2.1",
+    "@bandprotocol/bandchain.js": "^1.1.5",
     "@craco/craco": "^5.6.4",
     "@project-serum/serum": "0.13.5",
     "@project-serum/sol-wallet-adapter": "^0.1.1",

src/App.js

@@ -3,6 +3,7 @@ import './App.less';
 import { ConnectionProvider } from './utils/connection';
 import { MarketProvider } from './utils/markets';
 import { WalletProvider } from './utils/wallet';
+import { CurrencyProvider } from './utils/currency';
 import { GlobalStyle } from './global_style';
 import { Spin } from 'antd';
 import ErrorBoundary from './components/ErrorBoundary';
@@ -15,15 +16,17 @@ export default function App() {
       <GlobalStyle />
       <ErrorBoundary>
         <ConnectionProvider>
-          <MarketProvider>
-            <WalletProvider>
-              <PreferencesProvider>
-                <Suspense fallback={() => <Spin size="large" />}>
-                  <Routes />
-                </Suspense>
-              </PreferencesProvider>
-            </WalletProvider>
-          </MarketProvider>
+          <CurrencyProvider>
+            <MarketProvider>
+              <WalletProvider>
+                <PreferencesProvider>
+                  <Suspense fallback={() => <Spin size="large" />}>
+                    <Routes />
+                  </Suspense>
+                </PreferencesProvider>
+              </WalletProvider>
+            </MarketProvider>
+          </CurrencyProvider>
         </ConnectionProvider>
       </ErrorBoundary>
     </Suspense>

src/components/Orderbook.jsx

@@ -7,6 +7,7 @@ import { useInterval } from '../utils/useInterval';
 import FloatingElement from './layout/FloatingElement';
 import usePrevious from '../utils/usePrevious';
 import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
+import { useCurrencyContextState } from '../utils/currency';
 
 const Title = styled.div`
   color: rgba(255, 255, 255, 1);
@@ -86,6 +87,12 @@ export default function Orderbook({ smallScreen, depth = 7, onPrice, onSize }) {
     };
   }, [orderbook]);
 
+  const { stableRates, currencyRates, currency } = useCurrencyContextState();
+  const conversion =
+    stableRates[quoteCurrency] &&
+    stableRates[quoteCurrency].rate *
+      (currencyRates[currency] && currencyRates[currency].rate);
+
   function getCumulativeOrderbookSide(orders, totalSize, backwards = false) {
     let cumulative = orders
       .slice(0, depth)
@@ -111,7 +118,12 @@ export default function Orderbook({ smallScreen, depth = 7, onPrice, onSize }) {
         smallScreen ? { flex: 1 } : { height: '500px', overflow: 'hidden' }
       }
     >
-      <Title>Orderbook</Title>
+      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+        <Title>Orderbook </Title>
+        <Title>
+          1 {quoteCurrency} = {conversion && conversion.toFixed(4)} {currency}
+        </Title>
+      </div>
       <SizeTitle>
         <Col span={12} style={{ textAlign: 'left' }}>
           Size ({baseCurrency})
@@ -201,7 +213,9 @@ const OrderbookRow = React.memo(
 
 const MarkPriceComponent = React.memo(
   ({ markPrice }) => {
-    const { market } = useMarket();
+    const { quoteCurrency, market } = useMarket();
+    const { stableRates, currencyRates, currency } = useCurrencyContextState();
+
     const previousMarkPrice = usePrevious(markPrice);
 
     let markPriceColor =
@@ -216,6 +230,12 @@ const MarkPriceComponent = React.memo(
       market?.tickSize &&
       markPrice.toFixed(getDecimalCount(market.tickSize));
 
+    let convertedPrice = (
+      ((currencyRates[currency] && currencyRates[currency].rate) || 0) *
+      ((stableRates[quoteCurrency] && stableRates[quoteCurrency].rate) || 0) *
+      formattedMarkPrice
+    ).toFixed(4);
+
     return (
       <MarkPriceTitle justify="center">
         <Col style={{ color: markPriceColor }}>
@@ -225,7 +245,7 @@ const MarkPriceComponent = React.memo(
           {markPrice < previousMarkPrice && (
             <ArrowDownOutlined style={{ marginRight: 5 }} />
           )}
-          {formattedMarkPrice || '----'}
+          {formattedMarkPrice || '----'} ({convertedPrice} {currency})
         </Col>
       </MarkPriceTitle>
     );

src/components/TopBar.tsx

@@ -12,6 +12,7 @@ import {EndpointInfo} from "../utils/types";
 import {notify} from "../utils/notifications";
 import {Connection} from "@solana/web3.js";
 import WalletConnect from './WalletConnect';
+import {useCurrencyContextState} from "../utils/currency"
 
 const Wrapper = styled.div`
   background-color: #0d1017;
@@ -47,10 +48,12 @@ export default function TopBar() {
   const { connected, wallet, providerUrl, setProvider } = useWallet();
   const { endpoint, endpointInfo, setEndpoint, availableEndpoints, setCustomEndpoints } = useConnectionConfig();
   const [ addEndpointVisible, setAddEndpointVisible ] = useState(false)
-  const [ testingConnection, setTestingConnection] = useState(false)
+  const [testingConnection, setTestingConnection] = useState(false)
   const location = useLocation();
   const history = useHistory();
 
+  const { currencies, currency, setCurrency } = useCurrencyContextState();
+
   const handleClick = useCallback(
     (e) => {
       if (!(e.key in EXTERNAL_LINKS)) {
@@ -170,6 +173,21 @@ export default function TopBar() {
             </Menu.Item>
           </Menu.SubMenu>
         </Menu>
+        <div>
+          <Col>
+              <Select
+              value={currency}
+              onSelect={setCurrency}
+                style={{ marginRight: 8, width: '150px' }}
+              >
+                {currencies.map((cur) => (
+                  <Select.Option value={cur} key={cur}>
+                    {cur}
+                  </Select.Option>
+                ))}
+              </Select>
+            </Col>
+        </div>
         <div>
           <Row
             align="middle"

src/utils/currency.tsx

@@ -0,0 +1,64 @@
+
+import React, { useState, createContext, useContext, useEffect } from 'react'
+import BandChain from '@bandprotocol/bandchain.js'
+
+
+const CurrencyContext = React.createContext<null | any>(null);
+const bandchain = new BandChain("http://poa-api.bandchain.org")
+
+export function CurrencyProvider({ children }) {
+  const [currency, setCurrency] = useState("USD")
+  const [currencyRates, setCurrencyRates] = useState({})
+  const [stableRates, setStableRates] = useState({})
+
+  const currencies = ["USD", "CNY", "EUR","GBP","KRW","JPY","INR","RUB","CHF","AUD","BRL","CAD","HKD", "SGD"]
+  const stables = ["USDT", "USDC"]
+
+  useEffect(() => {
+    (async () => {
+      let currencyPairs: string[] = []
+      let stablePairs: string[] = []
+      currencies.map(cur => {
+        currencyPairs.push("USD/"+ cur)
+      })
+      stables.map(stable => {
+        stablePairs.push(stable+"/USD")
+      })
+      const latestCurrencies = await bandchain.getReferenceData(currencyPairs)
+      const latestStables = await bandchain.getReferenceData(stablePairs)
+      const currencyTemp = latestCurrencies.reduce((a, e) => {
+        let base = e["pair"].split("/")[1];
+        delete e.pair;
+        a[base] = {...e};
+        return { ...a }
+      }, {});
+      const stableTemp = latestStables.reduce((a, e) => {
+        let base = e["pair"].split("/")[0];
+        delete e.pair;
+        a[base] = {...e};
+        return { ...a }
+      }, {});
+      setCurrencyRates(currencyTemp)
+      setStableRates(stableTemp)
+    })()
+
+  },[])
+
+
+  return (
+    <CurrencyContext.Provider
+      value={{
+        currencies,
+        stables,
+        currency,
+        setCurrency,
+        currencyRates,
+        stableRates,
+      }}
+    >
+      {children}
+    </CurrencyContext.Provider>
+  );
+}
+
+export const useCurrencyContextState = () => useContext(CurrencyContext)