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)