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

add connect wallet empty states

This commit is contained in:
saml33 2023-01-20 12:45:08 +11:00
parent bfaecd1716
commit 211bd40de1
17 changed files with 133 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
components/account/ActivityFeedTable.tsx
View File

@ -1,5 +1,6 @@
import { EXPLORERS } from '@components/settings/PreferredExplorerSettings'
import { IconButton, LinkButton } from '@components/shared/Button'
import ConnectEmptyState from '@components/shared/ConnectEmptyState'
import SheenLoader from '@components/shared/SheenLoader'
import { Table, Td, Th, TrBody, TrHead } from '@components/shared/TableElements'
import Tooltip from '@components/shared/Tooltip'
@ -9,6 +10,7 @@ import {
ChevronRightIcon,
NoSymbolIcon,
} from '@heroicons/react/20/solid'
import { useWallet } from '@solana/wallet-adapter-react'
import mangoStore, { LiquidationFeedItem } from '@store/mangoStore'
import dayjs from 'dayjs'
import useLocalStorageState from 'hooks/useLocalStorageState'
@ -42,6 +44,7 @@ const ActivityFeedTable = ({
const actions = mangoStore.getState().actions
const loadActivityFeed = mangoStore((s) => s.activityFeed.loading)
const [offset, setOffset] = useState(0)
const { connected } = useWallet()
const [preferredExplorer] = useLocalStorageState(
PREFERRED_EXPLORER_KEY,
EXPLORERS[0]
@ -327,11 +330,15 @@ const ActivityFeedTable = ({
</div>
) : null}
</>
) : (
) : connected ? (
<div className="flex flex-col items-center p-8">
<NoSymbolIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
<p>{t('activity:no-activity')}</p>
</div>
) : (
<div className="p-8">
<ConnectEmptyState text={t('activity:connect-activity')} />
</div>
)
}

9
components/shared/BalancesTable.tsx
View File

@ -22,6 +22,8 @@ import { Table, Td, Th, TrBody, TrHead } from './TableElements'
import useSelectedMarket from 'hooks/useSelectedMarket'
import useMangoGroup from 'hooks/useMangoGroup'
import AmountWithValue from './AmountWithValue'
import ConnectEmptyState from './ConnectEmptyState'
import { useWallet } from '@solana/wallet-adapter-react'
const BalancesTable = () => {
const { t } = useTranslation(['common', 'trade'])
@ -30,6 +32,7 @@ const BalancesTable = () => {
const { group } = useMangoGroup()
const { mangoTokens } = useJupiterMints()
const { width } = useViewport()
const { connected } = useWallet()
const showTableView = width ? width > breakpoints.md : false
const banks = useMemo(() => {
@ -210,11 +213,15 @@ const BalancesTable = () => {
})}
</>
)
) : (
) : connected ? (
<div className="flex flex-col items-center p-8">
<NoSymbolIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
<p>{t('trade:no-balances')}</p>
</div>
) : (
<div className="p-8">
<ConnectEmptyState text={t('connect-balances')} />
</div>
)
}

9
components/swap/SwapHistoryTable.tsx
View File

@ -27,6 +27,8 @@ import useJupiterMints from 'hooks/useJupiterMints'
import { Table, Td, Th, TrBody, TrHead } from '@components/shared/TableElements'
import { EXPLORERS } from '@components/settings/PreferredExplorerSettings'
import useMangoAccount from 'hooks/useMangoAccount'
import ConnectEmptyState from '@components/shared/ConnectEmptyState'
import { useWallet } from '@solana/wallet-adapter-react'
const SwapHistoryTable = () => {
const { t } = useTranslation(['common', 'settings', 'swap'])
@ -37,6 +39,7 @@ const SwapHistoryTable = () => {
const [offset, setOffset] = useState(0)
const actions = mangoStore.getState().actions
const { mangoAccountAddress } = useMangoAccount()
const { connected } = useWallet()
const { width } = useViewport()
const showTableView = width ? width > breakpoints.md : false
const [preferredExplorer] = useLocalStorageState(
@ -437,11 +440,15 @@ const SwapHistoryTable = () => {
</div>
) : null}
</>
) : (
) : connected ? (
<div className="flex flex-col items-center p-8">
<NoSymbolIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
<p>{t('swap:no-history')}</p>
</div>
) : (
<div className="p-8">
<ConnectEmptyState text={t('swap:connect-swap')} />
</div>
)
}

97
components/trade/OpenOrders.tsx
View File

@ -9,6 +9,7 @@ import {
} from '@blockworks-foundation/mango-v4'
import Input from '@components/forms/Input'
import { IconButton } from '@components/shared/Button'
import ConnectEmptyState from '@components/shared/ConnectEmptyState'
import Loading from '@components/shared/Loading'
import SideBadge from '@components/shared/SideBadge'
import { Table, Td, Th, TrBody, TrHead } from '@components/shared/TableElements'
@ -235,7 +236,7 @@ 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>
{connected ? <Th className="w-[16.67%] text-right"></Th> : null}
<Th className="w-[16.67%] text-right"></Th>
</TrHead>
</thead>
<tbody>
@ -326,58 +327,56 @@ const OpenOrders = () => {
<Td className="w-[16.67%] text-right">
{formatFixedDecimals(o.size * o.price, true, true)}
</Td>
{connected ? (
<Td className="w-[16.67%]">
<div className="flex justify-end space-x-2">
{modifyOrderId !== o.orderId.toString() ? (
<>
<Td className="w-[16.67%]">
<div className="flex justify-end space-x-2">
{modifyOrderId !== o.orderId.toString() ? (
<>
<IconButton
onClick={() => showEditOrderForm(o, tickSize)}
size="small"
>
<PencilIcon className="h-4 w-4" />
</IconButton>
<Tooltip content={t('cancel')}>
<IconButton
onClick={() => showEditOrderForm(o, tickSize)}
disabled={cancelId === o.orderId.toString()}
onClick={() =>
o instanceof PerpOrder
? handleCancelPerpOrder(o)
: handleCancelSerumOrder(o)
}
size="small"
>
<PencilIcon className="h-4 w-4" />
</IconButton>
<Tooltip content={t('cancel')}>
<IconButton
disabled={cancelId === o.orderId.toString()}
onClick={() =>
o instanceof PerpOrder
? handleCancelPerpOrder(o)
: handleCancelSerumOrder(o)
}
size="small"
>
{cancelId === o.orderId.toString() ? (
<Loading className="h-4 w-4" />
) : (
<TrashIcon className="h-4 w-4" />
)}
</IconButton>
</Tooltip>
</>
) : (
<>
<IconButton
onClick={() => modifyOrder(o)}
size="small"
>
{loadingModifyOrder ? (
{cancelId === o.orderId.toString() ? (
<Loading className="h-4 w-4" />
) : (
<CheckIcon className="h-4 w-4" />
<TrashIcon className="h-4 w-4" />
)}
</IconButton>
<IconButton
onClick={cancelEditOrderForm}
size="small"
>
<XMarkIcon className="h-4 w-4" />
</IconButton>
</>
)}
</div>
</Td>
) : null}
</Tooltip>
</>
) : (
<>
<IconButton
onClick={() => modifyOrder(o)}
size="small"
>
{loadingModifyOrder ? (
<Loading className="h-4 w-4" />
) : (
<CheckIcon className="h-4 w-4" />
)}
</IconButton>
<IconButton
onClick={cancelEditOrderForm}
size="small"
>
<XMarkIcon className="h-4 w-4" />
</IconButton>
</>
)}
</div>
</Td>
</TrBody>
)
})
@ -529,11 +528,15 @@ const OpenOrders = () => {
})}
</div>
)
) : (
) : connected ? (
<div className="flex flex-col items-center p-8">
<NoSymbolIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
<p>{t('trade:no-orders')}</p>
</div>
) : (
<div className="p-8">
<ConnectEmptyState text={t('trade:connect-orders')} />
</div>
)
}

9
components/trade/PerpPositions.tsx
View File

@ -1,7 +1,9 @@
import { PerpMarket } from '@blockworks-foundation/mango-v4'
import { LinkButton } from '@components/shared/Button'
import ConnectEmptyState from '@components/shared/ConnectEmptyState'
import { Table, Td, Th, TrBody, TrHead } from '@components/shared/TableElements'
import { NoSymbolIcon } from '@heroicons/react/20/solid'
import { useWallet } from '@solana/wallet-adapter-react'
import mangoStore from '@store/mangoStore'
import useMangoAccount from 'hooks/useMangoAccount'
import useMangoGroup from 'hooks/useMangoGroup'
@ -23,6 +25,7 @@ const PerpPositions = () => {
const { group } = useMangoGroup()
const perpPositions = mangoStore((s) => s.mangoAccount.perpPositions)
const { selectedMarket } = useSelectedMarket()
const { connected } = useWallet()
const { mangoAccount } = useMangoAccount()
const handlePositionClick = (positionSize: number) => {
@ -144,11 +147,15 @@ const PerpPositions = () => {
</tbody>
</Table>
</div>
) : (
) : connected ? (
<div className="flex flex-col items-center p-8">
<NoSymbolIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
<p>{t('trade:no-positions')}</p>
</div>
) : (
<div className="p-8">
<ConnectEmptyState text={t('trade:connect-positions')} />
</div>
)
}

9
components/trade/TradeHistory.tsx
View File

@ -1,5 +1,6 @@
import { I80F48, PerpMarket } from '@blockworks-foundation/mango-v4'
import { IconButton, LinkButton } from '@components/shared/Button'
import ConnectEmptyState from '@components/shared/ConnectEmptyState'
import SheenLoader from '@components/shared/SheenLoader'
import SideBadge from '@components/shared/SideBadge'
import {
@ -12,6 +13,7 @@ import {
} from '@components/shared/TableElements'
import Tooltip from '@components/shared/Tooltip'
import { NoSymbolIcon, UsersIcon } from '@heroicons/react/20/solid'
import { useWallet } from '@solana/wallet-adapter-react'
import { PublicKey } from '@solana/web3.js'
import mangoStore from '@store/mangoStore'
import useMangoAccount from 'hooks/useMangoAccount'
@ -104,6 +106,7 @@ const TradeHistory = () => {
)
const [offset, setOffset] = useState(0)
const { width } = useViewport()
const { connected } = useWallet()
const showTableView = width ? width > breakpoints.md : false
const openOrderOwner = useMemo(() => {
@ -379,11 +382,15 @@ const TradeHistory = () => {
</div>
) : null}
</>
) : (
) : connected ? (
<div className="flex flex-col items-center p-8">
<NoSymbolIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
<p>No trade history</p>
</div>
) : (
<div className="p-8">
<ConnectEmptyState text={t('trade:connect-trade-history')} />
</div>
)
}

65
components/trade/UnsettledTrades.tsx
View File

@ -16,6 +16,7 @@ import TableMarketName from './TableMarketName'
import useMangoAccount from 'hooks/useMangoAccount'
import { useWallet } from '@solana/wallet-adapter-react'
import { formatDecimal } from 'utils/numbers'
import ConnectEmptyState from '@components/shared/ConnectEmptyState'
const UnsettledTrades = ({
unsettledSpotBalances,
@ -140,7 +141,7 @@ 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>
{connected ? <Th className="bg-th-bkg-1 text-right" /> : null}
<Th className="bg-th-bkg-1 text-right" />
</TrHead>
</thead>
<tbody>
@ -172,24 +173,22 @@ const UnsettledTrades = ({
) : null}
</div>
</Td>
{connected ? (
<Td>
<div className="flex justify-end">
<Tooltip content={t('trade:settle-funds')}>
<IconButton
onClick={() => handleSettleSerumFunds(mktAddress)}
size="small"
>
{settleMktAddress === mktAddress ? (
<Loading className="h-4 w-4" />
) : (
<CheckIcon className="h-4 w-4" />
)}
</IconButton>
</Tooltip>
</div>
</Td>
) : null}
<Td>
<div className="flex justify-end">
<Tooltip content={t('trade:settle-funds')}>
<IconButton
onClick={() => handleSettleSerumFunds(mktAddress)}
size="small"
>
{settleMktAddress === mktAddress ? (
<Loading className="h-4 w-4" />
) : (
<CheckIcon className="h-4 w-4" />
)}
</IconButton>
</Tooltip>
</div>
</Td>
</TrBody>
)
})}
@ -257,29 +256,31 @@ const UnsettledTrades = ({
<span className="font-body text-th-fgd-4">{quote}</span>
</span>
) : null}
{connected ? (
<IconButton
onClick={() => handleSettleSerumFunds(mktAddress)}
size="medium"
>
{settleMktAddress === mktAddress ? (
<Loading className="h-4 w-4" />
) : (
<CheckIcon className="h-4 w-4" />
)}
</IconButton>
) : null}
<IconButton
onClick={() => handleSettleSerumFunds(mktAddress)}
size="medium"
>
{settleMktAddress === mktAddress ? (
<Loading className="h-4 w-4" />
) : (
<CheckIcon className="h-4 w-4" />
)}
</IconButton>
</div>
</div>
)
})}
</div>
)
) : (
) : connected ? (
<div className="flex flex-col items-center p-8">
<NoSymbolIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
<p>{t('trade:no-unsettled')}</p>
</div>
) : (
<div className="p-8">
<ConnectEmptyState text={t('trade:connect-unsettled')} />
</div>
)
}

1
public/locales/en/common.json
View File

@ -37,6 +37,7 @@
"closing-account": "Closing your account...",
"collateral-value": "Collateral Value",
"connect": "Connect",
"connect-balances": "Connect to view your balances",
"connect-helper": "Connect to get started",
"copy-address": "Copy Address",
"copy-address-success": "Copied address: {{pk}}",

1
public/locales/en/trade.json
View File

@ -6,6 +6,7 @@
"cancel-order-error": "Failed to cancel order",
"connect-orders": "Connect to view your open orders",
"connect-positions": "Connect to view your perp positions",
"connect-trade-history": "Connect to view your trade history",
"connect-unsettled": "Connect to view your unsettled funds",
"entry-price": "Entry Price",
"est-slippage": "Est. Slippage",

1
public/locales/es/common.json
View File

@ -37,6 +37,7 @@
"closing-account": "Closing your account...",
"collateral-value": "Collateral Value",
"connect": "Connect",
"connect-balances": "Connect to view your balances",
"connect-helper": "Connect to get started",
"copy-address": "Copy Address",
"copy-address-success": "Copied address: {{pk}}",

1
public/locales/es/trade.json
View File

@ -6,6 +6,7 @@
"cancel-order-error": "Failed to cancel order",
"connect-orders": "Connect to view your open orders",
"connect-positions": "Connect to view your perp positions",
"connect-trade-history": "Connect to view your trade history",
"connect-unsettled": "Connect to view your unsettled funds",
"entry-price": "Entry Price",
"est-slippage": "Est. Slippage",

1
public/locales/ru/common.json
View File

@ -37,6 +37,7 @@
"closing-account": "Closing your account...",
"collateral-value": "Collateral Value",
"connect": "Connect",
"connect-balances": "Connect to view your balances",
"connect-helper": "Connect to get started",
"copy-address": "Copy Address",
"copy-address-success": "Copied address: {{pk}}",

1
public/locales/ru/trade.json
View File

@ -6,6 +6,7 @@
"cancel-order-error": "Failed to cancel order",
"connect-orders": "Connect to view your open orders",
"connect-positions": "Connect to view your perp positions",
"connect-trade-history": "Connect to view your trade history",
"connect-unsettled": "Connect to view your unsettled funds",
"entry-price": "Entry Price",
"est-slippage": "Est. Slippage",

1
public/locales/zh/common.json
View File

@ -37,6 +37,7 @@
"closing-account": "Closing your account...",
"collateral-value": "Collateral Value",
"connect": "Connect",
"connect-balances": "Connect to view your balances",
"connect-helper": "Connect to get started",
"copy-address": "Copy Address",
"copy-address-success": "Copied address: {{pk}}",

1
public/locales/zh/trade.json
View File

@ -6,6 +6,7 @@
"cancel-order-error": "Failed to cancel order",
"connect-orders": "Connect to view your open orders",
"connect-positions": "Connect to view your perp positions",
"connect-trade-history": "Connect to view your trade history",
"connect-unsettled": "Connect to view your unsettled funds",
"entry-price": "Entry Price",
"est-slippage": "Est. Slippage",

1
public/locales/zh_tw/common.json
View File

@ -37,6 +37,7 @@
"closing-account": "Closing your account...",
"collateral-value": "Collateral Value",
"connect": "Connect",
"connect-balances": "Connect to view your balances",
"connect-helper": "Connect to get started",
"copy-address": "Copy Address",
"copy-address-success": "Copied address: {{pk}}",

1
public/locales/zh_tw/trade.json
View File

@ -6,6 +6,7 @@
"cancel-order-error": "Failed to cancel order",
"connect-orders": "Connect to view your open orders",
"connect-positions": "Connect to view your perp positions",
"connect-trade-history": "Connect to view your trade history",
"connect-unsettled": "Connect to view your unsettled funds",
"entry-price": "Entry Price",
"est-slippage": "Est. Slippage",