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

2023-11-14 11:44:44 +01:00 · 2023-11-14 11:44:44 +01:00 · ddc592855e
commit ddc592855e
parent 8e976a5d70 38c169aa13
9 changed files with 68 additions and 56 deletions
--- 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/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/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',