blockworks-foundation
/
mango-ui-v3
mirror of https://github.com/blockworks-foundation/mango-ui-v3.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

hide some ui changes so we can deploy

This commit is contained in:
Tyler Shipe 2021-04-19 12:15:49 -04:00
parent 72e70ad488
commit 61a920f017
15 changed files with 62 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
components/AccountSelect.jsx → components/AccountSelect.tsx
View File

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

2
components/FloatingElement.tsx
View File

@ -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">

0
components/MangoIcon.jsx → components/MangoIcon.tsx
View File

2
components/MarginBalances.tsx
View File

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

4
components/MarketSelect.jsx → components/MarketSelect.tsx
View File

@ -26,9 +26,9 @@ const MarketSelect = () => {
}
`}
onClick={() => handleChange(name)}
key={address}
key={address as string}
>
{name.split('/')[0]}
{name}
</div>
))}
</div>

2
components/Modal.tsx
View File

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

0
components/Select.jsx → components/Select.tsx
View File

0
components/ThemeSwitch.jsx → components/ThemeSwitch.tsx
View File

8
components/TopBar.tsx
View File

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

29
components/TradeForm.tsx
View File

@ -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">

2
components/WalletSelect.tsx
View File

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

6
components/WithdrawModal.tsx
View File

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

4
components/styles.tsx
View File

@ -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
pages/index.tsx
View File

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

1
tsconfig.json
View File

@ -20,7 +20,6 @@
"**/*.ts",
"**/*.tsx",
"**/*.js",
"components/AccountSelect.jsx",
"components/MangoSrmAccountSelector.jsx"
]
}