From b46a6b94612d8d325bd6957b0633a7eb4b1cb460 Mon Sep 17 00:00:00 2001 From: Linkie Link Date: Thu, 20 Apr 2023 22:12:19 +0800 Subject: [PATCH] release v1.4.4 --- package.json | 2 +- .../CosmosWalletConnectProvider.tsx | 4 +- src/components/common/Header/Settings.tsx | 15 +- .../InputSection/InputSection.module.scss | 52 +- .../common/InputSection/InputSection.tsx | 51 +- .../common/NumberInput/NumberInput.tsx | 65 +- src/components/common/TxModal/Action.tsx | 8 +- .../PositionInput/TokenInput/TokenInput.tsx | 21 +- .../redbank/AssetTable/ActionsRow.tsx | 18 +- .../useBorrowColumns.module.scss | 12 + .../BorrowColumns/useBorrowColumns.tsx | 8 +- .../useDepositColumns.module.scss | 12 + .../DepositColumns/useDepositColumns.tsx | 8 +- .../redbank/RedbankAction/RedbankAction.tsx | 9 +- src/configs/osmo-test-4.ts | 39 +- src/configs/osmosis-1.ts | 48 +- src/constants/appConstants.ts | 2 - src/functions/getSwapUrl.ts | 6 +- src/functions/queries/getDepositDebtQuery.ts | 6 +- src/functions/queries/getRedbankQuery.ts | 8 +- .../redbank/produceUpdatedAssetData.test.tsx | 8 + .../redbank/produceUpdatedAssetData.ts | 8 +- src/hooks/queries/useDepositAndDebt.tsx | 4 + src/hooks/queries/useMarsOracle.tsx | 2 +- src/i18n.ts | 2 +- src/images/axlwbtc.svg | 23 + src/images/axlweth.svg | 18 + src/libs/parse.ts | 15 +- src/mocks/redBankAssets.ts | 2 + .../redbank/borrow/{[symbol].tsx => [id].tsx} | 5 +- .../deposit/{[symbol].tsx => [id].tsx} | 5 +- .../redbank/repay/{[symbol].tsx => [id].tsx} | 5 +- .../withdraw/{[symbol].tsx => [id].tsx} | 5 +- src/store/interfaces/oracles.interface.ts | 1 - src/store/slices/common.ts | 4 +- src/store/slices/oracles.ts | 15 +- src/store/slices/redBank.ts | 13 +- src/styles/_assets.module.scss | 2 + src/styles/_master.public.scss | 579 ++++++++++++++++++ src/styles/_master.scss | 5 + src/types/interfaces/asset.d.ts | 4 +- src/types/interfaces/redbank.d.ts | 4 + 42 files changed, 936 insertions(+), 187 deletions(-) create mode 100644 src/images/axlwbtc.svg create mode 100644 src/images/axlweth.svg rename src/pages/redbank/borrow/{[symbol].tsx => [id].tsx} (59%) rename src/pages/redbank/deposit/{[symbol].tsx => [id].tsx} (59%) rename src/pages/redbank/repay/{[symbol].tsx => [id].tsx} (58%) rename src/pages/redbank/withdraw/{[symbol].tsx => [id].tsx} (59%) create mode 100644 src/styles/_master.public.scss diff --git a/package.json b/package.json index 0e187c1..853b629 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "mars", "homepage": "./", - "version": "1.4.3", + "version": "1.4.4", "license": "SEE LICENSE IN LICENSE FILE", "private": false, "scripts": { diff --git a/src/components/common/CosmosWalletConnectProvider/CosmosWalletConnectProvider.tsx b/src/components/common/CosmosWalletConnectProvider/CosmosWalletConnectProvider.tsx index 27fbec2..ebce67c 100644 --- a/src/components/common/CosmosWalletConnectProvider/CosmosWalletConnectProvider.tsx +++ b/src/components/common/CosmosWalletConnectProvider/CosmosWalletConnectProvider.tsx @@ -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 diff --git a/src/components/common/Header/Settings.tsx b/src/components/common/Header/Settings.tsx index 642846d..37d4d35 100644 --- a/src/components/common/Header/Settings.tsx +++ b/src/components/common/Header/Settings.tsx @@ -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(inputPlaceholder) + const [customSlippage, setCustomSlippage] = useState(0) const [inputRef, setInputRef] = useState>() 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='...' /> % diff --git a/src/components/common/InputSection/InputSection.module.scss b/src/components/common/InputSection/InputSection.module.scss index 5b69114..ef73baf 100644 --- a/src/components/common/InputSection/InputSection.module.scss +++ b/src/components/common/InputSection/InputSection.module.scss @@ -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 { diff --git a/src/components/common/InputSection/InputSection.tsx b/src/components/common/InputSection/InputSection.tsx index 30562d9..9d02c38 100644 --- a/src/components/common/InputSection/InputSection.tsx +++ b/src/components/common/InputSection/InputSection.tsx @@ -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()}
- { - 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, - ) - : '' - } +
void onBlur?: () => void onFocus?: () => void @@ -22,17 +26,40 @@ interface Props { export const NumberInput = (props: Props) => { const inputRef = React.useRef(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 ( onInputChange(e.target.value)} onBlur={props.onBlur} diff --git a/src/components/common/TxModal/Action.tsx b/src/components/common/TxModal/Action.tsx index 9dfc439..ded3373 100644 --- a/src/components/common/TxModal/Action.tsx +++ b/src/components/common/TxModal/Action.tsx @@ -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) diff --git a/src/components/fields/PositionInput/TokenInput/TokenInput.tsx b/src/components/fields/PositionInput/TokenInput/TokenInput.tsx index cd59c48..1f6a673 100644 --- a/src/components/fields/PositionInput/TokenInput/TokenInput.tsx +++ b/src/components/fields/PositionInput/TokenInput/TokenInput.tsx @@ -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' />
{}} - 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 && ( <> diff --git a/src/components/redbank/AssetTable/ActionsRow.tsx b/src/components/redbank/AssetTable/ActionsRow.tsx index dc25377..1beb654 100644 --- a/src/components/redbank/AssetTable/ActionsRow.tsx +++ b/src/components/redbank/AssetTable/ActionsRow.tsx @@ -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 ( 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={} 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={} 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={} 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={ diff --git a/src/components/redbank/BorrowColumns/useBorrowColumns.module.scss b/src/components/redbank/BorrowColumns/useBorrowColumns.module.scss index d7c5e50..139d321 100644 --- a/src/components/redbank/BorrowColumns/useBorrowColumns.module.scss +++ b/src/components/redbank/BorrowColumns/useBorrowColumns.module.scss @@ -15,9 +15,21 @@ background-image: $colorGradientATOM; } + &.JUNO { + background-image: $colorGradientJUNO; + } + &.axlUSDC { background-image: $colorGradientAxlUSDC; } + + &.axlWBTC { + background-image: $colorGradientAxlWBTC; + } + + &.axlWETH { + background-image: $colorGradientAxlWETH; + } } .logo { diff --git a/src/components/redbank/BorrowColumns/useBorrowColumns.tsx b/src/components/redbank/BorrowColumns/useBorrowColumns.tsx index ca89631..ade9b44 100644 --- a/src/components/redbank/BorrowColumns/useBorrowColumns.tsx +++ b/src/components/redbank/BorrowColumns/useBorrowColumns.tsx @@ -19,7 +19,7 @@ export const useBorrowColumns = () => { header: '', cell: (info) => (
@@ -34,7 +34,7 @@ export const useBorrowColumns = () => {
), }), - columnHelper.accessor('name', { + columnHelper.accessor('symbol', { enableSorting: enableSorting, header: () => ( @@ -42,8 +42,8 @@ export const useBorrowColumns = () => { id: 'name', cell: (info) => ( <> -

{info.row.original.symbol}

-

{info.getValue()}

+

{info.getValue()}

+

{info.row.original.name}

), }), diff --git a/src/components/redbank/DepositColumns/useDepositColumns.module.scss b/src/components/redbank/DepositColumns/useDepositColumns.module.scss index 43cd305..776a7c7 100644 --- a/src/components/redbank/DepositColumns/useDepositColumns.module.scss +++ b/src/components/redbank/DepositColumns/useDepositColumns.module.scss @@ -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 { diff --git a/src/components/redbank/DepositColumns/useDepositColumns.tsx b/src/components/redbank/DepositColumns/useDepositColumns.tsx index b4adc89..3286939 100644 --- a/src/components/redbank/DepositColumns/useDepositColumns.tsx +++ b/src/components/redbank/DepositColumns/useDepositColumns.tsx @@ -23,7 +23,7 @@ export const useDepositColumns = () => { header: '', cell: (info) => (
@@ -38,7 +38,7 @@ export const useDepositColumns = () => {
), }), - columnHelper.accessor('name', { + columnHelper.accessor('symbol', { enableSorting: enableSorting, header: () => ( @@ -46,8 +46,8 @@ export const useDepositColumns = () => { id: 'name', cell: (info) => ( <> -

{info.row.original.symbol}

-

{info.getValue()}

+

{info.getValue()}

+

{info.row.original.name}

), }), diff --git a/src/components/redbank/RedbankAction/RedbankAction.tsx b/src/components/redbank/RedbankAction/RedbankAction.tsx index 17bbc47..ad9e615 100644 --- a/src/components/redbank/RedbankAction/RedbankAction.tsx +++ b/src/components/redbank/RedbankAction/RedbankAction.tsx @@ -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]) } } diff --git a/src/configs/osmo-test-4.ts b/src/configs/osmo-test-4.ts index cd9e6da..183b318 100644 --- a/src/configs/osmo-test-4.ts +++ b/src/configs/osmo-test-4.ts @@ -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', diff --git a/src/configs/osmosis-1.ts b/src/configs/osmosis-1.ts index f3570b7..7468b39 100644 --- a/src/configs/osmosis-1.ts +++ b/src/configs/osmosis-1.ts @@ -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, diff --git a/src/constants/appConstants.ts b/src/constants/appConstants.ts index 6f64f79..c48951d 100644 --- a/src/constants/appConstants.ts +++ b/src/constants/appConstants.ts @@ -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 diff --git a/src/functions/getSwapUrl.ts b/src/functions/getSwapUrl.ts index 33e36fd..08e4e63 100644 --- a/src/functions/getSwapUrl.ts +++ b/src/functions/getSwapUrl.ts @@ -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}` } diff --git a/src/functions/queries/getDepositDebtQuery.ts b/src/functions/queries/getDepositDebtQuery.ts index 3fdaf79..bb99dda 100644 --- a/src/functions/queries/getDepositDebtQuery.ts +++ b/src/functions/queries/getDepositDebtQuery.ts @@ -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( diff --git a/src/functions/queries/getRedbankQuery.ts b/src/functions/queries/getRedbankQuery.ts index fce174f..0f28ceb 100644 --- a/src/functions/queries/getRedbankQuery.ts +++ b/src/functions/queries/getRedbankQuery.ts @@ -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( diff --git a/src/functions/redbank/produceUpdatedAssetData.test.tsx b/src/functions/redbank/produceUpdatedAssetData.test.tsx index 4ae115d..fe66218 100644 --- a/src/functions/redbank/produceUpdatedAssetData.test.tsx +++ b/src/functions/redbank/produceUpdatedAssetData.test.tsx @@ -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({ diff --git a/src/functions/redbank/produceUpdatedAssetData.ts b/src/functions/redbank/produceUpdatedAssetData.ts index 91c7da2..b13deb8 100644 --- a/src/functions/redbank/produceUpdatedAssetData.ts +++ b/src/functions/redbank/produceUpdatedAssetData.ts @@ -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 diff --git a/src/hooks/queries/useDepositAndDebt.tsx b/src/hooks/queries/useDepositAndDebt.tsx index 383cfb3..7ab7d2a 100644 --- a/src/hooks/queries/useDepositAndDebt.tsx +++ b/src/hooks/queries/useDepositAndDebt.tsx @@ -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 } diff --git a/src/hooks/queries/useMarsOracle.tsx b/src/hooks/queries/useMarsOracle.tsx index 8b7adb0..5aace93 100644 --- a/src/hooks/queries/useMarsOracle.tsx +++ b/src/hooks/queries/useMarsOracle.tsx @@ -32,7 +32,7 @@ export const useMarsOracle = () => { }` const querySegment = ` - ${whitelistAsset.symbol}: contractQuery(contractAddress: "${oracleAddress}", query: { + ${whitelistAsset.id}: contractQuery(contractAddress: "${oracleAddress}", query: { price: ${asset} }) ` diff --git a/src/i18n.ts b/src/i18n.ts index d4d5347..ce4169e 100644 --- a/src/i18n.ts +++ b/src/i18n.ts @@ -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: { diff --git a/src/images/axlwbtc.svg b/src/images/axlwbtc.svg new file mode 100644 index 0000000..04f937a --- /dev/null +++ b/src/images/axlwbtc.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + diff --git a/src/images/axlweth.svg b/src/images/axlweth.svg new file mode 100644 index 0000000..3698ec5 --- /dev/null +++ b/src/images/axlweth.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + diff --git a/src/libs/parse.ts b/src/libs/parse.ts index 65ba368..f496ac9 100644 --- a/src/libs/parse.ts +++ b/src/libs/parse.ts @@ -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()}` diff --git a/src/mocks/redBankAssets.ts b/src/mocks/redBankAssets.ts index 57cb289..8a290b4 100644 --- a/src/mocks/redBankAssets.ts +++ b/src/mocks/redBankAssets.ts @@ -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', }, ] diff --git a/src/pages/redbank/borrow/[symbol].tsx b/src/pages/redbank/borrow/[id].tsx similarity index 59% rename from src/pages/redbank/borrow/[symbol].tsx rename to src/pages/redbank/borrow/[id].tsx index 91895e8..95c1d84 100644 --- a/src/pages/redbank/borrow/[symbol].tsx +++ b/src/pages/redbank/borrow/[id].tsx @@ -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 + return } export default Borrow diff --git a/src/pages/redbank/deposit/[symbol].tsx b/src/pages/redbank/deposit/[id].tsx similarity index 59% rename from src/pages/redbank/deposit/[symbol].tsx rename to src/pages/redbank/deposit/[id].tsx index dbc574d..683d005 100644 --- a/src/pages/redbank/deposit/[symbol].tsx +++ b/src/pages/redbank/deposit/[id].tsx @@ -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 + return } export default Withdraw diff --git a/src/pages/redbank/repay/[symbol].tsx b/src/pages/redbank/repay/[id].tsx similarity index 58% rename from src/pages/redbank/repay/[symbol].tsx rename to src/pages/redbank/repay/[id].tsx index 444229b..f639bad 100644 --- a/src/pages/redbank/repay/[symbol].tsx +++ b/src/pages/redbank/repay/[id].tsx @@ -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 + return } export default Repay diff --git a/src/pages/redbank/withdraw/[symbol].tsx b/src/pages/redbank/withdraw/[id].tsx similarity index 59% rename from src/pages/redbank/withdraw/[symbol].tsx rename to src/pages/redbank/withdraw/[id].tsx index c168172..11281b0 100644 --- a/src/pages/redbank/withdraw/[symbol].tsx +++ b/src/pages/redbank/withdraw/[id].tsx @@ -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 + return } export default Withdraw diff --git a/src/store/interfaces/oracles.interface.ts b/src/store/interfaces/oracles.interface.ts index aacbf91..0167bc4 100644 --- a/src/store/interfaces/oracles.interface.ts +++ b/src/store/interfaces/oracles.interface.ts @@ -17,7 +17,6 @@ export interface OraclesSlice { // SETTERS // ------------------ setExchangeRatesState: (state: State) => void - setExchangeRates: (rates: Coin[]) => void // ------------------ // QUERY RELATED // ------------------ diff --git a/src/store/slices/common.ts b/src/store/slices/common.ts index 48a8a8e..323bcb9 100644 --- a/src/store/slices/common.ts +++ b/src/store/slices/common.ts @@ -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, })) diff --git a/src/store/slices/oracles.ts b/src/store/slices/oracles.ts index 7c51b32..6d18db8 100644 --- a/src/store/slices/oracles.ts +++ b/src/store/slices/oracles.ts @@ -85,7 +85,6 @@ const oraclesSlice = (set: NamedSet, get: GetState): OraclesSlice // SETTERS // ------------------ setExchangeRatesState: (state: State) => set({ exchangeRatesState: state }), - setExchangeRates: (rates: Coin[]) => set({ exchangeRates: rates }), // ------------------ // QUERY RELATED @@ -112,12 +111,20 @@ const oraclesSlice = (set: NamedSet, get: GetState): 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({ diff --git a/src/store/slices/redBank.ts b/src/store/slices/redBank.ts index 0d942bf..5fc1da5 100644 --- a/src/store/slices/redBank.ts +++ b/src/store/slices/redBank.ts @@ -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, get: GetState): 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, get: GetState): 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) diff --git a/src/styles/_assets.module.scss b/src/styles/_assets.module.scss index b963d3c..1696ec9 100644 --- a/src/styles/_assets.module.scss +++ b/src/styles/_assets.module.scss @@ -6,6 +6,8 @@ osmo: $colorTokenOSMO; atom: $colorTokenATOM; axlusdc: $colorTokenAxlUSDC; + axlwbtc: $colorTokenAxlWBTC; + axlweth: $colorTokenAxlWETH; juno: $colorTokenJUNO; statom: $colorTokenStATOM; diff --git a/src/styles/_master.public.scss b/src/styles/_master.public.scss new file mode 100644 index 0000000..2c41096 --- /dev/null +++ b/src/styles/_master.public.scss @@ -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; diff --git a/src/styles/_master.scss b/src/styles/_master.scss index 42ded77..fa48a81 100644 --- a/src/styles/_master.scss +++ b/src/styles/_master.scss @@ -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 */ diff --git a/src/types/interfaces/asset.d.ts b/src/types/interfaces/asset.d.ts index 269197d..d0bb635 100644 --- a/src/types/interfaces/asset.d.ts +++ b/src/types/interfaces/asset.d.ts @@ -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 { symbol: 'MARS' | '' + id?: '' } interface AssetPairInfo { diff --git a/src/types/interfaces/redbank.d.ts b/src/types/interfaces/redbank.d.ts index 318aefb..6ed2c1b 100644 --- a/src/types/interfaces/redbank.d.ts +++ b/src/types/interfaces/redbank.d.ts @@ -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[]