hide some ui changes so we can deploy
This commit is contained in:
parent
72e70ad488
commit
61a920f017
|
@ -1,4 +1,4 @@
|
|||
import { Listbox, Transition } from '@headlessui/react'
|
||||
import { Listbox } from '@headlessui/react'
|
||||
import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/solid'
|
||||
import {
|
||||
abbreviateAddress,
|
||||
|
@ -11,13 +11,21 @@ import useMangoStore from '../stores/useMangoStore'
|
|||
import { tokenPrecision } from '../utils/index'
|
||||
import { SRM_DECIMALS } from '@project-serum/serum/lib/token-instructions'
|
||||
|
||||
type AccountSelectProps = {
|
||||
accounts: any[]
|
||||
selectedAccount: any
|
||||
onSelectAccount: (x) => any
|
||||
getBalance?: (x) => any
|
||||
hideAddress?: boolean
|
||||
}
|
||||
|
||||
const AccountSelect = ({
|
||||
accounts,
|
||||
selectedAccount,
|
||||
onSelectAccount,
|
||||
hideBalance = false,
|
||||
getMaxForSelectedAccount,
|
||||
}) => {
|
||||
getBalance,
|
||||
hideAddress = false,
|
||||
}: AccountSelectProps) => {
|
||||
const { getTokenIndex } = useMarketList()
|
||||
const mintDecimals = useMangoStore((s) => s.selectedMangoGroup.mintDecimals)
|
||||
const handleChange = (value) => {
|
||||
|
@ -68,14 +76,16 @@ const AccountSelect = ({
|
|||
{getSymbolForTokenMintAddress(
|
||||
selectedAccount?.account?.mint.toString()
|
||||
)}
|
||||
<div className="text-xs text-th-fgd-4">
|
||||
{abbreviateAddress(selectedAccount?.publicKey)}
|
||||
</div>
|
||||
{!hideAddress ? (
|
||||
<div className="text-xs text-th-fgd-4">
|
||||
{abbreviateAddress(selectedAccount?.publicKey)}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div className={`ml-4 text-right flex-grow`}>
|
||||
{!hideBalance
|
||||
? getBalanceForAccount(selectedAccount)
|
||||
: getMaxForSelectedAccount(selectedAccount)}
|
||||
{hideAddress
|
||||
? getBalance(selectedAccount)
|
||||
: getBalanceForAccount(selectedAccount)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
|
@ -88,16 +98,6 @@ const AccountSelect = ({
|
|||
)}
|
||||
</div>
|
||||
</Listbox.Button>
|
||||
{/* <Transition
|
||||
show={open}
|
||||
appear={true}
|
||||
enter="transition duration-100 ease-out"
|
||||
enterFrom="transform scale-95 opacity-0"
|
||||
enterTo="transform scale-100 opacity-100"
|
||||
leave="transition duration-75 ease-out"
|
||||
leaveFrom="transform scale-100 opacity-100"
|
||||
leaveTo="transform scale-95 opacity-0"
|
||||
> */}
|
||||
<Listbox.Options
|
||||
className={`z-20 p-1 absolute right-0 top-13 bg-th-bkg-1 divide-y divide-th-bkg-3 shadow-lg outline-none rounded-md w-full max-h-60 overflow-auto`}
|
||||
>
|
||||
|
@ -131,15 +131,17 @@ const AccountSelect = ({
|
|||
/>
|
||||
<div className={`flex-grow text-left`}>
|
||||
{symbolForAccount}
|
||||
<div className="text-xs text-th-fgd-4">
|
||||
{abbreviateAddress(selectedAccount?.publicKey)}
|
||||
{!hideAddress ? (
|
||||
<div className="text-xs text-th-fgd-4">
|
||||
{abbreviateAddress(selectedAccount?.publicKey)}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
{!hideAddress ? (
|
||||
<div className={`text-sm`}>
|
||||
{getBalanceForAccount(account)} {symbolForAccount}
|
||||
</div>
|
||||
</div>
|
||||
<div className={`text-sm`}>
|
||||
{!hideBalance
|
||||
? getBalanceForAccount(account)
|
||||
: getMaxForSelectedAccount(account)}{' '}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
@ -147,7 +149,6 @@ const AccountSelect = ({
|
|||
)
|
||||
})}
|
||||
</Listbox.Options>
|
||||
{/* </Transition> */}
|
||||
</>
|
||||
)}
|
||||
</Listbox>
|
|
@ -36,7 +36,7 @@ const FloatingElement: FunctionComponent<FloatingElementProps> = ({
|
|||
return (
|
||||
<div className="m-1 p-1 bg-th-bkg-2 rounded-lg h-full">
|
||||
<div
|
||||
className={`thin-scroll p-3 overflow-auto overflow-x-hidden relative h-full ${className}`}
|
||||
className={`thin-scroll p-2.5 overflow-auto overflow-x-hidden relative h-full ${className}`}
|
||||
>
|
||||
{!uiLocked ? (
|
||||
<StyledDragWrapper className="absolute top-0 left-0 w-full h-full cursor-move z-50">
|
||||
|
|
|
@ -128,7 +128,7 @@ export default function MarginBalances() {
|
|||
<span>Withdraw</span>
|
||||
</Button>
|
||||
</div>
|
||||
<div className={`text-center mt-5 text-th-fgd-4 text-sm`}>
|
||||
<div className={`text-center mt-4 text-th-fgd-4 text-sm`}>
|
||||
Settle funds in the Balances tab
|
||||
</div>
|
||||
</FloatingElement>
|
||||
|
|
|
@ -26,9 +26,9 @@ const MarketSelect = () => {
|
|||
}
|
||||
`}
|
||||
onClick={() => handleChange(name)}
|
||||
key={address}
|
||||
key={address as string}
|
||||
>
|
||||
{name.split('/')[0]}
|
||||
{name}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
|
@ -1,7 +1,7 @@
|
|||
import { Portal } from 'react-portal'
|
||||
import { XIcon } from '@heroicons/react/outline'
|
||||
|
||||
const Modal = ({ isOpen, onClose, children, hideClose }) => {
|
||||
const Modal = ({ isOpen, onClose, children, hideClose = false }) => {
|
||||
return (
|
||||
<Portal>
|
||||
<div
|
||||
|
|
|
@ -9,6 +9,8 @@ import {
|
|||
MenuIcon,
|
||||
XIcon,
|
||||
} from '@heroicons/react/outline'
|
||||
import UiLock from './UiLock'
|
||||
import { useRouter } from 'next/router'
|
||||
import MenuItem from './MenuItem'
|
||||
import ThemeSwitch from './ThemeSwitch'
|
||||
import { WalletIcon } from './icons'
|
||||
|
@ -23,6 +25,7 @@ const Code = styled.code`
|
|||
`
|
||||
|
||||
const TopBar = () => {
|
||||
const { asPath } = useRouter()
|
||||
const connected = useMangoStore((s) => s.wallet.connected)
|
||||
const wallet = useMangoStore((s) => s.wallet.current)
|
||||
const [showMenu, setShowMenu] = useState(false)
|
||||
|
@ -76,6 +79,11 @@ const TopBar = () => {
|
|||
</div>
|
||||
<div className="flex">
|
||||
<div className="flex items-center">
|
||||
{asPath === '/' ? (
|
||||
<div className="flex items-center justify-center rounded-full bg-th-bkg-3 w-8 h-8 mr-4">
|
||||
<UiLock />
|
||||
</div>
|
||||
) : null}
|
||||
<div className="flex items-center justify-center rounded-full bg-th-bkg-3 w-8 h-8 mr-2">
|
||||
<ThemeSwitch />
|
||||
</div>
|
||||
|
|
|
@ -15,8 +15,6 @@ import Button from './Button'
|
|||
import TradeType from './TradeType'
|
||||
import Input from './Input'
|
||||
import Switch from './Switch'
|
||||
import { WalletIcon } from './icons'
|
||||
import WalletSelect from './WalletSelect'
|
||||
|
||||
const StyledRightInput = styled(Input)`
|
||||
border-left: 1px solid transparent;
|
||||
|
@ -27,7 +25,6 @@ export default function TradeForm() {
|
|||
const set = useMangoStore((s) => s.set)
|
||||
const connected = useMangoStore((s) => s.wallet.connected)
|
||||
const actions = useMangoStore((s) => s.actions)
|
||||
const wallet = useMangoStore((s) => s.wallet.current)
|
||||
const { connection, cluster } = useConnection()
|
||||
const { side, baseSize, quoteSize, price, tradeType } = useMangoStore(
|
||||
(s) => s.tradeForm
|
||||
|
@ -333,18 +330,20 @@ export default function TradeForm() {
|
|||
</Button>
|
||||
)
|
||||
) : (
|
||||
<div className="flex justify-between border border-th-fgd-4 rounded-md w-full">
|
||||
<Button
|
||||
onClick={() => wallet.connect()}
|
||||
className={`rounded-r-none flex flex-grow items-center justify-center border-none`}
|
||||
>
|
||||
<WalletIcon className="fill-current h-4 w-4 mr-2" />
|
||||
Connect Wallet
|
||||
</Button>
|
||||
<div className="relative h-full">
|
||||
<WalletSelect />
|
||||
</div>
|
||||
</div>
|
||||
<>
|
||||
{/* <div className="flex justify-between border border-th-fgd-4 rounded-md w-full">
|
||||
<Button
|
||||
onClick={() => wallet.connect()}
|
||||
className={`rounded-r-none flex flex-grow items-center justify-center border-none`}
|
||||
>
|
||||
<WalletIcon className="fill-current h-4 w-4 mr-2" />
|
||||
Connect Wallet
|
||||
</Button>
|
||||
<div className="relative h-full">
|
||||
<WalletSelect />
|
||||
</div>
|
||||
</div> */}
|
||||
</>
|
||||
)
|
||||
) : (
|
||||
<Button disabled className="flex-grow">
|
||||
|
|
|
@ -8,7 +8,7 @@ import useMangoStore from '../stores/useMangoStore'
|
|||
import { WALLET_PROVIDERS, DEFAULT_PROVIDER } from '../hooks/useWallet'
|
||||
import useLocalStorageState from '../hooks/useLocalStorageState'
|
||||
|
||||
export default function WalletSelect({ isPrimary }) {
|
||||
export default function WalletSelect({ isPrimary = false }) {
|
||||
const setMangoStore = useMangoStore((s) => s.set)
|
||||
const [savedProviderUrl] = useLocalStorageState(
|
||||
'walletProvider',
|
||||
|
|
|
@ -87,18 +87,16 @@ const WithdrawModal = ({ isOpen, onClose }) => {
|
|||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose}>
|
||||
<Modal.Header>
|
||||
{/* not sure what the below div os for? */}
|
||||
<div className={`text-th-fgd-3 flex-shrink invisible w-5`}>X</div>
|
||||
<ElementTitle noMarignBottom>Withdraw Funds</ElementTitle>
|
||||
</Modal.Header>
|
||||
<div className={`pb-6 px-8`}>
|
||||
<div className={`text-th-fgd-1 pb-2`}>Token Account</div>
|
||||
<AccountSelect
|
||||
hideBalance
|
||||
hideAddress
|
||||
accounts={withdrawAccounts}
|
||||
selectedAccount={selectedAccount}
|
||||
onSelectAccount={setSelectedAccount}
|
||||
getMaxForSelectedAccount={getMaxForSelectedAccount}
|
||||
getBalance={getMaxForSelectedAccount}
|
||||
/>
|
||||
<div className="flex justify-between pb-2 pt-4">
|
||||
<div className={`text-th-fgd-1`}>Amount</div>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
export const ElementTitle = ({ children, noMarignBottom }) => (
|
||||
export const ElementTitle = ({ children, noMarignBottom = false }) => (
|
||||
<div
|
||||
className={`flex justify-center ${
|
||||
noMarignBottom ? 'mb-0' : 'mb-4'
|
||||
noMarignBottom ? 'mb-0' : 'mb-2.5'
|
||||
} text-lg font-semibold items-center text-th-fgd-1`}
|
||||
>
|
||||
{children}
|
||||
|
|
|
@ -2,7 +2,6 @@ import TopBar from '../components/TopBar'
|
|||
import Notifications from '../components/Notification'
|
||||
import TradePageGrid from '../components/TradePageGrid'
|
||||
import MarketSelect from '../components/MarketSelect'
|
||||
import MarketHeader from '../components/MarketHeader'
|
||||
import AlphaModal from '../components/AlphaModal'
|
||||
import useLocalStorageState from '../hooks/useLocalStorageState'
|
||||
|
||||
|
@ -13,7 +12,6 @@ const Index = () => {
|
|||
<div className={`bg-th-bkg-1 text-th-fgd-1 transition-all `}>
|
||||
<TopBar />
|
||||
<MarketSelect />
|
||||
<MarketHeader />
|
||||
<div className={`min-h-screen p-1 sm:px-2 sm:py-1 md:px-6 md:py-1`}>
|
||||
<TradePageGrid />
|
||||
</div>
|
||||
|
|
|
@ -20,7 +20,6 @@
|
|||
"**/*.ts",
|
||||
"**/*.tsx",
|
||||
"**/*.js",
|
||||
"components/AccountSelect.jsx",
|
||||
"components/MangoSrmAccountSelector.jsx"
|
||||
]
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue