v1.4.5

package.json

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

src/components/common/TxModal/Action.tsx

@@ -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 =
+    // When withdrawing, we have to remove the slippage, otherwise we can't actually hit the borrow limit.
-      availableBalanceBaseCurrency / (currentAssetPrice * assetLtvRatio)
+    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,

src/configs/osmo-test-4.ts

@@ -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,

src/configs/osmosis-1.ts

@@ -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,
   },

src/functions/convertPercentage.ts

@@ -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))
 }

src/functions/redbank/produceUpdatedAssetData.ts

@@ -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!,
+      ...asset,
-      [key]: updateAmount,
+      [key]: amountAdjustedForDecimals,
     })
     return assetData
   }

src/styles/_assets.module.scss

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

src/styles/_master.public.scss

@@ -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;

src/styles/_master.scss

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