rough layout

2023-09-14 23:18:39 +10:00 · 2023-09-14 23:18:39 +10:00 · b16b08e9f5
parent a9b3a2594c
commit b16b08e9f5
14 changed files with 205 additions and 215 deletions
--- a/components/AccountStats.tsx
+++ b/components/AccountStats.tsx
@ -1,48 +1,47 @@
-import useMangoGroup from 'hooks/useMangoGroup'
-import { useMemo } from 'react'
-import FormatNumericValue from './shared/FormatNumericValue'
-import useMangoAccount from 'hooks/useMangoAccount'
+// import useMangoGroup from 'hooks/useMangoGroup'
+// import { useMemo } from 'react'
+// import FormatNumericValue from './shared/FormatNumericValue'
+// import useMangoAccount from 'hooks/useMangoAccount'

 const AccountStats = ({ token }: { token: string }) => {
-  const { mangoAccount } = useMangoAccount()
-  const { group } = useMangoGroup()
+  // const { mangoAccount } = useMangoAccount()
+  // const { group } = useMangoGroup()

-  const bank = useMemo(() => {
-    if (!group) return undefined
-    return group.banksMapByName.get(token)?.[0]
-  }, [group, token])
+  // const bank = useMemo(() => {
+  //   if (!group) return undefined
+  //   return group.banksMapByName.get(token)?.[0]
+  // }, [group, token])

-  const position = bank ? mangoAccount?.getTokenBalanceUi(bank) || 0.0 : 0.0
+  // const position = bank ? mangoAccount?.getTokenBalanceUi(bank) || 0.0 : 0.0

  return (
-    <div className="my-8 ml-4 mr-8">
-      <div className="grid grid-cols-2 gap-8">
+    <>
+      <h2 className="mb-4 text-2xl">{`Boosted ${token}`}</h2>
+      <div className="grid grid-cols-1 gap-6">
        <div>
-          <div>Est. {token} APR</div>
-          <div className="text-2xl font-bold">14.89%</div>
+          <p className="mb-1">Est. APR</p>
+          <span className="text-2xl font-bold">14.89%</span>
        </div>
        <div>
-          <div>Max Leverage</div>
-          <div className="text-2xl font-bold">3x</div>
+          <p className="mb-1">Max Leverage</p>
+          <span className="text-2xl font-bold">3x</span>
        </div>
        <div>
-          <div>Available to borrow</div>
-          <div className="text-2xl font-bold">100,000</div>
+          <p className="mb-1">Capacity Remaining</p>
+          <span className="text-2xl font-bold">100,000 SOL</span>
        </div>
        <div>
+          <p className="mb-1">Total Staked</p>
+          <span className="text-2xl font-bold">{`100,000 ${token}`}</span>
+        </div>
+        {/* <div>
          <div>Your position</div>
          <div className="text-2xl font-bold">
            {bank ? <FormatNumericValue value={position} decimals={6} /> : 0.0}
          </div>
-        </div>
-        <div>
-          <div>Title Here</div>
-        </div>
-        <div>
-          <div>Title Here</div>
-        </div>
+        </div> */}
      </div>
-    </div>
+    </>
  )
 }

--- a/components/StakeForm.tsx
+++ b/components/StakeForm.tsx
@ -23,7 +23,7 @@ import { floorToDecimal, withValueLimit } from 'utils/numbers'
 import BankAmountWithValue from './shared/BankAmountWithValue'
 // import useBanksWithBalances from 'hooks/useBanksWithBalances'
 import { isMangoError } from 'types'
-import TokenListButton from './shared/TokenListButton'
+// import TokenListButton from './shared/TokenListButton'
 import TokenLogo from './shared/TokenLogo'
 import SecondaryConnectButton from './shared/SecondaryConnectButton'
 import useMangoAccountAccounts from 'hooks/useMangoAccountAccounts'
@ -94,7 +94,8 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
  const { group } = useMangoGroup()

  const stakeBank = useMemo(() => {
-    return group?.banksMapByName.get(selectedToken)?.[0]
+    const bankName = selectedToken === 'mSOL' ? 'MSOL' : selectedToken
+    return group?.banksMapByName.get(bankName)?.[0]
  }, [selectedToken, group])

  const solBank = useMemo(() => {
@ -236,8 +237,8 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
        /> */}
      </EnterBottomExitBottom>
      <FadeInFadeOut show={!showTokenList}>
-        <div className="m-6 flex flex-col justify-between">
-          <div>
+        <div className="flex flex-col justify-between">
+          <div className="pb-8">
            <SolBalanceWarnings
              amount={inputAmount}
              className="mb-4"
@ -246,7 +247,7 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
            />
            <div className="grid grid-cols-2">
              <div className="col-span-2 flex justify-between">
-                <Label text={`Stake Token`} />
+                <Label text="Amount" />
                <div className="mb-2 flex items-center space-x-2">
                  <MaxAmountButton
                    decimals={tokenMax.maxDecimals}
@ -265,38 +266,49 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
                  </Tooltip>
                </div>
              </div>
-              <div className="col-span-1">
+              {/* <div className="col-span-1">
                <TokenListButton
                  token={selectedToken}
                  logo={<TokenLogo bank={stakeBank} />}
                  setShowList={setShowTokenList}
                />
-              </div>
-              <div className="col-span-1">
-                <NumberFormat
-                  name="amountIn"
-                  id="amountIn"
-                  inputMode="decimal"
-                  thousandSeparator=","
-                  allowNegative={false}
-                  isNumericString={true}
-                  decimalScale={6}
-                  className={
-                    'w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl text-th-fgd-1 focus:outline-none focus-visible:border-th-fgd-4 md:hover:border-th-input-border-hover md:hover:focus-visible:border-th-fgd-4'
-                  }
-                  placeholder="0.00"
-                  value={inputAmount}
-                  onValueChange={(e: NumberFormatValues) => {
-                    setInputAmount(
-                      !Number.isNaN(Number(e.value)) ? e.value : '',
-                    )
-                  }}
-                  isAllowed={withValueLimit}
-                />
+              </div> */}
+              <div className="col-span-2">
+                <div className="relative">
+                  <NumberFormat
+                    name="amountIn"
+                    id="amountIn"
+                    inputMode="decimal"
+                    thousandSeparator=","
+                    allowNegative={false}
+                    isNumericString={true}
+                    decimalScale={6}
+                    className="w-full rounded-xl border border-th-input-border bg-th-input-bkg p-3 pl-12 pr-4 text-left font-mono text-xl text-th-fgd-1 focus:outline-none focus-visible:border-th-fgd-4 md:hover:border-th-input-border-hover md:hover:focus-visible:border-th-fgd-4"
+                    placeholder="0.00"
+                    value={inputAmount}
+                    onValueChange={(e: NumberFormatValues) => {
+                      setInputAmount(
+                        !Number.isNaN(Number(e.value)) ? e.value : '',
+                      )
+                    }}
+                    isAllowed={withValueLimit}
+                  />
+                  <div className="absolute left-4 top-1/2 -translate-y-1/2">
+                    <TokenLogo bank={stakeBank} size={24} />
+                  </div>
+                  <div className="absolute right-4 top-1/2 -translate-y-1/2">
+                    <span className="font-bold text-th-fgd-1">
+                      {selectedToken}
+                    </span>
+                  </div>
+                </div>
              </div>
            </div>
-            <div className="mt-3">
-              <div>Leverage: {leverage}x</div>
+            <div className="mt-4">
+              <div className="flex items-center justify-between">
+                <Label text="Leverage" />
+                <p className="font-bold text-th-fgd-1">{leverage}x</p>
+              </div>
              <LeverageSlider
                amount={leverage}
                leverageMax={3}
@ -306,7 +318,7 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
            </div>
            {stakeBank && solBank ? (
              <>
-                <div className="mt-2 space-y-1.5 px-2 py-4 text-sm">
+                <div className="mt-2 space-y-1.5 px-2 py-4">
                  <div className="flex justify-between">
                    <p>{t('deposit-amount')}</p>
                    <BankAmountWithValue
@ -315,19 +327,21 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
                    />
                  </div>
                  <div className="flex justify-between">
-                    <p>SOL borrowed</p>
+                    <p>SOL Borrowed</p>
                    {solBank ? (
-                      <FormatNumericValue
-                        value={solAmountToBorrow}
-                        decimals={3}
-                      />
+                      <span className="text-th-fgd-1">
+                        <FormatNumericValue
+                          value={solAmountToBorrow}
+                          decimals={3}
+                        />
+                      </span>
                    ) : null}
                  </div>
                </div>
-                <div className="space-y-1.5 border-t border-th-bkg-3 px-2 py-4 text-sm ">
+                <div className="space-y-1.5 border-t border-th-bkg-3 px-2 pt-4">
                  <div className="flex justify-between">
                    <p>{selectedToken} Leveraged APR</p>
-                    <span>
+                    <span className="text-th-fgd-1">
                      <FormatNumericValue
                        value={7.28 * leverage}
                        decimals={2}
@ -337,7 +351,7 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
                  </div>
                  <div className="flex justify-between">
                    <p>{selectedToken} Deposit Rate</p>
-                    <span>
+                    <span className="text-th-fgd-1">
                      <FormatNumericValue
                        value={stakeBank.getDepositRateUi()}
                        decimals={2}
@ -347,7 +361,7 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
                  </div>
                  <div className="flex justify-between">
                    <p>SOL Borrow Rate</p>
-                    <span>
+                    <span className="text-th-fgd-1">
                      <FormatNumericValue
                        value={solBank.getDepositRateUi()}
                        decimals={2}
--- a/components/TokenButton.tsx
+++ b/components/TokenButton.tsx
@ -10,18 +10,23 @@ const TokenButton = ({
  handleTokenSelect: (v: string) => void
 }) => {
  return (
-    <button onClick={() => handleTokenSelect(tokenName)}>
-      <div
-        className={`h-16 w-16 rounded-full border  bg-th-bkg-1 p-4 hover:cursor-pointer hover:border-2 hover:border-orange-400 ${
-          selectedToken === tokenName ? 'border-black' : ''
-        }`}
-      >
+    <button
+      className={`col-span-1 flex items-center justify-center border-r border-th-fgd-1 p-4  first:rounded-tl-2xl last:rounded-tr-2xl last:border-transparent hover:cursor-pointer ${
+        selectedToken === tokenName ? 'bg-th-bkg-2' : ''
+      }`}
+      onClick={() => handleTokenSelect(tokenName)}
+    >
+      <div className="flex flex-col items-center">
        <Image
          src={`/icons/${tokenName.toLowerCase()}.svg`}
-          width={100}
-          height={100}
+          width={40}
+          height={40}
          alt="Select a token"
        />
+        <span className="mt-2 text-lg font-bold text-th-fgd-1">
+          {tokenName}
+        </span>
+        <span>14.89%</span>
      </div>
    </button>
  )
--- a/components/UnstakeForm.tsx
+++ b/components/UnstakeForm.tsx
@ -23,7 +23,7 @@ import { floorToDecimal, withValueLimit } from 'utils/numbers'
 import BankAmountWithValue from './shared/BankAmountWithValue'
 // import useBanksWithBalances from 'hooks/useBanksWithBalances'
 import { isMangoError } from 'types'
-import TokenListButton from './shared/TokenListButton'
+// import TokenListButton from './shared/TokenListButton'
 import TokenLogo from './shared/TokenLogo'
 import SecondaryConnectButton from './shared/SecondaryConnectButton'
 import useMangoAccountAccounts from 'hooks/useMangoAccountAccounts'
@ -79,7 +79,8 @@ function UnstakeForm({ onSuccess, token: selectedToken }: UnstakeFormProps) {
  const { mangoAccount } = useMangoAccount()

  const stakeBank = useMemo(() => {
-    return group?.banksMapByName.get(selectedToken)?.[0]
+    const bankName = selectedToken === 'mSOL' ? 'MSOL' : selectedToken
+    return group?.banksMapByName.get(bankName)?.[0]
  }, [selectedToken, group])

  const solBank = useMemo(() => {
@ -203,8 +204,8 @@ function UnstakeForm({ onSuccess, token: selectedToken }: UnstakeFormProps) {
        /> */}
      </EnterBottomExitBottom>
      <FadeInFadeOut show={!showTokenList}>
-        <div className="m-6 flex flex-col justify-between">
-          <div>
+        <div className="flex flex-col justify-between">
+          <div className="pb-8">
            <SolBalanceWarnings
              amount={inputAmount}
              className="mb-4"
@ -213,7 +214,7 @@ function UnstakeForm({ onSuccess, token: selectedToken }: UnstakeFormProps) {
            />
            <div className="grid grid-cols-2">
              <div className="col-span-2 flex justify-between">
-                <Label text={`Stake Token`} />
+                <Label text="Amount" />
                <div className="mb-2 flex items-center space-x-2">
                  <MaxAmountButton
                    decimals={tokenMax.maxDecimals}
@ -232,41 +233,49 @@ function UnstakeForm({ onSuccess, token: selectedToken }: UnstakeFormProps) {
                  </Tooltip>
                </div>
              </div>
-              <div className="col-span-1">
+              {/* <div className="col-span-1">
                <TokenListButton
                  token={selectedToken}
                  logo={<TokenLogo bank={stakeBank} />}
                  setShowList={setShowTokenList}
                />
-              </div>
-              <div className="col-span-1">
-                <NumberFormat
-                  name="amountIn"
-                  id="amountIn"
-                  inputMode="decimal"
-                  thousandSeparator=","
-                  allowNegative={false}
-                  isNumericString={true}
-                  decimalScale={stakeBank?.mintDecimals || 6}
-                  className={
-                    'w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl text-th-fgd-1 focus:outline-none focus-visible:border-th-fgd-4 md:hover:border-th-input-border-hover md:hover:focus-visible:border-th-fgd-4'
-                  }
-                  placeholder="0.00"
-                  value={inputAmount}
-                  onValueChange={(e: NumberFormatValues) => {
-                    setInputAmount(
-                      !Number.isNaN(Number(e.value)) ? e.value : '',
-                    )
-                  }}
-                  isAllowed={withValueLimit}
-                />
+              </div> */}
+              <div className="col-span-2">
+                <div className="relative">
+                  <NumberFormat
+                    name="amountIn"
+                    id="amountIn"
+                    inputMode="decimal"
+                    thousandSeparator=","
+                    allowNegative={false}
+                    isNumericString={true}
+                    decimalScale={stakeBank?.mintDecimals || 6}
+                    className="w-full rounded-xl border border-th-input-border bg-th-input-bkg p-3 pl-12 pr-4 text-left font-mono text-xl text-th-fgd-1 focus:outline-none focus-visible:border-th-fgd-4 md:hover:border-th-input-border-hover md:hover:focus-visible:border-th-fgd-4"
+                    placeholder="0.00"
+                    value={inputAmount}
+                    onValueChange={(e: NumberFormatValues) => {
+                      setInputAmount(
+                        !Number.isNaN(Number(e.value)) ? e.value : '',
+                      )
+                    }}
+                    isAllowed={withValueLimit}
+                  />
+                  <div className="absolute left-4 top-1/2 -translate-y-1/2">
+                    <TokenLogo bank={stakeBank} size={24} />
+                  </div>
+                  <div className="absolute right-4 top-1/2 -translate-y-1/2">
+                    <span className="font-bold text-th-fgd-1">
+                      {selectedToken}
+                    </span>
+                  </div>
+                </div>
              </div>
            </div>
            {stakeBank && solBank ? (
              <>
-                <div className="mt-2 space-y-1.5 px-2 py-4 text-sm">
+                <div className="mt-2 space-y-1.5 px-2 pt-4">
                  <div className="flex justify-between">
-                    <p>Staked amount</p>
+                    <p>Staked Amount</p>
                    <BankAmountWithValue
                      amount={tokenMax.maxAmount}
                      bank={stakeBank}
@ -275,7 +284,9 @@ function UnstakeForm({ onSuccess, token: selectedToken }: UnstakeFormProps) {
                  <div className="flex justify-between">
                    <p>SOL borrowed</p>
                    {solBank ? (
-                      <FormatNumericValue value={solBorrowed} decimals={3} />
+                      <span className="text-th-fgd-1">
+                        <FormatNumericValue value={solBorrowed} decimals={3} />
+                      </span>
                    ) : null}
                  </div>
                </div>
--- a/components/forms/Label.tsx
+++ b/components/forms/Label.tsx
@ -7,7 +7,9 @@ const Label = ({
  optional?: boolean
  className?: string
 }) => (
-  <p className={`mb-2 text-left text-sm text-th-fgd-3 ${className}`}>
+  <p
+    className={`mb-2 text-left text-base font-bold text-th-fgd-2 ${className}`}
+  >
    {text}{' '}
    {optional ? (
      <span className="ml-1 text-xs text-th-fgd-4">(Optional)</span>
--- a/components/shared/BankAmountWithValue.tsx
+++ b/components/shared/BankAmountWithValue.tsx
@ -16,13 +16,13 @@ const BankAmountWithValue = ({
  value?: number
 }) => {
  return (
-    <p className={`font-mono text-th-fgd-2 ${stacked ? 'text-right' : ''}`}>
+    <p className={`font-mono text-th-fgd-1 ${stacked ? 'text-right' : ''}`}>
      <>
        <FormatNumericValue
          value={amount}
          decimals={amount && fixDecimals ? bank.mintDecimals : undefined}
        />{' '}
-        <span className={`text-th-fgd-4 ${stacked ? 'block' : ''}`}>
+        <span className={`text-th-fgd-3 ${stacked ? 'block' : ''}`}>
          <FormatNumericValue
            value={value ? value : Number(amount) * bank.uiPrice}
            decimals={fixDecimals ? 2 : undefined}
--- a/components/shared/Button.tsx
+++ b/components/shared/Button.tsx
@ -33,7 +33,7 @@ const Button: FunctionComponent<ButtonCombinedProps> = ({
    <button
      onClick={onClick}
      disabled={disabled}
-      className={`rounded-md ${
+      className={`rounded-xl ${
        themeData.buttonStyle === 'raised'
          ? 'raised-button'
          : secondary
@ -43,7 +43,7 @@ const Button: FunctionComponent<ButtonCombinedProps> = ({
        size === 'medium'
          ? 'h-10 px-4'
          : size === 'large'
-          ? 'h-12 px-6'
+          ? 'h-14 px-8'
          : 'h-8 px-3'
      } font-display ${
        theme === 'High Contrast' && !secondary
--- a/components/shared/MaxAmountButton.tsx
+++ b/components/shared/MaxAmountButton.tsx
@ -23,7 +23,7 @@ const MaxAmountButton = ({
      disabled={disabled}
      onClick={onClick}
    >
-      <p className="mr-1 text-th-fgd-4">{label}:</p>
+      <p className="mr-1 text-th-fgd-2">{label}:</p>
      <span className="font-mono">
        <FormatNumericValue value={value} decimals={decimals} />
      </span>
--- a/components/shared/TabUnderline.tsx
+++ b/components/shared/TabUnderline.tsx
@ -18,21 +18,9 @@ const TabUnderline = <T extends Values>({
  fillWidth = true,
 }: TabUnderlineProps<T>) => {
  return (
-    <div
-      className={`relative mb-3 border-b border-th-bkg-3 ${
-        values.includes('buy' as T) || values.includes('sell' as T)
-          ? 'pb-1 font-display md:pb-2.5'
-          : 'pb-1 font-bold'
-      } md:-mt-2.5`}
-    >
+    <div className={`relative mb-3 border-b border-th-bkg-3 pb-1 font-bold`}>
      <div
-        className={`absolute bottom-[-1px] left-0 h-0.5 ${
-          activeValue === 'buy'
-            ? 'bg-th-up'
-            : activeValue === 'sell'
-            ? 'bg-th-down'
-            : 'bg-th-active'
-        }`}
+        className={`absolute bottom-[-1px] left-0 h-1 bg-th-active`}
        style={{
          maxWidth: !fillWidth ? '176px' : '',
          transform: `translateX(${
@ -48,8 +36,8 @@ const TabUnderline = <T extends Values>({
            className={`relative flex h-10 w-1/2 ${
              fillWidth ? '' : 'max-w-[176px]'
            }
-            cursor-pointer items-center justify-center whitespace-nowrap rounded py-1 focus-visible:text-th-fgd-2 md:h-auto md:rounded-none md:hover:opacity-100 ${
-              small ? 'text-sm' : 'text-sm lg:text-base'
+            cursor-pointer items-center justify-center whitespace-nowrap rounded pb-2 focus-visible:text-th-fgd-2 md:h-auto md:rounded-none md:hover:opacity-100 ${
+              small ? 'text-sm' : 'text-lg lg:text-xl'
            }
            ${
              activeValue === value
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@ -132,7 +132,7 @@ function MyApp({ Component, pageProps }: AppProps) {
            autoConnect={autoConnect}
          >
            <MangoProvider />
-            <ThemeProvider storageKey={THEME_KEY}>
+            <ThemeProvider defaultTheme="Light" storageKey={THEME_KEY}>
              <PageTitle />
              <Layout>
                <Component {...pageProps} />
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@ -12,10 +12,10 @@ class MyDocument extends Document {
          ></Script>
        </Head>
        <body className="hide-scroll">
-          <div className="bg-[radial-gradient(ellipse_at_bottom,_var(--tw-gradient-stops))] from-lime-600 via-yellow-300 to-red-600">
-            <Main />
-            <NextScript />
-          </div>
+          {/* <div className="bg-[radial-gradient(ellipse_at_bottom,_var(--tw-gradient-stops))] from-lime-600 via-yellow-300 to-red-600"> */}
+          <Main />
+          <NextScript />
+          {/* </div> */}
        </body>
      </Html>
    )
--- a/pages/index.tsx
+++ b/pages/index.tsx
@ -7,9 +7,10 @@ import mangoStore from '@store/mangoStore'
 import type { NextPage } from 'next'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import { useCallback, useEffect, useState } from 'react'
-import { ACCOUNT_ACTION_MODAL_INNER_HEIGHT } from 'utils/constants'
 import { ACCOUNT_PREFIX } from 'utils/transactions'

+const STAKEABLE_TOKENS = ['mSOL', 'JitoSOL', 'stSOL', 'LDO']
+
 export async function getStaticProps({ locale }: { locale: string }) {
  return {
    props: {
@ -22,7 +23,8 @@ const set = mangoStore.getState().set

 const Index: NextPage = () => {
  const [activeTab, setActiveTab] = useState('Stake')
-  const [selectedToken, setSelectedToken] = useState('MSOL')
+  const [activeFormTab, setActiveFormTab] = useState('Add')
+  const [selectedToken, setSelectedToken] = useState(STAKEABLE_TOKENS[0])

  useEffect(() => {
    const mangoAccounts = mangoStore.getState().mangoAccounts
@ -45,68 +47,67 @@ const Index: NextPage = () => {
  }, [])

  return (
-    <div className="m-auto max-w-4xl flex-col">
+    <div className="mx-auto max-w-4xl flex-col pb-20">
      <div className="flex-col">
        {/* <div className="mb-4 text-center text-5xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl lg:text-6xl">
          LEVERAGE STAKE SOL
        </div> */}
-        <div className="mt-8 flex justify-center space-x-4">
-          <div className="flex-col">
+        <div className="mb-6 grid grid-cols-2 rounded-xl border border-th-fgd-1">
+          <button
+            className={`col-span-1 mx-auto w-full rounded-l-xl border-r border-th-fgd-1 py-4 font-bold ${
+              activeTab === 'Stake'
+                ? 'bg-th-bkg-2 text-th-fgd-1'
+                : 'text-th-fgd-3'
+            }`}
+            onClick={() => setActiveTab('Stake')}
+          >
+            Stake
+          </button>
+          <button
+            className={`col-span-1 mx-auto w-full rounded-r-xl py-4 font-bold ${
+              activeTab === 'Positions'
+                ? 'bg-th-bkg-2 text-th-fgd-1'
+                : 'text-th-fgd-3'
+            }`}
+            onClick={() => setActiveTab('Positions')}
+          >
+            Your Positions
+          </button>
+        </div>
+        {/* <h2 className="mb-4 text-xl">Tokens</h2> */}
+        <div className="grid grid-cols-4 rounded-t-2xl border border-b-0 border-th-fgd-1">
+          {STAKEABLE_TOKENS.map((token) => (
            <TokenButton
+              key={token}
              handleTokenSelect={handleTokenSelect}
              selectedToken={selectedToken}
-              tokenName="MSOL"
+              tokenName={token}
            />
-            <div className="text-center">mSOL</div>
-          </div>
-          <div className="flex-col">
-            <TokenButton
-              handleTokenSelect={handleTokenSelect}
-              selectedToken={selectedToken}
-              tokenName="JitoSOL"
-            />
-            <div className="text-center">JitoSOL</div>
-          </div>
-          <div className="flex-col">
-            <TokenButton
-              handleTokenSelect={handleTokenSelect}
-              selectedToken={selectedToken}
-              tokenName="stSOL"
-            />
-            <div className="text-center">stSOL</div>
-          </div>
-          <div className="flex-col">
-            <TokenButton
-              handleTokenSelect={handleTokenSelect}
-              selectedToken={selectedToken}
-              tokenName="LDO"
-            />
-            <div className="text-center">LDO</div>
-          </div>
+          ))}
        </div>
      </div>
-      <div className="mt-4 flex w-full max-w-4xl">
+      <div className="grid max-w-4xl grid-cols-12">
        <div
-          className={`min-h-[${ACCOUNT_ACTION_MODAL_INNER_HEIGHT}] relative z-20 rounded-xl border border-black bg-th-bkg-1 p-2 text-th-fgd-1`}
+          className={`col-span-7 rounded-bl-2xl border border-th-fgd-1 bg-th-bkg-1 text-th-fgd-1`}
        >
-          <div className={`relative h-[500px]`}>
-            <div className="m-6">
+          <div className={`p-8 pt-6`}>
+            <div className="pb-2">
              <TabUnderline
-                activeValue={activeTab}
-                values={['Stake', 'Unstake']}
-                onChange={(v) => setActiveTab(v)}
+                activeValue={activeFormTab}
+                values={['Add', 'Remove']}
+                onChange={(v) => setActiveFormTab(v)}
              />
            </div>
-            {activeTab === 'Stake' ? (
+            {activeFormTab === 'Add' ? (
              <StakeForm onSuccess={onClose} token={selectedToken} />
            ) : null}
-            {activeTab === 'Unstake' ? (
+            {activeFormTab === 'Remove' ? (
              <UnstakeForm onSuccess={onClose} token={selectedToken} />
            ) : null}
          </div>
        </div>
        <div
-          className={`min-h-[${ACCOUNT_ACTION_MODAL_INNER_HEIGHT}] relative z-10 -ml-4 rounded rounded-r-xl border-y border-r border-black bg-th-bkg-2 p-2 pl-8 text-th-fgd-1`}
+          className={`col-span-5 rounded-br-2xl border-y border-r border-th-fgd-1 bg-th-bkg-2 p-8 pt-6`}
        >
          <AccountStats token={selectedToken} />
        </div>
--- a/styles/globals.css
+++ b/styles/globals.css
@ -425,7 +425,7 @@ th {
 /* Base */

 body {
-  @apply font-body text-sm font-medium tracking-wider;
+  @apply font-body text-base font-medium leading-tight tracking-wider;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }
@ -470,11 +470,11 @@ h3 {
 }

 p {
-  @apply text-th-fgd-3;
+  @apply text-th-fgd-2;
 }

 li {
-  @apply text-sm text-th-fgd-3;
+  @apply text-base text-th-fgd-3;
 }

 a {
@ -518,7 +518,7 @@ input[type='text'] {
 /* Table */

 table p {
-  @apply font-mono text-sm text-th-fgd-2;
+  @apply font-mono text-base text-th-fgd-2;
 }

 /* Scrollbars */
--- a/yarn.lock
+++ b/yarn.lock
@ -5975,14 +5975,7 @@ is-callable@^1.1.3, is-callable@^1.1.4, is-callable@^1.2.7:
  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
  integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==

-is-core-module@^2.11.0, is-core-module@^2.9.0:
-  version "2.11.0"
-  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.11.0.tgz#ad4cb3e3863e814523c96f3f58d26cc570ff0144"
-  integrity sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==
-  dependencies:
-    has "^1.0.3"
-
-is-core-module@^2.13.0:
+is-core-module@^2.11.0, is-core-module@^2.13.0, is-core-module@^2.9.0:
  version "2.13.0"
  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.13.0.tgz#bb52aa6e2cbd49a30c2ba68c42bf3435ba6072db"
  integrity sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==
@ -7342,7 +7335,7 @@ postcss@8.4.14:
    picocolors "^1.0.0"
    source-map-js "^1.0.2"

-postcss@^8.1.7:
+postcss@^8.1.7, postcss@^8.4.23, postcss@^8.4.4:
  version "8.4.29"
  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.29.tgz#33bc121cf3b3688d4ddef50be869b2a54185a1dd"
  integrity sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw==
@ -7351,15 +7344,6 @@ postcss@^8.1.7:
    picocolors "^1.0.0"
    source-map-js "^1.0.2"

-postcss@^8.4.23, postcss@^8.4.4:
-  version "8.4.28"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.28.tgz#c6cc681ed00109072816e1557f889ef51cf950a5"
-  integrity sha512-Z7V5j0cq8oEKyejIKfpD8b4eBy9cwW2JWPk0+fB1HOAMsfHbnAXLLS+PfVWlzMSLQaWttKDt607I0XHmpE67Vw==
-  dependencies:
-    nanoid "^3.3.6"
-    picocolors "^1.0.0"
-    source-map-js "^1.0.2"
-
 preact@10.4.1:
  version "10.4.1"
  resolved "https://registry.yarnpkg.com/preact/-/preact-10.4.1.tgz#9b3ba020547673a231c6cf16f0fbaef0e8863431"
@ -7887,16 +7871,7 @@ resolve-pkg-maps@^1.0.0:
  resolved "https://registry.yarnpkg.com/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz#616b3dc2c57056b5588c31cdf4b3d64db133720f"
  integrity sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==

-resolve@^1.1.7, resolve@^1.20.0, resolve@^1.22.1, resolve@^1.22.2:
-  version "1.22.2"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.2.tgz#0ed0943d4e301867955766c9f3e1ae6d01c6845f"
-  integrity sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==
-  dependencies:
-    is-core-module "^2.11.0"
-    path-parse "^1.0.7"
-    supports-preserve-symlinks-flag "^1.0.0"
-
-resolve@^1.21.0:
+resolve@^1.1.7, resolve@^1.20.0, resolve@^1.21.0, resolve@^1.22.1, resolve@^1.22.2:
  version "1.22.4"
  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.4.tgz#1dc40df46554cdaf8948a486a10f6ba1e2026c34"
  integrity sha512-PXNdCiPqDqeUou+w1C2eTQbNfxKSuMxqTCuvlmmMsk1NWHL5fRrhY6Pl0qEYYc6+QqGClco1Qj8XnjPego4wfg==
@ -8090,16 +8065,11 @@ secp256k1@^4.0.1, secp256k1@^4.0.2:
    node-addon-api "^2.0.0"
    node-gyp-build "^4.2.0"

-semver@^6.0.0:
+semver@^6.0.0, semver@^6.3.0:
  version "6.3.1"
  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
  integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==

-semver@^6.3.0:
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
-  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
-
 semver@^7.3.2, semver@^7.3.5, semver@^7.3.7, semver@^7.3.8, semver@^7.5.4:
  version "7.5.4"
  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
@ -8733,7 +8703,7 @@ typescript-collections@^1.3.3:
  resolved "https://registry.yarnpkg.com/typescript-collections/-/typescript-collections-1.3.3.tgz#62d50d93c018c094d425eabee649f00ec5cc0fea"
  integrity sha512-7sI4e/bZijOzyURng88oOFZCISQPTHozfE2sUu5AviFYk5QV7fYGb6YiDl+vKjF/pICA354JImBImL9XJWUvdQ==

-typescript@4.9.4, typescript@^4.6.2:
+typescript@4.9.4:
  version "4.9.4"
  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.4.tgz#a2a3d2756c079abda241d75f149df9d561091e78"
  integrity sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==
@ -8743,7 +8713,7 @@ typescript@^3.9.10, typescript@^3.9.5, typescript@^3.9.7:
  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.10.tgz#70f3910ac7a51ed6bef79da7800690b19bf778b8"
  integrity sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q==

-typescript@^4.2.3:
+typescript@^4.2.3, typescript@^4.6.2:
  version "4.9.5"
  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
  integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==