add back arrow

components/TopBar.tsx

@@ -1,11 +1,10 @@
 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 mangoStore from '@store/mangoStore'
 import WalletIcon from './icons/WalletIcon'
-import MangoAccountsList from './MangoAccountsList'
-import { LinkButton } from './shared/Button'
+import { IconButton, LinkButton } from './shared/Button'
 import ConnectedMenu from './wallet/ConnectedMenu'
 import { ConnectWalletButton } from './wallet/ConnectWalletButton'
 import { IS_ONBOARDED_KEY } from '../utils/constants'
@@ -13,6 +12,7 @@ import useLocalStorageState from '../hooks/useLocalStorageState'
 import UserSetupModal from './modals/UserSetupModal'
 import CreateAccountModal from './modals/CreateAccountModal'
 import MangoAccountsListModal from './modals/MangoAccountsListModal'
+import { useRouter } from 'next/router'
 
 const TopBar = () => {
   const { t } = useTranslation('common')
@@ -22,6 +22,8 @@ const TopBar = () => {
   const [showUserSetupModal, setShowUserSetupModal] = useState(false)
   const [showCreateAccountModal, setShowCreateAccountModal] = useState(false)
   const [showMangoAccountsModal, setShowMangoAccountsModal] = useState(false)
+  const router = useRouter()
+  const { query } = router
 
   const handleCloseModal = useCallback(() => {
     setShowUserSetupModal(false)
@@ -34,7 +36,18 @@ const TopBar = () => {
   return (
     <>
       <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 ? (
             <span className="hidden items-center md:flex">
               <WalletIcon className="h-5 w-5 text-th-fgd-3" />

components/modals/MangoAccountsListModal.tsx

@@ -29,6 +29,7 @@ const MangoAccountsListModal = ({
   const { t } = useTranslation('common')
   const mangoAccounts = mangoStore((s) => s.mangoAccounts)
   const actions = mangoStore((s) => s.actions)
+  const group = mangoStore((s) => s.group)
   const loading = mangoStore((s) => s.mangoAccount.initialLoad)
   const [showNewAccountForm, setShowNewAccountForm] = useState(false)
   const [, setLastAccountViewed] = useLocalStorageStringState(LAST_ACCOUNT_KEY)
@@ -36,16 +37,13 @@ const MangoAccountsListModal = ({
   const handleSelectMangoAccount = async (acc: MangoAccount) => {
     const set = mangoStore.getState().set
     const client = mangoStore.getState().client
-    const group = mangoStore.getState().group
     if (!group) return
     set((s) => {
       s.activityFeed.feed = []
       s.activityFeed.loading = true
     })
     try {
-      const reloadedMangoAccount = await retryFn(() =>
-        acc.reload(client, group)
-      )
+      const reloadedMangoAccount = await retryFn(() => acc.reload(client))
       set((s) => {
         s.mangoAccount.current = reloadedMangoAccount
         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">
               {mangoAccounts.map((acc) => {
                 const accountValue = formatFixedDecimals(
-                  toUiDecimalsForQuote(Number(acc.getEquity())),
+                  toUiDecimalsForQuote(Number(acc.getEquity(group!))),
                   true
                 )
-                const maintHealth = acc.getHealthRatioUi(HealthType.maint)
+                const maintHealth = acc.getHealthRatioUi(
+                  group!,
+                  HealthType.maint
+                )
                 return (
                   <div key={acc.publicKey.toString()}>
                     <button

pages/token/[token].tsx

@@ -30,7 +30,7 @@ dayjs.extend(relativeTime)
 export async function getStaticProps({ locale }: { locale: string }) {
   return {
     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">
       {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-1.5 flex items-center space-x-2">
                 <Image src={logoURI!} height="20" width="20" />
-                <h1 className="text-lg font-normal">
+                <h1 className="text-base font-normal">
                   {coingeckoData.name}{' '}
                   <span className="text-th-fgd-4">({bank.name})</span>
                 </h1>
@@ -232,7 +232,7 @@ const Token: NextPage = () => {
                 price={bank.uiPrice}
               />
             </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">
                 <p>
                   {bank.name} {t('balance')}: