cerc-io/mars-interface
16
0
Fork 0
mirror of https://github.com/cerc-io/mars-interface.git synced 2024-12-22 20:27:44 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #27 from mars-protocol/v1.4.5

Browse Source 
v1.4.5
This commit is contained in:
Dane 2023-04-26 10:33:43 +08:00 committed by GitHub
commit 0d20cee6ed
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 35 additions and 597 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,7 +1,7 @@
{
"name": "mars",
"homepage": "./",
"version": "1.4.4",
"version": "1.4.5",
"license": "SEE LICENSE IN LICENSE FILE",
"private": false,
"scripts": {

20
src/components/common/TxModal/Action.tsx
View File

@ -1,5 +1,6 @@
import 'chart.js/auto'
import BigNumber from 'bignumber.js'
import classNames from 'classnames'
import {
BorrowCapacity,
@ -10,6 +11,7 @@ import {
ErrorMessage,
InputSection,
} from 'components/common'
import { DEFAULT_SLIPPAGE } from 'constants/appConstants'
import { findByDenom } from 'functions'
import { maxBorrowableAmount } from 'functions/redbank/maxBorrowableAmount'
import { produceBarChartConfig } from 'functions/redbank/produceBarChartConfig'
@ -222,7 +224,13 @@ export const Action = ({
const calculateMaxBorrowableAmount = useMemo((): number => {
const assetLiquidity = Number(findByDenom(marketAssetLiquidity, denom)?.amount || 0)
return maxBorrowableAmount(assetLiquidity, availableBalanceBaseCurrency, currentAssetPrice)
return maxBorrowableAmount(
assetLiquidity,
availableBalanceBaseCurrency,
new BigNumber(currentAssetPrice)
.shiftedBy(baseCurrency.decimals - (currentAsset?.decimals || 0))
.toNumber(),
)
}, [denom, availableBalanceBaseCurrency, currentAssetPrice, marketAssetLiquidity])
const repayMax = useMemo((): number => {
@ -242,8 +250,12 @@ export const Action = ({
// If we did not receive a usable asset there is nothing more to do.
if (!asset || !asset.depositBalance || !asset.denom) return 0
const withdrawableAmountOfAsset =
availableBalanceBaseCurrency / (currentAssetPrice * assetLtvRatio)
// When withdrawing, we have to remove the slippage, otherwise we can't actually hit the borrow limit.
const withdrawableAmountOfAsset = new BigNumber(
availableBalanceBaseCurrency / (1 - DEFAULT_SLIPPAGE) / (currentAssetPrice * assetLtvRatio),
)
.shiftedBy(asset.decimals - baseCurrency.decimals)
.toNumber()
return withdrawableAmountOfAsset < assetBalanceOrAvailableLiquidity
? withdrawableAmountOfAsset
@ -408,7 +420,7 @@ export const Action = ({
const produceBarChartData = (percentData: Array<number>, labels: string[]) => {
const barColors: string[] = []
labels.forEach((label) => {
barColors.push(colors[label.toLowerCase()])
barColors.push(colors[label.split('.')[0].toLowerCase()])
})
return {
labels: labels,

4
src/configs/osmo-test-4.ts
View File

@ -33,7 +33,7 @@ export const ASSETS: { [denom: string]: Asset } = {
id: 'axlWBTC',
name: 'Axelar Wrapped Bitcoin',
denom: 'ibc/1480B8FD20AD5FCAE81EA87584D269547DD4D436843C1D20F15E00EB64743EF4',
color: colors.axlwbtc,
color: colors.wbtc,
logo: axlwbtc,
decimals: 8,
poolId: 43,
@ -43,7 +43,7 @@ export const ASSETS: { [denom: string]: Asset } = {
id: 'axlWETH',
name: 'Axelar Wrapped Ethereum',
denom: 'ibc/1DCC8A6CB5689018431323953344A9F6CC4D0BFB261E88C9F7777372C10CD076',
color: colors.axlweth,
color: colors.weth,
logo: axlweth,
decimals: 18,
poolId: 42,

6
src/configs/osmosis-1.ts
View File

@ -24,7 +24,7 @@ export const ASSETS: { [denom: string]: Asset } = {
name: 'Axelar USDC',
id: 'axlUSDC',
denom: 'ibc/D189335C6E4A68B513C10AB227BF1C1D38C746766278BA3EEB4FB14124F1D858',
color: colors.axlusdc,
color: colors.usdc,
decimals: 6,
logo: axlusdc,
},
@ -33,7 +33,7 @@ export const ASSETS: { [denom: string]: Asset } = {
id: 'axlWBTC',
name: 'Axelar Wrapped Bitcoin',
denom: 'ibc/D1542AA8762DB13087D8364F3EA6509FD6F009A34F00426AF9E4F9FA85CBBF1F',
color: colors.axlwbtc,
color: colors.wbtc,
logo: axlwbtc,
decimals: 8,
},
@ -42,7 +42,7 @@ export const ASSETS: { [denom: string]: Asset } = {
id: 'axlWETH',
name: 'Axelar Wrapped Ethereum',
denom: 'ibc/EA1D43981D5C9A1C4AAEA9C23BB1D4FA126BA9BC7020A25E0AE4AA841EA25DC5',
color: colors.axlweth,
color: colors.weth,
logo: axlweth,
decimals: 18,
},

1
src/functions/convertPercentage.ts
View File

@ -4,5 +4,6 @@ export const convertPercentage = (percent: number) => {
let percentage = percent
if (percent >= 100) percentage = 100
if (percent !== 0 && percent < 0.01) percentage = 0.01
if (percent > 99.99) percentage = 100
return Number(formatValue(percentage, 0, 2, false, false, false, false, false))
}

8
src/functions/redbank/produceUpdatedAssetData.ts
View File

@ -14,10 +14,14 @@ export const produceUpdatedAssetData = (
// For first use, when the user has no borrow balance yet and this list will be empty
if (!alreadyPresent) {
const asset = redBankAssets.find((redBankAsset) => redBankAsset.denom === denom)
if (!asset) return assetData
const additionalDecimals = asset.decimals - baseCurrencyDecimals
const amountAdjustedForDecimals = demagnify(updateAmount, additionalDecimals)
// We are only interested in display currency balance. The asset will update post tx.
assetData.push({
...asset!,
[key]: updateAmount,
...asset,
[key]: amountAdjustedForDecimals,
})
return assetData
}

6
src/styles/_assets.module.scss
View File

@ -5,9 +5,9 @@
mars: $colorTokenMARS;
osmo: $colorTokenOSMO;
atom: $colorTokenATOM;
axlusdc: $colorTokenAxlUSDC;
axlwbtc: $colorTokenAxlWBTC;
axlweth: $colorTokenAxlWETH;
usdc: $colorTokenUSDC;
wbtc: $colorTokenWBTC;
weth: $colorTokenWETH;
juno: $colorTokenJUNO;
statom: $colorTokenStATOM;

579
src/styles/_master.public.scss
View File

@ -1,579 +0,0 @@
@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;

6
src/styles/_master.scss
View File

@ -32,11 +32,11 @@ $colorInfoVoteAgainst: #eb9e49;
$colorTokenMARS: #a03b45;
$colorTokenOSMO: #9f1ab9;
$colorTokenATOM: #6f7390;
$colorTokenAxlUSDC: #478edc;
$colorTokenUSDC: #478edc;
$colorTokenJUNO: black;
$colorTokenStATOM: #e50571;
$colorTokenAxlWBTC: #f09242;
$colorTokenAxlWETH: #343434;
$colorTokenWBTC: #f09242;
$colorTokenWETH: #343434;
$colorGradientOSMO: linear-gradient(to bottom, #3a02e2, #e700ca);
$colorGradientATOM: linear-gradient(to bottom, #2e3148, #6f7390);