v2.0.5 (#636)

* fix: fixed the trading chart load * fix: prevent wrapped checkboxes to be double clicked * fix: refactored funding account modal * fix: fixed modal classes * fix: adjusted width classes * fix: fixed the slider masks * listed: TIA and USDT * fix: fixed the slider initial position * env: version update
2023-11-15 16:27:05 +01:00 · 2023-11-15 16:27:05 +01:00 · b0c9cca51c
commit b0c9cca51c
parent e11875f74f
17 changed files with 145 additions and 81 deletions
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "mars-v2-frontend",
-  "version": "2.0.4",
+  "version": "2.0.5",
  "private": true,
  "scripts": {
    "build": "yarn validate-env && next build",
--- a/src/api/prices/getPrices.ts
+++ b/src/api/prices/getPrices.ts
@ -1,10 +1,8 @@
 import getOraclePrices from 'api/prices/getOraclePrices'
 import getPoolPrice from 'api/prices/getPoolPrice'
 import fetchPythPrices from 'api/prices/getPythPrices'
-import { ENV } from 'constants/env'
 import useStore from 'store'
 import { BNCoin } from 'types/classes/BNCoin'
-import { NETWORK } from 'types/enums/network'
 import { partition } from 'utils/array'
 import { getAssetsMustHavePriceInfo } from 'utils/assets'

@ -59,13 +57,13 @@ function separateAssetsByPriceSources(assets: Asset[]) {
  // Only fetch Pyth prices for mainnet
  const [assetsWithPythPriceFeedId, assetsWithoutPythPriceFeedId] = partition(
    assets,
-    (asset) => !!asset.pythPriceFeedId && ENV.NETWORK === NETWORK.MAINNET,
+    (asset) => !!asset.pythPriceFeedId,
  )

  // Don't get oracle price if it's not mainnet and there is a poolId
  const [assetsWithOraclePrice, assetsWithoutOraclePrice] = partition(
    assetsWithoutPythPriceFeedId,
-    (asset) => (asset.hasOraclePrice && ENV.NETWORK === NETWORK.MAINNET) || !asset.poolId,
+    (asset) => asset.hasOraclePrice || !asset.poolId,
  )
  const assetsWithPoolId = assetsWithoutOraclePrice.filter((asset) => !!asset.poolId)

--- a/src/components/Account/AccountSummary.tsx
+++ b/src/components/Account/AccountSummary.tsx
@ -74,7 +74,7 @@ export default function AccountSummary(props: Props) {

  if (!props.account) return null
  return (
-    <div className='h-[546px] min-w-92.5 basis-92.5 max-w-screen overflow-y-scroll scrollbar-hide'>
+    <div className='h-[546px] max-w-screen overflow-y-scroll scrollbar-hide w-93.5'>
      <Card className='mb-4 h-min min-w-fit bg-white/10' contentClassName='flex'>
        <Item label='Net worth' classes='flex-1'>
          <DisplayCurrency
--- a/src/components/Checkbox.tsx
+++ b/src/components/Checkbox.tsx
@ -8,19 +8,27 @@ interface Props {
  onChange: (checked: boolean) => void
  name: string
  text?: string
+  noMouseEvents?: boolean
 }

 export default function Checkbox(props: Props) {
  return (
    <>
-      <label className='flex items-center gap-2 border-white cursor-pointer'>
-        <input
-          onChange={() => props.onChange(props.checked)}
-          name={props.name}
-          checked={props.checked}
-          type='checkbox'
-          className='absolute w-0 h-0 opacity-0'
-        />
+      <input
+        onChange={() => props.onChange(props.checked)}
+        id={`checkbox-${props.name}`}
+        name={props.name}
+        checked={props.checked}
+        type='checkbox'
+        className={classNames('peer hidden')}
+      />
+      <label
+        className={classNames(
+          'flex items-center gap-2 border-white cursor-pointer',
+          props.noMouseEvents && 'pointer-events-none',
+        )}
+        htmlFor={`checkbox-${props.name}`}
+      >
        <div
          className={classNames(
            'h-5 w-5 rounded-sm p-0.5',
--- a/src/components/Modals/AssetsSelect/useAssetTableColumns.tsx
+++ b/src/components/Modals/AssetsSelect/useAssetTableColumns.tsx
@ -38,6 +38,7 @@ export default function useAssetTableColumns(isBorrow: boolean) {
                name={`asset-${asset.id.toLowerCase()}`}
                checked={row.getIsSelected()}
                onChange={row.getToggleSelectedHandler()}
+                noMouseEvents
              />
              <AssetImage asset={asset} size={24} className='ml-4' />
              <div className='ml-2 text-left'>
--- a/src/components/Modals/FundWithdraw/FundAndWithdrawModalContent.tsx
+++ b/src/components/Modals/FundWithdraw/FundAndWithdrawModalContent.tsx
@ -1,24 +1,14 @@
-import AccountSummary from 'components/Account/AccountSummary'
-import Card from 'components/Card'
 import FundAccount from 'components/Modals/FundWithdraw/FundAccount'
 import WithdrawFromAccount from 'components/Modals/FundWithdraw/WithdrawFromAccount'

 interface Props {
-  account: Account
+  account?: Account
  isFunding: boolean
 }

 export default function FundWithdrawModalContent(props: Props) {
  const { account, isFunding } = props
-  return (
-    <div className='flex items-start flex-1 gap-6 p-6'>
-      <Card
-        className='flex flex-1 p-4 bg-white/5'
-        contentClassName='gap-6 flex flex-col justify-between h-full min-h-[380px]'
-      >
-        {isFunding ? <FundAccount account={account} /> : <WithdrawFromAccount account={account} />}
-      </Card>
-      <AccountSummary account={account} />
-    </div>
-  )
+  if (!account) return null
+  if (isFunding) return <FundAccount account={account} />
+  return <WithdrawFromAccount account={account} />
 }
--- a/src/components/Modals/FundWithdraw/index.tsx
+++ b/src/components/Modals/FundWithdraw/index.tsx
@ -1,12 +1,13 @@
-import { CircularProgress } from 'components/CircularProgress'
-import Modal from 'components/Modal'
 import FundWithdrawModalContent from 'components/Modals/FundWithdraw/FundAndWithdrawModalContent'
+import ModalContentWithSummary from 'components/Modals/ModalContentWithSummary'
 import Text from 'components/Text'
-import useCurrentAccount from 'hooks/useCurrentAccount'
+import useAccount from 'hooks/useAccount'
+import useAccountId from 'hooks/useAccountId'
 import useStore from 'store'

 export default function FundAndWithdrawModal() {
-  const currentAccount = useCurrentAccount()
+  const accountId = useAccountId()
+  const { data: account } = useAccount(accountId ?? undefined)
  const modal = useStore<string | null>((s) => s.fundAndWithdrawModal)
  const isFunding = modal === 'fund'

@ -16,27 +17,20 @@ export default function FundAndWithdrawModal() {

  if (!modal) return null
  return (
-    <Modal
-      onClose={onClose}
+    <ModalContentWithSummary
+      account={account}
+      isContentCard
      header={
        <span className='flex items-center gap-4 px-4'>
          <Text>
            {isFunding
-              ? `Fund Credit Account ${currentAccount?.id ?? '0'}`
-              : `Withdraw from Credit Account ${currentAccount?.id ?? '0'}`}
+              ? `Fund Credit Account ${accountId ?? ''}`
+              : `Withdraw from Credit Account ${accountId ?? ''}`}
          </Text>
        </span>
      }
-      headerClassName='gradient-header pl-2 pr-2.5 py-2.5 border-b-white/5 border-b'
-      contentClassName='flex flex-col min-h-[400px]'
-    >
-      {modal && currentAccount ? (
-        <FundWithdrawModalContent account={currentAccount} isFunding={isFunding} />
-      ) : (
-        <div className='flex items-center justify-center w-full h-[380px]'>
-          <CircularProgress />
-        </div>
-      )}
-    </Modal>
+      onClose={onClose}
+      content={<FundWithdrawModalContent account={account} isFunding={isFunding} />}
+    />
  )
 }
--- a/src/components/Modals/ModalContentWithSummary.tsx
+++ b/src/components/Modals/ModalContentWithSummary.tsx
@ -3,12 +3,35 @@ import React from 'react'

 import AccountSummary from 'components/Account/AccountSummary'
 import Card from 'components/Card'
+import { CircularProgress } from 'components/CircularProgress'
 import Modal, { ModalProps } from 'components/Modal'
 import useStore from 'store'

 interface Props extends ModalProps {
-  account: Account
+  account?: Account
  isContentCard?: boolean
+  subHeader?: React.ReactNode
+}
+
+function modalContent(content: React.ReactNode, isContentCard?: boolean, account?: Account) {
+  if (!account)
+    return (
+      <div className='flex items-center justify-center w-full h-[380px]'>
+        <CircularProgress />
+      </div>
+    )
+
+  if (isContentCard)
+    return (
+      <Card
+        className='flex flex-1 p-4 bg-white/5'
+        contentClassName='gap-6 flex flex-col justify-between h-full min-h-[380px]'
+      >
+        {content}
+      </Card>
+    )
+
+  return content
 }

 export default function ModalContentWithSummary(props: Props) {
@ -22,17 +45,9 @@ export default function ModalContentWithSummary(props: Props) {
      )}
      contentClassName={classNames('flex items-start flex-1 gap-6 p-6', props.contentClassName)}
    >
-      {props.isContentCard ? (
-        <Card
-          className='flex flex-1 p-4 bg-white/5'
-          contentClassName='gap-6 flex flex-col justify-between h-full min-h-[380px]'
-        >
-          {props.content}
-        </Card>
-      ) : (
-        props.content
-      )}
-      <AccountSummary account={updatedAccount || props.account} />
+      {props.subHeader && props.subHeader}
+      {modalContent(props.content, props.isContentCard, props.account)}
+      {props.account && <AccountSummary account={updatedAccount || props.account} />}
    </Modal>
  )
 }
--- a/src/components/Modals/Vault/VaultModalContent.tsx
+++ b/src/components/Modals/Vault/VaultModalContent.tsx
@ -136,7 +136,7 @@ export default function VaultModalContent(props: Props) {
  return (
    <div className='flex items-start flex-1 gap-6 p-6'>
      <Accordion
-        className='h-[546px] overflow-y-scroll scrollbar-hide'
+        className='h-[546px] overflow-y-scroll scrollbar-hide flex-1'
        items={[
          {
            renderContent: () => (
--- a/src/components/Slider/Track.tsx
+++ b/src/components/Slider/Track.tsx
@ -16,10 +16,11 @@ export default function Track(props: Props) {
    percentage = ((props.sliderValue - minValue) / (props.maxValue - minValue)) * 100
  }
  return (
-    <div className='relative flex-1 h-1 bg-white/20 rounded-sm w-1'>
+    <div className='relative flex-1 w-1 h-1 rounded-sm bg-white/20'>
      <div
        className={classNames(
-          'h-1 z-1 rounded-sm w-1',
+          'relative z-1',
+          'h-1 rounded-sm w-1',
          'before:absolute',
          'before:top-0 before:bottom-0 before:right-0 before:left-0',
          percentage > 0 && props.bg,
--- a/src/components/Slider/index.tsx
+++ b/src/components/Slider/index.tsx
@ -1,5 +1,5 @@
 import classNames from 'classnames'
-import { ChangeEvent, useRef, useState } from 'react'
+import { ChangeEvent, useEffect, useMemo, useRef, useState } from 'react'
 import Draggable from 'react-draggable'

 import { OverlayMark } from 'components/Icons'
@ -98,6 +98,17 @@ export default function Slider(props: Props) {

  const DraggableElement: any = Draggable

+  const [positionOffset, position] = useMemo(() => {
+    return [
+      { x: (props.value / 100) * -12, y: 0 },
+      { x: (sliderRect.width / 100) * props.value, y: -2 },
+    ]
+  }, [props.value, sliderRect.width])
+
+  useEffect(() => {
+    handleSliderRect()
+  }, [])
+
  return (
    <div>
      <div
@ -164,10 +175,10 @@ export default function Slider(props: Props) {
              axis='x'
              grid={[sliderRect.width / 100, 0]}
              bounds={{ left: 0, right: sliderRect.width }}
-              positionOffset={{ x: (props.value / 100) * -12, y: 0 }}
+              positionOffset={positionOffset}
              onDrag={handleDrag}
              onStop={() => setIsDragging(false)}
-              position={{ x: (sliderRect.width / 100) * props.value, y: -2 }}
+              position={position}
            >
              <div ref={nodeRef} className='absolute z-20 leading-3'>
                <div
@ -202,7 +213,7 @@ export default function Slider(props: Props) {
        )}
      </div>
      {props.leverage && (
-        <div className='pt-2 flex justify-between'>
+        <div className='flex justify-between pt-2'>
          <LeverageLabel
            leverage={1}
            decimals={0}
--- a/src/components/Trade/TradeChart/index.tsx
+++ b/src/components/Trade/TradeChart/index.tsx
@ -2,8 +2,8 @@ import dynamic from 'next/dynamic'
 import Script from 'next/script'
 import { useState } from 'react'

-import { CircularProgress } from 'components/CircularProgress'
 import Card from 'components/Card'
+import { CircularProgress } from 'components/CircularProgress'

 const TVChartContainer = dynamic(
  () => import('components/Trade/TradeChart/TVChartContainer').then((mod) => mod.TVChartContainer),
@ -26,6 +26,9 @@ export default function TradeChart(props: Props) {
        onReady={() => {
          setIsScriptReady(true)
        }}
+        onLoad={() => {
+          setIsScriptReady(true)
+        }}
      />
      {isScriptReady ? (
        <TVChartContainer buyAsset={props.buyAsset} sellAsset={props.sellAsset} />
--- a/src/constants/assets.ts
+++ b/src/constants/assets.ts
@ -157,6 +157,25 @@ export const ASSETS: Asset[] = [
    pythHistoryFeedId: 'Crypto.USDC/USD',
    poolId: ENV.NETWORK === NETWORK.DEVNET ? 678 : 1221,
  },
+  {
+    symbol: 'USDT',
+    id: 'USDT',
+    name: 'Tether',
+    denom: 'ibc/4ABBEF4C8926DDDB320AE5188CFD63267ABBCEFC0583E4AE05D6E5AA2401DDAB',
+    color: '#50af95',
+    logo: '/images/tokens/usdt.svg',
+    decimals: 6,
+    hasOraclePrice: true,
+    isEnabled: true,
+    isMarket: true,
+    isDisplayCurrency: true,
+    isStable: true,
+    isAutoLendEnabled: true,
+    isBorrowEnabled: true,
+    pythPriceFeedId: '0x2b89b9dc8fdf9f34709a5b106b472f0f39bb6ca9ce04b0fd7f2e971688e2e53b',
+    poolId: 1077,
+    pythHistoryFeedId: 'Crypto.USDT/USD',
+  },
  {
    symbol: 'AXL',
    name: 'Axelar',
@ -174,6 +193,24 @@ export const ASSETS: Asset[] = [
    pythHistoryFeedId: 'Crypto.AXL/USD',
    poolId: 812,
  },
+  {
+    symbol: 'INJ',
+    id: 'INJ',
+    name: 'Injective',
+    denom: 'ibc/64BA6E31FE887D66C6F8F31C7B1A80C7CA179239677B4088BB55F5EA07DBE273',
+    color: '#00F2FE',
+    logo: '/images/tokens/inj.svg',
+    decimals: 18,
+    hasOraclePrice: true,
+    isEnabled: true,
+    isMarket: true,
+    isDisplayCurrency: true,
+    isAutoLendEnabled: true,
+    isBorrowEnabled: true,
+    pythPriceFeedId: '0x7a5bc1d2b56ad029048cd63964b3ad2776eadf812edc1a43a31406cb54bff592',
+    poolId: 725,
+    pythHistoryFeedId: 'Crypto.INJ/USD',
+  },
  {
    symbol: 'TIA',
    id: 'TIA',
--- a/src/store/slices/broadcast.ts
+++ b/src/store/slices/broadcast.ts
@ -827,9 +827,10 @@ export default function createBroadcastSlice(
          result: undefined,
          error: 'Transaction failed',
        }
-      } catch (e: unknown) {
-        const error = typeof e === 'string' ? e : 'Transaction failed'
-        return { result: undefined, error }
+      } catch (error) {
+        const e = error as { message: string }
+        console.log(e)
+        return { result: undefined, error: e.message }
      }
    },
  }
--- a/src/types/interfaces/asset.d.ts
+++ b/src/types/interfaces/asset.d.ts
@ -3,38 +3,42 @@ interface Asset {
  name: string
  denom: string
  symbol:
-    | 'OSMO'
    | 'ATOM'
+    | 'AXL'
+    | 'INJ'
    | 'MARS'
+    | 'OSMO'
    | 'stATOM'
    | 'stOSMO'
-    | 'AXL'
    | 'TIA'
    | 'USDC.axl'
    | 'USDC'
+    | 'USDT'
    | 'WBTC.axl'
    | 'WETH.axl'
    | 'OSMO-USDC.n'
-    | '$'
    | 'OSMO-ATOM'
    | 'OSMO-USDC.axl'
    | 'OSMO-WETH.axl'
    | 'OSMO-WBTC.axl'
    | 'stATOM-ATOM'
+    | '$'
  id:
-    | 'OSMO'
    | 'ATOM'
-    | 'MARS'
-    | 'stATOM'
-    | 'stOSMO'
    | 'AXL'
-    | 'TIA'
+    | 'INJ'
    | 'axlUSDC'
    | 'axlWBTC'
    | 'axlWETH'
-    | 'USDC'
-    | 'OSMO-USDC.n'
+    | 'MARS'
+    | 'OSMO'
+    | 'stATOM'
+    | 'stOSMO'
+    | 'TIA'
    | 'USD'
+    | 'USDC'
+    | 'USDT'
+    | 'OSMO-USDC.n'
    | 'gamm/pool/12'
    | 'gamm/pool/1'
    | 'gamm/pool/678'
--- a/src/utils/broadcast.ts
+++ b/src/utils/broadcast.ts
@ -16,6 +16,6 @@ export function getSingleValueFromBroadcastResult(
 export function generateErrorMessage(result: BroadcastResult, errorMessage?: string) {
  const error = result.error ? result.error : result.result?.rawLogs
  if (errorMessage) return errorMessage
-  if (error === 'Transaction failed') return 'Transaction rejected by user'
+  if (error === 'Transaction failed: Request rejected') return 'Transaction rejected by user'
  return `Transaction failed: ${error}`
 }
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -258,6 +258,7 @@ module.exports = {
        60: '240px',
        90: '360px',
        92.5: '370px',
+        93.5: '374px',
        100: '400px',
        110: '440px',
        120: '480px',