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

deposit/withdraw buttons

This commit is contained in:
saml33 2022-06-20 20:26:17 +10:00
parent 3bff95a069
commit d5523db43a
5 changed files with 72 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
components/AccountOverviewPopover.tsx
View File

@ -1,5 +1,4 @@
import { useState, useCallback, Fragment } from 'react'
import { useWallet } from '@solana/wallet-adapter-react'
import { Fragment } from 'react'
import { useTranslation } from 'next-i18next'
import useMangoStore from '../stores/useMangoStore'
import useMangoAccount from '../hooks/useMangoAccount'
@ -14,10 +13,7 @@ import HealthHeart from './HealthHeart'
import { abbreviateAddress, formatUsdValue, usdFormatter } from 'utils'
import { ChevronUpIcon } from '@heroicons/react/solid'
import { DataLoader } from './MarketPosition'
import Button from './Button'
import { Menu, SubMenu } from 'react-pro-sidebar'
import DepositModal from './DepositModal'
import WithdrawModal from './WithdrawModal'
const AccountOverviewPopover = ({
collapsed,
@ -29,26 +25,10 @@ const AccountOverviewPopover = ({
setOpen: any
}) => {
const { t } = useTranslation('common')
const { publicKey } = useWallet()
const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
const mangoCache = useMangoStore((s) => s.selectedMangoGroup.cache)
const { mangoAccount, initialLoad } = useMangoAccount()
const marketConfig = useMangoStore((s) => s.selectedMarket.config)
const [showDepositModal, setShowDepositModal] = useState(false)
const [showWithdrawModal, setShowWithdrawModal] = useState(false)
const canWithdraw =
mangoAccount?.owner && publicKey
? mangoAccount?.owner?.equals(publicKey)
: false
const handleCloseDeposit = useCallback(() => {
setShowDepositModal(false)
}, [])
const handleCloseWithdraw = useCallback(() => {
setShowWithdrawModal(false)
}, [])
const I80F48_100 = I80F48.fromString('100')
@ -204,21 +184,6 @@ const AccountOverviewPopover = ({
: 'N/A'}
</p>
</div>
<div className="mt-3 flex space-x-2">
<Button
className="w-1/2 pl-3 pr-3 text-xs"
onClick={() => setShowDepositModal(true)}
>
{t('deposit')}
</Button>
<Button
className="w-1/2 pl-3 pr-3 text-xs"
onClick={() => setShowWithdrawModal(true)}
disabled={!mangoAccount || !canWithdraw}
>
{t('withdraw')}
</Button>
</div>
</div>
</Popover.Panel>
</Transition>
@ -313,36 +278,11 @@ const AccountOverviewPopover = ({
: 'N/A'}
</p>
</div>
<div className="mt-3 flex w-full space-x-2">
<div
className="w-1/2 whitespace-nowrap rounded-full bg-th-bkg-button py-2 pl-3 pr-3 text-center text-xs font-bold text-th-fgd-1"
onClick={() => setShowDepositModal(true)}
role="button"
>
{t('deposit')}
</div>
<div
className="w-1/2 whitespace-nowrap rounded-full bg-th-bkg-button py-2 pl-3 pr-3 text-center text-xs font-bold text-th-fgd-1"
onClick={() => setShowWithdrawModal(true)}
role="button"
>
{t('withdraw')}
</div>
</div>
</div>
</SubMenu>
</Menu>
)
) : null}
{showDepositModal && (
<DepositModal isOpen={showDepositModal} onClose={handleCloseDeposit} />
)}
{showWithdrawModal && (
<WithdrawModal
isOpen={showWithdrawModal}
onClose={handleCloseWithdraw}
/>
)}
</>
)
}

8
components/BalancesTable.tsx
View File

@ -512,7 +512,7 @@ const BalancesTable = ({
<Td>
<div className="flex justify-end">
<Button
className="h-7 pt-0 pb-0 pl-3 pr-3 text-xs"
className="h-8 pt-0 pb-0 pl-3 pr-3 text-xs"
onClick={() =>
handleOpenDepositModal(balance.symbol)
}
@ -522,7 +522,7 @@ const BalancesTable = ({
: t('deposit')}
</Button>
<Button
className="ml-4 h-7 pt-0 pb-0 pl-3 pr-3 text-xs"
className="ml-2 h-8 border border-th-fgd-4 bg-transparent pt-0 pb-0 pl-3 pr-3 text-xs text-th-fgd-2"
onClick={() =>
handleOpenWithdrawModal(balance.symbol)
}
@ -651,7 +651,7 @@ const BalancesTable = ({
</div>
<div className="flex space-x-4">
<Button
className="h-7 w-1/2 pt-0 pb-0 pl-3 pr-3 text-xs"
className="h-8 w-1/2 pt-0 pb-0 pl-3 pr-3 text-xs"
onClick={() =>
handleOpenDepositModal(balance.symbol)
}
@ -661,7 +661,7 @@ const BalancesTable = ({
: t('deposit')}
</Button>
<Button
className="h-7 w-1/2 pt-0 pb-0 pl-3 pr-3 text-xs"
className="h-8 w-1/2 border border-th-fgd-4 bg-transparent pt-0 pb-0 pl-3 pr-3 text-xs"
onClick={() =>
handleOpenWithdrawModal(balance.symbol)
}

61
components/Layout.tsx
View File

@ -15,17 +15,21 @@ import {
CogIcon,
ExclamationCircleIcon,
} from '@heroicons/react/solid'
import { IconButton } from './Button'
import Button, { IconButton } from './Button'
import SettingsModal from './SettingsModal'
import { useTranslation } from 'next-i18next'
import { useWallet } from '@solana/wallet-adapter-react'
import DepositModal from './DepositModal'
import WithdrawModal from './WithdrawModal'
const Layout = ({ children }) => {
const { t } = useTranslation('common')
const { connected } = useWallet()
const { mangoAccount } = useMangoAccount()
const { connected, publicKey } = useWallet()
const { mangoAccount, initialLoad } = useMangoAccount()
const [showSettingsModal, setShowSettingsModal] = useState(false)
const [showAccountsModal, setShowAccountsModal] = useState(false)
const [showDepositModal, setShowDepositModal] = useState(false)
const [showWithdrawModal, setShowWithdrawModal] = useState(false)
const [isCollapsed, setIsCollapsed] = useState(false)
const { width } = useViewport()
const isMobile = width ? width < breakpoints.sm : false
@ -33,6 +37,11 @@ const Layout = ({ children }) => {
const { pathname } = router
const { pubkey } = router.query
const canWithdraw =
mangoAccount?.owner && publicKey
? mangoAccount?.owner?.equals(publicKey)
: false
useEffect(() => {
const collapsed = width ? width < breakpoints.lg : false
setIsCollapsed(collapsed)
@ -70,14 +79,16 @@ const Layout = ({ children }) => {
{pubkey ? '🕵️' : '👋'}
</span>
{connected || pubkey ? (
mangoAccount ? (
<span className="font-bold text-th-fgd-1">
{`${
mangoAccount.name
? mangoAccount.name
: abbreviateAddress(mangoAccount.publicKey)
}`}
</span>
!initialLoad ? (
mangoAccount ? (
<span className="font-bold text-th-fgd-1">
{`${
mangoAccount.name
? mangoAccount.name
: abbreviateAddress(mangoAccount.publicKey)
}`}
</span>
) : null
) : (
<div className="h-4 w-28 animate-pulse rounded bg-th-bkg-3" />
)
@ -90,6 +101,22 @@ const Layout = ({ children }) => {
</div>
)}
<div className="flex items-center space-x-4">
{mangoAccount && canWithdraw && !isMobile ? (
<div className="flex space-x-2">
<Button
className="h-8 w-24 pl-3 pr-3 text-xs"
onClick={() => setShowDepositModal(true)}
>
{t('deposit')}
</Button>
<Button
className="h-8 w-24 border border-th-fgd-4 bg-transparent pl-3 pr-3 text-xs"
onClick={() => setShowWithdrawModal(true)}
>
{t('withdraw')}
</Button>
</div>
) : null}
<IconButton
className="h-8 w-8"
onClick={() => setShowSettingsModal(true)}
@ -117,6 +144,18 @@ const Layout = ({ children }) => {
isOpen={showSettingsModal}
/>
) : null}
{showDepositModal && (
<DepositModal
isOpen={showDepositModal}
onClose={() => setShowDepositModal(false)}
/>
)}
{showWithdrawModal && (
<WithdrawModal
isOpen={showWithdrawModal}
onClose={() => setShowWithdrawModal(false)}
/>
)}
</div>
)
}

4
components/LeaderboardTable.tsx
View File

@ -243,8 +243,8 @@ const LeaderboardTypeButton = ({
<button
className={`relative flex w-full items-center justify-center rounded-md p-4 text-center lg:h-20 lg:justify-start lg:text-left ${
leaderboardType === label
? 'bg-th-bkg-4 text-th-fgd-1 after:absolute after:top-[100%] after:left-1/2 after:-translate-x-1/2 after:transform after:border-l-[12px] after:border-r-[12px] after:border-t-[12px] after:border-l-transparent after:border-t-th-bkg-4 after:border-r-transparent lg:after:left-[100%] lg:after:top-1/2 lg:after:-translate-x-0 lg:after:-translate-y-1/2 lg:after:border-r-0 lg:after:border-b-[12px] lg:after:border-t-transparent lg:after:border-b-transparent lg:after:border-l-th-bkg-4'
: 'bg-th-bkg-3 text-th-fgd-4 md:hover:bg-th-bkg-4'
? 'bg-th-bkg-3 text-th-fgd-1 after:absolute after:top-[100%] after:left-1/2 after:-translate-x-1/2 after:transform after:border-l-[12px] after:border-r-[12px] after:border-t-[12px] after:border-l-transparent after:border-t-th-bkg-3 after:border-r-transparent lg:after:left-[100%] lg:after:top-1/2 lg:after:-translate-x-0 lg:after:-translate-y-1/2 lg:after:border-r-0 lg:after:border-b-[12px] lg:after:border-t-transparent lg:after:border-b-transparent lg:after:border-l-th-bkg-3'
: 'bg-th-bkg-2 text-th-fgd-3 md:hover:bg-th-bkg-3'
}`}
onClick={() => setLeaderboardType(label)}
>

28
pages/account.tsx
View File

@ -28,7 +28,7 @@ import AccountInterest from 'components/account_page/AccountInterest'
import AccountFunding from 'components/account_page/AccountFunding'
import AccountPerformancePerToken from 'components/account_page/AccountPerformancePerToken'
import AccountNameModal from 'components/AccountNameModal'
import { IconButton, LinkButton } from 'components/Button'
import Button, { IconButton, LinkButton } from 'components/Button'
import EmptyState from 'components/EmptyState'
import Loading from 'components/Loading'
import Swipeable from 'components/mobile/Swipeable'
@ -344,8 +344,8 @@ export default function Account() {
</div>
{!pubkey ? (
<div className="flex items-center space-x-2">
<button
className="flex h-8 w-full items-center justify-center rounded-full bg-th-primary px-3 py-0 text-xs font-bold text-th-bkg-1 focus:outline-none disabled:cursor-not-allowed disabled:bg-th-bkg-4 disabled:text-th-fgd-4"
<Button
className="flex h-8 w-full items-center justify-center rounded-full px-3 py-0 text-xs"
disabled={mngoAccrued.eq(ZERO_BN)}
onClick={handleRedeemMngo}
>
@ -362,11 +362,11 @@ export default function Account() {
})
: t('zero-mngo-rewards')}
</div>
</button>
</Button>
<Menu>
{({ open }) => (
<div className="relative sm:w-full">
<Menu.Button className="flex h-8 items-center justify-center rounded-full bg-th-bkg-button pt-0 pb-0 pl-3 pr-2 text-xs font-bold hover:brightness-[1.1] hover:filter sm:w-full">
<Menu.Button className="flex h-8 items-center justify-center rounded-full border border-th-fgd-4 bg-transparent pt-0 pb-0 pl-3 pr-2 text-xs font-bold text-th-fgd-2 hover:brightness-[1.1] hover:filter sm:w-full">
{t('more')}
<ChevronDownIcon
className={`default-transition h-5 w-5 ${
@ -495,15 +495,17 @@ export default function Account() {
<Loading />
</div>
) : connected ? (
<EmptyState
buttonText={t('create-account')}
icon={<CurrencyDollarIcon />}
onClickButton={() => setShowAccountsModal(true)}
title={t('no-account-found')}
disabled={!wallet || !mangoGroup}
/>
<div className="-mt-4 rounded-lg border border-th-bkg-3 p-4 md:p-6">
<EmptyState
buttonText={t('create-account')}
icon={<CurrencyDollarIcon />}
onClickButton={() => setShowAccountsModal(true)}
title={t('no-account-found')}
disabled={!wallet || !mangoGroup}
/>
</div>
) : (
<div className="rounded-lg border border-th-bkg-3 p-4 md:p-6">
<div className="-mt-4 rounded-lg border border-th-bkg-3 p-4 md:p-6">
<EmptyState
buttonText={t('connect')}
desc={t('connect-view')}