hide settle button and small styling updates
This commit is contained in:
saml33
parent
9a3ef99b3d
commit
e1dd3980b8
|
|
@ -6,6 +6,9 @@ import Button from '../components/Button'
|
|||
import { notify } from '../utils/notifications'
|
||||
import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'
|
||||
import useMarket from '../hooks/useMarket'
|
||||
import { ElementTitle } from './styles'
|
||||
import { InformationCircleIcon } from '@heroicons/react/outline'
|
||||
import Tooltip from './Tooltip'
|
||||
|
||||
const BalancesTable = () => {
|
||||
const balances = useBalances()
|
||||
|
|
@ -52,15 +55,29 @@ const BalancesTable = () => {
|
|||
<div className={`flex flex-col py-6`}>
|
||||
<div className={`-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8`}>
|
||||
<div className={`align-middle inline-block min-w-full sm:px-6 lg:px-8`}>
|
||||
{/* balances.length && balances.find((balance) => balance.unsettled > 0) */}
|
||||
{balances.length ? (
|
||||
<ElementTitle>
|
||||
<div className="pr-1">{marketName.split('/')[0]}</div>
|
||||
<span className="text-th-fgd-4">/</span>
|
||||
<div className="pl-1">{marketName.split('/')[1]}</div>
|
||||
</ElementTitle>
|
||||
{balances.length &&
|
||||
(balances.find(({ unsettled }) => unsettled > 0) ||
|
||||
balances.find(
|
||||
({ borrows, marginDeposits }) => borrows > 0 && marginDeposits > 0
|
||||
)) ? (
|
||||
<div
|
||||
className={`flex items-center justify-between p-4 mb-2 rounded-md bg-th-bkg-1`}
|
||||
>
|
||||
<div>Balances for {marketName}</div>
|
||||
{/* <div className="text-fgd-1 font-semibold pr-4">
|
||||
You have an unsettled balance
|
||||
</div> */}
|
||||
<div className="flex items-center text-fgd-1 font-semibold pr-4">
|
||||
You have unsettled funds
|
||||
<Tooltip content="If you have borrows, settling will reduce any deposits you have by the amount you have borrowed and any unsettled funds from trades will be added to your account.">
|
||||
<div>
|
||||
<InformationCircleIcon
|
||||
className={`h-5 w-5 ml-2 text-th-primary cursor-help`}
|
||||
/>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<Button onClick={handleSettleAll}>Settle All</Button>
|
||||
</div>
|
||||
) : null}
|
||||
|
|
|
|||
|
|
@ -156,37 +156,39 @@ const AddressTooltip = ({
|
|||
<>
|
||||
{owner && marginAccount ? (
|
||||
<>
|
||||
<div className={`flex flex-nowrap`}>
|
||||
<div className={`flex flex-nowrap text-th-fgd-3`}>
|
||||
Margin Account:
|
||||
<a
|
||||
className="text-th-fgd-1 default-transition hover:text-th-primary"
|
||||
href={'https://explorer.solana.com/address/' + marginAccount}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<div className={`ml-4 flex`}>
|
||||
<ExternalLinkIcon
|
||||
className={`h-5 w-5 mr-1 text-mango-yellow`}
|
||||
/>
|
||||
<span className={`text-mango-yellow hover:opacity-50`}>
|
||||
{marginAccount}
|
||||
<div className={`ml-2 flex items-center`}>
|
||||
<span className={`underline`}>
|
||||
{marginAccount.toString().substr(0, 5) +
|
||||
'...' +
|
||||
marginAccount.toString().substr(-5)}
|
||||
</span>
|
||||
<ExternalLinkIcon className={`h-4 w-4 ml-1`} />
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className={`flex mt-2`}>
|
||||
<div className={`flex flex-nowrap text-th-fgd-3 pt-2`}>
|
||||
Account Owner:
|
||||
<a
|
||||
className="text-th-fgd-1 default-transition hover:text-th-primary"
|
||||
href={'https://explorer.solana.com/address/' + owner}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<div className={`ml-4 flex`}>
|
||||
<ExternalLinkIcon
|
||||
className={`h-5 w-5 mr-1 text-mango-yellow`}
|
||||
/>
|
||||
<span className={`text-mango-yellow hover:opacity-50`}>
|
||||
{owner}
|
||||
<div className={`ml-2 flex items-center`}>
|
||||
<span className={`underline`}>
|
||||
{owner.toString().substr(0, 5) +
|
||||
'...' +
|
||||
owner.toString().substr(-5)}
|
||||
</span>
|
||||
<ExternalLinkIcon className={`h-4 w-4 ml-1`} />
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ const MarketSelect = () => {
|
|||
{/* <div className="text-xs text-th-fgd-4 font-semibold mr-2">MARKETS</div> */}
|
||||
{Object.entries(spotMarkets).map(([name, address]) => (
|
||||
<div
|
||||
className={`px-2 py-1 mr-2 rounded-md cursor-pointer default-transition bg-th-bkg-2
|
||||
className={`flex px-2 py-1 mr-2 rounded-md cursor-pointer default-transition bg-th-bkg-2
|
||||
${
|
||||
selectedMarket.name === name
|
||||
? `text-th-primary`
|
||||
|
|
@ -28,7 +28,9 @@ const MarketSelect = () => {
|
|||
onClick={() => handleChange(name)}
|
||||
key={address as string}
|
||||
>
|
||||
{name}
|
||||
<div className="pr-1">{name.split('/')[0]}</div>
|
||||
<span className="text-th-fgd-4">/</span>
|
||||
<div className="pl-1">{name.split('/')[1]}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ const Tooltip: FunctionComponent<TooltipProps> = ({ children, content }) => {
|
|||
<Tippy
|
||||
animation="scale"
|
||||
appendTo={() => document.body}
|
||||
maxWidth="none"
|
||||
maxWidth="30rem"
|
||||
interactive
|
||||
content={
|
||||
<div className="rounded p-3 text-sm bg-th-bkg-3 text-th-fgd-2 outline-none focus:outline-none">
|
||||
|
|
|
|||
|
|
@ -331,6 +331,9 @@ export default function TradeForm() {
|
|||
)
|
||||
) : (
|
||||
<>
|
||||
<Button disabled className="flex-grow">
|
||||
Connect Wallet
|
||||
</Button>
|
||||
{/* <div className="flex justify-between border border-th-fgd-4 rounded-md w-full">
|
||||
<Button
|
||||
onClick={() => wallet.connect()}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ export default function WalletSelect({ isPrimary = false }) {
|
|||
{({ open }) => (
|
||||
<>
|
||||
<Menu.Button
|
||||
className={`flex justify-center items-center h-full rounded-r focus:outline-none text-th-primary hover:text-th-fgd-1 ${
|
||||
className={`flex justify-center items-center h-full rounded-r rounded-l-none focus:outline-none text-th-primary hover:text-th-fgd-1 ${
|
||||
isPrimary
|
||||
? 'px-3 hover:bg-th-primary'
|
||||
: 'px-2 hover:bg-th-bkg-3 border-l border-th-fgd-4'
|
||||
|
|
|
|||
Loading…
Reference in New Issue