manifold/common/util/format.ts
Austin Chen 8cedf93901
Implement quick betting: directly from the market card (#291)
* Play with using 3 icons for 1-click usage

* Align bet icons with the percentages

* Hide liquidity injection star, for now

* Fix Free Response card layouts

* Use triangles instead of planes

* Set correct hover states the arrows

* Fix down triangle & padding

* Default large nums to 2 sigfigs

* Clean up hover areas

* Fix bet width, remove "chance/expected"

* Show "M$20" on hover, hide arrows when closed

* Improve click targets

* FR: "MULTI" => "MANY", single => "TOP"

* Install react-hot-toaster

* Implement quick betting on binary questions

* Handle different kinds of markets

* Extract out QuickBet into its own component

* Minor tweaks

* Visually separate out quick bet pane

* Hide quick bet for FR markets with no answers

* Fill in which bets the user has already placed

* Animate movements, fix binary direction

* Hover arrows are now always gray

* Pull out code into quick-bet.tsx

* Minor comments

* Fix import

ts-ignore is scary

* Fixes from James's feedback

* Hide text only on quickbet
2022-05-23 23:44:16 -07:00

60 lines
1.8 KiB
TypeScript

import { ENV_CONFIG } from '../envs/constants'
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
maximumFractionDigits: 0,
minimumFractionDigits: 0,
})
export function formatMoney(amount: number) {
const newAmount = Math.round(amount) === 0 ? 0 : Math.floor(amount) // handle -0 case
return ENV_CONFIG.moneyMoniker + formatter.format(newAmount).replace('$', '')
}
export function formatWithCommas(amount: number) {
return formatter.format(Math.floor(amount)).replace('$', '')
}
export function manaToUSD(mana: number) {
return (mana / 100).toLocaleString('en-US', {
style: 'currency',
currency: 'USD',
})
}
export function formatPercent(zeroToOne: number) {
// Show 1 decimal place if <2% or >98%, giving more resolution on the tails
const decimalPlaces = zeroToOne < 0.02 || zeroToOne > 0.98 ? 1 : 0
return (zeroToOne * 100).toFixed(decimalPlaces) + '%'
}
// Eg 1234567.89 => 1.23M; 5678 => 5.68K
export function formatLargeNumber(num: number, sigfigs = 2): string {
const absNum = Math.abs(num)
if (absNum < 1000) {
return '' + Number(num.toPrecision(sigfigs))
}
const suffix = ['', 'K', 'M', 'B', 'T', 'Q']
const suffixIdx = Math.floor(Math.log10(absNum) / 3)
const suffixStr = suffix[suffixIdx]
const numStr = (num / Math.pow(10, 3 * suffixIdx)).toPrecision(sigfigs)
return `${Number(numStr)}${suffixStr}`
}
export function toCamelCase(words: string) {
const camelCase = words
.split(' ')
.map((word) => word.trim())
.filter((word) => word)
.map((word, index) =>
index === 0 ? word : word[0].toLocaleUpperCase() + word.substring(1)
)
.join('')
// Remove non-alpha-numeric-underscore chars.
const regex = /(?:^|\s)(?:[a-z0-9_]+)/gi
return (camelCase.match(regex) || [])[0] ?? ''
}