Merge branch 'main' into token-details

2022-10-28 12:46:57 -04:00 · 2022-10-28 12:46:57 -04:00 · 8ce855dc65
parent 598cddaa83 bb62181a1b
commit 8ce855dc65
54 changed files with 661 additions and 490 deletions
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@ -56,7 +56,7 @@ const Layout = ({ children }: { children: ReactNode }) => {

          <div className="fixed z-20 hidden h-screen md:block">
            <button
-              className="default-transition absolute right-0 top-1/2 z-20 hidden h-8 w-3 -translate-y-1/2 rounded-none rounded-l bg-th-bkg-3 hover:bg-th-bkg-4 focus:outline-none lg:block"
+              className="default-transition absolute right-0 top-1/2 z-20 hidden h-8 w-3 -translate-y-1/2 rounded-none rounded-l bg-th-bkg-4 hover:bg-th-bkg-4 focus:outline-none lg:block"
              onClick={handleToggleSidebar}
            >
              <ChevronRightIcon
--- a/components/MangoProvider.tsx
+++ b/components/MangoProvider.tsx
@ -3,6 +3,7 @@ import mangoStore from '@store/mangoStore'
 import useInterval from '../components/shared/useInterval'
 import { PublicKey } from '@solana/web3.js'
 import { useRouter } from 'next/router'
+import { MangoAccount } from '@blockworks-foundation/mango-v4'

 const rehydrateStore = async () => {
  const actions = mangoStore.getState().actions
@ -14,6 +15,8 @@ const rehydrateStore = async () => {
 }

 const HydrateStore = () => {
+  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
+
  useInterval(() => {
    rehydrateStore()
  }, 5000)
@ -26,13 +29,66 @@ const HydrateStore = () => {
    actions.fetchCoingeckoPrices()
  }, [])

+  // watch selected Mango Account for changes
+  useEffect(() => {
+    const connection = mangoStore.getState().connection
+    const client = mangoStore.getState().client
+
+    if (!mangoAccount) return
+    console.log('mangoAccount.publicKey', mangoAccount.publicKey.toString())
+
+    const subscriptionId = connection.onAccountChange(
+      mangoAccount.publicKey,
+      (info, context) => {
+        if (info?.lamports === 0) return
+
+        // const lastSeenSlot =
+        //   mangoStore.getState().mangoAccount.lastSlot
+        // const mangoAccountLastUpdated = new Date(
+        //   mangoStore.getState().mangoAccount.lastUpdatedAt
+        // )
+        const mangoAccount = mangoStore.getState().mangoAccount.current
+        if (!mangoAccount) return
+        // const newUpdatedAt = new Date()
+        // const timeDiff =
+        //   mangoAccountLastUpdated.getTime() - newUpdatedAt.getTime()
+
+        // only updated mango account if it's been more than 1 second since last update
+        // if (Math.abs(timeDiff) >= 500 && context.slot > lastSeenSlot) {
+        const decodedMangoAccount = client.program.coder.accounts.decode(
+          'bookSide',
+          info?.data
+        )
+        const newMangoAccount = MangoAccount.from(
+          mangoAccount.publicKey,
+          decodedMangoAccount
+        )
+        // newMangoAccount.spotOpenOrdersAccounts =
+        //   mangoAccount.spotOpenOrdersAccounts
+        // newMangoAccount.advancedOrders = mangoAccount.advancedOrders
+
+        mangoStore((state) => {
+          // state.mangoAccount.lastSlot = context.slot
+          state.mangoAccount.current = newMangoAccount
+          // state.mangoAccount.lastUpdatedAt =
+          //   newUpdatedAt.toISOString()
+        })
+        // }
+      }
+    )
+
+    return () => {
+      connection.removeAccountChangeListener(subscriptionId)
+    }
+  }, [mangoAccount])
+
  return null
 }

 const ReadOnlyMangoAccount = () => {
  const router = useRouter()
  const groupLoaded = mangoStore((s) => s.groupLoaded)
-  const { ma } = router.query
+  const ma = router.query?.mangoAccount

  useEffect(() => {
    if (!groupLoaded) return
@ -47,10 +103,10 @@ const ReadOnlyMangoAccount = () => {
        const pk = new PublicKey(ma)
        const readOnlyMangoAccount = await client.getMangoAccount(pk)
        await readOnlyMangoAccount.reloadAccountData(client)
-        // set((state) => {
-        //   state.mangoAccount.current = readOnlyMangoAccount
-        //   state.mangoAccount.initialLoad = false
-        // })
+        set((state) => {
+          state.mangoAccount.current = readOnlyMangoAccount
+          state.mangoAccount.initialLoad = false
+        })
      } catch (error) {
        console.log('error', error)
      }
--- a/components/SideNav.tsx
+++ b/components/SideNav.tsx
@ -39,7 +39,7 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
    >
      <div className="flex min-h-screen flex-col justify-between">
        <div className="my-2">
-          <Link href={'/'} shallow={true} passHref>
+          <Link href={'/'} shallow={true} passHref legacyBehavior>
            <div
              className={`h-14 items-center transition-all duration-300 ease-in-out ${
                collapsed ? '' : 'justify-start'
@ -173,7 +173,7 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
        </div>
      </div>
    </div>
-  )
+  );
 }

 export default SideNav
@ -199,44 +199,45 @@ const MenuItem = ({
 }) => {
  return (
    <Tooltip content={title} placement="right" show={collapsed && showTooltip}>
-      <Link href={pagePath} shallow={true}>
-        <a
-          className={`default-transition flex cursor-pointer px-4 focus:text-th-primary focus:outline-none md:hover:text-th-primary ${
-            active ? 'text-th-primary' : 'text-th-fgd-1'
-          } ${hideIconBg ? 'py-1' : 'py-1.5 xl:py-2'}`}
-        >
-          <div className="flex w-full items-center justify-between">
-            <div className="flex items-center">
-              <div
-                className={
-                  hideIconBg
-                    ? ''
-                    : 'flex h-8 w-8 items-center justify-center rounded-full bg-th-bkg-3'
-                }
-              >
-                {icon}
-              </div>
-              <Transition
-                show={!collapsed}
-                as={Fragment}
-                enter="transition ease-in duration-300"
-                enterFrom="opacity-50"
-                enterTo="opacity-100"
-                leave="transition ease-out duration-300"
-                leaveFrom="opacity-100"
-                leaveTo="opacity-0"
-              >
-                <span className="ml-3 xl:text-base">{title}</span>
-              </Transition>
+      <Link
+        href={pagePath}
+        shallow={true}
+        className={`default-transition flex cursor-pointer px-4 focus:text-th-primary focus:outline-none md:hover:text-th-primary ${
+          active ? 'text-th-primary' : 'text-th-fgd-1'
+        } ${hideIconBg ? 'py-1' : 'py-1.5 xl:py-2'}`}>
+
+        <div className="flex w-full items-center justify-between">
+          <div className="flex items-center">
+            <div
+              className={
+                hideIconBg
+                  ? ''
+                  : 'flex h-8 w-8 items-center justify-center rounded-full bg-th-bkg-3'
+              }
+            >
+              {icon}
            </div>
-            {isExternal ? (
-              <ArrowTopRightOnSquareIcon className="h-4 w-4" />
-            ) : null}
+            <Transition
+              show={!collapsed}
+              as={Fragment}
+              enter="transition ease-in duration-300"
+              enterFrom="opacity-50"
+              enterTo="opacity-100"
+              leave="transition ease-out duration-300"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+            >
+              <span className="ml-3 xl:text-base">{title}</span>
+            </Transition>
          </div>
-        </a>
+          {isExternal ? (
+            <ArrowTopRightOnSquareIcon className="h-4 w-4" />
+          ) : null}
+        </div>
+
      </Link>
    </Tooltip>
-  )
+  );
 }

 export const ExpandableMenuItem = ({
@ -298,7 +299,7 @@ export const ExpandableMenuItem = ({
                : 'flex h-8 w-8 items-center justify-center rounded-full bg-th-bkg-3'
            } ${
              alignBottom
-                ? 'flex h-[64px] w-[64px] items-center justify-center hover:bg-th-bkg-2'
+                ? 'default-transition flex h-[64px] w-[64px] items-center justify-center hover:bg-th-bkg-2'
                : ''
            }`}
          >
--- a/components/TokenList.tsx
+++ b/components/TokenList.tsx
@ -8,10 +8,9 @@ import {
 } from '@heroicons/react/20/solid'
 import { useWallet } from '@solana/wallet-adapter-react'
 import { useTranslation } from 'next-i18next'
-import Image from 'next/image'
+import Image from "next/legacy/image";
 import { useRouter } from 'next/router'
 import { Fragment, useCallback, useEffect, useMemo, useState } from 'react'
-// import useLocalStorageState from '../hooks/useLocalStorageState'
 import { useViewport } from '../hooks/useViewport'
 import mangoStore from '@store/mangoStore'
 import { formatDecimal, formatFixedDecimals } from '../utils/numbers'
@ -81,16 +80,19 @@ const TokenList = () => {
  }

  return (
-    <ContentBox hideBorder hidePadding className="-mt-[36px]">
-      <div className="mb-5 flex items-center justify-end pr-6">
-        <Switch
-          className="text-th-fgd-3"
-          checked={showZeroBalances}
-          disabled={!mangoAccount}
-          onChange={() => setShowZeroBalances(!showZeroBalances)}
-        >
-          {t('show-zero-balances')}
-        </Switch>
+    <ContentBox hideBorder hidePadding className="md:-mt-[36px]">
+      <div className="flex items-center justify-end md:mb-5">
+        <div className="flex w-full items-center justify-between border-b border-th-bkg-3 py-3 px-6 md:w-auto md:border-0 md:py-0">
+          {!showTableView ? <p>{t('show-zero-balances')}</p> : null}
+          <Switch
+            className="text-th-fgd-3"
+            checked={showZeroBalances}
+            disabled={!mangoAccount}
+            onChange={() => setShowZeroBalances(!showZeroBalances)}
+          >
+            {showTableView ? t('show-zero-balances') : ''}
+          </Switch>
+        </div>
      </div>
      {showTableView ? (
        <table className="-mt-1 min-w-full">
--- a/components/account/AccountActions.tsx
+++ b/components/account/AccountActions.tsx
@ -1,4 +1,3 @@
-import { useWallet } from '@solana/wallet-adapter-react'
 import { useState } from 'react'
 import Button, { LinkButton } from '../shared/Button'
 import DepositModal from '../modals/DepositModal'
@ -14,10 +13,11 @@ import { useTranslation } from 'next-i18next'
 import IconDropMenu from '../shared/IconDropMenu'
 import CloseAccountModal from '../modals/CloseAccountModal'
 import AccountNameModal from '../modals/AccountNameModal'
+import mangoStore from '@store/mangoStore'

 const AccountActions = () => {
  const { t } = useTranslation(['common', 'close-account'])
-  const { connected } = useWallet()
+  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
  const [showCloseAccountModal, setShowCloseAccountModal] = useState(false)
  const [showDepositModal, setShowDepositModal] = useState(false)
  const [showEditAccountModal, setShowEditAccountModal] = useState(false)
@ -28,7 +28,7 @@ const AccountActions = () => {
      <div className="flex space-x-3">
        <Button
          className="flex items-center"
-          disabled={!connected}
+          disabled={!mangoAccount}
          onClick={() => setShowDepositModal(true)}
          size="large"
        >
@ -37,7 +37,7 @@ const AccountActions = () => {
        </Button>
        <Button
          className="flex items-center"
-          disabled={!connected}
+          disabled={!mangoAccount}
          onClick={() => setShowWithdrawModal(true)}
          secondary
          size="large"
@ -51,7 +51,7 @@ const AccountActions = () => {
        >
          <LinkButton
            className="whitespace-nowrap"
-            disabled={!connected}
+            disabled={!mangoAccount}
            onClick={() => setShowEditAccountModal(true)}
          >
            <PencilIcon className="h-5 w-5" />
@ -59,7 +59,7 @@ const AccountActions = () => {
          </LinkButton>
          <LinkButton
            className="whitespace-nowrap"
-            disabled={!connected}
+            disabled={!mangoAccount}
            onClick={() => setShowCloseAccountModal(true)}
          >
            <TrashIcon className="h-5 w-5" />
--- a/components/account/AccountPage.tsx
+++ b/components/account/AccountPage.tsx
@ -9,7 +9,7 @@ import AccountActions from './AccountActions'
 import DepositModal from '../modals/DepositModal'
 import WithdrawModal from '../modals/WithdrawModal'
 import mangoStore, { PerformanceDataItem } from '@store/mangoStore'
-import { formatDecimal, formatFixedDecimals } from '../../utils/numbers'
+import { formatFixedDecimals } from '../../utils/numbers'
 import FlipNumbers from 'react-flip-numbers'
 import dynamic from 'next/dynamic'
 const SimpleAreaChart = dynamic(
@ -83,7 +83,10 @@ const AccountPage = () => {
    const totalCollateral = mangoAccount
      .getAssetsValue(group, HealthType.init)!
      .toNumber()
-    return liabsValue / totalCollateral
+
+    if (isNaN(liabsValue / totalCollateral)) {
+      return 0
+    } else return liabsValue / totalCollateral
  }, [mangoAccount, group])

  useEffect(() => {
@ -91,7 +94,6 @@ const AccountPage = () => {
      const pubKey = mangoAccount.publicKey.toString()
      actions.fetchAccountPerformance(pubKey, 1)
      actions.fetchAccountInterestTotals(pubKey)
-      actions.fetchActivityFeed(pubKey)
    }
  }, [actions, mangoAccount])

@ -194,7 +196,7 @@ const AccountPage = () => {

  return !chartToShow ? (
    <>
-      <div className="flex flex-wrap items-center justify-between border-b-0 border-th-bkg-3 px-6 pt-3 pb-0 md:border-b md:pb-3">
+      <div className="flex flex-wrap items-center justify-between border-b-0 border-th-bkg-3 px-6 py-3 md:border-b">
        <div className="flex items-center space-x-6">
          <div id="account-step-three">
            <Tooltip
@ -286,7 +288,7 @@ const AccountPage = () => {
            </SheenLoader>
          )}
        </div>
-        <div className="my-3 lg:my-0">
+        <div className="mt-3 mb-1 lg:mt-0 lg:mb-0">
          <AccountActions />
        </div>
      </div>
--- a/components/account/ActionTokenItem.tsx
+++ b/components/account/ActionTokenItem.tsx
@ -1,5 +1,5 @@
 import { Bank } from '@blockworks-foundation/mango-v4'
-import Image from 'next/image'
+import Image from "next/legacy/image";
 import { useMemo } from 'react'
 import mangoStore from '@store/mangoStore'
 import { formatDecimal } from '../../utils/numbers'
--- a/components/account/ActivityFeed.tsx
+++ b/components/account/ActivityFeed.tsx
@ -18,7 +18,7 @@ import dayjs from 'dayjs'
 import useLocalStorageState from 'hooks/useLocalStorageState'
 import { useViewport } from 'hooks/useViewport'
 import { useTranslation } from 'next-i18next'
-import Image from 'next/image'
+import Image from 'next/legacy/image'
 import { EXPLORERS } from 'pages/settings'
 import { ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react'
 import { PREFERRED_EXPLORER_KEY } from 'utils/constants'
@ -58,6 +58,9 @@ const DEFAULT_PARAMS = ['deposit', 'liquidate_token_with_token', 'withdraw']

 const ActivityFeed = () => {
  const activityFeed = mangoStore((s) => s.activityFeed.feed)
+  const initialLoad = mangoStore((s) => s.activityFeed.initialLoad)
+  const actions = mangoStore((s) => s.actions)
+  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
  const [showActivityDetail, setShowActivityDetail] = useState(null)
  const [filters, setFilters] = useState<Filters>(DEFAULT_FILTERS)
  const [advancedFilters, setAdvancedFilters] = useState<AdvancedFilters>(
@ -65,6 +68,13 @@ const ActivityFeed = () => {
  )
  const [params, setParams] = useState<string[]>(DEFAULT_PARAMS)

+  useEffect(() => {
+    if (mangoAccount && !initialLoad) {
+      const pubKey = mangoAccount.publicKey.toString()
+      actions.fetchActivityFeed(pubKey)
+    }
+  }, [actions, initialLoad, mangoAccount])
+
  const handleShowActivityDetails = (activity: any) => {
    setShowActivityDetail(activity)
  }
@ -142,7 +152,7 @@ const ActivityFilters = ({
  const { t } = useTranslation(['common', 'activity'])
  const actions = mangoStore((s) => s.actions)
  const loadActivityFeed = mangoStore((s) => s.activityFeed.loading)
-  const { connected } = useWallet()
+  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
  const [showAdvancedFiltersModal, setShowAdvancedFiltersModal] =
    useState(false)
  const { width } = useViewport()
@ -192,7 +202,7 @@ const ActivityFilters = ({
    setShowMobileFilters(false)
  }

-  return connected ? (
+  return mangoAccount ? (
    !isMobile ? (
      <>
        <div className="flex items-center justify-between border-b border-th-bkg-3 bg-th-bkg-2 pl-6">
--- a/components/account/ActivityFeedTable.tsx
+++ b/components/account/ActivityFeedTable.tsx
@ -14,7 +14,7 @@ import dayjs from 'dayjs'
 import useLocalStorageState from 'hooks/useLocalStorageState'
 import { useViewport } from 'hooks/useViewport'
 import { useTranslation } from 'next-i18next'
-import Image from 'next/image'
+import Image from 'next/legacy/image'
 import { EXPLORERS } from 'pages/settings'
 import { Fragment, useCallback, useState } from 'react'
 import { PREFERRED_EXPLORER_KEY } from 'utils/constants'
@ -31,7 +31,7 @@ const ActivityFeedTable = ({
  params: string
 }) => {
  const { t } = useTranslation(['common', 'activity'])
-  const { connected } = useWallet()
+  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
  const actions = mangoStore((s) => s.actions)
  const loadActivityFeed = mangoStore((s) => s.activityFeed.loading)
  const [offset, setOffset] = useState(0)
@ -108,7 +108,7 @@ const ActivityFeedTable = ({
    return value
  }

-  return connected ? (
+  return mangoAccount ? (
    activityFeed.length || loadActivityFeed ? (
      <>
        {showTableView ? (
@ -229,7 +229,7 @@ const ActivityFeedTable = ({
        )}
        {loadActivityFeed ? (
          <div className="mt-2 space-y-0.5">
-            {[...Array(4)].map((i) => (
+            {[...Array(4)].map((x, i) => (
              <SheenLoader className="flex flex-1" key={i}>
                <div className="h-16 w-full bg-th-bkg-2" />
              </SheenLoader>
--- a/components/account/CreateAccountForm.tsx
+++ b/components/account/CreateAccountForm.tsx
@ -7,7 +7,6 @@ import BounceLoader from '../shared/BounceLoader'
 import Input from '../forms/Input'
 import Label from '../forms/Label'
 import { useWallet } from '@solana/wallet-adapter-react'
-import { Wallet } from '@project-serum/anchor'
 import InlineNotification from '../shared/InlineNotification'
 import { MangoAccount } from '@blockworks-foundation/mango-v4'
 import { ArrowLeftIcon } from '@heroicons/react/20/solid'
@ -38,12 +37,11 @@ const CreateAccountForm = ({
  const [loading, setLoading] = useState(false)
  const [name, setName] = useState('')
  const { wallet } = useWallet()
-  const mangoAccounts = mangoStore((s) => s.mangoAccounts)

  const handleNewAccount = async () => {
    const client = mangoStore.getState().client
    const group = mangoStore.getState().group
-    const actions = mangoStore.getState().actions
+    const mangoAccounts = mangoStore.getState().mangoAccounts
    const set = mangoStore.getState().set
    if (!group || !wallet) return
    setLoading(true)
@ -55,12 +53,14 @@ const CreateAccountForm = ({
        name || `Account ${newAccountNum + 1}`
      )
      if (tx) {
-        await actions.fetchMangoAccounts(wallet!.adapter as unknown as Wallet)
+        const pk = wallet!.adapter.publicKey
+        const mangoAccounts = await client.getMangoAccountsForOwner(group, pk!)
        const newAccount = mangoAccounts.find(
          (acc) => acc.accountNum === newAccountNum
        )
        set((s) => {
          s.mangoAccount.current = newAccount
+          s.mangoAccounts = mangoAccounts
        })
        setLoading(false)
        notify({
--- a/components/account/MangoAccountSummary.tsx
+++ b/components/account/MangoAccountSummary.tsx
@ -28,7 +28,9 @@ const MangoAccountSummary = () => {
    const totalCollateral = mangoAccount
      .getAssetsValue(group, HealthType.init)!
      .toNumber()
-    return liabsValue / totalCollateral
+    if (isNaN(liabsValue / totalCollateral)) {
+      return 0
+    } else return liabsValue / totalCollateral
  }, [mangoAccount])

  return (
--- a/components/forms/MultiSelectDropdown.tsx
+++ b/components/forms/MultiSelectDropdown.tsx
@ -71,7 +71,7 @@ const MultiSelectDropdown = ({
        </div>
      )}
    </Popover>
-  )
+  );
 }

 export default MultiSelectDropdown
--- a/components/mobile/BottomBar.tsx
+++ b/components/mobile/BottomBar.tsx
@ -31,61 +31,56 @@ const BottomBar = () => {
  const { asPath } = useRouter()
  const [showPanel, setShowPanel] = useState(false)

-  return (
-    <>
-      <div className="grid grid-cols-4 grid-rows-1 bg-th-bkg-2 py-2.5">
-        <Link
-          href={{
-            pathname: '/',
-          }}
-        >
-          <a
-            className={`${
-              asPath === '/' ? 'text-th-primary' : 'text-th-fgd-3'
-            } col-span-1 flex cursor-pointer flex-col items-center`}
-          >
-            <HomeIcon className="mb-1 h-4 w-4" />
-            <StyledBarItemLabel>{t('account')}</StyledBarItemLabel>
-          </a>
-        </Link>
-        <Link
-          href={{
-            pathname: '/swap',
-          }}
-          shallow={true}
-        >
-          <a
-            className={`${
-              asPath === '/swap' ? 'text-th-primary' : 'text-th-fgd-3'
-            } col-span-1 flex cursor-pointer flex-col items-center`}
-          >
-            <ArrowsRightLeftIcon className="mb-1 h-4 w-4" />
-            <StyledBarItemLabel>{t('swap')}</StyledBarItemLabel>
-          </a>
-        </Link>
-        <Link href="/trade" shallow={true}>
-          <a
-            className={`${
-              asPath === '/trade' ? 'text-th-primary' : 'text-th-fgd-3'
-            } col-span-1 flex cursor-pointer flex-col items-center`}
-          >
-            <TradeIcon className="mb-1 h-4 w-4" />
-            <StyledBarItemLabel>{t('trade')}</StyledBarItemLabel>
-          </a>
-        </Link>
-        <a
-          className={`${
-            showPanel ? 'text-th-primary' : 'text-th-fgd-3'
-          } col-span-1 flex cursor-pointer flex-col items-center`}
-          onClick={() => setShowPanel(!showPanel)}
-        >
-          <Bars3Icon className="mb-1 h-4 w-4" />
-          <StyledBarItemLabel>{t('more')}</StyledBarItemLabel>
-        </a>
-      </div>
-      <MoreMenuPanel showPanel={showPanel} setShowPanel={setShowPanel} />
-    </>
-  )
+  return <>
+    <div className="grid grid-cols-4 grid-rows-1 bg-th-bkg-2 py-2.5">
+      <Link
+        href={{
+          pathname: '/',
+        }}
+        className={`${
+          asPath === '/' ? 'text-th-primary' : 'text-th-fgd-3'
+        } col-span-1 flex cursor-pointer flex-col items-center`}>
+
+        <HomeIcon className="mb-1 h-4 w-4" />
+        <StyledBarItemLabel>{t('account')}</StyledBarItemLabel>
+
+      </Link>
+      <Link
+        href={{
+          pathname: '/swap',
+        }}
+        shallow={true}
+        className={`${
+          asPath === '/swap' ? 'text-th-primary' : 'text-th-fgd-3'
+        } col-span-1 flex cursor-pointer flex-col items-center`}>
+
+        <ArrowsRightLeftIcon className="mb-1 h-4 w-4" />
+        <StyledBarItemLabel>{t('swap')}</StyledBarItemLabel>
+
+      </Link>
+      <Link
+        href="/trade"
+        shallow={true}
+        className={`${
+          asPath === '/trade' ? 'text-th-primary' : 'text-th-fgd-3'
+        } col-span-1 flex cursor-pointer flex-col items-center`}>
+
+        <TradeIcon className="mb-1 h-4 w-4" />
+        <StyledBarItemLabel>{t('trade')}</StyledBarItemLabel>
+
+      </Link>
+      <a
+        className={`${
+          showPanel ? 'text-th-primary' : 'text-th-fgd-3'
+        } col-span-1 flex cursor-pointer flex-col items-center`}
+        onClick={() => setShowPanel(!showPanel)}
+      >
+        <Bars3Icon className="mb-1 h-4 w-4" />
+        <StyledBarItemLabel>{t('more')}</StyledBarItemLabel>
+      </a>
+    </div>
+    <MoreMenuPanel showPanel={showPanel} setShowPanel={setShowPanel} />
+  </>;
 }

 export default BottomBar
@ -161,14 +156,14 @@ const MoreMenuItem = ({
      <ChevronRightIcon className="h-5 w-5" />
    </a>
  ) : (
-    <Link href={path} shallow={true}>
-      <a className={classNames}>
-        <div className="flex items-center">
-          {icon}
-          <span className="ml-1.5">{title}</span>
-        </div>
-        <ChevronRightIcon className="h-5 w-5" />
-      </a>
-    </Link>
-  )
+    (<Link href={path} shallow={true} className={classNames}>
+
+      <div className="flex items-center">
+        {icon}
+        <span className="ml-1.5">{title}</span>
+      </div>
+      <ChevronRightIcon className="h-5 w-5" />
+
+    </Link>)
+  );
 }
--- a/components/modals/BorrowModal.tsx
+++ b/components/modals/BorrowModal.tsx
@ -6,7 +6,7 @@ import {
 } from '@heroicons/react/20/solid'
 import Decimal from 'decimal.js'
 import { useTranslation } from 'next-i18next'
-import Image from 'next/image'
+import Image from 'next/legacy/image'
 import React, { useCallback, useMemo, useState } from 'react'
 import NumberFormat, { NumberFormatValues } from 'react-number-format'
 import mangoStore from '@store/mangoStore'
@ -153,7 +153,7 @@ function BorrowModal({ isOpen, onClose, token }: ModalCombinedProps) {
  return (
    <Modal isOpen={isOpen} onClose={onClose}>
      <EnterBottomExitBottom
-        className="absolute bottom-0 left-0 z-20 h-full w-full overflow-auto bg-th-bkg-1 p-6"
+        className="absolute bottom-0 left-0 z-20 h-full w-full overflow-auto rounded-lg bg-th-bkg-1 p-6"
        show={showTokenList}
      >
        <h2 className="mb-4 text-center">{t('select-token')}</h2>
--- a/components/modals/DepositModal.tsx
+++ b/components/modals/DepositModal.tsx
@ -8,7 +8,7 @@ import { Wallet } from '@project-serum/anchor'
 import { useWallet } from '@solana/wallet-adapter-react'
 import Decimal from 'decimal.js'
 import { useTranslation } from 'next-i18next'
-import Image from 'next/image'
+import Image from 'next/legacy/image'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import NumberFormat, { NumberFormatValues } from 'react-number-format'
 import mangoStore from '@store/mangoStore'
@ -208,7 +208,7 @@ function DepositModal({ isOpen, onClose, token }: ModalCombinedProps) {
  return (
    <Modal isOpen={isOpen} onClose={onClose}>
      <EnterBottomExitBottom
-        className="absolute bottom-0 left-0 z-20 h-full w-full overflow-auto bg-th-bkg-1 p-6"
+        className="absolute bottom-0 left-0 z-20 h-full w-full overflow-auto rounded-lg bg-th-bkg-1 p-6"
        show={showTokenList}
      >
        <h2 className="mb-4 text-center">{t('select-token')}</h2>
--- a/components/modals/UserSetupModal.tsx
+++ b/components/modals/UserSetupModal.tsx
@ -22,7 +22,7 @@ import {
  EnterRightExitLeft,
  FadeInFadeOut,
 } from '../shared/Transitions'
-import Image from 'next/image'
+import Image from "next/legacy/image";
 import BounceLoader from '../shared/BounceLoader'
 import { notify } from '../../utils/notifications'
 import { Wallet } from '@project-serum/anchor'
--- a/components/modals/WithdrawModal.tsx
+++ b/components/modals/WithdrawModal.tsx
@ -6,7 +6,7 @@ import {
 } from '@heroicons/react/20/solid'
 import Decimal from 'decimal.js'
 import { useTranslation } from 'next-i18next'
-import Image from 'next/image'
+import Image from 'next/legacy/image'
 import { useCallback, useMemo, useState } from 'react'
 import NumberFormat, { NumberFormatValues } from 'react-number-format'

@ -159,7 +159,7 @@ function WithdrawModal({ isOpen, onClose, token }: ModalCombinedProps) {
    <Modal isOpen={isOpen} onClose={onClose}>
      <div className="">
        <EnterBottomExitBottom
-          className="absolute bottom-0 left-0 z-20 h-full w-full overflow-auto bg-th-bkg-1 p-6"
+          className="absolute bottom-0 left-0 z-20 h-full w-full overflow-auto rounded-lg bg-th-bkg-1 p-6"
          show={showTokenList}
        >
          <h2 className="mb-4 text-center">{t('select-token')}</h2>
--- a/components/shared/BounceLoader.tsx
+++ b/components/shared/BounceLoader.tsx
@ -1,9 +1,9 @@
-import Image from 'next/image'
+import Image from "next/legacy/image";

 const BounceLoader = ({ loadingMessage }: { loadingMessage?: string }) => (
  <div className="flex h-full flex-col items-center justify-center">
    <div className="animate-bounce">
-      <Image src="/icons/mngo.svg" alt="" width="32" height="32" />
+      <Image src="/logos/logo-mark.svg" alt="" width="32" height="32" />
    </div>
    {loadingMessage ? <p className="text-center">{loadingMessage}</p> : null}
  </div>
--- a/components/shared/Button.tsx
+++ b/components/shared/Button.tsx
@ -31,7 +31,7 @@ const Button: FunctionComponent<ButtonCombinedProps> = ({
      disabled={disabled}
      className={`whitespace-nowrap rounded-md ${
        secondary
-          ? `border border-th-button md:hover:border-th-button-hover ${
+          ? `border border-th-fgd-4 md:hover:border-th-bkg-4 ${
              theme === 'Light' ? 'text-th-button' : 'text-th-fgd-1'
            }`
          : `bg-th-button md:hover:bg-th-button-hover ${
--- a/components/shared/IconDropMenu.tsx
+++ b/components/shared/IconDropMenu.tsx
@ -42,7 +42,7 @@ const IconDropMenu = ({
          <Popover.Button
            className={`flex ${
              large ? 'h-12 w-12' : 'h-10 w-10'
-            } default-transition items-center justify-center rounded-full border border-th-button md:hover:border-th-button-hover ${
+            } default-transition items-center justify-center rounded-full border border-th-fgd-4 md:hover:border-th-bkg-4 ${
              theme === 'Light' ? 'text-th-button' : 'text-th-fgd-1'
            } md:hover:text-th-fgd-1 ${
              disabled ? 'cursor-not-allowed opacity-60' : ''
--- a/components/shared/MenuItem.tsx
+++ b/components/shared/MenuItem.tsx
@ -12,19 +12,20 @@ const MenuItem = ({ href, children, newWindow = false }: MenuItemProps) => {
  const { asPath } = useRouter()

  return (
-    <Link href={href} shallow={true}>
-      <a
-        className={`text-mango-200 flex h-full items-center justify-between border-b border-th-bkg-4 p-3 font-bold hover:text-yellow-400 md:border-none md:py-0
-          ${asPath === href ? `text-th-primary` : `border-transparent`}
-        `}
-        target={newWindow ? '_blank' : ''}
-        rel={newWindow ? 'noopener noreferrer' : ''}
-      >
-        {children}
-        <ChevronRightIcon className="h-5 w-5 md:hidden" />
-      </a>
-    </Link>
-  )
+    (<Link
+      href={href}
+      shallow={true}
+      className={`text-mango-200 flex h-full items-center justify-between border-b border-th-bkg-4 p-3 font-bold hover:text-yellow-400 md:border-none md:py-0
+        ${asPath === href ? `text-th-primary` : `border-transparent`}
+      `}
+      target={newWindow ? '_blank' : ''}
+      rel={newWindow ? 'noopener noreferrer' : ''}>
+
+      {children}
+      <ChevronRightIcon className="h-5 w-5 md:hidden" />
+
+    </Link>)
+  );
 }

 export default MenuItem
--- a/components/shared/Notification.tsx
+++ b/components/shared/Notification.tsx
@ -1,4 +1,4 @@
-import { Fragment, useEffect, useMemo } from 'react'
+import { Fragment, useEffect, useMemo, useState } from 'react'
 import {
  CheckCircleIcon,
  ArrowTopRightOnSquareIcon,
@ -26,6 +26,7 @@ const NotificationList = () => {
    NOTIFICATION_POSITION_KEY,
    'bottom-left'
  )
+  const [mounted, setMounted] = useState(false)

  // if a notification is shown with {"InstructionError":[0,{"Custom":1}]} then
  // add a notification letting the user know they may not have enough SOL
@ -72,9 +73,12 @@ const NotificationList = () => {
    }
  }, [notificationPosition])

+  useEffect(() => setMounted(true), [])
+  if (!mounted) return null
+
  return (
    <div
-      className={`pointer-events-none fixed ${position} z-50 w-full space-y-2 p-4 text-th-fgd-1 md:w-auto md:p-6`}
+      className={`pointer-events-none fixed z-50 w-full space-y-2 p-4 text-th-fgd-1 md:w-auto md:p-6 ${position}`}
    >
      {reversedNotifications.map((n) => (
        <Notification key={n.id} notification={n} />
--- a/components/shared/SwapTradeBalances.tsx
+++ b/components/shared/SwapTradeBalances.tsx
@ -2,7 +2,7 @@ import { QuestionMarkCircleIcon } from '@heroicons/react/20/solid'
 import mangoStore from '@store/mangoStore'
 import { useViewport } from 'hooks/useViewport'
 import { useTranslation } from 'next-i18next'
-import Image from 'next/image'
+import Image from "next/legacy/image";
 import { useMemo } from 'react'
 import { formatDecimal, formatFixedDecimals } from 'utils/numbers'
 import { breakpoints } from 'utils/theme'
--- a/components/shared/TabUnderline.tsx
+++ b/components/shared/TabUnderline.tsx
@ -0,0 +1,63 @@
+import { useTranslation } from 'next-i18next'
+
+const TabUnderline = ({
+  activeValue,
+  values,
+  onChange,
+  small,
+}: {
+  activeValue: string
+  onChange: (x: any) => void
+  values: string[]
+  small?: boolean
+}) => {
+  const { t } = useTranslation('common')
+  return (
+    <div
+      className={`relative mb-3 pb-1 md:-mt-2.5 md:border-b md:border-th-bkg-3`}
+    >
+      <div
+        className={`default-transition absolute bottom-[-1px] left-0 h-0.5 ${
+          activeValue === 'buy'
+            ? 'bg-th-green'
+            : activeValue === 'sell'
+            ? 'bg-th-red'
+            : 'bg-th-primary'
+        }`}
+        style={{
+          maxWidth: '176px',
+          transform: `translateX(${
+            values.findIndex((v) => v === activeValue) * 100
+          }%)`,
+          width: `${100 / values.length}%`,
+        }}
+      />
+      <nav className="-mb-px flex space-x-2" aria-label="Tabs">
+        {values.map((value, i) => (
+          <button
+            onClick={() => onChange(value)}
+            className={`default-transition relative flex h-10 w-1/2 
+            cursor-pointer items-center justify-center whitespace-nowrap rounded py-1 font-bold md:h-auto md:rounded-none md:hover:opacity-100 ${
+              small ? 'text-sm' : 'text-sm lg:text-base'
+            }
+            ${
+              activeValue === value
+                ? activeValue === 'buy'
+                  ? 'text-th-green'
+                  : activeValue === 'sell'
+                  ? 'text-th-red'
+                  : 'text-th-primary'
+                : 'text-th-fgd-4 hover:text-th-fgd-3'
+            }
+          `}
+            key={value + i}
+          >
+            {t(value)}
+          </button>
+        ))}
+      </nav>
+    </div>
+  )
+}
+
+export default TabUnderline
--- a/components/shared/Tooltip.tsx
+++ b/components/shared/Tooltip.tsx
@ -33,7 +33,8 @@ const Tooltip = ({
        content={
          content ? (
            <div
-              className={`rounded-md border border-th-bkg-3 bg-th-bkg-1 p-3 text-xs leading-4 text-th-fgd-3 shadow-md outline-none focus:outline-none ${className}`}
+              className={`rounded-md bg-th-bkg-2 p-3 text-xs leading-4 text-th-fgd-3 outline-none focus:outline-none ${className}`}
+              style={{ boxShadow: '0px 0px 8px 0px rgba(0,0,0,0.25)' }}
            >
              {content}
            </div>
--- a/components/stats/TokenStats.tsx
+++ b/components/stats/TokenStats.tsx
@ -5,7 +5,7 @@ import {
  QuestionMarkCircleIcon,
 } from '@heroicons/react/20/solid'
 import { useTranslation } from 'next-i18next'
-import Image from 'next/image'
+import Image from "next/legacy/image";
 import { Fragment, useMemo, useState } from 'react'
 import { useViewport } from '../../hooks/useViewport'

--- a/components/swap/JupiterRouteInfo.tsx
+++ b/components/swap/JupiterRouteInfo.tsx
@ -23,7 +23,7 @@ import {
  ArrowRightIcon,
 } from '@heroicons/react/20/solid'
 import { useTranslation } from 'next-i18next'
-import Image from 'next/image'
+import Image from "next/legacy/image";
 import {
  floorToDecimal,
  formatDecimal,
--- a/components/swap/SwapFormTokenList.tsx
+++ b/components/swap/SwapFormTokenList.tsx
@ -1,5 +1,5 @@
 import { memo, useMemo, useState, useEffect, ChangeEvent } from 'react'
-import Image from 'next/image'
+import Image from 'next/legacy/image'
 import { Token } from '../../types/jupiter'
 import mangoStore from '@store/mangoStore'
 import Input from '../forms/Input'
@ -61,7 +61,11 @@ const TokenItem = ({
    <div>
      <button
        key={address}
-        className="default-transition flex w-full cursor-pointer items-center justify-between rounded-md p-2 font-normal focus:bg-th-bkg-3 focus:outline-none md:hover:bg-th-bkg-2"
+        className={`default-transition flex w-full items-center justify-between rounded-md p-2 font-normal  ${
+          isDisabled
+            ? 'opacity-50'
+            : 'cursor-pointer focus:bg-th-bkg-3 focus:outline-none md:hover:bg-th-bkg-2'
+        }`}
        onClick={() => onSubmit(address)}
        disabled={isDisabled}
      >
--- a/components/swap/SwapHistoryTable.tsx
+++ b/components/swap/SwapHistoryTable.tsx
@ -7,7 +7,7 @@ import {
 } from '@heroicons/react/20/solid'
 import dayjs from 'dayjs'
 import { useTranslation } from 'next-i18next'
-import Image from 'next/image'
+import Image from 'next/legacy/image'
 import { breakpoints } from '../../utils/theme'
 import { useViewport } from '../../hooks/useViewport'
 import { IconButton } from '../shared/Button'
@ -35,7 +35,7 @@ const SwapHistoryTable = ({
 }) => {
  const { t } = useTranslation(['common', 'settings'])
  const jupiterTokens = mangoStore((s) => s.jupiterTokens)
-  const { connected } = useWallet()
+  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
  const [showSwapDetails, setSwapDetails] = useState('')
  const { width } = useViewport()
  const showTableView = width ? width > breakpoints.md : false
@ -48,7 +48,7 @@ const SwapHistoryTable = ({
    showSwapDetails ? setSwapDetails('') : setSwapDetails(signature)
  }

-  return connected ? (
+  return mangoAccount ? (
    !loading ? (
      swapHistory.length ? (
        showTableView ? (
--- a/components/swap/TokenSelect.tsx
+++ b/components/swap/TokenSelect.tsx
@ -2,7 +2,7 @@ import {
  ChevronDownIcon,
  QuestionMarkCircleIcon,
 } from '@heroicons/react/20/solid'
-import Image from 'next/image'
+import Image from "next/legacy/image";
 import mangoStore from '@store/mangoStore'

 type TokenSelectProps = {
--- a/components/tours/CustomTooltip.tsx
+++ b/components/tours/CustomTooltip.tsx
@ -54,21 +54,21 @@ const CustomTooltip = ({
  }

  return (
-    <div className="relative w-72 rounded-lg bg-gradient-to-b from-gradient-start via-gradient-mid to-gradient-end p-4">
+    <div className="relative w-72 rounded-lg bg-th-bkg-2 p-4">
      {!loading ? (
        <>
          <button
            onClick={onClose}
-            className={`absolute right-4 top-4 z-50 text-th-bkg-3 focus:outline-none md:right-2 md:top-2 md:hover:text-th-primary`}
+            className={`absolute right-4 top-4 z-50 text-th-fgd-4 focus:outline-none md:right-2 md:top-2 md:hover:text-th-primary`}
          >
            <XMarkIcon className={`h-5 w-5`} />
          </button>
-          <h3 className="text-th-bkg-1">{title}</h3>
-          <p className="text-sm text-th-bkg-1">{description}</p>
+          <h3 className="mb-1 text-base text-th-fgd-1">{title}</h3>
+          <p className="text-sm text-th-fgd-3">{description}</p>
          <div className="mt-4 flex items-center justify-between">
            {stepIndex !== 0 ? (
              <button
-                className="default-transition h-8 rounded-md border border-th-bkg-1 px-3 font-bold text-th-bkg-1 focus:outline-none md:hover:border-th-bkg-3 md:hover:text-th-bkg-3"
+                className="default-transition h-8 rounded-md border border-th-fgd-4 px-3 font-bold text-th-fgd-3 focus:outline-none md:hover:border-th-fgd-3 md:hover:text-th-fgd-2"
                onClick={() => prev()}
              >
                Back
@ -80,7 +80,7 @@ const CustomTooltip = ({
              {allSteps.map((s, i) => (
                <div
                  className={`h-1 w-1 rounded-full ${
-                    i === stepIndex ? 'bg-th-primary' : 'bg-[rgba(0,0,0,0.2)]'
+                    i === stepIndex ? 'bg-th-primary' : 'bg-th-bkg-4'
                  }`}
                  key={s.title}
                />
@ -88,7 +88,7 @@ const CustomTooltip = ({
            </div>
            {stepIndex !== allSteps.length - 1 ? (
              <button
-                className="default-transition h-8 rounded-md bg-th-bkg-1 px-3 font-bold text-th-fgd-1 focus:outline-none md:hover:bg-th-bkg-3"
+                className="default-transition h-8 rounded-md bg-th-button px-3 font-bold text-th-fgd-1 focus:outline-none md:hover:bg-th-button-hover"
                onClick={() => next()}
              >
                Next
--- a/components/trade/AdvancedMarketHeader.tsx
+++ b/components/trade/AdvancedMarketHeader.tsx
@ -1,10 +1,11 @@
 import { Serum3Market, PerpMarket } from '@blockworks-foundation/mango-v4'
 import Change from '@components/shared/Change'
+import TabUnderline from '@components/shared/TabUnderline'
 import { Popover } from '@headlessui/react'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import mangoStore from '@store/mangoStore'
 import { useTranslation } from 'next-i18next'
-import { useCallback, useMemo } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { DEFAULT_MARKET_NAME } from 'utils/constants'
 import { formatFixedDecimals } from 'utils/numbers'
 import MarketLogos from './MarketLogos'
@ -14,6 +15,7 @@ const MarketSelectDropdown = () => {
  const serumMarkets = mangoStore((s) => s.serumMarkets)
  const perpMarkets = mangoStore((s) => s.perpMarkets)
  const set = mangoStore((s) => s.set)
+  const [activeTab, setActiveTab] = useState('perp')

  const handleSelectMarket = useCallback(
    (market: Serum3Market | PerpMarket, close: any) => {
@ -45,60 +47,61 @@ const MarketSelectDropdown = () => {
              } mt-0.5 ml-2 h-6 w-6 flex-shrink-0 text-th-fgd-3`}
            />
          </Popover.Button>
-
-          <Popover.Panel className="absolute -left-5 top-[46px] z-50 mr-4 w-screen bg-th-bkg-2 py-2 sm:w-56 md:top-[37px]">
-            <div className="grid grid-cols-2">
-              <div>
-                <div className="font-lg text-center text-th-fgd-4">Spot</div>
-                {serumMarkets?.length
-                  ? serumMarkets.map((m) => {
-                      return (
-                        <div
-                          key={m.publicKey.toString()}
-                          className="default-transition flex items-center py-2 px-4 hover:cursor-pointer hover:bg-th-bkg-2"
-                          onClick={() => handleSelectMarket(m, close)}
+          <Popover.Panel className="absolute -left-5 top-[46px] z-50 mr-4 w-screen bg-th-bkg-2 pb-2 pt-4 sm:w-56 md:top-[37px]">
+            <TabUnderline
+              activeValue={activeTab}
+              onChange={(v) => setActiveTab(v)}
+              small
+              values={['perp', 'spot']}
+            />
+            {activeTab === 'spot'
+              ? serumMarkets?.length
+                ? serumMarkets.map((m) => {
+                    return (
+                      <div
+                        key={m.publicKey.toString()}
+                        className="default-transition flex items-center py-2 px-4 hover:cursor-pointer hover:bg-th-bkg-2"
+                        onClick={() => handleSelectMarket(m, close)}
+                      >
+                        <MarketLogos market={m} />
+                        <span
+                          className={
+                            m.name === selectedMarket?.name
+                              ? 'text-th-primary'
+                              : ''
+                          }
                        >
-                          <MarketLogos market={m} />
-                          <span
-                            className={
-                              m.name === selectedMarket?.name
-                                ? 'text-th-primary'
-                                : ''
-                            }
-                          >
-                            {m.name}
-                          </span>
-                        </div>
-                      )
-                    })
-                  : null}
-              </div>
-              <div>
-                <div className="font-lg text-center text-th-fgd-4">Perp</div>
-                {perpMarkets?.length
-                  ? perpMarkets.map((m) => {
-                      return (
-                        <div
-                          key={m.publicKey.toString()}
-                          className="flex items-center bg-th-bkg-1 py-2 px-4 hover:cursor-pointer hover:bg-th-bkg-2"
-                          onClick={() => handleSelectMarket(m, close)}
+                          {m.name}
+                        </span>
+                      </div>
+                    )
+                  })
+                : null
+              : null}
+            {activeTab === 'perp'
+              ? perpMarkets?.length
+                ? perpMarkets.map((m) => {
+                    return (
+                      <div
+                        key={m.publicKey.toString()}
+                        className="default-transition flex items-center py-2 px-4 hover:cursor-pointer hover:bg-th-bkg-2"
+                        onClick={() => handleSelectMarket(m, close)}
+                      >
+                        <MarketLogos market={m} />
+                        <span
+                          className={
+                            m.name === selectedMarket?.name
+                              ? 'text-th-primary'
+                              : ''
+                          }
                        >
-                          <MarketLogos market={m} />
-                          <span
-                            className={
-                              m.name === selectedMarket?.name
-                                ? 'text-th-primary'
-                                : ''
-                            }
-                          >
-                            {m.name}
-                          </span>
-                        </div>
-                      )
-                    })
-                  : null}
-              </div>
-            </div>
+                          {m.name}
+                        </span>
+                      </div>
+                    )
+                  })
+                : null
+              : null}
          </Popover.Panel>
        </div>
      )}
--- a/components/trade/AdvancedTradeForm.tsx
+++ b/components/trade/AdvancedTradeForm.tsx
@ -19,10 +19,11 @@ import NumberFormat, {
 import { notify } from 'utils/notifications'
 import SpotSlider from './SpotSlider'
 import { calculateMarketPrice } from 'utils/tradeForm'
-import Image from 'next/image'
+import Image from "next/legacy/image";
 import { QuestionMarkCircleIcon } from '@heroicons/react/20/solid'
 import Loading from '@components/shared/Loading'
 import { Market } from '@project-serum/serum'
+import TabUnderline from '@components/shared/TabUnderline'

 const TABS: [string, number][] = [
  ['Limit', 0],
@ -244,45 +245,11 @@ const AdvancedTradeForm = () => {
        />
      </div>
      <div className="mt-6 px-4">
-        <div
-          className={`relative mb-3 pb-1 md:-mt-2.5 md:border-b md:border-th-bkg-3`}
-        >
-          <div
-            className={`absolute hidden md:block ${
-              tradeForm.side === 'buy'
-                ? 'translate-x-0 bg-th-green'
-                : 'translate-x-full bg-th-red'
-            } default-transition bottom-[-1px] left-0 h-0.5 w-1/2 transform`}
-          />
-          <nav className="-mb-px flex space-x-2" aria-label="Tabs">
-            <button
-              onClick={() => handleSetSide('buy')}
-              className={`default-transition relative flex h-10 w-1/2 
-            cursor-pointer items-center justify-center whitespace-nowrap rounded py-1 text-sm font-semibold md:h-auto md:rounded-none md:text-base md:hover:opacity-100
-            ${
-              tradeForm.side === 'buy'
-                ? `border border-th-green text-th-green md:border-0`
-                : `border border-th-fgd-4 text-th-fgd-4 md:border-0 md:hover:border-th-green md:hover:text-th-green`
-            }
-          `}
-            >
-              {t('buy')}
-            </button>
-            <button
-              onClick={() => handleSetSide('sell')}
-              className={`default-transition relative flex h-10 w-1/2 cursor-pointer items-center justify-center whitespace-nowrap 
-            rounded py-1 text-sm font-semibold md:h-auto md:rounded-none md:text-base md:hover:opacity-100
-            ${
-              tradeForm.side === 'sell'
-                ? `border border-th-red text-th-red md:border-0`
-                : `border border-th-fgd-4 text-th-fgd-4 md:border-0 md:hover:border-th-red md:hover:text-th-red`
-            }
-          `}
-            >
-              {t('sell')}
-            </button>
-          </nav>
-        </div>
+        <TabUnderline
+          activeValue={tradeForm.side}
+          values={['buy', 'sell']}
+          onChange={(v) => handleSetSide(v)}
+        />
      </div>
      <div className="mt-4 px-4">
        {tradeForm.tradeType === 'Limit' ? (
--- a/components/trade/MarketLogos.tsx
+++ b/components/trade/MarketLogos.tsx
@ -1,8 +1,7 @@
-import { Serum3Market } from '@blockworks-foundation/mango-v4'
-import { PerpMarket } from '@blockworks-foundation/mango-v4/dist/types/src/accounts/perp'
+import { Serum3Market, PerpMarket } from '@blockworks-foundation/mango-v4'
 import { QuestionMarkCircleIcon } from '@heroicons/react/20/solid'
 import mangoStore from '@store/mangoStore'
-import Image from 'next/image'
+import Image from "next/legacy/image";
 import { useMemo } from 'react'

 const MarketLogos = ({ market }: { market: Serum3Market | PerpMarket }) => {
@ -26,7 +25,7 @@ const MarketLogos = ({ market }: { market: Serum3Market | PerpMarket }) => {
      )
    } else {
      jupiterBaseToken = jupiterTokens.find(
-        (t) => t.address === market.name.split('-')[0]
+        (t) => t.symbol === market.name.split('-')[0]
      )
    }
    const baseLogoURI = jupiterBaseToken ? jupiterBaseToken.logoURI : ''
@ -38,7 +37,11 @@ const MarketLogos = ({ market }: { market: Serum3Market | PerpMarket }) => {
  }, [group, jupiterTokens, market])

  return (
-    <div className="relative mr-1.5 h-5 w-[34px]">
+    <div
+      className={`relative mr-1.5 h-5 ${
+        market instanceof Serum3Market ? 'w-[34px]' : 'w-[20px]'
+      }`}
+    >
      <div className="absolute left-0 top-0">
        {logos.baseLogoURI ? (
          <Image
@ -61,7 +64,7 @@ const MarketLogos = ({ market }: { market: Serum3Market | PerpMarket }) => {
            height="20"
            src={logos.quoteLogoURI}
          />
-        ) : (
+        ) : market instanceof PerpMarket ? null : (
          <QuestionMarkCircleIcon className="h-5 w-5 text-th-fgd-3" />
        )}
      </div>
--- a/components/trade/MobileTradeAdvancedPage.tsx
+++ b/components/trade/MobileTradeAdvancedPage.tsx
@ -1,10 +1,14 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useState } from 'react'
 import Orderbook from './Orderbook'
 import AdvancedMarketHeader from './AdvancedMarketHeader'
 import AdvancedTradeForm from './AdvancedTradeForm'
 import TradeInfoTabs from './TradeInfoTabs'
+import TabButtons from '@components/shared/TabButtons'
+import { TABS } from './OrderbookAndTrades'
+import RecentTrades from './RecentTrades'

 const MobileTradeAdvancedPage = () => {
+  const [activeTab, setActiveTab] = useState('trade:book')
  return (
    <div className="grid grid-cols-2 sm:grid-cols-3">
      <div className="col-span-2 border-b border-th-bkg-3 sm:col-span-3">
@ -17,7 +21,28 @@ const MobileTradeAdvancedPage = () => {
        <AdvancedTradeForm />
      </div>
      <div className="col-span-1 border-l border-th-bkg-3">
-        <Orderbook />
+        <div className="border-b border-th-bkg-3">
+          <TabButtons
+            activeValue={activeTab}
+            onChange={(tab: string) => setActiveTab(tab)}
+            values={TABS}
+            fillWidth
+          />
+        </div>
+        <div
+          className={`h-full ${
+            activeTab === 'trade:book' ? 'visible' : 'hidden'
+          }`}
+        >
+          <Orderbook />
+        </div>
+        <div
+          className={`h-full ${
+            activeTab === 'trade:trades' ? 'visible' : 'hidden'
+          }`}
+        >
+          <RecentTrades />
+        </div>
      </div>
      <div className="col-span-2 border-t border-th-bkg-3 sm:col-span-3">
        <TradeInfoTabs />
--- a/components/trade/OrderbookAndTrades.tsx
+++ b/components/trade/OrderbookAndTrades.tsx
@ -3,7 +3,7 @@ import { useState } from 'react'
 import Orderbook from './Orderbook'
 import RecentTrades from './RecentTrades'

-const TABS: [string, number][] = [
+export const TABS: [string, number][] = [
  ['trade:book', 0],
  ['trade:trades', 0],
 ]
--- a/components/trade/TradeAdvancedPage.tsx
+++ b/components/trade/TradeAdvancedPage.tsx
@ -212,14 +212,14 @@ const TradeAdvancedPage = () => {
          <TradeInfoTabs />
        </div>
        <div
+          className="border-l border-b border-th-bkg-3 lg:border-l-0 lg:border-b-0"
          key="trade-form"
-          className="border border-t-0 border-r-0 border-th-bkg-3 md:border-b lg:border-b-0"
        >
          <AdvancedTradeForm />
        </div>
        <div
          key="orderbook"
-          className="overflow-hidden border border-y-0 border-r-0 border-th-bkg-3"
+          className="overflow-hidden border-l border-th-bkg-3 lg:border-r"
        >
          <OrderbookAndTrades />
        </div>
--- a/components/trade/UnsettledTrades.tsx
+++ b/components/trade/UnsettledTrades.tsx
@ -18,7 +18,7 @@ const UnsettledTrades = ({
  unsettledSpotBalances: any
 }) => {
  const { t } = useTranslation(['common', 'trade'])
-  const { connected } = useWallet()
+  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
  const group = mangoStore((s) => s.group)
  // const jupiterTokens = mangoStore((s) => s.jupiterTokens)
  const [settleMktAddress, setSettleMktAddress] = useState<string>('')
@ -61,7 +61,7 @@ const UnsettledTrades = ({

  if (!group) return null

-  return connected ? (
+  return mangoAccount ? (
    Object.values(unsettledSpotBalances).flat().length ? (
      showTableView ? (
        <table className="min-w-full">
--- a/components/wallet/ConnectedMenu.tsx
+++ b/components/wallet/ConnectedMenu.tsx
@ -31,6 +31,8 @@ const ConnectedMenu = () => {

  const handleDisconnect = useCallback(() => {
    set((state) => {
+      state.activityFeed.feed = []
+      state.activityFeed.initialLoad = false
      state.mangoAccount.current = undefined
      state.mangoAccounts = []
      state.connected = false
--- a/package.json
+++ b/package.json
@ -33,12 +33,12 @@
    "immer": "^9.0.12",
    "jsbi": "^4.3.0",
    "lodash": "^4.17.21",
-    "next": "12.2.2",
+    "next": "^13.0.0",
    "next-i18next": "^11.1.1",
    "next-themes": "^0.1.1",
    "process": "^0.11.10",
-    "react": "18.0.0",
-    "react-dom": "18.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
    "react-flip-numbers": "^3.0.5",
    "react-grid-layout": "^1.3.4",
    "react-nice-dates": "^3.1.0",
@ -62,7 +62,7 @@
    "@types/react-window": "^1.8.5",
    "autoprefixer": "^10.4.4",
    "eslint": "^8.13.0",
-    "eslint-config-next": "^12.1.5",
+    "eslint-config-next": "^13.0.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-react": "^7.29.4",
    "eslint-plugin-react-hooks": "^4.4.0",
--- a/pages/settings.tsx
+++ b/pages/settings.tsx
@ -14,7 +14,7 @@ import {
 import Switch from '@components/forms/Switch'
 import { useCallback, useMemo } from 'react'
 import { CheckCircleIcon } from '@heroicons/react/20/solid'
-import Image from 'next/image'
+import Image from "next/legacy/image";
 import { useViewport } from 'hooks/useViewport'
 import { breakpoints } from 'utils/theme'

--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@ -63,6 +63,7 @@
  "new-account": "New Account",
  "new-account-failed": "Failed to create account",
  "new-account-success": "Your new account is ready 😎",
+  "perp": "Perp",
  "pnl": "PnL",
  "price": "Price",
  "quantity": "Quantity",
--- a/public/locales/en/trade.json
+++ b/public/locales/en/trade.json
@ -11,8 +11,8 @@
    "in-orders": "In Orders",
    "limit-price": "Limit Price",
    "margin": "Margin",
-    "no-orders": "No open orders...",
-    "no-unsettled": "No unsettled funds...",
+    "no-orders": "No open orders",
+    "no-unsettled": "No unsettled funds",
    "oracle-price": "Oracle Price",
    "orders": "Orders",
    "order-error": "Failed to place order",
--- a/public/locales/es/common.json
+++ b/public/locales/es/common.json
@ -63,6 +63,7 @@
  "new-account": "New Account",
  "new-account-failed": "Failed to create account",
  "new-account-success": "Your new account is ready 😎",
+  "perp": "Perp",
  "pnl": "PnL",
  "price": "Price",
  "quantity": "Quantity",
--- a/public/locales/es/trade.json
+++ b/public/locales/es/trade.json
@ -11,8 +11,8 @@
    "in-orders": "In Orders",
    "limit-price": "Limit Price",
    "margin": "Margin",
-    "no-orders": "No open orders...",
-    "no-unsettled": "No unsettled funds...",
+    "no-orders": "No open orders",
+    "no-unsettled": "No unsettled funds",
    "oracle-price": "Oracle Price",
    "orders": "Orders",
    "order-error": "Failed to place order",
--- a/public/locales/ru/common.json
+++ b/public/locales/ru/common.json
@ -63,6 +63,7 @@
  "new-account": "New Account",
  "new-account-failed": "Failed to create account",
  "new-account-success": "Your new account is ready 😎",
+  "perp": "Perp",
  "pnl": "PnL",
  "price": "Price",
  "quantity": "Quantity",
--- a/public/locales/ru/trade.json
+++ b/public/locales/ru/trade.json
@ -11,8 +11,8 @@
    "in-orders": "In Orders",
    "limit-price": "Limit Price",
    "margin": "Margin",
-    "no-orders": "No open orders...",
-    "no-unsettled": "No unsettled funds...",
+    "no-orders": "No open orders",
+    "no-unsettled": "No unsettled funds",
    "oracle-price": "Oracle Price",
    "orders": "Orders",
    "order-error": "Failed to place order",
--- a/public/locales/zh/common.json
+++ b/public/locales/zh/common.json
@ -63,6 +63,7 @@
  "new-account": "New Account",
  "new-account-failed": "Failed to create account",
  "new-account-success": "Your new account is ready 😎",
+  "perp": "Perp",
  "pnl": "PnL",
  "price": "Price",
  "quantity": "Quantity",
--- a/public/locales/zh/trade.json
+++ b/public/locales/zh/trade.json
@ -11,8 +11,8 @@
    "in-orders": "In Orders",
    "limit-price": "Limit Price",
    "margin": "Margin",
-    "no-orders": "No open orders...",
-    "no-unsettled": "No unsettled funds...",
+    "no-orders": "No open orders",
+    "no-unsettled": "No unsettled funds",
    "oracle-price": "Oracle Price",
    "orders": "Orders",
    "order-error": "Failed to place order",
--- a/public/locales/zh_tw/common.json
+++ b/public/locales/zh_tw/common.json
@ -63,6 +63,7 @@
  "new-account": "New Account",
  "new-account-failed": "Failed to create account",
  "new-account-success": "Your new account is ready 😎",
+  "perp": "Perp",
  "pnl": "PnL",
  "price": "Price",
  "quantity": "Quantity",
--- a/public/locales/zh_tw/trade.json
+++ b/public/locales/zh_tw/trade.json
@ -11,8 +11,8 @@
    "in-orders": "In Orders",
    "limit-price": "Limit Price",
    "margin": "Margin",
-    "no-orders": "No open orders...",
-    "no-unsettled": "No unsettled funds...",
+    "no-orders": "No open orders",
+    "no-unsettled": "No unsettled funds",
    "oracle-price": "Oracle Price",
    "orders": "Orders",
    "order-error": "Failed to place order",
--- a/store/mangoStore.ts
+++ b/store/mangoStore.ts
@ -159,6 +159,7 @@ interface TourSettings {
 export type MangoStore = {
  activityFeed: {
    feed: Array<DepositWithdrawFeedItem | LiquidationFeedItem>
+    initialLoad: boolean
    loading: boolean
  }
  coingeckoPrices: {
@ -262,6 +263,7 @@ const mangoStore = create<MangoStore>()(
    return {
      activityFeed: {
        feed: [],
+        initialLoad: false,
        loading: true,
      },
      coingeckoPrices: {
@ -458,6 +460,12 @@ const mangoStore = create<MangoStore>()(
              type: 'error',
            })
          } finally {
+            const initialLoad = mangoStore.getState().activityFeed.initialLoad
+            if (!initialLoad) {
+              set((state) => {
+                state.activityFeed.initialLoad = true
+              })
+            }
            set((state) => {
              state.activityFeed.loading = false
            })
@ -507,7 +515,6 @@ const mangoStore = create<MangoStore>()(
              group.serum3MarketsMapByExternal.values()
            )
            const perpMarkets = Array.from(group.perpMarketsMapByName.values())
-            console.log('perpmarkets', perpMarkets)

            set((state) => {
              state.group = group
@ -574,6 +581,8 @@ const mangoStore = create<MangoStore>()(
            )
            if (!mangoAccounts?.length) return

+            mangoAccounts.forEach((ma) => ma.reloadAccountData(client))
+
            let newSelectedMangoAccount = selectedMangoAccount
            if (!selectedMangoAccount) {
              const lastAccount = localStorage.getItem(LAST_ACCOUNT_KEY)
@ -588,9 +597,6 @@ const mangoStore = create<MangoStore>()(
            }

            if (newSelectedMangoAccount) {
-              await retryFn(() =>
-                newSelectedMangoAccount!.reloadAccountData(client)
-              )
              await actions.fetchSerumOpenOrders(newSelectedMangoAccount)
            }

@ -639,6 +645,7 @@ const mangoStore = create<MangoStore>()(
          try {
            let openOrders: Record<string, Order[]> = {}
            for (const serum3Orders of mangoAccount.serum3) {
+              if (serum3Orders.marketIndex === 65535) continue
              const market = group.getSerum3MarketByMarketIndex(
                serum3Orders.marketIndex
              )
@ -651,13 +658,14 @@ const mangoStore = create<MangoStore>()(
                openOrders[market.serumMarketExternal.toString()] = orders
              }
            }
-            const serumOpenOrderAccounts =
-              await mangoAccount.loadSerum3OpenOrdersAccounts(client)
-
-            set((s) => {
-              s.mangoAccount.openOrders = openOrders
-              s.mangoAccount.openOrderAccounts = serumOpenOrderAccounts
-            })
+            if (Object.keys(openOrders).length) {
+              const serumOpenOrderAccounts =
+                await mangoAccount.loadSerum3OpenOrdersAccounts(client)
+              set((s) => {
+                s.mangoAccount.openOrders = openOrders
+                s.mangoAccount.openOrderAccounts = serumOpenOrderAccounts
+              })
+            }
          } catch (e) {
            console.error('Failed loading open orders ', e)
          }
--- a/styles/colors.ts
+++ b/styles/colors.ts
@ -1,5 +1,6 @@
 export const COLORS: any = {
  BKG1: { Mango: '#18181C', Dark: '#17171B', Light: '#FDFDFD' },
+  BKG2: { Mango: '#242132', Dark: '#201F27', Light: '#f0f0f0' },
  GREEN: { Mango: '#A6CD03', Dark: '#5EBF4d', Light: '#5EBF4d' },
  PRIMARY: { Mango: '#F2C94C', Dark: '#F2C94C', Light: '#FF9C24' },
  RED: { Mango: '#F84638', Dark: '#CC2929', Light: '#CC2929' },
--- a/yarn.lock
+++ b/yarn.lock
@ -52,7 +52,7 @@

 "@blockworks-foundation/mango-v4@git+https://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:x-oauth-basic@github.com/blockworks-foundation/mango-v4.git#main":
  version "0.0.1-beta.3"
-  resolved "git+https://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:x-oauth-basic@github.com/blockworks-foundation/mango-v4.git#286563b0ef038cff6e16602d091abeda5764667f"
+  resolved "git+https://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:x-oauth-basic@github.com/blockworks-foundation/mango-v4.git#3efebb3ea6aa2125b3f0714862eb302497f77d7e"
  dependencies:
    "@project-serum/anchor" "^0.25.0"
    "@project-serum/serum" "^0.13.65"
@ -385,82 +385,82 @@
    "@solana/spl-token" "^0.1.8"
    "@solana/web3.js" "^1.31.0"

-"@next/env@12.2.2":
-  version "12.2.2"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-12.2.2.tgz#cc1a0a445bd254499e30f632968c03192455f4cc"
-  integrity sha512-BqDwE4gDl1F608TpnNxZqrCn6g48MBjvmWFEmeX5wEXDXh3IkAOw6ASKUgjT8H4OUePYFqghDFUss5ZhnbOUjw==
+"@next/env@13.0.0":
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-13.0.0.tgz#38527956680693c90b4522ab4ab9a2fbe3a17f67"
+  integrity sha512-65v9BVuah2Mplohm4+efsKEnoEuhmlGm8B2w6vD1geeEP2wXtlSJCvR/cCRJ3fD8wzCQBV41VcMBQeYET6MRkg==

-"@next/eslint-plugin-next@12.2.3":
-  version "12.2.3"
-  resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-12.2.3.tgz#63726691aac6a7f01b64190a0323d590a0e8154d"
-  integrity sha512-B2e8Yg1MpuLsGxhCx4rU8/Tcnr5wFmCx1O2eyLXBPnaCcsFXfGCo067ujagtDLtWASL3GNgzg78U1SB0dbc38A==
+"@next/eslint-plugin-next@13.0.0":
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-13.0.0.tgz#cf3d799b21671554c1f5889c01d2513afb9973cd"
+  integrity sha512-z+gnX4Zizatqatc6f4CQrcC9oN8Us3Vrq/OLyc98h7K/eWctrnV91zFZodmJHUjx0cITY8uYM7LXD7IdYkg3kg==
  dependencies:
    glob "7.1.7"

-"@next/swc-android-arm-eabi@12.2.2":
-  version "12.2.2"
-  resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.2.2.tgz#f6c4111e6371f73af6bf80c9accb3d96850a92cd"
-  integrity sha512-VHjuCHeq9qCprUZbsRxxM/VqSW8MmsUtqB5nEpGEgUNnQi/BTm/2aK8tl7R4D0twGKRh6g1AAeFuWtXzk9Z/vQ==
+"@next/swc-android-arm-eabi@13.0.0":
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.0.0.tgz#15cd89d19d3c00d123fdfe367bab38c362f6c515"
+  integrity sha512-+DUQkYF93gxFjWY+CYWE1QDX6gTgnUiWf+W4UqZjM1Jcef8U97fS6xYh+i+8rH4MM0AXHm7OSakvfOMzmjU6VA==

-"@next/swc-android-arm64@12.2.2":
-  version "12.2.2"
-  resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-12.2.2.tgz#b69de59c51e631a7600439e7a8993d6e82f3369e"
-  integrity sha512-v5EYzXUOSv0r9mO/2PX6mOcF53k8ndlu9yeFHVAWW1Dhw2jaJcvTRcCAwYYN8Q3tDg0nH3NbEltJDLKmcJOuVA==
+"@next/swc-android-arm64@13.0.0":
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-13.0.0.tgz#9410365bb07097268d4773a46b02cfe6b3fe3ab7"
+  integrity sha512-RW9Uy3bMSc0zVGCa11klFuwfP/jdcdkhdruqnrJ7v+7XHm6OFKkSRzX6ee7yGR1rdDZvTnP4GZSRSpzjLv/N0g==

-"@next/swc-darwin-arm64@12.2.2":
-  version "12.2.2"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.2.2.tgz#80157c91668eff95b72d052428c353eab0fc4c50"
-  integrity sha512-JCoGySHKGt+YBk7xRTFGx1QjrnCcwYxIo3yGepcOq64MoiocTM3yllQWeOAJU2/k9MH0+B5E9WUSme4rOCBbpA==
+"@next/swc-darwin-arm64@13.0.0":
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.0.0.tgz#caf262fb5cb8bb335f6f344fd67a44dc8bf6a084"
+  integrity sha512-APA26nps1j4qyhOIzkclW/OmgotVHj1jBxebSpMCPw2rXfiNvKNY9FA0TcuwPmUCNqaTnm703h6oW4dvp73A4Q==

-"@next/swc-darwin-x64@12.2.2":
-  version "12.2.2"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-12.2.2.tgz#12be2f58e676fccff3d48a62921b9927ed295133"
-  integrity sha512-dztDtvfkhUqiqpXvrWVccfGhLe44yQ5tQ7B4tBfnsOR6vxzI9DNPHTlEOgRN9qDqTAcFyPxvg86mn4l8bB9Jcw==
+"@next/swc-darwin-x64@13.0.0":
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-13.0.0.tgz#6b214753410e1d8512a1491045acea1e188df7d6"
+  integrity sha512-qsUhUdoFuRJiaJ7LnvTQ6GZv1QnMDcRXCIjxaN0FNVXwrjkq++U7KjBUaxXkRzLV4C7u0NHLNOp0iZwNNE7ypw==

-"@next/swc-freebsd-x64@12.2.2":
-  version "12.2.2"
-  resolved "https://registry.yarnpkg.com/@next/swc-freebsd-x64/-/swc-freebsd-x64-12.2.2.tgz#de1363431a49059f1efb8c0f86ce6a79c53b3a95"
-  integrity sha512-JUnXB+2xfxqsAvhFLPJpU1NeyDsvJrKoOjpV7g3Dxbno2Riu4tDKn3kKF886yleAuD/1qNTUCpqubTvbbT2VoA==
+"@next/swc-freebsd-x64@13.0.0":
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/@next/swc-freebsd-x64/-/swc-freebsd-x64-13.0.0.tgz#eeb176bdb585f48882bdac1d04271b918ca87590"
+  integrity sha512-sCdyCbboS7CwdnevKH9J6hkJI76LUw1jVWt4eV7kISuLiPba3JmehZSWm80oa4ADChRVAwzhLAo2zJaYRrInbg==

-"@next/swc-linux-arm-gnueabihf@12.2.2":
-  version "12.2.2"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.2.2.tgz#d5b8e0d1bb55bbd9db4d2fec018217471dc8b9e6"
-  integrity sha512-XeYC/qqPLz58R4pjkb+x8sUUxuGLnx9QruC7/IGkK68yW4G17PHwKI/1njFYVfXTXUukpWjcfBuauWwxp9ke7Q==
+"@next/swc-linux-arm-gnueabihf@13.0.0":
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-13.0.0.tgz#2c2a9622c93f87a8baca94e068f674da4cae6018"
+  integrity sha512-/X/VxfFA41C9jrEv+sUsPLQ5vbDPVIgG0CJrzKvrcc+b+4zIgPgtfsaWq9ockjHFQi3ycvlZK4TALOXO8ovQ6Q==

-"@next/swc-linux-arm64-gnu@12.2.2":
-  version "12.2.2"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.2.2.tgz#3bc75984e1d5ec8f59eb53702cc382d8e1be2061"
-  integrity sha512-d6jT8xgfKYFkzR7J0OHo2D+kFvY/6W8qEo6/hmdrTt6AKAqxs//rbbcdoyn3YQq1x6FVUUd39zzpezZntg9Naw==
+"@next/swc-linux-arm64-gnu@13.0.0":
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.0.0.tgz#69505827e2928fb18034150fd4d754d54c4a1c4b"
+  integrity sha512-x6Oxr1GIi0ZtNiT6jbw+JVcbEi3UQgF7mMmkrgfL4mfchOwXtWSHKTSSPnwoJWJfXYa0Vy1n8NElWNTGAqoWFw==

-"@next/swc-linux-arm64-musl@12.2.2":
-  version "12.2.2"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.2.2.tgz#270db73e07a18d999f61e79a917943fa5bc1ef56"
-  integrity sha512-rIZRFxI9N/502auJT1i7coas0HTHUM+HaXMyJiCpnY8Rimbo0495ir24tzzHo3nQqJwcflcPTwEh/DV17sdv9A==
+"@next/swc-linux-arm64-musl@13.0.0":
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.0.0.tgz#487a88f2583a046e882328fe0665b37eca4fd0f6"
+  integrity sha512-SnMH9ngI+ipGh3kqQ8+mDtWunirwmhQnQeZkEq9e/9Xsgjf04OetqrqRHKM1HmJtG2qMUJbyXFJ0F81TPuT+3g==

-"@next/swc-linux-x64-gnu@12.2.2":
-  version "12.2.2"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.2.2.tgz#e6c72fa20478552e898c434f4d4c0c5e89d2ea78"
-  integrity sha512-ir1vNadlUDj7eQk15AvfhG5BjVizuCHks9uZwBfUgT5jyeDCeRvaDCo1+Q6+0CLOAnYDR/nqSCvBgzG2UdFh9A==
+"@next/swc-linux-x64-gnu@13.0.0":
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.0.0.tgz#29e89c7e4fd2e2b16ad059076f6261998aee53df"
+  integrity sha512-VSQwTX9EmdbotArtA1J67X8964oQfe0xHb32x4tu+JqTR+wOHyG6wGzPMdXH2oKAp6rdd7BzqxUXXf0J+ypHlw==

-"@next/swc-linux-x64-musl@12.2.2":
-  version "12.2.2"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.2.2.tgz#b9ef9efe2c401839cdefa5e70402386aafdce15a"
-  integrity sha512-bte5n2GzLN3O8JdSFYWZzMgEgDHZmRz5wiispiiDssj4ik3l8E7wq/czNi8RmIF+ioj2sYVokUNa/ekLzrESWw==
+"@next/swc-linux-x64-musl@13.0.0":
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.0.0.tgz#2f63aae922d2b2829aec21bf8f9adda8b6c16365"
+  integrity sha512-xBCP0nnpO0q4tsytXkvIwWFINtbFRyVY5gxa1zB0vlFtqYR9lNhrOwH3CBrks3kkeaePOXd611+8sjdUtrLnXA==

-"@next/swc-win32-arm64-msvc@12.2.2":
-  version "12.2.2"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.2.2.tgz#18fa7ec7248da3a7926a0601d9ececc53ac83157"
-  integrity sha512-ZUGCmcDmdPVSAlwJ/aD+1F9lYW8vttseiv4n2+VCDv5JloxiX9aY32kYZaJJO7hmTLNrprvXkb4OvNuHdN22Jg==
+"@next/swc-win32-arm64-msvc@13.0.0":
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.0.0.tgz#4117bad96c2a6775f70294fba45c63951a8a21ac"
+  integrity sha512-NutwDafqhGxqPj/eiUixJq9ImS/0sgx6gqlD7jRndCvQ2Q8AvDdu1+xKcGWGNnhcDsNM/n1avf1e62OG1GaqJg==

-"@next/swc-win32-ia32-msvc@12.2.2":
-  version "12.2.2"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.2.2.tgz#54936e84f4a219441d051940354da7cd3eafbb4f"
-  integrity sha512-v7ykeEDbr9eXiblGSZiEYYkWoig6sRhAbLKHUHQtk8vEWWVEqeXFcxmw6LRrKu5rCN1DY357UlYWToCGPQPCRA==
+"@next/swc-win32-ia32-msvc@13.0.0":
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.0.0.tgz#5914eb86f9ea92a00d76cb094dd9734b3bf2012c"
+  integrity sha512-zNaxaO+Kl/xNz02E9QlcVz0pT4MjkXGDLb25qxtAzyJL15aU0+VjjbIZAYWctG59dvggNIUNDWgoBeVTKB9xLg==

-"@next/swc-win32-x64-msvc@12.2.2":
-  version "12.2.2"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.2.2.tgz#7460be700a60d75816f01109400b51fe929d7e89"
-  integrity sha512-2D2iinWUL6xx8D9LYVZ5qi7FP6uLAoWymt8m8aaG2Ld/Ka8/k723fJfiklfuAcwOxfufPJI+nRbT5VcgHGzHAQ==
+"@next/swc-win32-x64-msvc@13.0.0":
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.0.0.tgz#c54a5a739dee04b20338d305226a2acdf701f67f"
+  integrity sha512-FFOGGWwTCRMu9W7MF496Urefxtuo2lttxF1vwS+1rIRsKvuLrWhVaVTj3T8sf2EBL6gtJbmh4TYlizS+obnGKA==

 "@ngraveio/bc-ur@^1.0.0", "@ngraveio/bc-ur@^1.1.5":
  version "1.1.6"
@ -1313,9 +1313,9 @@
    tweetnacl "^1.0.0"

 "@solana/web3.js@^1.17.0", "@solana/web3.js@^1.21.0", "@solana/web3.js@^1.22.0", "@solana/web3.js@^1.32.0", "@solana/web3.js@^1.36.0", "@solana/web3.js@^1.44.3", "@solana/web3.js@^1.63.1":
-  version "1.63.1"
-  resolved "https://registry.yarnpkg.com/@solana/web3.js/-/web3.js-1.63.1.tgz#88a19a17f5f4aada73ad70a94044c1067cab2b4d"
-  integrity sha512-wgEdGVK5FTS2zENxbcGSvKpGZ0jDS6BUdGu8Gn6ns0CzgJkK83u4ip3THSnBPEQ5i/jrqukg998BwV1H67+qiQ==
+  version "1.66.2"
+  resolved "https://registry.yarnpkg.com/@solana/web3.js/-/web3.js-1.66.2.tgz#80b43c5868b846124fe3ebac7d3943930c3fa60c"
+  integrity sha512-RyaHMR2jGmaesnYP045VLeBGfR/gAW3cvZHzMFGg7bkO+WOYOYp1nEllf0/la4U4qsYGKCsO9eEevR5fhHiVHg==
  dependencies:
    "@babel/runtime" "^7.12.5"
    "@noble/ed25519" "^1.7.0"
@ -1531,10 +1531,10 @@
    eventemitter3 "^4.0.7"
    uuid "^8.3.2"

-"@swc/helpers@0.4.2":
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.4.2.tgz#ed1f6997ffbc22396665d9ba74e2a5c0a2d782f8"
-  integrity sha512-556Az0VX7WR6UdoTn4htt/l3zPQ7bsQWK+HqdG4swV7beUCxo/BqmvbOpUkTIm/9ih86LIf1qsUnywNL3obGHw==
+"@swc/helpers@0.4.11":
+  version "0.4.11"
+  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.4.11.tgz#db23a376761b3d31c26502122f349a21b592c8de"
+  integrity sha512-rEUrBSGIoSFuYxwBYtlUFMlE2CwGhmW+w9355/5oduSw8e5h2+Tj4UrAGNNgP9915++wj5vkQo0UuOBqOAq4nw==
  dependencies:
    tslib "^2.4.0"

@ -1766,9 +1766,9 @@
  integrity sha512-MqTGEo5bj5t157U6fA/BiDynNkn0YknVdh48CMPkTSpFTVmvao5UQmm7uEF6xBEo7qIMAlY/JSleYaE6VOdpaA==

 "@types/node@*", "@types/node@>=13.7.0":
-  version "18.8.4"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.8.4.tgz#54be907698f40de8a45770b48486aa3cbd3adff7"
-  integrity sha512-WdlVphvfR/GJCLEMbNA8lJ0lhFNBj4SW3O+O5/cEGw9oYrv0al9zTwuQsq+myDUXgNx2jgBynoVgZ2MMJ6pbow==
+  version "18.11.6"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.11.6.tgz#4f91b0b30d405fdf76e0029b11ef5df6a0da4261"
+  integrity sha512-j3CEDa2vd96K0AXF8Wur7UucACvnjkk8hYyQAHhUNciabZLDl9nfAEVUSwmh245OOZV15bRA3Y590Gi5jUcDJg==

 "@types/node@17.0.23":
  version "17.0.23"
@ -2272,7 +2272,7 @@ array.prototype.flat@^1.2.5:
    es-abstract "^1.19.2"
    es-shim-unscopables "^1.0.0"

-array.prototype.flatmap@^1.2.5:
+array.prototype.flatmap@^1.2.5, array.prototype.flatmap@^1.3.0:
  version "1.3.0"
  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.0.tgz#a7e8ed4225f4788a70cd910abcf0791e76a5534f"
  integrity sha512-PZC9/8TKAIxcWKdyeb77EzULHPrIX/tIZebLJUQOMR1OwYosT8yggdfWScfTBCDj5utONvOuPQQumYsU2ULbkg==
@ -2689,9 +2689,9 @@ buffer@^5.1.0, buffer@^5.4.3:
    ieee754 "^1.1.13"

 bufferutil@^4.0.1:
-  version "4.0.6"
-  resolved "https://registry.yarnpkg.com/bufferutil/-/bufferutil-4.0.6.tgz#ebd6c67c7922a0e902f053e5d8be5ec850e48433"
-  integrity sha512-jduaYOYtnio4aIAyc6UbvPCVcgq7nYpVnucyxr6eCYg/Woad9Hf/oxxBRDnGGjPfjUm6j5O/uBWhIu4iLebFaw==
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/bufferutil/-/bufferutil-4.0.7.tgz#60c0d19ba2c992dd8273d3f73772ffc894c153ad"
+  integrity sha512-kukuqc39WOHtdxtw4UScxF/WVnMFVSQVKhtx3AjZJzhd0RGZZldcrfSEbVsWWe6KNH253574cq5F+wpv0G9pJw==
  dependencies:
    node-gyp-build "^4.3.0"

@ -2728,15 +2728,10 @@ camelcase@^6.0.0:
  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
  integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==

-caniuse-lite@^1.0.30001317:
-  version "1.0.30001328"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001328.tgz#0ed7a2ca65ec45872c613630201644237ba1e329"
-  integrity sha512-Ue55jHkR/s4r00FLNiX+hGMMuwml/QGqqzVeMQ5thUewznU2EdULFvI3JR7JJid6OrjJNfFvHY2G2dIjmRaDDQ==
-
-caniuse-lite@^1.0.30001332:
-  version "1.0.30001365"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001365.tgz#72c2c3863b1a545cfd3d9953535bd2ee17568158"
-  integrity sha512-VDQZ8OtpuIPMBA4YYvZXECtXbddMCUFJk1qu8Mqxfm/SZJNSr1cy4IuLCOL7RJ/YASrvJcYg1Zh+UEUQ5m6z8Q==
+caniuse-lite@^1.0.30001317, caniuse-lite@^1.0.30001406:
+  version "1.0.30001425"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001425.tgz#52917791a453eb3265143d2cd08d80629e82c735"
+  integrity sha512-/pzFv0OmNG6W0ym80P3NtapU0QEiDS3VuYAZMGoLLqiC7f6FJFe1MjpQDREGApeenD9wloeytmVDj+JLXPC6qw==

 canvas-renderer@~2.2.0:
  version "2.2.0"
@ -2810,6 +2805,11 @@ classnames@^2.2.6:
  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==

+client-only@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
+  integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
+
 cliui@^5.0.0:
  version "5.0.0"
  resolved "https://registry.yarnpkg.com/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"
@ -3502,19 +3502,19 @@ escape-string-regexp@^1.0.5:
  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
  integrity sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==

-eslint-config-next@^12.1.5:
-  version "12.2.3"
-  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-12.2.3.tgz#468fe9756ccbf7e4452139062db5b4e6557dc885"
-  integrity sha512-xAQqAqwa2bu9ZMRypz58ym4tNCo22Wc6LuoLpbpf3yW5c4ZkVib9934AgGDDvh2zKrP56Z6X0Pp6gNnuuZzcRw==
+eslint-config-next@^13.0.0:
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-13.0.0.tgz#d533ee1dbd6576fd3759ba4db4d5a6c4e039c242"
+  integrity sha512-y2nqWS2tycWySdVhb+rhp6CuDmDazGySqkzzQZf3UTyfHyC7og1m5m/AtMFwCo5mtvDqvw1BENin52kV9733lg==
  dependencies:
-    "@next/eslint-plugin-next" "12.2.3"
+    "@next/eslint-plugin-next" "13.0.0"
    "@rushstack/eslint-patch" "^1.1.3"
    "@typescript-eslint/parser" "^5.21.0"
    eslint-import-resolver-node "^0.3.6"
    eslint-import-resolver-typescript "^2.7.1"
    eslint-plugin-import "^2.26.0"
    eslint-plugin-jsx-a11y "^6.5.1"
-    eslint-plugin-react "^7.29.4"
+    eslint-plugin-react "^7.31.7"
    eslint-plugin-react-hooks "^4.5.0"

 eslint-config-prettier@^8.5.0:
@ -3617,6 +3617,26 @@ eslint-plugin-react@^7.29.4:
    semver "^6.3.0"
    string.prototype.matchall "^4.0.6"

+eslint-plugin-react@^7.31.7:
+  version "7.31.10"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.31.10.tgz#6782c2c7fe91c09e715d536067644bbb9491419a"
+  integrity sha512-e4N/nc6AAlg4UKW/mXeYWd3R++qUano5/o+t+wnWxIf+bLsOaH3a4q74kX3nDjYym3VBN4HyO9nEn1GcAqgQOA==
+  dependencies:
+    array-includes "^3.1.5"
+    array.prototype.flatmap "^1.3.0"
+    doctrine "^2.1.0"
+    estraverse "^5.3.0"
+    jsx-ast-utils "^2.4.1 || ^3.0.0"
+    minimatch "^3.1.2"
+    object.entries "^1.1.5"
+    object.fromentries "^2.0.5"
+    object.hasown "^1.1.1"
+    object.values "^1.1.5"
+    prop-types "^15.8.1"
+    resolve "^2.0.0-next.3"
+    semver "^6.3.0"
+    string.prototype.matchall "^4.0.7"
+
 eslint-scope@^7.1.1:
  version "7.1.1"
  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.1.1.tgz#fff34894c2f65e5226d3041ac480b4513a163642"
@ -4549,9 +4569,9 @@ jmespath@^0.15.0:
  integrity sha512-+kHj8HXArPfpPEKGLZ+kB5ONRTCiGQXo8RQYL0hH8t6pWXUBBK5KkkQmTNOwKK4LEsd0yTsgtjJVm4UBSZea4w==

 joi@^17.4.0:
-  version "17.6.2"
-  resolved "https://registry.yarnpkg.com/joi/-/joi-17.6.2.tgz#00ac55ce6495596545cce45309f38738cfbd7cd3"
-  integrity sha512-+gqqdh1xc1wb+Lor0J9toqgeReyDOCqOdG8QSdRcEvwrcRiFQZneUCGKjFjuyBWUb3uaFOgY56yMaZ5FIc+H4w==
+  version "17.6.4"
+  resolved "https://registry.yarnpkg.com/joi/-/joi-17.6.4.tgz#4d9536a059ef0762c718ae98673016b3ec151abd"
+  integrity sha512-tPzkTJHZQjSFCc842QpdVpOZ9LI2txApboNUbW70qgnRB14Lzl+oWQOPdF2N4yqyiY14wBGe8lc7f/2hZxbGmw==
  dependencies:
    "@hapi/hoek" "^9.0.0"
    "@hapi/topo" "^5.0.0"
@ -4893,11 +4913,16 @@ minimatch@^5.0.1:
  dependencies:
    brace-expansion "^2.0.1"

-minimist@^1.2.0, minimist@^1.2.5, minimist@^1.2.6:
+minimist@^1.2.0, minimist@^1.2.6:
  version "1.2.6"
  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
  integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==

+minimist@^1.2.5:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.7.tgz#daa1c4d91f507390437c6a8bc01078e7000c4d18"
+  integrity sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==
+
 mocha@^9.1.1:
  version "9.2.2"
  resolved "https://registry.yarnpkg.com/mocha/-/mocha-9.2.2.tgz#d70db46bdb93ca57402c809333e5a84977a88fb9"
@ -4963,7 +4988,7 @@ nanoid@3.3.1:
  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.1.tgz#6347a18cac88af88f58af0b3594b723d5e99bb35"
  integrity sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==

-nanoid@^3.1.30, nanoid@^3.3.1:
+nanoid@^3.3.1:
  version "3.3.2"
  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.2.tgz#c89622fafb4381cd221421c69ec58547a1eec557"
  integrity sha512-CuHBogktKwpm5g2sRgv83jEy2ijFzBwMoYA60orPDR7ynsLijJDqgsi4RDGj3OJpy3Ieb+LYwiRmIOGyytgITA==
@ -4996,31 +5021,31 @@ next-themes@^0.1.1:
  resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.1.1.tgz#122113a458bf1d1be5ffed66778ab924c106f82a"
  integrity sha512-Iqxt6rhS/KfK/iHJ0tfFjTcdLEAI0AgwFuAFrMwLOPK5e+MI3I+fzyvBoS+VaOS+NldUiazurhgwYhrfV0VXsQ==

-next@12.2.2:
-  version "12.2.2"
-  resolved "https://registry.yarnpkg.com/next/-/next-12.2.2.tgz#029bf5e4a18a891ca5d05b189b7cd983fd22c072"
-  integrity sha512-zAYFY45aBry/PlKONqtlloRFqU/We3zWYdn2NoGvDZkoYUYQSJC8WMcalS5C19MxbCZLUVCX7D7a6gTGgl2yLg==
+next@^13.0.0:
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/next/-/next-13.0.0.tgz#6f07064a4f374562cf58677bef4dd06326ca648b"
+  integrity sha512-puH1WGM6rGeFOoFdXXYfUxN9Sgi4LMytCV5HkQJvVUOhHfC1DoVqOfvzaEteyp6P04IW+gbtK2Q9pInVSrltPA==
  dependencies:
-    "@next/env" "12.2.2"
-    "@swc/helpers" "0.4.2"
-    caniuse-lite "^1.0.30001332"
-    postcss "8.4.5"
-    styled-jsx "5.0.2"
-    use-sync-external-store "1.1.0"
+    "@next/env" "13.0.0"
+    "@swc/helpers" "0.4.11"
+    caniuse-lite "^1.0.30001406"
+    postcss "8.4.14"
+    styled-jsx "5.1.0"
+    use-sync-external-store "1.2.0"
  optionalDependencies:
-    "@next/swc-android-arm-eabi" "12.2.2"
-    "@next/swc-android-arm64" "12.2.2"
-    "@next/swc-darwin-arm64" "12.2.2"
-    "@next/swc-darwin-x64" "12.2.2"
-    "@next/swc-freebsd-x64" "12.2.2"
-    "@next/swc-linux-arm-gnueabihf" "12.2.2"
-    "@next/swc-linux-arm64-gnu" "12.2.2"
-    "@next/swc-linux-arm64-musl" "12.2.2"
-    "@next/swc-linux-x64-gnu" "12.2.2"
-    "@next/swc-linux-x64-musl" "12.2.2"
-    "@next/swc-win32-arm64-msvc" "12.2.2"
-    "@next/swc-win32-ia32-msvc" "12.2.2"
-    "@next/swc-win32-x64-msvc" "12.2.2"
+    "@next/swc-android-arm-eabi" "13.0.0"
+    "@next/swc-android-arm64" "13.0.0"
+    "@next/swc-darwin-arm64" "13.0.0"
+    "@next/swc-darwin-x64" "13.0.0"
+    "@next/swc-freebsd-x64" "13.0.0"
+    "@next/swc-linux-arm-gnueabihf" "13.0.0"
+    "@next/swc-linux-arm64-gnu" "13.0.0"
+    "@next/swc-linux-arm64-musl" "13.0.0"
+    "@next/swc-linux-x64-gnu" "13.0.0"
+    "@next/swc-linux-x64-musl" "13.0.0"
+    "@next/swc-win32-arm64-msvc" "13.0.0"
+    "@next/swc-win32-ia32-msvc" "13.0.0"
+    "@next/swc-win32-x64-msvc" "13.0.0"

 no-case@^3.0.4:
  version "3.0.4"
@ -5147,6 +5172,14 @@ object.hasown@^1.1.0:
    define-properties "^1.1.3"
    es-abstract "^1.19.1"

+object.hasown@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object.hasown/-/object.hasown-1.1.1.tgz#ad1eecc60d03f49460600430d97f23882cf592a3"
+  integrity sha512-LYLe4tivNQzq4JdaWW6WO3HMZZJWzkkH8fnI6EebWl0VZth2wL2Lovm74ep2/gZzlaTdV62JZHEqHQ2yVn8Q/A==
+  dependencies:
+    define-properties "^1.1.4"
+    es-abstract "^1.19.5"
+
 object.values@^1.1.5:
  version "1.1.5"
  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.5.tgz#959f63e3ce9ef108720333082131e4a459b716ac"
@ -5431,14 +5464,14 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==

-postcss@8.4.5:
-  version "8.4.5"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.5.tgz#bae665764dfd4c6fcc24dc0fdf7e7aa00cc77f95"
-  integrity sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==
+postcss@8.4.14:
+  version "8.4.14"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.14.tgz#ee9274d5622b4858c1007a74d76e42e56fd21caf"
+  integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==
  dependencies:
-    nanoid "^3.1.30"
+    nanoid "^3.3.4"
    picocolors "^1.0.0"
-    source-map-js "^1.0.1"
+    source-map-js "^1.0.2"

 postcss@^8.4.12:
  version "8.4.12"
@ -5633,13 +5666,13 @@ react-dom@16.13.1:
    prop-types "^15.6.2"
    scheduler "^0.19.1"

-react-dom@18.0.0:
-  version "18.0.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.0.0.tgz#26b88534f8f1dbb80853e1eabe752f24100d8023"
-  integrity sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw==
+react-dom@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
  dependencies:
    loose-envify "^1.1.0"
-    scheduler "^0.21.0"
+    scheduler "^0.23.0"

 react-draggable@^4.0.0, react-draggable@^4.0.3:
  version "4.4.5"
@ -5793,10 +5826,10 @@ react@16.13.1:
    object-assign "^4.1.1"
    prop-types "^15.6.2"

-react@18.0.0:
-  version "18.0.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-18.0.0.tgz#b468736d1f4a5891f38585ba8e8fb29f91c3cb96"
-  integrity sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A==
+react@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
  dependencies:
    loose-envify "^1.1.0"

@ -5859,9 +5892,9 @@ reduce-css-calc@^2.1.8:
    postcss-value-parser "^3.3.0"

 regenerator-runtime@^0.13.4:
-  version "0.13.9"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
-  integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
+  version "0.13.10"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.10.tgz#ed07b19616bcbec5da6274ebc75ae95634bfc2ee"
+  integrity sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw==

 regexp.prototype.flags@^1.4.1:
  version "1.4.1"
@ -6035,10 +6068,10 @@ scheduler@^0.19.1:
    loose-envify "^1.1.0"
    object-assign "^4.1.1"

-scheduler@^0.21.0:
-  version "0.21.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.21.0.tgz#6fd2532ff5a6d877b6edb12f00d8ab7e8f308820"
-  integrity sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==
+scheduler@^0.23.0:
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
+  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
  dependencies:
    loose-envify "^1.1.0"

@ -6177,7 +6210,7 @@ sonic-boom@^1.0.2:
    atomic-sleep "^1.0.0"
    flatstr "^1.0.12"

-source-map-js@^1.0.1, source-map-js@^1.0.2:
+source-map-js@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
@ -6252,7 +6285,7 @@ string-width@^4.1.0, string-width@^4.2.0:
    is-fullwidth-code-point "^3.0.0"
    strip-ansi "^6.0.1"

-string.prototype.matchall@^4.0.6:
+string.prototype.matchall@^4.0.6, string.prototype.matchall@^4.0.7:
  version "4.0.7"
  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.7.tgz#8e6ecb0d8a1fb1fda470d81acecb2dba057a481d"
  integrity sha512-f48okCX7JiwVi1NXCVWcFnZgADDC/n2vePlQ/KUCNqCikLLilQvwjMO8+BHVKvgzH0JB0J9LEPgxOGT02RoETg==
@ -6320,24 +6353,12 @@ strip-json-comments@3.1.1, strip-json-comments@^3.1.0, strip-json-comments@^3.1.
  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
  integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==

-style-to-js@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/style-to-js/-/style-to-js-1.1.1.tgz#417786986cda61d4525c80aed9d1123a6a7af9b8"
-  integrity sha512-RJ18Z9t2B02sYhZtfWKQq5uplVctgvjTfLWT7+Eb1zjUjIrWzX5SdlkwLGQozrqarTmEzJJ/YmdNJCUNI47elg==
+styled-jsx@5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.1.0.tgz#4a5622ab9714bd3fcfaeec292aa555871f057563"
+  integrity sha512-/iHaRJt9U7T+5tp6TRelLnqBqiaIT0HsO0+vgyj8hK2KUk7aejFqRrumqPUlAqDwAj8IbS/1hk3IhBAAK/FCUQ==
  dependencies:
-    style-to-object "0.3.0"
-
-style-to-object@0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.3.0.tgz#b1b790d205991cc783801967214979ee19a76e46"
-  integrity sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA==
-  dependencies:
-    inline-style-parser "0.1.1"
-
-styled-jsx@5.0.2:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.2.tgz#ff230fd593b737e9e68b630a694d460425478729"
-  integrity sha512-LqPQrbBh3egD57NBcHET4qcgshPks+yblyhPlH2GY8oaDgKs8SK4C3dBh3oSJjgzJ3G5t1SYEZGHkP+QEpX9EQ==
+    client-only "0.0.1"

 superstruct@^0.14.2:
  version "0.14.2"
@ -6869,20 +6890,15 @@ uri-js@^4.2.2:
  dependencies:
    punycode "^2.1.0"

-use-sync-external-store@1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.1.0.tgz#3343c3fe7f7e404db70f8c687adf5c1652d34e82"
-  integrity sha512-SEnieB2FPKEVne66NpXPd1Np4R1lTNKfjuy3XdIoPQKYBAFdzbzSZlSn1KJZUiihQLQC5Znot4SBz1EOTBwQAQ==
-
 use-sync-external-store@1.2.0, use-sync-external-store@^1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==

 utf-8-validate@^5.0.2:
-  version "5.0.9"
-  resolved "https://registry.yarnpkg.com/utf-8-validate/-/utf-8-validate-5.0.9.tgz#ba16a822fbeedff1a58918f2a6a6b36387493ea3"
-  integrity sha512-Yek7dAy0v3Kl0orwMlvi7TPtiCNrdfHNd7Gcc/pLq4BLXqfAmd0J7OWMizUQnTTJsyjKn02mU7anqwfmUP4J8Q==
+  version "5.0.10"
+  resolved "https://registry.yarnpkg.com/utf-8-validate/-/utf-8-validate-5.0.10.tgz#d7d10ea39318171ca982718b6b96a8d2442571a2"
+  integrity sha512-Z6czzLq4u8fPOyx7TU6X3dvUZVvoJmxSQ+IcrlmagKhilxlhZgxPK6C5Jqbkw1IDUmFTM+cz9QDnnLTwDz/2gQ==
  dependencies:
    node-gyp-build "^4.3.0"

@ -7060,9 +7076,9 @@ ws@^7.4.5, ws@^7.5.1:
  integrity sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==

 ws@^8.5.0:
-  version "8.9.0"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-8.9.0.tgz#2a994bb67144be1b53fe2d23c53c028adeb7f45e"
-  integrity sha512-Ja7nszREasGaYUYCI2k4lCKIRTt+y7XuqVoHR44YpI49TtryyqbqvDMn5eqfW7e6HzTukDRIsXqzVHScqRcafg==
+  version "8.10.0"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.10.0.tgz#00a28c09dfb76eae4eb45c3b565f771d6951aa51"
+  integrity sha512-+s49uSmZpvtAsd2h37vIPy1RBusaLawVe8of+GyEPsaJTCMpj/2v8NpeK1SHXjBlQ95lQTmQofOJnFiLoaN3yw==

 ws@~8.2.3:
  version "8.2.3"