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

hide action buttons for unowned accounts

This commit is contained in:
saml33 2023-02-13 13:46:41 +11:00
parent 0b4da01ee1
commit 6a05e60376
10 changed files with 190 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/TokenList.tsx
View File

@ -34,6 +34,7 @@ import BankAmountWithValue from './shared/BankAmountWithValue'
import useBanksWithBalances, {
BankWithBalance,
} from 'hooks/useBanksWithBalances'
import useUnownedAccount from 'hooks/useUnownedAccount'
const TokenList = () => {
const { t } = useTranslation(['common', 'token', 'trade'])
@ -399,7 +400,7 @@ const ActionsMenu = ({
const router = useRouter()
const { mangoTokens } = useJupiterMints()
const spotMarkets = mangoStore((s) => s.serumMarkets)
const { connected } = useWallet()
const isUnownedAccount = useUnownedAccount()
const spotMarket = useMemo(() => {
return spotMarkets.find((m) => {
@ -477,7 +478,7 @@ const ActionsMenu = ({
return (
<>
{mangoAccount && !connected ? null : (
{isUnownedAccount ? null : (
<IconDropMenu
icon={<EllipsisHorizontalIcon className="h-5 w-5" />}
postion="leftBottom"

4
components/TopBar.tsx
View File

@ -24,6 +24,7 @@ import DepositWithdrawModal from './modals/DepositWithdrawModal'
import { useViewport } from 'hooks/useViewport'
import { breakpoints } from 'utils/theme'
import AccountsButton from './AccountsButton'
import useUnownedAccount from 'hooks/useUnownedAccount'
// import ThemeSwitcher from './ThemeSwitcher'
const TopBar = () => {
@ -41,6 +42,7 @@ const TopBar = () => {
const { query } = router
const { width } = useViewport()
const isMobile = width ? width < breakpoints.sm : false
const isUnownedAccount = useUnownedAccount()
const handleCloseSetup = useCallback(() => {
setShowUserSetup(false)
@ -112,7 +114,7 @@ const TopBar = () => {
{/* <div className="px-3 md:px-4">
<ThemeSwitcher />
</div> */}
{(mangoAccount && !connected) || (!connected && isMobile) ? null : (
{isUnownedAccount || (!connected && isMobile) ? null : (
<Button
onClick={() => handleDepositWithdrawModal('deposit')}
secondary

10
components/account/AccountActions.tsx
View File

@ -23,6 +23,7 @@ import { useWallet } from '@solana/wallet-adapter-react'
import CreateAccountModal from '@components/modals/CreateAccountModal'
import { Popover, Transition } from '@headlessui/react'
import ActionsLinkButton from './ActionsLinkButton'
import useUnownedAccount from 'hooks/useUnownedAccount'
export const handleCopyAddress = (
mangoAccount: MangoAccount,
@ -37,7 +38,7 @@ export const handleCopyAddress = (
const AccountActions = () => {
const { t } = useTranslation(['common', 'close-account'])
const { mangoAccount } = useMangoAccount()
const { mangoAccount, mangoAccountAddress } = useMangoAccount()
const [showCloseAccountModal, setShowCloseAccountModal] = useState(false)
const [showEditAccountModal, setShowEditAccountModal] = useState(false)
const [showBorrowModal, setShowBorrowModal] = useState(false)
@ -45,9 +46,10 @@ const AccountActions = () => {
const [showDelegateModal, setShowDelegateModal] = useState(false)
const [showCreateAccountModal, setShowCreateAccountModal] = useState(false)
const { connected } = useWallet()
const isUnownedAccount = useUnownedAccount()
const handleBorrowModal = () => {
if (!connected || mangoAccount) {
if (mangoAccountAddress || !connected) {
setShowBorrowModal(true)
} else {
setShowCreateAccountModal(true)
@ -56,11 +58,11 @@ const AccountActions = () => {
return (
<>
{mangoAccount && !connected ? null : (
{isUnownedAccount ? null : (
<div className="flex items-center space-x-2">
<Button
className="flex w-1/3 items-center justify-center md:w-auto"
disabled={!mangoAccount}
disabled={!mangoAccountAddress}
onClick={() => setShowRepayModal(true)}
secondary
>

11
components/shared/BalancesTable.tsx
View File

@ -26,6 +26,7 @@ import BankAmountWithValue from './BankAmountWithValue'
import useBanksWithBalances, {
BankWithBalance,
} from 'hooks/useBanksWithBalances'
import useUnownedAccount from 'hooks/useUnownedAccount'
const BalancesTable = () => {
const { t } = useTranslation(['common', 'trade'])
@ -195,6 +196,7 @@ export default BalancesTable
const Balance = ({ bank }: { bank: BankWithBalance }) => {
const { selectedMarket } = useSelectedMarket()
const { asPath } = useRouter()
const isUnownedAccount = useUnownedAccount()
const tokenBank = bank.bank
@ -293,7 +295,8 @@ const Balance = ({ bank }: { bank: BankWithBalance }) => {
return (
<p className="flex justify-end">
{asPath.includes('/trade') && isBaseOrQuote ? (
{!isUnownedAccount ? (
asPath.includes('/trade') && isBaseOrQuote ? (
<LinkButton
className="font-normal underline-offset-4"
onClick={() =>
@ -319,6 +322,12 @@ const Balance = ({ bank }: { bank: BankWithBalance }) => {
decimals={tokenBank.mintDecimals}
/>
</LinkButton>
) : (
<FormatNumericValue
value={balance}
decimals={tokenBank.mintDecimals}
/>
)
) : (
<FormatNumericValue value={balance} decimals={tokenBank.mintDecimals} />
)}

4
components/swap/SwapForm.tsx
View File

@ -48,6 +48,7 @@ import useIpAddress from 'hooks/useIpAddress'
import { useEnhancedWallet } from '@components/wallet/EnhancedWalletProvider'
import SwapSettings from './SwapSettings'
import InlineNotification from '@components/shared/InlineNotification'
import useUnownedAccount from 'hooks/useUnownedAccount'
const MAX_DIGITS = 11
export const withValueLimit = (values: NumberFormatValues): boolean => {
@ -69,6 +70,7 @@ const SwapForm = () => {
const { group } = useMangoGroup()
const [swapFormSizeUi] = useLocalStorageState(SIZE_INPUT_UI_KEY, 'slider')
const { ipAllowed, ipCountry } = useIpAddress()
const isUnownedAccount = useUnownedAccount()
const {
margin: useMargin,
@ -327,10 +329,12 @@ const SwapForm = () => {
</div>
<div className="mb-2 flex items-end justify-between">
<p className="text-th-fgd-2 lg:text-base">{t('swap:pay')}</p>
{!isUnownedAccount ? (
<MaxSwapAmount
useMargin={useMargin}
setAmountIn={(v) => setAmountInFormValue(v, true)}
/>
) : null}
</div>
<div className="mb-3 grid grid-cols-2" id="swap-step-two">
<div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-input-border bg-th-input-bkg">

4
components/trade/MaxSizeButton.tsx
View File

@ -4,6 +4,7 @@ import { FadeInFadeOut } from '@components/shared/Transitions'
import mangoStore from '@store/mangoStore'
import useMangoAccount from 'hooks/useMangoAccount'
import useSelectedMarket from 'hooks/useSelectedMarket'
import useUnownedAccount from 'hooks/useUnownedAccount'
import { useTranslation } from 'next-i18next'
import { useCallback, useMemo } from 'react'
import { formatNumericValue } from 'utils/numbers'
@ -28,6 +29,7 @@ const MaxSizeButton = ({
side,
useMargin
)
const isUnownedAccount = useUnownedAccount()
const perpMax = useMemo(() => {
const group = mangoStore.getState().group
@ -108,7 +110,7 @@ const MaxSizeButton = ({
return (
<div className="mb-2 mt-3 flex items-center justify-between">
<p className="text-xs text-th-fgd-3">{t('trade:size')}</p>
<FadeInFadeOut show={!!price}>
<FadeInFadeOut show={!!price && !isUnownedAccount}>
<MaxAmountButton
className="text-xs"
decimals={minOrderDecimals}

10
components/trade/OpenOrders.tsx
View File

@ -27,6 +27,7 @@ import { useWallet } from '@solana/wallet-adapter-react'
import { PublicKey } from '@solana/web3.js'
import mangoStore from '@store/mangoStore'
import useMangoAccount from 'hooks/useMangoAccount'
import useUnownedAccount from 'hooks/useUnownedAccount'
import { useViewport } from 'hooks/useViewport'
import { useTranslation } from 'next-i18next'
import { ChangeEvent, useCallback, useState } from 'react'
@ -49,6 +50,7 @@ const OpenOrders = () => {
const showTableView = width ? width > breakpoints.md : false
const { mangoAccountAddress } = useMangoAccount()
const { connected } = useWallet()
const isUnownedAccount = useUnownedAccount()
const findSerum3MarketPkInOpenOrders = (o: Order): string | undefined => {
const openOrders = mangoStore.getState().mangoAccount.openOrders
@ -237,7 +239,9 @@ const OpenOrders = () => {
<Th className="w-[16.67%] text-right">{t('trade:size')}</Th>
<Th className="w-[16.67%] text-right">{t('price')}</Th>
<Th className="w-[16.67%] text-right">{t('value')}</Th>
<Th className="w-[16.67%] text-right"></Th>
{!isUnownedAccount ? (
<Th className="w-[16.67%] text-right" />
) : null}
</TrHead>
</thead>
<tbody>
@ -332,6 +336,7 @@ const OpenOrders = () => {
isUsd
/>
</Td>
{!isUnownedAccount ? (
<Td className="w-[16.67%]">
<div className="flex justify-end space-x-2">
{modifyOrderId !== o.orderId.toString() ? (
@ -382,6 +387,7 @@ const OpenOrders = () => {
)}
</div>
</Td>
) : null}
</TrBody>
)
})
@ -477,7 +483,7 @@ const OpenOrders = () => {
</div>
)}
</div>
{connected ? (
{!isUnownedAccount ? (
<div className="flex items-center space-x-3 pl-8">
<div className="flex items-center space-x-2">
{modifyOrderId !== o.orderId.toString() ? (

6
components/trade/PerpPositions.tsx
View File

@ -9,6 +9,7 @@ import mangoStore from '@store/mangoStore'
import useMangoAccount from 'hooks/useMangoAccount'
import useMangoGroup from 'hooks/useMangoGroup'
import useSelectedMarket from 'hooks/useSelectedMarket'
import useUnownedAccount from 'hooks/useUnownedAccount'
import { useTranslation } from 'next-i18next'
import { useCallback, useState } from 'react'
import { floorToDecimal, getDecimalCount } from 'utils/numbers'
@ -28,6 +29,7 @@ const PerpPositions = () => {
const { selectedMarket } = useSelectedMarket()
const { connected } = useWallet()
const { mangoAccountAddress } = useMangoAccount()
const isUnownedAccount = useUnownedAccount()
const handlePositionClick = (positionSize: number, market: PerpMarket) => {
const tradeForm = mangoStore.getState().tradeForm
@ -86,7 +88,7 @@ const PerpPositions = () => {
'pnl'
)}`}</Th>
<Th className="text-right">{t('pnl')}</Th>
<Th />
{!isUnownedAccount ? <Th /> : null}
</TrHead>
</thead>
<tbody>
@ -164,6 +166,7 @@ const PerpPositions = () => {
>
<FormatNumericValue value={cummulativePnl} isUsd />
</Td>
{!isUnownedAccount ? (
<Td className={`text-right`}>
<Button
className="text-xs"
@ -174,6 +177,7 @@ const PerpPositions = () => {
Close
</Button>
</Td>
) : null}
</TrBody>
)
})}

10
components/trade/UnsettledTrades.tsx
View File

@ -17,6 +17,7 @@ import useMangoAccount from 'hooks/useMangoAccount'
import { useWallet } from '@solana/wallet-adapter-react'
import ConnectEmptyState from '@components/shared/ConnectEmptyState'
import FormatNumericValue from '@components/shared/FormatNumericValue'
import useUnownedAccount from 'hooks/useUnownedAccount'
const UnsettledTrades = ({
unsettledSpotBalances,
@ -32,6 +33,7 @@ const UnsettledTrades = ({
const showTableView = width ? width > breakpoints.md : false
const { mangoAccountAddress } = useMangoAccount()
const { connected } = useWallet()
const isUnownedAccount = useUnownedAccount()
const handleSettleSerumFunds = useCallback(async (mktAddress: string) => {
const client = mangoStore.getState().client
@ -136,7 +138,9 @@ const UnsettledTrades = ({
<TrHead>
<Th className="bg-th-bkg-1 text-left">{t('market')}</Th>
<Th className="bg-th-bkg-1 text-right">{t('trade:amount')}</Th>
{!isUnownedAccount ? (
<Th className="bg-th-bkg-1 text-right" />
) : null}
</TrHead>
</thead>
<tbody>
@ -168,6 +172,7 @@ const UnsettledTrades = ({
) : null}
</div>
</Td>
{!isUnownedAccount ? (
<Td>
<div className="flex justify-end">
<Tooltip content={t('trade:settle-funds')}>
@ -184,6 +189,7 @@ const UnsettledTrades = ({
</Tooltip>
</div>
</Td>
) : null}
</TrBody>
)
})}
@ -203,6 +209,7 @@ const UnsettledTrades = ({
/>{' '}
<span className="font-body text-th-fgd-4">USDC</span>
</Td>
{!isUnownedAccount ? (
<Td>
<div className="flex justify-end">
<Tooltip content={t('trade:settle-funds')}>
@ -219,6 +226,7 @@ const UnsettledTrades = ({
</Tooltip>
</div>
</Td>
) : null}
</TrBody>
)
})}
@ -252,6 +260,7 @@ const UnsettledTrades = ({
<span className="font-body text-th-fgd-4">{quote}</span>
</span>
) : null}
{!isUnownedAccount ? (
<IconButton
onClick={() => handleSettleSerumFunds(mktAddress)}
size="medium"
@ -262,6 +271,7 @@ const UnsettledTrades = ({
<CheckIcon className="h-4 w-4" />
)}
</IconButton>
) : null}
</div>
</div>
)

17
hooks/useUnownedAccount.ts Normal file
View File

@ -0,0 +1,17 @@
import { useWallet } from '@solana/wallet-adapter-react'
import { useMemo } from 'react'
import useMangoAccount from './useMangoAccount'
const useUnownedAccount = () => {
const { connected } = useWallet()
const { mangoAccountAddress } = useMangoAccount()
const isUnownedAccount = useMemo(() => {
if (connected) return false
return mangoAccountAddress && !connected
}, [connected, mangoAccountAddress])
return isUnownedAccount
}
export default useUnownedAccount