From 23cb4fd892e7958296d23b0ef3eddc9a8db51abb Mon Sep 17 00:00:00 2001 From: Ikechi Date: Fri, 25 Nov 2022 09:07:30 +0100 Subject: [PATCH 01/58] Migrate asset inversion code --- components/Asset/Chart/ChartOverlay.jsx | 54 +++-- components/Asset/OrderBook/OrderBook.jsx | 35 +++- .../Asset/TradeHistory/TradeHistory.jsx | 12 +- components/Nav/SearchSidebar/SearchTable.jsx | 53 +++-- components/Wallet/PlaceOrder/Form.jsx | 16 +- .../Wallet/PlaceOrder/Form/TradeInputs.jsx | 191 +++++++++++++++++- pages/trade/[id].js | 2 + 7 files changed, 318 insertions(+), 45 deletions(-) diff --git a/components/Asset/Chart/ChartOverlay.jsx b/components/Asset/Chart/ChartOverlay.jsx index 8711c52b5..b5ecf7936 100644 --- a/components/Asset/Chart/ChartOverlay.jsx +++ b/components/Asset/Chart/ChartOverlay.jsx @@ -15,7 +15,7 @@ */ import { useCallback, useMemo } from 'react' - +import Button from 'components/Button' import Big from 'big.js' import Icon from '@mdi/react' import { Info } from 'react-feather' @@ -25,6 +25,7 @@ import { mdiCheckDecagram } from '@mdi/js' import styled from '@emotion/styled' import theme from 'theme' import { useUserStore } from 'store' +import { Typography, Stack } from '@mui/material' export const Container = styled.div` position: absolute; @@ -45,6 +46,7 @@ export const Header = styled.header` margin-left: 1.75rem; margin-top: 1.25rem; margin-bottom: 0.125rem; + width: 100%; ` export const TradingPair = styled.h3` @@ -57,7 +59,7 @@ export const TradingPair = styled.h3` margin-block-end: 0; color: ${({ theme }) => theme.palette.gray[500]}; white-space: nowrap; - + width: inherit; span { color: ${({ theme }) => theme.palette.gray[100]}; } @@ -120,7 +122,7 @@ export const OhlcItem = styled.div` dd { color: ${({ theme, value }) => - parseFloat(value) < 0 ? theme.palette.red[500] : theme.palette.green[500]}; + parseFloat(value) < 0 ? theme.palette.red[500] : theme.palette.green[500]}; } @media (min-width: 1024px) { @@ -210,8 +212,8 @@ function ChartOverlay(props) { const currentPrice = asset.price_info?.price ? new Big(asset.price_info?.price) : new Big(0) const changeAmt = asset.price_info?.price24Change ? currentPrice - .sub(currentPrice.div(new Big(1 + asset.price_info?.price24Change / 100))) - .toString() + .sub(currentPrice.div(new Big(1 + asset.price_info?.price24Change / 100))) + .toString() : '0' const changePct = asset.price_info?.price24Change ? new Big(asset.price_info?.price24Change) @@ -238,14 +240,40 @@ function ChartOverlay(props) { color={theme.palette.gray['500']} /> )} -
-  {`${asset.name} `} / ALGO -
-
- - - -
+ + + {/*
+  {`${asset.name} `} / ALGO +
*/} + {!asset.isStable && ( +
+  {`${asset.name} `} / ALGO +
+ )} + {asset.isStable && ( +
+ ALGO / {`${asset.name} `} +
+ )} +
+ + + +
+ +
+ +
+ + + diff --git a/components/Asset/OrderBook/OrderBook.jsx b/components/Asset/OrderBook/OrderBook.jsx index 59ae21e34..35284017a 100644 --- a/components/Asset/OrderBook/OrderBook.jsx +++ b/components/Asset/OrderBook/OrderBook.jsx @@ -382,9 +382,14 @@ const DECIMALS_MAP = { },[asset.decimals, maxSpendableAlgo]) const reduceOrders = useCallback((result, order) => { - const _price = floatToFixedDynamic(order.price, selectedPrecision, selectedPrecision) + // const _price = floatToFixedDynamic(order.price, selectedPrecision, selectedPrecision) + const _price = asset.isStable + ? floatToFixedDynamic(1 / order.price, selectedPrecision, selectedPrecision) + : floatToFixedDynamic(order.price, selectedPrecision, selectedPrecision) - const _amount = order.amount + // const _amount = order.amount + const _amount = asset.isStable ? order.amount * order.price : order.amount + const index = result.findIndex( (obj) => floatToFixedDynamic(obj.price, selectedPrecision, selectedPrecision) === _price ) @@ -478,6 +483,14 @@ const DECIMALS_MAP = { const renderedBuyOrders = useMemo( () => { return renderOrders(aggregatedBuyOrder, 'buy') },[aggregatedBuyOrder, renderOrders]); + + 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]) return useMemo(() => { @@ -508,16 +521,22 @@ const DECIMALS_MAP = {
- + {/* */} + - {t('amount')} ({assetVeryShortName}) + {t('amount')} ({asset.isStable ? 'ALGO' : assetVeryShortName}) + + + {t('total')} ({asset.isStable ? 'ALGO' : assetVeryShortName}) - + {/* */}
- {renderedSellOrders} + {/* {renderedSellOrders} */} + {/* {renderOrders(asset.isStable ? sortedBuyOrder : aggregatedSellOrder, 'sell')} */} + {renderOrders(asset.isStable ? sortedBuyOrder : renderedSellOrders, 'sell')} @@ -526,7 +545,9 @@ const DECIMALS_MAP = { - {renderedBuyOrders} + {/* {renderedBuyOrders} */} + {/* {renderOrders(asset.isStable ? sortedSellOrder : aggregatedBuyOrder, 'buy')} */} + {renderOrders(asset.isStable ? sortedSellOrder : renderedBuyOrders, 'buy')} diff --git a/components/Asset/TradeHistory/TradeHistory.jsx b/components/Asset/TradeHistory/TradeHistory.jsx index 7edbfa27f..9a1c71958 100644 --- a/components/Asset/TradeHistory/TradeHistory.jsx +++ b/components/Asset/TradeHistory/TradeHistory.jsx @@ -180,6 +180,10 @@ export function TradeHistory({ asset, orders: tradesData }) { }) .map((row) => { const amount = new Big(row.amount) + if (row.price === 0) { + return + } + const price = asset.isStable ? 1 / row.price : row.price return ( @@ -219,9 +223,13 @@ export function TradeHistory({ asset, orders: tradesData }) { {t('trade-history')}
- - + {/* */} + + {/* {t('amount')} ({assetVeryShortName}) + */} + + {t('amount')} ({asset.isStable ? 'ALGO' : assetVeryShortName}) {t('time')} diff --git a/components/Nav/SearchSidebar/SearchTable.jsx b/components/Nav/SearchSidebar/SearchTable.jsx index 7ff94163d..751cce6c4 100644 --- a/components/Nav/SearchSidebar/SearchTable.jsx +++ b/components/Nav/SearchSidebar/SearchTable.jsx @@ -24,6 +24,7 @@ import { getAssetTotalStatus, getIsRestricted, getIsRestrictedCountry } from '.. import { mdiAlertCircleOutline, mdiCheckDecagram, mdiStar } from '@mdi/js' import { useCallback, useMemo } from 'react' import { useEffect, useRef, useState } from 'react' +import { StableAssets } from '@/components/StableAssets' import AlgoIcon from '@/components/Icon' import { DelistedAssets } from '@/components/DelistedAssets' @@ -34,7 +35,7 @@ import Table from '@/components/Table' import Tooltip from 'components/Tooltip' import { flatten } from 'lodash' import floatToFixed from '@algodex/algodex-sdk/lib/utils/format/floatToFixed' -import {floatToFixedDisplay} from '@/services/display'; +import { floatToFixedDisplay } from '@/services/display'; import { formatUSDPrice } from '@/components/helpers' import { sortBy } from 'lodash' import styled from '@emotion/styled' @@ -80,8 +81,8 @@ export const mapToSearchResults = ({ const change = !isNaN(parseFloat(priceChg24Pct)) ? floatToFixed(priceChg24Pct, 2) : hasOrders - ? '--' - : null + ? '--' + : null return { id: assetId, @@ -202,6 +203,11 @@ export const NavSearchTable = ({ [setIsFilteringByFavorites, isFilteringByFavorites] ) + const formattedStableAsa = {} + const formattedAssets = StableAssets.forEach( + (asa, index) => (formattedStableAsa[StableAssets[index]] = asa) + ) + useEffect(() => { const handleResize = () => { /** @@ -262,13 +268,13 @@ export const NavSearchTable = ({ DelistedAssets.forEach((element) => { bannedAssets[element] = element }) - + // Remove banned assets const _acceptedAssets = assets.filter((asset) => !(asset.assetId in bannedAssets)) // Geoformatted assets const geoFormattedAssets = handleRestrictedAsset(_acceptedAssets) const filteredList = sortBy(geoFormattedAssets.assets, { isGeoBlocked: true }) - + // Return List if (!filteredList || !Array.isArray(filteredList) || filteredList.length === 0) { return [] @@ -293,15 +299,14 @@ export const NavSearchTable = ({ } }, [assets, handleRestrictedAsset, - isListingVerifiedAssets, isFilteringByFavorites, favoritesState]) + isListingVerifiedAssets, isFilteringByFavorites, favoritesState]) const AssetPriceCell = useCallback( ({ value, row }) => { return ( {value}
@@ -338,14 +343,32 @@ export const NavSearchTable = ({ style={{ minWidth: '0.75rem' }} color={handleFavoritesFn(row?.original?.id)} /> - + {/* {value} {`/`} ALGO - {/* {row.original.verified && } */} - + */} + + {formattedStableAsa[row?.original.id] && ( + + ALGO + {`/`} + + {value} + + + )} + {!formattedStableAsa[row?.original.id] && ( + + {value} + {`/`} + + ALGO + + + )} {/*
*/}
@@ -486,13 +509,13 @@ export const NavSearchTable = ({ useEffect(() => { // Prefetch the top assets - searchResultData.slice(0,30).map(result => { + searchResultData.slice(0, 30).map(result => { const assetId = result.id // console.log('zprefetching: ' + assetId) - router.prefetch('/trade/'+assetId) + router.prefetch('/trade/' + assetId) }) }, [router, searchResultData]) - + return ( ({ - buy: { variant: 'primary', text: `${t('buy')} ${asset.name || asset.id}` }, - sell: { variant: 'danger', text: `${t('sell')} ${asset.name || asset.id}` } + buy: { + variant: 'primary', + text: `${t('buy')} ${(asset.isStable ? 'ALGO' : asset.name) || asset.id}` + }, + sell: { + variant: 'danger', + text: `${t('sell')} ${(asset.isStable ? 'ALGO' : asset.name) || asset.id}` + } }), [asset] ) @@ -343,7 +349,8 @@ export function PlaceOrderForm({ showTitle = true, asset, onSubmit, components: const handleSubmit = useCallback( (e) => { e.preventDefault() - const formattedOrder = {...order} + const { isStable } = asset + const formattedOrder = {...order, type: isStable && order.type === 'buy' ? 'sell' : 'buy'} formattedOrder.price = formatFloat(formattedOrder.price, 6) formattedOrder.amount = formatFloat(formattedOrder.amount, asset.decimals) @@ -553,7 +560,8 @@ PlaceOrderForm.propTypes = { id: PropTypes.number.isRequired, decimals: PropTypes.number.isRequired, name: PropTypes.string, - isGeoBlocked: PropTypes.bool + isGeoBlocked: PropTypes.bool, + isStable: PropTypes.bool }).isRequired, /** * Wallet to execute Orders from diff --git a/components/Wallet/PlaceOrder/Form/TradeInputs.jsx b/components/Wallet/PlaceOrder/Form/TradeInputs.jsx index b21a36981..731872cb8 100644 --- a/components/Wallet/PlaceOrder/Form/TradeInputs.jsx +++ b/components/Wallet/PlaceOrder/Form/TradeInputs.jsx @@ -21,7 +21,7 @@ import Big from 'big.js' import { FormHelperText } from '@mui/material' import { default as MUIInputAdornment } from '@mui/material/InputAdornment' import { default as MaterialBox } from '@mui/material/Box' -import {NumericFormat} from 'react-number-format'; +import { NumericFormat } from 'react-number-format'; import OutlinedInput from '@/components/Input/OutlinedInput' import PropTypes from 'prop-types' import Slider from '@/components/Input/Slider' @@ -145,8 +145,102 @@ export const TradeInputs = ({ return true } }, [order, microAlgo]) - return ( - + + const invertedAssetInput = () => { + return <> + + {t('price')} + + } + endAdornment={ + + {asset.name} + + } + error={isErrorMsgVisible} + /> + + { + isErrorMsgVisible && order.execution !== 'market' ? ( + + Price cannot be less than {microAlgo} + + ) : ( + + ) + } + + + {t('amount')} + + } + endAdornment={ + + ALGO + + } + /> + + } + + const regularAssetInput = () => { + return <> } /> + + } + return ( + + {asset.isStable ? invertedAssetInput() : regularAssetInput()} + {/* + {t('price')} + + } + endAdornment={ + + ALGO + + } + error={isErrorMsgVisible} + /> + + {isErrorMsgVisible && order.execution !== 'market' ? ( + + Price cannot be less than {microAlgo} + + ) : ( + + )} + + + {t('amount')} + + } + endAdornment={ + + {asset.name} + + } + /> */} - ALGO + + {asset.isStable ? asset.name : 'ALGO'} + } /> diff --git a/pages/trade/[id].js b/pages/trade/[id].js index a28ab1bdf..6171d501b 100644 --- a/pages/trade/[id].js +++ b/pages/trade/[id].js @@ -39,6 +39,7 @@ import useDebounce from '@/hooks/useDebounce' import { useRouter } from 'next/router' import useUserStore from '@/store/use-user-state' import useWallets from '@/hooks/useWallets' +import { StableAssets } from '@/components/StableAssets' /** * Fetch Traded Asset Paths @@ -127,6 +128,7 @@ export async function getStaticProps({ params: { id } }) { staticExplorerAsset.price_info = staticAssetPrice } + staticExplorerAsset.isStable = StableAssets.includes(parseInt(id)) if (typeof staticExplorerAsset.name === 'undefined') { staticExplorerAsset.name = '' } From abe9e24c1a4a20e97163a79a1ea760d0b34c28e4 Mon Sep 17 00:00:00 2001 From: Ikechi Date: Fri, 25 Nov 2022 14:09:22 +0100 Subject: [PATCH 02/58] Add functionality for pair switching --- components/Asset/Chart/Chart.jsx | 47 +++++++++++++++++-- components/Asset/Chart/ChartOverlay.jsx | 4 +- components/Asset/OrderBook/OrderBook.jsx | 18 +++---- .../Asset/TradeHistory/TradeHistory.jsx | 6 +-- components/Nav/SearchSidebar/SearchTable.jsx | 6 ++- components/StableAssets | 9 ++++ components/Table/Cell.jsx | 25 ++++++++-- components/Wallet/PlaceOrder/Form.jsx | 10 ++-- .../Wallet/PlaceOrder/Form/TradeInputs.jsx | 4 +- components/Wallet/Table/AssetsTable.jsx | 10 +++- components/Wallet/Table/TradeHistoryTable.jsx | 5 +- pages/trade/[id].js | 2 +- 12 files changed, 111 insertions(+), 35 deletions(-) create mode 100644 components/StableAssets diff --git a/components/Asset/Chart/Chart.jsx b/components/Asset/Chart/Chart.jsx index 5d30e445b..38764f924 100644 --- a/components/Asset/Chart/Chart.jsx +++ b/components/Asset/Chart/Chart.jsx @@ -26,6 +26,7 @@ import styled from '@emotion/styled' import useAreaChart from './hooks/useAreaChart' import useCandleChart from './hooks/useCandleChart' import { withAssetChartQuery } from '@/hooks' +import floatToFixed from '@algodex/algodex-sdk/lib/utils/format/floatToFixed' const Container = styled.div` position: relative; @@ -127,6 +128,15 @@ export function Chart({ const [chartMode, setChartMode] = useState(_mode) const [currentLogical, setCurrentLogical] = useState(ohlc.length - 1) + if (asset.isInverted) { + 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) setCurrentLogical(ohlc.length - 1) @@ -145,7 +155,6 @@ export function Chart({ const { candleChart } = useCandleChart(candleChartRef, volume, ohlc, autoScaleProvider) const { areaChart } = useAreaChart(areaChartRef, ohlc, autoScaleProvider) - const onSettingsChange = useCallback( (e) => { if (e?.target?.name === 'mode') { @@ -170,6 +179,16 @@ export function Chart({ if (ohlc == null || volume == null) { return } + // if (asset.isInverted) { + // if (ohlc == null || algoVolume == null) { + // return + // } + // } else { + // if (ohlc == null || volume == null) { + // return + // } + // } + const priceEntry = ohlc[logical] const volumeEntry = volume[logical] @@ -183,7 +202,13 @@ export function Chart({ ) const mouseOut = useCallback(() => { - setOverlay(_overlay) + // setOverlay(_overlay) + if (asset.isInverted) { + const __overlay = { ...overlay, ..._overlay } + setOverlay(__overlay) + } else { + setOverlay(_overlay) + } }, [setOverlay, _overlay]) const mouseMove = useCallback( @@ -203,6 +228,18 @@ export function Chart({ return } + // if (asset.isInverted) { + // 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 +255,7 @@ export function Chart({ setCurrentLogical, updateHoverPrices, volume, + asset.isInverted, ohlc ] ) @@ -248,6 +286,7 @@ export function Chart({ ask={overlay.orderbook.ask} spread={overlay.orderbook.spread} volume={overlay.volume} + // volume={asset.isInverted ? overlay.algoVolume : overlay.volume} /> )} {typeof overlay.ohlc === 'undefined' && ( @@ -258,6 +297,7 @@ export function Chart({ ask={_overlay.orderbook.ask} spread={_overlay.orderbook.spread} volume={_overlay.volume} + // volume={asset.isInverted ? overlay.algoVolume : overlay.volume} /> )} @@ -270,7 +310,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, + isInverted: PropTypes.bool }).isRequired, interval: PropTypes.string.isRequired, mode: PropTypes.string.isRequired, diff --git a/components/Asset/Chart/ChartOverlay.jsx b/components/Asset/Chart/ChartOverlay.jsx index b5ecf7936..22ca0e541 100644 --- a/components/Asset/Chart/ChartOverlay.jsx +++ b/components/Asset/Chart/ChartOverlay.jsx @@ -245,12 +245,12 @@ function ChartOverlay(props) { {/*
 {`${asset.name} `} / ALGO
*/} - {!asset.isStable && ( + {!asset.isInverted && (
 {`${asset.name} `} / ALGO
)} - {asset.isStable && ( + {asset.isInverted && (
ALGO / {`${asset.name} `}
diff --git a/components/Asset/OrderBook/OrderBook.jsx b/components/Asset/OrderBook/OrderBook.jsx index 35284017a..60b62bbd6 100644 --- a/components/Asset/OrderBook/OrderBook.jsx +++ b/components/Asset/OrderBook/OrderBook.jsx @@ -383,12 +383,12 @@ const DECIMALS_MAP = { const reduceOrders = useCallback((result, order) => { // const _price = floatToFixedDynamic(order.price, selectedPrecision, selectedPrecision) - const _price = asset.isStable + const _price = asset.isInverted ? floatToFixedDynamic(1 / order.price, selectedPrecision, selectedPrecision) : floatToFixedDynamic(order.price, selectedPrecision, selectedPrecision) // const _amount = order.amount - const _amount = asset.isStable ? order.amount * order.price : order.amount + const _amount = asset.isInverted ? order.amount * order.price : order.amount const index = result.findIndex( (obj) => floatToFixedDynamic(obj.price, selectedPrecision, selectedPrecision) === _price @@ -522,12 +522,12 @@ const DECIMALS_MAP = {
{/* */} - + - {t('amount')} ({asset.isStable ? 'ALGO' : assetVeryShortName}) + {t('amount')} ({asset.isInverted ? 'ALGO' : assetVeryShortName}) - {t('total')} ({asset.isStable ? 'ALGO' : assetVeryShortName}) + {t('total')} ({asset.isInverted ? 'ALGO' : assetVeryShortName}) {/* */}
@@ -535,8 +535,8 @@ const DECIMALS_MAP = { {/* {renderedSellOrders} */} - {/* {renderOrders(asset.isStable ? sortedBuyOrder : aggregatedSellOrder, 'sell')} */} - {renderOrders(asset.isStable ? sortedBuyOrder : renderedSellOrders, 'sell')} + {/* {renderOrders(asset.isInverted ? sortedBuyOrder : aggregatedSellOrder, 'sell')} */} + {renderOrders(asset.isInverted ? sortedBuyOrder : renderedSellOrders, 'sell')} @@ -546,8 +546,8 @@ const DECIMALS_MAP = { {/* {renderedBuyOrders} */} - {/* {renderOrders(asset.isStable ? sortedSellOrder : aggregatedBuyOrder, 'buy')} */} - {renderOrders(asset.isStable ? sortedSellOrder : renderedBuyOrders, 'buy')} + {/* {renderOrders(asset.isInverted ? sortedSellOrder : aggregatedBuyOrder, 'buy')} */} + {renderOrders(asset.isInverted ? sortedSellOrder : renderedBuyOrders, 'buy')} diff --git a/components/Asset/TradeHistory/TradeHistory.jsx b/components/Asset/TradeHistory/TradeHistory.jsx index 9a1c71958..424df61e0 100644 --- a/components/Asset/TradeHistory/TradeHistory.jsx +++ b/components/Asset/TradeHistory/TradeHistory.jsx @@ -183,7 +183,7 @@ export function TradeHistory({ asset, orders: tradesData }) { if (row.price === 0) { return } - const price = asset.isStable ? 1 / row.price : row.price + const price = asset.isInverted ? 1 / row.price : row.price return ( @@ -224,12 +224,12 @@ export function TradeHistory({ asset, orders: tradesData }) {
{/* */} - + {/* {t('amount')} ({assetVeryShortName}) */} - {t('amount')} ({asset.isStable ? 'ALGO' : assetVeryShortName}) + {t('amount')} ({asset.isInverted ? 'ALGO' : assetVeryShortName}) {t('time')} diff --git a/components/Nav/SearchSidebar/SearchTable.jsx b/components/Nav/SearchSidebar/SearchTable.jsx index 751cce6c4..3cfdb2e96 100644 --- a/components/Nav/SearchSidebar/SearchTable.jsx +++ b/components/Nav/SearchSidebar/SearchTable.jsx @@ -74,7 +74,8 @@ export const mapToSearchResults = ({ unitName, isGeoBlocked, formattedASALiquidity, - formattedAlgoLiquidity + formattedAlgoLiquidity, + isInverted }) => { const price = formattedPrice ? floatToFixedDisplay(formattedPrice) : hasOrders ? '--' : null @@ -95,7 +96,8 @@ export const mapToSearchResults = ({ liquidityAsa: formattedASALiquidity, price, change, - decimals + decimals, + isInverted } } diff --git a/components/StableAssets b/components/StableAssets new file mode 100644 index 000000000..e3933b7f6 --- /dev/null +++ b/components/StableAssets @@ -0,0 +1,9 @@ +// Current StableCoin List. +// Should check whether to decide using of assetid or asset name +export const StableAssets = [ + 51435943, // USDC, + 37074699, // USDC, + 38718614, // USDC, + 42279195, // USDT + 94115664 //USDT +] \ No newline at end of file diff --git a/components/Table/Cell.jsx b/components/Table/Cell.jsx index d0d6918be..826968108 100644 --- a/components/Table/Cell.jsx +++ b/components/Table/Cell.jsx @@ -51,6 +51,14 @@ export const AssetNameCell = ({ value, row }) => { const onClick = useCallback(() => { dispatcher('clicked', 'asset') }, [dispatcher]) + const formattedPair = (value) => { + const splittedPair = value.split('/') + if (row?.original?.isInverted && typeof splittedPair[1] !== 'undefined') { + return `${splittedPair[1]}/${splittedPair[0]}` + } else { + return value + } + } return ( {/* */} @@ -76,11 +84,20 @@ AssetNameCell.propTypes = { row: PropTypes.any, value: PropTypes.any } * @returns {JSX.Element} * @constructor */ -export const OrderTypeCell = ({ value }) => { +export const OrderTypeCell = ({ value, row }) => { const { t } = useTranslation('orders') + const formattedPair = (value) => { + if (row.original.isInverted) { + return value === 'BUY' ? t('sell') : t('buy') + } else { + return t(value.toLowerCase()) + // console.log(value, 'value here') + } + } return ( - - {t(value.toLowerCase())} + + {/* {t(value.toLowerCase())} */} + {formattedPair(value)} ) } diff --git a/components/Wallet/PlaceOrder/Form.jsx b/components/Wallet/PlaceOrder/Form.jsx index 963dfdb64..717a105d6 100644 --- a/components/Wallet/PlaceOrder/Form.jsx +++ b/components/Wallet/PlaceOrder/Form.jsx @@ -213,11 +213,11 @@ export function PlaceOrderForm({ showTitle = true, asset, onSubmit, components: () => ({ buy: { variant: 'primary', - text: `${t('buy')} ${(asset.isStable ? 'ALGO' : asset.name) || asset.id}` + text: `${t('buy')} ${(asset.isInverted ? 'ALGO' : asset.name) || asset.id}` }, sell: { variant: 'danger', - text: `${t('sell')} ${(asset.isStable ? 'ALGO' : asset.name) || asset.id}` + text: `${t('sell')} ${(asset.isInverted ? 'ALGO' : asset.name) || asset.id}` } }), [asset] @@ -349,8 +349,8 @@ export function PlaceOrderForm({ showTitle = true, asset, onSubmit, components: const handleSubmit = useCallback( (e) => { e.preventDefault() - const { isStable } = asset - const formattedOrder = {...order, type: isStable && order.type === 'buy' ? 'sell' : 'buy'} + const { isInverted } = asset + const formattedOrder = {...order, type: isInverted && order.type === 'buy' ? 'sell' : 'buy'} formattedOrder.price = formatFloat(formattedOrder.price, 6) formattedOrder.amount = formatFloat(formattedOrder.amount, asset.decimals) @@ -561,7 +561,7 @@ PlaceOrderForm.propTypes = { decimals: PropTypes.number.isRequired, name: PropTypes.string, isGeoBlocked: PropTypes.bool, - isStable: PropTypes.bool + isInverted: PropTypes.bool }).isRequired, /** * Wallet to execute Orders from diff --git a/components/Wallet/PlaceOrder/Form/TradeInputs.jsx b/components/Wallet/PlaceOrder/Form/TradeInputs.jsx index 731872cb8..94b22dd79 100644 --- a/components/Wallet/PlaceOrder/Form/TradeInputs.jsx +++ b/components/Wallet/PlaceOrder/Form/TradeInputs.jsx @@ -327,7 +327,7 @@ export const TradeInputs = ({ } return ( - {asset.isStable ? invertedAssetInput() : regularAssetInput()} + {asset.isInverted ? invertedAssetInput() : regularAssetInput()} {/* - {asset.isStable ? asset.name : 'ALGO'} + {asset.isInverted ? asset.name : 'ALGO'} } diff --git a/components/Wallet/Table/AssetsTable.jsx b/components/Wallet/Table/AssetsTable.jsx index c76ce2d69..6f6eef589 100644 --- a/components/Wallet/Table/AssetsTable.jsx +++ b/components/Wallet/Table/AssetsTable.jsx @@ -17,6 +17,7 @@ import { AssetId, AssetNameBlock } from '@/components/Asset/Typography' import Table, { AssetNameCell, DefaultCell } from '@/components/Table' import { useCallback, useMemo } from 'react' +import { StableAssets } from '@/components/StableAssets' import Link from 'next/link' import PropTypes from 'prop-types' @@ -77,7 +78,12 @@ export function AssetsTable({ assets }) { const walletAssetsTableState = useUserStore((state) => state.walletAssetsTableState) const setWalletAssetsTableState = useUserStore((state) => state.setWalletAssetsTableState) - + const formatAssetsList = assets.map((asset) => { + return { + ...asset, + isInverted: StableAssets.includes(parseInt(asset.id)) + } + }) const columns = useMemo( () => [ { @@ -121,7 +127,7 @@ export function AssetsTable({ assets }) { initialState={walletAssetsTableState} onStateChange={(state) => setWalletAssetsTableState(state)} columns={columns} - data={assets || []} + data={formatAssetsList || []} /> diff --git a/components/Wallet/Table/TradeHistoryTable.jsx b/components/Wallet/Table/TradeHistoryTable.jsx index e3c30187c..705989797 100644 --- a/components/Wallet/Table/TradeHistoryTable.jsx +++ b/components/Wallet/Table/TradeHistoryTable.jsx @@ -20,7 +20,7 @@ import Table, { ExpandTradeDetail, OrderTypeCell } from '@/components/Table' - +import { StableAssets } from '@/components/StableAssets' import PropTypes from 'prop-types' import styled from '@emotion/styled' import { useMemo } from 'react' @@ -65,7 +65,8 @@ export function TradeHistoryTable({ orders }) { return orders.map((order) => { const _order = { ...order, - price: floatToFixedDisplay(order.price) + price: floatToFixedDisplay(order.price), + isInverted: StableAssets.includes(parseInt(order.id)) } return _order }) diff --git a/pages/trade/[id].js b/pages/trade/[id].js index 6171d501b..11bde4d4a 100644 --- a/pages/trade/[id].js +++ b/pages/trade/[id].js @@ -128,7 +128,7 @@ export async function getStaticProps({ params: { id } }) { staticExplorerAsset.price_info = staticAssetPrice } - staticExplorerAsset.isStable = StableAssets.includes(parseInt(id)) + staticExplorerAsset.isInverted = StableAssets.includes(parseInt(id)) if (typeof staticExplorerAsset.name === 'undefined') { staticExplorerAsset.name = '' } From 17d1a804e326eba950530a71ab9259d7bed49418 Mon Sep 17 00:00:00 2001 From: Ikechi Date: Fri, 25 Nov 2022 18:02:43 +0100 Subject: [PATCH 03/58] Add invertion toggle button --- components/Asset/Chart/ChartOverlay.jsx | 54 ++++++++++++++++++++----- public/Invert.svg | 3 ++ 2 files changed, 47 insertions(+), 10 deletions(-) create mode 100644 public/Invert.svg diff --git a/components/Asset/Chart/ChartOverlay.jsx b/components/Asset/Chart/ChartOverlay.jsx index 22ca0e541..7afd4ee67 100644 --- a/components/Asset/Chart/ChartOverlay.jsx +++ b/components/Asset/Chart/ChartOverlay.jsx @@ -14,8 +14,8 @@ * along with this program. If not, see . */ -import { useCallback, useMemo } from 'react' -import Button from 'components/Button' +import { useCallback, useMemo, useState } from 'react' +// import Button from 'components/Button' import Big from 'big.js' import Icon from '@mdi/react' import { Info } from 'react-feather' @@ -25,7 +25,8 @@ import { mdiCheckDecagram } from '@mdi/js' import styled from '@emotion/styled' import theme from 'theme' import { useUserStore } from 'store' -import { Typography, Stack } from '@mui/material' +import { Typography, Stack, Button } from '@mui/material' +import Image from 'next/image' export const Container = styled.div` position: absolute; @@ -208,6 +209,7 @@ export const Volume = styled.div` function ChartOverlay(props) { const { asset, ohlc, bid, ask, spread, volume } = props + const [inversionStatus, setInversionStatus] = useState(false) const setShowAssetInfo = useUserStore((state) => state.setShowAssetInfo) const currentPrice = asset.price_info?.price ? new Big(asset.price_info?.price) : new Big(0) const changeAmt = asset.price_info?.price24Change @@ -228,6 +230,22 @@ function ChartOverlay(props) { setShowAssetInfo(true) }, [setShowAssetInfo]) + const setInversionStatusFn = useCallback(() => { + const inversionStatus = localStorage.getItem('inversionStatus') + if (inversionStatus) { + if (inversionStatus === 'true') { + localStorage.setItem('inversionStatus', 'false') + setInversionStatus(false) + } else { + localStorage.setItem('inversionStatus', 'true') + setInversionStatus(true) + } + } else { + localStorage.setItem('inversionStatus', 'true') + setInversionStatus(true) + } + }, []) + return (
@@ -247,12 +265,12 @@ function ChartOverlay(props) { */} {!asset.isInverted && (
-  {`${asset.name} `} / ALGO +  {`${asset.name} `} / ALGO
)} {asset.isInverted && (
- ALGO / {`${asset.name} `} + ALGO / {`${asset.name} `}
)}
@@ -262,13 +280,29 @@ function ChartOverlay(props) {
+ {/* {console.log(inversionStatus, 'hell0o here')} */}
diff --git a/public/Invert.svg b/public/Invert.svg new file mode 100644 index 000000000..403d5ce7f --- /dev/null +++ b/public/Invert.svg @@ -0,0 +1,3 @@ + + + From e5202733476cce85c479e32f2abf8076443524de Mon Sep 17 00:00:00 2001 From: Ikechi Date: Mon, 28 Nov 2022 10:59:20 +0100 Subject: [PATCH 04/58] =?UTF-8?q?=E2=9C=A8=20Stable=20asset=20switching?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Asset/Chart/Chart.jsx | 5 ++- components/Asset/Chart/ChartOverlay.jsx | 6 +-- components/Asset/OrderBook/OrderBook.jsx | 25 ++++++----- .../Asset/TradeHistory/TradeHistory.jsx | 7 +-- components/Layout/OriginalLayout.jsx | 2 +- components/Nav/SearchSidebar/SearchTable.jsx | 8 ++-- components/Table/Cell.jsx | 8 ++-- components/Wallet/PlaceOrder/Form.jsx | 45 ++++++++++--------- .../Wallet/PlaceOrder/Form/TradeInputs.jsx | 5 ++- components/Wallet/Table/AssetsTable.jsx | 3 +- components/Wallet/Table/TradeHistoryTable.jsx | 3 +- pages/trade/[id].js | 4 +- 12 files changed, 70 insertions(+), 51 deletions(-) diff --git a/components/Asset/Chart/Chart.jsx b/components/Asset/Chart/Chart.jsx index 38764f924..9bc5b585d 100644 --- a/components/Asset/Chart/Chart.jsx +++ b/components/Asset/Chart/Chart.jsx @@ -27,6 +27,7 @@ import useAreaChart from './hooks/useAreaChart' import useCandleChart from './hooks/useCandleChart' import { withAssetChartQuery } from '@/hooks' import floatToFixed from '@algodex/algodex-sdk/lib/utils/format/floatToFixed' +import {useInversionStatus} from '@/hooks/utils/useInversionStatus' const Container = styled.div` position: relative; @@ -128,7 +129,7 @@ export function Chart({ const [chartMode, setChartMode] = useState(_mode) const [currentLogical, setCurrentLogical] = useState(ohlc.length - 1) - if (asset.isInverted) { + if (useInversionStatus(asset.id)) { 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' @@ -203,7 +204,7 @@ export function Chart({ const mouseOut = useCallback(() => { // setOverlay(_overlay) - if (asset.isInverted) { + if (useInversionStatus(asset.id)) { const __overlay = { ...overlay, ..._overlay } setOverlay(__overlay) } else { diff --git a/components/Asset/Chart/ChartOverlay.jsx b/components/Asset/Chart/ChartOverlay.jsx index 7afd4ee67..b887fac5f 100644 --- a/components/Asset/Chart/ChartOverlay.jsx +++ b/components/Asset/Chart/ChartOverlay.jsx @@ -27,7 +27,7 @@ import theme from 'theme' import { useUserStore } from 'store' import { Typography, Stack, Button } from '@mui/material' import Image from 'next/image' - +import {useInversionStatus} from '@/hooks/utils/useInversionStatus' export const Container = styled.div` position: absolute; top: 0; @@ -263,12 +263,12 @@ function ChartOverlay(props) { {/*
 {`${asset.name} `} / ALGO
*/} - {!asset.isInverted && ( + {!useInversionStatus(asset.id) && (
 {`${asset.name} `} / ALGO
)} - {asset.isInverted && ( + {(useInversionStatus(asset.id)) && (
ALGO / {`${asset.name} `}
diff --git a/components/Asset/OrderBook/OrderBook.jsx b/components/Asset/OrderBook/OrderBook.jsx index 60b62bbd6..84dbf9cd9 100644 --- a/components/Asset/OrderBook/OrderBook.jsx +++ b/components/Asset/OrderBook/OrderBook.jsx @@ -47,6 +47,7 @@ import { getIsRestricted, getIsRestrictedCountry } from '@/utils/restrictedAssets' +import {useInversionStatus} from '@/hooks/utils/useInversionStatus' const FirstOrderContainer = styled.div` flex: 1 1 0; @@ -330,6 +331,7 @@ const DECIMALS_MAP = { const isSignedIn = isConnected const cachedSelectedPrecision = useUserState((state) => state.cachedSelectedPrecision) const setCachedSelectedPrecision = useUserState((state) => state.setCachedSelectedPrecision) + const isInverted = useInversionStatus(asset.id) const onAggrSelectorChange = useCallback((e) => { setCachedSelectedPrecision({ ...cachedSelectedPrecision, @@ -383,12 +385,12 @@ const DECIMALS_MAP = { const reduceOrders = useCallback((result, order) => { // const _price = floatToFixedDynamic(order.price, selectedPrecision, selectedPrecision) - const _price = asset.isInverted + const _price = useInversionStatus(asset.id) ? floatToFixedDynamic(1 / order.price, selectedPrecision, selectedPrecision) : floatToFixedDynamic(order.price, selectedPrecision, selectedPrecision) // const _amount = order.amount - const _amount = asset.isInverted ? order.amount * order.price : order.amount + const _amount = useInversionStatus(asset.id) ? order.amount * order.price : order.amount const index = result.findIndex( (obj) => floatToFixedDynamic(obj.price, selectedPrecision, selectedPrecision) === _price @@ -423,7 +425,9 @@ const DECIMALS_MAP = { const renderOrders = useCallback((data, type) => { const color = type === 'buy' ? 'green' : 'red' + return data.map((row, index) => { + // console.log(row, 'data here') const amount = new Big(row.amount) const total = new Big(row.total) const handleSelectOrder = () => { @@ -522,21 +526,22 @@ const DECIMALS_MAP = {
{/* */} - + - {t('amount')} ({asset.isInverted ? 'ALGO' : assetVeryShortName}) + {t('amount')} ({isInverted ? 'ALGO' : assetVeryShortName}) - {t('total')} ({asset.isInverted ? 'ALGO' : assetVeryShortName}) + {t('total')} ({isInverted ? 'ALGO' : assetVeryShortName}) {/* */}
- {/* {renderedSellOrders} */} + {renderedSellOrders} {/* {renderOrders(asset.isInverted ? sortedBuyOrder : aggregatedSellOrder, 'sell')} */} - {renderOrders(asset.isInverted ? sortedBuyOrder : renderedSellOrders, 'sell')} + {/* {renderOrders(useInversionStatus(asset.id) ? sortedBuyOrder : renderedSellOrders, 'sell')} */} + {/* {renderOrders(isInverted ? sortedBuyOrder : renderedSellOrders, 'sell')} */} @@ -545,16 +550,16 @@ const DECIMALS_MAP = { - {/* {renderedBuyOrders} */} + {renderedBuyOrders} {/* {renderOrders(asset.isInverted ? sortedSellOrder : aggregatedBuyOrder, 'buy')} */} - {renderOrders(asset.isInverted ? sortedSellOrder : renderedBuyOrders, 'buy')} + {/* {renderOrders(useInversionStatus(asset.id) ? sortedSellOrder : renderedBuyOrders, 'buy')} */} )}, [PriceDisplay, asset, assetVeryShortName, isSignedIn, onAggrSelectorChange, orders.buy, orders.sell, - renderedBuyOrders, renderedSellOrders, selectedPrecision, t]) + renderedBuyOrders, renderedSellOrders, selectedPrecision, t, isInverted]) } OrderBook.propTypes = { diff --git a/components/Asset/TradeHistory/TradeHistory.jsx b/components/Asset/TradeHistory/TradeHistory.jsx index 424df61e0..7adfdf66a 100644 --- a/components/Asset/TradeHistory/TradeHistory.jsx +++ b/components/Asset/TradeHistory/TradeHistory.jsx @@ -31,6 +31,7 @@ import { rgba } from 'polished' import styled from '@emotion/styled' import useTranslation from 'next-translate/useTranslation' import { withAssetTradeHistoryQuery } from '@/hooks' +import {useInversionStatus} from '@/hooks/utils/useInversionStatus' dayjs.extend(localizedFormat) @@ -183,7 +184,7 @@ export function TradeHistory({ asset, orders: tradesData }) { if (row.price === 0) { return } - const price = asset.isInverted ? 1 / row.price : row.price + const price = useInversionStatus(asset.id) ? 1 / row.price : row.price return ( @@ -224,12 +225,12 @@ export function TradeHistory({ asset, orders: tradesData }) {
{/* */} - + {/* {t('amount')} ({assetVeryShortName}) */} - {t('amount')} ({asset.isInverted ? 'ALGO' : assetVeryShortName}) + {t('amount')} ({useInversionStatus(asset.id) ? 'ALGO' : assetVeryShortName}) {t('time')} diff --git a/components/Layout/OriginalLayout.jsx b/components/Layout/OriginalLayout.jsx index 0f01f84bc..05eaa190a 100644 --- a/components/Layout/OriginalLayout.jsx +++ b/components/Layout/OriginalLayout.jsx @@ -210,7 +210,7 @@ function MainLayout({ asset, children }) { - + diff --git a/components/Nav/SearchSidebar/SearchTable.jsx b/components/Nav/SearchSidebar/SearchTable.jsx index 3cfdb2e96..7f4db33d9 100644 --- a/components/Nav/SearchSidebar/SearchTable.jsx +++ b/components/Nav/SearchSidebar/SearchTable.jsx @@ -25,7 +25,6 @@ import { mdiAlertCircleOutline, mdiCheckDecagram, mdiStar } from '@mdi/js' import { useCallback, useMemo } from 'react' import { useEffect, useRef, useState } from 'react' import { StableAssets } from '@/components/StableAssets' - import AlgoIcon from '@/components/Icon' import { DelistedAssets } from '@/components/DelistedAssets' import Icon from '@mdi/react' @@ -45,6 +44,7 @@ import { useRouter } from 'next/router' import useTranslation from 'next-translate/useTranslation' import useUserStore from '@/store/use-user-state' import { withSearchResultsQuery } from '@/hooks' +import {useInversionStatus} from '@/hooks/utils/useInversionStatus' /** * Map a Query Result to a Search Result @@ -327,6 +327,7 @@ export const NavSearchTable = ({ const AssetNameCell = useCallback( ({ value, row }) => { + // const inversionStatusFn = useInversionStatus return (
*/} - - {formattedStableAsa[row?.original.id] && ( + {useInversionStatus(row?.original.id) && ( ALGO {`/`} @@ -362,7 +362,7 @@ export const NavSearchTable = ({ )} - {!formattedStableAsa[row?.original.id] && ( + {!useInversionStatus(row?.original.id) && ( {value} {`/`} diff --git a/components/Table/Cell.jsx b/components/Table/Cell.jsx index 826968108..876d9c2a0 100644 --- a/components/Table/Cell.jsx +++ b/components/Table/Cell.jsx @@ -25,6 +25,7 @@ import { useCallback, useMemo } from 'react' import { useEventDispatch } from '@/hooks/useEvents' import useTranslation from 'next-translate/useTranslation' import { getActiveNetwork } from 'services/environment' +import {useInversionStatus} from '@/hooks/utils/useInversionStatus' const OrderTypeSpan = styled.span` color: ${({ theme, value }) => @@ -53,7 +54,8 @@ export const AssetNameCell = ({ value, row }) => { }, [dispatcher]) const formattedPair = (value) => { const splittedPair = value.split('/') - if (row?.original?.isInverted && typeof splittedPair[1] !== 'undefined') { + // if (row?.original?.isInverted && typeof splittedPair[1] !== 'undefined') { + if (useInversionStatus(row?.original.id) && typeof splittedPair[1] !== 'undefined') { return `${splittedPair[1]}/${splittedPair[0]}` } else { return value @@ -87,7 +89,7 @@ AssetNameCell.propTypes = { row: PropTypes.any, value: PropTypes.any } export const OrderTypeCell = ({ value, row }) => { const { t } = useTranslation('orders') const formattedPair = (value) => { - if (row.original.isInverted) { + if (useInversionStatus(row?.original.id)) { return value === 'BUY' ? t('sell') : t('buy') } else { return t(value.toLowerCase()) @@ -95,7 +97,7 @@ export const OrderTypeCell = ({ value, row }) => { } } return ( - + {/* {t(value.toLowerCase())} */} {formattedPair(value)} diff --git a/components/Wallet/PlaceOrder/Form.jsx b/components/Wallet/PlaceOrder/Form.jsx index 717a105d6..a5178b913 100644 --- a/components/Wallet/PlaceOrder/Form.jsx +++ b/components/Wallet/PlaceOrder/Form.jsx @@ -17,7 +17,7 @@ import { Button, ButtonGroup } from '@mui/material' import { logInfo, throttleLog } from 'services/logRemote' import { useAlgodex, useAssetOrdersQuery } from '@/hooks' -import { useCallback, useMemo, useReducer, useState } from 'react' +import { useCallback, useEffect, useMemo, useReducer, useState } from 'react' import { AvailableBalance } from './Form/AvailableBalance' import Big from 'big.js' @@ -37,6 +37,7 @@ import toast from 'react-hot-toast' import { useEvent } from 'hooks/useEvents' import useTranslation from 'next-translate/useTranslation' import { useMaxSpendableAlgo } from '@/hooks/useMaxSpendableAlgo' +import { useInversionStatus } from '@/hooks/utils/useInversionStatus' export const Form = styled.form` scrollbar-width: none; @@ -84,7 +85,8 @@ export function PlaceOrderForm({ showTitle = true, asset, onSubmit, components: const { wallet, placeOrder, http, isConnected } = useAlgodex() const [tabSwitch, setTabSwitch] = useState(0) const [showForm, setShowForm] = useState(true) - + const [isInverted, setIsInverted] = useState(false) + // const isInverted = useInversionStatus(asset.id) const formatFloat = useCallback((value, decimal = 6) => { const splited = value.toString().split('.') const _decimals = decimal > 6 ? 6 : decimal @@ -113,7 +115,7 @@ export function PlaceOrderForm({ showTitle = true, asset, onSubmit, components: return res }, [wallet]) - const getAdjOrderAmount = useCallback(({amount, type, price}) => { + const getAdjOrderAmount = useCallback(({ amount, type, price }) => { let adjAmount = amount || 0 let total = adjAmount * price if (type === 'buy' && total > algoBalance) { @@ -208,20 +210,22 @@ export function PlaceOrderForm({ showTitle = true, asset, onSubmit, components: // useEffect(() => { // updateInitialState() // }, [order.type, updateInitialState]) - - const buttonProps = useMemo( - () => ({ - buy: { - variant: 'primary', - text: `${t('buy')} ${(asset.isInverted ? 'ALGO' : asset.name) || asset.id}` - }, - sell: { - variant: 'danger', - text: `${t('sell')} ${(asset.isInverted ? 'ALGO' : asset.name) || asset.id}` + + const buttonProps = useCallback( + (key) => { + const isInverted = useInversionStatus(asset.id) + const btnProps = { + buy: { + variant: 'primary', + text: `${t('buy')} ${(isInverted ? 'ALGO' : asset.name) || asset.id}` + }, + sell: { + variant: 'danger', + text: `${t('sell')} ${(isInverted ? 'ALGO' : asset.name) || asset.id}` + } } - }), - [asset] - ) + return btnProps[key]?.text + }, [asset]) useEvent('clicked', (data) => { if (data.type === 'order') { @@ -349,11 +353,11 @@ export function PlaceOrderForm({ showTitle = true, asset, onSubmit, components: const handleSubmit = useCallback( (e) => { e.preventDefault() - const { isInverted } = asset - const formattedOrder = {...order, type: isInverted && order.type === 'buy' ? 'sell' : 'buy'} + const isInverted = useInversionStatus(asset.id) + const formattedOrder = { ...order, type: isInverted && order.type === 'buy' ? 'sell' : 'buy' } formattedOrder.price = formatFloat(formattedOrder.price, 6) formattedOrder.amount = formatFloat(formattedOrder.amount, asset.decimals) - + let lastToastId = undefined let orderPromise const notifier = (msg) => { @@ -520,7 +524,8 @@ export function PlaceOrderForm({ showTitle = true, asset, onSubmit, components: asset.isGeoBlocked || !hasBalance || order.total === 0 || isBelowMinOrderAmount } > - {buttonProps[order.type || 'buy']?.text} + {/* {buttonProps[order.type || 'buy']?.text} */} + {buttonProps(order.type || 'buy')} )} diff --git a/components/Wallet/PlaceOrder/Form/TradeInputs.jsx b/components/Wallet/PlaceOrder/Form/TradeInputs.jsx index 94b22dd79..ad9d12612 100644 --- a/components/Wallet/PlaceOrder/Form/TradeInputs.jsx +++ b/components/Wallet/PlaceOrder/Form/TradeInputs.jsx @@ -29,6 +29,7 @@ import Typography from '@mui/material/Typography' import USDPrice from '@/components/Wallet/PriceConversion/USDPrice' import theme from '../../../../theme' import useTranslation from 'next-translate/useTranslation' +import {useInversionStatus} from '@/hooks/utils/useInversionStatus' /** * @@ -327,7 +328,7 @@ export const TradeInputs = ({ } return ( - {asset.isInverted ? invertedAssetInput() : regularAssetInput()} + {useInversionStatus(asset.id) ? invertedAssetInput() : regularAssetInput()} {/* - {asset.isInverted ? asset.name : 'ALGO'} + {useInversionStatus(asset.id) ? asset.name : 'ALGO'} } diff --git a/components/Wallet/Table/AssetsTable.jsx b/components/Wallet/Table/AssetsTable.jsx index 6f6eef589..d8b1145e0 100644 --- a/components/Wallet/Table/AssetsTable.jsx +++ b/components/Wallet/Table/AssetsTable.jsx @@ -28,6 +28,7 @@ import { useEventDispatch } from '@/hooks/useEvents' import useTranslation from 'next-translate/useTranslation' import useUserStore from '@/store/use-user-state' import { withWalletAssetsQuery } from '@/hooks' +import {useInversionStatus} from '@/hooks/utils/useInversionStatus' const Container = styled.div` display: flex; @@ -81,7 +82,7 @@ export function AssetsTable({ assets }) { const formatAssetsList = assets.map((asset) => { return { ...asset, - isInverted: StableAssets.includes(parseInt(asset.id)) + isInverted: useInversionStatus(parseInt(asset.id)) } }) const columns = useMemo( diff --git a/components/Wallet/Table/TradeHistoryTable.jsx b/components/Wallet/Table/TradeHistoryTable.jsx index 705989797..74f8a17e6 100644 --- a/components/Wallet/Table/TradeHistoryTable.jsx +++ b/components/Wallet/Table/TradeHistoryTable.jsx @@ -28,6 +28,7 @@ import useTranslation from 'next-translate/useTranslation' import useUserStore from '@/store/use-user-state' import { withWalletTradeHistoryQuery } from '@/hooks' import {floatToFixedDisplay} from '@/services/display'; +import {useInversionStatus} from '@/hooks/utils/useInversionStatus' const OrderHistoryContainer = styled.div` display: flex; @@ -66,7 +67,7 @@ export function TradeHistoryTable({ orders }) { const _order = { ...order, price: floatToFixedDisplay(order.price), - isInverted: StableAssets.includes(parseInt(order.id)) + isInverted: useInversionStatus(parseInt(order.id)) } return _order }) diff --git a/pages/trade/[id].js b/pages/trade/[id].js index 11bde4d4a..2835bbd79 100644 --- a/pages/trade/[id].js +++ b/pages/trade/[id].js @@ -40,6 +40,7 @@ import { useRouter } from 'next/router' import useUserStore from '@/store/use-user-state' import useWallets from '@/hooks/useWallets' import { StableAssets } from '@/components/StableAssets' +// import {useInversionStatus} from '@/hooks/utils/useInversionStatus' /** * Fetch Traded Asset Paths @@ -127,7 +128,8 @@ export async function getStaticProps({ params: { id } }) { if (typeof staticAssetPrice.isTraded !== 'undefined') { staticExplorerAsset.price_info = staticAssetPrice } - + // const isInverted = localStorage.getItem('inversionStatus') + // console.log(isInverted, 'hello here') staticExplorerAsset.isInverted = StableAssets.includes(parseInt(id)) if (typeof staticExplorerAsset.name === 'undefined') { staticExplorerAsset.name = '' From 6fdb43f0c4805c823c38fbaee2bf4858102e17f4 Mon Sep 17 00:00:00 2001 From: Ikechi Date: Mon, 28 Nov 2022 10:59:43 +0100 Subject: [PATCH 05/58] Add asset support hook --- hooks/utils/useInversionStatus.js | 34 +++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 hooks/utils/useInversionStatus.js diff --git a/hooks/utils/useInversionStatus.js b/hooks/utils/useInversionStatus.js new file mode 100644 index 000000000..87a69321e --- /dev/null +++ b/hooks/utils/useInversionStatus.js @@ -0,0 +1,34 @@ +/* + * Algodex Frontend (algodex-react) + * Copyright (C) 2021 - 2022 Algodex VASP (BVI) Corp. + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published + * by the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + */ + +import { useState, useCallback, useMemo } from 'react' +import { StableAssets } from '@/components/StableAssets' + +/** + * + * @param {number} id + * @return {boolean} + */ +export function useInversionStatus(id) { + const inversionStatus = localStorage.getItem('inversionStatus') + if (inversionStatus && inversionStatus === 'true') { + return StableAssets.includes(parseInt(id)) + } + return false + // return StableAssets.includes(parseInt(id)) +} + +export default useInversionStatus From f723679c2c1198127860719b0e34ebf10a98834c Mon Sep 17 00:00:00 2001 From: Ikechi Date: Mon, 28 Nov 2022 11:21:59 +0100 Subject: [PATCH 06/58] Show invert button for stable assets --- components/Asset/Chart/ChartOverlay.jsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/components/Asset/Chart/ChartOverlay.jsx b/components/Asset/Chart/ChartOverlay.jsx index b887fac5f..2677c888f 100644 --- a/components/Asset/Chart/ChartOverlay.jsx +++ b/components/Asset/Chart/ChartOverlay.jsx @@ -27,7 +27,9 @@ import theme from 'theme' import { useUserStore } from 'store' import { Typography, Stack, Button } from '@mui/material' import Image from 'next/image' -import {useInversionStatus} from '@/hooks/utils/useInversionStatus' +import { useInversionStatus } from '@/hooks/utils/useInversionStatus' +import { StableAssets } from '@/components/StableAssets' + export const Container = styled.div` position: absolute; top: 0; @@ -280,8 +282,7 @@ function ChartOverlay(props) {
- {/* {console.log(inversionStatus, 'hell0o here')} */} - + }
From a5d8bc3d9b89117e68eb407fec1563823d713dd8 Mon Sep 17 00:00:00 2001 From: Ikechi Date: Mon, 28 Nov 2022 13:38:26 +0100 Subject: [PATCH 07/58] Sort orders --- components/Asset/OrderBook/OrderBook.jsx | 17 +++++++++++------ hooks/utils/useInversionStatus.js | 3 +-- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/components/Asset/OrderBook/OrderBook.jsx b/components/Asset/OrderBook/OrderBook.jsx index 84dbf9cd9..6621caaf7 100644 --- a/components/Asset/OrderBook/OrderBook.jsx +++ b/components/Asset/OrderBook/OrderBook.jsx @@ -425,9 +425,7 @@ const DECIMALS_MAP = { const renderOrders = useCallback((data, type) => { const color = type === 'buy' ? 'green' : 'red' - return data.map((row, index) => { - // console.log(row, 'data here') const amount = new Big(row.amount) const total = new Big(row.total) const handleSelectOrder = () => { @@ -489,11 +487,13 @@ const DECIMALS_MAP = { },[aggregatedBuyOrder, renderOrders]); const sortedBuyOrder = useMemo(() => { - return aggregatedBuyOrder.sort((a, b) => b.price - a.price) + const sortedOrders = aggregatedBuyOrder.sort((a, b) => b.price - a.price) + return renderOrders(sortedOrders, 'buy') }, [aggregatedBuyOrder]) const sortedSellOrder = useMemo(() => { - return aggregatedSellOrder.sort((a, b) => b.price - a.price) + const sortedSellOrder = aggregatedSellOrder.sort((a, b) => b.price - a.price) + return renderOrders(sortedSellOrder, 'sell') }, [aggregatedSellOrder]) @@ -538,10 +538,14 @@ const DECIMALS_MAP = { - {renderedSellOrders} + {/* {renderedSellOrders} */} {/* {renderOrders(asset.isInverted ? sortedBuyOrder : aggregatedSellOrder, 'sell')} */} {/* {renderOrders(useInversionStatus(asset.id) ? sortedBuyOrder : renderedSellOrders, 'sell')} */} {/* {renderOrders(isInverted ? sortedBuyOrder : renderedSellOrders, 'sell')} */} + {/* {renderOrders(isInverted ? sortedBuyOrder : aggregatedSellOrder, 'sell')} */} + + {isInverted ? sortedBuyOrder : renderedSellOrders} + @@ -550,7 +554,8 @@ const DECIMALS_MAP = { - {renderedBuyOrders} + {isInverted ? sortedSellOrder : renderedBuyOrders} + {/* {renderedBuyOrders} */} {/* {renderOrders(asset.isInverted ? sortedSellOrder : aggregatedBuyOrder, 'buy')} */} {/* {renderOrders(useInversionStatus(asset.id) ? sortedSellOrder : renderedBuyOrders, 'buy')} */} diff --git a/hooks/utils/useInversionStatus.js b/hooks/utils/useInversionStatus.js index 87a69321e..91c2af265 100644 --- a/hooks/utils/useInversionStatus.js +++ b/hooks/utils/useInversionStatus.js @@ -22,13 +22,12 @@ import { StableAssets } from '@/components/StableAssets' * @param {number} id * @return {boolean} */ -export function useInversionStatus(id) { +export function useInversionStatus(id, storageStatus) { const inversionStatus = localStorage.getItem('inversionStatus') if (inversionStatus && inversionStatus === 'true') { return StableAssets.includes(parseInt(id)) } return false - // return StableAssets.includes(parseInt(id)) } export default useInversionStatus From 06092d2b2565ce8af913f3e16e9610c7cf224b32 Mon Sep 17 00:00:00 2001 From: Ikechi Date: Mon, 28 Nov 2022 16:48:22 +0100 Subject: [PATCH 08/58] =?UTF-8?q?=F0=9F=9A=A8=20Fix=20linting=20error?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Asset/Chart/Chart.jsx | 5 +- components/Asset/OrderBook/OrderBook.jsx | 157 +++++++++--------- .../Asset/TradeHistory/TradeHistory.jsx | 8 +- components/Nav/SearchSidebar/SearchTable.jsx | 14 +- components/Table/Cell.jsx | 10 +- components/Wallet/PlaceOrder/Form.jsx | 17 +- components/Wallet/Table/AssetsTable.jsx | 2 +- components/Wallet/Table/TradeHistoryTable.jsx | 11 +- 8 files changed, 126 insertions(+), 98 deletions(-) diff --git a/components/Asset/Chart/Chart.jsx b/components/Asset/Chart/Chart.jsx index 9bc5b585d..c02c4c643 100644 --- a/components/Asset/Chart/Chart.jsx +++ b/components/Asset/Chart/Chart.jsx @@ -128,8 +128,9 @@ export function Chart({ const [overlay, setOverlay] = useState(_overlay) const [chartMode, setChartMode] = useState(_mode) const [currentLogical, setCurrentLogical] = useState(ohlc.length - 1) + const isInverted = useInversionStatus(asset.id) - if (useInversionStatus(asset.id)) { + if (isInverted) { 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' @@ -204,7 +205,7 @@ export function Chart({ const mouseOut = useCallback(() => { // setOverlay(_overlay) - if (useInversionStatus(asset.id)) { + if (isInverted) { const __overlay = { ...overlay, ..._overlay } setOverlay(__overlay) } else { diff --git a/components/Asset/OrderBook/OrderBook.jsx b/components/Asset/OrderBook/OrderBook.jsx index 6621caaf7..eb73d06d4 100644 --- a/components/Asset/OrderBook/OrderBook.jsx +++ b/components/Asset/OrderBook/OrderBook.jsx @@ -47,7 +47,7 @@ import { getIsRestricted, getIsRestrictedCountry } from '@/utils/restrictedAssets' -import {useInversionStatus} from '@/hooks/utils/useInversionStatus' +import { useInversionStatus } from '@/hooks/utils/useInversionStatus' const FirstOrderContainer = styled.div` flex: 1 1 0; @@ -163,9 +163,9 @@ const BookRow = styled.div` ${gridStyles} &:hover { background-color: ${({ theme, type }) => { - const color = type === 'buy' ? 'green' : 'red' - return rgba(theme.palette[color]['500'], 0.15) - }}; + const color = type === 'buy' ? 'green' : 'red' + return rgba(theme.palette[color]['500'], 0.15) + }}; p { &:not(:first-of-type) { color: ${({ theme }) => theme.palette.gray['000']}; @@ -322,7 +322,7 @@ const DECIMALS_MAP = { * @returns {JSX.Element} * @constructor */ - export function OrderBook({ asset, orders, components }) { +export function OrderBook({ asset, orders, components }) { const { query } = useRouter() const { PriceDisplay } = components const { t } = useTranslation('common') @@ -339,7 +339,7 @@ const DECIMALS_MAP = { }) setSelectedPrecision(DECIMALS_MAP[e.target.value]) }, [asset.id, cachedSelectedPrecision, setCachedSelectedPrecision]) - + const [selectedPrecision, setSelectedPrecision] = useState( DECIMALS_MAP[cachedSelectedPrecision[asset.id]] || 6 ) @@ -381,17 +381,17 @@ const DECIMALS_MAP = { // console.log('zreturning ' + compoundedAmount) return compoundedAmount } - },[asset.decimals, maxSpendableAlgo]) + }, [asset.decimals, maxSpendableAlgo]) const reduceOrders = useCallback((result, order) => { // const _price = floatToFixedDynamic(order.price, selectedPrecision, selectedPrecision) - const _price = useInversionStatus(asset.id) + const _price = isInverted ? floatToFixedDynamic(1 / order.price, selectedPrecision, selectedPrecision) : floatToFixedDynamic(order.price, selectedPrecision, selectedPrecision) // const _amount = order.amount - const _amount = useInversionStatus(asset.id) ? order.amount * order.price : order.amount - + const _amount = isInverted ? order.amount * order.price : order.amount + const index = result.findIndex( (obj) => floatToFixedDynamic(obj.price, selectedPrecision, selectedPrecision) === _price ) @@ -421,7 +421,7 @@ const DECIMALS_MAP = { }, [orders.sell, reduceOrders]) const isGeoBlocked = useMemo(() => getIsRestrictedCountry(query) && getIsRestricted(asset.id) - , [asset.id, query]) + , [asset.id, query]) const renderOrders = useCallback((data, type) => { const color = type === 'buy' ? 'green' : 'red' @@ -476,15 +476,15 @@ const DECIMALS_MAP = { ) }) - },[calculatedAmountFn, decimals, dispatcher, isGeoBlocked]) + }, [calculatedAmountFn, decimals, dispatcher, isGeoBlocked]) - const renderedSellOrders = useMemo( () => { + const renderedSellOrders = useMemo(() => { return renderOrders(aggregatedSellOrder, 'sell') - },[aggregatedSellOrder, renderOrders]); + }, [aggregatedSellOrder, renderOrders]); - const renderedBuyOrders = useMemo( () => { + const renderedBuyOrders = useMemo(() => { return renderOrders(aggregatedBuyOrder, 'buy') - },[aggregatedBuyOrder, renderOrders]); + }, [aggregatedBuyOrder, renderOrders]); const sortedBuyOrder = useMemo(() => { const sortedOrders = aggregatedBuyOrder.sort((a, b) => b.price - a.price) @@ -495,7 +495,7 @@ const DECIMALS_MAP = { const sortedSellOrder = aggregatedSellOrder.sort((a, b) => b.price - a.price) return renderOrders(sortedSellOrder, 'sell') }, [aggregatedSellOrder]) - + return useMemo(() => { if (typeof orders.sell !== 'undefined' && typeof orders.buy !== 'undefined') { @@ -503,68 +503,69 @@ const DECIMALS_MAP = { return } } - + return ( -
- - - - - {t('order-book')} - - - - - - - - - - -
- {/* */} - - - {t('amount')} ({isInverted ? 'ALGO' : assetVeryShortName}) - - - {t('total')} ({isInverted ? 'ALGO' : assetVeryShortName}) - - {/* */} -
- - - - {/* {renderedSellOrders} */} - {/* {renderOrders(asset.isInverted ? sortedBuyOrder : aggregatedSellOrder, 'sell')} */} - {/* {renderOrders(useInversionStatus(asset.id) ? sortedBuyOrder : renderedSellOrders, 'sell')} */} - {/* {renderOrders(isInverted ? sortedBuyOrder : renderedSellOrders, 'sell')} */} - {/* {renderOrders(isInverted ? sortedBuyOrder : aggregatedSellOrder, 'sell')} */} - - {isInverted ? sortedBuyOrder : renderedSellOrders} - - - - - - - - - - {isInverted ? sortedSellOrder : renderedBuyOrders} - {/* {renderedBuyOrders} */} - {/* {renderOrders(asset.isInverted ? sortedSellOrder : aggregatedBuyOrder, 'buy')} */} - {/* {renderOrders(useInversionStatus(asset.id) ? sortedSellOrder : renderedBuyOrders, 'buy')} */} - - - -
- )}, [PriceDisplay, asset, assetVeryShortName, isSignedIn, - onAggrSelectorChange, orders.buy, orders.sell, - renderedBuyOrders, renderedSellOrders, selectedPrecision, t, isInverted]) +
+ + + + + {t('order-book')} + + + + + + + + + + +
+ {/* */} + + + {t('amount')} ({isInverted ? 'ALGO' : assetVeryShortName}) + + + {t('total')} ({isInverted ? 'ALGO' : assetVeryShortName}) + + {/* */} +
+ + + + {/* {renderedSellOrders} */} + {/* {renderOrders(asset.isInverted ? sortedBuyOrder : aggregatedSellOrder, 'sell')} */} + {/* {renderOrders(useInversionStatus(asset.id) ? sortedBuyOrder : renderedSellOrders, 'sell')} */} + {/* {renderOrders(isInverted ? sortedBuyOrder : renderedSellOrders, 'sell')} */} + {/* {renderOrders(isInverted ? sortedBuyOrder : aggregatedSellOrder, 'sell')} */} + + {isInverted ? sortedBuyOrder : renderedSellOrders} + + + + + + + + + + {isInverted ? sortedSellOrder : renderedBuyOrders} + {/* {renderedBuyOrders} */} + {/* {renderOrders(asset.isInverted ? sortedSellOrder : aggregatedBuyOrder, 'buy')} */} + {/* {renderOrders(useInversionStatus(asset.id) ? sortedSellOrder : renderedBuyOrders, 'buy')} */} + + + +
+ ) + }, [PriceDisplay, asset, assetVeryShortName, isSignedIn, + onAggrSelectorChange, orders.buy, orders.sell, + renderedBuyOrders, renderedSellOrders, selectedPrecision, t, isInverted]) } OrderBook.propTypes = { diff --git a/components/Asset/TradeHistory/TradeHistory.jsx b/components/Asset/TradeHistory/TradeHistory.jsx index 7adfdf66a..dc3bbcac1 100644 --- a/components/Asset/TradeHistory/TradeHistory.jsx +++ b/components/Asset/TradeHistory/TradeHistory.jsx @@ -149,7 +149,7 @@ const PriceHeader = () => { export function TradeHistory({ asset, orders: tradesData }) { const { t } = useTranslation('common') const hasTradeHistory = tradesData.length > 0 - + const isInverted = useInversionStatus(asset.id) const assetVeryShortName = useMemo(() => assetVeryShortNameFn(asset), [asset]) const renderHistory = useCallback(() => { @@ -184,7 +184,7 @@ export function TradeHistory({ asset, orders: tradesData }) { if (row.price === 0) { return } - const price = useInversionStatus(asset.id) ? 1 / row.price : row.price + const price = isInverted ? 1 / row.price : row.price return ( @@ -225,12 +225,12 @@ export function TradeHistory({ asset, orders: tradesData }) {
{/* */} - + {/* {t('amount')} ({assetVeryShortName}) */} - {t('amount')} ({useInversionStatus(asset.id) ? 'ALGO' : assetVeryShortName}) + {t('amount')} ({isInverted ? 'ALGO' : assetVeryShortName}) {t('time')} diff --git a/components/Nav/SearchSidebar/SearchTable.jsx b/components/Nav/SearchSidebar/SearchTable.jsx index 7f4db33d9..0004c4488 100644 --- a/components/Nav/SearchSidebar/SearchTable.jsx +++ b/components/Nav/SearchSidebar/SearchTable.jsx @@ -325,9 +325,17 @@ export const NavSearchTable = ({ row: PropTypes.object } + const getInversionStatus = useCallback((id) => { + const inversionStatus = localStorage.getItem('inversionStatus') + if (inversionStatus && inversionStatus === 'true') { + return StableAssets.includes(parseInt(id)) + } + return false + }, []) + const AssetNameCell = useCallback( ({ value, row }) => { - // const inversionStatusFn = useInversionStatus + const isInverted = getInversionStatus(row.original?.id) return (
*/} - {useInversionStatus(row?.original.id) && ( + {isInverted && ( ALGO {`/`} @@ -362,7 +370,7 @@ export const NavSearchTable = ({ )} - {!useInversionStatus(row?.original.id) && ( + {!isInverted && ( {value} {`/`} diff --git a/components/Table/Cell.jsx b/components/Table/Cell.jsx index 876d9c2a0..848f37824 100644 --- a/components/Table/Cell.jsx +++ b/components/Table/Cell.jsx @@ -47,6 +47,7 @@ const TradeDetailLink = styled.a` */ export const AssetNameCell = ({ value, row }) => { const dispatcher = useEventDispatch() + const isInverted = useInversionStatus(row?.original.id) const assetId = useMemo(() => row?.original?.asset?.id || row?.original?.id, [row?.original?.asset?.id, row?.original?.id]) const onClick = useCallback(() => { @@ -55,7 +56,7 @@ export const AssetNameCell = ({ value, row }) => { const formattedPair = (value) => { const splittedPair = value.split('/') // if (row?.original?.isInverted && typeof splittedPair[1] !== 'undefined') { - if (useInversionStatus(row?.original.id) && typeof splittedPair[1] !== 'undefined') { + if (isInverted && typeof splittedPair[1] !== 'undefined') { return `${splittedPair[1]}/${splittedPair[0]}` } else { return value @@ -88,8 +89,9 @@ AssetNameCell.propTypes = { row: PropTypes.any, value: PropTypes.any } */ export const OrderTypeCell = ({ value, row }) => { const { t } = useTranslation('orders') + const isInverted = useInversionStatus(row.original.id) const formattedPair = (value) => { - if (useInversionStatus(row?.original.id)) { + if (isInverted) { return value === 'BUY' ? t('sell') : t('buy') } else { return t(value.toLowerCase()) @@ -97,13 +99,13 @@ export const OrderTypeCell = ({ value, row }) => { } } return ( - + {/* {t(value.toLowerCase())} */} {formattedPair(value)} ) } -OrderTypeCell.propTypes = { value: PropTypes.any } +OrderTypeCell.propTypes = { value: PropTypes.any, row: PropTypes.object } /** * Show Trade Detail diff --git a/components/Wallet/PlaceOrder/Form.jsx b/components/Wallet/PlaceOrder/Form.jsx index a5178b913..75b74f889 100644 --- a/components/Wallet/PlaceOrder/Form.jsx +++ b/components/Wallet/PlaceOrder/Form.jsx @@ -38,6 +38,7 @@ import { useEvent } from 'hooks/useEvents' import useTranslation from 'next-translate/useTranslation' import { useMaxSpendableAlgo } from '@/hooks/useMaxSpendableAlgo' import { useInversionStatus } from '@/hooks/utils/useInversionStatus' +import { StableAssets } from '@/components/StableAssets' export const Form = styled.form` scrollbar-width: none; @@ -85,8 +86,7 @@ export function PlaceOrderForm({ showTitle = true, asset, onSubmit, components: const { wallet, placeOrder, http, isConnected } = useAlgodex() const [tabSwitch, setTabSwitch] = useState(0) const [showForm, setShowForm] = useState(true) - const [isInverted, setIsInverted] = useState(false) - // const isInverted = useInversionStatus(asset.id) + const formatFloat = useCallback((value, decimal = 6) => { const splited = value.toString().split('.') const _decimals = decimal > 6 ? 6 : decimal @@ -107,6 +107,7 @@ export function PlaceOrderForm({ showTitle = true, asset, onSubmit, components: return res }, [wallet, asset]) + const algoBalance = useMemo(() => { let res = 0 if (typeof wallet !== 'undefined' && typeof wallet.amount === 'number') { @@ -213,7 +214,7 @@ export function PlaceOrderForm({ showTitle = true, asset, onSubmit, components: const buttonProps = useCallback( (key) => { - const isInverted = useInversionStatus(asset.id) + const isInverted = getInversionStatus() const btnProps = { buy: { variant: 'primary', @@ -350,10 +351,18 @@ export function PlaceOrderForm({ showTitle = true, asset, onSubmit, components: [asset.isGeoBlocked] ) + const getInversionStatus = useCallback(() => { + const inversionStatus = localStorage.getItem('inversionStatus') + if (inversionStatus && inversionStatus === 'true') { + return StableAssets.includes(parseInt(asset.id)) + } + return false + }, []) const handleSubmit = useCallback( (e) => { e.preventDefault() - const isInverted = useInversionStatus(asset.id) + const isInverted = getInversionStatus() + const formattedOrder = { ...order, type: isInverted && order.type === 'buy' ? 'sell' : 'buy' } formattedOrder.price = formatFloat(formattedOrder.price, 6) formattedOrder.amount = formatFloat(formattedOrder.amount, asset.decimals) diff --git a/components/Wallet/Table/AssetsTable.jsx b/components/Wallet/Table/AssetsTable.jsx index d8b1145e0..21c72a820 100644 --- a/components/Wallet/Table/AssetsTable.jsx +++ b/components/Wallet/Table/AssetsTable.jsx @@ -76,13 +76,13 @@ export function AssetsTable({ assets }) { // console.log(`AssetsTable(`, arguments[0], `)`) const { t } = useTranslation('orders') + // const isInverted = useInversionStatus(asset.id) const walletAssetsTableState = useUserStore((state) => state.walletAssetsTableState) const setWalletAssetsTableState = useUserStore((state) => state.setWalletAssetsTableState) const formatAssetsList = assets.map((asset) => { return { ...asset, - isInverted: useInversionStatus(parseInt(asset.id)) } }) const columns = useMemo( diff --git a/components/Wallet/Table/TradeHistoryTable.jsx b/components/Wallet/Table/TradeHistoryTable.jsx index 74f8a17e6..1c981a1bb 100644 --- a/components/Wallet/Table/TradeHistoryTable.jsx +++ b/components/Wallet/Table/TradeHistoryTable.jsx @@ -23,7 +23,7 @@ import Table, { import { StableAssets } from '@/components/StableAssets' import PropTypes from 'prop-types' import styled from '@emotion/styled' -import { useMemo } from 'react' +import { useMemo, useCallback } from 'react' import useTranslation from 'next-translate/useTranslation' import useUserStore from '@/store/use-user-state' import { withWalletTradeHistoryQuery } from '@/hooks' @@ -62,12 +62,19 @@ export function TradeHistoryTable({ orders }) { const setWalletOrderHistoryTableState = useUserStore( (state) => state.setWalletOrderHistoryTableState ) + const getInversionStatus = useCallback((id) => { + const inversionStatus = localStorage.getItem('inversionStatus') + if (inversionStatus && inversionStatus === 'true') { + return StableAssets.includes(parseInt(id)) + } + return false + }, []) const _formattedOrders = useMemo(() => { return orders.map((order) => { const _order = { ...order, price: floatToFixedDisplay(order.price), - isInverted: useInversionStatus(parseInt(order.id)) + isInverted: getInversionStatus(parseInt(order.id)) } return _order }) From 2ae8d9357e3498cb7a5db947e1be906aee1b96eb Mon Sep 17 00:00:00 2001 From: Ikechi Date: Mon, 28 Nov 2022 17:17:53 +0100 Subject: [PATCH 09/58] =?UTF-8?q?=F0=9F=9A=A8=20More=20eslint=20fixing?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Asset/Chart/ChartSettings.jsx | 3 +-- components/Asset/OrderBook/OrderBook.jsx | 2 +- components/Asset/OrderBook/OrderBookPriceInfo.js | 4 ++-- components/Nav/SearchSidebar/SearchTable.jsx | 1 - components/Wallet/PlaceOrder/Form.jsx | 3 +-- components/Wallet/Table/AssetsTable.jsx | 2 -- components/Wallet/Table/TradeHistoryTable.jsx | 1 - hooks/utils/useInversionStatus.js | 3 +-- 8 files changed, 6 insertions(+), 13 deletions(-) diff --git a/components/Asset/Chart/ChartSettings.jsx b/components/Asset/Chart/ChartSettings.jsx index e01c091f8..c5cd444d3 100644 --- a/components/Asset/Chart/ChartSettings.jsx +++ b/components/Asset/Chart/ChartSettings.jsx @@ -14,8 +14,7 @@ * along with this program. If not, see . */ -import Button from 'components/Button' -import { Fragment, useCallback } from 'react' +import { useCallback } from 'react' import PropTypes from 'prop-types' import { lighten } from 'polished' import styled from '@emotion/styled' diff --git a/components/Asset/OrderBook/OrderBook.jsx b/components/Asset/OrderBook/OrderBook.jsx index eb73d06d4..c13b05e5f 100644 --- a/components/Asset/OrderBook/OrderBook.jsx +++ b/components/Asset/OrderBook/OrderBook.jsx @@ -16,7 +16,7 @@ // import '@/wdyr'; import { ArrowDown, ArrowUp } from 'react-feather' -import { Fragment, useCallback, useMemo, useState } from 'react' +import { useCallback, useMemo, useState } from 'react' // import { Typography, Typography, Typography, Typography } from '@/components/Typography' import { useAlgodex, withAssetOrderbookQuery, withAssetPriceQuery } from '@/hooks' diff --git a/components/Asset/OrderBook/OrderBookPriceInfo.js b/components/Asset/OrderBook/OrderBookPriceInfo.js index b3b974f2b..cbe58f66e 100644 --- a/components/Asset/OrderBook/OrderBookPriceInfo.js +++ b/components/Asset/OrderBook/OrderBookPriceInfo.js @@ -17,12 +17,12 @@ // import { BodyCopy, HeaderSmInter, LabelLg } from '@/components/Typography' import { Stack, Typography } from '@mui/material' -import { useCallback, useMemo } from 'react' +import { useMemo } from 'react' import Icon from '@mdi/react' import PropTypes from 'prop-types' import Spinner from '@/components/Spinner' -import convertFromAsaUnits from '@algodex/algodex-sdk/lib/utils/units/fromAsaUnits' +// import convertFromAsaUnits from '@algodex/algodex-sdk/lib/utils/units/fromAsaUnits' import floatToFixed from '@algodex/algodex-sdk/lib/utils/format/floatToFixed' import { formatUSDPrice } from '@/components/helpers' import { mdiApproximatelyEqual } from '@mdi/js' diff --git a/components/Nav/SearchSidebar/SearchTable.jsx b/components/Nav/SearchSidebar/SearchTable.jsx index 0004c4488..baf1fbb3a 100644 --- a/components/Nav/SearchSidebar/SearchTable.jsx +++ b/components/Nav/SearchSidebar/SearchTable.jsx @@ -44,7 +44,6 @@ import { useRouter } from 'next/router' import useTranslation from 'next-translate/useTranslation' import useUserStore from '@/store/use-user-state' import { withSearchResultsQuery } from '@/hooks' -import {useInversionStatus} from '@/hooks/utils/useInversionStatus' /** * Map a Query Result to a Search Result diff --git a/components/Wallet/PlaceOrder/Form.jsx b/components/Wallet/PlaceOrder/Form.jsx index 75b74f889..d92faa5b1 100644 --- a/components/Wallet/PlaceOrder/Form.jsx +++ b/components/Wallet/PlaceOrder/Form.jsx @@ -17,7 +17,7 @@ import { Button, ButtonGroup } from '@mui/material' import { logInfo, throttleLog } from 'services/logRemote' import { useAlgodex, useAssetOrdersQuery } from '@/hooks' -import { useCallback, useEffect, useMemo, useReducer, useState } from 'react' +import { useCallback, useMemo, useReducer, useState } from 'react' import { AvailableBalance } from './Form/AvailableBalance' import Big from 'big.js' @@ -37,7 +37,6 @@ import toast from 'react-hot-toast' import { useEvent } from 'hooks/useEvents' import useTranslation from 'next-translate/useTranslation' import { useMaxSpendableAlgo } from '@/hooks/useMaxSpendableAlgo' -import { useInversionStatus } from '@/hooks/utils/useInversionStatus' import { StableAssets } from '@/components/StableAssets' export const Form = styled.form` diff --git a/components/Wallet/Table/AssetsTable.jsx b/components/Wallet/Table/AssetsTable.jsx index 21c72a820..996360bd6 100644 --- a/components/Wallet/Table/AssetsTable.jsx +++ b/components/Wallet/Table/AssetsTable.jsx @@ -17,7 +17,6 @@ import { AssetId, AssetNameBlock } from '@/components/Asset/Typography' import Table, { AssetNameCell, DefaultCell } from '@/components/Table' import { useCallback, useMemo } from 'react' -import { StableAssets } from '@/components/StableAssets' import Link from 'next/link' import PropTypes from 'prop-types' @@ -28,7 +27,6 @@ import { useEventDispatch } from '@/hooks/useEvents' import useTranslation from 'next-translate/useTranslation' import useUserStore from '@/store/use-user-state' import { withWalletAssetsQuery } from '@/hooks' -import {useInversionStatus} from '@/hooks/utils/useInversionStatus' const Container = styled.div` display: flex; diff --git a/components/Wallet/Table/TradeHistoryTable.jsx b/components/Wallet/Table/TradeHistoryTable.jsx index 1c981a1bb..9ed3a67a5 100644 --- a/components/Wallet/Table/TradeHistoryTable.jsx +++ b/components/Wallet/Table/TradeHistoryTable.jsx @@ -28,7 +28,6 @@ import useTranslation from 'next-translate/useTranslation' import useUserStore from '@/store/use-user-state' import { withWalletTradeHistoryQuery } from '@/hooks' import {floatToFixedDisplay} from '@/services/display'; -import {useInversionStatus} from '@/hooks/utils/useInversionStatus' const OrderHistoryContainer = styled.div` display: flex; diff --git a/hooks/utils/useInversionStatus.js b/hooks/utils/useInversionStatus.js index 91c2af265..7e1b219ff 100644 --- a/hooks/utils/useInversionStatus.js +++ b/hooks/utils/useInversionStatus.js @@ -14,7 +14,6 @@ * along with this program. If not, see . */ -import { useState, useCallback, useMemo } from 'react' import { StableAssets } from '@/components/StableAssets' /** @@ -22,7 +21,7 @@ import { StableAssets } from '@/components/StableAssets' * @param {number} id * @return {boolean} */ -export function useInversionStatus(id, storageStatus) { +export function useInversionStatus(id) { const inversionStatus = localStorage.getItem('inversionStatus') if (inversionStatus && inversionStatus === 'true') { return StableAssets.includes(parseInt(id)) From 171db83ca067a220ad3ec1719c4f3e9e67e9d1fa Mon Sep 17 00:00:00 2001 From: Ikechi Date: Tue, 29 Nov 2022 15:00:09 +0100 Subject: [PATCH 10/58] =?UTF-8?q?=E2=9C=A8=20Show=20asset=20inversion=20bu?= =?UTF-8?q?tton=20for=20all=20assets?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.mainnet | 2 +- components/Asset/Chart/ChartOverlay.jsx | 21 +++++++++++++++++---- components/StableAssets | 3 ++- 3 files changed, 20 insertions(+), 6 deletions(-) diff --git a/.env.mainnet b/.env.mainnet index 669cd33a7..dc42b6b2e 100644 --- a/.env.mainnet +++ b/.env.mainnet @@ -24,5 +24,5 @@ NEXT_PUBLIC_SUBSCRIBER_FORM_ID=f4023600-6995-433b-894a-2a1ab09dc2f6 NEXT_PUBLIC_SUPPORT_FORM_ID=282959ce-3633-4a73-907a-ef84cebe1123 HUBSPOT_APIKEY= -ALGODEX_API_V2=http://mainnet-services-2.algodex.com:8080 +ALGODEX_API_V2=http://mainnet-services-2b.algodex.com:8080 SKIP_PRERENDER_EXCEPT_DEFAULT=0s \ No newline at end of file diff --git a/components/Asset/Chart/ChartOverlay.jsx b/components/Asset/Chart/ChartOverlay.jsx index 2677c888f..3e4dc826d 100644 --- a/components/Asset/Chart/ChartOverlay.jsx +++ b/components/Asset/Chart/ChartOverlay.jsx @@ -248,6 +248,14 @@ function ChartOverlay(props) { } }, []) + const getInversionStatus = useCallback(() => { + const inversionStatus = localStorage.getItem('inversionStatus') + if (inversionStatus && inversionStatus === 'true') { + return StableAssets.includes(parseInt(asset.id)) + } + return false + }, []) + return (
@@ -282,15 +290,20 @@ function ChartOverlay(props) {
- {StableAssets.includes(parseInt(asset.id)) && } +
diff --git a/components/StableAssets b/components/StableAssets index e3933b7f6..494e97227 100644 --- a/components/StableAssets +++ b/components/StableAssets @@ -5,5 +5,6 @@ export const StableAssets = [ 37074699, // USDC, 38718614, // USDC, 42279195, // USDT - 94115664 //USDT + 94115664, //USDT + 31566704 // USDC Mainnet ] \ No newline at end of file From 30c5f26db3c7aa17e50f00dc64a4d630b5c61f63 Mon Sep 17 00:00:00 2001 From: Ikechi Date: Wed, 30 Nov 2022 15:38:37 +0100 Subject: [PATCH 11/58] Complete invertion for all assets --- components/Asset/Chart/ChartOverlay.jsx | 13 ++++++++++--- components/StableAssets | 2 ++ components/Wallet/PlaceOrder/Form.jsx | 2 +- components/Wallet/Table/TradeHistoryTable.jsx | 2 +- hooks/utils/useInversionStatus.js | 2 +- 5 files changed, 15 insertions(+), 6 deletions(-) diff --git a/components/Asset/Chart/ChartOverlay.jsx b/components/Asset/Chart/ChartOverlay.jsx index 3e4dc826d..641cae2dd 100644 --- a/components/Asset/Chart/ChartOverlay.jsx +++ b/components/Asset/Chart/ChartOverlay.jsx @@ -14,7 +14,7 @@ * along with this program. If not, see . */ -import { useCallback, useMemo, useState } from 'react' +import { useCallback, useEffect, useMemo, useState } from 'react' // import Button from 'components/Button' import Big from 'big.js' import Icon from '@mdi/react' @@ -29,6 +29,7 @@ import { Typography, Stack, Button } from '@mui/material' import Image from 'next/image' import { useInversionStatus } from '@/hooks/utils/useInversionStatus' import { StableAssets } from '@/components/StableAssets' +import { useRouter } from 'next/router' export const Container = styled.div` position: absolute; @@ -251,10 +252,17 @@ function ChartOverlay(props) { const getInversionStatus = useCallback(() => { const inversionStatus = localStorage.getItem('inversionStatus') if (inversionStatus && inversionStatus === 'true') { - return StableAssets.includes(parseInt(asset.id)) + return true } return false }, []) + const router = useRouter() + useEffect(() => { + // Get the ID of see + const isStableAsset = StableAssets.includes(parseInt(asset.id)) + if (isStableAsset) + localStorage.setItem('inversionStatus', 'true') + }, []) return ( @@ -293,7 +301,6 @@ function ChartOverlay(props) { + )} > -    - INVERT PAIR - +
+ + Inverted mode is currently not supported for assets not configured with 6 decimals + +
+
From 198efa6967f0b93305240260d8db4445d554a7f7 Mon Sep 17 00:00:00 2001 From: Ikechi Date: Mon, 5 Dec 2022 14:35:12 +0100 Subject: [PATCH 21/58] =?UTF-8?q?=E2=9C=A8=20Set=20default=20state=20for?= =?UTF-8?q?=20stable=20assets?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Asset/Chart/ChartOverlay.jsx | 74 ++++++++++++++----------- 1 file changed, 42 insertions(+), 32 deletions(-) diff --git a/components/Asset/Chart/ChartOverlay.jsx b/components/Asset/Chart/ChartOverlay.jsx index 9beb17995..d7a5f9fca 100644 --- a/components/Asset/Chart/ChartOverlay.jsx +++ b/components/Asset/Chart/ChartOverlay.jsx @@ -262,9 +262,45 @@ function ChartOverlay(props) { useEffect(() => { // Get the ID of asset const isStableAsset = StableAssets.includes(parseInt(asset.id)) - if (isStableAsset) + if (isStableAsset) { localStorage.setItem('inversionStatus', 'true') - }, []) + } else { + localStorage.setItem('inversionStatus', 'false') + } + }, [router]) + + const ButtonComp = ({ setTriggerRef }) => { + return + } + + ButtonComp.propTypes = { + setTriggerRef: PropTypes.func + } return ( @@ -301,35 +337,8 @@ function ChartOverlay(props) {
- ( - - )} + {asset.decimals !== 6 ? } >
- + : + }
From 9b6e808baab7d2fc0b5c0f577978f37c86496ff6 Mon Sep 17 00:00:00 2001 From: Ikechi Date: Mon, 5 Dec 2022 15:48:27 +0100 Subject: [PATCH 22/58] =?UTF-8?q?=F0=9F=90=9B=20Fix=20amount=20issue?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Asset/OrderBook/OrderBook.jsx | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/components/Asset/OrderBook/OrderBook.jsx b/components/Asset/OrderBook/OrderBook.jsx index 5ce3389bf..eb3ab9d98 100644 --- a/components/Asset/OrderBook/OrderBook.jsx +++ b/components/Asset/OrderBook/OrderBook.jsx @@ -376,23 +376,20 @@ const DECIMALS_MAP = { // Deducted a Microalgo because of rounding in use-store while setting total // FIXME: look into - (asset.decimals ? 0.000001 : 1) const retval = parseFloat(new Big(maxSpendableAlgo).div(_price)) - (asset.decimals ? 0.000001 : 1) - // console.log('yreturning ' + retval) return retval } else { - // console.log('zreturning ' + compoundedAmount) return compoundedAmount } }, [asset.decimals, maxSpendableAlgo]) const reduceOrders = useCallback((result, order) => { - // const _price = floatToFixedDynamic(order.price, selectedPrecision, selectedPrecision) const _price = isInverted ? floatToFixedDynamic(1 / order.price, selectedPrecision, selectedPrecision) : floatToFixedDynamic(order.price, selectedPrecision, selectedPrecision) // const _amount = order.amount // const _amount = isInverted ? 1/order.amount * order.price : order.amount - const _amount = isInverted ? 1/order.amount : order.amount + const _amount = order.amount const index = result.findIndex( (obj) => floatToFixedDynamic(obj.price, selectedPrecision, selectedPrecision) === _price @@ -533,7 +530,6 @@ const DECIMALS_MAP = {
- {/* */} {t('amount')} ({isInverted ? 'ALGO' : assetVeryShortName}) @@ -541,16 +537,10 @@ const DECIMALS_MAP = { {t('total')} ({isInverted ? 'ALGO' : assetVeryShortName}) - {/* */}
- {/* {renderedSellOrders} */} - {/* {renderOrders(asset.isInverted ? sortedBuyOrder : aggregatedSellOrder, 'sell')} */} - {/* {renderOrders(useInversionStatus(asset.id) ? sortedBuyOrder : renderedSellOrders, 'sell')} */} - {/* {renderOrders(isInverted ? sortedBuyOrder : renderedSellOrders, 'sell')} */} - {/* {renderOrders(isInverted ? sortedBuyOrder : aggregatedSellOrder, 'sell')} */} {isInverted ? sortedBuyOrder : renderedSellOrders} @@ -563,9 +553,6 @@ const DECIMALS_MAP = { {isInverted ? sortedSellOrder : renderedBuyOrders} - {/* {renderedBuyOrders} */} - {/* {renderOrders(asset.isInverted ? sortedSellOrder : aggregatedBuyOrder, 'buy')} */} - {/* {renderOrders(useInversionStatus(asset.id) ? sortedSellOrder : renderedBuyOrders, 'buy')} */} From 21d17b133c12fbd86d4430afe3a0d21f8c34b8fc Mon Sep 17 00:00:00 2001 From: Ikechi Date: Mon, 5 Dec 2022 16:42:07 +0100 Subject: [PATCH 23/58] =?UTF-8?q?=F0=9F=90=9B=20Fix=20price=20in=20orderbo?= =?UTF-8?q?ok?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Asset/OrderBook/OrderBook.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Asset/OrderBook/OrderBook.jsx b/components/Asset/OrderBook/OrderBook.jsx index eb3ab9d98..0f91f44f0 100644 --- a/components/Asset/OrderBook/OrderBook.jsx +++ b/components/Asset/OrderBook/OrderBook.jsx @@ -407,7 +407,7 @@ const DECIMALS_MAP = { total: _amount * _price }) return result - }, [selectedPrecision]) + }, [isInverted, selectedPrecision]) const aggregatedBuyOrder = useMemo(() => { if (typeof orders?.buy === 'undefined' && !Array.isArray(orders.buy)) return [] From 6ea2a933e03fa08fd1ce218940d5f803a1111a02 Mon Sep 17 00:00:00 2001 From: Ikechi Date: Mon, 5 Dec 2022 17:12:12 +0100 Subject: [PATCH 24/58] =?UTF-8?q?=F0=9F=90=9B=20Fix=20price=20in=20trades?= =?UTF-8?q?=20history?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Asset/TradeHistory/TradeHistory.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/components/Asset/TradeHistory/TradeHistory.jsx b/components/Asset/TradeHistory/TradeHistory.jsx index 1c81b3963..d8b5a0793 100644 --- a/components/Asset/TradeHistory/TradeHistory.jsx +++ b/components/Asset/TradeHistory/TradeHistory.jsx @@ -176,7 +176,6 @@ export function TradeHistory({ asset, orders: tradesData }) { } const priceDecimals = getPriceDecimals(avgPrice); - return tradesData .sort((a, b) => { if (a.timestamp === b.timestamp) { @@ -194,7 +193,7 @@ export function TradeHistory({ asset, orders: tradesData }) { return ( - {floatToFixed(row.price, priceDecimals, 6)} + {floatToFixed(price, priceDecimals, 6)} Date: Thu, 8 Dec 2022 08:22:05 +0100 Subject: [PATCH 25/58] Price inversion for usd price --- .../Asset/OrderBook/OrderBookPriceInfo.js | 2 +- components/StableAssets | 4 +- .../Wallet/PlaceOrder/Form/TradeInputs.jsx | 111 ++---------------- .../Wallet/PriceConversion/USDPrice.jsx | 21 ++++ hooks/http/useAlgoExplorer.js | 45 +++++++ hooks/utils/withQuery.js | 1 + 6 files changed, 78 insertions(+), 106 deletions(-) diff --git a/components/Asset/OrderBook/OrderBookPriceInfo.js b/components/Asset/OrderBook/OrderBookPriceInfo.js index 9e735c35e..1db0bf396 100644 --- a/components/Asset/OrderBook/OrderBookPriceInfo.js +++ b/components/Asset/OrderBook/OrderBookPriceInfo.js @@ -56,7 +56,7 @@ const PriceInfoView = ({ asaValue, algoPrice, asset }) => { }, []) const formattedAsaValue = getInversionStatus() ? (1/asaValue).toFixed(asset.decimals) : asaValue - + // console.log(asaValue, 'asa value here') return useMemo(() => { return ( diff --git a/components/StableAssets b/components/StableAssets index 494e97227..9180bad32 100644 --- a/components/StableAssets +++ b/components/StableAssets @@ -6,5 +6,7 @@ export const StableAssets = [ 38718614, // USDC, 42279195, // USDT 94115664, //USDT - 31566704 // USDC Mainnet + 31566704, // USDC Mainnet + + 10458941 // USDC Testing ] \ No newline at end of file diff --git a/components/Wallet/PlaceOrder/Form/TradeInputs.jsx b/components/Wallet/PlaceOrder/Form/TradeInputs.jsx index ad9d12612..07628e1ef 100644 --- a/components/Wallet/PlaceOrder/Form/TradeInputs.jsx +++ b/components/Wallet/PlaceOrder/Form/TradeInputs.jsx @@ -27,24 +27,26 @@ import PropTypes from 'prop-types' import Slider from '@/components/Input/Slider' import Typography from '@mui/material/Typography' import USDPrice from '@/components/Wallet/PriceConversion/USDPrice' +import InvertedUSDInputPrice from '@/components/Wallet/PriceConversion/InvertedUSDInputPrice' import theme from '../../../../theme' import useTranslation from 'next-translate/useTranslation' -import {useInversionStatus} from '@/hooks/utils/useInversionStatus' - +import { useInversionStatus } from '@/hooks/utils/useInversionStatus' /** * * Render USD Price for an input component * @param {*} { value, id } * @return {*} */ -export const USDInputPrice = ({ value, id }) => { +export const USDInputPrice = ({ value, id, assetId = null }) => { return (
USD {id === 'price' ? 'Price' : 'Total'}{' '} - + { useInversionStatus(assetId) ? : + + } USD
@@ -96,23 +98,6 @@ export const TradeInputs = ({ microAlgo }) => { const { t } = useTranslation('place-order') - // if (!enableOrder[order.type]) { - // // @todo: make this better, this is a placeholder - // return ( - // - // {t('insufficient-balance')} - // - // ) - // } - - // const isErrorMsgVisible = () => { - // if (order.price === '0.00' || order.price === '') { - // return false - // } - // if (order.price < microAlgo) { - // return true - // } - // } const inputPlaceHolder = useMemo(() => asset.decimals !== 0 ? `0.${'0'.repeat(Math.max(0, asset.decimals - 4))}` : '0', [asset]) const marks = [ @@ -195,7 +180,7 @@ export const TradeInputs = ({ Price cannot be less than {microAlgo} ) : ( - + ) } @@ -329,88 +314,6 @@ export const TradeInputs = ({ return ( {useInversionStatus(asset.id) ? invertedAssetInput() : regularAssetInput()} - {/* - {t('price')} - - } - endAdornment={ - - ALGO - - } - error={isErrorMsgVisible} - /> - - {isErrorMsgVisible && order.execution !== 'market' ? ( - - Price cannot be less than {microAlgo} - - ) : ( - - )} - - - {t('amount')} - - } - endAdornment={ - - {asset.name} - - } - /> */} . */ +import axios from 'axios' +export const fetchCurrentPrices = async () => { + // const url = `https://api.hsforms.com/submissions/v3/integration/submit/${process.env.NEXT_PUBLIC_PORTAL_ID}/${formId}` + const url = `https://testnet.analytics.tinyman.org/api/v1/current-asset-prices/` + // const config = { + // headers: { + // 'Content-Type': 'application/json' + // } + // } + const response = await axios + .get(url) + .then((res) => { + return res.data + }) + .catch((error) => { + return error + }) + + return response +} import PropTypes from 'prop-types' import { formatUSDPrice } from '@/components/helpers' import { withAlgorandPriceQuery } from '@/hooks' export function USDPrice({ algoPrice, asaWorth, priceToConvert, currency }) { + // const res = fetchCurrentPrices() return ( {currency} diff --git a/hooks/http/useAlgoExplorer.js b/hooks/http/useAlgoExplorer.js index 3cd428d51..cded66ccf 100644 --- a/hooks/http/useAlgoExplorer.js +++ b/hooks/http/useAlgoExplorer.js @@ -19,6 +19,8 @@ import Spinner from '../components/Spinner'; import useAlgodex from '../useAlgodex.js'; import {useQuery} from 'react-query'; import withQuery from '../utils/withQuery'; +import axios from 'axios' + const DEBUG = process.env.NEXT_PUBLIC_DEBUG || process.env.DEBUG || false; const refetchInterval = 3000; @@ -27,6 +29,21 @@ const components = { ServiceError, }; +const fetchCurrentPrices = async () => { + const testnet = `https://testnet.analytics.tinyman.org/api/v1/current-asset-prices/` + const mainnet = `https://mainnet.analytics.tinyman.org/api/v1/current-asset-prices/` + const url = process.env.NEXT_PUBLIC_ALGORAND_NETWORK === 'testnet' ? testnet : mainnet + const response = await axios + .get(url) + .then((res) => { + return res.data + }) + .catch((error) => { + return error + }) + return response +} + /** * @@ -87,6 +104,20 @@ export function useAlgorandPriceQuery({ ['fetchAlgorandPrice', {query}], () => http.explorer.fetchAlgorandPrice(query), options, + ); +} + +export function useOtherAssetPriceQuery({ + query = '', + isInverted, + options = { + refetchInterval: query === '' ? refetchInterval : 20000, + }, +} = {}) { + return useQuery( + ['fetchCurrentPrices'], + () => fetchCurrentPrices(isInverted), + options, ); } @@ -104,3 +135,17 @@ export function withAlgorandPriceQuery(Component, options) { ...options, }); } + +/** + * With Algorand Price Query + * @param {JSX.Element| Function} Component Component to wrap + * @param {object} [options] Options to pass to withQuery + * @return {JSX.Element} + */ +export function withOtherAssetPriceQuery(Component, options) { + return withQuery(Component, { + hook: useOtherAssetPriceQuery, + components, + ...options, + }); +} diff --git a/hooks/utils/withQuery.js b/hooks/utils/withQuery.js index 96ba37cd2..a582dd09f 100644 --- a/hooks/utils/withQuery.js +++ b/hooks/utils/withQuery.js @@ -46,6 +46,7 @@ export default function withQuery(Component, {hook = useQuery, components}) { */ function withQueryWrapper(props) { const {isSuccess, isLoading, isError, data, error} = hook(props); + // console.log(data, 'data inside here') if (isSuccess) return ; if (isLoading) return ; if (isError) return ; From 5f8732e638855cb1ab8da1e11d92a8de26ab18cd Mon Sep 17 00:00:00 2001 From: Ikechi Date: Thu, 8 Dec 2022 08:22:27 +0100 Subject: [PATCH 26/58] USD Inversion component --- .../PriceConversion/InvertedUSDInputPrice.jsx | 43 +++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 components/Wallet/PriceConversion/InvertedUSDInputPrice.jsx diff --git a/components/Wallet/PriceConversion/InvertedUSDInputPrice.jsx b/components/Wallet/PriceConversion/InvertedUSDInputPrice.jsx new file mode 100644 index 000000000..79f229cd6 --- /dev/null +++ b/components/Wallet/PriceConversion/InvertedUSDInputPrice.jsx @@ -0,0 +1,43 @@ +/* + * Algodex Frontend (algodex-react) + * Copyright (C) 2021 - 2022 Algodex VASP (BVI) Corp. + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published + * by the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + */ + +import PropTypes from 'prop-types' +import { formatUSDPrice } from '@/components/helpers' +import { withOtherAssetPriceQuery } from '@/hooks' +export function InvertedUSDInputPrice(props) { + const invertedAssetPrice = props['10458941'].price + const { asaWorth, priceToConvert, currency } = props + return ( + + {currency} + {formatUSDPrice(asaWorth * priceToConvert * invertedAssetPrice)} + + ) +} + +InvertedUSDInputPrice.propTypes = { + priceToConvert: PropTypes.number, + asaWorth: PropTypes.number, + currency: PropTypes.string +} + +InvertedUSDInputPrice.defaultProps = { + priceToConvert: 0, + asaWorth: 1, + currency: '' +} + +export default withOtherAssetPriceQuery(InvertedUSDInputPrice) From 872cd7057098957e7c930b0e035452a68a2604c9 Mon Sep 17 00:00:00 2001 From: Ikechi Date: Thu, 8 Dec 2022 08:33:24 +0100 Subject: [PATCH 27/58] =?UTF-8?q?=E2=9C=A8=20Remove=20USD=20price=20for=20?= =?UTF-8?q?inverted=20mode=20for=20some=20asset?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../PriceConversion/InvertedUSDInputPrice.jsx | 22 +++++++++++++------ 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/components/Wallet/PriceConversion/InvertedUSDInputPrice.jsx b/components/Wallet/PriceConversion/InvertedUSDInputPrice.jsx index 79f229cd6..ee0b31d9b 100644 --- a/components/Wallet/PriceConversion/InvertedUSDInputPrice.jsx +++ b/components/Wallet/PriceConversion/InvertedUSDInputPrice.jsx @@ -17,15 +17,23 @@ import PropTypes from 'prop-types' import { formatUSDPrice } from '@/components/helpers' import { withOtherAssetPriceQuery } from '@/hooks' +import { useRouter } from 'next/router' + export function InvertedUSDInputPrice(props) { - const invertedAssetPrice = props['10458941'].price + const { query } = useRouter() + const invertedAssetPrice = props[`${query.id}`]?.price const { asaWorth, priceToConvert, currency } = props - return ( - - {currency} - {formatUSDPrice(asaWorth * priceToConvert * invertedAssetPrice)} - - ) + if (invertedAssetPrice) { + return ( + + {currency} + {formatUSDPrice(asaWorth * priceToConvert * invertedAssetPrice)} + + ) + } else { + return <>No USD Price + } + } InvertedUSDInputPrice.propTypes = { From 8cf8e64b85d6eaf1c60548216be056d9f39bfe63 Mon Sep 17 00:00:00 2001 From: Ikechi Date: Thu, 8 Dec 2022 09:22:26 +0100 Subject: [PATCH 28/58] =?UTF-8?q?=E2=9C=A8=20Remove=20reversal=20of=20asse?= =?UTF-8?q?t?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Asset/OrderBook/OrderBook.jsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/components/Asset/OrderBook/OrderBook.jsx b/components/Asset/OrderBook/OrderBook.jsx index 0f91f44f0..38da7d8a9 100644 --- a/components/Asset/OrderBook/OrderBook.jsx +++ b/components/Asset/OrderBook/OrderBook.jsx @@ -542,7 +542,8 @@ const DECIMALS_MAP = { - {isInverted ? sortedBuyOrder : renderedSellOrders} + {/* {isInverted ? sortedBuyOrder : renderedSellOrders} */} + {renderedSellOrders} @@ -552,7 +553,8 @@ const DECIMALS_MAP = { - {isInverted ? sortedSellOrder : renderedBuyOrders} + {/* {isInverted ? sortedSellOrder : renderedBuyOrders} */} + {renderedBuyOrders} From 67a76550189bd51e1e3a8ab72b4c3930906a4923 Mon Sep 17 00:00:00 2001 From: Ikechi Date: Thu, 8 Dec 2022 10:03:56 +0100 Subject: [PATCH 29/58] =?UTF-8?q?=F0=9F=9A=A8=20Fix=20linting=20error?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Wallet/PlaceOrder/Form/TradeInputs.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/Wallet/PlaceOrder/Form/TradeInputs.jsx b/components/Wallet/PlaceOrder/Form/TradeInputs.jsx index 07628e1ef..fa9f1bfb7 100644 --- a/components/Wallet/PlaceOrder/Form/TradeInputs.jsx +++ b/components/Wallet/PlaceOrder/Form/TradeInputs.jsx @@ -55,7 +55,8 @@ export const USDInputPrice = ({ value, id, assetId = null }) => { USDInputPrice.propTypes = { value: PropTypes.number, - id: PropTypes.string + id: PropTypes.string, + assetId: PropTypes.number } export const NumberFormatCustom = forwardRef(function NumberFormatCustom(props, ref) { const { decimals, onChange, ...other } = props; From 014b9d4acabb7f5fe7154cdcee2f628002e2c2e3 Mon Sep 17 00:00:00 2001 From: Ikechi Date: Thu, 8 Dec 2022 10:44:20 +0100 Subject: [PATCH 30/58] =?UTF-8?q?=F0=9F=90=9B=20Fix=20amount=20field=20in?= =?UTF-8?q?=20open=20order?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Table/Table.jsx | 15 +++++++++++++++ components/Wallet/Table/OpenOrdersTable.jsx | 3 ++- 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/components/Table/Table.jsx b/components/Table/Table.jsx index df649363b..05667ddb2 100644 --- a/components/Table/Table.jsx +++ b/components/Table/Table.jsx @@ -201,6 +201,21 @@ export function DefaultCell({ value, row }) { } DefaultCell.propTypes = { value: PropTypes.any, row: PropTypes.object } +export function DefaultCellAmount({ value }) { + return ( + + {value} + + ) +} +DefaultCellAmount.propTypes = { value: PropTypes.any } + /** * Table Component * diff --git a/components/Wallet/Table/OpenOrdersTable.jsx b/components/Wallet/Table/OpenOrdersTable.jsx index d83569b61..987ffcd18 100644 --- a/components/Wallet/Table/OpenOrdersTable.jsx +++ b/components/Wallet/Table/OpenOrdersTable.jsx @@ -17,6 +17,7 @@ import Table, { AssetNameCell, DefaultCell, + DefaultCellAmount, ExpandTradeDetail, OrderTypeCell } from '@/components/Table' @@ -222,7 +223,7 @@ export function OpenOrdersTable({ orders: _orders }) { { Header: t('amount'), accessor: 'amount', - Cell: DefaultCell + Cell: DefaultCellAmount }, { Header: t('status'), From b69dc723375b911e0ee00e79e3ac9e971b3ae359 Mon Sep 17 00:00:00 2001 From: Ikechi Date: Thu, 8 Dec 2022 19:52:26 +0100 Subject: [PATCH 31/58] Correct color of orderbook for inverted mode --- components/Asset/OrderBook/OrderBook.jsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/components/Asset/OrderBook/OrderBook.jsx b/components/Asset/OrderBook/OrderBook.jsx index 38da7d8a9..acee160a2 100644 --- a/components/Asset/OrderBook/OrderBook.jsx +++ b/components/Asset/OrderBook/OrderBook.jsx @@ -323,7 +323,7 @@ const DECIMALS_MAP = { * @returns {JSX.Element} * @constructor */ - export function OrderBook({ asset, orders, components, isMobile }) { +export function OrderBook({ asset, orders, components, isMobile }) { const { query } = useRouter() const { PriceDisplay } = components const { t } = useTranslation('common') @@ -423,7 +423,8 @@ const DECIMALS_MAP = { , [asset.id, query]) const renderOrders = useCallback((data, type) => { - const color = type === 'buy' ? 'green' : 'red' + // const color = type === 'buy' ? isInverted ? 'green' : 'red' : isInverted ? 'red' : 'green' + const color = type === 'buy' ? isInverted ? 'red' : 'green' : isInverted ? 'green' : 'red' return data.map((row, index) => { const amount = new Big(row.amount) const total = new Big(row.total) @@ -481,7 +482,7 @@ const DECIMALS_MAP = { ) }) - }, [calculatedAmountFn, decimals, dispatcher, isGeoBlocked]) + }, [calculatedAmountFn, decimals, dispatcher, isGeoBlocked, isInverted]) const renderedSellOrders = useMemo(() => { return renderOrders(aggregatedSellOrder, 'sell') From eef06584422eeb89f91493cd067e168b01392869 Mon Sep 17 00:00:00 2001 From: Ikechi Date: Fri, 9 Dec 2022 00:05:56 +0100 Subject: [PATCH 32/58] Update pricing --- components/Asset/OrderBook/OrderBookPriceInfo.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/components/Asset/OrderBook/OrderBookPriceInfo.js b/components/Asset/OrderBook/OrderBookPriceInfo.js index 1db0bf396..363bbe980 100644 --- a/components/Asset/OrderBook/OrderBookPriceInfo.js +++ b/components/Asset/OrderBook/OrderBookPriceInfo.js @@ -18,7 +18,6 @@ import { Stack, Typography } from '@mui/material' import { useMemo, useCallback } from 'react' - import Icon from '@mdi/react' import PropTypes from 'prop-types' import Spinner from '@/components/Spinner' @@ -27,6 +26,8 @@ import floatToFixed from '@algodex/algodex-sdk/lib/utils/format/floatToFixed' import { formatUSDPrice } from '@/components/helpers' import { mdiApproximatelyEqual } from '@mdi/js' import { withAlgorandPriceQuery } from '@/hooks' +import InvertedUSDInputPrice from '@/components/Wallet/PriceConversion/InvertedUSDInputPrice' +import { StableAssets } from '../../StableAssets' const getPriceDecimals = (price) => { if (price >= 10000) { @@ -55,7 +56,7 @@ const PriceInfoView = ({ asaValue, algoPrice, asset }) => { return false }, []) - const formattedAsaValue = getInversionStatus() ? (1/asaValue).toFixed(asset.decimals) : asaValue + const formattedAsaValue = getInversionStatus() ? (1 / asaValue).toFixed(asset.decimals) : asaValue // console.log(asaValue, 'asa value here') return useMemo(() => { @@ -69,12 +70,21 @@ const PriceInfoView = ({ asaValue, algoPrice, asset }) => { {(asset?.price_info?.price24Change && `${floatToFixed(asset?.price_info?.price24Change, 2)}%`) || '0.00%'} )} -
+ {getInversionStatus() && StableAssets.includes(asset.id) && +
+ + + $ + +
+ } + {!getInversionStatus() &&
${formatUSDPrice(algoPrice * formattedAsaValue)}
+ } ) }, [formattedAsaValue, asaValue, algoPrice, asset]) From ef51c97da87f647ea9f1b07993d21fd86cc7719b Mon Sep 17 00:00:00 2001 From: Ikechi Date: Fri, 9 Dec 2022 11:16:42 +0100 Subject: [PATCH 33/58] Sort table list --- components/Asset/OrderBook/OrderBook.jsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/components/Asset/OrderBook/OrderBook.jsx b/components/Asset/OrderBook/OrderBook.jsx index acee160a2..9097ddc7f 100644 --- a/components/Asset/OrderBook/OrderBook.jsx +++ b/components/Asset/OrderBook/OrderBook.jsx @@ -423,8 +423,8 @@ export function OrderBook({ asset, orders, components, isMobile }) { , [asset.id, query]) const renderOrders = useCallback((data, type) => { - // const color = type === 'buy' ? isInverted ? 'green' : 'red' : isInverted ? 'red' : 'green' - const color = type === 'buy' ? isInverted ? 'red' : 'green' : isInverted ? 'green' : 'red' + const color = type === 'buy' ? 'green' : 'red' + // const color = type === 'buy' ? isInverted ? 'red' : 'green' : isInverted ? 'green' : 'red' return data.map((row, index) => { const amount = new Big(row.amount) const total = new Big(row.total) @@ -543,8 +543,9 @@ export function OrderBook({ asset, orders, components, isMobile }) { + {isInverted ? sortedSellOrder : renderedSellOrders} {/* {isInverted ? sortedBuyOrder : renderedSellOrders} */} - {renderedSellOrders} + {/* {renderedSellOrders} */} @@ -554,8 +555,9 @@ export function OrderBook({ asset, orders, components, isMobile }) { + {isInverted ? sortedBuyOrder : renderedBuyOrders} {/* {isInverted ? sortedSellOrder : renderedBuyOrders} */} - {renderedBuyOrders} + {/* {renderedBuyOrders} */} From 44df0606473cc460e8f408798d68c274eb451cd6 Mon Sep 17 00:00:00 2001 From: Ikechi Date: Fri, 9 Dec 2022 17:29:13 +0100 Subject: [PATCH 34/58] Update stable assets list --- .../Asset/OrderBook/OrderBookPriceInfo.js | 2 +- components/StableAssets | 91 +++++++++++++++++-- .../PriceConversion/InvertedUSDInputPrice.jsx | 11 ++- 3 files changed, 93 insertions(+), 11 deletions(-) diff --git a/components/Asset/OrderBook/OrderBookPriceInfo.js b/components/Asset/OrderBook/OrderBookPriceInfo.js index 363bbe980..11c37f38a 100644 --- a/components/Asset/OrderBook/OrderBookPriceInfo.js +++ b/components/Asset/OrderBook/OrderBookPriceInfo.js @@ -74,7 +74,7 @@ const PriceInfoView = ({ asaValue, algoPrice, asset }) => {
- $ +
} diff --git a/components/StableAssets b/components/StableAssets index 9180bad32..e63ff4ca9 100644 --- a/components/StableAssets +++ b/components/StableAssets @@ -1,12 +1,89 @@ // Current StableCoin List. // Should check whether to decide using of assetid or asset name export const StableAssets = [ - 51435943, // USDC, - 37074699, // USDC, - 38718614, // USDC, - 42279195, // USDT - 94115664, //USDT - 31566704, // USDC Mainnet + // 51435943, // USDC, + // 37074699, // USDC, + // 38718614, // USDC, + // 42279195, // USDT + // 94115664, //USDT + // 31566704, // USDC Mainnet - 10458941 // USDC Testing + // MAINNET ASSETS + 312769, + 2757561, + 27165954, + 31566704, + 137020565, + 137594422, + 142838028, + 226265212, + 226701642, + 251014570, + 266846137, + 283820866, + 287867876, + 300208676, + 310014962, + 329110405, + 386192725, + 386195940, + 388592191, + 390982964, + 393537671, + 400593267, + 403499324, + 409604194, + 441139422, + 444035862, + 444108880, + 452047208, + 461849439, + 463554836, + 465865291, + 470842789, + 490508385, + 509808838, + 511028589, + 511484048, + 523683256, + 542132831, + 544217506, + 558801604, + 559219992, + 567485181, + 569120128, + 571576867, + 591601798, + 607591690, + 610886011, + 674925395, + 694432641, + 712012773, + 724480511, + 744665252, + 747635241, + 752850639, + 753137719, + 756578163, + 781829486, + 782285248, + 792313023, + 793124631, + 818432243, + 833815143, + 844772414, + 886452112, + 900652777, + + // TESTNET ASSETS + 10458941, // USDC Testing + 10458941, + 21582668, + 23828111, + 32416641, + 58862619, + 70283957, + 79929599, + 85951079, + 87779982 ] \ No newline at end of file diff --git a/components/Wallet/PriceConversion/InvertedUSDInputPrice.jsx b/components/Wallet/PriceConversion/InvertedUSDInputPrice.jsx index ee0b31d9b..da42954cb 100644 --- a/components/Wallet/PriceConversion/InvertedUSDInputPrice.jsx +++ b/components/Wallet/PriceConversion/InvertedUSDInputPrice.jsx @@ -18,6 +18,8 @@ import PropTypes from 'prop-types' import { formatUSDPrice } from '@/components/helpers' import { withOtherAssetPriceQuery } from '@/hooks' import { useRouter } from 'next/router' +import Icon from '@mdi/react' +import { mdiApproximatelyEqual } from '@mdi/js' export function InvertedUSDInputPrice(props) { const { query } = useRouter() @@ -25,13 +27,16 @@ export function InvertedUSDInputPrice(props) { const { asaWorth, priceToConvert, currency } = props if (invertedAssetPrice) { return ( - + <> + {currency} - {formatUSDPrice(asaWorth * priceToConvert * invertedAssetPrice)} + ${formatUSDPrice(asaWorth * priceToConvert * invertedAssetPrice)} + + ) } else { - return <>No USD Price + return <> } } From 6985006147604d3b030013652dbd8815a372ed2a Mon Sep 17 00:00:00 2001 From: Ikechi Date: Sat, 10 Dec 2022 09:03:24 +0100 Subject: [PATCH 35/58] =?UTF-8?q?=E2=9C=A8=20Complete=20Asset=20Inversion?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Asset/OrderBook/OrderBook.jsx | 12 +----------- components/Wallet/Table/OpenOrdersTable.jsx | 12 +++++++++--- components/Wallet/Table/TradeHistoryTable.jsx | 10 ++++------ 3 files changed, 14 insertions(+), 20 deletions(-) diff --git a/components/Asset/OrderBook/OrderBook.jsx b/components/Asset/OrderBook/OrderBook.jsx index 9097ddc7f..adcd82058 100644 --- a/components/Asset/OrderBook/OrderBook.jsx +++ b/components/Asset/OrderBook/OrderBook.jsx @@ -17,7 +17,6 @@ import { ArrowDown, ArrowUp } from 'react-feather' import { useCallback, useMemo, useState } from 'react' -// import { Typography, Typography, Typography, Typography } from '@/components/Typography' import { useAlgodex, withAssetOrderbookQuery, withAssetPriceQuery } from '@/hooks' import Big from 'big.js' @@ -32,8 +31,6 @@ import TablePriceHeader from '@/components/Table/PriceHeader' import Typography from '@mui/material/Typography' import { assetVeryShortNameFn } from '@/components/helpers' import { floatToFixedDynamic } from '@/services/display' -// import convertFromAsaUnits from '@algodex/algodex-sdk/lib/utils/units/fromAsaUnits' -// import floatToFixed from '@algodex/algodex-sdk/lib/utils/format/floatToFixed' import { isUndefined } from 'lodash/lang' import { rgba } from 'polished' import styled from '@emotion/styled' @@ -387,8 +384,6 @@ export function OrderBook({ asset, orders, components, isMobile }) { ? floatToFixedDynamic(1 / order.price, selectedPrecision, selectedPrecision) : floatToFixedDynamic(order.price, selectedPrecision, selectedPrecision) - // const _amount = order.amount - // const _amount = isInverted ? 1/order.amount * order.price : order.amount const _amount = order.amount const index = result.findIndex( @@ -424,7 +419,6 @@ export function OrderBook({ asset, orders, components, isMobile }) { const renderOrders = useCallback((data, type) => { const color = type === 'buy' ? 'green' : 'red' - // const color = type === 'buy' ? isInverted ? 'red' : 'green' : isInverted ? 'green' : 'red' return data.map((row, index) => { const amount = new Big(row.amount) const total = new Big(row.total) @@ -531,7 +525,7 @@ export function OrderBook({ asset, orders, components, isMobile }) {
- + {t('amount')} ({isInverted ? 'ALGO' : assetVeryShortName}) @@ -544,8 +538,6 @@ export function OrderBook({ asset, orders, components, isMobile }) { {isInverted ? sortedSellOrder : renderedSellOrders} - {/* {isInverted ? sortedBuyOrder : renderedSellOrders} */} - {/* {renderedSellOrders} */} @@ -556,8 +548,6 @@ export function OrderBook({ asset, orders, components, isMobile }) { {isInverted ? sortedBuyOrder : renderedBuyOrders} - {/* {isInverted ? sortedSellOrder : renderedBuyOrders} */} - {/* {renderedBuyOrders} */} diff --git a/components/Wallet/Table/OpenOrdersTable.jsx b/components/Wallet/Table/OpenOrdersTable.jsx index 987ffcd18..84de4d655 100644 --- a/components/Wallet/Table/OpenOrdersTable.jsx +++ b/components/Wallet/Table/OpenOrdersTable.jsx @@ -104,7 +104,13 @@ export function OpenOrdersTable({ orders: _orders }) { const walletOpenOrdersTableState = useUserStore((state) => state.walletOpenOrdersTableState) const setWalletOpenOrdersTableState = useUserStore((state) => state.setWalletOpenOrdersTableState) - + const getInversionStatus = useMemo(() => { + const inversionStatus = localStorage.getItem('inversionStatus') + if (inversionStatus && inversionStatus === 'true') { + return true + } + return false + }, []) const OrderCancelCell = useCallback( ({ data, cell }) => { const handleCancelOrder = async () => { @@ -211,7 +217,7 @@ export function OpenOrdersTable({ orders: _orders }) { Cell: AssetNameCell }, { - Header: t('price') + ' (ALGO)', + Header: `${t('price')} ${!getInversionStatus ? '(ALGO)' : ''}`, accessor: 'price', Cell: DefaultCell }, @@ -237,7 +243,7 @@ export function OpenOrdersTable({ orders: _orders }) { disableSortBy: true } ], - [t, OrderCancelCell] + [t, OrderCancelCell, getInversionStatus] ) return ( diff --git a/components/Wallet/Table/TradeHistoryTable.jsx b/components/Wallet/Table/TradeHistoryTable.jsx index e8ad8335b..819aa67b2 100644 --- a/components/Wallet/Table/TradeHistoryTable.jsx +++ b/components/Wallet/Table/TradeHistoryTable.jsx @@ -20,7 +20,6 @@ import Table, { ExpandTradeDetail, OrderTypeCell } from '@/components/Table' -import { StableAssets } from '@/components/StableAssets' import PropTypes from 'prop-types' import styled from '@emotion/styled' import { useMemo, useCallback } from 'react' @@ -55,13 +54,12 @@ const TableWrapper = styled.div` * @constructor */ export function TradeHistoryTable({ orders }) { - //console.log(`TradeHistoryTable(`, arguments[0], `)`) const { t } = useTranslation('orders') const walletOrderHistoryTableState = useUserStore((state) => state.walletOrderHistoryTableState) const setWalletOrderHistoryTableState = useUserStore( (state) => state.setWalletOrderHistoryTableState ) - const getInversionStatus = useCallback((id) => { + const getInversionStatus = useMemo(() => { const inversionStatus = localStorage.getItem('inversionStatus') if (inversionStatus && inversionStatus === 'true') { return true @@ -73,7 +71,7 @@ export function TradeHistoryTable({ orders }) { const _order = { ...order, price: floatToFixedDisplay(order.price), - isInverted: getInversionStatus(parseInt(order.id)) + isInverted: getInversionStatus } return _order }) @@ -101,7 +99,7 @@ export function TradeHistoryTable({ orders }) { }, { - Header: t('price') + ' (ALGO)', + Header: `${t('price')} ${!getInversionStatus ? '(ALGO)' : ''}`, accessor: 'price', Cell: DefaultCell }, @@ -111,7 +109,7 @@ export function TradeHistoryTable({ orders }) { Cell: DefaultCell } ], - [t] + [t, getInversionStatus] ) return ( From 096d6838ae301ee7857889745e1316f3d9578cd9 Mon Sep 17 00:00:00 2001 From: Ikechi Date: Mon, 12 Dec 2022 09:31:48 +0100 Subject: [PATCH 36/58] =?UTF-8?q?=E2=9C=85=20Fix=20failing=20test?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Asset/Chart/ChartOverlay.jsx | 2 +- .../Asset/OrderBook/OrderBookPriceInfo.js | 2 +- components/Nav/SearchSidebar/SearchTable.jsx | 5 +- components/StableAssets | 89 ------------------- components/Table/Cell.jsx | 2 +- components/Table/Cell.spec.jsx | 1 + components/Wallet/Table/AssetsTable.spec.js | 1 + .../Wallet/Table/OpenOrdersTable.spec.js | 1 + .../Wallet/Table/TradeHistoryTable.spec.js | 1 + 9 files changed, 10 insertions(+), 94 deletions(-) delete mode 100644 components/StableAssets diff --git a/components/Asset/Chart/ChartOverlay.jsx b/components/Asset/Chart/ChartOverlay.jsx index d7a5f9fca..0ba61ad21 100644 --- a/components/Asset/Chart/ChartOverlay.jsx +++ b/components/Asset/Chart/ChartOverlay.jsx @@ -28,7 +28,7 @@ import { useUserStore } from 'store' import { Typography, Stack, Button } from '@mui/material' import Image from 'next/image' import { useInversionStatus } from '@/hooks/utils/useInversionStatus' -import { StableAssets } from '@/components/StableAssets' +import StableAssets from '@/components/StableAssets' import { useRouter } from 'next/router' import Tooltip from '@/components/Tooltip' diff --git a/components/Asset/OrderBook/OrderBookPriceInfo.js b/components/Asset/OrderBook/OrderBookPriceInfo.js index 11c37f38a..279874206 100644 --- a/components/Asset/OrderBook/OrderBookPriceInfo.js +++ b/components/Asset/OrderBook/OrderBookPriceInfo.js @@ -27,7 +27,7 @@ import { formatUSDPrice } from '@/components/helpers' import { mdiApproximatelyEqual } from '@mdi/js' import { withAlgorandPriceQuery } from '@/hooks' import InvertedUSDInputPrice from '@/components/Wallet/PriceConversion/InvertedUSDInputPrice' -import { StableAssets } from '../../StableAssets' +import { StableAssets } from '@/components/StableAssets' const getPriceDecimals = (price) => { if (price >= 10000) { diff --git a/components/Nav/SearchSidebar/SearchTable.jsx b/components/Nav/SearchSidebar/SearchTable.jsx index df9ce80fc..b61ae72a3 100644 --- a/components/Nav/SearchSidebar/SearchTable.jsx +++ b/components/Nav/SearchSidebar/SearchTable.jsx @@ -194,6 +194,7 @@ export const NavSearchTable = ({ const searchTableRef = useRef() const router = useRouter() + const {query} = router const { t } = useTranslation('assets') const filterByFavoritesFn = useCallback( @@ -316,7 +317,7 @@ export const NavSearchTable = ({ ({ value, row }) => { // console.log(value, 'value', row.original.id) const isInverted = getInversionStatus(row.original.id) - const activeAssetId = router.asPath.split('/')[2].split('?')[0] + const activeAssetId = query.id const formattedValue = (isInverted && parseInt(activeAssetId) === row.original?.id) ? (1/value).toFixed(row.original?.decimals) : value return ( { const isInverted = getInversionStatus(row.original?.id) - const activeAssetId = router.asPath.split('/')[2].split('?')[0] + const activeAssetId = query.id return (
{ const { t } = useTranslation('orders') - const isInverted = useInversionStatus(row.original.id) + const isInverted = useInversionStatus(row?.original.id) const assetId = useMemo(() => row?.original?.asset?.id || row?.original?.id, [row?.original?.asset?.id, row?.original?.id]) const {query} = useRouter() diff --git a/components/Table/Cell.spec.jsx b/components/Table/Cell.spec.jsx index 1a3aebc73..a016efd6e 100644 --- a/components/Table/Cell.spec.jsx +++ b/components/Table/Cell.spec.jsx @@ -20,6 +20,7 @@ import { render } from 'test/test-utils' import generateAsset from '../../spec/OrderHistory' expect.extend(matchers) +jest.mock('next/dist/client/router', () => require('next-router-mock')) describe('Cell Component', () => { it('Should render Table Cell', () => { diff --git a/components/Wallet/Table/AssetsTable.spec.js b/components/Wallet/Table/AssetsTable.spec.js index 70a05e2f8..3c3702374 100644 --- a/components/Wallet/Table/AssetsTable.spec.js +++ b/components/Wallet/Table/AssetsTable.spec.js @@ -27,6 +27,7 @@ const wallet = { afterEach(() => { cleanup() }) +jest.mock('next/dist/client/router', () => require('next-router-mock')) describe('Assets', () => { it('should not show any rows if no data is provided', async () => { diff --git a/components/Wallet/Table/OpenOrdersTable.spec.js b/components/Wallet/Table/OpenOrdersTable.spec.js index 1cf7634bf..458d405d5 100644 --- a/components/Wallet/Table/OpenOrdersTable.spec.js +++ b/components/Wallet/Table/OpenOrdersTable.spec.js @@ -22,6 +22,7 @@ const OPEN_ORDER_ROW = 'cancel-order-button' const wallet = { address: 'TJFFNUYWHPPIYDE4DGGYPGHWKGAPJEWP3DGE5THZS3B2M2XIAPQ2WY3X4I' } +jest.mock('next/dist/client/router', () => require('next-router-mock')) describe('OpenOrders', () => { it('should not show any rows if no data is provided', () => { diff --git a/components/Wallet/Table/TradeHistoryTable.spec.js b/components/Wallet/Table/TradeHistoryTable.spec.js index 1012f764e..e71dd417d 100644 --- a/components/Wallet/Table/TradeHistoryTable.spec.js +++ b/components/Wallet/Table/TradeHistoryTable.spec.js @@ -19,6 +19,7 @@ import { TradeHistoryTable } from './TradeHistoryTable' import { render, waitFor } from 'test/test-utils' const ORDER_HISTORY_ROW = 'default-cell' +jest.mock('next/dist/client/router', () => require('next-router-mock')) const wallet = { address: 'TJFFNUYWHPPIYDE4DGGYPGHWKGAPJEWP3DGE5THZS3B2M2XIAPQ2WY3X4I' From 313668eb5e599e802d657bed90ae9761863cd7e8 Mon Sep 17 00:00:00 2001 From: Ikechi Date: Mon, 12 Dec 2022 09:32:21 +0100 Subject: [PATCH 37/58] =?UTF-8?q?=F0=9F=9A=9A=20Rename=20stable=20assets?= =?UTF-8?q?=20file?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/StableAssets.js | 107 +++++++++++++++++++++++++++++++++++++ 1 file changed, 107 insertions(+) create mode 100644 components/StableAssets.js diff --git a/components/StableAssets.js b/components/StableAssets.js new file mode 100644 index 000000000..458a727ef --- /dev/null +++ b/components/StableAssets.js @@ -0,0 +1,107 @@ +/* + * Algodex Frontend (algodex-react) + * Copyright (C) 2021 - 2022 Algodex VASP (BVI) Corp. + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published + * by the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + */ + + + +// Current StableCoin List. +// Should check whether to decide using of assetid or asset name +export const StableAssets = [ + // 51435943, // USDC, + // 37074699, // USDC, + // 38718614, // USDC, + // 42279195, // USDT + // 94115664, //USDT + // 31566704, // USDC Mainnet + + // MAINNET ASSETS + 312769, + 2757561, + 27165954, + 31566704, + 137020565, + 137594422, + 142838028, + 226265212, + 226701642, + 251014570, + 266846137, + 283820866, + 287867876, + 300208676, + 310014962, + 329110405, + 386192725, + 386195940, + 388592191, + 390982964, + 393537671, + 400593267, + 403499324, + 409604194, + 441139422, + 444035862, + 444108880, + 452047208, + 461849439, + 463554836, + 465865291, + 470842789, + 490508385, + 509808838, + 511028589, + 511484048, + 523683256, + 542132831, + 544217506, + 558801604, + 559219992, + 567485181, + 569120128, + 571576867, + 591601798, + 607591690, + 610886011, + 674925395, + 694432641, + 712012773, + 724480511, + 744665252, + 747635241, + 752850639, + 753137719, + 756578163, + 781829486, + 782285248, + 792313023, + 793124631, + 818432243, + 833815143, + 844772414, + 886452112, + 900652777, + + // TESTNET ASSETS + 10458941, // USDC Testing + 10458941, + 21582668, + 23828111, + 32416641, + 58862619, + 70283957, + 79929599, + 85951079, + 87779982 +] From 43ad1b0f274d6a8a86a3184ece26ae4d4bc7ed0d Mon Sep 17 00:00:00 2001 From: Ikechi Date: Mon, 12 Dec 2022 12:38:27 +0100 Subject: [PATCH 38/58] =?UTF-8?q?=F0=9F=9A=9A=20Update=20stable=20asset=20?= =?UTF-8?q?file=20name?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Asset/Chart/ChartOverlay.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/Asset/Chart/ChartOverlay.jsx b/components/Asset/Chart/ChartOverlay.jsx index 0ba61ad21..f66933910 100644 --- a/components/Asset/Chart/ChartOverlay.jsx +++ b/components/Asset/Chart/ChartOverlay.jsx @@ -28,7 +28,8 @@ import { useUserStore } from 'store' import { Typography, Stack, Button } from '@mui/material' import Image from 'next/image' import { useInversionStatus } from '@/hooks/utils/useInversionStatus' -import StableAssets from '@/components/StableAssets' +import {StableAssets} from '@/components/StableAssets' + import { useRouter } from 'next/router' import Tooltip from '@/components/Tooltip' From 8bb9b9ed236ca4d366d3281ff0533d40d618cc8f Mon Sep 17 00:00:00 2001 From: Ikechi Date: Tue, 13 Dec 2022 10:43:12 +0100 Subject: [PATCH 39/58] Complete update --- components/Table/PriceHeader.jsx | 2 +- components/Wallet/Table/OpenOrdersTable.jsx | 10 +++++----- components/Wallet/Table/TradeHistoryTable.jsx | 12 +++++++----- 3 files changed, 13 insertions(+), 11 deletions(-) diff --git a/components/Table/PriceHeader.jsx b/components/Table/PriceHeader.jsx index cd42f13ba..acffb2bcc 100644 --- a/components/Table/PriceHeader.jsx +++ b/components/Table/PriceHeader.jsx @@ -35,7 +35,7 @@ export const TablePriceHeader = ({ title, textAlign }) => { const { t } = useTranslation('common') return ( - {title !== '' && t(title)} + {title !== '' && title} {!title && } ) diff --git a/components/Wallet/Table/OpenOrdersTable.jsx b/components/Wallet/Table/OpenOrdersTable.jsx index 84de4d655..21cf66455 100644 --- a/components/Wallet/Table/OpenOrdersTable.jsx +++ b/components/Wallet/Table/OpenOrdersTable.jsx @@ -104,7 +104,7 @@ export function OpenOrdersTable({ orders: _orders }) { const walletOpenOrdersTableState = useUserStore((state) => state.walletOpenOrdersTableState) const setWalletOpenOrdersTableState = useUserStore((state) => state.setWalletOpenOrdersTableState) - const getInversionStatus = useMemo(() => { + const getInversionStatus = useCallback(() => { const inversionStatus = localStorage.getItem('inversionStatus') if (inversionStatus && inversionStatus === 'true') { return true @@ -200,7 +200,7 @@ export function OpenOrdersTable({ orders: _orders }) { }, [t, openOrdersData, wallet] ) - + const inversionStatus = getInversionStatus() const columns = useMemo( () => [ { @@ -217,9 +217,9 @@ export function OpenOrdersTable({ orders: _orders }) { Cell: AssetNameCell }, { - Header: `${t('price')} ${!getInversionStatus ? '(ALGO)' : ''}`, + Header: `${t('price')} ${!inversionStatus ? '(ALGO)' : ''}`, accessor: 'price', - Cell: DefaultCell + Cell: DefaultCellAmount }, { Header: t('type'), @@ -243,7 +243,7 @@ export function OpenOrdersTable({ orders: _orders }) { disableSortBy: true } ], - [t, OrderCancelCell, getInversionStatus] + [t, OrderCancelCell, inversionStatus] ) return ( diff --git a/components/Wallet/Table/TradeHistoryTable.jsx b/components/Wallet/Table/TradeHistoryTable.jsx index 819aa67b2..db4288611 100644 --- a/components/Wallet/Table/TradeHistoryTable.jsx +++ b/components/Wallet/Table/TradeHistoryTable.jsx @@ -59,7 +59,7 @@ export function TradeHistoryTable({ orders }) { const setWalletOrderHistoryTableState = useUserStore( (state) => state.setWalletOrderHistoryTableState ) - const getInversionStatus = useMemo(() => { + const getInversionStatus = useCallback(() => { const inversionStatus = localStorage.getItem('inversionStatus') if (inversionStatus && inversionStatus === 'true') { return true @@ -71,12 +71,14 @@ export function TradeHistoryTable({ orders }) { const _order = { ...order, price: floatToFixedDisplay(order.price), - isInverted: getInversionStatus + isInverted: getInversionStatus() } return _order }) }, [orders]) - + + + const inversionStatus = getInversionStatus() const columns = useMemo( () => [ { @@ -99,7 +101,7 @@ export function TradeHistoryTable({ orders }) { }, { - Header: `${t('price')} ${!getInversionStatus ? '(ALGO)' : ''}`, + Header: `${t('price')} ${!inversionStatus ? '(ALGO)' : ''}`, accessor: 'price', Cell: DefaultCell }, @@ -109,7 +111,7 @@ export function TradeHistoryTable({ orders }) { Cell: DefaultCell } ], - [t, getInversionStatus] + [t, inversionStatus] ) return ( From 22041a78470593176003e926c5dddcf3c83571e2 Mon Sep 17 00:00:00 2001 From: Ikechi Date: Wed, 14 Dec 2022 13:24:54 +0100 Subject: [PATCH 40/58] =?UTF-8?q?=F0=9F=90=9B=20Order=20book=20update?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Asset/OrderBook/OrderBook.jsx | 12 ++++++------ components/Wallet/Table/OpenOrdersTable.jsx | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/components/Asset/OrderBook/OrderBook.jsx b/components/Asset/OrderBook/OrderBook.jsx index adcd82058..4a43537d4 100644 --- a/components/Asset/OrderBook/OrderBook.jsx +++ b/components/Asset/OrderBook/OrderBook.jsx @@ -391,15 +391,15 @@ export function OrderBook({ asset, orders, components, isMobile }) { ) if (index !== -1) { - result[index].amount += _amount - result[index].total += _amount * _price + result[index].amount += isInverted ? order.price * _amount : _amount + result[index].total += isInverted ? _amount : _amount * _price return result } result.push({ price: _price, - amount: _amount, - total: _amount * _price + amount: isInverted ? order.price * _amount : _amount, + total: isInverted ? _amount : _amount * _price }) return result }, [isInverted, selectedPrecision]) @@ -487,12 +487,12 @@ export function OrderBook({ asset, orders, components, isMobile }) { }, [aggregatedBuyOrder, renderOrders]); const sortedBuyOrder = useMemo(() => { - const sortedOrders = aggregatedBuyOrder.sort((a, b) => b.price - a.price) + const sortedOrders = aggregatedSellOrder.sort((a, b) => b.price - a.price) return renderOrders(sortedOrders, 'buy') }, [aggregatedBuyOrder]) const sortedSellOrder = useMemo(() => { - const sortedSellOrder = aggregatedSellOrder.sort((a, b) => b.price - a.price) + const sortedSellOrder = aggregatedBuyOrder.sort((a, b) => b.price - a.price) return renderOrders(sortedSellOrder, 'sell') }, [aggregatedSellOrder]) diff --git a/components/Wallet/Table/OpenOrdersTable.jsx b/components/Wallet/Table/OpenOrdersTable.jsx index 21cf66455..e20e1af09 100644 --- a/components/Wallet/Table/OpenOrdersTable.jsx +++ b/components/Wallet/Table/OpenOrdersTable.jsx @@ -219,7 +219,7 @@ export function OpenOrdersTable({ orders: _orders }) { { Header: `${t('price')} ${!inversionStatus ? '(ALGO)' : ''}`, accessor: 'price', - Cell: DefaultCellAmount + Cell: DefaultCell }, { Header: t('type'), From a32546babde26cd91b089f7b4018d3bb3d96da06 Mon Sep 17 00:00:00 2001 From: Ikechi Date: Wed, 14 Dec 2022 14:04:34 +0100 Subject: [PATCH 41/58] Testing --- components/Wallet/Table/OpenOrdersTable.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/components/Wallet/Table/OpenOrdersTable.jsx b/components/Wallet/Table/OpenOrdersTable.jsx index e20e1af09..0c4dca405 100644 --- a/components/Wallet/Table/OpenOrdersTable.jsx +++ b/components/Wallet/Table/OpenOrdersTable.jsx @@ -53,7 +53,6 @@ const TableWrapper = styled.div` display: none; } ` - const OrderCancelButton = styled.button` cursor: pointer; background: none; From 487ef95ddd465d49e41746bb063fd4f5910db4fe Mon Sep 17 00:00:00 2001 From: Ikechi Date: Fri, 16 Dec 2022 11:44:05 +0100 Subject: [PATCH 42/58] =?UTF-8?q?=F0=9F=90=9B=20Reformat=20Open=20order=20?= =?UTF-8?q?prices?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Asset/OrderBook/OrderBook.jsx | 2 +- components/Table/Table.jsx | 49 ++++++++++++++----- components/Wallet/Table/OpenOrdersTable.jsx | 6 +-- components/Wallet/Table/TradeHistoryTable.jsx | 3 +- 4 files changed, 44 insertions(+), 16 deletions(-) diff --git a/components/Asset/OrderBook/OrderBook.jsx b/components/Asset/OrderBook/OrderBook.jsx index 4a43537d4..98c7f460e 100644 --- a/components/Asset/OrderBook/OrderBook.jsx +++ b/components/Asset/OrderBook/OrderBook.jsx @@ -530,7 +530,7 @@ export function OrderBook({ asset, orders, components, isMobile }) { {t('amount')} ({isInverted ? 'ALGO' : assetVeryShortName}) - {t('total')} ({isInverted ? 'ALGO' : assetVeryShortName}) + {t('total')} ({!isInverted ? 'ALGO' : assetVeryShortName})
diff --git a/components/Table/Table.jsx b/components/Table/Table.jsx index 05667ddb2..914dcf30e 100644 --- a/components/Table/Table.jsx +++ b/components/Table/Table.jsx @@ -170,19 +170,46 @@ const Container = styled.div` } ` // height: ${({ optionalGridInfo }) => optionalGridInfo && `${optionalGridInfo.height - 126}px`}; -export function DefaultCell({ value, row }) { +// export function DefaultCell({ value, row }) { +// const isInverted = useInversionStatus(row.original.id) +// const assetId = useMemo(() => row?.original?.asset?.id || row?.original?.id, +// [row?.original?.asset?.id, row?.original?.id]) +// const { query } = useRouter() +// const formattedValue = useMemo(() => { +// if (isInverted && parseInt(query.id) === assetId && !isNaN(parseFloat(value))) { +// const val = 1 / value +// if (value == 0) { +// return value +// } else { +// return isInverted && parseInt(query.id) === assetId ? parseFloat(val).toFixed(6) : value +// } +// } else { +// return value +// } +// }, [isInverted, value]) +// return ( +// +// {formattedValue} +// +// ) +// } +// DefaultCell.propTypes = { value: PropTypes.any, row: PropTypes.object } + +export function PriceCell({ value, row }) { const isInverted = useInversionStatus(row.original.id) const assetId = useMemo(() => row?.original?.asset?.id || row?.original?.id, [row?.original?.asset?.id, row?.original?.id]) const { query } = useRouter() + const {price, amount} = row?.original const formattedValue = useMemo(() => { - if (isInverted && parseInt(query.id) === assetId && !isNaN(parseFloat(value))) { - const val = 1/value - if (value == 0) { - return value - } else { - return isInverted && parseInt(query.id) === assetId ? parseFloat(val).toFixed(6) : value - } + if (isInverted && parseInt(query.id) === assetId) { + return parseFloat(amount/(price * amount))?.toFixed(6) } else { return value } @@ -199,9 +226,9 @@ export function DefaultCell({ value, row }) { ) } -DefaultCell.propTypes = { value: PropTypes.any, row: PropTypes.object } +PriceCell.propTypes = { value: PropTypes.any, row: PropTypes.object } -export function DefaultCellAmount({ value }) { +export function DefaultCell({ value }) { return ( ) } -DefaultCellAmount.propTypes = { value: PropTypes.any } +DefaultCell.propTypes = { value: PropTypes.any } /** * Table Component diff --git a/components/Wallet/Table/OpenOrdersTable.jsx b/components/Wallet/Table/OpenOrdersTable.jsx index 0c4dca405..b1e53b37e 100644 --- a/components/Wallet/Table/OpenOrdersTable.jsx +++ b/components/Wallet/Table/OpenOrdersTable.jsx @@ -17,7 +17,7 @@ import Table, { AssetNameCell, DefaultCell, - DefaultCellAmount, + PriceCell, ExpandTradeDetail, OrderTypeCell } from '@/components/Table' @@ -218,7 +218,7 @@ export function OpenOrdersTable({ orders: _orders }) { { Header: `${t('price')} ${!inversionStatus ? '(ALGO)' : ''}`, accessor: 'price', - Cell: DefaultCell + Cell: PriceCell }, { Header: t('type'), @@ -228,7 +228,7 @@ export function OpenOrdersTable({ orders: _orders }) { { Header: t('amount'), accessor: 'amount', - Cell: DefaultCellAmount + Cell: DefaultCell }, { Header: t('status'), diff --git a/components/Wallet/Table/TradeHistoryTable.jsx b/components/Wallet/Table/TradeHistoryTable.jsx index db4288611..4ad7b864f 100644 --- a/components/Wallet/Table/TradeHistoryTable.jsx +++ b/components/Wallet/Table/TradeHistoryTable.jsx @@ -17,6 +17,7 @@ import Table, { AssetNameCell, DefaultCell, + PriceCell, ExpandTradeDetail, OrderTypeCell } from '@/components/Table' @@ -103,7 +104,7 @@ export function TradeHistoryTable({ orders }) { { Header: `${t('price')} ${!inversionStatus ? '(ALGO)' : ''}`, accessor: 'price', - Cell: DefaultCell + Cell: PriceCell }, { Header: t('amount'), From ee860762f5d75dabdd8735e24dcfdb2d30f94978 Mon Sep 17 00:00:00 2001 From: Ikechi Date: Fri, 16 Dec 2022 11:46:39 +0100 Subject: [PATCH 43/58] =?UTF-8?q?=F0=9F=9A=A8=20Fix=20linting=20error?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Table/Table.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Table/Table.jsx b/components/Table/Table.jsx index 914dcf30e..ee1aaf111 100644 --- a/components/Table/Table.jsx +++ b/components/Table/Table.jsx @@ -206,7 +206,7 @@ export function PriceCell({ value, row }) { const assetId = useMemo(() => row?.original?.asset?.id || row?.original?.id, [row?.original?.asset?.id, row?.original?.id]) const { query } = useRouter() - const {price, amount} = row?.original + const {price, amount} = row.original const formattedValue = useMemo(() => { if (isInverted && parseInt(query.id) === assetId) { return parseFloat(amount/(price * amount))?.toFixed(6) From d43f2a41901431a8e9aef023fe08c64fdf983d75 Mon Sep 17 00:00:00 2001 From: Ikechi Date: Fri, 16 Dec 2022 12:25:21 +0100 Subject: [PATCH 44/58] More fixes --- components/Table/Table.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Table/Table.jsx b/components/Table/Table.jsx index ee1aaf111..e2ad2d576 100644 --- a/components/Table/Table.jsx +++ b/components/Table/Table.jsx @@ -209,7 +209,7 @@ export function PriceCell({ value, row }) { const {price, amount} = row.original const formattedValue = useMemo(() => { if (isInverted && parseInt(query.id) === assetId) { - return parseFloat(amount/(price * amount))?.toFixed(6) + return 1/parseFloat(amount/(price * amount))?.toFixed(6) } else { return value } From 4c12b723488f422de8d49fa52a9466848ea35aad Mon Sep 17 00:00:00 2001 From: Ikechi Date: Fri, 16 Dec 2022 12:27:02 +0100 Subject: [PATCH 45/58] Correct formular --- components/Table/Table.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Table/Table.jsx b/components/Table/Table.jsx index e2ad2d576..ca47af826 100644 --- a/components/Table/Table.jsx +++ b/components/Table/Table.jsx @@ -209,7 +209,7 @@ export function PriceCell({ value, row }) { const {price, amount} = row.original const formattedValue = useMemo(() => { if (isInverted && parseInt(query.id) === assetId) { - return 1/parseFloat(amount/(price * amount))?.toFixed(6) + return 1/(parseFloat(amount/(price * amount)))?.toFixed(6) } else { return value } From 2038ea447c3d51faf9c3c0f4e19eace52fb6c7ed Mon Sep 17 00:00:00 2001 From: Ikechi Date: Fri, 16 Dec 2022 12:39:09 +0100 Subject: [PATCH 46/58] More updates --- components/Table/Table.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Table/Table.jsx b/components/Table/Table.jsx index ca47af826..9acd889c1 100644 --- a/components/Table/Table.jsx +++ b/components/Table/Table.jsx @@ -211,7 +211,7 @@ export function PriceCell({ value, row }) { if (isInverted && parseInt(query.id) === assetId) { return 1/(parseFloat(amount/(price * amount)))?.toFixed(6) } else { - return value + return parseFloat(amount/(price * amount))?.toFixed(6) } }, [isInverted, value]) return ( From 61f52046c3ae8e5cd6919685ab97cdd918a3b646 Mon Sep 17 00:00:00 2001 From: Ikechi Date: Mon, 19 Dec 2022 09:19:25 +0100 Subject: [PATCH 47/58] More testing --- components/Table/Table.jsx | 4 ++-- components/Wallet/PlaceOrder/Form.jsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/components/Table/Table.jsx b/components/Table/Table.jsx index 9acd889c1..ee1aaf111 100644 --- a/components/Table/Table.jsx +++ b/components/Table/Table.jsx @@ -209,9 +209,9 @@ export function PriceCell({ value, row }) { const {price, amount} = row.original const formattedValue = useMemo(() => { if (isInverted && parseInt(query.id) === assetId) { - return 1/(parseFloat(amount/(price * amount)))?.toFixed(6) - } else { return parseFloat(amount/(price * amount))?.toFixed(6) + } else { + return value } }, [isInverted, value]) return ( diff --git a/components/Wallet/PlaceOrder/Form.jsx b/components/Wallet/PlaceOrder/Form.jsx index 7c68675ec..985f567fc 100644 --- a/components/Wallet/PlaceOrder/Form.jsx +++ b/components/Wallet/PlaceOrder/Form.jsx @@ -374,7 +374,7 @@ export function PlaceOrderForm({ showTitle = true, asset, onSubmit, components: const isInverted = getInversionStatus() const formattedOrder = { ...order, type: isInverted ? order.type === 'buy' ? 'sell' : 'buy' : order.type } - formattedOrder.price = formatFloat(formattedOrder.price, 6) + formattedOrder.price = isInverted ? formatFloat(1/formattedOrder.price, 6) : formatFloat(formattedOrder.price, 6) formattedOrder.amount = formatFloat(formattedOrder.amount, asset.decimals) let lastToastId = undefined From 112ab92a63c8976df8119bd0ff3fa58a31a7e5a1 Mon Sep 17 00:00:00 2001 From: Ikechi Date: Mon, 19 Dec 2022 15:02:12 +0100 Subject: [PATCH 48/58] Update inversion for amount --- components/Table/Table.jsx | 4 ++-- components/Wallet/PlaceOrder/Form.jsx | 4 ++-- components/Wallet/Table/OpenOrdersTable.jsx | 6 +++--- components/Wallet/Table/TradeHistoryTable.jsx | 6 +++--- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/components/Table/Table.jsx b/components/Table/Table.jsx index ee1aaf111..3f6c240de 100644 --- a/components/Table/Table.jsx +++ b/components/Table/Table.jsx @@ -201,7 +201,7 @@ const Container = styled.div` // } // DefaultCell.propTypes = { value: PropTypes.any, row: PropTypes.object } -export function PriceCell({ value, row }) { +export function InvertableCell({ value, row }) { const isInverted = useInversionStatus(row.original.id) const assetId = useMemo(() => row?.original?.asset?.id || row?.original?.id, [row?.original?.asset?.id, row?.original?.id]) @@ -226,7 +226,7 @@ export function PriceCell({ value, row }) { ) } -PriceCell.propTypes = { value: PropTypes.any, row: PropTypes.object } +InvertableCell.propTypes = { value: PropTypes.any, row: PropTypes.object } export function DefaultCell({ value }) { return ( diff --git a/components/Wallet/PlaceOrder/Form.jsx b/components/Wallet/PlaceOrder/Form.jsx index 985f567fc..fab2fb0aa 100644 --- a/components/Wallet/PlaceOrder/Form.jsx +++ b/components/Wallet/PlaceOrder/Form.jsx @@ -372,10 +372,10 @@ export function PlaceOrderForm({ showTitle = true, asset, onSubmit, components: (e) => { e.preventDefault() const isInverted = getInversionStatus() - + const invertedAmount = 1/(order.price/(order.price * order.amount)) const formattedOrder = { ...order, type: isInverted ? order.type === 'buy' ? 'sell' : 'buy' : order.type } formattedOrder.price = isInverted ? formatFloat(1/formattedOrder.price, 6) : formatFloat(formattedOrder.price, 6) - formattedOrder.amount = formatFloat(formattedOrder.amount, asset.decimals) + formattedOrder.amount = isInverted ? formatFloat(invertedAmount, asset.decimals) : formatFloat(formattedOrder.amount, asset.decimals) let lastToastId = undefined let orderPromise diff --git a/components/Wallet/Table/OpenOrdersTable.jsx b/components/Wallet/Table/OpenOrdersTable.jsx index b1e53b37e..c7f9263b1 100644 --- a/components/Wallet/Table/OpenOrdersTable.jsx +++ b/components/Wallet/Table/OpenOrdersTable.jsx @@ -17,7 +17,7 @@ import Table, { AssetNameCell, DefaultCell, - PriceCell, + InvertableCell, ExpandTradeDetail, OrderTypeCell } from '@/components/Table' @@ -218,7 +218,7 @@ export function OpenOrdersTable({ orders: _orders }) { { Header: `${t('price')} ${!inversionStatus ? '(ALGO)' : ''}`, accessor: 'price', - Cell: PriceCell + Cell: InvertableCell }, { Header: t('type'), @@ -228,7 +228,7 @@ export function OpenOrdersTable({ orders: _orders }) { { Header: t('amount'), accessor: 'amount', - Cell: DefaultCell + Cell: InvertableCell }, { Header: t('status'), diff --git a/components/Wallet/Table/TradeHistoryTable.jsx b/components/Wallet/Table/TradeHistoryTable.jsx index 4ad7b864f..c9c8af577 100644 --- a/components/Wallet/Table/TradeHistoryTable.jsx +++ b/components/Wallet/Table/TradeHistoryTable.jsx @@ -17,7 +17,7 @@ import Table, { AssetNameCell, DefaultCell, - PriceCell, + InvertableCell, ExpandTradeDetail, OrderTypeCell } from '@/components/Table' @@ -104,12 +104,12 @@ export function TradeHistoryTable({ orders }) { { Header: `${t('price')} ${!inversionStatus ? '(ALGO)' : ''}`, accessor: 'price', - Cell: PriceCell + Cell: InvertableCell }, { Header: t('amount'), accessor: 'amount', - Cell: DefaultCell + Cell: InvertableCell } ], [t, inversionStatus] From 83755116a29154a80babe90530299b4f16caf383 Mon Sep 17 00:00:00 2001 From: Ikechi Date: Tue, 20 Dec 2022 08:51:23 +0100 Subject: [PATCH 49/58] More update to amount --- components/Table/Table.jsx | 27 +++++++++++++++++++ components/Wallet/Table/OpenOrdersTable.jsx | 3 ++- components/Wallet/Table/TradeHistoryTable.jsx | 3 ++- 3 files changed, 31 insertions(+), 2 deletions(-) diff --git a/components/Table/Table.jsx b/components/Table/Table.jsx index 3f6c240de..c98473926 100644 --- a/components/Table/Table.jsx +++ b/components/Table/Table.jsx @@ -228,6 +228,33 @@ export function InvertableCell({ value, row }) { } InvertableCell.propTypes = { value: PropTypes.any, row: PropTypes.object } +export function AmountInvertibleCell({ value, row }) { + const isInverted = useInversionStatus(row.original.id) + const assetId = useMemo(() => row?.original?.asset?.id || row?.original?.id, + [row?.original?.asset?.id, row?.original?.id]) + const { query } = useRouter() + const {price, amount} = row.original + const formattedValue = useMemo(() => { + if (isInverted && parseInt(query.id) === assetId) { + return parseFloat(price/(price * amount))?.toFixed(6) + } else { + return value + } + }, [isInverted, value]) + return ( + + {formattedValue} + + ) +} +AmountInvertibleCell.propTypes = { value: PropTypes.any, row: PropTypes.object } + export function DefaultCell({ value }) { return ( Date: Tue, 20 Dec 2022 09:33:57 +0100 Subject: [PATCH 50/58] Fix amount tab --- components/Table/Table.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Table/Table.jsx b/components/Table/Table.jsx index c98473926..dbd90777b 100644 --- a/components/Table/Table.jsx +++ b/components/Table/Table.jsx @@ -236,7 +236,7 @@ export function AmountInvertibleCell({ value, row }) { const {price, amount} = row.original const formattedValue = useMemo(() => { if (isInverted && parseInt(query.id) === assetId) { - return parseFloat(price/(price * amount))?.toFixed(6) + return parseFloat(price * amount)?.toFixed(6) } else { return value } From 33eebabbaf5bfabd19fbfce3335ce725f152700f Mon Sep 17 00:00:00 2001 From: Ikechi Date: Tue, 20 Dec 2022 13:49:27 +0100 Subject: [PATCH 51/58] Testing amount --- components/Table/Table.jsx | 7 ++++++- components/Wallet/PlaceOrder/Form.jsx | 1 + 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/components/Table/Table.jsx b/components/Table/Table.jsx index dbd90777b..42b9d8288 100644 --- a/components/Table/Table.jsx +++ b/components/Table/Table.jsx @@ -236,9 +236,14 @@ export function AmountInvertibleCell({ value, row }) { const {price, amount} = row.original const formattedValue = useMemo(() => { if (isInverted && parseInt(query.id) === assetId) { - return parseFloat(price * amount)?.toFixed(6) + const formattedPrice = parseFloat(amount/(price * amount))?.toFixed(6) + const invertedAmount = 1/(formattedPrice*amount) + return parseFloat(invertedAmount)?.toFixed(6) } else { return value + // console.log(price, amount) + // const formattedPrice = 1/price + // return formattedPrice/(formattedPrice * amount) } }, [isInverted, value]) return ( diff --git a/components/Wallet/PlaceOrder/Form.jsx b/components/Wallet/PlaceOrder/Form.jsx index fab2fb0aa..432fef1fb 100644 --- a/components/Wallet/PlaceOrder/Form.jsx +++ b/components/Wallet/PlaceOrder/Form.jsx @@ -376,6 +376,7 @@ export function PlaceOrderForm({ showTitle = true, asset, onSubmit, components: const formattedOrder = { ...order, type: isInverted ? order.type === 'buy' ? 'sell' : 'buy' : order.type } formattedOrder.price = isInverted ? formatFloat(1/formattedOrder.price, 6) : formatFloat(formattedOrder.price, 6) formattedOrder.amount = isInverted ? formatFloat(invertedAmount, asset.decimals) : formatFloat(formattedOrder.amount, asset.decimals) + // formattedOrder.amount = formatFloat(formattedOrder.amount, asset.decimals) let lastToastId = undefined let orderPromise From 0bf355eb01e2bb1d2a6b365b921c66859a1fbfc7 Mon Sep 17 00:00:00 2001 From: Ikechi Date: Tue, 20 Dec 2022 20:51:20 +0100 Subject: [PATCH 52/58] Fix issue with amount --- components/Table/Table.jsx | 11 ++++------- components/Wallet/PlaceOrder/Form.jsx | 4 +--- 2 files changed, 5 insertions(+), 10 deletions(-) diff --git a/components/Table/Table.jsx b/components/Table/Table.jsx index 42b9d8288..df0fb799d 100644 --- a/components/Table/Table.jsx +++ b/components/Table/Table.jsx @@ -234,16 +234,13 @@ export function AmountInvertibleCell({ value, row }) { [row?.original?.asset?.id, row?.original?.id]) const { query } = useRouter() const {price, amount} = row.original + // console.log(price, amount) const formattedValue = useMemo(() => { if (isInverted && parseInt(query.id) === assetId) { - const formattedPrice = parseFloat(amount/(price * amount))?.toFixed(6) - const invertedAmount = 1/(formattedPrice*amount) - return parseFloat(invertedAmount)?.toFixed(6) + return price * amount } else { - return value - // console.log(price, amount) - // const formattedPrice = 1/price - // return formattedPrice/(formattedPrice * amount) + const formattedPrice = 1/price + return formattedPrice * amount } }, [isInverted, value]) return ( diff --git a/components/Wallet/PlaceOrder/Form.jsx b/components/Wallet/PlaceOrder/Form.jsx index 432fef1fb..d968a8e47 100644 --- a/components/Wallet/PlaceOrder/Form.jsx +++ b/components/Wallet/PlaceOrder/Form.jsx @@ -372,11 +372,9 @@ export function PlaceOrderForm({ showTitle = true, asset, onSubmit, components: (e) => { e.preventDefault() const isInverted = getInversionStatus() - const invertedAmount = 1/(order.price/(order.price * order.amount)) const formattedOrder = { ...order, type: isInverted ? order.type === 'buy' ? 'sell' : 'buy' : order.type } formattedOrder.price = isInverted ? formatFloat(1/formattedOrder.price, 6) : formatFloat(formattedOrder.price, 6) - formattedOrder.amount = isInverted ? formatFloat(invertedAmount, asset.decimals) : formatFloat(formattedOrder.amount, asset.decimals) - // formattedOrder.amount = formatFloat(formattedOrder.amount, asset.decimals) + formattedOrder.amount = isInverted ? formatFloat(formattedOrder.price * (order.price * order.amount), asset.decimals) : formatFloat(formattedOrder.amount, asset.decimals) let lastToastId = undefined let orderPromise From 7ebb926c719c3ecdb86c2690b980120478235135 Mon Sep 17 00:00:00 2001 From: Ikechi Date: Thu, 22 Dec 2022 10:24:39 +0100 Subject: [PATCH 53/58] Testing --- components/Table/Table.jsx | 4 ++-- components/Wallet/PlaceOrder/Form.jsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/components/Table/Table.jsx b/components/Table/Table.jsx index df0fb799d..27840ee25 100644 --- a/components/Table/Table.jsx +++ b/components/Table/Table.jsx @@ -239,8 +239,8 @@ export function AmountInvertibleCell({ value, row }) { if (isInverted && parseInt(query.id) === assetId) { return price * amount } else { - const formattedPrice = 1/price - return formattedPrice * amount + return amount + } }, [isInverted, value]) return ( diff --git a/components/Wallet/PlaceOrder/Form.jsx b/components/Wallet/PlaceOrder/Form.jsx index d968a8e47..4d0486ae0 100644 --- a/components/Wallet/PlaceOrder/Form.jsx +++ b/components/Wallet/PlaceOrder/Form.jsx @@ -374,7 +374,7 @@ export function PlaceOrderForm({ showTitle = true, asset, onSubmit, components: const isInverted = getInversionStatus() const formattedOrder = { ...order, type: isInverted ? order.type === 'buy' ? 'sell' : 'buy' : order.type } formattedOrder.price = isInverted ? formatFloat(1/formattedOrder.price, 6) : formatFloat(formattedOrder.price, 6) - formattedOrder.amount = isInverted ? formatFloat(formattedOrder.price * (order.price * order.amount), asset.decimals) : formatFloat(formattedOrder.amount, asset.decimals) + formattedOrder.amount = formatFloat(formattedOrder.amount, asset.decimals) let lastToastId = undefined let orderPromise From a4d74b998a8bd2344dd30629e060a49a3e9b716b Mon Sep 17 00:00:00 2001 From: Ikechi Date: Thu, 22 Dec 2022 10:46:12 +0100 Subject: [PATCH 54/58] Updated amount --- components/Wallet/PlaceOrder/Form.jsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/components/Wallet/PlaceOrder/Form.jsx b/components/Wallet/PlaceOrder/Form.jsx index 4d0486ae0..dc014d7a5 100644 --- a/components/Wallet/PlaceOrder/Form.jsx +++ b/components/Wallet/PlaceOrder/Form.jsx @@ -374,7 +374,11 @@ export function PlaceOrderForm({ showTitle = true, asset, onSubmit, components: const isInverted = getInversionStatus() const formattedOrder = { ...order, type: isInverted ? order.type === 'buy' ? 'sell' : 'buy' : order.type } formattedOrder.price = isInverted ? formatFloat(1/formattedOrder.price, 6) : formatFloat(formattedOrder.price, 6) - formattedOrder.amount = formatFloat(formattedOrder.amount, asset.decimals) + // formattedOrder.amount = isInverted ? formatFloat(formattedOrder.price * (order.price * order.amount), asset.decimals) : formatFloat(formattedOrder.amount, asset.decimals) + // formattedOrder.amount = isInverted ? formatFloat(1/formattedOrder.amount, asset.decimals) : formatFloat(formattedOrder.amount, asset.decimals) + // const usdprice = order.amount/formattedOrder.price + formattedOrder.amount = isInverted ? formatFloat(((formattedOrder.price/(formattedOrder.price))*order.price) * order.amount, asset.decimals) : formatFloat(formattedOrder.amount, asset.decimals) + // formattedOrder.amount = formatFloat(formattedOrder.amount, asset.decimals) let lastToastId = undefined let orderPromise From 8cea81cf231adcd79d02c54726047c897176b8b5 Mon Sep 17 00:00:00 2001 From: Ikechi Date: Thu, 22 Dec 2022 15:53:36 +0100 Subject: [PATCH 55/58] Form balace and and hover price --- components/Table/Table.jsx | 6 ++-- components/Wallet/PlaceOrder/Form.jsx | 49 ++++++++++++++++----------- 2 files changed, 32 insertions(+), 23 deletions(-) diff --git a/components/Table/Table.jsx b/components/Table/Table.jsx index 27840ee25..1a1cee177 100644 --- a/components/Table/Table.jsx +++ b/components/Table/Table.jsx @@ -219,7 +219,7 @@ export function InvertableCell({ value, row }) { variant="body_small" color="gray.000" className="cursor-default" - title={value} + title={formattedValue} data-testid="default-cell" > {formattedValue} @@ -234,13 +234,11 @@ export function AmountInvertibleCell({ value, row }) { [row?.original?.asset?.id, row?.original?.id]) const { query } = useRouter() const {price, amount} = row.original - // console.log(price, amount) const formattedValue = useMemo(() => { if (isInverted && parseInt(query.id) === assetId) { return price * amount } else { return amount - } }, [isInverted, value]) return ( @@ -248,7 +246,7 @@ export function AmountInvertibleCell({ value, row }) { variant="body_small" color="gray.000" className="cursor-default" - title={value} + title={formattedValue} data-testid="default-cell" > {formattedValue} diff --git a/components/Wallet/PlaceOrder/Form.jsx b/components/Wallet/PlaceOrder/Form.jsx index dc014d7a5..13e0af3cc 100644 --- a/components/Wallet/PlaceOrder/Form.jsx +++ b/components/Wallet/PlaceOrder/Form.jsx @@ -37,7 +37,6 @@ import toast from 'react-hot-toast' import { useEvent } from 'hooks/useEvents' import useTranslation from 'next-translate/useTranslation' import { useMaxSpendableAlgo } from '@/hooks/useMaxSpendableAlgo' -import { StableAssets } from '@/components/StableAssets' export const Form = styled.form` scrollbar-width: none; @@ -85,7 +84,6 @@ export function PlaceOrderForm({ showTitle = true, asset, onSubmit, components: const { wallet, placeOrder, http, isConnected } = useAlgodex() const [tabSwitch, setTabSwitch] = useState(0) const [showForm, setShowForm] = useState(true) - const formatFloat = useCallback((value, decimal = 6) => { const splited = value.toString().split('.') const _decimals = decimal > 6 ? 6 : decimal @@ -95,6 +93,14 @@ export function PlaceOrderForm({ showTitle = true, asset, onSubmit, components: return parseFloat(value) }, []) + const getInversionStatus = useCallback(() => { + const inversionStatus = localStorage.getItem('inversionStatus') + if (inversionStatus && inversionStatus === 'true') { + return true + } + return false + }, []) + const assetBalance = useMemo(() => { let res = 0 if (typeof wallet !== 'undefined' && Array.isArray(wallet.assets)) { @@ -279,17 +285,34 @@ export function PlaceOrderForm({ showTitle = true, asset, onSubmit, components: }, [order.price, order.amount, algoBalance, assetBalance]) const maxSpendableAlgo = useMaxSpendableAlgo() - - const hasBalance = useMemo(() => { + + const hasBalance = useCallback(() => { + const isInverted = getInversionStatus() if (order.type === 'sell') { + if (isInverted) { + return maxSpendableAlgo + } return assetBalance > 0 } if (order.type === 'buy') { + if (isInverted) { + return assetBalance > 0 + } return maxSpendableAlgo } return false }, [order.type, assetBalance, maxSpendableAlgo]) + const hasTradeableAsset = useCallback(() => { + const isInverted = getInversionStatus() + if (isInverted) { + return order.total > assetBalance + } else { + return order.total > maxSpendableAlgo + } + }, [order, assetBalance, maxSpendableAlgo]) + + const isBelowMinOrderAmount = useMemo(() => { if (order.type === 'buy') { return new Big(order.total).lt(0.5) @@ -361,25 +384,13 @@ export function PlaceOrderForm({ showTitle = true, asset, onSubmit, components: [asset.isGeoBlocked] ) - const getInversionStatus = useCallback(() => { - const inversionStatus = localStorage.getItem('inversionStatus') - if (inversionStatus && inversionStatus === 'true') { - return true - } - return false - }, []) const handleSubmit = useCallback( (e) => { e.preventDefault() const isInverted = getInversionStatus() const formattedOrder = { ...order, type: isInverted ? order.type === 'buy' ? 'sell' : 'buy' : order.type } formattedOrder.price = isInverted ? formatFloat(1/formattedOrder.price, 6) : formatFloat(formattedOrder.price, 6) - // formattedOrder.amount = isInverted ? formatFloat(formattedOrder.price * (order.price * order.amount), asset.decimals) : formatFloat(formattedOrder.amount, asset.decimals) - // formattedOrder.amount = isInverted ? formatFloat(1/formattedOrder.amount, asset.decimals) : formatFloat(formattedOrder.amount, asset.decimals) - // const usdprice = order.amount/formattedOrder.price formattedOrder.amount = isInverted ? formatFloat(((formattedOrder.price/(formattedOrder.price))*order.price) * order.amount, asset.decimals) : formatFloat(formattedOrder.amount, asset.decimals) - // formattedOrder.amount = formatFloat(formattedOrder.amount, asset.decimals) - let lastToastId = undefined let orderPromise const notifier = (msg) => { @@ -521,12 +532,12 @@ export function PlaceOrderForm({ showTitle = true, asset, onSubmit, components: {/**/} - {!hasBalance && ( + {!hasBalance() && ( {t('insufficient-balance')} )} - {hasBalance && ( + {hasBalance() && ( {/* {buttonProps[order.type || 'buy']?.text} */} From db0521bbd1573f96edb43072ca12b9ba1b73588e Mon Sep 17 00:00:00 2001 From: Ikechi Date: Fri, 23 Dec 2022 16:24:21 +0100 Subject: [PATCH 56/58] Update order total with correct value for insufficient balance --- components/Wallet/PlaceOrder/Form.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/Wallet/PlaceOrder/Form.jsx b/components/Wallet/PlaceOrder/Form.jsx index 13e0af3cc..ae50fd296 100644 --- a/components/Wallet/PlaceOrder/Form.jsx +++ b/components/Wallet/PlaceOrder/Form.jsx @@ -37,6 +37,7 @@ import toast from 'react-hot-toast' import { useEvent } from 'hooks/useEvents' import useTranslation from 'next-translate/useTranslation' import { useMaxSpendableAlgo } from '@/hooks/useMaxSpendableAlgo' +import { current } from 'immer' export const Form = styled.form` scrollbar-width: none; @@ -149,14 +150,13 @@ export function PlaceOrderForm({ showTitle = true, asset, onSubmit, components: // currentState.price = formatFloat(currentState.price, 6) || '' const amount = getAdjOrderAmount(currentState) - + currentState.amount = amount // Amount should be based on asset decimals // currentState.amount = formatFloat(amount, asset.decimals) || '' const price = currentState.price || 0 const total = parseFloat(amount) * parseFloat(price) - // Set Order Total precision currentState.total = formatFloat(total, 6) From f515f42a42cd902298d23af925b2f5391add40e9 Mon Sep 17 00:00:00 2001 From: Ikechi Date: Wed, 28 Dec 2022 07:54:12 +0100 Subject: [PATCH 57/58] Update amount to use available balance --- components/Wallet/PlaceOrder/Form.jsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/components/Wallet/PlaceOrder/Form.jsx b/components/Wallet/PlaceOrder/Form.jsx index ae50fd296..e155c739f 100644 --- a/components/Wallet/PlaceOrder/Form.jsx +++ b/components/Wallet/PlaceOrder/Form.jsx @@ -113,14 +113,16 @@ export function PlaceOrderForm({ showTitle = true, asset, onSubmit, components: return res }, [wallet, asset]) + const maxSpendableAlgo = useMaxSpendableAlgo() const algoBalance = useMemo(() => { let res = 0 if (typeof wallet !== 'undefined' && typeof wallet.amount === 'number') { - res = fromBaseUnits(wallet.amount) + res = fromBaseUnits(maxSpendableAlgo) + // res = fromBaseUnits(wallet.amount) } return res - }, [wallet]) + }, [maxSpendableAlgo, wallet]) const getAdjOrderAmount = useCallback(({ amount, type, price }) => { let adjAmount = amount || 0 @@ -283,8 +285,6 @@ export function PlaceOrderForm({ showTitle = true, asset, onSubmit, components: return 0 }, [order.price, order.amount, algoBalance, assetBalance]) - - const maxSpendableAlgo = useMaxSpendableAlgo() const hasBalance = useCallback(() => { const isInverted = getInversionStatus() @@ -440,6 +440,7 @@ export function PlaceOrderForm({ showTitle = true, asset, onSubmit, components: duration: 3000 }) } catch (e) { + console.log(e, 'err') toast.error(`${t('error-placing-order')} ${e}`, { id: lastToastId, duration: 5000 }) } } From 6b32ed1b1f392712387c840d45a00874381abe9a Mon Sep 17 00:00:00 2001 From: Ikechi Date: Tue, 3 Jan 2023 19:31:20 +0100 Subject: [PATCH 58/58] Parse order info data type on sell order inverted mode --- components/Wallet/PlaceOrder/Form.jsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/components/Wallet/PlaceOrder/Form.jsx b/components/Wallet/PlaceOrder/Form.jsx index e155c739f..edfbf9b26 100644 --- a/components/Wallet/PlaceOrder/Form.jsx +++ b/components/Wallet/PlaceOrder/Form.jsx @@ -389,8 +389,11 @@ export function PlaceOrderForm({ showTitle = true, asset, onSubmit, components: e.preventDefault() const isInverted = getInversionStatus() const formattedOrder = { ...order, type: isInverted ? order.type === 'buy' ? 'sell' : 'buy' : order.type } - formattedOrder.price = isInverted ? formatFloat(1/formattedOrder.price, 6) : formatFloat(formattedOrder.price, 6) - formattedOrder.amount = isInverted ? formatFloat(((formattedOrder.price/(formattedOrder.price))*order.price) * order.amount, asset.decimals) : formatFloat(formattedOrder.amount, asset.decimals) + const invertedOrderAmount = (formattedOrder.price/(formattedOrder.price))*order.price * order.amount + formattedOrder.price = isInverted ? parseFloat(formatFloat(1/formattedOrder.price, 6)) : formatFloat(formattedOrder.price, 6) + formattedOrder.amount = isInverted ? parseFloat(formatFloat(invertedOrderAmount, asset.decimals)) : formatFloat(formattedOrder.amount, asset.decimals) + formattedOrder.total = parseFloat(order.total) + let lastToastId = undefined let orderPromise const notifier = (msg) => { @@ -440,7 +443,6 @@ export function PlaceOrderForm({ showTitle = true, asset, onSubmit, components: duration: 3000 }) } catch (e) { - console.log(e, 'err') toast.error(`${t('error-placing-order')} ${e}`, { id: lastToastId, duration: 5000 }) } }