leverage slider and mango account

2022-07-12 22:02:36 -04:00 · 2022-07-12 22:02:36 -04:00 · a74fd28ca6
parent 375d369573
commit a74fd28ca6
12 changed files with 318 additions and 177 deletions
--- a/components/AccountActions.tsx
+++ b/components/AccountActions.tsx
@ -4,12 +4,10 @@ import { useState } from 'react'
 import Button from './shared/Button'
 import DepositModal from './DepositModal'
 import WithdrawModal from './WithdrawModal'
-import ContentBox from './shared/ContentBox'
 import mangoStore from '../store/state'

 const AccountActions = () => {
  const { connected } = useWallet()
-  const mangoAccount = mangoStore((s) => s.mangoAccount)

  const [showDepositModal, setShowDepositModal] = useState(false)
  const [showWithdrawModal, setShowWithdrawModal] = useState(false)
@ -28,7 +26,7 @@ const AccountActions = () => {
  }

  return (
-    <ContentBox>
+    <>
      <div className="mt-2 flex justify-center space-x-4">
        {connected ? (
          <>
@ -51,7 +49,7 @@ const AccountActions = () => {
          onClose={() => setShowWithdrawModal(false)}
        />
      ) : null}
-    </ContentBox>
+    </>
  )
 }

--- a/components/Home.tsx
+++ b/components/Home.tsx
@ -1,10 +1,10 @@
 import { useWallet } from '@solana/wallet-adapter-react'

 import TokenList from './TokenList'
-import AccountActions from './AccountActions'
 import Swap from './swap/Swap'
 import SwapTokenChart from './swap/SwapTokenChart'
 import mangoStore from '../store/state'
+import MangoAccount from './MangoAccount'

 const Home = () => {
  const { connected } = useWallet()
@ -24,7 +24,7 @@ const Home = () => {
          </div>
          <div className="space-y-6">
            <Swap />
-            {connected ? <AccountActions /> : null}
+            {connected ? <MangoAccount /> : null}
          </div>
        </div>
      </div>
--- a/components/MangoAccount.tsx
+++ b/components/MangoAccount.tsx
@ -0,0 +1,57 @@
+import ContentBox from './shared/ContentBox'
+import mangoStore from '../store/state'
+import AccountActions from './AccountActions'
+import { toUiDecimals } from '@blockworks-foundation/mango-v4'
+import { formatDecimal } from '../utils/numbers'
+
+const MangoAccount = () => {
+  const mangoAccount = mangoStore((s) => s.mangoAccount)
+
+  return (
+    <ContentBox>
+      <div className="flex-col space-y-2">
+        <div className="flex items-center justify-between">
+          <div className="text-th-fgd-4">Account Value</div>
+          <div className="text-th-fgd-3">
+            $
+            {mangoAccount
+              ? formatDecimal(
+                  toUiDecimals(mangoAccount.getEquity().toNumber()),
+                  2
+                )
+              : 0.0}
+          </div>
+        </div>
+        <div className="flex items-center justify-between">
+          <div className="text-th-fgd-4">Free Collateral</div>
+          <div className="text-th-fgd-3">
+            $
+            {mangoAccount
+              ? formatDecimal(
+                  toUiDecimals(mangoAccount.getCollateralValue().toNumber()),
+                  2
+                )
+              : 0.0}
+          </div>
+        </div>
+        <div className="flex items-center justify-between">
+          <div className="text-th-fgd-4">Health</div>
+          <div className="text-th-fgd-3">
+            $
+            {mangoAccount
+              ? formatDecimal(
+                  toUiDecimals(mangoAccount.getHealthRatio().toNumber()),
+                  2
+                )
+              : 0.0}
+          </div>
+        </div>
+      </div>
+      <div className="mt-6">
+        <AccountActions />
+      </div>
+    </ContentBox>
+  )
+}
+
+export default MangoAccount
--- a/components/shared/ContentBox.tsx
+++ b/components/shared/ContentBox.tsx
@ -5,7 +5,11 @@ type ContentBoxProps = {

 const ContentBox = ({ children, className = '' }: ContentBoxProps) => {
  return (
-    <div className={`rounded-xl bg-th-bkg-2 p-8 ${className}`}>{children}</div>
+    <div
+      className={`rounded-xl border border-th-bkg-3 bg-th-bkg-2 p-8 ${className}`}
+    >
+      {children}
+    </div>
  )
 }

--- a/components/swap/LeverageSlider.tsx
+++ b/components/swap/LeverageSlider.tsx
@ -0,0 +1,43 @@
+import { ChangeEvent, ChangeEventHandler, useMemo } from 'react'
+import mangoStore from '../../store/state'
+import { formatDecimal } from '../../utils/numbers'
+
+type LeverageSliderProps = {
+  inputToken: string
+  onChange: (x: string) => void
+}
+
+const LeverageSlider = ({ inputToken, onChange }: LeverageSliderProps) => {
+  const mangoAccount = mangoStore((s) => s.mangoAccount)
+  const group = mangoStore((s) => s.group)
+
+  const leverageMax = useMemo(() => {
+    if (!mangoAccount || !group) return '100'
+
+    const bank = group.banksMap.get(inputToken)
+    if (!bank) return '100'
+
+    return formatDecimal(mangoAccount.getUi(bank))
+  }, [mangoAccount, inputToken, group])
+
+  const handleSliderChange = (e: ChangeEvent<HTMLInputElement>) => {
+    onChange(e.target.value)
+  }
+
+  return (
+    <>
+      <label htmlFor="default-range" className="block text-sm"></label>
+      <input
+        id="default-range"
+        type="range"
+        min="0"
+        max={leverageMax}
+        step={0.0001}
+        className="mb-6 h-1 w-full cursor-pointer appearance-none rounded-lg bg-th-bkg-4 hover:bg-gradient-to-r hover:from-gradient-start hover:via-gradient-mid hover:to-gradient-end"
+        onChange={handleSliderChange}
+      ></input>
+    </>
+  )
+}
+
+export default LeverageSlider
--- a/components/swap/SelectedRoute.tsx
+++ b/components/swap/SelectedRoute.tsx
@ -15,48 +15,50 @@ const SelectedRoute = ({
  const tokens = mangoStore((s) => s.jupiterTokens)

  return (
-    <div className="relative rounded-md border border-th-bkg-4 px-3 pb-4 pt-4 hover:cursor-pointer hover:border-th-fgd-4">
-      {selectedRoute === routes[0] ? (
-        <div className="absolute -top-2 rounded-sm bg-th-primary px-1 text-xs font-bold text-th-bkg-1">
-          Best Swap
-        </div>
-      ) : null}
-      <div className="flex items-center justify-between">
-        <div>
-          <span className="overflow-ellipsis whitespace-nowrap text-sm font-bold text-th-fgd-1">
-            {selectedRoute?.marketInfos.map((info, index) => {
-              let includeSeparator = false
-              if (
-                selectedRoute?.marketInfos.length > 1 &&
-                index !== selectedRoute?.marketInfos.length - 1
-              ) {
-                includeSeparator = true
-              }
-              return (
-                <span key={index}>{`${info.amm.label} ${
-                  includeSeparator ? 'x ' : ''
-                }`}</span>
-              )
-            })}
-          </span>
-          <div className="mr-2 mt-0.5 text-xs font-normal text-th-fgd-3">
-            {inputTokenSymbol} →{' '}
-            {selectedRoute?.marketInfos.map((r, index) => {
-              const showArrow =
-                index !== selectedRoute?.marketInfos.length - 1 ? true : false
-              return (
-                <span key={index}>
-                  <span>
-                    {
-                      tokens.find(
-                        (item) => item?.address === r?.outputMint?.toString()
-                      )?.symbol
-                    }
+    <div className="rounded-md p-px hover:bg-gradient-to-tl hover:from-gradient-start hover:via-gradient-mid hover:to-gradient-end">
+      <div className="relative rounded-md border border-th-bkg-4 bg-th-bkg-3 px-3 pb-4 pt-4 hover:cursor-pointer">
+        {selectedRoute === routes[0] ? (
+          <div className="absolute -top-2 rounded-sm bg-th-primary px-1 text-xs font-bold text-th-bkg-1">
+            Best Swap
+          </div>
+        ) : null}
+        <div className="flex items-center justify-between">
+          <div>
+            <span className="overflow-ellipsis whitespace-nowrap text-sm font-bold text-th-fgd-1">
+              {selectedRoute?.marketInfos.map((info, index) => {
+                let includeSeparator = false
+                if (
+                  selectedRoute?.marketInfos.length > 1 &&
+                  index !== selectedRoute?.marketInfos.length - 1
+                ) {
+                  includeSeparator = true
+                }
+                return (
+                  <span key={index}>{`${info.amm.label} ${
+                    includeSeparator ? 'x ' : ''
+                  }`}</span>
+                )
+              })}
+            </span>
+            <div className="mr-2 mt-0.5 text-xs font-normal text-th-fgd-3">
+              {inputTokenSymbol} →{' '}
+              {selectedRoute?.marketInfos.map((r, index) => {
+                const showArrow =
+                  index !== selectedRoute?.marketInfos.length - 1 ? true : false
+                return (
+                  <span key={index}>
+                    <span>
+                      {
+                        tokens.find(
+                          (item) => item?.address === r?.outputMint?.toString()
+                        )?.symbol
+                      }
+                    </span>
+                    {showArrow ? ' → ' : ''}
                  </span>
-                  {showArrow ? ' → ' : ''}
-                </span>
-              )
-            })}
+                )
+              })}
+            </div>
          </div>
        </div>
      </div>
--- a/components/swap/Swap.tsx
+++ b/components/swap/Swap.tsx
@ -1,6 +1,6 @@
-import { useState, ChangeEvent } from 'react'
+import { useState, ChangeEvent, useCallback } from 'react'
 import { TransactionInstruction } from '@solana/web3.js'
-import { ArrowDownIcon, SwitchVerticalIcon } from '@heroicons/react/solid'
+import { ArrowDownIcon } from '@heroicons/react/solid'

 import mangoStore from '../../store/state'
 import ContentBox from '../shared/ContentBox'
@ -9,6 +9,7 @@ import JupiterRoutes from './JupiterRoutes'
 import TokenSelect from '../TokenSelect'
 import useDebounce from '../shared/useDebounce'
 import { numberFormat } from '../../utils/numbers'
+import LeverageSlider from './LeverageSlider'

 const Swap = () => {
  const [amountIn, setAmountIn] = useState('')
@ -17,13 +18,16 @@ const Swap = () => {
  const [outputToken, setOutputToken] = useState('USDC')
  const [submitting, setSubmitting] = useState(false)
  const [slippage, setSlippage] = useState(0.1)
-  const debouncedAmountIn = useDebounce(amountIn, 300)
+  const debouncedAmountIn = useDebounce(amountIn, 400)
  const set = mangoStore.getState().set
  const tokens = mangoStore((s) => s.jupiterTokens)

-  const handleAmountInChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setAmountIn(e.target.value)
-  }
+  const handleAmountInChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      setAmountIn(e.target.value)
+    },
+    []
+  )

  const handleTokenInSelect = (symbol: string) => {
    const inputTokenInfo = tokens.find((t: any) => t.symbol === symbol)
@ -111,15 +115,10 @@ const Swap = () => {
            </div>
          </div>
          <div className="mb-1">
-            <label
-              htmlFor="default-range"
-              className="block text-sm font-medium text-gray-900 dark:text-gray-300"
-            ></label>
-            <input
-              id="default-range"
-              type="range"
-              className="mb-6 h-1 w-full cursor-pointer appearance-none rounded-lg bg-th-bkg-3"
-            ></input>
+            <LeverageSlider
+              inputToken={inputToken}
+              onChange={(x) => setAmountIn(x)}
+            />
          </div>
        </div>
        <div className="-my-5 flex justify-center">
--- a/next.config.js
+++ b/next.config.js
@ -3,12 +3,9 @@ const nextConfig = {
  env: {
    BROWSER: true,
  },
-  images: {
-    domains: ['raw.githubusercontent.com'],
-  },
  reactStrictMode: true,
-  webpack: (config, { isServer }) => {
-    if (!isServer) {
+  webpack: (config, opts) => {
+    if (!opts.isServer) {
      // don't resolve 'fs' module on the client to prevent this error on build --> Error: Can't resolve 'fs'
      config.resolve.fallback = {
        fs: false,
@ -16,12 +13,11 @@ const nextConfig = {
        path: false,
        process: false,
        util: false,
-        assert: false,
+        assert: require.resolve('assert'),
        stream: false,
        http: false,
        https: false,
        querystring: false,
-        events: false,
      }
    }

--- a/package.json
+++ b/package.json
@ -14,21 +14,23 @@
    "@headlessui/react": "^1.5.0",
    "@heroicons/react": "^1.0.6",
    "@jup-ag/core": "^1.0.0-beta.27",
-    "@project-serum/anchor": "0.24.2",
+    "@project-serum/anchor": "^0.24.2",
    "@solana/wallet-adapter-base": "^0.9.5",
    "@solana/wallet-adapter-react": "^0.15.4",
    "@solana/wallet-adapter-react-ui": "^0.9.6",
    "@solana/wallet-adapter-wallets": "^0.16.0",
    "@tailwindcss/forms": "^0.5.0",
+    "assert": "^2.0.0",
    "dayjs": "^1.11.3",
    "immer": "^9.0.12",
    "lodash.debounce": "^4.0.8",
-    "next": "12.1.5",
+    "next": "12.2.2",
    "next-themes": "^0.1.1",
    "process": "^0.11.10",
    "react": "18.0.0",
    "react-cool-dimensions": "^2.0.7",
    "react-dom": "18.0.0",
+    "react-window": "^1.8.7",
    "recharts": "^2.1.12",
    "zustand": "^3.7.2"
  },
--- a/store/state.ts
+++ b/store/state.ts
@ -30,12 +30,17 @@ export const connection = new web3.Connection(
 const options = AnchorProvider.defaultOptions()
 export const CLUSTER = 'mainnet-beta'
 export const CLIENT_TX_TIMEOUT = 90000
-const provider = new AnchorProvider(
+const DEFAULT_PROVIDER = new AnchorProvider(
  connection,
  new EmptyWallet(Keypair.generate()),
  options
 )
-provider.opts.skipPreflight = true
+DEFAULT_PROVIDER.opts.skipPreflight = true
+const DEFAULT_CLIENT = MangoClient.connect(
+  DEFAULT_PROVIDER,
+  CLUSTER,
+  MANGO_V4_ID[CLUSTER]
+)

 export type MangoStore = {
  connected: boolean
@ -69,7 +74,7 @@ const mangoStore = create<MangoStore>(
      connected: false,
      connection,
      group: undefined,
-      client: MangoClient.connect(provider, CLUSTER, MANGO_V4_ID[CLUSTER]),
+      client: DEFAULT_CLIENT,
      inputTokenInfo: undefined,
      jupiterTokens: [],
      mangoAccount: undefined,
@ -129,12 +134,14 @@ const mangoStore = create<MangoStore>(
            //   'BTC/USDC'
            // )

+            await mangoAccount.reloadAccountData(client, group)
            set((state) => {
              state.client = client
              state.mangoAccount = mangoAccount
              state.connected = true
              // state.serumOrders = orders
            })
+            console.log('mango', mangoAccount)
          } catch (e) {
            console.error('Error fetching mango acct', e)
          }
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -17,6 +17,9 @@ module.exports = {
        help: 'help',
      },
      colors: {
+        'gradient-start': '#AFD803',
+        'gradient-mid': '#F2C94C',
+        'gradient-end': '#E54033',
        'light-theme': {
          orange: {
            DEFAULT: '#FF9C24',
--- a/yarn.lock
+++ b/yarn.lock
@ -26,7 +26,7 @@

 "@blockworks-foundation/mango-v4@git+https://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:x-oauth-basic@github.com/blockworks-foundation/mango-v4.git":
  version "0.0.1"
-  resolved "git+https://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:x-oauth-basic@github.com/blockworks-foundation/mango-v4.git#c829fdf59d4aaf75733278d5c209acc42b02fcb4"
+  resolved "git+https://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:x-oauth-basic@github.com/blockworks-foundation/mango-v4.git#86a84396f51d101ec49fc52bcf3325c70380832c"
  dependencies:
    "@project-serum/anchor" "^0.24.2"
    "@project-serum/serum" "^0.13.65"
@ -281,10 +281,10 @@
  resolved "https://registry.yarnpkg.com/@mercurial-finance/optimist/-/optimist-0.1.4.tgz#3ed5155fe94d5df0f86d2f47a3506460109eed4a"
  integrity sha512-m8QuyPx9j7fGd2grw0mD5WcYtBb8l7+OQI5aHdeIlxPg3QoPrbSdCHyFOuipYbvB0EY5YDbOmyeFwiTcBkBBSw==

-"@next/env@12.1.5":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-12.1.5.tgz#a21ba6708022d630402ca2b340316e69a0296dfc"
-  integrity sha512-+34yUJslfJi7Lyx6ELuN8nWcOzi27izfYnZIC1Dqv7kmmfiBVxgzR3BXhlvEMTKC2IRJhXVs2FkMY+buQe3k7Q==
+"@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/eslint-plugin-next@12.1.5":
  version "12.1.5"
@ -293,65 +293,70 @@
  dependencies:
    glob "7.1.7"

-"@next/swc-android-arm-eabi@12.1.5":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.1.5.tgz#36729ab3dfd7743e82cfe536b43254dcb146620c"
-  integrity sha512-SKnGTdYcoN04Y2DvE0/Y7/MjkA+ltsmbuH/y/hR7Ob7tsj+8ZdOYuk+YvW1B8dY20nDPHP58XgDTSm2nA8BzzA==
+"@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-arm64@12.1.5":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-12.1.5.tgz#52578f552305c92d0b9b81d603c9643fb71e0835"
-  integrity sha512-YXiqgQ/9Rxg1dXp6brXbeQM1JDx9SwUY/36JiE+36FXqYEmDYbxld9qkX6GEzkc5rbwJ+RCitargnzEtwGW0mw==
+"@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-darwin-arm64@12.1.5":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.1.5.tgz#3d5b53211484c72074f4975ba0ec2b1107db300e"
-  integrity sha512-y8mhldb/WFZ6lFeowkGfi0cO/lBdiBqDk4T4LZLvCpoQp4Or/NzUN6P5NzBQZ5/b4oUHM/wQICEM+1wKA4qIVw==
+"@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-x64@12.1.5":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-12.1.5.tgz#adcabb732d226453777c0d37d58eaff9328b66fd"
-  integrity sha512-wqJ3X7WQdTwSGi0kIDEmzw34QHISRIQ5uvC+VXmsIlCPFcMA+zM5723uh8NfuKGquDMiEMS31a83QgkuHMYbwQ==
+"@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-linux-arm-gnueabihf@12.1.5":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.1.5.tgz#82a7cde67482b756bc65fbebf1dfa8a782074e93"
-  integrity sha512-WnhdM5duONMvt2CncAl+9pim0wBxDS2lHoo7ub/o/i1bRbs11UTzosKzEXVaTDCUkCX2c32lIDi1WcN2ZPkcdw==
+"@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-linux-arm64-gnu@12.1.5":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.1.5.tgz#f82ca014504950aab751e81f467492e9be0bad5d"
-  integrity sha512-Jq2H68yQ4bLUhR/XQnbw3LDW0GMQn355qx6rU36BthDLeGue7YV7MqNPa8GKvrpPocEMW77nWx/1yI6w6J07gw==
+"@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-arm64-musl@12.1.5":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.1.5.tgz#f811ec9f4b12a978426c284c95ab2f515ddf7f9e"
-  integrity sha512-KgPjwdbhDqXI7ghNN8V/WAiLquc9Ebe8KBrNNEL0NQr+yd9CyKJ6KqjayVkmX+hbHzbyvbui/5wh/p3CZQ9xcQ==
+"@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-x64-gnu@12.1.5":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.1.5.tgz#d44857257e6d20dc841998951d584ab1f25772c3"
-  integrity sha512-O2ErUTvCJ6DkNTSr9pbu1n3tcqykqE/ebty1rwClzIYdOgpB3T2MfEPP+K7GhUR87wmN/hlihO9ch7qpVFDGKw==
+"@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-x64-musl@12.1.5":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.1.5.tgz#3cc523abadc9a2a6de680593aff06e71cc29ecef"
-  integrity sha512-1eIlZmlO/VRjxxzUBcVosf54AFU3ltAzHi+BJA+9U/lPxCYIsT+R4uO3QksRzRjKWhVQMRjEnlXyyq5SKJm7BA==
+"@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-win32-arm64-msvc@12.1.5":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.1.5.tgz#c62232d869f1f9b22e8f24e4e7f05307c20f30ca"
-  integrity sha512-oromsfokbEuVb0CBLLE7R9qX3KGXucZpsojLpzUh1QJjuy1QkrPJncwr8xmWQnwgtQ6ecMWXgXPB+qtvizT9Tw==
+"@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-win32-ia32-msvc@12.1.5":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.1.5.tgz#2bd9b28a9ba730d12a493e7d9d18e150fe89d496"
-  integrity sha512-a/51L5KzBpeZSW9LbekMo3I3Cwul+V+QKwbEIMA+Qwb2qrlcn1L9h3lt8cHqNTFt2y72ce6aTwDTw1lyi5oIRA==
+"@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-x64-msvc@12.1.5":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.1.5.tgz#02f377e4d41eaaacf265e34bab9bacd8efc4a351"
-  integrity sha512-/SoXW1Ntpmpw3AXAzfDRaQidnd8kbZ2oSni8u5z0yw6t4RwJvmdZy1eOaAADRThWKV+2oU90++LSnXJIwBRWYQ==
+"@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-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==

 "@nodelib/fs.scandir@2.1.5":
  version "2.1.5"
@ -411,26 +416,6 @@
    snake-case "^3.0.4"
    toml "^3.0.0"

-"@project-serum/anchor@0.24.2", "@project-serum/anchor@^0.24.2":
-  version "0.24.2"
-  resolved "https://registry.yarnpkg.com/@project-serum/anchor/-/anchor-0.24.2.tgz#a3c52a99605c80735f446ca9b3a4885034731004"
-  integrity sha512-0/718g8/DnEuwAidUwh5wLYphUYXhUbiClkuRNhvNoa+1Y8a4g2tJyxoae+emV+PG/Gikd/QUBNMkIcimiIRTA==
-  dependencies:
-    "@project-serum/borsh" "^0.2.5"
-    "@solana/web3.js" "^1.36.0"
-    base64-js "^1.5.1"
-    bn.js "^5.1.2"
-    bs58 "^4.0.1"
-    buffer-layout "^1.2.2"
-    camelcase "^5.3.1"
-    cross-fetch "^3.1.5"
-    crypto-hash "^1.3.0"
-    eventemitter3 "^4.0.7"
-    js-sha256 "^0.9.0"
-    pako "^2.0.3"
-    snake-case "^3.0.4"
-    toml "^3.0.0"
-
 "@project-serum/anchor@^0.11.1":
  version "0.11.1"
  resolved "https://registry.yarnpkg.com/@project-serum/anchor/-/anchor-0.11.1.tgz#155bff2c70652eafdcfd5559c81a83bb19cec9ff"
@ -492,6 +477,26 @@
    snake-case "^3.0.4"
    toml "^3.0.0"

+"@project-serum/anchor@^0.24.2":
+  version "0.24.2"
+  resolved "https://registry.yarnpkg.com/@project-serum/anchor/-/anchor-0.24.2.tgz#a3c52a99605c80735f446ca9b3a4885034731004"
+  integrity sha512-0/718g8/DnEuwAidUwh5wLYphUYXhUbiClkuRNhvNoa+1Y8a4g2tJyxoae+emV+PG/Gikd/QUBNMkIcimiIRTA==
+  dependencies:
+    "@project-serum/borsh" "^0.2.5"
+    "@solana/web3.js" "^1.36.0"
+    base64-js "^1.5.1"
+    bn.js "^5.1.2"
+    bs58 "^4.0.1"
+    buffer-layout "^1.2.2"
+    camelcase "^5.3.1"
+    cross-fetch "^3.1.5"
+    crypto-hash "^1.3.0"
+    eventemitter3 "^4.0.7"
+    js-sha256 "^0.9.0"
+    pako "^2.0.3"
+    snake-case "^3.0.4"
+    toml "^3.0.0"
+
 "@project-serum/borsh@^0.2.2", "@project-serum/borsh@^0.2.5":
  version "0.2.5"
  resolved "https://registry.yarnpkg.com/@project-serum/borsh/-/borsh-0.2.5.tgz#6059287aa624ecebbfc0edd35e4c28ff987d8663"
@ -969,6 +974,13 @@
    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==
+  dependencies:
+    tslib "^2.4.0"
+
 "@tailwindcss/forms@^0.5.0":
  version "0.5.0"
  resolved "https://registry.yarnpkg.com/@tailwindcss/forms/-/forms-0.5.0.tgz#d4bea2560a10aac642573e72d3b4d62a88960449"
@ -1454,7 +1466,12 @@ big.js@^5.2.2:
  resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
  integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==

-big.js@^6.1.1, big.js@^6.2.0:
+big.js@^6.1.1:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/big.js/-/big.js-6.2.1.tgz#7205ce763efb17c2e41f26f121c420c6a7c2744f"
+  integrity sha512-bCtHMwL9LeDIozFn+oNhhFoq+yQ3BNdnsLSASUxLciOb1vgvpHsIO1dsENiGMgbb4SkP5TrzWzRiLddn8ahVOQ==
+
+big.js@^6.2.0:
  version "6.2.0"
  resolved "https://registry.yarnpkg.com/big.js/-/big.js-6.2.0.tgz#39c60822aecb0f34a1d79a90fe9908a0ddf45e1d"
  integrity sha512-paIKvJiAaOYdLt6MfnvxkDo64lTOV257XYJyX3oJnJQocIclUn+48k6ZerH/c5FxWE6DGJu1TKDYis7tqHg9kg==
@ -1662,11 +1679,16 @@ camelcase@^5.3.1:
  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==

-caniuse-lite@^1.0.30001283, caniuse-lite@^1.0.30001317:
+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==
+
 chalk@^4.0.0:
  version "4.1.2"
  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
@ -3331,28 +3353,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.1.5:
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/next/-/next-12.1.5.tgz#7a07687579ddce61ee519493e1c178d83abac063"
-  integrity sha512-YGHDpyfgCfnT5GZObsKepmRnne7Kzp7nGrac07dikhutWQug7hHg85/+sPJ4ZW5Q2pDkb+n0FnmLkmd44htIJQ==
+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==
  dependencies:
-    "@next/env" "12.1.5"
-    caniuse-lite "^1.0.30001283"
+    "@next/env" "12.2.2"
+    "@swc/helpers" "0.4.2"
+    caniuse-lite "^1.0.30001332"
    postcss "8.4.5"
-    styled-jsx "5.0.1"
+    styled-jsx "5.0.2"
+    use-sync-external-store "1.1.0"
  optionalDependencies:
-    "@next/swc-android-arm-eabi" "12.1.5"
-    "@next/swc-android-arm64" "12.1.5"
-    "@next/swc-darwin-arm64" "12.1.5"
-    "@next/swc-darwin-x64" "12.1.5"
-    "@next/swc-linux-arm-gnueabihf" "12.1.5"
-    "@next/swc-linux-arm64-gnu" "12.1.5"
-    "@next/swc-linux-arm64-musl" "12.1.5"
-    "@next/swc-linux-x64-gnu" "12.1.5"
-    "@next/swc-linux-x64-musl" "12.1.5"
-    "@next/swc-win32-arm64-msvc" "12.1.5"
-    "@next/swc-win32-ia32-msvc" "12.1.5"
-    "@next/swc-win32-x64-msvc" "12.1.5"
+    "@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"

 no-case@^3.0.4:
  version "3.0.4"
@ -3799,10 +3824,10 @@ react-transition-group@2.9.0:
    prop-types "^15.6.2"
    react-lifecycles-compat "^3.0.4"

-react-window@1.8.6:
-  version "1.8.6"
-  resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.6.tgz#d011950ac643a994118632665aad0c6382e2a112"
-  integrity sha512-8VwEEYyjz6DCnGBsd+MgkD0KJ2/OXFULyDtorIiTz+QzwoP94tBoA7CnbtyXMm+cCeAUER5KJcPtWl9cpKbOBg==
+react-window@^1.8.7:
+  version "1.8.7"
+  resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.7.tgz#5e9fd0d23f48f432d7022cdb327219353a15f0d4"
+  integrity sha512-JHEZbPXBpKMmoNO1bNhoXOOLg/ujhL/BU4IqVU9r8eQPcy5KQnGHIHDRkJ0ns9IM5+Aq5LNwt3j8t3tIrePQzA==
  dependencies:
    "@babel/runtime" "^7.0.0"
    memoize-one ">=3.1.1 <6"
@ -4178,10 +4203,10 @@ strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
  integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==

-styled-jsx@5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.1.tgz#78fecbbad2bf95ce6cd981a08918ce4696f5fc80"
-  integrity sha512-+PIZ/6Uk40mphiQJJI1202b+/dYeTVd9ZnMPR80pgiWbjIwvN2zIp4r9et0BgqBuShh48I0gttPlAXA7WVvBxw==
+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==

 superstruct@^0.14.2:
  version "0.14.2"
@ -4353,6 +4378,11 @@ 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==
+
 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"