cerc-io/mars-interface
11
0
Fork 0
mirror of https://github.com/cerc-io/mars-interface.git synced 2026-09-15 03:14:07 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

v1.2.1

Browse Source
This commit is contained in:
Linkie Link
2023-02-18 13:58:48 +01:00
parent 53797b4342
commit ec0eee27ec
24 changed files with 178 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/common/ErrorMessage/ErrorMessage.tsx
+14 -2
View File
@@ -1,14 +1,26 @@
import classNames from 'classnames'
import { useTranslation } from 'react-i18next'
import styles from './ErrorMessage.module.scss'
interface Props {
errorMessage?: string
message: unknown
alignment?: 'left' | 'center' | 'right'
}
export const ErrorMessage = (props: Props) => {
const { t } = useTranslation()
const classes = classNames(styles.errorMessage, props.alignment && styles[props.alignment])
return props.errorMessage ? <p className={classes}>{props.errorMessage}</p> : null
if (!props.message) return null
if (typeof props.message === 'object') {
return <p className={classes}>{JSON.stringify(props.message)}</p>
}
if (typeof props.message === 'string') {
return <p className={classes}>{props.message}</p>
}
return <p className={classes}>{t('error.errorEstimatedFee')}</p>
}
src/components/common/Footer/Footer.tsx
+9
View File
@@ -102,6 +102,15 @@ export const Footer = () => {
>
{t('global.privacyPolicy')}
</a>
<a
className={styles.item}
href={DocURL.SECURITY}
rel='noopener noreferrer'
target='_blank'
title={t('global.security')}
>
{t('global.security')}
</a>
</div>
<div className={styles.column3}>
<div className={styles.header}>{t('global.community')}</div>
src/components/common/Header/IncentivesButton.tsx
+1 -1
View File
@@ -215,7 +215,7 @@ export const IncentivesButton = () => {
onClick={() => (submitted ? null : claimRewards())}
color='primary'
/>
<ErrorMessage errorMessage={error} alignment='center' />
<ErrorMessage message={error} alignment='center' />
</div>
</div>
</div>
src/components/common/NumberInput/NumberInput.tsx
+19 -6
View File
@@ -7,8 +7,10 @@ interface Props {
value: string
className: string
maxDecimals: number
minValue?: number
maxValue?: number
maxLength?: number
allowNegative?: boolean
suffix?: string
onChange: (value: number) => void
onBlur?: () => void
@@ -79,6 +81,13 @@ export const NumberInput = (props: Props) => {
const isNumber = !isNaN(Number(value))
const hasMultipleDots = (value.match(/[.,]/g)?.length || 0) > 1
const isSeparator = lastChar === '.' || lastChar === ','
const isNegative = value.indexOf('-') > -1
const isLowerThanMinimum = props.minValue !== undefined && Number(value) < props.minValue
const isHigherThanMaximum = props.maxValue !== undefined && Number(value) > props.maxValue
const isTooLong = props.maxLength !== undefined && numberCount > props.maxLength
const exceedsMaxDecimals = props.maxDecimals !== undefined && decimals > props.maxDecimals
if (isNegative && !props.allowNegative) return
if (isSeparator && value.length === 1) {
updateValues('0.', 0)
@@ -90,17 +99,21 @@ export const NumberInput = (props: Props) => {
return
}
if (!isNumber) return
if (hasMultipleDots) return
if (!isNumber || hasMultipleDots) return
if (props.maxDecimals !== undefined && decimals > props.maxDecimals) {
if (exceedsMaxDecimals) {
value = value.substring(0, value.length - 1)
}
if (props.maxLength !== undefined && numberCount > props.maxLength) return
if (isTooLong) return
if ((props.maxValue && Number(value) > props.maxValue) || props.maxValue === 0) {
updateValues(String(props.maxValue), props.maxValue)
if (isLowerThanMinimum) {
updateValues(String(props.minValue), props.minValue!)
return
}
if (isHigherThanMaximum) {
updateValues(String(props.maxValue), props.maxValue!)
return
}
src/components/common/TxModal/Action.tsx
+1 -1
View File
@@ -330,7 +330,7 @@ export const Action = ({
showProgressIndicator={actionButtonSpec.fetching}
text={actionButtonSpec.text}
/>
<ErrorMessage errorMessage={feeError} alignment='center' />
<ErrorMessage message={feeError} alignment='center' />
</>
)
}
src/components/fields/ActiveVaultsTable/useActiveVaultsColumns.tsx
+2 -2
View File
@@ -199,7 +199,7 @@ export const useActiveVaultsColumns = () => {
<>
<DisplayCurrency
coin={{
denom: baseCurrency.denom,
denom: vaultCap.denom,
amount: vaultCap.max.toString(),
}}
/>
@@ -212,7 +212,7 @@ export const useActiveVaultsColumns = () => {
<TokenBalance
showSymbol
coin={{
denom: baseCurrency.denom,
denom: vaultCap.denom,
amount: vaultCap.max.toString(),
}}
/>
src/components/fields/AvailableVaultsTable/AvailableVaultsTableMobile.tsx
+1 -1
View File
@@ -74,7 +74,7 @@ export const AvailableVaultsTableMobile = () => {
<span>
<DisplayCurrency
coin={{
denom: baseCurrency.denom,
denom: vault.vaultCap?.denom || '',
amount: (vault.vaultCap?.max || 0).toString(),
}}
className={styles.inline}
src/components/fields/AvailableVaultsTable/useAvailableVaultsColumns.tsx
+2 -2
View File
@@ -159,7 +159,7 @@ export const useAvailableVaultsColumns = () => {
<>
<DisplayCurrency
coin={{
denom: baseCurrency.denom,
denom: vaultCap.denom,
amount: vaultCap.max.toString(),
}}
/>
@@ -172,7 +172,7 @@ export const useAvailableVaultsColumns = () => {
<TokenBalance
showSymbol
coin={{
denom: baseCurrency.denom,
denom: vaultCap.denom,
amount: vaultCap.max.toString(),
}}
/>
src/components/fields/Breakdown/BreakdownTable/BreakdownTable.tsx
+14 -3
View File
@@ -42,6 +42,7 @@ export const BreakdownTable = (props: Props) => {
const primaryAsset = useAsset({ denom: props.vault.denoms.primary })
const secondaryAsset = useAsset({ denom: props.vault.denoms.secondary })
const convertToDisplayCurrency = useStore((s) => s.convertToDisplayCurrency)
const convertToBaseCurrency = useStore((s) => s.convertToBaseCurrency)
const primaryPrice = usePrice(props.vault.denoms.primary)
const secondaryPrice = usePrice(props.vault.denoms.secondary)
@@ -165,13 +166,23 @@ export const BreakdownTable = (props: Props) => {
const additionalPositionValue = props.isSetUp
? props.newPosition.values.total
: props.newPosition.values.total - props.prevPosition.values.total
const vaultCap = (props.vault.vaultCap?.max || 0) * VAULT_DEPOSIT_BUFFER
const vaultCapValue = convertToBaseCurrency({
amount: ((props.vault.vaultCap?.max || 0) * VAULT_DEPOSIT_BUFFER).toString(),
denom: props.vault.vaultCap?.denom || '',
})
const vaultCapUsedValue = convertToBaseCurrency({
amount: (props.vault.vaultCap?.used || 0).toString(),
denom: props.vault.vaultCap?.denom || '',
})
const isVaultCapReached = props.vault.vaultCap
? props.vault.vaultCap.used + additionalPositionValue > vaultCap
? vaultCapUsedValue + additionalPositionValue > vaultCapValue
: false
if (isVaultCapReached && props.vault.vaultCap) {
const leftoverCap = vaultCap - props.vault.vaultCap.used
const leftoverCap = vaultCapValue - vaultCapUsedValue
const maxPositionValue = convertToDisplayCurrency({
amount: ((props.isSetUp ? 0 : props.prevPosition.values.total) + leftoverCap).toString(),
denom: 'uosmo',
src/components/fields/PositionInput/TokenInput/TokenInput.module.scss
+17
View File
@@ -26,6 +26,7 @@
}
.container {
position: relative;
display: flex;
flex: 1;
border: 1px solid;
@@ -37,6 +38,17 @@
border-color: rgba($colorSecondary, 0.8) !important;
}
.inputWarning {
position: absolute;
bottom: rem-calc(36);
left: 0;
width: 100%;
text-align: center;
display: flex;
justify-content: center;
@include typoS;
}
.input,
.select {
color: $colorWhite;
@@ -44,6 +56,11 @@
outline: none;
@include padding(1.5, 2);
background: $backgroundInTile;
option {
background: $backgroundInTile;
color: $colorWhite;
}
}
.input:focus,
src/components/fields/PositionInput/TokenInput/TokenInput.tsx
+12 -1
View File
@@ -23,6 +23,7 @@ interface Props {
export const TokenInput = (props: Props) => {
const userBalances = useStore((s) => s.userBalances)
const { t } = useTranslation()
const baseCurrency = useStore((s) => s.baseCurrency)
const walletBalance = findByDenom(userBalances, props.input.denom) as Coin
const asset = useAsset({ denom: props.input.denom })
@@ -54,12 +55,15 @@ export const TokenInput = (props: Props) => {
props.onChange(microValue)
}
if (!asset) return <></>
if (!asset) return null
const maxAmount =
(props.maxAmount === undefined ? Number(walletBalance.amount) : props.maxAmount) /
10 ** asset.decimals
const showGasWarning =
props.maxAmount && props.amount >= props.maxAmount && asset.denom === baseCurrency.denom
return (
<div className={styles.wrapper}>
<Button
@@ -75,9 +79,11 @@ export const TokenInput = (props: Props) => {
onChange={onValueEntered}
onFocus={() => {}}
onBlur={() => {}}
minValue={0}
maxValue={(props.maxAmount || 0) / 10 ** asset.decimals}
value={(props.amount / 10 ** asset.decimals).toString()}
maxDecimals={6}
allowNegative={false}
suffix={isSingleToken ? ` ${props.input.symbol}` : ''}
className={inputClasses}
/>
@@ -98,6 +104,11 @@ export const TokenInput = (props: Props) => {
</select>
</>
)}
{showGasWarning ? (
<div className={styles.inputWarning}>
<p className='tippyContainer'>{t('common.lowUstAmountAfterTransaction')}</p>
</div>
) : null}
</div>
</div>
<div className={styles.bottomInfo}>