mirror of
https://github.com/cerc-io/mars-interface.git
synced 2024-12-22 20:27:44 +00:00
release v1.4.4
This commit is contained in:
Linkie Link
parent
f02f9ed515
commit
b46a6b9461
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "mars",
|
||||
"homepage": "./",
|
||||
"version": "1.4.3",
|
||||
"version": "1.4.4",
|
||||
"license": "SEE LICENSE IN LICENSE FILE",
|
||||
"private": false,
|
||||
"scripts": {
|
||||
|
||||
@ -21,7 +21,9 @@ export const CosmosWalletConnectProvider = ({ children }: Props) => {
|
||||
if (chainInfoOverrides) return
|
||||
|
||||
const fetchConfig = async () => {
|
||||
const file = await import(`../../../configs/${NETWORK !== 'mainnet' ? 'osmo-test-4' : 'osmosis-1'}.ts`)
|
||||
const file = await import(
|
||||
`../../../configs/${NETWORK !== 'mainnet' ? 'osmo-test-4' : 'osmosis-1'}.ts`
|
||||
)
|
||||
|
||||
const networkConfig: NetworkConfig = file.NETWORK_CONFIG
|
||||
|
||||
|
||||
@ -12,15 +12,13 @@ import styles from './Settings.module.scss'
|
||||
|
||||
export const Settings = () => {
|
||||
const { t } = useTranslation()
|
||||
const inputPlaceholder = '...'
|
||||
const queryClient = useQueryClient()
|
||||
const slippages = [0.02, 0.03]
|
||||
const [showDetails, setShowDetails] = useState(false)
|
||||
const slippage = useStore((s) => s.slippage)
|
||||
const networkConfig = useStore((s) => s.networkConfig)
|
||||
const baseCurrency = useStore((s) => s.baseCurrency)
|
||||
const currencyAssets = useStore((s) => s.currencyAssets)
|
||||
const [customSlippage, setCustomSlippage] = useState<string>(inputPlaceholder)
|
||||
const [customSlippage, setCustomSlippage] = useState<number>(0)
|
||||
const [inputRef, setInputRef] = useState<React.RefObject<HTMLInputElement>>()
|
||||
const [isCustom, setIsCustom] = useState(false)
|
||||
const enableAnimations = useStore((s) => s.enableAnimations)
|
||||
@ -32,7 +30,8 @@ export const Settings = () => {
|
||||
)
|
||||
|
||||
const onInputChange = (value: number) => {
|
||||
setCustomSlippage(value.toString())
|
||||
value = value / 100
|
||||
setCustomSlippage(value)
|
||||
if (!value.toString()) {
|
||||
return
|
||||
}
|
||||
@ -42,14 +41,14 @@ export const Settings = () => {
|
||||
setIsCustom(false)
|
||||
|
||||
if (!customSlippage) {
|
||||
setCustomSlippage(inputPlaceholder)
|
||||
setCustomSlippage(0)
|
||||
useStore.setState({ slippage })
|
||||
return
|
||||
}
|
||||
|
||||
const value = Number(customSlippage || 0) / 100
|
||||
if (slippages.includes(value)) {
|
||||
setCustomSlippage(inputPlaceholder)
|
||||
setCustomSlippage(0)
|
||||
useStore.setState({ slippage: value })
|
||||
return
|
||||
}
|
||||
@ -178,12 +177,14 @@ export const Settings = () => {
|
||||
onChange={onInputChange}
|
||||
onBlur={onInputBlur}
|
||||
onFocus={onInputFocus}
|
||||
value={customSlippage}
|
||||
value={customSlippage * 100}
|
||||
maxValue={10}
|
||||
maxDecimals={1}
|
||||
maxLength={3}
|
||||
className={styles.customSlippageBtn}
|
||||
style={{ fontSize: 16 }}
|
||||
decimals={2}
|
||||
placeholder='...'
|
||||
/>
|
||||
%
|
||||
</button>
|
||||
|
||||
@ -52,6 +52,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: rem-calc(16);
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: $colorInfoVoteAgainst;
|
||||
align-self: center;
|
||||
@ -107,40 +113,6 @@
|
||||
@include typoS;
|
||||
}
|
||||
|
||||
.inputWrapper {
|
||||
align-self: center;
|
||||
opacity: 1;
|
||||
border: 1px solid $colorGreyHighlight;
|
||||
width: rem-calc(448);
|
||||
max-width: 100%;
|
||||
height: rem-calc(56);
|
||||
border-radius: $borderRadiusS;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.inputPercentage {
|
||||
text-align: center;
|
||||
opacity: 1;
|
||||
background: none;
|
||||
border: none;
|
||||
color: $fontColorLightPrimary;
|
||||
@include typoXXL;
|
||||
|
||||
&::placeholder {
|
||||
text-indent: rem-calc(-14);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
input::-webkit-inner-spin-button {
|
||||
appearance: none;
|
||||
@include margin(0);
|
||||
}
|
||||
}
|
||||
|
||||
.inputRaw {
|
||||
align-self: center;
|
||||
background: none;
|
||||
@ -155,6 +127,18 @@
|
||||
margin-bottom: space(3);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.inputWrapper {
|
||||
align-self: center;
|
||||
opacity: 1;
|
||||
border: 1px solid $colorGreyHighlight;
|
||||
width: rem-calc(448);
|
||||
max-width: 100%;
|
||||
height: rem-calc(56);
|
||||
border-radius: $borderRadiusS;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.feeTooltipContent {
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { Button, DisplayCurrency, InputSlider } from 'components/common'
|
||||
import { formatValue, lookup, lookupSymbol, parseNumberInput } from 'libs/parse'
|
||||
import { Button, DisplayCurrency, InputSlider, NumberInput } from 'components/common'
|
||||
import { lookupSymbol } from 'libs/parse'
|
||||
import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import CurrencyInput from 'react-currency-input-field'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import useStore from 'store'
|
||||
import { ViewType } from 'types/enums'
|
||||
@ -157,42 +156,16 @@ export const InputSection = ({
|
||||
{produceUpperInputInfo()}
|
||||
|
||||
<div className={styles.inputWrapper}>
|
||||
<CurrencyInput
|
||||
allowNegativeValue={false}
|
||||
autoFocus={true}
|
||||
className={`h4 number ${styles.inputPercentage}`}
|
||||
decimalSeparator='.'
|
||||
decimalsLimit={asset.decimals}
|
||||
disableAbbreviations={true}
|
||||
disabled={disabled}
|
||||
groupSeparator=','
|
||||
name='currencyInput'
|
||||
onKeyPress={(event) => {
|
||||
if (event.key === 'Enter') {
|
||||
onEnterHandler()
|
||||
}
|
||||
}}
|
||||
onValueChange={(value) => {
|
||||
if (value?.charAt(value.length - 1) !== '.') {
|
||||
inputCallback(parseNumberInput(value))
|
||||
setFakeAmount(undefined)
|
||||
} else {
|
||||
setFakeAmount(value)
|
||||
}
|
||||
}}
|
||||
placeholder='0'
|
||||
suffix={` ${suffix}`}
|
||||
value={
|
||||
fakeAmount
|
||||
? fakeAmount
|
||||
: amount
|
||||
? lookup(
|
||||
Number(formatValue(amount, 0, 0, false, false, false, false, false)),
|
||||
asset.denom,
|
||||
asset.decimals,
|
||||
)
|
||||
: ''
|
||||
}
|
||||
<NumberInput
|
||||
onChange={inputCallback}
|
||||
minValue={0}
|
||||
maxValue={maxUsableAmount || 0}
|
||||
value={amount}
|
||||
maxDecimals={asset.decimals}
|
||||
allowNegative={false}
|
||||
suffix={suffix}
|
||||
className={`number ${styles.input}`}
|
||||
decimals={asset.decimals}
|
||||
/>
|
||||
</div>
|
||||
<DisplayCurrency
|
||||
|
||||
@ -1,11 +1,14 @@
|
||||
import { lookup } from 'libs/parse'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import BigNumber from 'bignumber.js'
|
||||
import React, { useCallback, useEffect, useState } from 'react'
|
||||
|
||||
import styles from './NumberInput.module.scss'
|
||||
|
||||
BigNumber.config({ EXPONENTIAL_AT: [-24, 20] })
|
||||
|
||||
interface Props {
|
||||
value: string
|
||||
value: number
|
||||
className: string
|
||||
decimals: number
|
||||
maxDecimals: number
|
||||
minValue?: number
|
||||
maxValue?: number
|
||||
@ -13,6 +16,7 @@ interface Props {
|
||||
allowNegative?: boolean
|
||||
suffix?: string
|
||||
style?: {}
|
||||
placeholder?: string
|
||||
onChange: (value: number) => void
|
||||
onBlur?: () => void
|
||||
onFocus?: () => void
|
||||
@ -22,17 +26,40 @@ interface Props {
|
||||
export const NumberInput = (props: Props) => {
|
||||
const inputRef = React.useRef<HTMLInputElement>(null)
|
||||
const cursorRef = React.useRef(0)
|
||||
|
||||
const magnifyValue = (value: string) => {
|
||||
return new BigNumber(value).shiftedBy(props.decimals).toString()
|
||||
}
|
||||
|
||||
const minifyValue = useCallback(
|
||||
(value: string) => {
|
||||
return new BigNumber(value).shiftedBy(-1 * props.decimals).toString()
|
||||
},
|
||||
[props.decimals],
|
||||
)
|
||||
|
||||
const [inputValue, setInputValue] = useState({
|
||||
formatted: props.value,
|
||||
value: Number(props.value),
|
||||
formatted: minifyValue(props.value.toString()),
|
||||
value: props.value,
|
||||
})
|
||||
|
||||
const clearDots = (value: string) => {
|
||||
const regex = new RegExp(/\.\./g)
|
||||
if (regex.test(value)) {
|
||||
const search = '.'
|
||||
const replaceWith = ''
|
||||
value = value.split(search).join(replaceWith)
|
||||
}
|
||||
|
||||
return value
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setInputValue({
|
||||
formatted: props.value,
|
||||
formatted: minifyValue(props.value.toString()),
|
||||
value: Number(props.value),
|
||||
})
|
||||
}, [props.value])
|
||||
}, [props.value, minifyValue])
|
||||
|
||||
useEffect(() => {
|
||||
if (!props.onRef) return
|
||||
@ -73,9 +100,14 @@ export const NumberInput = (props: Props) => {
|
||||
}, [inputValue, inputRef])
|
||||
|
||||
const onInputChange = (value: string) => {
|
||||
if (props.suffix) {
|
||||
value = value.replace(props.suffix, '')
|
||||
if (props.placeholder) {
|
||||
value = clearDots(value)
|
||||
}
|
||||
|
||||
if (props.suffix) {
|
||||
value = value.replace(' ' + props.suffix, '')
|
||||
}
|
||||
|
||||
const numberCount = value.match(/[0-9]/g)?.length || 0
|
||||
const decimals = value.split('.')[1]?.length || 0
|
||||
const lastChar = value.charAt(value.length - 1)
|
||||
@ -129,14 +161,25 @@ export const NumberInput = (props: Props) => {
|
||||
return
|
||||
}
|
||||
|
||||
updateValues(String(lookup(Number(value), '', 6)), Number(value))
|
||||
if (Number(value) === 0) {
|
||||
updateValues(value, 0)
|
||||
return
|
||||
}
|
||||
|
||||
updateValues(value, Number(magnifyValue(value)))
|
||||
}
|
||||
|
||||
return (
|
||||
<input
|
||||
ref={inputRef}
|
||||
type='text'
|
||||
value={`${inputValue.formatted}${props.suffix ? props.suffix : ''}`}
|
||||
value={
|
||||
props.placeholder && !props.value
|
||||
? props.placeholder
|
||||
: `${inputValue.formatted ? inputValue.formatted : ''}${
|
||||
props.suffix ? ' ' + props.suffix : ''
|
||||
}`
|
||||
}
|
||||
onFocus={onInputFocus}
|
||||
onChange={(e) => onInputChange(e.target.value)}
|
||||
onBlur={props.onBlur}
|
||||
|
||||
@ -86,6 +86,7 @@ export const Action = ({
|
||||
const convertToBaseCurrency = useStore((s) => s.convertToBaseCurrency)
|
||||
const findUserDebt = useStore((s) => s.findUserDebt)
|
||||
const enableAnimations = useStore((s) => s.enableAnimations)
|
||||
const baseCurrencyDecimals = useStore((s) => s.baseCurrency.decimals)
|
||||
|
||||
// ------------------
|
||||
// LOCAL STATE
|
||||
@ -135,6 +136,7 @@ export const Action = ({
|
||||
amount * currentAssetPrice, // amount in display currency
|
||||
activeView,
|
||||
relevantBalanceKey,
|
||||
baseCurrencyDecimals,
|
||||
),
|
||||
[
|
||||
activeView,
|
||||
@ -144,6 +146,7 @@ export const Action = ({
|
||||
denom,
|
||||
redBankAssets,
|
||||
relevantBalanceKey,
|
||||
baseCurrencyDecimals,
|
||||
],
|
||||
)
|
||||
|
||||
@ -155,6 +158,7 @@ export const Action = ({
|
||||
0.0,
|
||||
activeView,
|
||||
relevantBalanceKey,
|
||||
baseCurrencyDecimals,
|
||||
),
|
||||
relevantBalanceKey,
|
||||
)
|
||||
@ -311,9 +315,7 @@ export const Action = ({
|
||||
|
||||
const amountUntilDepositCap = currentAsset.depositCap - Number(currentAsset.depositLiquidity)
|
||||
|
||||
const onValueEntered = (newValue: number) => {
|
||||
let microValue = Number(magnify(newValue, decimals)) || 0
|
||||
|
||||
const onValueEntered = (microValue: number) => {
|
||||
if (microValue >= maxUsableAmount) microValue = maxUsableAmount
|
||||
setAmountCallback(Number(formatValue(microValue, 0, 0, false, false, false, false, false)))
|
||||
setCapHit(amount > amountUntilDepositCap && activeView === ViewType.Deposit)
|
||||
|
||||
@ -3,7 +3,7 @@ import classNames from 'classnames'
|
||||
import { Button, DisplayCurrency, NumberInput } from 'components/common'
|
||||
import { findByDenom } from 'functions'
|
||||
import { useAsset } from 'hooks/data'
|
||||
import { formatValue, magnify } from 'libs/parse'
|
||||
import { formatValue } from 'libs/parse'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import useStore from 'store'
|
||||
|
||||
@ -43,9 +43,7 @@ export const TokenInput = (props: Props) => {
|
||||
props.borrowRate !== undefined && styles.isBorrow,
|
||||
])
|
||||
|
||||
const onValueEntered = (newValue: number) => {
|
||||
let microValue = Number(magnify(newValue, asset?.decimals || 0))
|
||||
|
||||
const onValueEntered = (microValue: number) => {
|
||||
if (props.maxAmount !== undefined) {
|
||||
if (microValue >= (props.maxAmount ?? 0)) microValue = props.maxAmount
|
||||
} else {
|
||||
@ -58,9 +56,7 @@ export const TokenInput = (props: Props) => {
|
||||
|
||||
if (!asset) return null
|
||||
|
||||
const maxAmount =
|
||||
(props.maxAmount === undefined ? Number(walletBalance.amount) : props.maxAmount) /
|
||||
10 ** asset.decimals
|
||||
const maxAmount = props.maxAmount === undefined ? Number(walletBalance.amount) : props.maxAmount
|
||||
|
||||
const showGasWarning =
|
||||
props.maxAmount &&
|
||||
@ -74,22 +70,21 @@ export const TokenInput = (props: Props) => {
|
||||
color='quaternary'
|
||||
className={`xxsCaps faded ${styles.maxBtn}`}
|
||||
onClick={() => onValueEntered(maxAmount)}
|
||||
text={`${props.maxAmountLabel}: ${maxAmount}`}
|
||||
text={`${props.maxAmountLabel}: ${maxAmount / 10 ** asset.decimals}`}
|
||||
variant='transparent'
|
||||
/>
|
||||
<div className={styles.input}>
|
||||
<div className={containerClasses}>
|
||||
<NumberInput
|
||||
onChange={onValueEntered}
|
||||
onFocus={() => {}}
|
||||
onBlur={() => {}}
|
||||
minValue={0}
|
||||
maxValue={(props.maxAmount || 0) / 10 ** asset.decimals}
|
||||
value={(props.amount / 10 ** asset.decimals).toString()}
|
||||
maxDecimals={6}
|
||||
maxValue={props.maxAmount || 0}
|
||||
value={props.amount}
|
||||
maxDecimals={asset.decimals}
|
||||
allowNegative={false}
|
||||
suffix={isSingleToken ? ` ${props.input.symbol}` : ''}
|
||||
className={inputClasses}
|
||||
decimals={asset.decimals}
|
||||
/>
|
||||
{!isSingleToken && (
|
||||
<>
|
||||
|
||||
@ -29,7 +29,7 @@ export const ActionsRow = ({ row, type }: Props) => {
|
||||
tr: true,
|
||||
expanded: row.getIsExpanded(),
|
||||
})
|
||||
const assetSymbol = row.original.symbol
|
||||
const assetID = row.original.id
|
||||
|
||||
return (
|
||||
<tr key={row.id} className={trClasses} onClick={() => row.toggleExpanded()}>
|
||||
@ -43,7 +43,7 @@ export const ActionsRow = ({ row, type }: Props) => {
|
||||
window.open(
|
||||
getSwapUrl({
|
||||
baseUrl: appUrl,
|
||||
to: assetSymbol,
|
||||
to: assetID,
|
||||
}),
|
||||
)
|
||||
}}
|
||||
@ -60,14 +60,14 @@ export const ActionsRow = ({ row, type }: Props) => {
|
||||
prefix={<SVG.Deposit />}
|
||||
size='small'
|
||||
text={t('redbank.deposit')}
|
||||
onClick={() => router.push(`/redbank/deposit/${assetSymbol}`)}
|
||||
onClick={() => router.push(`/redbank/deposit/${assetID}`)}
|
||||
/>
|
||||
}
|
||||
tooltip={
|
||||
hasBalance
|
||||
? null
|
||||
: t('redbank.toDepositAssetOnChain', {
|
||||
asset: assetSymbol,
|
||||
asset: assetID,
|
||||
chain: chainInfo?.name,
|
||||
})
|
||||
}
|
||||
@ -78,7 +78,7 @@ export const ActionsRow = ({ row, type }: Props) => {
|
||||
prefix={<SVG.Withdraw />}
|
||||
size='small'
|
||||
text={t('redbank.withdraw')}
|
||||
onClick={() => router.push(`/redbank/withdraw/${assetSymbol}`)}
|
||||
onClick={() => router.push(`/redbank/withdraw/${assetID}`)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
@ -94,7 +94,7 @@ export const ActionsRow = ({ row, type }: Props) => {
|
||||
window.open(
|
||||
getSwapUrl({
|
||||
baseUrl: appUrl,
|
||||
to: assetSymbol,
|
||||
to: assetID,
|
||||
}),
|
||||
)
|
||||
}}
|
||||
@ -112,13 +112,13 @@ export const ActionsRow = ({ row, type }: Props) => {
|
||||
prefix={<SVG.Deposit />}
|
||||
size='small'
|
||||
text={t('common.repay')}
|
||||
onClick={() => router.push(`/redbank/repay/${assetSymbol}`)}
|
||||
onClick={() => router.push(`/redbank/repay/${assetID}`)}
|
||||
/>
|
||||
}
|
||||
tooltip={
|
||||
!hasBalance
|
||||
? t('redbank.noFundsForRepay', {
|
||||
symbol: assetSymbol,
|
||||
symbol: assetID,
|
||||
})
|
||||
: null
|
||||
}
|
||||
@ -134,7 +134,7 @@ export const ActionsRow = ({ row, type }: Props) => {
|
||||
disabled={row.original.marketLiquidity === '0' || hasNeverDeposited}
|
||||
size='small'
|
||||
text={t('common.borrow')}
|
||||
onClick={() => router.push(`/redbank/borrow/${assetSymbol}`)}
|
||||
onClick={() => router.push(`/redbank/borrow/${assetID}`)}
|
||||
/>
|
||||
}
|
||||
tooltip={
|
||||
|
||||
@ -15,9 +15,21 @@
|
||||
background-image: $colorGradientATOM;
|
||||
}
|
||||
|
||||
&.JUNO {
|
||||
background-image: $colorGradientJUNO;
|
||||
}
|
||||
|
||||
&.axlUSDC {
|
||||
background-image: $colorGradientAxlUSDC;
|
||||
}
|
||||
|
||||
&.axlWBTC {
|
||||
background-image: $colorGradientAxlWBTC;
|
||||
}
|
||||
|
||||
&.axlWETH {
|
||||
background-image: $colorGradientAxlWETH;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
|
||||
@ -19,7 +19,7 @@ export const useBorrowColumns = () => {
|
||||
header: '',
|
||||
cell: (info) => (
|
||||
<div
|
||||
className={`${styles.color} ${styles[info.row.original.symbol]} ${
|
||||
className={`${styles.color} ${styles[info.row.original.id]} ${
|
||||
info.row.getIsExpanded() ? styles.expanded : ''
|
||||
}`}
|
||||
/>
|
||||
@ -34,7 +34,7 @@ export const useBorrowColumns = () => {
|
||||
</div>
|
||||
),
|
||||
}),
|
||||
columnHelper.accessor('name', {
|
||||
columnHelper.accessor('symbol', {
|
||||
enableSorting: enableSorting,
|
||||
header: () => (
|
||||
<TextTooltip text={t('common.asset')} tooltip={t('redbank.tooltips.borrow.assets')} />
|
||||
@ -42,8 +42,8 @@ export const useBorrowColumns = () => {
|
||||
id: 'name',
|
||||
cell: (info) => (
|
||||
<>
|
||||
<p className='m'>{info.row.original.symbol}</p>
|
||||
<p className='s faded'>{info.getValue()}</p>
|
||||
<p className='m'>{info.getValue()}</p>
|
||||
<p className='s faded'>{info.row.original.name}</p>
|
||||
</>
|
||||
),
|
||||
}),
|
||||
|
||||
@ -15,6 +15,10 @@
|
||||
background-image: $colorGradientATOM;
|
||||
}
|
||||
|
||||
&.JUNO {
|
||||
background-image: $colorGradientJUNO;
|
||||
}
|
||||
|
||||
&.axlUSDC {
|
||||
background-image: $colorGradientAxlUSDC;
|
||||
}
|
||||
@ -22,6 +26,14 @@
|
||||
&.stATOM {
|
||||
background-image: $colorGradientStATOM;
|
||||
}
|
||||
|
||||
&.axlWBTC {
|
||||
background-image: $colorGradientAxlWBTC;
|
||||
}
|
||||
|
||||
&.axlWETH {
|
||||
background-image: $colorGradientAxlWETH;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
|
||||
@ -23,7 +23,7 @@ export const useDepositColumns = () => {
|
||||
header: '',
|
||||
cell: (info) => (
|
||||
<div
|
||||
className={`${styles.color} ${styles[info.row.original.symbol]} ${
|
||||
className={`${styles.color} ${styles[info.row.original.id]} ${
|
||||
info.row.getIsExpanded() ? styles.expanded : ''
|
||||
}`}
|
||||
/>
|
||||
@ -38,7 +38,7 @@ export const useDepositColumns = () => {
|
||||
</div>
|
||||
),
|
||||
}),
|
||||
columnHelper.accessor('name', {
|
||||
columnHelper.accessor('symbol', {
|
||||
enableSorting: enableSorting,
|
||||
header: () => (
|
||||
<TextTooltip text={t('common.asset')} tooltip={t('redbank.tooltips.deposit.assets')} />
|
||||
@ -46,8 +46,8 @@ export const useDepositColumns = () => {
|
||||
id: 'name',
|
||||
cell: (info) => (
|
||||
<>
|
||||
<p className='m'>{info.row.original.symbol}</p>
|
||||
<p className='s faded'>{info.getValue()}</p>
|
||||
<p className='m'>{info.getValue()}</p>
|
||||
<p className='s faded'>{info.row.original.name}</p>
|
||||
</>
|
||||
),
|
||||
}),
|
||||
|
||||
@ -23,11 +23,11 @@ import styles from './RedbankAction.module.scss'
|
||||
|
||||
interface Props {
|
||||
activeView: ViewType
|
||||
symbol: string
|
||||
id: string
|
||||
}
|
||||
|
||||
export const RedbankAction = React.memo(
|
||||
({ activeView, symbol }: Props) => {
|
||||
({ activeView, id }: Props) => {
|
||||
// ------------------
|
||||
// EXTERNAL HOOKS
|
||||
// ------------------
|
||||
@ -62,8 +62,9 @@ export const RedbankAction = React.memo(
|
||||
// VARIABLES
|
||||
// ------------------
|
||||
const assets = [...whitelistedAssets, ...otherAssets]
|
||||
const denom = assets.find((asset) => asset.symbol === symbol)?.denom || ''
|
||||
const denom = assets.find((asset) => asset.id === id)?.denom || ''
|
||||
const decimals = lookupDecimals(denom, whitelistedAssets || []) || 6
|
||||
const symbol = assets.find((asset) => asset.id === id)?.symbol || ''
|
||||
const walletBallance = Number(findByDenom(userBalances, denom)?.amount.toString())
|
||||
|
||||
// Read only states
|
||||
@ -191,7 +192,7 @@ export const RedbankAction = React.memo(
|
||||
) => {
|
||||
const finalisedArray: RedBankAsset[] = []
|
||||
for (let i = 0; i < assets.length; i++) {
|
||||
if ((assets[i][key] || 0) > 0) {
|
||||
if (Number(assets[i][key] ?? 0) > 0) {
|
||||
finalisedArray.push(assets[i])
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
import { ChainInfoID, WalletID } from '@marsprotocol/wallet-connector'
|
||||
import { URL_GQL, URL_REST, URL_RPC } from 'constants/env'
|
||||
import atom from 'images/atom.svg'
|
||||
import axlwbtc from 'images/axlwbtc.svg'
|
||||
import axlweth from 'images/axlweth.svg'
|
||||
import juno from 'images/juno.svg'
|
||||
import mars from 'images/mars.svg'
|
||||
import osmo from 'images/osmo.svg'
|
||||
@ -10,22 +12,45 @@ export const ASSETS: { [denom: string]: Asset } = {
|
||||
osmo: {
|
||||
symbol: 'OSMO',
|
||||
name: 'Osmosis',
|
||||
id: 'OSMO',
|
||||
denom: 'uosmo',
|
||||
color: colors.osmo,
|
||||
decimals: 6,
|
||||
logo: osmo,
|
||||
decimals: 6,
|
||||
poolId: 678,
|
||||
},
|
||||
atom: {
|
||||
symbol: 'ATOM',
|
||||
name: 'Atom',
|
||||
id: 'ATOM',
|
||||
denom: 'ibc/27394FB092D2ECCD56123C74F36E4C1F926001CEADA9CA97EA622B25F41E5EB2',
|
||||
color: colors.atom,
|
||||
logo: atom,
|
||||
decimals: 6,
|
||||
},
|
||||
axlwbtc: {
|
||||
symbol: 'WBTC.axl',
|
||||
id: 'axlWBTC',
|
||||
name: 'Axelar Wrapped Bitcoin',
|
||||
denom: 'ibc/1480B8FD20AD5FCAE81EA87584D269547DD4D436843C1D20F15E00EB64743EF4',
|
||||
color: colors.axlwbtc,
|
||||
logo: axlwbtc,
|
||||
decimals: 8,
|
||||
poolId: 43,
|
||||
},
|
||||
axlweth: {
|
||||
symbol: 'WETH.axl',
|
||||
id: 'axlWETH',
|
||||
name: 'Axelar Wrapped Ethereum',
|
||||
denom: 'ibc/1DCC8A6CB5689018431323953344A9F6CC4D0BFB261E88C9F7777372C10CD076',
|
||||
color: colors.axlweth,
|
||||
logo: axlweth,
|
||||
decimals: 18,
|
||||
poolId: 42,
|
||||
},
|
||||
juno: {
|
||||
symbol: 'JUNO',
|
||||
id: 'JUNO',
|
||||
name: 'Juno',
|
||||
denom: 'ibc/46B44899322F3CD854D2D46DEEF881958467CDD4B3B10086DA49296BBED94BED',
|
||||
color: colors.juno,
|
||||
@ -74,9 +99,17 @@ export const NETWORK_CONFIG: NetworkConfig = {
|
||||
},
|
||||
assets: {
|
||||
base: ASSETS.osmo,
|
||||
whitelist: [ASSETS.osmo, ASSETS.atom, ASSETS.juno],
|
||||
whitelist: [ASSETS.osmo, ASSETS.atom, ASSETS.juno, ASSETS.axlwbtc, ASSETS.axlweth],
|
||||
other: [OTHER_ASSETS.usd, OTHER_ASSETS.mars],
|
||||
currencies: [OTHER_ASSETS.usd, ASSETS.osmo, ASSETS.atom, ASSETS.juno, OTHER_ASSETS.mars],
|
||||
currencies: [
|
||||
OTHER_ASSETS.usd,
|
||||
ASSETS.osmo,
|
||||
ASSETS.atom,
|
||||
ASSETS.axlweth,
|
||||
ASSETS.juno,
|
||||
ASSETS.axlwbtc,
|
||||
OTHER_ASSETS.mars,
|
||||
],
|
||||
},
|
||||
displayCurrency: OTHER_ASSETS.usd,
|
||||
appUrl: 'https://testnet.osmosis.zone',
|
||||
|
||||
@ -2,6 +2,8 @@ import { ChainInfoID, WalletID } from '@marsprotocol/wallet-connector'
|
||||
import { URL_GQL, URL_REST, URL_RPC } from 'constants/env'
|
||||
import atom from 'images/atom.svg'
|
||||
import axlusdc from 'images/axlusdc.svg'
|
||||
import axlwbtc from 'images/axlwbtc.svg'
|
||||
import axlweth from 'images/axlweth.svg'
|
||||
import mars from 'images/mars.svg'
|
||||
import osmo from 'images/osmo.svg'
|
||||
import statom from 'images/statom.svg'
|
||||
@ -11,22 +13,43 @@ export const ASSETS: { [denom: string]: Asset } = {
|
||||
osmo: {
|
||||
symbol: 'OSMO',
|
||||
name: 'Osmosis',
|
||||
id: 'OSMO',
|
||||
denom: 'uosmo',
|
||||
color: colors.osmo,
|
||||
decimals: 6,
|
||||
logo: osmo,
|
||||
decimals: 6,
|
||||
},
|
||||
axlusdc: {
|
||||
symbol: 'axlUSDC',
|
||||
symbol: 'USDC.axl',
|
||||
name: 'Axelar USDC',
|
||||
id: 'axlUSDC',
|
||||
denom: 'ibc/D189335C6E4A68B513C10AB227BF1C1D38C746766278BA3EEB4FB14124F1D858',
|
||||
color: colors.axlusdc,
|
||||
logo: axlusdc,
|
||||
decimals: 6,
|
||||
logo: axlusdc,
|
||||
},
|
||||
axlwbtc: {
|
||||
symbol: 'WBTC.axl',
|
||||
id: 'axlWBTC',
|
||||
name: 'Axelar Wrapped Bitcoin',
|
||||
denom: 'ibc/D1542AA8762DB13087D8364F3EA6509FD6F009A34F00426AF9E4F9FA85CBBF1F',
|
||||
color: colors.axlwbtc,
|
||||
logo: axlwbtc,
|
||||
decimals: 8,
|
||||
},
|
||||
axlweth: {
|
||||
symbol: 'WETH.axl',
|
||||
id: 'axlWETH',
|
||||
name: 'Axelar Wrapped Ethereum',
|
||||
denom: 'ibc/EA1D43981D5C9A1C4AAEA9C23BB1D4FA126BA9BC7020A25E0AE4AA841EA25DC5',
|
||||
color: colors.axlweth,
|
||||
logo: axlweth,
|
||||
decimals: 18,
|
||||
},
|
||||
atom: {
|
||||
symbol: 'ATOM',
|
||||
name: 'Atom',
|
||||
id: 'ATOM',
|
||||
denom: 'ibc/27394FB092D2ECCD56123C74F36E4C1F926001CEADA9CA97EA622B25F41E5EB2',
|
||||
color: colors.atom,
|
||||
logo: atom,
|
||||
@ -35,6 +58,7 @@ export const ASSETS: { [denom: string]: Asset } = {
|
||||
statom: {
|
||||
symbol: 'stATOM',
|
||||
name: 'Stride Atom',
|
||||
id: 'stATOM',
|
||||
denom: 'ibc/C140AFD542AE77BD7DCC83F13FDD8C5E5BB8C4929785E6EC2F4C636F98F17901',
|
||||
color: colors.statom,
|
||||
logo: statom,
|
||||
@ -81,13 +105,21 @@ export const NETWORK_CONFIG: NetworkConfig = {
|
||||
},
|
||||
assets: {
|
||||
base: ASSETS.osmo,
|
||||
whitelist: [ASSETS.osmo, ASSETS.atom, ASSETS.axlusdc, ASSETS.statom],
|
||||
whitelist: [
|
||||
ASSETS.osmo,
|
||||
ASSETS.atom,
|
||||
ASSETS.axlusdc,
|
||||
ASSETS.axlwbtc,
|
||||
ASSETS.axlweth,
|
||||
ASSETS.statom,
|
||||
],
|
||||
other: [OTHER_ASSETS.usd, OTHER_ASSETS.mars],
|
||||
currencies: [
|
||||
OTHER_ASSETS.usd,
|
||||
ASSETS.osmo,
|
||||
ASSETS.atom,
|
||||
ASSETS.axlusdc,
|
||||
ASSETS.axlweth,
|
||||
ASSETS.axlwbtc,
|
||||
ASSETS.statom,
|
||||
OTHER_ASSETS.mars,
|
||||
],
|
||||
@ -130,7 +162,7 @@ export const VAULT_CONFIGS: Vault[] = [
|
||||
},
|
||||
{
|
||||
address: 'osmo1jfmwayj8jqp9tfy4v4eks5c2jpnqdumn8x8xvfllng0wfes770qqp7jl4j',
|
||||
name: { name: 'OSMO-axlUSDC LP', unlockDuration: 14, unlockTimeframe: 'days' },
|
||||
name: { name: 'OSMO-USDC.axl LP', unlockDuration: 14, unlockTimeframe: 'days' },
|
||||
denoms: {
|
||||
primary: 'uosmo',
|
||||
secondary: 'ibc/D189335C6E4A68B513C10AB227BF1C1D38C746766278BA3EEB4FB14124F1D858',
|
||||
@ -138,12 +170,12 @@ export const VAULT_CONFIGS: Vault[] = [
|
||||
},
|
||||
symbols: {
|
||||
primary: 'OSMO',
|
||||
secondary: 'axlUSDC',
|
||||
secondary: 'USDC.axl',
|
||||
},
|
||||
color: '#478edc',
|
||||
lockup: 86400 * 14,
|
||||
provider: 'Apollo vault',
|
||||
description: { maxLeverage: 2.86, lpName: 'OSMO-axlUSDC' },
|
||||
description: { maxLeverage: 2.86, lpName: 'OSMO-USDC.axl' },
|
||||
ltv: {
|
||||
max: 0.645,
|
||||
contract: 0.65,
|
||||
|
||||
@ -4,8 +4,6 @@ export const FORUM_URL = 'https://forum.marsprotocol.io/'
|
||||
/* asset:unit */
|
||||
export const MARS_SYMBOL = 'MARS'
|
||||
export const MARS_DECIMALS = 6
|
||||
export const USDC_SYMBOL = 'axlUSDC'
|
||||
export const STATOM_SYMBOL = 'stATOM'
|
||||
|
||||
/* borrow capacity */
|
||||
export const DEFAULT_SLIPPAGE = 0.01
|
||||
|
||||
@ -9,9 +9,11 @@ export const getSwapUrl = (options: Options) => {
|
||||
let fromName = from
|
||||
let toName = to
|
||||
|
||||
if (!fromName) fromName = 'ATOM'
|
||||
if (fromName === to) fromName = 'OSMO'
|
||||
if (!fromName) fromName = 'OSMO'
|
||||
if (fromName === to) fromName = 'ATOM'
|
||||
if (to === 'axlUSDC') toName = 'USDC'
|
||||
if (to === 'axlWBTC') toName = 'WBTC'
|
||||
if (to === 'axlWETH') toName = 'ETH'
|
||||
|
||||
return `${baseUrl}?from=${fromName}&to=${toName}`
|
||||
}
|
||||
|
||||
@ -8,14 +8,14 @@ export const getDepositDebtQuery = (
|
||||
const wasmQueries = whitelistedAssets?.map((asset: Asset) => {
|
||||
let query = ''
|
||||
const denom = asset.denom
|
||||
const symbol = asset.symbol
|
||||
const id = asset.id
|
||||
|
||||
if (!denom) return query
|
||||
|
||||
const totalCollateralScaled =
|
||||
marketInfo.find((market) => market.denom === asset.denom)?.collateral_total_scaled || '0'
|
||||
|
||||
const depositMarketKey = `${symbol}Deposits`
|
||||
const depositMarketKey = `${id}Deposits`
|
||||
query =
|
||||
query +
|
||||
getContractQuery(
|
||||
@ -32,7 +32,7 @@ export const getDepositDebtQuery = (
|
||||
|
||||
const totalDebtScaled =
|
||||
marketInfo.find((market) => market.denom === asset.denom)?.debt_total_scaled || '0'
|
||||
const debtMarketKey = `${symbol}Debt`
|
||||
const debtMarketKey = `${id}Debt`
|
||||
query =
|
||||
query +
|
||||
getContractQuery(
|
||||
|
||||
@ -18,22 +18,22 @@ export const getRedbankQuery = (
|
||||
const wasmQueries = whitelistedAssets?.map((asset: Asset) => {
|
||||
let query = ''
|
||||
const denom = asset.denom
|
||||
const symbol = asset.symbol
|
||||
const id = asset.id
|
||||
const contract_addr = asset.contract_addr
|
||||
if (!denom) return query
|
||||
|
||||
// Load cw 20 balance
|
||||
if (contract_addr) {
|
||||
query = getContractQuery(symbol, contract_addr, getBalanceQuery(redBankContractAddress || ''))
|
||||
query = getContractQuery(id, contract_addr, getBalanceQuery(redBankContractAddress || ''))
|
||||
}
|
||||
|
||||
// Load market info
|
||||
const marketQuery = getMarketQuery(denom)
|
||||
|
||||
const marketKey = `${symbol}Market`
|
||||
const marketKey = `${id}Market`
|
||||
query = query + getContractQuery(marketKey, redBankContractAddress || '', marketQuery)
|
||||
|
||||
const incentiveKey = `${symbol}MarketIncentive`
|
||||
const incentiveKey = `${id}MarketIncentive`
|
||||
query =
|
||||
query +
|
||||
getContractQuery(
|
||||
|
||||
@ -12,6 +12,7 @@ describe('produceUpdatedAssetData', () => {
|
||||
100,
|
||||
ViewType.Deposit,
|
||||
'borrowBalanceBaseCurrency',
|
||||
6,
|
||||
)
|
||||
expect(assets.length).toBe(1)
|
||||
expect(assets[0]).toEqual({
|
||||
@ -27,6 +28,7 @@ describe('produceUpdatedAssetData', () => {
|
||||
100,
|
||||
ViewType.Deposit,
|
||||
'borrowBalanceBaseCurrency',
|
||||
6,
|
||||
)
|
||||
expect(assets.length).toBe(2)
|
||||
expect(assets[1]).toEqual({
|
||||
@ -42,6 +44,7 @@ describe('produceUpdatedAssetData', () => {
|
||||
100,
|
||||
ViewType.Deposit,
|
||||
'borrowBalanceBaseCurrency',
|
||||
6,
|
||||
)
|
||||
expect(assets.length).toBe(2)
|
||||
expect(assets[1]).toEqual({
|
||||
@ -59,6 +62,7 @@ describe('produceUpdatedAssetData', () => {
|
||||
50,
|
||||
ViewType.Deposit,
|
||||
'depositBalanceBaseCurrency',
|
||||
6,
|
||||
)
|
||||
expect(assets.length).toBe(1)
|
||||
expect(assets[0]).toEqual({
|
||||
@ -74,6 +78,7 @@ describe('produceUpdatedAssetData', () => {
|
||||
100,
|
||||
ViewType.Deposit,
|
||||
'depositBalanceBaseCurrency',
|
||||
6,
|
||||
)
|
||||
expect(assets.length).toBe(1)
|
||||
expect(assets[0]).toEqual({
|
||||
@ -92,6 +97,7 @@ describe('produceUpdatedAssetData', () => {
|
||||
50,
|
||||
ViewType.Borrow,
|
||||
'borrowBalanceBaseCurrency',
|
||||
6,
|
||||
)
|
||||
expect(assets.length).toBe(1)
|
||||
expect(assets[0]).toEqual({
|
||||
@ -107,6 +113,7 @@ describe('produceUpdatedAssetData', () => {
|
||||
100,
|
||||
ViewType.Borrow,
|
||||
'borrowBalanceBaseCurrency',
|
||||
6,
|
||||
)
|
||||
expect(assets.length).toBe(1)
|
||||
expect(assets[0]).toEqual({
|
||||
@ -125,6 +132,7 @@ describe('produceUpdatedAssetData', () => {
|
||||
100,
|
||||
ViewType.Repay,
|
||||
'borrowBalanceBaseCurrency',
|
||||
6,
|
||||
)
|
||||
expect(assets.length).toBe(1)
|
||||
expect(assets[0]).toEqual({
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { demagnify } from 'libs/parse'
|
||||
import { ViewType } from 'types/enums'
|
||||
|
||||
export const produceUpdatedAssetData = (
|
||||
@ -7,6 +8,7 @@ export const produceUpdatedAssetData = (
|
||||
updateAmount: number,
|
||||
activeView: ViewType,
|
||||
key: 'depositBalanceBaseCurrency' | 'borrowBalanceBaseCurrency',
|
||||
baseCurrencyDecimals: number,
|
||||
) => {
|
||||
const alreadyPresent = assetData.some((asset: RedBankAsset) => asset.denom === denom)
|
||||
// For first use, when the user has no borrow balance yet and this list will be empty
|
||||
@ -21,6 +23,8 @@ export const produceUpdatedAssetData = (
|
||||
}
|
||||
|
||||
return assetData.map((asset) => {
|
||||
const additionalDecimals = asset.decimals - baseCurrencyDecimals
|
||||
const amountAdjustedForDecimals = demagnify(updateAmount, additionalDecimals)
|
||||
const newAsset = { ...asset }
|
||||
const assetbaseCurrencyBalance = asset[key] || 0
|
||||
let updatedAssetbaseCurrencyBalance = asset[key]
|
||||
@ -29,8 +33,8 @@ export const produceUpdatedAssetData = (
|
||||
// if we are repaaying or redeeming, we decrease the amount
|
||||
updatedAssetbaseCurrencyBalance =
|
||||
activeView === ViewType.Borrow || activeView === ViewType.Deposit
|
||||
? assetbaseCurrencyBalance + updateAmount
|
||||
: assetbaseCurrencyBalance - updateAmount
|
||||
? assetbaseCurrencyBalance + amountAdjustedForDecimals
|
||||
: assetbaseCurrencyBalance - amountAdjustedForDecimals
|
||||
}
|
||||
newAsset[key] = updatedAssetbaseCurrencyBalance
|
||||
return newAsset
|
||||
|
||||
@ -15,6 +15,10 @@ export interface DepositAndDebtData {
|
||||
JUNODebt: string
|
||||
axlUSDCDeposits: string
|
||||
axlUSDCDebt: string
|
||||
axlWBTCDeposits: string
|
||||
axlWBTCDebt: string
|
||||
axlWETHDeposits: string
|
||||
axlWETHDebt: string
|
||||
stATOMDeposits: string
|
||||
stATOMDebt: string
|
||||
}
|
||||
|
||||
@ -32,7 +32,7 @@ export const useMarsOracle = () => {
|
||||
}`
|
||||
|
||||
const querySegment = `
|
||||
${whitelistAsset.symbol}: contractQuery(contractAddress: "${oracleAddress}", query: {
|
||||
${whitelistAsset.id}: contractQuery(contractAddress: "${oracleAddress}", query: {
|
||||
price: ${asset}
|
||||
})
|
||||
`
|
||||
|
||||
@ -17,7 +17,7 @@ i18next
|
||||
backend: {
|
||||
crossDomain: true,
|
||||
loadPath() {
|
||||
return 'https://raw.githubusercontent.com/mars-protocol/translations/main/{{lng}}.json'
|
||||
return 'https://raw.githubusercontent.com/mars-protocol/translations/develop/{{lng}}.json'
|
||||
},
|
||||
},
|
||||
react: {
|
||||
|
||||
23
src/images/axlwbtc.svg
Normal file
23
src/images/axlwbtc.svg
Normal file
@ -0,0 +1,23 @@
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path fill="#FFFFFF" d="M23.6,14.9C22,21.3,15.5,25.2,9,23.6C2.6,22-1.3,15.5,0.3,9.1C1.9,2.7,8.4-1.2,14.8,0.4
|
||||
C21.3,2,25.2,8.5,23.6,14.9L23.6,14.9L23.6,14.9z"/>
|
||||
<path id="Shape" fill="#5A5564" d="M19.6,5l-0.7,0.7c3.3,3.6,3.3,9,0,12.6l0.7,0.7C23.2,15,23.2,9,19.6,5L19.6,5z"/>
|
||||
<path id="Shape-2" fill="#5A5564" d="M5.7,5.1c3.6-3.3,9-3.3,12.6,0L19,4.4C15,0.8,9,0.8,5,4.4L5.7,5.1z"/>
|
||||
<path id="Shape-3" fill="#5A5564" d="M5.1,18.3c-3.3-3.6-3.3-9,0-12.6L4.4,5C0.8,9,0.8,15,4.4,19L5.1,18.3z"/>
|
||||
<path id="Shape-4" fill="#5A5564" d="M18.3,18.9c-3.6,3.3-9,3.3-12.6,0L5,19.6c3.9,3.6,10,3.6,13.9,0L18.3,18.9z"/>
|
||||
<path id="Shape-5" fill="#F09242" d="M16.2,9.8c-0.1-1.4-1.3-1.8-2.8-2V5.9h-1.2v1.9c-0.3,0-0.6,0-0.9,0V5.9h-1.2v1.9H7.8v1.2
|
||||
c0,0,0.9,0,0.8,0c0.3,0,0.6,0.2,0.7,0.5v5.2c0,0.1-0.1,0.2-0.1,0.3c-0.1,0.1-0.2,0.1-0.3,0.1c0,0-0.8,0-0.8,0l-0.2,1.4h2.3v1.9
|
||||
h1.2v-1.9h0.9v1.9h1.2v-1.9c2-0.1,3.3-0.6,3.5-2.4c0.1-1.5-0.6-2.1-1.7-2.4C15.8,11.4,16.3,10.8,16.2,9.8z M14.5,13.9
|
||||
c0,1.4-2.5,1.3-3.3,1.3v-2.6C12.1,12.6,14.5,12.4,14.5,13.9z M14,10.3c0,1.3-2.1,1.2-2.7,1.2V9.2C11.9,9.2,14,9,14,10.3z"/>
|
||||
<path id="Shape-6" fill="#282138" d="M12,24C5.4,24,0,18.6,0,12S5.4,0,12,0c6.6,0,12,5.4,12,12C24,18.6,18.6,24,12,24
|
||||
C12,24,12,24,12,24z M12,0.9c-6.1,0-11.1,5-11,11.1c0,6.1,5,11.1,11.1,11c6.1,0,11-5,11-11.1C23.1,5.9,18.1,0.9,12,0.9
|
||||
C12,0.9,12,0.9,12,0.9z"/>
|
||||
<path fill="#FFFFFF" d="M20,24c2.2,0,4-1.8,4-4s-1.8-4-4-4s-4,1.8-4,4S17.8,24,20,24z"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M20,23.5c1.9,0,3.5-1.6,3.5-3.5s-1.6-3.5-3.5-3.5s-3.5,1.6-3.5,3.5
|
||||
S18.1,23.5,20,23.5z M24,20c0,2.2-1.8,4-4,4s-4-1.8-4-4s1.8-4,4-4S24,17.8,24,20z"/>
|
||||
<path d="M20.3,19.6l1.4-1.4l-0.5-0.5L20,18.8l-1.1-1.1l-0.5,0.5l1.4,1.4c0.1,0.1,0.2,0.1,0.3,0.1S20.2,19.7,20.3,19.6L20.3,19.6z"
|
||||
/>
|
||||
<path d="M22.3,21.1L21.2,20l1.1-1.1l-0.5-0.5l-1.4,1.4c-0.1,0.1-0.1,0.4,0,0.5l1.4,1.4L22.3,21.1z"/>
|
||||
<path d="M20,21.2l1.1,1.1l0.5-0.5l-1.4-1.4c-0.1-0.1-0.4-0.1-0.5,0l-1.4,1.4l0.5,0.5L20,21.2L20,21.2z"/>
|
||||
<path d="M19.6,20.3c0.1-0.1,0.1-0.2,0.1-0.3c0-0.1,0-0.2-0.1-0.3l-1.4-1.4l-0.5,0.5l1.1,1.1l-1.1,1.1l0.5,0.5L19.6,20.3z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
18
src/images/axlweth.svg
Normal file
18
src/images/axlweth.svg
Normal file
@ -0,0 +1,18 @@
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path fill="#FFFFFF" d="M23.6,14.9C22,21.3,15.5,25.2,9,23.6C2.6,22-1.3,15.5,0.3,9.1C1.9,2.7,8.4-1.2,14.8,0.4
|
||||
C21.3,2,25.2,8.5,23.6,14.9L23.6,14.9L23.6,14.9z"/>
|
||||
<polygon fill="#343434" points="11.9,1.2 11.8,1.7 11.8,15.9 11.9,16.1 18.5,12.2"/>
|
||||
<polygon fill="#8C8C8C" points="11.9,1.2 5.3,12.2 11.9,16.1 11.9,9.2"/>
|
||||
<polygon fill="#3C3C3B" points="11.9,17.3 11.8,17.4 11.8,22.5 11.9,22.7 18.5,13.4"/>
|
||||
<polygon fill="#8C8C8C" points="11.9,22.7 11.9,17.3 5.3,13.4"/>
|
||||
<polygon fill="#141414" points="11.9,16.1 18.5,12.2 11.9,9.2"/>
|
||||
<polygon fill="#393939" points="5.3,12.2 11.9,16.1 11.9,9.2"/>
|
||||
<path fill="#FFFFFF" d="M20,24c2.2,0,4-1.8,4-4s-1.8-4-4-4s-4,1.8-4,4S17.8,24,20,24z"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M20,23.5c1.9,0,3.5-1.6,3.5-3.5s-1.6-3.5-3.5-3.5s-3.5,1.6-3.5,3.5
|
||||
S18.1,23.5,20,23.5z M24,20c0,2.2-1.8,4-4,4s-4-1.8-4-4s1.8-4,4-4S24,17.8,24,20z"/>
|
||||
<path d="M20.3,19.6l1.4-1.4l-0.5-0.5L20,18.8l-1.1-1.1l-0.5,0.5l1.4,1.4c0.1,0.1,0.2,0.1,0.3,0.1S20.2,19.7,20.3,19.6L20.3,19.6z"
|
||||
/>
|
||||
<path d="M22.3,21.1L21.2,20l1.1-1.1l-0.5-0.5l-1.4,1.4c-0.1,0.1-0.1,0.4,0,0.5l1.4,1.4L22.3,21.1z"/>
|
||||
<path d="M20,21.2l1.1,1.1l0.5-0.5l-1.4-1.4c-0.1-0.1-0.4-0.1-0.5,0l-1.4,1.4l0.5,0.5L20,21.2L20,21.2z"/>
|
||||
<path d="M19.6,20.3c0.1-0.1,0.1-0.2,0.1-0.3c0-0.1,0-0.2-0.1-0.3l-1.4-1.4l-0.5,0.5l1.1,1.1l-1.1,1.1l0.5,0.5L19.6,20.3z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@ -7,7 +7,7 @@ import { ViewType } from 'types/enums'
|
||||
|
||||
import { countDecimals } from './math'
|
||||
|
||||
BigNumber.config({ EXPONENTIAL_AT: [-18, 20] })
|
||||
BigNumber.config({ EXPONENTIAL_AT: [-24, 20] })
|
||||
|
||||
type Formatter = (amount: string, symbol: string, decimals: number) => string
|
||||
|
||||
@ -16,9 +16,9 @@ const rm = BigNumber.ROUND_HALF_CEIL
|
||||
export const dp = (decimals: number, symbol?: string): number => decimals
|
||||
|
||||
export const lookup = (amount: number, symbol: string, decimals: number): number => {
|
||||
const value = symbol ? new BigNumber(amount).div(10 ** decimals) : new BigNumber(amount)
|
||||
const value = new BigNumber(amount)
|
||||
|
||||
return value.dp(dp(decimals, symbol), rm).toNumber()
|
||||
return demagnify(value.toNumber(), decimals)
|
||||
}
|
||||
|
||||
export const findAssetByDenom = (denom: string, assets: Asset[]) =>
|
||||
@ -71,8 +71,13 @@ export const toAmount = (value: string, decimals: number): string =>
|
||||
.toString()
|
||||
: '0'
|
||||
|
||||
export const magnify = (value: number, decimals: number): BigNumber | number =>
|
||||
value ? new BigNumber(value).times(10 ** decimals).integerValue() : 0
|
||||
export const magnify = (value: number, decimals: number) => {
|
||||
return value === 0 ? 0 : new BigNumber(value).shiftedBy(decimals).toNumber()
|
||||
}
|
||||
|
||||
export const demagnify = (amount: number, decimals: number) => {
|
||||
return amount === 0 ? 0 : new BigNumber(amount).shiftedBy(-1 * decimals).toNumber()
|
||||
}
|
||||
|
||||
const addLeadingZero = (number: number | string): string => {
|
||||
return `${number.toString().length === 1 ? '0' : ''}${number.toString()}`
|
||||
|
||||
@ -19,6 +19,7 @@ export const redBankAssets: RedBankAsset[] = [
|
||||
walletBalance: '100',
|
||||
borrowEnabled: true,
|
||||
depositEnabled: true,
|
||||
id: 'ATOM',
|
||||
},
|
||||
{
|
||||
borrowRate: 30,
|
||||
@ -40,5 +41,6 @@ export const redBankAssets: RedBankAsset[] = [
|
||||
walletBalance: '100',
|
||||
borrowEnabled: true,
|
||||
depositEnabled: true,
|
||||
id: 'OSMO',
|
||||
},
|
||||
]
|
||||
|
||||
@ -1,13 +1,12 @@
|
||||
import { RedbankAction } from 'components/redbank'
|
||||
import { useRouter } from 'next/router'
|
||||
import React from 'react'
|
||||
import { ViewType } from 'types/enums'
|
||||
|
||||
const Borrow = () => {
|
||||
const router = useRouter()
|
||||
const symbol = router.query.symbol as string
|
||||
const id = router.query.id as string
|
||||
|
||||
return <RedbankAction activeView={ViewType.Borrow} symbol={symbol} />
|
||||
return <RedbankAction activeView={ViewType.Borrow} id={id} />
|
||||
}
|
||||
|
||||
export default Borrow
|
||||
@ -1,13 +1,12 @@
|
||||
import { RedbankAction } from 'components/redbank'
|
||||
import { useRouter } from 'next/router'
|
||||
import React from 'react'
|
||||
import { ViewType } from 'types/enums'
|
||||
|
||||
const Withdraw = () => {
|
||||
const router = useRouter()
|
||||
const symbol = router.query.symbol as string
|
||||
const id = router.query.id as string
|
||||
|
||||
return <RedbankAction activeView={ViewType.Deposit} symbol={symbol} />
|
||||
return <RedbankAction activeView={ViewType.Deposit} id={id} />
|
||||
}
|
||||
|
||||
export default Withdraw
|
||||
@ -1,13 +1,12 @@
|
||||
import { RedbankAction } from 'components/redbank'
|
||||
import { useRouter } from 'next/router'
|
||||
import React from 'react'
|
||||
import { ViewType } from 'types/enums'
|
||||
|
||||
const Repay = () => {
|
||||
const router = useRouter()
|
||||
const symbol = router.query.symbol as string
|
||||
const id = router.query.id as string
|
||||
|
||||
return <RedbankAction activeView={ViewType.Repay} symbol={symbol} />
|
||||
return <RedbankAction activeView={ViewType.Repay} id={id} />
|
||||
}
|
||||
|
||||
export default Repay
|
||||
@ -1,13 +1,12 @@
|
||||
import { RedbankAction } from 'components/redbank'
|
||||
import { useRouter } from 'next/router'
|
||||
import React from 'react'
|
||||
import { ViewType } from 'types/enums'
|
||||
|
||||
const Withdraw = () => {
|
||||
const router = useRouter()
|
||||
const symbol = router.query.symbol as string
|
||||
const id = router.query.id as string
|
||||
|
||||
return <RedbankAction activeView={ViewType.Withdraw} symbol={symbol} />
|
||||
return <RedbankAction activeView={ViewType.Withdraw} id={id} />
|
||||
}
|
||||
|
||||
export default Withdraw
|
||||
@ -17,7 +17,6 @@ export interface OraclesSlice {
|
||||
// SETTERS
|
||||
// ------------------
|
||||
setExchangeRatesState: (state: State) => void
|
||||
setExchangeRates: (rates: Coin[]) => void
|
||||
// ------------------
|
||||
// QUERY RELATED
|
||||
// ------------------
|
||||
|
||||
@ -216,12 +216,12 @@ const commonSlice = (
|
||||
if (!whitelistedAssets.length) return
|
||||
|
||||
const depositCoins: Coin[] = whitelistedAssets.map((asset) => ({
|
||||
amount: data.mdwasmkey[`${asset.symbol}Deposits`],
|
||||
amount: data.mdwasmkey[`${asset.id}Deposits`],
|
||||
denom: asset.denom,
|
||||
}))
|
||||
|
||||
const debtCoins: Coin[] = whitelistedAssets.map((asset) => ({
|
||||
amount: data.mdwasmkey[`${asset.symbol}Debt`],
|
||||
amount: data.mdwasmkey[`${asset.id}Debt`],
|
||||
denom: asset.denom,
|
||||
}))
|
||||
|
||||
|
||||
@ -85,7 +85,6 @@ const oraclesSlice = (set: NamedSet<Store>, get: GetState<Store>): OraclesSlice
|
||||
// SETTERS
|
||||
// ------------------
|
||||
setExchangeRatesState: (state: State) => set({ exchangeRatesState: state }),
|
||||
setExchangeRates: (rates: Coin[]) => set({ exchangeRates: rates }),
|
||||
|
||||
// ------------------
|
||||
// QUERY RELATED
|
||||
@ -112,12 +111,20 @@ const oraclesSlice = (set: NamedSet<Store>, get: GetState<Store>): OraclesSlice
|
||||
return
|
||||
}
|
||||
|
||||
const symbol = asset.symbol
|
||||
const exchangeRateResult = wasmQueryResults[`${symbol}`].price || '0.00'
|
||||
const id = asset.id
|
||||
const exchangeRateResult = wasmQueryResults[`${id}`].price || '0.00'
|
||||
const additionalDecimals =
|
||||
asset.decimals > get().baseCurrency.decimals
|
||||
? asset.decimals - get().baseCurrency.decimals
|
||||
: 0
|
||||
// Fix for a LCDClientError object instead of string
|
||||
const exchangeRate: Coin = {
|
||||
denom,
|
||||
amount: typeof exchangeRateResult === 'string' ? exchangeRateResult || '0.00' : '0.00',
|
||||
amount:
|
||||
typeof exchangeRateResult === 'string'
|
||||
? new BigNumber(exchangeRateResult).times(10 ** additionalDecimals).toString() ||
|
||||
'0.00'
|
||||
: '0.00',
|
||||
}
|
||||
if (asset.denom === displayCurrency.denom) {
|
||||
set({
|
||||
|
||||
@ -4,7 +4,7 @@ import { SECONDS_IN_YEAR } from 'constants/timeConstants'
|
||||
import { findByDenom } from 'functions'
|
||||
import { UserDebtData } from 'hooks/queries/useUserDebt'
|
||||
import { UserDepositData } from 'hooks/queries/useUserDeposit'
|
||||
import { lookupDenomBySymbol } from 'libs/parse'
|
||||
import { demagnify, lookupDenomBySymbol } from 'libs/parse'
|
||||
import isEqual from 'lodash.isequal'
|
||||
import { RedBankSlice } from 'store/interfaces/redBank.interface'
|
||||
import { Store } from 'store/interfaces/store.interface'
|
||||
@ -99,18 +99,19 @@ const redBankSlice = (set: NamedSet<Store>, get: GetState<Store>): RedBankSlice
|
||||
{ denom: asset.denom, amount: depositLiquidity.toString() },
|
||||
)
|
||||
|
||||
const additionalDecimals = asset.decimals - get().baseCurrency.decimals
|
||||
const redBankAsset: RedBankAsset = {
|
||||
...asset,
|
||||
walletBalance: assetWallet?.amount.toString(),
|
||||
depositBalance: depositBalance.toString(),
|
||||
depositBalanceBaseCurrency: convertToBaseCurrency({
|
||||
denom: asset.denom,
|
||||
amount: depositBalance.toString(),
|
||||
amount: demagnify(depositBalance, additionalDecimals).toString(),
|
||||
}),
|
||||
borrowBalance: borrowBalance.toString(),
|
||||
borrowBalanceBaseCurrency: convertToBaseCurrency({
|
||||
denom: asset.denom,
|
||||
amount: borrowBalance.toString(),
|
||||
amount: demagnify(borrowBalance, additionalDecimals).toString(),
|
||||
}),
|
||||
borrowRate: borrowApy * 100 >= 0.01 ? borrowApy * 100 : 0.0,
|
||||
apy: depositApy * 100 >= 0.01 ? depositApy * 100 : 0.0,
|
||||
@ -147,16 +148,16 @@ const redBankSlice = (set: NamedSet<Store>, get: GetState<Store>): RedBankSlice
|
||||
|
||||
whitelistedAssets?.forEach((asset: Asset) => {
|
||||
const denom = asset.denom
|
||||
const symbol = asset.symbol
|
||||
const id = asset.id
|
||||
const queryResult = data.rbwasmkey
|
||||
const marketData = {
|
||||
...queryResult[`${symbol}Market`],
|
||||
...queryResult[`${id}Market`],
|
||||
denom: denom,
|
||||
}
|
||||
marketInfo.push(marketData)
|
||||
|
||||
const marketIncentiveData = {
|
||||
...queryResult[`${symbol}MarketIncentive`],
|
||||
...queryResult[`${id}MarketIncentive`],
|
||||
denom: denom,
|
||||
}
|
||||
marketIncentiveInfo.push(marketIncentiveData)
|
||||
|
||||
@ -6,6 +6,8 @@
|
||||
osmo: $colorTokenOSMO;
|
||||
atom: $colorTokenATOM;
|
||||
axlusdc: $colorTokenAxlUSDC;
|
||||
axlwbtc: $colorTokenAxlWBTC;
|
||||
axlweth: $colorTokenAxlWETH;
|
||||
juno: $colorTokenJUNO;
|
||||
statom: $colorTokenStATOM;
|
||||
|
||||
|
||||
579
src/styles/_master.public.scss
Normal file
579
src/styles/_master.public.scss
Normal file
@ -0,0 +1,579 @@
|
||||
@use 'sass:math';
|
||||
$rem-base: 16px;
|
||||
|
||||
/* Colors */
|
||||
$colorWhite: #f5f5f5;
|
||||
$colorGrey: #bdbdbd;
|
||||
$colorGreyLight: #e0e0e0;
|
||||
$colorGreyHighlight: #efefef;
|
||||
$colorGreyMedium: #9e9e9e;
|
||||
$colorGreyDark: #616161;
|
||||
|
||||
/* CI Colors */
|
||||
$colorPrimary: #0000ff;
|
||||
$colorPrimaryHighlight: #6962cc;
|
||||
$colorPrimaryAlpha: rgba(0, 0, 255, 0.05);
|
||||
$colorSecondary: #212121;
|
||||
$colorSecondaryHighlight: #424242;
|
||||
$colorSecondaryDark: #111111;
|
||||
$colorSecondaryAlpha: rgba(17, 17, 17, 0.15);
|
||||
$colorAccent: $colorGreyMedium;
|
||||
$colorAccentHighlight: $colorGreyMedium;
|
||||
$colorAccentDark: $colorGreyDark;
|
||||
$colorAccentInverted: $colorGreyLight;
|
||||
|
||||
/* Info Colors */
|
||||
$colorInfoProfit: #c4e7e9;
|
||||
$colorInfoLoss: #c8aaaa;
|
||||
$colorInfoWarning: #ffb5b5;
|
||||
$colorInfoVoteAgainst: #6c5a46;
|
||||
|
||||
/* Token Colors */
|
||||
$colorTokenMARS: #dd5b65;
|
||||
$colorTokenOSMO: #9f1ab9;
|
||||
$colorTokenATOM: #6f7390;
|
||||
$colorTokenAxlUSDC: #478edc;
|
||||
$colorTokenJUNO: black;
|
||||
$colorTokenStATOM: #e50571;
|
||||
$colorTokenAxlWBTC: #f09242;
|
||||
$colorTokenAxlWETH: #343434;
|
||||
|
||||
$colorGradientOSMO: linear-gradient(to bottom, #3a02e2, #e700ca);
|
||||
$colorGradientATOM: linear-gradient(to bottom, #2e3148, #6f7390);
|
||||
$colorGradientJUNO: linear-gradient(to bottom, #000000, #333333);
|
||||
$colorGradientAxlUSDC: linear-gradient(to bottom, #1f5c9e, #478edc);
|
||||
$colorGradientAxlWBTC: linear-gradient(to bottom, #f09242, #f9d3b3);
|
||||
$colorGradientAxlWETH: linear-gradient(to bottom, #343434, #8c8c8c);
|
||||
$colorGradientStATOM: linear-gradient(to bottom, #e50571, #fb5da9);
|
||||
|
||||
/* Alpha Colors */
|
||||
$alphaWhite10: rgba(255, 255, 255, 0.1);
|
||||
$alphaWhite20: rgba(255, 255, 255, 0.2);
|
||||
$alphaWhite30: rgba(255, 255, 255, 0.3);
|
||||
$alphaWhite40: rgba(255, 255, 255, 0.4);
|
||||
$alphaWhite50: rgba(255, 255, 255, 0.5);
|
||||
$alphaWhite60: rgba(255, 255, 255, 0.6);
|
||||
$alphaWhite70: rgba(255, 255, 255, 0.7);
|
||||
$alphaWhite80: rgba(255, 255, 255, 0.8);
|
||||
$alphaWhite90: rgba(255, 255, 255, 0.9);
|
||||
$alphaBlack10: rgba(0, 0, 0, 0.1);
|
||||
$alphaBlack20: rgba(0, 0, 0, 0.2);
|
||||
$alphaBlack30: rgba(0, 0, 0, 0.3);
|
||||
$alphaBlack40: rgba(0, 0, 0, 0.4);
|
||||
$alphaBlack50: rgba(0, 0, 0, 0.5);
|
||||
$alphaBlack60: rgba(0, 0, 0, 0.6);
|
||||
$alphaBlack70: rgba(0, 0, 0, 0.7);
|
||||
$alphaBlack80: rgba(0, 0, 0, 0.8);
|
||||
$alphaBlack90: rgba(0, 0, 0, 0.9);
|
||||
|
||||
/* Background Colors */
|
||||
$backgroundBody: $colorGrey;
|
||||
$backgroundBodyDark: $backgroundBody;
|
||||
$backgroundInTile: transparent;
|
||||
$backgroundFooter: transparent;
|
||||
|
||||
/* Slider Colors */
|
||||
$sliderThumb: $colorGreyDark;
|
||||
$sliderMark: $colorGreyDark;
|
||||
|
||||
/* Tooltip Colors */
|
||||
$tooltipIconColor: $alphaBlack60;
|
||||
|
||||
/* Table Colors */
|
||||
$tableBorder: $alphaBlack30;
|
||||
$tableBorderEnd: $alphaBlack80;
|
||||
$tableSort: $alphaBlack20;
|
||||
$tableSortActive: $alphaBlack90;
|
||||
$tableHeader: $alphaBlack40;
|
||||
$tableLabel: $colorSecondaryDark;
|
||||
|
||||
/* Graph Colors */
|
||||
$graphLiquidationsLine: $alphaBlack70;
|
||||
$graphAxis: $alphaBlack40;
|
||||
|
||||
/* Shadows */
|
||||
$shadowInset: inset 0px 2px 2px rgba(0, 0, 0, 0.25);
|
||||
|
||||
@mixin shadowFade {
|
||||
mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 40%);
|
||||
}
|
||||
|
||||
/* Devider */
|
||||
@mixin devider10 {
|
||||
border-bottom: 1px solid $alphaBlack10;
|
||||
}
|
||||
|
||||
@mixin devider20 {
|
||||
border-bottom: 1px solid $alphaBlack20;
|
||||
}
|
||||
|
||||
@mixin devider40 {
|
||||
border-bottom: 1px solid $alphaBlack40;
|
||||
}
|
||||
|
||||
@mixin devider60 {
|
||||
border-bottom: 1px solid $alphaBlack60;
|
||||
}
|
||||
|
||||
/* Backgrounds */
|
||||
@mixin bgBody {
|
||||
background-color: $backgroundBody;
|
||||
}
|
||||
|
||||
@mixin bgTableHover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@mixin bgBodyDark {
|
||||
background-color: $backgroundBodyDark;
|
||||
}
|
||||
|
||||
@mixin bgProposalActive {
|
||||
background: linear-gradient(90deg, #10aa93 2.6%, #248aa9 97.92%);
|
||||
}
|
||||
|
||||
@mixin bgProposalHover {
|
||||
background-color: $colorGreyMedium;
|
||||
}
|
||||
|
||||
@mixin bgTile($deg: 99.79) {
|
||||
background: linear-gradient(
|
||||
#{$deg}deg,
|
||||
rgba(8, 11, 30, 0.79) 8.17%,
|
||||
rgba(52, 20, 33, 0.9) 94.54%
|
||||
);
|
||||
}
|
||||
|
||||
@mixin bgInTile {
|
||||
background: $backgroundInTile;
|
||||
}
|
||||
|
||||
@mixin bgOverlay {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
@mixin bgTooltip {
|
||||
background: linear-gradient(77.47deg, rgba(20, 24, 57, 0.9) 11.58%, rgba(34, 16, 57, 0.9) 93.89%);
|
||||
}
|
||||
|
||||
@mixin bgPopover {
|
||||
background: linear-gradient(180deg, #fef4ed -2.1%, #ecdbe0 97.53%);
|
||||
color: $fontColorDarkPrimary;
|
||||
}
|
||||
|
||||
@mixin bgTileDevider {
|
||||
background-color: $alphaBlack60;
|
||||
}
|
||||
|
||||
@mixin bgDevider {
|
||||
background-color: $alphaBlack20;
|
||||
}
|
||||
|
||||
@mixin bgInput {
|
||||
background-color: #282a33;
|
||||
}
|
||||
|
||||
@mixin bgPrimary {
|
||||
background-color: $colorPrimary;
|
||||
color: $colorWhite;
|
||||
}
|
||||
|
||||
@mixin bgSecondary {
|
||||
background-color: $colorSecondary;
|
||||
color: $colorWhite;
|
||||
}
|
||||
|
||||
@mixin bgTertiary {
|
||||
background-color: $alphaBlack60;
|
||||
color: $colorWhite;
|
||||
}
|
||||
|
||||
@mixin bgLimit {
|
||||
background: $colorPrimary;
|
||||
}
|
||||
|
||||
@mixin bgLimitOpacity {
|
||||
background: $colorPrimary;
|
||||
}
|
||||
|
||||
@mixin bgHatched {
|
||||
background-image: linear-gradient(
|
||||
135deg,
|
||||
#1a1c25 33.33%,
|
||||
rgba(255, 255, 255, 0.2) 33.33%,
|
||||
rgba(255, 255, 255, 0.2) 50%,
|
||||
#1a1c25 50%,
|
||||
#1a1c25 83.33%,
|
||||
rgba(255, 255, 255, 0.2) 83.33%,
|
||||
rgba(255, 255, 255, 0.2) 100%
|
||||
);
|
||||
background-size: 5px 5px;
|
||||
}
|
||||
|
||||
/* GLOWS */
|
||||
/* GLOWS */
|
||||
@mixin glowXS {
|
||||
display: none;
|
||||
}
|
||||
@mixin glowS {
|
||||
display: none;
|
||||
}
|
||||
@mixin glowM {
|
||||
display: none;
|
||||
}
|
||||
@mixin glowL {
|
||||
display: none;
|
||||
}
|
||||
@mixin glowXL {
|
||||
display: none;
|
||||
}
|
||||
@mixin glowXXL {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
$fontWeightLight: 300;
|
||||
$fontWeightRegular: 400;
|
||||
$fontWeightSemibold: 600;
|
||||
|
||||
$fontColorDarkPrimary: $colorWhite;
|
||||
$fontColorDarkSecondary: $colorSecondaryDark;
|
||||
$fontColorLightPrimary: $colorSecondaryDark;
|
||||
$fontColorLightSecondary: $alphaBlack30;
|
||||
$fontColorLightTertiary: $colorSecondaryDark;
|
||||
$fontColorLtv: $colorWhite;
|
||||
|
||||
@mixin typoH1 {
|
||||
font-weight: $fontWeightLight;
|
||||
font-size: rem-calc(60.84);
|
||||
line-height: space(20);
|
||||
}
|
||||
|
||||
@mixin typoH2 {
|
||||
font-size: rem-calc(38.49);
|
||||
line-height: space(14);
|
||||
}
|
||||
|
||||
@mixin typoH2caps {
|
||||
@include typoH2;
|
||||
}
|
||||
|
||||
@mixin typoH3 {
|
||||
font-size: rem-calc(30.42);
|
||||
line-height: space(10);
|
||||
}
|
||||
|
||||
@mixin typoH3caps {
|
||||
font-size: rem-calc(30.42);
|
||||
}
|
||||
|
||||
@mixin typoH4 {
|
||||
font-size: rem-calc(24.03);
|
||||
line-height: space(9);
|
||||
font-weight: $fontWeightRegular;
|
||||
}
|
||||
|
||||
@mixin typoH4caps {
|
||||
@include typoH4;
|
||||
}
|
||||
|
||||
@mixin typoXXL {
|
||||
font-size: rem-calc(21.36);
|
||||
line-height: space(8);
|
||||
}
|
||||
|
||||
@mixin typoXXLcaps {
|
||||
@include typoXXL;
|
||||
font-weight: $fontWeightLight;
|
||||
}
|
||||
|
||||
@mixin typoXL {
|
||||
font-size: rem-calc(18.98);
|
||||
line-height: space(7);
|
||||
}
|
||||
|
||||
@mixin typoXLcaps {
|
||||
@include typoXL;
|
||||
font-weight: $fontWeightLight;
|
||||
}
|
||||
|
||||
@mixin typoL {
|
||||
font-size: rem-calc(16.88);
|
||||
line-height: space(6);
|
||||
}
|
||||
|
||||
@mixin typoLcaps {
|
||||
@include typoL;
|
||||
font-weight: $fontWeightSemibold;
|
||||
}
|
||||
|
||||
@mixin typoM {
|
||||
font-size: rem-calc(15);
|
||||
line-height: space(5);
|
||||
}
|
||||
|
||||
@mixin typoMcaps {
|
||||
@include typoM;
|
||||
}
|
||||
|
||||
@mixin typoS {
|
||||
font-size: rem-calc(13.33);
|
||||
line-height: space(5);
|
||||
}
|
||||
|
||||
@mixin typoScaps {
|
||||
@include typoS;
|
||||
font-weight: $fontWeightSemibold;
|
||||
}
|
||||
|
||||
@mixin typoXS {
|
||||
font-size: rem-calc(11.85);
|
||||
line-height: space(4);
|
||||
}
|
||||
|
||||
@mixin typoXScaps {
|
||||
@include typoXS;
|
||||
font-weight: $fontWeightSemibold;
|
||||
}
|
||||
|
||||
@mixin typoXXS {
|
||||
font-size: rem-calc(10.53);
|
||||
line-height: space(4);
|
||||
}
|
||||
|
||||
@mixin typoXXScaps {
|
||||
@include typoXXS;
|
||||
font-weight: $fontWeightSemibold;
|
||||
}
|
||||
|
||||
@mixin typoXXXS {
|
||||
font-size: rem-calc(9.36);
|
||||
line-height: space(2);
|
||||
}
|
||||
|
||||
@mixin typoXXXScaps {
|
||||
@include typoXXXS;
|
||||
font-weight: $fontWeightSemibold;
|
||||
}
|
||||
|
||||
@mixin typoButton {
|
||||
@include typoS;
|
||||
font-weight: $fontWeightSemibold;
|
||||
}
|
||||
|
||||
@mixin typoNav {
|
||||
@include typoL;
|
||||
}
|
||||
|
||||
@mixin typoNetwork {
|
||||
font-size: rem-calc(10.53);
|
||||
font-weight: $fontWeightSemibold;
|
||||
}
|
||||
|
||||
/* Spacing */
|
||||
$spacingBase: 4;
|
||||
|
||||
@function space($multiplier) {
|
||||
$space: rem-calc($spacingBase * $multiplier);
|
||||
@return $space;
|
||||
}
|
||||
|
||||
@mixin padding($top: 1, $right: null, $bottom: null, $left: null) {
|
||||
@if $left {
|
||||
padding: space($top) space($right) space($bottom) space($left);
|
||||
} @else {
|
||||
@if $bottom {
|
||||
padding: space($top) space($right) space($bottom);
|
||||
} @else {
|
||||
@if $right {
|
||||
padding: space($top) space($right);
|
||||
} @else {
|
||||
padding: space($top);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin margin($top: 1, $right: null, $bottom: null, $left: null) {
|
||||
@if $left {
|
||||
margin: space($top) space($right) space($bottom) space($left);
|
||||
} @else {
|
||||
@if $bottom {
|
||||
margin: space($top) space($right) space($bottom);
|
||||
} @else {
|
||||
@if $right {
|
||||
margin: space($top) space($right);
|
||||
} @else {
|
||||
margin: space($top);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@function strip-unit($num) {
|
||||
@return math.div($num, $num * 0 + 1);
|
||||
}
|
||||
|
||||
@function convert-to-rem($value, $base-value: $rem-base) {
|
||||
$value: math.div(strip-unit($value), strip-unit($base-value)) * 1rem;
|
||||
@if ($value == 0rem) {
|
||||
$value: 0;
|
||||
}
|
||||
@return $value;
|
||||
}
|
||||
|
||||
@function rem-calc($values, $base-value: $rem-base) {
|
||||
$max: length($values);
|
||||
@if $max == 1 {
|
||||
@return convert-to-rem(nth($values, 1), $base-value);
|
||||
}
|
||||
$remValues: ();
|
||||
@for $i from 1 through $max {
|
||||
$remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value));
|
||||
}
|
||||
@return $remValues;
|
||||
}
|
||||
|
||||
/* LAYOUTS */
|
||||
@mixin layoutTile {
|
||||
padding: space(1);
|
||||
background: $colorGreyHighlight;
|
||||
border: 2px solid $colorWhite;
|
||||
box-shadow: 0 0 0 3px $colorGreyHighlight, 12px 12px 0 0 rgb(0 0 0 / 50%) !important;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
@mixin layoutTooltip {
|
||||
padding: space(3);
|
||||
background: $colorGreyLight;
|
||||
border: 1px solid $colorSecondaryDark;
|
||||
}
|
||||
|
||||
@mixin layoutPopover {
|
||||
padding: space(3);
|
||||
background: $colorGreyLight;
|
||||
border: 1px solid $colorSecondaryDark;
|
||||
}
|
||||
|
||||
@mixin layoutIncentiveButton {
|
||||
}
|
||||
|
||||
@mixin layoutLogo {
|
||||
> svg {
|
||||
width: rem-calc(57);
|
||||
height: rem-calc(57);
|
||||
|
||||
path {
|
||||
stroke: $fontColorLightPrimary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin layoutGlobal {
|
||||
opacity: 1 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
$buttonBorder: $alphaBlack40;
|
||||
$buttonBorderHover: $colorSecondaryDark;
|
||||
|
||||
@mixin buttonS {
|
||||
@include typoS;
|
||||
@include padding(1.5, 5);
|
||||
height: rem-calc(32);
|
||||
}
|
||||
|
||||
@mixin buttonM {
|
||||
@include typoM;
|
||||
@include padding(2.5, 6);
|
||||
height: rem-calc(40);
|
||||
}
|
||||
|
||||
@mixin buttonL {
|
||||
@include typoL;
|
||||
@include padding(2.5, 6);
|
||||
height: rem-calc(56);
|
||||
}
|
||||
|
||||
@mixin buttonSolidPrimary {
|
||||
&.primary {
|
||||
background-color: $colorPrimary;
|
||||
color: $colorWhite;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $colorPrimaryHighlight;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: lighten($colorPrimary, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin buttonSolidSecondary {
|
||||
&.secondary {
|
||||
background-color: $colorSecondary;
|
||||
color: $colorWhite;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $colorSecondaryHighlight;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: lighten($colorSecondary, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin buttonSolidTertiary {
|
||||
&.tertiary {
|
||||
background-color: $colorSecondaryDark;
|
||||
color: $colorWhite;
|
||||
border: 1px solid $alphaBlack30;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border: 1px solid $alphaBlack20;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: lighten($colorSecondaryDark, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Border Radius */
|
||||
$borderRadiusXXXS: 0;
|
||||
$borderRadiusXXS: 0;
|
||||
$borderRadiusXS: 0;
|
||||
$borderRadiusS: 0;
|
||||
$borderRadiusM: 0;
|
||||
$borderRadiusL: 0;
|
||||
$borderRadiusXL: 0;
|
||||
$borderRadiusXXL: 0;
|
||||
$borderRadiusXXXL: 0;
|
||||
$borderRadiusXXXXL: 0;
|
||||
$borderRadiusRound: 0;
|
||||
|
||||
/* Dimensions */
|
||||
$headerHeight: rem-calc(86);
|
||||
$mobileNavHeight: rem-calc(64);
|
||||
$footerHeight: rem-calc(300);
|
||||
$footerHeightMedium: rem-calc(300);
|
||||
$footerHeightSmall: rem-calc(800);
|
||||
$contentWidth: 1248px;
|
||||
|
||||
/* Breakpoints */
|
||||
$bpLargeHigh: $contentWidth;
|
||||
$bpLargeLow: 1025px;
|
||||
$bpMediumHigh: 1024px;
|
||||
$bpMediumLow: 801px;
|
||||
$bpSmallHigh: 800px;
|
||||
$bpXSmallHigh: 719px;
|
||||
$bpXSmallLow: 480px;
|
||||
|
||||
/* Animation Timings */
|
||||
$animationSpeed: 1s;
|
||||
@ -35,10 +35,15 @@ $colorTokenATOM: #6f7390;
|
||||
$colorTokenAxlUSDC: #478edc;
|
||||
$colorTokenJUNO: black;
|
||||
$colorTokenStATOM: #e50571;
|
||||
$colorTokenAxlWBTC: #f09242;
|
||||
$colorTokenAxlWETH: #343434;
|
||||
|
||||
$colorGradientOSMO: linear-gradient(to bottom, #3a02e2, #e700ca);
|
||||
$colorGradientATOM: linear-gradient(to bottom, #2e3148, #6f7390);
|
||||
$colorGradientJUNO: linear-gradient(to bottom, #000000, #333333);
|
||||
$colorGradientAxlUSDC: linear-gradient(to bottom, #1f5c9e, #478edc);
|
||||
$colorGradientAxlWBTC: linear-gradient(to bottom, #f09242, #f9d3b3);
|
||||
$colorGradientAxlWETH: linear-gradient(to bottom, #343434, #8c8c8c);
|
||||
$colorGradientStATOM: linear-gradient(to bottom, #e50571, #fb5da9);
|
||||
|
||||
/* Alpha Colors */
|
||||
|
||||
4
src/types/interfaces/asset.d.ts
vendored
4
src/types/interfaces/asset.d.ts
vendored
@ -2,7 +2,8 @@ interface Asset {
|
||||
color: string
|
||||
name: string
|
||||
denom: string
|
||||
symbol: 'OSMO' | 'ATOM' | 'JUNO' | 'axlUSDC' | 'stATOM'
|
||||
symbol: 'OSMO' | 'ATOM' | 'JUNO' | 'USDC.axl' | 'stATOM' | 'WBTC.axl' | 'WETH.axl'
|
||||
id: 'axlUSDC' | 'axlWBTC' | 'axlWETH' | 'OSMO' | 'ATOM' | 'JUNO' | 'stATOM'
|
||||
prefix?: string
|
||||
contract_addr?: string
|
||||
logo: string
|
||||
@ -13,6 +14,7 @@ interface Asset {
|
||||
|
||||
interface OtherAsset extends Omit<Asset, 'symbol'> {
|
||||
symbol: 'MARS' | ''
|
||||
id?: ''
|
||||
}
|
||||
|
||||
interface AssetPairInfo {
|
||||
|
||||
4
src/types/interfaces/redbank.d.ts
vendored
4
src/types/interfaces/redbank.d.ts
vendored
@ -11,6 +11,10 @@ interface RedBankData {
|
||||
JUNOMarketIncentive: MarketIncentive
|
||||
axlUSDCMarket: Market
|
||||
axlUSDCMarketIncentive: MarketIncentive
|
||||
axlWBTCMarket: Market
|
||||
axlWBTCMarketIncentive: MarketIncentive
|
||||
axlWETHMarket: Market
|
||||
axlWETHMarketIncentive: MarketIncentive
|
||||
stATOMMarket: Market
|
||||
stATOMMarketIncentive: MarketIncentive
|
||||
collateral: UserCollateral[]
|
||||
|
||||
Loading…
Reference in New Issue
Block a user