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

merge main

This commit is contained in:
saml33 2023-01-26 10:07:25 +11:00
parent 6a9a40f95e 9623341498
commit f6e8ed1557
17 changed files with 136 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/account/AccountPage.tsx
View File

@ -32,7 +32,7 @@ import {
ANIMATION_SETTINGS_KEY,
// IS_ONBOARDED_KEY
} from 'utils/constants'
// import { useWallet } from '@solana/wallet-adapter-react'
import { useWallet } from '@solana/wallet-adapter-react'
import useLocalStorageState from 'hooks/useLocalStorageState'
// import AccountOnboardingTour from '@components/tours/AccountOnboardingTour'
import dayjs from 'dayjs'
@ -45,7 +45,7 @@ import FormatNumericValue from '@components/shared/FormatNumericValue'
const AccountPage = () => {
const { t } = useTranslation(['common', 'account'])
// const { connected } = useWallet()
const { connected } = useWallet()
const { group } = useMangoGroup()
const { mangoAccount, mangoAccountAddress } = useMangoAccount()
const actions = mangoStore.getState().actions
@ -75,7 +75,7 @@ const AccountPage = () => {
)
useEffect(() => {
if (mangoAccountAddress) {
if (mangoAccountAddress || (connected && !mangoAccountAddress)) {
const set = mangoStore.getState().set
set((s) => {
s.mangoAccount.performance.initialLoad = false
@ -84,7 +84,7 @@ const AccountPage = () => {
actions.fetchAccountPerformance(mangoAccountAddress, 1)
actions.fetchAccountInterestTotals(mangoAccountAddress)
}
}, [actions, mangoAccountAddress])
}, [actions, connected, mangoAccountAddress])
useEffect(() => {
if (

2
components/account/CreateAccountForm.tsx
View File

@ -126,7 +126,7 @@ const CreateAccountForm = ({
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setName(e.target.value)
}
charLimit={30}
maxLength={30}
/>
</div>
<div className="space-y-4">

12
components/forms/Input.tsx
View File

@ -4,7 +4,7 @@ interface InputProps {
type: string
value: any
onChange: (e: ChangeEvent<HTMLInputElement>) => void
charLimit?: number
maxLength?: number
className?: string
disabled?: boolean
prefixClassname?: string
@ -21,7 +21,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
type,
value,
onChange,
charLimit,
maxLength,
className,
error,
wrapperClassName = 'w-full',
@ -59,20 +59,20 @@ const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
type={type}
value={value}
onChange={onChange}
maxLength={charLimit && charLimit}
maxLength={maxLength ? maxLength : undefined}
/>
{suffix ? (
<span className="absolute right-0 flex h-full items-center bg-transparent pr-2 text-xs text-th-fgd-4">
{suffix}
</span>
) : null}
{charLimit ? (
{maxLength ? (
<p
className={`absolute -top-7 right-0 mt-1 flex justify-end text-xs ${
value.length === charLimit ? 'text-th-down' : 'text-th-fgd-4'
value.length === maxLength ? 'text-th-down' : 'text-th-fgd-4'
}`}
>
{`${value.length}/${charLimit}`}
{`${value.length}/${maxLength}`}
</p>
) : null}
</div>

2
components/modals/AccountNameModal.tsx
View File

@ -64,7 +64,7 @@ const AccountNameModal = ({ isOpen, onClose }: ModalProps) => {
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setName(e.target.value)
}
charLimit={30}
maxLength={30}
/>
</div>
<Button

103
components/modals/CloseAccountModal.tsx
View File

@ -11,11 +11,7 @@ import {
TokenPosition,
toUiDecimalsForQuote,
} from '@blockworks-foundation/mango-v4'
import {
CheckCircleIcon,
ExclamationCircleIcon,
TrashIcon,
} from '@heroicons/react/20/solid'
import { ExclamationCircleIcon, TrashIcon } from '@heroicons/react/20/solid'
import useUnsettledPerpPositions from 'hooks/useUnsettledPerpPositions'
import { getMultipleAccounts } from '@project-serum/anchor/dist/cjs/utils/rpc'
import { formatCurrencyValue } from 'utils/numbers'
@ -120,59 +116,22 @@ const CloseAccountModal = ({ isOpen, onClose }: ModalProps) => {
hasBorrows ||
hasOpenPositions ||
!!unsettledBalances.length
return (
<Modal isOpen={isOpen} onClose={onClose}>
<div className="h-[550px]">
<div className="h-[268px]">
{loading ? (
<BounceLoader loadingMessage={t('closing-account')} />
) : (
<div className="flex h-full flex-col justify-between">
<div className="space-y-4">
<h2 className="mb-1">{t('close-account')}</h2>
<p>{t('description')}</p>
<p>{t('you-must')}:</p>
<div className="overflow-none space-y-2 rounded-md bg-th-bkg-4 p-2 sm:p-4">
<div className="flex items-center text-th-fgd-2">
{hasBorrows ? (
<ExclamationCircleIcon className="mr-1.5 h-4 w-4 text-th-down" />
) : (
<CheckCircleIcon className="mr-1.5 h-4 w-4 text-th-success"></CheckCircleIcon>
)}
{t('close-all-borrows')}
</div>
<div className="flex items-center text-th-fgd-2">
{hasOpenPositions ? (
<ExclamationCircleIcon className="mr-1.5 h-4 w-4 text-th-down" />
) : (
<CheckCircleIcon className="mr-1.5 h-4 w-4 text-th-success"></CheckCircleIcon>
)}
{t('close-perp-positions')}
</div>
<div className="flex items-center text-th-fgd-2">
{hasOpenOrders ? (
<ExclamationCircleIcon className="mr-1.5 h-4 w-4 text-th-down" />
) : (
<CheckCircleIcon className="mr-1.5 h-4 w-4 text-th-success"></CheckCircleIcon>
)}
{t('close-open-orders')}
</div>
<div className="flex items-center text-th-fgd-2">
{unsettledBalances.length ? (
<ExclamationCircleIcon className="mr-1.5 h-4 w-4 text-th-down" />
) : (
<CheckCircleIcon className="mr-1.5 h-4 w-4 text-th-success"></CheckCircleIcon>
)}
{t('settle-balances')}
</div>
</div>
<p>By closing your account you will:</p>
<div className="overflow-none space-y-2 rounded-md bg-th-bkg-4 p-2 sm:p-4">
<div className="flex items-center text-th-fgd-2">
<CheckCircleIcon className="mr-1.5 h-4 w-4 text-th-success"></CheckCircleIcon>
{t('delete-your-account')}
</div>
<div className="flex items-center text-th-fgd-2">
<CheckCircleIcon className="mr-1.5 h-4 w-4 text-th-success"></CheckCircleIcon>
<div>
<h2 className="mb-2">{t('close-account')}</h2>
{!isDisabled ? (
<>
<p className="mb-3">{t('are-you-sure')}:</p>
<ol className="list-inside list-decimal space-y-1.5 border-y border-th-bkg-3 py-3 text-left">
<li>{t('delete-your-account')}</li>
<li>
{t('withdraw-assets-worth', {
value:
mangoAccount && group
@ -183,16 +142,46 @@ const CloseAccountModal = ({ isOpen, onClose }: ModalProps) => {
)
: 0,
})}
</div>
<div className="flex items-center text-th-fgd-2">
<CheckCircleIcon className="mr-1.5 h-4 w-4 text-th-success"></CheckCircleIcon>
</li>
<li>
{t('recover-x-sol', {
amount: totalAccountSOL.toFixed(3),
amount: totalAccountSOL.toFixed(4),
})}
</li>
</ol>
</>
) : (
<>
<p className="mb-3">{t('you-must')}:</p>
<div className="space-y-1.5 border-y border-th-bkg-3 py-3">
{hasBorrows ? (
<div className="flex items-center">
<ExclamationCircleIcon className="mr-1.5 h-5 w-5 text-th-down" />
<p>{t('close-all-borrows')}</p>
</div>
) : null}
{hasOpenPositions ? (
<div className="flex items-center">
<ExclamationCircleIcon className="mr-1.5 h-5 w-5 text-th-down" />
<p>{t('close-perp-positions')}</p>
</div>
) : null}
{hasOpenOrders ? (
<div className="flex items-center">
<ExclamationCircleIcon className="mr-1.5 h-5 w-5 text-th-down" />
<p>{t('close-open-orders')}</p>
</div>
) : null}
{unsettledBalances.length ? (
<div className="flex items-center">
<ExclamationCircleIcon className="mr-1.5 h-5 w-5 text-th-down" />
<p>{t('settle-balances')}</p>
</div>
) : null}
</div>
</>
)}
</div>
<Button
className="w-full"
disabled={isDisabled}

18
components/modals/MangoAccountsListModal.tsx
View File

@ -1,4 +1,4 @@
import { useState } from 'react'
import { useMemo, useState } from 'react'
import {
CheckIcon,
DocumentDuplicateIcon,
@ -48,6 +48,18 @@ const MangoAccountsListModal = ({
const { asPath } = useRouter()
const [submitting, setSubmitting] = useState('')
const sortedMangoAccounts = useMemo(() => {
if (!group) return mangoAccounts
return [...mangoAccounts].sort((a, b) => {
if (b.publicKey.toString() === mangoAccount?.publicKey.toString())
return 1
if (a.publicKey.toString() === mangoAccount?.publicKey.toString())
return -1
return b.getEquity(group).toNumber() - a.getEquity(group).toNumber()
})
}, [group, mangoAccounts])
const handleSelectMangoAccount = async (acc: MangoAccount) => {
const set = mangoStore.getState().set
const client = mangoStore.getState().client
@ -94,8 +106,8 @@ const MangoAccountsListModal = ({
{loading ? (
<Loading />
) : mangoAccounts.length ? (
<div className="thin-scroll mt-4 max-h-[280px] space-y-2 overflow-y-auto">
{mangoAccounts.map((acc) => {
<div className="thin-scroll mt-4 max-h-[320px] space-y-2 overflow-y-auto">
{sortedMangoAccounts.map((acc) => {
if (
mangoAccount &&
acc.publicKey.equals(mangoAccount.publicKey)

2
components/modals/UserSetupModal.tsx
View File

@ -366,7 +366,7 @@ const UserSetupModal = ({
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setAccountName(e.target.value)
}
charLimit={30}
maxLength={30}
/>
</div>
<SolBalanceWarnings className="mt-4" />

2
components/profile/EditProfileForm.tsx
View File

@ -164,7 +164,7 @@ const EditProfileForm = ({
onChange={(e: ChangeEvent<HTMLInputElement>) =>
onChangeNameInput(e.target.value)
}
charLimit={20}
maxLength={20}
/>
{inputError ? (
<div className="mt-1.5 flex items-center space-x-1">

7
components/stats/StatsPage.tsx
View File

@ -1,7 +1,9 @@
import TabButtons from '@components/shared/TabButtons'
import mangoStore from '@store/mangoStore'
import useMangoGroup from 'hooks/useMangoGroup'
import { useViewport } from 'hooks/useViewport'
import { useEffect, useMemo, useState } from 'react'
import { breakpoints } from 'utils/theme'
import MangoStats from './MangoStats'
import PerpStats from './PerpStats'
import SpotMarketsTable from './SpotMarketsTable'
@ -17,6 +19,8 @@ const StatsPage = () => {
const [activeTab, setActiveTab] = useState('tokens')
const actions = mangoStore.getState().actions
const { group } = useMangoGroup()
const { width } = useViewport()
const fullWidthTabs = width ? width < breakpoints.lg : false
useEffect(() => {
if (group) {
@ -32,9 +36,10 @@ const StatsPage = () => {
<div className="border-b border-th-bkg-3">
<TabButtons
activeValue={activeTab}
fillWidth={fullWidthTabs}
onChange={(v) => setActiveTab(v)}
values={tabsWithCount}
showBorders
values={tabsWithCount}
/>
</div>
<TabContent activeTab={activeTab} />

4
components/trade/Orderbook.tsx
View File

@ -188,6 +188,7 @@ const Orderbook = () => {
baseSymbol,
quoteSymbol,
} = useSelectedMarket()
const connection = mangoStore((s) => s.connection)
const [isScrolled, setIsScrolled] = useState(false)
const [orderbookData, setOrderbookData] = useState<any | null>(null)
@ -324,7 +325,6 @@ const Orderbook = () => {
}, 400)
useEffect(() => {
const connection = mangoStore.getState().connection
const group = mangoStore.getState().group
const set = mangoStore.getState().set
const client = mangoStore.getState().client
@ -405,7 +405,7 @@ const Orderbook = () => {
connection.removeAccountChangeListener(askSubscriptionId)
}
}
}, [market])
}, [market, connection])
useEffect(() => {
window.addEventListener('resize', verticallyCenterOrderbook)

8
components/trade/TradeAdvancedPage.tsx
View File

@ -74,13 +74,13 @@ const TradeAdvancedPage = () => {
],
xxl: [
{ i: 'market-header', x: 0, y: 0, w: 15, h: marketHeaderHeight },
{ i: 'tv-chart', x: 0, y: 1, w: 15, h: 536 },
{ i: 'tv-chart', x: 0, y: 1, w: 15, h: 488 },
{
i: 'balances',
x: 0,
y: 2,
w: 15,
h: getHeight(innerHeight, 0, 536 + marketHeaderHeight),
h: getHeight(innerHeight, 0, 488 + marketHeaderHeight),
},
{
i: 'orderbook',
@ -118,13 +118,13 @@ const TradeAdvancedPage = () => {
],
lg: [
{ i: 'market-header', x: 0, y: 0, w: 13, h: marketHeaderHeight },
{ i: 'tv-chart', x: 0, y: 1, w: 13, h: 488 },
{ i: 'tv-chart', x: 0, y: 1, w: 13, h: 456 },
{
i: 'balances',
x: 0,
y: 2,
w: 13,
h: getHeight(innerHeight, 0, 488 + marketHeaderHeight),
h: getHeight(innerHeight, 0, 456 + marketHeaderHeight),
},
{
i: 'orderbook',

10
pages/dashboard/index.tsx
View File

@ -46,7 +46,7 @@ const Dashboard: NextPage = () => {
return (
<div className="grid grid-cols-12">
<div className="col-span-12 lg:col-span-8 lg:col-start-3 xl:col-span-6 xl:col-start-4">
<div className="col-span-12 lg:col-span-8 lg:col-start-3">
<div className="p-8 pb-20 md:pb-16 lg:p-10">
<h1>Dashboard</h1>
{group ? (
@ -102,8 +102,8 @@ const Dashboard: NextPage = () => {
<>
<Disclosure.Button
aria-label="panel"
className={`default-transition flex w-full items-center justify-between border-t border-th-bkg-3 p-4 md:hover:bg-th-bkg-2 ${
open ? 'bg-th-bkg-2' : ''
className={`default-transition flex w-full items-center justify-between border-t border-th-bkg-3 p-4 md:hover:bg-th-bkg-4 ${
open ? 'bg-th-bkg-4' : ''
}`}
>
<div className="flex items-center">
@ -542,9 +542,9 @@ const KeyValuePair = ({
value: number | ReactNode | string
}) => {
return (
<div className="flex justify-between border-t border-th-bkg-3 p-4 xl:py-3">
<div className="flex justify-between border-t border-th-bkg-2 px-6 py-3">
<span className="mr-4 whitespace-nowrap text-th-fgd-3">{label}</span>
{value}
<span className="font-mono text-th-fgd-2">{value}</span>
</div>
)
}

13
public/locales/en/close-account.json
View File

@ -1,11 +1,11 @@
{
"description": "You can close your Mango account and recover the small amount amount of SOL used to cover rent exemption.",
"you-must": "To close account you must",
"are-you-sure": "Are you sure?",
"are-you-sure": "Are you sure? Closing your account will",
"before-you-continue": "Before you can continue",
"close-all-borrows": "Close all borrows",
"close-account": "Close Account",
"closing-account": "Closing your account...",
"close-all-borrows": "Repay all borrows",
"close-open-orders": "Close all open orders",
"close-perp-positions": "Close and settle all futures positons",
"close-perp-positions": "Close and settle all perp positons",
"closing-account-will": "Closing your Mango Account will:",
"delete-your-account": "Delete your Mango Account",
"error-deleting-account": "Error deleting your Mango Account",
@ -14,6 +14,5 @@
"settle-balances": "Settle all balances",
"transaction-confirmed": "Transaction Confirmed",
"withdraw-assets-worth": "Withdraw assets worth {{value}}",
"close-account": "Close Account",
"closing-account": "Closing your account..."
"you-must": "Before you can close your account"
}

13
public/locales/es/close-account.json
View File

@ -1,11 +1,11 @@
{
"description": "You can close your Mango account and recover the small amount amount of SOL used to cover rent exemption.",
"you-must": "To close account you must",
"are-you-sure": "Are you sure?",
"are-you-sure": "Are you sure? Closing your account will",
"before-you-continue": "Before you can continue",
"close-all-borrows": "Close all borrows",
"close-account": "Close Account",
"closing-account": "Closing your account...",
"close-all-borrows": "Repay all borrows",
"close-open-orders": "Close all open orders",
"close-perp-positions": "Close and settle all futures positons",
"close-perp-positions": "Close and settle all perp positons",
"closing-account-will": "Closing your Mango Account will:",
"delete-your-account": "Delete your Mango Account",
"error-deleting-account": "Error deleting your Mango Account",
@ -14,6 +14,5 @@
"settle-balances": "Settle all balances",
"transaction-confirmed": "Transaction Confirmed",
"withdraw-assets-worth": "Withdraw assets worth {{value}}",
"close-account": "Close Account",
"closing-account": "Closing your account..."
"you-must": "Before you can close your account"
}

13
public/locales/ru/close-account.json
View File

@ -1,11 +1,11 @@
{
"description": "You can close your Mango account and recover the small amount amount of SOL used to cover rent exemption.",
"you-must": "To close account you must",
"are-you-sure": "Are you sure?",
"are-you-sure": "Are you sure? Closing your account will",
"before-you-continue": "Before you can continue",
"close-all-borrows": "Close all borrows",
"close-account": "Close Account",
"closing-account": "Closing your account...",
"close-all-borrows": "Repay all borrows",
"close-open-orders": "Close all open orders",
"close-perp-positions": "Close and settle all futures positons",
"close-perp-positions": "Close and settle all perp positons",
"closing-account-will": "Closing your Mango Account will:",
"delete-your-account": "Delete your Mango Account",
"error-deleting-account": "Error deleting your Mango Account",
@ -14,6 +14,5 @@
"settle-balances": "Settle all balances",
"transaction-confirmed": "Transaction Confirmed",
"withdraw-assets-worth": "Withdraw assets worth {{value}}",
"close-account": "Close Account",
"closing-account": "Closing your account..."
"you-must": "Before you can close your account"
}

13
public/locales/zh/close-account.json
View File

@ -1,11 +1,11 @@
{
"description": "You can close your Mango account and recover the small amount amount of SOL used to cover rent exemption.",
"you-must": "To close account you must",
"are-you-sure": "Are you sure?",
"are-you-sure": "Are you sure? Closing your account will",
"before-you-continue": "Before you can continue",
"close-all-borrows": "Close all borrows",
"close-account": "Close Account",
"closing-account": "Closing your account...",
"close-all-borrows": "Repay all borrows",
"close-open-orders": "Close all open orders",
"close-perp-positions": "Close and settle all futures positons",
"close-perp-positions": "Close and settle all perp positons",
"closing-account-will": "Closing your Mango Account will:",
"delete-your-account": "Delete your Mango Account",
"error-deleting-account": "Error deleting your Mango Account",
@ -14,6 +14,5 @@
"settle-balances": "Settle all balances",
"transaction-confirmed": "Transaction Confirmed",
"withdraw-assets-worth": "Withdraw assets worth {{value}}",
"close-account": "Close Account",
"closing-account": "Closing your account..."
"you-must": "Before you can close your account"
}

13
public/locales/zh_tw/close-account.json
View File

@ -1,11 +1,11 @@
{
"description": "You can close your Mango account and recover the small amount amount of SOL used to cover rent exemption.",
"you-must": "To close account you must",
"are-you-sure": "Are you sure?",
"are-you-sure": "Are you sure? Closing your account will",
"before-you-continue": "Before you can continue",
"close-all-borrows": "Close all borrows",
"close-account": "Close Account",
"closing-account": "Closing your account...",
"close-all-borrows": "Repay all borrows",
"close-open-orders": "Close all open orders",
"close-perp-positions": "Close and settle all futures positons",
"close-perp-positions": "Close and settle all perp positons",
"closing-account-will": "Closing your Mango Account will:",
"delete-your-account": "Delete your Mango Account",
"error-deleting-account": "Error deleting your Mango Account",
@ -14,6 +14,5 @@
"settle-balances": "Settle all balances",
"transaction-confirmed": "Transaction Confirmed",
"withdraw-assets-worth": "Withdraw assets worth {{value}}",
"close-account": "Close Account",
"closing-account": "Closing your account..."
"you-must": "Before you can close your account"
}