add back arrow
This commit is contained in:
parent
514dd63efc
commit
08505b09bc
|
@ -1,11 +1,10 @@
|
||||||
import { useCallback, useState } from 'react'
|
import { useCallback, useState } from 'react'
|
||||||
import { ArrowRightIcon } from '@heroicons/react/20/solid'
|
import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/20/solid'
|
||||||
import { useTranslation } from 'next-i18next'
|
import { useTranslation } from 'next-i18next'
|
||||||
|
|
||||||
import mangoStore from '@store/mangoStore'
|
import mangoStore from '@store/mangoStore'
|
||||||
import WalletIcon from './icons/WalletIcon'
|
import WalletIcon from './icons/WalletIcon'
|
||||||
import MangoAccountsList from './MangoAccountsList'
|
import { IconButton, LinkButton } from './shared/Button'
|
||||||
import { LinkButton } from './shared/Button'
|
|
||||||
import ConnectedMenu from './wallet/ConnectedMenu'
|
import ConnectedMenu from './wallet/ConnectedMenu'
|
||||||
import { ConnectWalletButton } from './wallet/ConnectWalletButton'
|
import { ConnectWalletButton } from './wallet/ConnectWalletButton'
|
||||||
import { IS_ONBOARDED_KEY } from '../utils/constants'
|
import { IS_ONBOARDED_KEY } from '../utils/constants'
|
||||||
|
@ -13,6 +12,7 @@ import useLocalStorageState from '../hooks/useLocalStorageState'
|
||||||
import UserSetupModal from './modals/UserSetupModal'
|
import UserSetupModal from './modals/UserSetupModal'
|
||||||
import CreateAccountModal from './modals/CreateAccountModal'
|
import CreateAccountModal from './modals/CreateAccountModal'
|
||||||
import MangoAccountsListModal from './modals/MangoAccountsListModal'
|
import MangoAccountsListModal from './modals/MangoAccountsListModal'
|
||||||
|
import { useRouter } from 'next/router'
|
||||||
|
|
||||||
const TopBar = () => {
|
const TopBar = () => {
|
||||||
const { t } = useTranslation('common')
|
const { t } = useTranslation('common')
|
||||||
|
@ -22,6 +22,8 @@ const TopBar = () => {
|
||||||
const [showUserSetupModal, setShowUserSetupModal] = useState(false)
|
const [showUserSetupModal, setShowUserSetupModal] = useState(false)
|
||||||
const [showCreateAccountModal, setShowCreateAccountModal] = useState(false)
|
const [showCreateAccountModal, setShowCreateAccountModal] = useState(false)
|
||||||
const [showMangoAccountsModal, setShowMangoAccountsModal] = useState(false)
|
const [showMangoAccountsModal, setShowMangoAccountsModal] = useState(false)
|
||||||
|
const router = useRouter()
|
||||||
|
const { query } = router
|
||||||
|
|
||||||
const handleCloseModal = useCallback(() => {
|
const handleCloseModal = useCallback(() => {
|
||||||
setShowUserSetupModal(false)
|
setShowUserSetupModal(false)
|
||||||
|
@ -34,7 +36,18 @@ const TopBar = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="flex w-full items-center justify-between space-x-4">
|
<div className="flex w-full items-center justify-between space-x-4">
|
||||||
<span className="mb-0">
|
<span className="mb-0 flex items-center">
|
||||||
|
{query.token ? (
|
||||||
|
<div
|
||||||
|
className={`mr-4 hidden h-16 items-center pr-6 md:flex ${
|
||||||
|
!connected || !mangoAccount ? 'border-r border-th-bkg-3' : ''
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<IconButton onClick={() => router.back()} hideBg size="small">
|
||||||
|
<ArrowLeftIcon className="h-6 w-6" />
|
||||||
|
</IconButton>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
{!connected ? (
|
{!connected ? (
|
||||||
<span className="hidden items-center md:flex">
|
<span className="hidden items-center md:flex">
|
||||||
<WalletIcon className="h-5 w-5 text-th-fgd-3" />
|
<WalletIcon className="h-5 w-5 text-th-fgd-3" />
|
||||||
|
|
|
@ -29,6 +29,7 @@ const MangoAccountsListModal = ({
|
||||||
const { t } = useTranslation('common')
|
const { t } = useTranslation('common')
|
||||||
const mangoAccounts = mangoStore((s) => s.mangoAccounts)
|
const mangoAccounts = mangoStore((s) => s.mangoAccounts)
|
||||||
const actions = mangoStore((s) => s.actions)
|
const actions = mangoStore((s) => s.actions)
|
||||||
|
const group = mangoStore((s) => s.group)
|
||||||
const loading = mangoStore((s) => s.mangoAccount.initialLoad)
|
const loading = mangoStore((s) => s.mangoAccount.initialLoad)
|
||||||
const [showNewAccountForm, setShowNewAccountForm] = useState(false)
|
const [showNewAccountForm, setShowNewAccountForm] = useState(false)
|
||||||
const [, setLastAccountViewed] = useLocalStorageStringState(LAST_ACCOUNT_KEY)
|
const [, setLastAccountViewed] = useLocalStorageStringState(LAST_ACCOUNT_KEY)
|
||||||
|
@ -36,16 +37,13 @@ const MangoAccountsListModal = ({
|
||||||
const handleSelectMangoAccount = async (acc: MangoAccount) => {
|
const handleSelectMangoAccount = async (acc: MangoAccount) => {
|
||||||
const set = mangoStore.getState().set
|
const set = mangoStore.getState().set
|
||||||
const client = mangoStore.getState().client
|
const client = mangoStore.getState().client
|
||||||
const group = mangoStore.getState().group
|
|
||||||
if (!group) return
|
if (!group) return
|
||||||
set((s) => {
|
set((s) => {
|
||||||
s.activityFeed.feed = []
|
s.activityFeed.feed = []
|
||||||
s.activityFeed.loading = true
|
s.activityFeed.loading = true
|
||||||
})
|
})
|
||||||
try {
|
try {
|
||||||
const reloadedMangoAccount = await retryFn(() =>
|
const reloadedMangoAccount = await retryFn(() => acc.reload(client))
|
||||||
acc.reload(client, group)
|
|
||||||
)
|
|
||||||
set((s) => {
|
set((s) => {
|
||||||
s.mangoAccount.current = reloadedMangoAccount
|
s.mangoAccount.current = reloadedMangoAccount
|
||||||
s.mangoAccount.lastUpdatedAt = new Date().toISOString()
|
s.mangoAccount.lastUpdatedAt = new Date().toISOString()
|
||||||
|
@ -70,10 +68,13 @@ const MangoAccountsListModal = ({
|
||||||
<div className="thin-scroll mt-4 max-h-[280px] space-y-2 overflow-y-auto">
|
<div className="thin-scroll mt-4 max-h-[280px] space-y-2 overflow-y-auto">
|
||||||
{mangoAccounts.map((acc) => {
|
{mangoAccounts.map((acc) => {
|
||||||
const accountValue = formatFixedDecimals(
|
const accountValue = formatFixedDecimals(
|
||||||
toUiDecimalsForQuote(Number(acc.getEquity())),
|
toUiDecimalsForQuote(Number(acc.getEquity(group!))),
|
||||||
true
|
true
|
||||||
)
|
)
|
||||||
const maintHealth = acc.getHealthRatioUi(HealthType.maint)
|
const maintHealth = acc.getHealthRatioUi(
|
||||||
|
group!,
|
||||||
|
HealthType.maint
|
||||||
|
)
|
||||||
return (
|
return (
|
||||||
<div key={acc.publicKey.toString()}>
|
<div key={acc.publicKey.toString()}>
|
||||||
<button
|
<button
|
||||||
|
|
|
@ -30,7 +30,7 @@ dayjs.extend(relativeTime)
|
||||||
export async function getStaticProps({ locale }: { locale: string }) {
|
export async function getStaticProps({ locale }: { locale: string }) {
|
||||||
return {
|
return {
|
||||||
props: {
|
props: {
|
||||||
...(await serverSideTranslations(locale, ['common', 'token'])),
|
...(await serverSideTranslations(locale, ['common', 'profile', 'token'])),
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -205,11 +205,11 @@ const Token: NextPage = () => {
|
||||||
<div className="pb-20 md:pb-16">
|
<div className="pb-20 md:pb-16">
|
||||||
{coingeckoData && bank ? (
|
{coingeckoData && bank ? (
|
||||||
<>
|
<>
|
||||||
<div className="flex flex-col border-b border-th-bkg-3 px-6 py-3 md:flex-row md:items-end md:justify-between">
|
<div className="flex flex-col border-b border-th-bkg-3 px-6 py-3 md:flex-row md:items-center md:justify-between">
|
||||||
<div className="mb-4 md:mb-1">
|
<div className="mb-4 md:mb-1">
|
||||||
<div className="mb-1.5 flex items-center space-x-2">
|
<div className="mb-1.5 flex items-center space-x-2">
|
||||||
<Image src={logoURI!} height="20" width="20" />
|
<Image src={logoURI!} height="20" width="20" />
|
||||||
<h1 className="text-lg font-normal">
|
<h1 className="text-base font-normal">
|
||||||
{coingeckoData.name}{' '}
|
{coingeckoData.name}{' '}
|
||||||
<span className="text-th-fgd-4">({bank.name})</span>
|
<span className="text-th-fgd-4">({bank.name})</span>
|
||||||
</h1>
|
</h1>
|
||||||
|
@ -232,7 +232,7 @@ const Token: NextPage = () => {
|
||||||
price={bank.uiPrice}
|
price={bank.uiPrice}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="mb-2 w-full rounded-md bg-th-bkg-2 p-4 md:w-[343px]">
|
<div className="w-full rounded-md bg-th-bkg-2 p-4 md:w-[343px]">
|
||||||
<div className="mb-4 flex justify-between">
|
<div className="mb-4 flex justify-between">
|
||||||
<p>
|
<p>
|
||||||
{bank.name} {t('balance')}:
|
{bank.name} {t('balance')}:
|
||||||
|
|
Loading…
Reference in New Issue