Issue 588 ✨ feature invert all prices for stablecoin pairs

.env.development

@@ -10,7 +10,10 @@ NEXT_PUBLIC_PORTAL_ID=20146426
 NEXT_PUBLIC_SUBSCRIBER_FORM_ID=f4023600-6995-433b-894a-2a1ab09dc2f6
 
 NEXT_PUBLIC_SUPPORT_FORM_ID=282959ce-3633-4a73-907a-ef84cebe1123
+NEXT_PUBLIC_HUBSPOT_APIKEY=3382e6ff-1c9c-43f1-a622-52f60c30cce3
+
+ANALYTICS_TINYMAN_V1_API=https://testnet.analytics.tinyman.org/api/v1
 
 HUBSPOT_APIKEY=<secret>
 ALGODEX_API_V2=http://testnet-services-2.algodex.com:8080
-SKIP_PRERENDER_EXCEPT_DEFAULT=1
+SKIP_PRERENDER_EXCEPT_DEFAULT=1

.env.test

@@ -2,4 +2,6 @@ NEXT_PUBLIC_ENV=development
 NEXT_PUBLIC_API=https://api-testnet-public.algodex.com
 NEXT_PUBLIC_DEBUG=true
 DISABLE_SENTRY=true
+
+ANALYTICS_TINYMAN_V1_API=https://testnet.analytics.tinyman.org/api/v1
 ALGODEX_API_V2=http://testnet-services-2.algodex.com:3006

components/Asset/Chart/Chart.jsx

@@ -21,6 +21,7 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 import ChartOverlay from './ChartOverlay'
 import ChartSettings from './ChartSettings'
 import PropTypes from 'prop-types'
+import floatToFixed from '@algodex/algodex-sdk/lib/utils/format/floatToFixed'
 import millify from 'millify'
 import styled from '@emotion/styled'
 import useAreaChart from './hooks/useAreaChart'
@@ -117,18 +118,30 @@ export function Chart({
   interval: _interval,
   mode: _mode,
   volume,
+  algoVolume,
   ohlc,
   overlay: _overlay,
   onChange
 }) {
   // console.log(`Chart(`, arguments[0], `)`)
+
   const [interval, setInterval] = useState(_interval)
   const [overlay, setOverlay] = useState(_overlay)
   const [chartMode, setChartMode] = useState(_mode)
   const [currentLogical, setCurrentLogical] = useState(ohlc.length - 1)
+  // Update ohlc data when it is stable asset
+  algoVolume = [...volume] // temporary solution: should be updated from backend
+  if (asset.isStable) {
+    ohlc.forEach((ele, index) => {
+      ohlc[index].open = ele.open != 0 ? floatToFixed(1 / ele.open) : 'Invalid'
+      ohlc[index].low = ele.low != 0 ? floatToFixed(1 / ele.low) : 'Invalid'
+      ohlc[index].high = ele.high != 0 ? floatToFixed(1 / ele.high) : 'Invalid'
+      ohlc[index].close = ele.close != 0 ? floatToFixed(1 / ele.close) : 'Invalid'
+    })
+  }
 
   useEffect(() => {
-    setOverlay(_overlay)
+    // setOverlay(_overlay)
     setCurrentLogical(ohlc.length - 1)
   }, [ohlc, _overlay, setOverlay])
 
@@ -167,23 +180,36 @@ export function Chart({
 
   const updateHoverPrices = useCallback(
     (logical) => {
-      if (ohlc == null || volume == null) {
-        return
+      if (asset.isStable) {
+        if (ohlc == null || algoVolume == null) {
+          return
+        }
+      } else {
+        if (ohlc == null || volume == null) {
+          return
+        }
       }
+
       const priceEntry = ohlc[logical]
       const volumeEntry = volume[logical]
-
+      const algoVolumeEntry = algoVolume[logical]
       setOverlay({
         ...overlay,
         ohlc: priceEntry,
-        volume: volumeEntry != null ? millify(volumeEntry.value) : '0'
+        volume: volumeEntry != null ? millify(volumeEntry.value) : '0',
+        algoVolume: algoVolumeEntry != null ? millify(algoVolumeEntry.value) : '0'
       })
     },
-    [ohlc, volume, setOverlay, overlay]
+    [ohlc, volume, setOverlay, overlay, asset, algoVolume]
   )
 
   const mouseOut = useCallback(() => {
-    setOverlay(_overlay)
+    if (asset.isStable) {
+      const __overlay = { ...overlay, ..._overlay }
+      setOverlay(__overlay)
+    } else {
+      setOverlay(_overlay)
+    }
   }, [setOverlay, _overlay])
 
   const mouseMove = useCallback(
@@ -197,12 +223,17 @@ export function Chart({
       const rect = ReactDOM.findDOMNode(ev.target).getBoundingClientRect()
       const x = ev.clientX - rect.left
       const logical = candleChart.timeScale().coordinateToLogical(x)
-
-      if (logical >= ohlc.length || logical >= volume.length) {
-        setOverlay(_overlay)
-        return
+      if (asset.isStable) {
+        if (logical >= ohlc.length || logical >= algoVolume.length) {
+          // setOverlay(_overlay)
+          return
+        }
+      } else {
+        if (logical >= ohlc.length || logical >= volume.length) {
+          // setOverlay(_overlay)
+          return
+        }
       }
-
       if (logical !== currentLogical) {
         setCurrentLogical(logical)
         updateHoverPrices(logical)
@@ -218,6 +249,8 @@ export function Chart({
       setCurrentLogical,
       updateHoverPrices,
       volume,
+      algoVolume,
+      asset.isStable,
       ohlc
     ]
   )
@@ -247,7 +280,7 @@ export function Chart({
           bid={overlay.orderbook.bid}
           ask={overlay.orderbook.ask}
           spread={overlay.orderbook.spread}
-          volume={overlay.volume}
+          volume={asset.isStable ? overlay.algoVolume : overlay.volume}
         />
       )}
       {typeof overlay.ohlc === 'undefined' && (
@@ -257,7 +290,7 @@ export function Chart({
           bid={_overlay.orderbook.bid}
           ask={_overlay.orderbook.ask}
           spread={_overlay.orderbook.spread}
-          volume={_overlay.volume}
+          volume={asset.isStable ? _overlay.algoVolume : _overlay.volume}
         />
       )}
       <SettingsContainer>
@@ -270,7 +303,8 @@ export function Chart({
 Chart.propTypes = {
   asset: PropTypes.shape({
     id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-    decimals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
+    decimals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    isStable: PropTypes.bool
   }).isRequired,
   interval: PropTypes.string.isRequired,
   mode: PropTypes.string.isRequired,
@@ -282,6 +316,7 @@ Chart.propTypes = {
       close: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
     }),
     volume: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    algoVolume: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     orderbook: PropTypes.shape({
       bid: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
       ask: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -290,6 +325,7 @@ Chart.propTypes = {
   }),
   ohlc: PropTypes.array.isRequired,
   volume: PropTypes.array.isRequired,
+  algoVolume: PropTypes.array,
   onChange: PropTypes.func
 }
 

components/Asset/Chart/ChartOverlay.jsx

@@ -238,9 +238,16 @@ function ChartOverlay(props) {
               color={theme.palette.gray['500']}
             />
           )}
-          <div>
-            &nbsp;<span>{`${asset.name} `}</span> / ALGO
-          </div>
+          {!asset.isStable && (
+            <div>
+              &nbsp;<span>{`${asset.name} `}</span> / ALGO
+            </div>
+          )}
+          {asset.isStable && (
+            <div>
+              <span>ALGO</span> / {`${asset.name} `}
+            </div>
+          )}
           <div>
             <IconButton onClick={onClick} type="button">
               <Info />
@@ -267,6 +274,10 @@ function ChartOverlay(props) {
           <OhlcItem value={changeAmt}>
             <dd data-testid="dailyChange">{openCloseChange}</dd>
           </OhlcItem>
+          {/* <OhlcItem value={volume}>
+            <dt>Volume:</dt>
+            <dd data-testid="volume">{volume}</dd>
+          </OhlcItem> */}
         </OhlcList>
       </Header>
       <BidAskSpreadContainer>
@@ -277,7 +288,9 @@ function ChartOverlay(props) {
       <VolumeContainer>
         <Volume>
           <dt>Vol:</dt>
-          <dd>{`${volume} ${asset.name}`}</dd>
+          {/* <dd>{`${volume} ${asset.name}`}</dd> */}
+          {asset.isStable && <dd>{`${volume} ALGO`}</dd>}
+          {!asset.isStable && <dd>{`${volume} ${asset.name}`}</dd>}
         </Volume>
       </VolumeContainer>
     </Container>
@@ -292,5 +305,4 @@ ChartOverlay.propTypes = {
   spread: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   volume: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 }
-
 export default ChartOverlay

components/Asset/OrderBook/OrderBook.jsx

@@ -382,9 +382,11 @@ const DECIMALS_MAP = {
   },[asset.decimals, maxSpendableAlgo])
 
   const reduceOrders = useCallback((result, order) => {
-    const _price = floatToFixedDynamic(order.price, selectedPrecision, selectedPrecision)
-
-    const _amount = order.amount
+    // const _price = floatToFixedDynamic(order.price, selectedPrecision, selectedPrecision)
+    const _amount = asset.isStable ? order.amount * order.price : order.amount
+    const _price = asset.isStable
+      ? floatToFixedDynamic(1 / order.price, selectedPrecision, selectedPrecision)
+      : floatToFixedDynamic(order.price, selectedPrecision, selectedPrecision)
     const index = result.findIndex(
       (obj) => floatToFixedDynamic(obj.price, selectedPrecision, selectedPrecision) === _price
     )
@@ -413,6 +415,14 @@ const DECIMALS_MAP = {
     return orders.sell.reduce(reduceOrders, [])
   }, [orders.sell, reduceOrders])
 
+  const sortedBuyOrder = useMemo(() => {
+    return aggregatedBuyOrder.sort((a, b) => b.price - a.price)
+  }, [aggregatedBuyOrder])
+
+  const sortedSellOrder = useMemo(() => {
+    return aggregatedSellOrder.sort((a, b) => b.price - a.price)
+  }, [aggregatedSellOrder])
+
   const isGeoBlocked = useMemo(() => getIsRestrictedCountry(query) && getIsRestricted(asset.id)
   , [asset.id, query])
 
@@ -508,16 +518,40 @@ const DECIMALS_MAP = {
             </AggregatorSelector>
           </Stack>
           <Header className="mt-4">
-            <TablePriceHeader title="price" textAlign="left" />
+            {/* <TablePriceHeader title="price" textAlign="left" />
             <Typography className="whitespace-nowrap" variant="body_tiny_cap" color="gray.500" textAlign="right" m={0}>
               {t('amount')} ({assetVeryShortName})
             </Typography>
-            <TablePriceHeader title="total" textAlign="right" />
+            <TablePriceHeader title="total" textAlign="right" /> */}
+
+
+            <TablePriceHeader currencySymbol={asset.isStable ? `(${assetVeryShortName})` : ''} />
+            <Typography
+              variant="body_tiny_cap"
+              className="whitespace-nowrap"
+              color="gray.500"
+              textAlign="right"
+              m={0}
+            >
+              {t('amount')} ({asset.isStable ? 'ALGO' : assetVeryShortName})
+            </Typography>
+            <Typography
+              variant="body_tiny_cap"
+              className="whitespace-nowrap"
+              color="gray.500"
+              textAlign="right"
+              m={0}
+            >
+              {t('total')} ({asset.isStable ? 'ALGO' : assetVeryShortName})
+            </Typography>
           </Header>
         </Box>
 
         <SellOrders>
-          <OrdersWrapper className="p-4">{renderedSellOrders}</OrdersWrapper>
+          {/* <OrdersWrapper className="p-4">{renderedSellOrders}</OrdersWrapper> */}
+          <OrdersWrapper className="p-4">
+            {renderOrders(asset.isStable ? sortedBuyOrder : aggregatedSellOrder, 'sell')}
+          </OrdersWrapper>
         </SellOrders>
 
         <CurrentPrice className="px-4">
@@ -527,6 +561,7 @@ const DECIMALS_MAP = {
         <BuyOrders>
           <OrdersWrapper className="px-4 pt-4">
             {renderedBuyOrders}
+            {/* {renderOrders(asset.isStable ? sortedSellOrder : aggregatedBuyOrder, 'buy')} */}
           </OrdersWrapper>
         </BuyOrders>
       </Container>

components/Asset/OrderBook/OrderBookPriceInfo.js

@@ -26,6 +26,7 @@ import convertFromAsaUnits from '@algodex/algodex-sdk/lib/utils/units/fromAsaUni
 import floatToFixed from '@algodex/algodex-sdk/lib/utils/format/floatToFixed'
 import { formatUSDPrice } from '@/components/helpers'
 import { mdiApproximatelyEqual } from '@mdi/js'
+// import { useMemo } from 'react'
 import { withAlgorandPriceQuery } from '@algodex/algodex-hooks'
 
 const getPriceDecimals = (price) => {
@@ -76,6 +77,36 @@ PriceInfoView.propTypes = {
   asaValue: PropTypes.any
 }
 export function OrderBookPriceInfo({ algoPrice, asset }) {
+  // const percentageChange = useMemo(() => {
+  //   return asset?.price_info && floatToFixed(asset?.price_info?.price24Change, 2)
+  // }, [asset])
+  // const asaUnit = convertFromAsaUnits(asset?.price_info?.price, asset.decimals)
+  // const asaValue = !asset.isStable
+  //   ? floatToFixed(asaUnit)
+  //   : asaUnit === 0
+  //   ? 'Invalid Number'
+  //   : floatToFixed(1 / asaUnit)
+
+  // return (
+  //   <>
+  //     <Typography variant="h5" color="white">
+  //       {asaValue}
+  //     </Typography>
+  //     {asset && asset.price_info && (
+  //       <Typography className="ml-3" data-testid="price-info">
+  //         {(asset?.price_info?.price24Change && `${percentageChange}%`) || '0.00%'}
+  //       </Typography>
+  //     )}
+  //     <div className="flex items-center ml-4 text-gray-500">
+  //       <Icon className="m-0 p-0" path={mdiApproximatelyEqual} title="Approximately" size={0.7} />
+  //       <Typography variant="subtitle_small_bold">
+  //         ${formatUSDPrice(algoPrice * asaValue)}
+  //       </Typography>
+  //     </div>
+  //   </>
+  // )
+
+
   const decimals = getPriceDecimals(asset?.price_info?.price || 0)
   const asaValue = floatToFixed(asset?.price_info?.price || 0, decimals, 6)
   return typeof asset?.price_info === 'undefined' ? <Loading/> : <PriceInfoView asaValue={asaValue} algoPrice={algoPrice} asset={asset} />