Merge branch 'v2.0.5' of https://github.com/mars-protocol/mars-v2-frontend into develop

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

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)}
+        id={`checkbox-${props.name}`}
         name={props.name}
         checked={props.checked}
         type='checkbox'
-          className='absolute w-0 h-0 opacity-0'
+        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',

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'>

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 (
+  if (!account) return null
-    <div className='flex items-start flex-1 gap-6 p-6'>
+  if (isFunding) return <FundAccount account={account} />
-      <Card
+  return <WithdrawFromAccount account={account} />
-        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>
-  )
 }

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
+    <ModalContentWithSummary
-      onClose={onClose}
+      account={account}
+      isContentCard
       header={
         <span className='flex items-center gap-4 px-4'>
           <Text>
             {isFunding
-              ? `Fund Credit Account ${currentAccount?.id ?? '0'}`
+              ? `Fund Credit Account ${accountId ?? ''}`
-              : `Withdraw from Credit Account ${currentAccount?.id ?? '0'}`}
+              : `Withdraw from Credit Account ${accountId ?? ''}`}
           </Text>
         </span>
       }
-      headerClassName='gradient-header pl-2 pr-2.5 py-2.5 border-b-white/5 border-b'
+      onClose={onClose}
-      contentClassName='flex flex-col min-h-[400px]'
+      content={<FundWithdrawModalContent account={account} isFunding={isFunding} />}
-    >
+    />
-      {modal && currentAccount ? (
-        <FundWithdrawModalContent account={currentAccount} isFunding={isFunding} />
-      ) : (
-        <div className='flex items-center justify-center w-full h-[380px]'>
-          <CircularProgress />
-        </div>
-      )}
-    </Modal>
   )
 }

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 ? (
+      {props.subHeader && props.subHeader}
-        <Card
+      {modalContent(props.content, props.isContentCard, props.account)}
-          className='flex flex-1 p-4 bg-white/5'
+      {props.account && <AccountSummary account={updatedAccount || props.account} />}
-          contentClassName='gap-6 flex flex-col justify-between h-full min-h-[380px]'
-        >
-          {props.content}
-        </Card>
-      ) : (
-        props.content
-      )}
-      <AccountSummary account={updatedAccount || props.account} />
     </Modal>
   )
 }

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: () => (

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} />

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