Merge branch 'main' into develop

mars-protocol · Aug 30, 2024 · 116eac3 · 116eac3
2 parents bf1c570 + fa01a24
commit 116eac3
Show file tree

Hide file tree

Showing 10 changed files with 136 additions and 86 deletions.
diff --git a/src/components/Modals/AstroLp/AstroLpWithdraw.tsx b/src/components/Modals/AstroLp/AstroLpWithdraw.tsx
@@ -9,7 +9,6 @@ import Card from 'components/common/Card'
 import Text from 'components/common/Text'
 import TokenInputWithSlider from 'components/common/TokenInput/TokenInputWithSlider'
 import { BN_ZERO } from 'constants/math'
-import { useUpdatedAccount } from 'hooks/accounts/useUpdatedAccount'
 import useAssets from 'hooks/assets/useAssets'
 import useStakedAstroLpRewards from 'hooks/incentives/useStakedAstroLpRewards'
 import useStore from 'store'
@@ -21,14 +20,20 @@ import checkAutoLendEnabled from 'utils/checkAutoLendEnabled'
 interface Props {
   account: Account
   astroLp: DepositedAstroLp
+  simulateUnstakeAstroLp: (
+    isAutoLend: boolean,
+    BNCoin: BNCoin,
+    astroLp: DepositedAstroLp,
+    currentLpRewards: BNCoin[],
+  ) => void
 }
 
 export default function AstroLpWithdraw(props: Props) {
-  const { account, astroLp } = props
+  const { account, astroLp, simulateUnstakeAstroLp } = props
+
   const { mutate } = useSWRConfig()
   const { data: assets } = useAssets()
   const astroLpAsset = assets.find(byDenom(astroLp.denoms.lp))
-  const { simulateUnstakeAstroLp } = useUpdatedAccount(account)
   const [withdrawAmount, setWithdrawAmount] = useState(BN_ZERO)
   const withdrawFromAstroLps = useStore((s) => s.withdrawFromAstroLps)
   const chainConfig = useStore((s) => s.chainConfig)

diff --git a/src/components/Modals/AstroLp/index.tsx b/src/components/Modals/AstroLp/index.tsx
@@ -34,8 +34,13 @@ function AstroLpModal(props: Props) {
     useStore.setState({ farmModal: null })
   }, [])
 
-  const { addedDebts, removedDeposits, removedLends, simulateAstroLpDeposit } =
-    useUpdatedAccount(currentAccount)
+  const {
+    addedDebts,
+    removedDeposits,
+    removedLends,
+    simulateAstroLpDeposit,
+    simulateUnstakeAstroLp,
+  } = useUpdatedAccount(currentAccount)
 
   return (
     <Modal
@@ -64,7 +69,11 @@ function AstroLpModal(props: Props) {
           simulateAstroLpDeposit={simulateAstroLpDeposit}
         />
       ) : (
-        <AstroLpWithdraw account={currentAccount} astroLp={astroLp as DepositedAstroLp} />
+        <AstroLpWithdraw
+          account={currentAccount}
+          simulateUnstakeAstroLp={simulateUnstakeAstroLp}
+          astroLp={astroLp as DepositedAstroLp}
+        />
       )}
     </Modal>
   )

diff --git a/src/components/Modals/Settings/index.tsx b/src/components/Modals/Settings/index.tsx
@@ -30,7 +30,7 @@ import useStore from 'store'
 import { getCurrentChainId } from 'utils/getCurrentChainId'
 import { BN } from 'utils/helpers'
 
-const slippages = [0.02, 0.03]
+const slippages = [0.01, 0.02]
 
 export default function SettingsModal() {
   const chainConfig = useChainConfig()

diff --git a/src/components/account/AccountBalancesTable/Columns/Size.tsx b/src/components/account/AccountBalancesTable/Columns/Size.tsx
@@ -46,7 +46,7 @@ export default function Size(props: Props) {
 
   const formattedAmount = formatAmountToPrecision(size, MAX_AMOUNT_DECIMALS)
   const minimumAmount = allowZero ? 0 : MIN_AMOUNT
-  const lowAmount = formattedAmount === 0 ? minimumAmount : Math.max(formattedAmount, MIN_AMOUNT)
+  const lowAmount = formattedAmount === 0 ? minimumAmount : formattedAmount
 
   return (
     <FormattedNumber

diff --git a/src/components/common/AvailableLiquidityMessage.tsx b/src/components/common/AvailableLiquidityMessage.tsx
@@ -10,7 +10,7 @@ export default function AvailableLiquidityMessage(props: Props) {
   return (
     <div className='flex items-start p-4 bg-white/5'>
       <div className='flex flex-col gap-2'>
-        <Text size='sm'>Not enough Liquidty!</Text>
+        <Text size='sm'>Not enough Liquidity!</Text>
         <Text size='xs' className='text-white/40'>
           {`This transaction would exceed the amount of ${market.asset.symbol} currently available for borrowing on Mars.`}
         </Text>

diff --git a/src/components/common/Callout.tsx b/src/components/common/Callout.tsx
@@ -5,7 +5,7 @@ import { ExclamationMarkTriangle, InfoCircle } from 'components/common/Icons'
 import Text from 'components/common/Text'
 
 interface Props {
-  children: string
+  children: string | React.ReactNode
   className?: string
   type: CalloutType
 }

diff --git a/src/components/common/RouteInfo.tsx b/src/components/common/RouteInfo.tsx
@@ -1,12 +1,14 @@
 import classNames from 'classnames'
 import DisplayCurrency from 'components/common/DisplayCurrency'
 import Divider from 'components/common/Divider'
-import { FormattedNumber } from 'components/common/FormattedNumber'
-import { ChevronDown } from 'components/common/Icons'
 import SummaryLine from 'components/common/SummaryLine'
 import Text from 'components/common/Text'
+import useChainConfig from 'hooks/chain/useChainConfig'
 import useToggle from 'hooks/common/useToggle'
 import { BNCoin } from 'types/classes/BNCoin'
+import { ChevronDown } from 'components/common/Icons'
+import { ChainInfoID } from 'types/enums'
+import { FormattedNumber } from 'components/common/FormattedNumber'
 import { formatValue } from 'utils/formatters'
 
 interface Props {
@@ -28,6 +30,7 @@ export interface SwapAssets {
 
 export function RouteInfo(props: Props) {
   const [showSummary, setShowSummary] = useToggle()
+  const chainConfig = useChainConfig()
 
   return (
     <div className='flex flex-col'>
@@ -54,22 +57,27 @@ export function RouteInfo(props: Props) {
             <FormattedNumber
               amount={props.route.priceImpact.toNumber() || 0}
               options={{ suffix: '%' }}
+              className={classNames({
+                'text-info': props.route.priceImpact.toNumber() > 5,
+              })}
             />
           </SummaryLine>
-          <SummaryLine
-            label={`Swap fees ${
-              props.route.fee
-                ? formatValue(props.route.fee.times(100).decimalPlaces(2).toNumber(), {
-                    prefix: '(',
-                    suffix: '%)',
-                  })
-                : ''
-            }`}
-          >
-            <DisplayCurrency
-              coin={BNCoin.fromDenomAndBigNumber(props.assets.in.denom, props.route.fee)}
-            />
-          </SummaryLine>
+          {chainConfig.isOsmosis && (
+            <SummaryLine
+              label={`Swap fees ${
+                props.route.fee
+                  ? formatValue(props.route.fee.times(100).decimalPlaces(2).toNumber(), {
+                      prefix: '(',
+                      suffix: '%)',
+                    })
+                  : ''
+              }`}
+            >
+              <DisplayCurrency
+                coin={BNCoin.fromDenomAndBigNumber(props.assets.in.denom, props.route.fee)}
+              />
+            </SummaryLine>
+          )}
           <SummaryLine label='Route'>{props.route.description}</SummaryLine>
           {props.tradeInfo && (
             <SummaryLine label={`Min receive (${props.tradeInfo.slippage * 100}% slippage)`}>

diff --git a/src/components/earn/farm/astroLp/ActiveAstroLps.tsx b/src/components/earn/farm/astroLp/ActiveAstroLps.tsx
@@ -5,6 +5,7 @@ import ActiveAstroLpsTable from 'components/earn/farm/astroLp/Table/ActiveAstroL
 import useActiveAstroLpsColumns from 'components/earn/farm/astroLp/Table/Columns/useActiveAstroLpsColumns'
 import useAssets from 'hooks/assets/useAssets'
 import useDepositedAstroLps from 'hooks/astroLp/useDepositedAstroLps'
+
 export function ActiveAstroLps() {
   const { data: assets } = useAssets()
   const activeAstroLps = useDepositedAstroLps()

diff --git a/src/components/trade/TradeModule/SwapForm/TradeSummary.tsx b/src/components/trade/TradeModule/SwapForm/TradeSummary.tsx
@@ -1,6 +1,7 @@
 import classNames from 'classnames'
 
 import ActionButton from 'components/common/Button/ActionButton'
+import { Callout, CalloutType } from 'components/common/Callout'
 import { CircularProgress } from 'components/common/CircularProgress'
 import Divider from 'components/common/Divider'
 import { FormattedNumber } from 'components/common/FormattedNumber'
@@ -12,6 +13,8 @@ import useSlippage from 'hooks/settings/useSlippage'
 import { useMemo } from 'react'
 import { formatPercent } from 'utils/formatters'
 import { getMinAmountOutFromRouteInfo } from 'utils/swap'
+import useStore from 'store'
+import Button from 'components/common/Button'
 
 interface Props {
   borrowAmount: BigNumber
@@ -60,68 +63,92 @@ export default function TradeSummary(props: Props) {
   }, [isAdvanced, direction, sellAsset.symbol, buyAsset.symbol])
 
   return (
-    <div
-      className={classNames(
-        containerClassName,
-        'flex flex-1 flex-col bg-white/5 rounded border border-white/20',
+    <div className='flex flex-col w-full space-y-2'>
+      {routeInfo && routeInfo.priceImpact.toNumber() > 5 && (
+        <Callout type={CalloutType.WARNING}>
+          Your trade's price impact exceeds 5%. Please review the Summary before submitting the
+          transaction.
+        </Callout>
       )}
-    >
-      <div className='flex flex-col flex-1 m-3'>
-        <SummaryLine label='Liquidation Price'>
-          <div className='flex h-2'>
-            {isUpdatingLiquidationPrice ? (
-              <CircularProgress size={10} />
-            ) : liquidationPrice === null || liquidationPrice === 0 ? (
-              '-'
-            ) : (
-              <FormattedNumber
-                className='inline'
-                amount={liquidationPrice}
-                options={{ abbreviated: true, prefix: `${props.buyAsset.symbol} = $` }}
-              />
-            )}
-          </div>
-        </SummaryLine>
-        <Divider className='my-2' />
-        {isMargin && (
-          <>
-            <SummaryLine label='Borrowing'>
-              <FormattedNumber
-                amount={borrowAmount.toNumber()}
-                options={{
-                  decimals: sellAsset.decimals,
-                  maxDecimals: sellAsset.decimals,
-                  minDecimals: 0,
-                  suffix: ` ${sellAsset.symbol}`,
-                  abbreviated: true,
-                  rounded: true,
-                }}
-              />
-            </SummaryLine>
-            <SummaryLine label='Borrow Rate APY'>
-              <span>{formatPercent(borrowRate || 0)}</span>
-            </SummaryLine>
-            <Divider className='my-2' />
-          </>
-        )}
-        {routeInfo && (
-          <RouteInfo
-            title='Summary'
-            route={routeInfo}
-            assets={{ in: sellAsset, out: buyAsset }}
-            tradeInfo={{ slippage, minReceive }}
-          />
+      {routeInfo && slippage * 100 > 1 && (
+        <Callout type={CalloutType.WARNING}>
+          Your slippage exceeds 1%. Please review the Summary before submitting the transaction or
+          change your Slippage in the
+          <span className='inline-block'>
+            <Button
+              onClick={() => useStore.setState({ settingsModal: true })}
+              variant='transparent'
+              color='quaternary'
+              size='xs'
+              className='underline hover:no-underline'
+              text='Settings'
+            />
+          </span>
+        </Callout>
+      )}
+      <div
+        className={classNames(
+          containerClassName,
+          'flex flex-1 flex-col bg-white/5 rounded border border-white/20',
         )}
+      >
+        <div className='flex flex-col flex-1 m-3'>
+          <SummaryLine label='Liquidation Price'>
+            <div className='flex h-2'>
+              {isUpdatingLiquidationPrice ? (
+                <CircularProgress size={10} />
+              ) : liquidationPrice === null || liquidationPrice === 0 ? (
+                '-'
+              ) : (
+                <FormattedNumber
+                  className='inline'
+                  amount={liquidationPrice}
+                  options={{ abbreviated: true, prefix: `${props.buyAsset.symbol} = $` }}
+                />
+              )}
+            </div>
+          </SummaryLine>
+          <Divider className='my-2' />
+          {isMargin && (
+            <>
+              <SummaryLine label='Borrowing'>
+                <FormattedNumber
+                  amount={borrowAmount.toNumber()}
+                  options={{
+                    decimals: sellAsset.decimals,
+                    maxDecimals: sellAsset.decimals,
+                    minDecimals: 0,
+                    suffix: ` ${sellAsset.symbol}`,
+                    abbreviated: true,
+                    rounded: true,
+                  }}
+                />
+              </SummaryLine>
+              <SummaryLine label='Borrow Rate APY'>
+                <span>{formatPercent(borrowRate || 0)}</span>
+              </SummaryLine>
+              <Divider className='my-2' />
+            </>
+          )}
+          {routeInfo && (
+            <RouteInfo
+              title='Summary'
+              route={routeInfo}
+              assets={{ in: sellAsset, out: buyAsset }}
+              tradeInfo={{ slippage, minReceive }}
+            />
+          )}
+        </div>
+        <ActionButton
+          disabled={buyButtonDisabled}
+          showProgressIndicator={showProgressIndicator}
+          text={buttonText}
+          onClick={buyAction}
+          size='md'
+          color='primary'
+          className='w-full'
+        />
       </div>
-      <ActionButton
-        disabled={buyButtonDisabled}
-        showProgressIndicator={showProgressIndicator}
-        text={buttonText}
-        onClick={buyAction}
-        size='md'
-        color='primary'
-        className='w-full'
-      />
     </div>
   )
 }
diff --git a/src/constants/defaultSettings.ts b/src/constants/defaultSettings.ts
@@ -11,7 +11,7 @@ export const getDefaultChainSettings = (chainConfig: ChainConfig) => {
     tradingPairSimple: chainConfig.defaultTradingPair,
     tradingPairAdvanced: chainConfig.defaultTradingPair,
     displayCurrency: ORACLE_DENOM,
-    slippage: 0.02,
+    slippage: 0.01,
     tutorial: true,
     migrationBanner: true,
     perpsAsset: '',