Merge pull request #30 from mars-protocol/v1.4.8

v1.4.8

package.json

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

src/components/common/CellAmount/CellAmount.tsx

@@ -20,7 +20,7 @@ export const CellAmount = ({ denom, decimals, amount, noBalanceText }: Props) =>
       <p className='m'>
         <AnimatedNumber
           amount={assetAmount > 0 && assetAmount < 0.01 ? 0.01 : assetAmount}
-          suffix={assetAmount > 0 && assetAmount < 0.01 ? '< ' : false}
+          prefix={assetAmount > 0 && assetAmount < 0.01 ? '< ' : false}
         />
       </p>
       {amount === 0 ? (

src/components/common/Checkbox/Checkbox.module.scss

@@ -1,36 +1,47 @@
 @import 'src/styles/master';
 
-.container {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
+.wrapper {
+  position: relative;
 
   .checkbox {
-    appearance: none;
-    margin-right: space(3);
+    display: none;
+
+    &:checked {
+      & + .label:after {
+        transform: scale(1);
+      }
+    }
+  }
+
+  .label {
+    display: flex;
+    align-items: center;
     cursor: pointer;
+    @include padding(4, 0, 0, 6);
 
-    font: inherit;
-    width: 1rem;
-    height: 1rem;
-    border: 1.5px solid $alphaWhite40;
-    border-radius: $borderRadiusXS;
-    display: grid;
-    place-content: center;
-
-    &::before {
+    &:before {
       content: '';
-      width: 0.5rem;
-      height: 0.5rem;
+      width: space(3);
+      height: space(3);
+      border: 1.5px solid $alphaWhite40;
+      border-radius: $borderRadiusXS;
+      position: absolute;
+      top: space(5);
+      left: 0;
+    }
+
+    &:after {
+      content: '';
+      width: space(2);
+      height: space(2);
       clip-path: polygon(14% 44%, 0% 65%, 40% 95%, 100% 26%, 85% 10%, 38% 62%);
       transform: scale(0);
       transform-origin: center center;
       transition: 100ms transform ease-in-out;
-      box-shadow: inset 1rem 1rem $colorWhite;
-    }
-
-    &:checked::before {
-      transform: scale(1);
+      box-shadow: inset space(3) space(3) $colorWhite;
+      position: absolute;
+      top: space(6);
+      left: space(1);
     }
   }
 }

src/components/common/Checkbox/Checkbox.tsx

@@ -1,4 +1,5 @@
-import React, { useState } from 'react'
+import classNames from 'classnames'
+import { useState } from 'react'
 
 import styles from './Checkbox.module.scss'
 
@@ -6,6 +7,7 @@ interface Props {
   text: string
   className?: string
   onChecked: (isChecked: boolean) => void
+  name?: string
 }
 
 export const Checkbox = (props: Props) => {
@@ -16,9 +18,17 @@ export const Checkbox = (props: Props) => {
     props.onChecked(!isChecked)
   }
   return (
-    <label className={`${props.className} ${styles.container}`}>
-      <input type='checkbox' onChange={handleChange} className={styles.checkbox} />
-      {props.text}
-    </label>
+    <div className={styles.wrapper}>
+      <input
+        type='checkbox'
+        onChange={handleChange}
+        className={styles.checkbox}
+        name={`${props.name}-checkbox`}
+        id={props.name}
+      />
+      <label htmlFor={props.name} className={classNames(props.className, styles.label)}>
+        {props.text}
+      </label>
+    </div>
   )
 }

src/components/common/TermsOfService/TermsOfService.module.scss

@@ -14,20 +14,15 @@
 
   .card {
     max-width: min(rem-calc(500), 95vw);
-    @include padding(2, 4, 4, 4);
+    @include padding(2, 4, 8, 4);
+    max-height: 100vh;
+    overflow-y: auto;
 
     .subtitle {
       text-align: center;
       @include padding(4, 0, 0, 0);
     }
 
-    .checkbox {
-      display: grid;
-      grid-template-columns: auto auto;
-      align-items: baseline;
-      @include margin(4, 0);
-    }
-
     .btn {
       @include margin(6, 0, 0);
       width: 100%;

src/components/common/TermsOfService/TermsOfService.tsx

@@ -42,11 +42,13 @@ export const TermsOfService = () => {
           className={styles.checkbox}
           onChecked={(isChecked) => setIsFirstAccepted(isChecked)}
           text={t('common.termsOfService.term1')}
+          name='term1'
         />
         <Checkbox
           className={styles.checkbox}
           onChecked={(isChecked) => setIsSecondAccepted(isChecked)}
           text={t('common.termsOfService.term2')}
+          name='term2'
         />
         <Button
           onClick={onTermsConfirmed}

src/components/common/Tooltip/Apy.tsx

@@ -16,7 +16,7 @@ export const Apy = ({ apyData, leverage, borrowRate }: Props) => {
 
   const totalApy = useMemo(
     () => (apyData.total ?? 0) * leverage - borrowRate ?? 0,
-    [apyData, leverage],
+    [apyData, leverage, borrowRate],
   )
   const leveragedApy = useMemo(() => (apyData.total ?? 0) * leverage, [apyData, leverage])
   const performanceFee = apyData.fees && apyData.fees[0].value > 0 ? apyData.fees[0] : null

src/components/common/TxModal/Action.tsx

@@ -85,7 +85,6 @@ 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,7 +134,6 @@ export const Action = ({
         amount * currentAssetPrice, // amount in display currency
         activeView,
         relevantBalanceKey,
-        baseCurrencyDecimals,
       ),
     [
       activeView,
@@ -145,7 +143,6 @@ export const Action = ({
       denom,
       redBankAssets,
       relevantBalanceKey,
-      baseCurrencyDecimals,
     ],
   )
 
@@ -157,7 +154,6 @@ export const Action = ({
       0.0,
       activeView,
       relevantBalanceKey,
-      baseCurrencyDecimals,
     ),
     relevantBalanceKey,
   )
@@ -231,11 +227,18 @@ export const Action = ({
         .shiftedBy(baseCurrency.decimals - (currentAsset?.decimals || 0))
         .toNumber(),
     )
-  }, [denom, availableBalanceBaseCurrency, currentAssetPrice, marketAssetLiquidity])
+  }, [
+    denom,
+    availableBalanceBaseCurrency,
+    currentAssetPrice,
+    marketAssetLiquidity,
+    baseCurrency.decimals,
+    currentAsset?.decimals,
+  ])
 
   const repayMax = useMemo((): number => {
     return Math.min(assetBorrowBalance, walletBalance)
-  }, [assetBorrowBalance, walletBalance, denom, baseCurrency.denom])
+  }, [assetBorrowBalance, walletBalance])
 
   const maxWithdrawableAmount = useMemo((): number => {
     const assetLtvRatio = findByDenom(marketInfo, denom)?.max_loan_to_value || 0
@@ -268,6 +271,7 @@ export const Action = ({
     totalBorrowBaseCurrencyAmount,
     marketInfo,
     marketAssetLiquidity,
+    baseCurrency.decimals,
   ])
 
   const maxUsableAmount = useMemo(() => {

src/functions/redbank/produceUpdatedAssetData.test.tsx

@@ -12,7 +12,6 @@ describe('produceUpdatedAssetData', () => {
       100,
       ViewType.Deposit,
       'borrowBalanceBaseCurrency',
-      6,
     )
     expect(assets.length).toBe(1)
     expect(assets[0]).toEqual({
@@ -28,7 +27,6 @@ describe('produceUpdatedAssetData', () => {
       100,
       ViewType.Deposit,
       'borrowBalanceBaseCurrency',
-      6,
     )
     expect(assets.length).toBe(2)
     expect(assets[1]).toEqual({
@@ -44,7 +42,6 @@ describe('produceUpdatedAssetData', () => {
       100,
       ViewType.Deposit,
       'borrowBalanceBaseCurrency',
-      6,
     )
     expect(assets.length).toBe(2)
     expect(assets[1]).toEqual({
@@ -62,7 +59,6 @@ describe('produceUpdatedAssetData', () => {
         50,
         ViewType.Deposit,
         'depositBalanceBaseCurrency',
-        6,
       )
       expect(assets.length).toBe(1)
       expect(assets[0]).toEqual({
@@ -78,7 +74,6 @@ describe('produceUpdatedAssetData', () => {
         100,
         ViewType.Deposit,
         'depositBalanceBaseCurrency',
-        6,
       )
       expect(assets.length).toBe(1)
       expect(assets[0]).toEqual({
@@ -97,7 +92,6 @@ describe('produceUpdatedAssetData', () => {
         50,
         ViewType.Borrow,
         'borrowBalanceBaseCurrency',
-        6,
       )
       expect(assets.length).toBe(1)
       expect(assets[0]).toEqual({
@@ -113,7 +107,6 @@ describe('produceUpdatedAssetData', () => {
         100,
         ViewType.Borrow,
         'borrowBalanceBaseCurrency',
-        6,
       )
       expect(assets.length).toBe(1)
       expect(assets[0]).toEqual({
@@ -132,7 +125,6 @@ describe('produceUpdatedAssetData', () => {
         100,
         ViewType.Repay,
         'borrowBalanceBaseCurrency',
-        6,
       )
       expect(assets.length).toBe(1)
       expect(assets[0]).toEqual({

src/functions/redbank/produceUpdatedAssetData.ts

@@ -1,4 +1,3 @@
-import { demagnify } from 'libs/parse'
 import { ViewType } from 'types/enums'
 
 export const produceUpdatedAssetData = (
@@ -8,7 +7,6 @@ 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
@@ -16,19 +14,15 @@ export const produceUpdatedAssetData = (
     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]: amountAdjustedForDecimals,
+      [key]: updateAmount,
     })
     return assetData
   }
 
   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]
@@ -37,8 +31,8 @@ export const produceUpdatedAssetData = (
       // if we are repaaying or redeeming, we decrease the amount
       updatedAssetbaseCurrencyBalance =
         activeView === ViewType.Borrow || activeView === ViewType.Deposit
-          ? assetbaseCurrencyBalance + amountAdjustedForDecimals
-          : assetbaseCurrencyBalance - amountAdjustedForDecimals
+          ? assetbaseCurrencyBalance + updateAmount
+          : assetbaseCurrencyBalance - updateAmount
     }
     newAsset[key] = updatedAssetbaseCurrencyBalance
     return newAsset

src/store/slices/redBank.ts

@@ -2,7 +2,7 @@ import { Coin } from '@cosmjs/stargate'
 import { MARS_SYMBOL } from 'constants/appConstants'
 import { SECONDS_IN_YEAR } from 'constants/timeConstants'
 import { findByDenom } from 'functions'
-import { demagnify, lookupDenomBySymbol } from 'libs/parse'
+import { lookupDenomBySymbol } from 'libs/parse'
 import isEqual from 'lodash.isequal'
 import { RedBankSlice } from 'store/interfaces/redBank.interface'
 import { Store } from 'store/interfaces/store.interface'
@@ -97,19 +97,18 @@ const redBankSlice = (set: NamedSet<Store>, get: GetState<Store>): RedBankSlice
         { denom: asset.denom, amount: depositLiquidity.toString() },
       )
 
-      const additionalDecimals = asset.decimals - get().baseCurrency.decimals
       const redBankAsset: RedBankAsset = {
         ...asset,
         walletBalance: assetWallet?.amount.toString(),
         depositBalance: depositBalance.toString(),
         depositBalanceBaseCurrency: convertToBaseCurrency({
           denom: asset.denom,
-          amount: demagnify(depositBalance, additionalDecimals).toString(),
+          amount: depositBalance.toString(),
         }),
         borrowBalance: borrowBalance.toString(),
         borrowBalanceBaseCurrency: convertToBaseCurrency({
           denom: asset.denom,
-          amount: demagnify(borrowBalance, additionalDecimals).toString(),
+          amount: borrowBalance.toString(),
         }),
         borrowRate: borrowApy * 100 >= 0.01 ? borrowApy * 100 : 0.0,
         apy: depositApy * 100 >= 0.01 ? depositApy * 100 : 0.0,