start onboarding flow

components/account/AccountActions.tsx

@@ -30,13 +30,18 @@ const AccountActions = () => {
   return (
     <>
       <div className="flex space-x-3">
-        <Button disabled={!connected} onClick={() => setShowDepositModal(true)}>
+        <Button
+          disabled={!connected}
+          onClick={() => setShowDepositModal(true)}
+          size="large"
+        >
           {t('deposit')}
         </Button>
         <Button
           disabled={!connected}
           onClick={() => setShowWithdrawModal(true)}
           secondary
+          size="large"
         >
           {t('withdraw')}
         </Button>

components/forms/Input.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, forwardRef, ReactNode } from 'react'
+import { ChangeEvent, forwardRef } from 'react'
 
 interface InputProps {
   type: string
@@ -34,14 +34,14 @@ const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
         </div>
       ) : null}
       <input
-        className={`${className} h-10 w-full flex-1 rounded-md border bg-th-bkg-1 px-2 pb-px
+        className={`${className} h-12 w-full flex-1 rounded-md border bg-th-bkg-1 px-3 text-base
           text-th-fgd-1 ${
-            error ? 'border-th-red' : 'border-th-bkg-4'
+            error ? 'border-th-red' : 'border-th-fgd-4'
-          } default-transition hover:border-th-fgd-4 
+          } default-transition hover:border-th-fgd-3 
-          focus:border-th-fgd-4 focus:outline-none 
+          focus:border-th-fgd-3 focus:outline-none 
           ${
             disabled
-              ? 'cursor-not-allowed bg-th-bkg-3 text-th-fgd-3 hover:border-th-fgd-4'
+              ? 'cursor-not-allowed bg-th-bkg-3 text-th-fgd-3 hover:border-th-fgd-3'
               : ''
           }
           ${prefix ? 'pl-8' : ''}
@@ -63,14 +63,3 @@ const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
 })
 
 export default Input
-
-interface LabelProps {
-  children: ReactNode
-  className?: string
-}
-
-export const Label = ({ children, className }: LabelProps) => (
-  <label className={`mb-1.5 block text-th-fgd-2 ${className}`}>
-    {children}
-  </label>
-)

components/forms/Label.tsx

@@ -0,0 +1,5 @@
+const Label = ({ text }: { text: string }) => (
+  <p className="mb-2 text-sm text-th-fgd-3">{text}</p>
+)
+
+export default Label

components/forms/Select.tsx

@@ -0,0 +1,86 @@
+import { Listbox } from '@headlessui/react'
+import { ChevronDownIcon } from '@heroicons/react/solid'
+import { ReactNode } from 'react'
+
+interface SelectProps {
+  value: string | ReactNode
+  onChange: (x: string) => void
+  children: ReactNode
+  className?: string
+  dropdownPanelClassName?: string
+  placeholder?: string
+  disabled?: boolean
+}
+
+const Select = ({
+  value,
+  onChange,
+  children,
+  className,
+  dropdownPanelClassName,
+  placeholder = 'Select',
+  disabled = false,
+}: SelectProps) => {
+  return (
+    <div className={`relative ${className}`}>
+      <Listbox value={value} onChange={onChange} disabled={disabled}>
+        {({ open }) => (
+          <>
+            <Listbox.Button
+              className={`h-full w-full rounded-md bg-th-bkg-1 font-normal ring-1 ring-inset ring-th-fgd-4 hover:ring-th-fgd-3 focus:border-th-fgd-3 focus:outline-none`}
+            >
+              <div
+                className={`flex h-12 items-center justify-between space-x-2 px-3 text-base text-th-fgd-1`}
+              >
+                {value ? (
+                  value
+                ) : (
+                  <span className="text-th-fgd-3">{placeholder}</span>
+                )}
+                <ChevronDownIcon
+                  className={`default-transition h-5 w-5 flex-shrink-0 text-th-fgd-1 ${
+                    open ? 'rotate-180 transform' : 'rotate-360 transform'
+                  }`}
+                />
+              </div>
+            </Listbox.Button>
+            {open ? (
+              <Listbox.Options
+                static
+                className={`thin-scroll absolute left-0 z-20 mt-1 max-h-60 w-full origin-top-left overflow-auto rounded-md bg-th-bkg-2 p-2 text-th-fgd-1 outline-none ${dropdownPanelClassName}`}
+              >
+                {children}
+              </Listbox.Options>
+            ) : null}
+          </>
+        )}
+      </Listbox>
+    </div>
+  )
+}
+
+interface OptionProps {
+  value: string
+  children: string | ReactNode
+  className?: string
+}
+
+const Option = ({ value, children, className }: OptionProps) => {
+  return (
+    <Listbox.Option className="mb-0" value={value}>
+      {({ selected }) => (
+        <div
+          className={`default-transition rounded p-2 text-th-fgd-1 hover:cursor-pointer hover:bg-th-bkg-3 hover:text-th-primary ${
+            selected ? 'text-th-primary' : ''
+          } ${className}`}
+        >
+          {children}
+        </div>
+      )}
+    </Listbox.Option>
+  )
+}
+
+Select.Option = Option
+
+export default Select

components/modals/DepositModal.tsx

@@ -1,17 +1,13 @@
 import React, { useState } from 'react'
 
 import mangoStore from '../../store/state'
+import { ModalProps } from '../../types/modal'
 import { notify } from '../../utils/notifications'
 import Button from '../shared/Button'
 import Loading from '../shared/Loading'
 import Modal from '../shared/Modal'
 
-type DepositModalProps = {
+function DepositModal({ isOpen, onClose }: ModalProps) {
-  isOpen: boolean
-  onClose: () => void
-}
-
-function DepositModal({ isOpen, onClose }: DepositModalProps) {
   const [inputAmount, setInputAmount] = useState('')
   const [submitting, setSubmitting] = useState(false)
   const [selectedToken, setSelectedToken] = useState('USDC')

components/modals/IntroModal.tsx

@@ -0,0 +1,12 @@
+import { ModalProps } from '../../types/modal'
+import Modal from '../shared/Modal'
+
+const IntroModal = ({ isOpen, onClose }: ModalProps) => {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <div>Hi</div>
+    </Modal>
+  )
+}
+
+export default IntroModal

components/modals/UserSetupModal.tsx

@@ -0,0 +1,127 @@
+import { Transition } from '@headlessui/react'
+import { useTranslation } from 'next-i18next'
+import { ChangeEvent, useState } from 'react'
+import { ModalProps } from '../../types/modal'
+import { PROFILE_CATEGORIES } from '../../utils/profile'
+import Input from '../forms/Input'
+import Label from '../forms/Label'
+import Select from '../forms/Select'
+import Button, { LinkButton } from '../shared/Button'
+import InlineNotification from '../shared/InlineNotification'
+import Modal from '../shared/Modal'
+import useLocalStorageState from '../../hooks/useLocalStorageState'
+
+export const SKIP_ACCOUNT_SETUP_KEY = 'skipAccountSetup'
+
+const UserSetupModal = ({ isOpen, onClose }: ModalProps) => {
+  const { t } = useTranslation()
+  const [profileName, setProfileName] = useState('')
+  const [accountName, setAccountName] = useState('')
+  const [profileCategory, setProfileCategory] = useState('')
+  const [showAccountSetup, setShowAccountSetup] = useState(false)
+  const [, setSkipAccountSetup] = useLocalStorageState(SKIP_ACCOUNT_SETUP_KEY)
+
+  const handleSaveProfile = () => {
+    // save profile details to db...
+
+    setShowAccountSetup(true)
+  }
+
+  const handleUserSetup = () => {
+    // create account
+  }
+
+  const handleSkipAccountSetup = () => {
+    setSkipAccountSetup(true)
+    onClose()
+  }
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} hideClose>
+      <>
+        <div className="pb-4">
+          <h2 className="mb-1">Create Profile</h2>
+          <p>
+            This is your Mango Identity and is used on our leaderboard and chat
+          </p>
+        </div>
+        <div className="pb-4">
+          <Label text="Profile Name" />
+          <Input
+            type="text"
+            placeholder="e.g. Bill Hwang"
+            value={profileName}
+            onChange={(e: ChangeEvent<HTMLInputElement>) =>
+              setProfileName(e.target.value)
+            }
+          />
+        </div>
+        <div className="pb-6">
+          <Label text="Profile Category" />
+          <Select
+            value={profileCategory}
+            onChange={(cat: string) => setProfileCategory(cat)}
+            className="w-full"
+          >
+            {PROFILE_CATEGORIES.map((cat) => (
+              <Select.Option key={cat} value={cat}>
+                {cat}
+              </Select.Option>
+            ))}
+          </Select>
+        </div>
+        <div className="flex items-center justify-between">
+          <Button onClick={handleSaveProfile} size="large">
+            Save Profile
+          </Button>
+          <LinkButton onClick={() => setShowAccountSetup(true)}>
+            I'll do this later
+          </LinkButton>
+        </div>
+      </>
+      <Transition
+        appear={true}
+        className="thin-scroll absolute top-0 left-0 z-20 h-full w-full bg-th-bkg-1 p-6"
+        show={showAccountSetup}
+        enter="transition-all ease-in duration-500"
+        enterFrom="transform translate-x-full"
+        enterTo="transform translate-x-0"
+        leave="transition-all ease-out duration-500"
+        leaveFrom="transform translate-x-0"
+        leaveTo="transform translate-x-full"
+      >
+        <div className="flex h-full flex-col justify-between">
+          <div>
+            <div className="pb-4">
+              <h2 className="mb-1">Account Setup</h2>
+              <p>You need a Mango Account to get started</p>
+            </div>
+            <div className="pb-4">
+              {/* Not sure if we need to name the first account or if every users first account should have the same name "Main Account" or something similar */}
+              <Label text="Account Name" />
+              <Input
+                type="text"
+                placeholder="e.g. Degen Account"
+                value={accountName}
+                onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                  setAccountName(e.target.value)
+                }
+              />
+            </div>
+            <InlineNotification type="info" desc={t('insufficient-sol')} />
+          </div>
+          <div className="flex items-center justify-between">
+            <Button onClick={handleUserSetup} size="large">
+              Let's Go
+            </Button>
+            <LinkButton onClick={() => handleSkipAccountSetup()}>
+              I'll do this later
+            </LinkButton>
+          </div>
+        </div>
+      </Transition>
+    </Modal>
+  )
+}
+
+export default UserSetupModal

components/modals/WithdrawModal.tsx

@@ -1,17 +1,13 @@
 import { useState } from 'react'
 
 import mangoStore from '../../store/state'
+import { ModalProps } from '../../types/modal'
 import { notify } from '../../utils/notifications'
 import Button from '../shared/Button'
 import Loading from '../shared/Loading'
 import Modal from '../shared/Modal'
 
-type WithdrawModalProps = {
+function WithdrawModal({ isOpen, onClose }: ModalProps) {
-  isOpen: boolean
-  onClose: () => void
-}
-
-function WithdrawModal({ isOpen, onClose }: WithdrawModalProps) {
   const [inputAmount, setInputAmount] = useState('')
   const [submitting, setSubmitting] = useState(false)
   const [selectedToken, setSelectedToken] = useState('USDC')

components/shared/Button.tsx

@@ -1,6 +1,6 @@
 import { FunctionComponent, ReactNode } from 'react'
 
-interface ButtonProps {
+interface AllButtonProps {
   onClick?: (e?: React.MouseEvent) => void
   disabled?: boolean
   className?: string
@@ -8,21 +8,34 @@ interface ButtonProps {
   children?: ReactNode
 }
 
-const Button: FunctionComponent<ButtonProps> = ({
+interface ButtonProps {
+  size?: 'large' | 'medium' | 'small'
+}
+
+type ButtonCombinedProps = AllButtonProps & ButtonProps
+
+const Button: FunctionComponent<ButtonCombinedProps> = ({
   children,
   onClick,
   disabled = false,
   className,
   secondary,
+  size = 'medium',
   ...props
 }) => {
   return (
     <button
       onClick={onClick}
       disabled={disabled}
-      className={`whitespace-nowrap rounded-md ${
+      className={`whitespace-nowrap rounded-md text-th-fgd-1 ${
         secondary ? 'border border-th-bkg-button' : 'bg-th-bkg-button'
-      } px-6 py-2 font-bold drop-shadow-md 
+      } ${
+        size === 'medium'
+          ? 'h-10 px-4'
+          : size === 'large'
+          ? 'h-12 px-6'
+          : 'h-8 px-3'
+      } font-bold drop-shadow-md 
       focus:outline-none disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:brightness-100 md:hover:brightness-[1.1] ${className}`}
       {...props}
     >
@@ -35,7 +48,7 @@ interface IconButtonProps {
   hideBg?: boolean
 }
 
-type IconButtonCombinedProps = ButtonProps & IconButtonProps
+type IconButtonCombinedProps = AllButtonProps & IconButtonProps
 
 export const IconButton: FunctionComponent<IconButtonCombinedProps> = ({
   children,
@@ -60,7 +73,7 @@ export const IconButton: FunctionComponent<IconButtonCombinedProps> = ({
   )
 }
 
-export const LinkButton: FunctionComponent<ButtonProps> = ({
+export const LinkButton: FunctionComponent<AllButtonProps> = ({
   children,
   onClick,
   disabled = false,

components/shared/InlineNotification.tsx

@@ -0,0 +1,56 @@
+import { FunctionComponent } from 'react'
+import {
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+  ExclamationIcon,
+  InformationCircleIcon,
+} from '@heroicons/react/solid'
+
+interface InlineNotificationProps {
+  desc?: string
+  title?: string
+  type: 'error' | 'info' | 'success' | 'warning'
+}
+
+const InlineNotification: FunctionComponent<InlineNotificationProps> = ({
+  desc,
+  title,
+  type,
+}) => (
+  <div
+    className={`border ${
+      type === 'error'
+        ? 'border-th-red'
+        : type === 'success'
+        ? 'border-th-green'
+        : type === 'info'
+        ? 'border-th-bkg-4'
+        : 'border-th-orange'
+    } flex items-center rounded-md p-2`}
+  >
+    {type === 'error' ? (
+      <ExclamationCircleIcon className="mr-2 h-5 w-5 flex-shrink-0 text-th-red" />
+    ) : null}
+    {type === 'success' ? (
+      <CheckCircleIcon className="mr-2 h-5 w-5 flex-shrink-0 text-th-green" />
+    ) : null}
+    {type === 'warning' ? (
+      <ExclamationIcon className="mr-2 h-5 w-5 flex-shrink-0 text-th-orange" />
+    ) : null}
+    {type === 'info' ? (
+      <InformationCircleIcon className="mr-2 h-5 w-5 flex-shrink-0 text-th-fgd-4" />
+    ) : null}
+    <div>
+      <div className="text-th-fgd-3">{title}</div>
+      <div
+        className={`${
+          title && desc && 'pt-1'
+        } text-left text-xs font-normal text-th-fgd-3`}
+      >
+        {desc}
+      </div>
+    </div>
+  </div>
+)
+
+export default InlineNotification

components/shared/Modal.tsx

@@ -1,26 +1,41 @@
-import { useState, useRef } from 'react'
 import { Dialog } from '@headlessui/react'
+import { XIcon } from '@heroicons/react/solid'
 
 type ModalProps = {
   title?: string
   children: React.ReactNode
   isOpen: boolean
-  onClose: (x: boolean) => void
+  onClose: () => void
+  hideClose?: boolean
 }
 
-function Modal({ title = '', children, isOpen, onClose }: ModalProps) {
+function Modal({
+  title = '',
+  children,
+  isOpen,
+  onClose,
+  hideClose,
+}: ModalProps) {
   return (
     <Dialog
       open={isOpen}
       onClose={onClose}
-      className="fixed inset-0 z-10 overflow-y-auto"
+      className="fixed inset-0 z-30 overflow-y-auto"
     >
       <div className="min-h-screen px-4 text-center">
-        <Dialog.Overlay className="fixed inset-0 bg-black opacity-30" />
+        <Dialog.Overlay className="fixed inset-0 bg-black opacity-50" />
         <span className="inline-block h-screen align-middle" aria-hidden="true">
           &#8203;
         </span>
-        <div className="my-8 inline-block w-full max-w-md transform overflow-hidden rounded-2xl bg-th-bkg-2 p-6 text-left align-middle shadow-xl transition-all">
+        <div className="my-8 inline-block w-full max-w-md transform overflow-x-hidden rounded-xl border border-th-bkg-3 bg-th-bkg-1 p-6 text-left align-middle shadow-xl transition-all">
+          {!hideClose ? (
+            <button
+              onClick={onClose}
+              className={`absolute right-4 top-4 text-th-fgd-3 focus:outline-none md:right-2 md:top-2 md:hover:text-th-primary`}
+            >
+              <XIcon className={`h-5 w-5`} />
+            </button>
+          ) : null}
           <Dialog.Title>{title}</Dialog.Title>
 
           {children}

components/swap/JupiterRoutes.tsx

@@ -110,10 +110,7 @@ const JupiterRoutes = ({
         ) : null}
       </>
       <div className="mt-6 flex justify-center">
-        <Button
+        <Button onClick={onSwap} className="w-full text-base" size="large">
-          onClick={onSwap}
-          className="flex w-full justify-center py-3 text-lg"
-        >
           {submitting ? <Loading className="mr-2 h-5 w-5" /> : null}
           {t('trade:confirm-trade')}
         </Button>

components/swap/RouteFeeInfo.tsx

@@ -49,7 +49,7 @@ const RouteFeeInfo = ({
       <div className="mb-4 flex items-center justify-between">
         <h3>{t('trade:review-trade')}</h3>
       </div>
-      <div className="flex items-center justify-between">
+      {/* <div className="flex items-center justify-between">
         <p className="text-th-fgd-3">{t('liquidity')}</p>
         <Button
           className="pt-1 pb-1 pl-3 pr-3"
@@ -73,7 +73,7 @@ const RouteFeeInfo = ({
             })}
           </p>
         </Button>
-      </div>
+      </div> */}
       {amountOut && amountIn ? (
         <div className="flex justify-between">
           <p className="text-th-fgd-3">{t('trade:rate')}</p>

components/swap/Swap.tsx

@@ -343,10 +343,11 @@ const Swap = () => {
       ) : null}
       <Button
         onClick={() => setShowConfirm(true)}
-        className="mt-6 flex w-full justify-center py-3 text-lg"
+        className="mt-6 w-full text-base"
         disabled={
           !connected || !routes?.length || !selectedRoute || !outputTokenInfo
         }
+        size="large"
       >
         {connected ? (
           isLoadingTradeDetails ? (

components/swap/SwapTokenChart.tsx

@@ -229,7 +229,7 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
           <div className="-mt-1 h-28 w-1/2 md:h-72 md:w-auto">
             <div className="-mb-2 flex justify-end md:absolute md:-top-1 md:right-0 md:mb-0 md:mb-12">
               <button
-                className={`px-3 py-2 font-bold text-th-fgd-4 focus:outline-none md:hover:text-th-primary ${
+                className={`rounded-md px-3 py-2 font-bold text-th-fgd-4 focus:outline-none md:hover:text-th-primary ${
                   daysToShow === 1 && 'text-th-primary'
                 }`}
                 onClick={() => setDaysToShow(1)}
@@ -237,7 +237,7 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
                 24H
               </button>
               <button
-                className={`px-3 py-2 font-bold text-th-fgd-4 focus:outline-none md:hover:text-th-primary ${
+                className={`rounded-md px-3 py-2 font-bold text-th-fgd-4 focus:outline-none md:hover:text-th-primary ${
                   daysToShow === 7 && 'text-th-primary'
                 }`}
                 onClick={() => setDaysToShow(7)}
@@ -245,7 +245,7 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
                 7D
               </button>
               <button
-                className={`px-3 py-2 font-bold text-th-fgd-4 focus:outline-none md:hover:text-th-primary ${
+                className={`rounded-md px-3 py-2 font-bold text-th-fgd-4 focus:outline-none md:hover:text-th-primary ${
                   daysToShow === 30 && 'text-th-primary'
                 }`}
                 onClick={() => setDaysToShow(30)}

pages/index.tsx

@@ -1,13 +1,19 @@
 import { toUiDecimals } from '@blockworks-foundation/mango-v4'
+import { useWallet } from '@solana/wallet-adapter-react'
 import type { NextPage } from 'next'
 import { useTranslation } from 'next-i18next'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import AccountActions from '../components/account/AccountActions'
 import DepositModal from '../components/modals/DepositModal'
+import UserSetupModal, {
+  SKIP_ACCOUNT_SETUP_KEY,
+} from '../components/modals/UserSetupModal'
 import WithdrawModal from '../components/modals/WithdrawModal'
+import TokenList from '../components/TokenList'
 import mangoStore from '../store/state'
 import { formatDecimal } from '../utils/numbers'
+import useLocalStorageState from '../hooks/useLocalStorageState'
 
 export async function getStaticProps({ locale }: { locale: string }) {
   return {
@@ -19,13 +25,22 @@ export async function getStaticProps({ locale }: { locale: string }) {
 
 const Index: NextPage = () => {
   const { t } = useTranslation('common')
+  const { connected } = useWallet()
   const mangoAccount = mangoStore((s) => s.mangoAccount)
   const [showDepositModal, setShowDepositModal] = useState(false)
   const [showWithdrawModal, setShowWithdrawModal] = useState(false)
+  const [showFirstAccountModal, setShowFirstAccountModal] = useState(false)
+  const [skipAccountSetup] = useLocalStorageState(SKIP_ACCOUNT_SETUP_KEY)
+
+  useEffect(() => {
+    if (connected && !mangoAccount && !skipAccountSetup) {
+      setShowFirstAccountModal(true)
+    }
+  }, [connected])
 
   return (
     <>
-      <div className="flex items-end justify-between">
+      <div className="mb-8 flex items-end justify-between border-b border-th-bkg-3 pb-8">
         <div>
           <p className="mb-1">{t('account-value')}</p>
           <div className="text-5xl font-bold text-th-fgd-1">
@@ -40,6 +55,7 @@ const Index: NextPage = () => {
         </div>
         <AccountActions />
       </div>
+      <TokenList />
       {showDepositModal ? (
         <DepositModal
           isOpen={showDepositModal}
@@ -52,6 +68,12 @@ const Index: NextPage = () => {
           onClose={() => setShowWithdrawModal(false)}
         />
       ) : null}
+      {showFirstAccountModal ? (
+        <UserSetupModal
+          isOpen={showFirstAccountModal}
+          onClose={() => setShowFirstAccountModal(false)}
+        />
+      ) : null}
     </>
   )
 }

public/locales/en/common.json

@@ -190,7 +190,7 @@
    "initial-deposit": "Initial Deposit",
    "insufficient-balance-deposit": "Insufficient balance. Reduce the amount to deposit",
    "insufficient-balance-withdraw": "Insufficient balance. Borrow funds to withdraw",
-   "insufficient-sol": "The Solana blockchain requires 0.035 SOL to create a Mango Account. This covers rent for your account and will be refunded if you close your account.",
+   "insufficient-sol": "The Solana blockchain requires 0.035 SOL to create a Mango Account. It will be refunded if you close your account.",
    "interest": "Interest",
    "interest-chart-title": "{{symbol}} Interest – Last 30 days (current bar is delayed)",
    "interest-chart-value-title": "{{symbol}} Interest Value – Last 30 days (current bar is delayed)",

styles/globals.css

@@ -160,23 +160,23 @@ svg {
 h1,
 h2,
 h3 {
-  @apply font-bold;
+  @apply font-bold text-th-fgd-1;
 }
 
 h1 {
-  @apply text-2xl;
+  @apply text-3xl;
 }
 
 h2 {
-  @apply text-xl;
+  @apply text-2xl;
 }
 
 h3 {
-  @apply text-lg;
+  @apply text-xl;
 }
 
 p {
-  @apply text-th-fgd-2;
+  @apply text-base text-th-fgd-3;
 }
 
 /* Slider */
@@ -253,3 +253,28 @@ table td {
 table th {
   @apply text-xs font-normal text-th-fgd-3;
 }
+
+/* Scrollbars */
+
+.thin-scroll::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.thin-scroll::-webkit-scrollbar-thumb {
+  @apply rounded bg-th-bkg-4;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+
+.thin-scroll::-webkit-scrollbar-thumb:hover {
+  border: 0;
+}
+
+.thin-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.thin-scroll::-webkit-scrollbar-thumb:window-inactive {
+  @apply bg-th-bkg-4;
+}

types/modal.ts

@@ -0,0 +1,4 @@
+export interface ModalProps {
+  isOpen: boolean
+  onClose: () => void
+}

utils/profile.ts

@@ -0,0 +1,11 @@
+export const PROFILE_CATEGORIES = [
+  'borrower',
+  'day-trader',
+  'degen',
+  'discretionary',
+  'loan-shark',
+  'market-maker',
+  'swing-trader',
+  'trader',
+  'yolo',
+]