+
hideTooltip(true)}>
= ({
? () =>
: ({ x, y, value }) => (
- {' '}
= ({
enableLabel={false}
enableGridY={true}
innerPadding={isXsDown ? 1 : 2}
- isInteractive
+ isInteractive={false}
padding={0.03}
indexScale={{ type: 'band', round: true }}
defs={[
@@ -108,19 +279,9 @@ const Volume: React.FC = ({
]}
fill={[{ match: '*', id: 'gradient' }]}
colors={colors.invariant.pink}
- tooltip={({ data }) => {
- const date = getLabelDate(interval, data.timestamp, lastStatsTimestamp)
-
- return (
-
- {date}
-
- ${formatNumberWithoutSuffix(data.value)}
-
-
- )
- }}
+ layers={['grid', 'axes', 'bars', 'markers', 'legends', 'annotations', CustomHoverLayer]}
/>
+
)
diff --git a/src/components/Swap/style.ts b/src/components/Swap/style.ts
index cb66680..62a3bfe 100644
--- a/src/components/Swap/style.ts
+++ b/src/components/Swap/style.ts
@@ -44,7 +44,7 @@ export const useStyles = makeStyles()((theme: Theme) => ({
}
},
header: {
- maxWidth: 500,
+ maxWidth: 510,
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
@@ -161,7 +161,7 @@ export const useStyles = makeStyles()((theme: Theme) => ({
root: {
flexDirection: 'column',
position: 'relative',
- maxWidth: 500,
+ maxWidth: 510,
background: colors.invariant.component,
borderRadius: 24,
paddingInline: 24,
@@ -278,10 +278,13 @@ export const useStyles = makeStyles()((theme: Theme) => ({
},
transactionDetailsHeader: {
+ width: 146,
...typography.caption2,
whiteSpace: 'nowrap',
pointerEvents: 'none',
- color: colors.invariant.lightGrey
+ color: colors.invariant.lightGrey,
+ display: 'flex',
+ justifyContent: 'center'
},
exchangeRateWrapper: {
@@ -417,7 +420,7 @@ export const useStyles = makeStyles()((theme: Theme) => ({
backgroundColor: colors.invariant.component,
color: colors.invariant.textGrey,
fontSize: 16,
- fontsWeigth: 500,
+ fontsWeigth: 510,
cursor: 'pointer',
userSelect: 'none',
display: 'flex',
@@ -482,7 +485,7 @@ export const useStyles = makeStyles()((theme: Theme) => ({
transition: 'all 0.3s ease-in-out'
},
borderContainer: {
- maxWidth: 500,
+ maxWidth: 510,
width: '100%',
borderRadius: 24,
border: `1px solid ${colors.invariant.component}`
diff --git a/src/containers/NewPositionWrapper/NewPositionWrapper.tsx b/src/containers/NewPositionWrapper/NewPositionWrapper.tsx
index d5ca330..b3cc874 100644
--- a/src/containers/NewPositionWrapper/NewPositionWrapper.tsx
+++ b/src/containers/NewPositionWrapper/NewPositionWrapper.tsx
@@ -686,6 +686,9 @@ export const NewPositionWrapper: React.FC
= ({
}, [])
const { feeTiersWithTvl, totalTvl } = useMemo(() => {
+ if (tokenAIndex === null || tokenBIndex === null) {
+ return { feeTiersWithTvl: {}, totalTvl: 0 }
+ }
const feeTiersWithTvl: Record = {}
let totalTvl = 0
diff --git a/src/store/consts/static.ts b/src/store/consts/static.ts
index d68d6ec..4f3abbf 100644
--- a/src/store/consts/static.ts
+++ b/src/store/consts/static.ts
@@ -2,7 +2,14 @@ import { FEE_TIERS, toDecimal } from '@invariant-labs/sdk-sonic/lib/utils'
import { BN } from '@coral-xyz/anchor'
import { PublicKey } from '@solana/web3.js'
import { ISnackbar } from '@store/reducers/snackbars'
-import { Chain, PrefixConfig, Token, TokenPriceData, WalletType } from './types'
+import {
+ Chain,
+ FormatNumberThreshold,
+ PrefixConfig,
+ Token,
+ TokenPriceData,
+ WalletType
+} from './types'
import { cat1Icon, cat2Icon, dog1Icon, dog2Icon } from '@static/icons'
import { TOKEN_2022_PROGRAM_ID, TOKEN_PROGRAM_ID } from '@solana/spl-token'
@@ -593,3 +600,72 @@ export const chartPlaceholder = {
plotMax: 1.0113333501881372,
tickSpacing: 10
}
+
+export const AlternativeFormatConfig = {
+ B: 1000000000,
+ M: 1000000,
+ K: 10000,
+ BDecimals: 9,
+ MDecimals: 6,
+ KDecimals: 3,
+ DecimalsAfterDot: 2
+}
+
+export const defaultThresholds: FormatNumberThreshold[] = [
+ {
+ value: 10,
+ decimals: 4
+ },
+ {
+ value: 1000,
+ decimals: 2
+ },
+ {
+ value: 10000,
+ decimals: 2
+ },
+ {
+ value: 1000000,
+ decimals: 2,
+ divider: 1000
+ },
+ {
+ value: 1000000000,
+ decimals: 2,
+ divider: 1000000
+ },
+ {
+ value: Infinity,
+ decimals: 2,
+ divider: 1000000000
+ }
+]
+
+export const thresholdsWithTokenDecimal = (decimals: number): FormatNumberThreshold[] => [
+ {
+ value: 10,
+ decimals
+ },
+ {
+ value: 10000,
+ decimals: 6
+ },
+ {
+ value: 100000,
+ decimals: 4
+ },
+ {
+ value: 1000000,
+ decimals: 3
+ },
+ {
+ value: 1000000000,
+ decimals: 2,
+ divider: 1000000
+ },
+ {
+ value: Infinity,
+ decimals: 2,
+ divider: 1000000000
+ }
+]
diff --git a/src/utils/uiUtils.ts b/src/utils/uiUtils.ts
index 674b7b7..39c6573 100644
--- a/src/utils/uiUtils.ts
+++ b/src/utils/uiUtils.ts
@@ -1,7 +1,6 @@
import { BN } from '@coral-xyz/anchor'
import { formatDate, printBN, trimDecimalZeros, trimZeros } from './utils'
import { PublicKey } from '@solana/web3.js'
-import { FormatNumberThreshold } from '@store/consts/types'
import { Intervals, MONTH_NAMES } from '@store/consts/static'
export const toBlur = 'global-blur'
@@ -132,34 +131,6 @@ export const formatLargeNumber = (number: number) => {
return `${trimZeros(scaledNumber.toFixed(1))}${suffixes[suffixIndex]}`
}
-export const thresholdsWithTokenDecimal = (decimals: number): FormatNumberThreshold[] => [
- {
- value: 10,
- decimals
- },
- {
- value: 10000,
- decimals: 6
- },
- {
- value: 100000,
- decimals: 4
- },
- {
- value: 1000000,
- decimals: 3
- },
- {
- value: 1000000000,
- decimals: 2,
- divider: 1000000
- },
- {
- value: Infinity,
- decimals: 2,
- divider: 1000000000
- }
-]
export const shortenDate = (timestamp: number | string): string => {
if (typeof timestamp === 'string') {
return timestamp.slice(0, 6) + timestamp.slice(-2)
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index ed0c3f1..686df26 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -72,7 +72,9 @@ import {
SSOL_MAIN,
WSOL_MAIN,
WSOL_TEST,
- WRAPPED_SOL_ADDRESS
+ WRAPPED_SOL_ADDRESS,
+ AlternativeFormatConfig,
+ defaultThresholds
} from '@store/consts/static'
import { PoolWithAddress } from '@store/reducers/pools'
import { bs58 } from '@coral-xyz/anchor/dist/cjs/utils/bytes'
@@ -82,7 +84,6 @@ import {
IncentiveRewardData,
IPriceData,
PoolSnapshot,
- PrefixConfig,
Token,
TokenPriceData
} from '@store/consts/types'
@@ -204,80 +205,6 @@ export const removeTickerPrefix = (ticker: string, prefix: string[] = ['x', '$']
return ticker
}
-const defaultPrefixConfig: PrefixConfig = {
- B: 1000000000,
- M: 1000000,
- K: 10000
-}
-
-export const showPrefix = (nr: number, config: PrefixConfig = defaultPrefixConfig): string => {
- const abs = Math.abs(nr)
-
- if (typeof config.B !== 'undefined' && abs >= config.B) {
- return 'B'
- }
-
- if (typeof config.M !== 'undefined' && abs >= config.M) {
- return 'M'
- }
-
- if (typeof config.K !== 'undefined' && abs >= config.K) {
- return 'K'
- }
-
- return ''
-}
-
-export const defaultThresholds: FormatNumberThreshold[] = [
- {
- value: 10,
- decimals: 4
- },
- {
- value: 1000,
- decimals: 2
- },
- {
- value: 10000,
- decimals: 1
- },
- {
- value: 1000000,
- decimals: 2,
- divider: 1000
- },
- {
- value: 1000000000,
- decimals: 2,
- divider: 1000000
- },
- {
- value: Infinity,
- decimals: 2,
- divider: 1000000000
- }
-]
-
-export const formatNumbers =
- (thresholds: FormatNumberThreshold[] = defaultThresholds) =>
- (value: string) => {
- const num = Number(value)
- const abs = Math.abs(num)
- const threshold = thresholds.sort((a, b) => a.value - b.value).find(thr => abs < thr.value)
-
- const formatted = threshold
- ? (abs / (threshold.divider ?? 1)).toFixed(threshold.decimals)
- : value
-
- return num < 0 && threshold ? '-' + formatted : formatted
- }
-
-export const sqrtPriceToPrice = (sqrtPrice: BN) => {
- const price = sqrtPrice.mul(sqrtPrice)
-
- return price.div(PRICE_DENOMINATOR)
-}
-
export const priceToSqrtPrice = (price: BN) => {
return sqrt(price.mul(PRICE_DENOMINATOR))
}
@@ -719,11 +646,41 @@ export const printSubNumber = (amount: number): string => {
.join('')
}
+interface FormatNumberWithSuffixConfig {
+ noDecimals?: boolean
+ decimalsAfterDot?: number
+ alternativeConfig?: boolean
+ noSubNumbers?: boolean
+}
+
+export const getThresholdsDecimals = (
+ number: number | bigint | string,
+ thresholds: FormatNumberThreshold[] = defaultThresholds
+): number => {
+ const numberAsNumber = Number(number)
+ const found = thresholds.find(threshold => numberAsNumber < threshold.value)
+
+ return found?.decimals ?? 2
+}
export const formatNumberWithSuffix = (
number: number | bigint | string,
- noDecimals?: boolean,
- decimalsAfterDot: number = 3
+ config?: FormatNumberWithSuffixConfig
): string => {
+ const {
+ noDecimals,
+ decimalsAfterDot,
+ alternativeConfig,
+ noSubNumbers
+ }: Required = {
+ noDecimals: false,
+ decimalsAfterDot: 3,
+ alternativeConfig: false,
+ noSubNumbers: false,
+ ...config
+ }
+
+ const formatConfig = alternativeConfig ? AlternativeFormatConfig : FormatConfig
+
const numberAsNumber = Number(number)
const isNegative = numberAsNumber < 0
const absNumberAsNumber = Math.abs(numberAsNumber)
@@ -738,39 +695,43 @@ export const formatNumberWithSuffix = (
let formattedNumber
- if (Math.abs(numberAsNumber) >= FormatConfig.B) {
+ if (Math.abs(numberAsNumber) >= formatConfig.B) {
const formattedDecimals = noDecimals
? ''
- : (FormatConfig.DecimalsAfterDot ? '.' : '') +
- (beforeDot.slice(-FormatConfig.BDecimals) + (afterDot ? afterDot : '')).slice(
+ : '.' +
+ (beforeDot.slice(-formatConfig.BDecimals) + (afterDot ? afterDot : '')).slice(
0,
- FormatConfig.DecimalsAfterDot
+ formatConfig.DecimalsAfterDot
)
formattedNumber =
- beforeDot.slice(0, -FormatConfig.BDecimals) + (noDecimals ? '' : formattedDecimals) + 'B'
- } else if (Math.abs(numberAsNumber) >= FormatConfig.M) {
+ beforeDot.slice(0, -formatConfig.BDecimals) + (noDecimals ? '' : formattedDecimals) + 'B'
+ } else if (Math.abs(numberAsNumber) >= formatConfig.M) {
const formattedDecimals = noDecimals
? ''
- : (FormatConfig.DecimalsAfterDot ? '.' : '') +
- (beforeDot.slice(-FormatConfig.MDecimals) + (afterDot ? afterDot : '')).slice(
+ : '.' +
+ (beforeDot.slice(-formatConfig.MDecimals) + (afterDot ? afterDot : '')).slice(
0,
- FormatConfig.DecimalsAfterDot
+ formatConfig.DecimalsAfterDot
)
formattedNumber =
- beforeDot.slice(0, -FormatConfig.MDecimals) + (noDecimals ? '' : formattedDecimals) + 'M'
- } else if (Math.abs(numberAsNumber) >= FormatConfig.K) {
+ beforeDot.slice(0, -formatConfig.MDecimals) + (noDecimals ? '' : formattedDecimals) + 'M'
+ } else if (Math.abs(numberAsNumber) >= formatConfig.K) {
const formattedDecimals = noDecimals
? ''
- : (FormatConfig.DecimalsAfterDot ? '.' : '') +
- (beforeDot.slice(-FormatConfig.KDecimals) + (afterDot ? afterDot : '')).slice(
+ : '.' +
+ (beforeDot.slice(-formatConfig.KDecimals) + (afterDot ? afterDot : '')).slice(
0,
- FormatConfig.DecimalsAfterDot
+ formatConfig.DecimalsAfterDot
)
formattedNumber =
- beforeDot.slice(0, -FormatConfig.KDecimals) + (noDecimals ? '' : formattedDecimals) + 'K'
+ beforeDot.slice(0, -formatConfig.KDecimals) + (noDecimals ? '' : formattedDecimals) + 'K'
+ } else if (afterDot && noSubNumbers) {
+ const roundedNumber = absNumberAsNumber.toFixed(decimalsAfterDot + 1).slice(0, -1)
+
+ formattedNumber = trimZeros(roundedNumber)
} else if (afterDot && countLeadingZeros(afterDot) <= decimalsAfterDot) {
- const roundedNumber = numberAsNumber
+ const roundedNumber = absNumberAsNumber
.toFixed(countLeadingZeros(afterDot) + decimalsAfterDot + 1)
.slice(0, -1)
@@ -783,7 +744,9 @@ export const formatNumberWithSuffix = (
? String(parseInt(afterDot)).slice(0, decimalsAfterDot)
: afterDot
- if (parsedAfterDot) {
+ if (noSubNumbers && afterDot) {
+ formattedNumber = beforeDot + '.' + afterDot
+ } else if (parsedAfterDot && afterDot) {
formattedNumber =
beforeDot +
'.' +
@@ -1850,35 +1813,6 @@ export const getPositionsAddressesFromRange = async (
)
}
-export const thresholdsWithTokenDecimal = (decimals: number): FormatNumberThreshold[] => [
- {
- value: 10,
- decimals
- },
- {
- value: 10000,
- decimals: 6
- },
- {
- value: 100000,
- decimals: 4
- },
- {
- value: 1000000,
- decimals: 3
- },
- {
- value: 1000000000,
- decimals: 2,
- divider: 1000000
- },
- {
- value: Infinity,
- decimals: 2,
- divider: 1000000000
- }
-]
-
export const getMockedTokenPrice = (symbol: string, network: NetworkType): TokenPriceData => {
const sufix = network === NetworkType.Devnet ? '_DEV' : '_TEST'
const prices = tokensPrices[network]