more onboarding flow

components/forms/Checkbox.tsx

@@ -0,0 +1,65 @@
+import React, { ChangeEvent, ReactNode } from 'react'
+import { CheckIcon } from '@heroicons/react/solid'
+
+interface CheckboxProps {
+  checked: boolean
+  children: ReactNode
+  onChange: (x: ChangeEvent<HTMLInputElement>) => void
+  disabled?: boolean
+  halfState?: boolean
+}
+
+const Checkbox = ({
+  checked,
+  children,
+  disabled = false,
+  halfState = false,
+  ...props
+}: CheckboxProps) => (
+  <label className="default-transition flex cursor-pointer items-center text-th-fgd-3 hover:text-th-fgd-2">
+    <input
+      checked={checked}
+      {...props}
+      disabled={disabled}
+      type="checkbox"
+      style={{
+        border: '0',
+        clip: 'rect(0 0 0 0)',
+        clipPath: 'inset(50%)',
+        height: '1px',
+        margin: '-1px',
+        overflow: 'hidden',
+        padding: '0',
+        position: 'absolute',
+        whiteSpace: 'nowrap',
+        width: '1px',
+      }}
+    />
+    <div
+      className={`${
+        checked && !disabled && !halfState
+          ? 'border-th-primary'
+          : 'border-th-fgd-4'
+      } default-transition flex h-4 w-4 flex-shrink-0 cursor-pointer items-center justify-center rounded border`}
+    >
+      {halfState ? (
+        <div className="mb-0.5 font-bold">–</div>
+      ) : (
+        <CheckIcon
+          className={`${checked ? 'block' : 'hidden'} h-4 w-4 ${
+            disabled ? 'text-th-fgd-4' : 'text-th-primary'
+          }`}
+        />
+      )}
+    </div>
+    <span
+      className={`ml-2 whitespace-nowrap text-xs ${
+        checked && !disabled ? 'text-th-fgd-2' : ''
+      }`}
+    >
+      {children}
+    </span>
+  </label>
+)
+
+export default Checkbox

components/forms/Label.tsx

@@ -1,5 +1,10 @@
-const Label = ({ text }: { text: string }) => (
+const Label = ({ text, optional }: { text: string; optional?: boolean }) => (
-  <p className="mb-2 text-sm text-th-fgd-3">{text}</p>
+  <p className="mb-2 text-sm text-th-fgd-3">
+    {text}{' '}
+    {optional ? (
+      <span className="ml-1 text-xs text-th-fgd-4">(Optional)</span>
+    ) : null}
+  </p>
 )
 
 export default Label

components/modals/UserSetupModal.tsx

@@ -1,6 +1,6 @@
 import { Transition } from '@headlessui/react'
 import { useTranslation } from 'next-i18next'
-import { ChangeEvent, useState } from 'react'
+import { ChangeEvent, useEffect, useState } from 'react'
 import { ModalProps } from '../../types/modal'
 import { PROFILE_CATEGORIES } from '../../utils/profile'
 import Input from '../forms/Input'
@@ -10,116 +10,322 @@ import Button, { LinkButton } from '../shared/Button'
 import InlineNotification from '../shared/InlineNotification'
 import Modal from '../shared/Modal'
 import useLocalStorageState from '../../hooks/useLocalStorageState'
-
+import Checkbox from '../forms/Checkbox'
-export const SKIP_ACCOUNT_SETUP_KEY = 'skipAccountSetup'
+import { CheckCircleIcon } from '@heroicons/react/solid'
+import WalletSelect from '../wallet/WalletSelect'
+import { useWallet } from '@solana/wallet-adapter-react'
+import { handleWalletConnect } from '../../utils/wallet'
+import mangoStore from '../../store/state'
+import Image from 'next/image'
+import { formatDecimal } from '../../utils/numbers'
+import { IS_ONBOARDED_KEY } from '../shared/Layout'
 
 const UserSetupModal = ({ isOpen, onClose }: ModalProps) => {
   const { t } = useTranslation()
+  const { connected, wallet } = useWallet()
+  const group = mangoStore((s) => s.group)
+  const mangoAccount = mangoStore((s) => s.mangoAccount)
   const [profileName, setProfileName] = useState('')
   const [accountName, setAccountName] = useState('')
   const [profileCategory, setProfileCategory] = useState('')
-  const [showAccountSetup, setShowAccountSetup] = useState(false)
+  const [showSetupStep, setShowSetupStep] = useState(0)
-  const [, setSkipAccountSetup] = useLocalStorageState(SKIP_ACCOUNT_SETUP_KEY)
+  const [acceptRisks, setAcceptRisks] = useState(false)
+  const [depositToken, setDepositToken] = useState('')
+  const [, setIsOnboarded] = useLocalStorageState(IS_ONBOARDED_KEY)
+
+  const banks = group?.banksMap
+    ? Array.from(group?.banksMap, ([key, value]) => ({ key, value }))
+    : []
+
+  const handleNextStep = () => {
+    setShowSetupStep(showSetupStep + 1)
+  }
 
   const handleSaveProfile = () => {
-    // save profile details to db...
+    // save profile details to db then:
 
-    setShowAccountSetup(true)
+    setShowSetupStep(3)
   }
 
-  const handleUserSetup = () => {
+  const handleCreateAccount = () => {
-    // create account
+    // create account then:
+
+    setShowSetupStep(4)
   }
 
-  const handleSkipAccountSetup = () => {
+  const handleDeposit = () => {
-    setSkipAccountSetup(true)
+    // deposit funds then:
+
+    setIsOnboarded(true)
     onClose()
   }
 
+  const handleEndOnboarding = () => {
+    setIsOnboarded(true)
+    onClose()
+  }
+
+  const connectWallet = () => {
+    if (wallet) {
+      handleWalletConnect(wallet)
+    }
+  }
+
+  useEffect(() => {
+    if (connected && mangoAccount) {
+      onClose()
+    }
+    if (connected && !mangoAccount) {
+      setShowSetupStep(2)
+    }
+  }, [mangoAccount, connected])
+
   return (
     <Modal isOpen={isOpen} onClose={onClose} hideClose>
-      <>
+      <div className="h-96">
-        <div className="pb-4">
+        <Transition
-          <h2 className="mb-1">Create Profile</h2>
+          appear={true}
-          <p>
+          className="absolute top-0 left-0 z-20 h-full w-full bg-th-bkg-1 p-6"
-            This is your Mango Identity and is used on our leaderboard and chat
+          show={showSetupStep === 0}
+          enter="transition-all ease-in duration-500"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="transition-all ease-out duration-500"
+          leaveFrom="transform translate-x-0"
+          leaveTo="transform -translate-x-full"
+        >
+          <h2 className="mb-1">Welcome.</h2>
+          <p className="mb-4">
+            You're seconds away from trading the most liquid dex markets on
+            Solana.
           </p>
-        </div>
+          <div className="mb-6 space-y-2 border-y border-th-bkg-4 py-4">
-        <div className="pb-4">
+            <div className="flex items-center space-x-2">
-          <Label text="Profile Name" />
+              <CheckCircleIcon className="h-5 w-5 text-th-green" />
-          <Input
+              <p className="text-th-fgd-1">Trusted by 1,000s of DeFi users</p>
-            type="text"
+            </div>
-            placeholder="e.g. Bill Hwang"
+            <div className="flex items-center space-x-2">
-            value={profileName}
+              <CheckCircleIcon className="h-5 w-5 text-th-green" />
-            onChange={(e: ChangeEvent<HTMLInputElement>) =>
+              <p className="text-th-fgd-1">Deeply liquid markets</p>
-              setProfileName(e.target.value)
+            </div>
-            }
+            <div className="flex items-center space-x-2">
-          />
+              <CheckCircleIcon className="h-5 w-5 text-th-green" />
-        </div>
+              <p className="text-th-fgd-1">
-        <div className="pb-6">
+                Up to 20x leverage across 100s of tokens
-          <Label text="Profile Category" />
+              </p>
-          <Select
+            </div>
-            value={profileCategory}
+            <div className="flex items-center space-x-2">
-            onChange={(cat: string) => setProfileCategory(cat)}
+              <CheckCircleIcon className="h-5 w-5 text-th-green" />
-            className="w-full"
+              <p className="text-th-fgd-1">Earn interest on your deposits</p>
-          >
+            </div>
-            {PROFILE_CATEGORIES.map((cat) => (
+            <div className="flex items-center space-x-2">
-              <Select.Option key={cat} value={cat}>
+              <CheckCircleIcon className="h-5 w-5 text-th-green" />
-                {cat}
+              <p className="text-th-fgd-1">
-              </Select.Option>
+                Borrow 100s of tokens with many collateral options
-            ))}
+              </p>
-          </Select>
+            </div>
-        </div>
+          </div>
-        <div className="flex items-center justify-between">
+          <Button className="w-full" onClick={handleNextStep} size="large">
-          <Button onClick={handleSaveProfile} size="large">
+            Let's Go
-            Save Profile
           </Button>
-          <LinkButton onClick={() => setShowAccountSetup(true)}>
+        </Transition>
-            I'll do this later
+        <Transition
-          </LinkButton>
+          appear={true}
-        </div>
+          className="thin-scroll absolute top-0 left-0 z-20 h-full w-full bg-th-bkg-1 p-6"
-      </>
+          show={showSetupStep === 1}
-      <Transition
+          enter="transition-all ease-in duration-500"
-        appear={true}
+          enterFrom="transform translate-x-full"
-        className="thin-scroll absolute top-0 left-0 z-20 h-full w-full bg-th-bkg-1 p-6"
+          enterTo="transform translate-x-0"
-        show={showAccountSetup}
+          leave="transition-all ease-out duration-500"
-        enter="transition-all ease-in duration-500"
+          leaveFrom="transform translate-x-0"
-        enterFrom="transform translate-x-full"
+          leaveTo="transform -translate-x-full"
-        enterTo="transform translate-x-0"
+        >
-        leave="transition-all ease-out duration-500"
+          <div className="flex h-full flex-col justify-between">
-        leaveFrom="transform translate-x-0"
+            <div>
-        leaveTo="transform translate-x-full"
+              <h2 className="mb-4">Choose Wallet</h2>
-      >
+              <div className="thin-scroll max-h-56 overflow-y-auto">
-        <div className="flex h-full flex-col justify-between">
+                <WalletSelect />
-          <div>
+              </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">
+            <Button className="w-full" onClick={connectWallet} size="large">
-              {/* 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 */}
+              Connect
-              <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>
-      </Transition>
+        <Transition
+          appear={true}
+          className="thin-scroll absolute top-0 left-0 z-20 h-full w-full bg-th-bkg-1 p-6"
+          show={showSetupStep === 2}
+          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">Create Profile</h2>
+                <p>Your public facing identity on Mango...</p>
+              </div>
+              <div className="pb-4">
+                <Label text="Profile Name" />
+                <Input
+                  type="text"
+                  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>
+            <div className="flex flex-col items-center">
+              <Button
+                className="mb-3 w-full"
+                onClick={handleSaveProfile}
+                size="large"
+              >
+                Save Profile
+              </Button>
+              <LinkButton onClick={handleNextStep}>Skip for now</LinkButton>
+            </div>
+          </div>
+        </Transition>
+        <Transition
+          appear={true}
+          className="thin-scroll absolute top-0 left-0 z-20 h-full w-full bg-th-bkg-1 p-6"
+          show={showSetupStep === 3}
+          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 DeFi on Mango</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" optional />
+                <Input
+                  type="text"
+                  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
+                className="w-full"
+                onClick={handleCreateAccount}
+                size="large"
+              >
+                Create Account
+              </Button>
+            </div>
+          </div>
+        </Transition>
+        <Transition
+          appear={true}
+          className="thin-scroll absolute top-0 left-0 z-20 h-full w-full bg-th-bkg-1 p-6"
+          show={showSetupStep === 4}
+          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">Fund Account</h2>
+                <p>
+                  Make a deposit to start earning interest and use your funds as
+                  collateral to trade or borrow
+                </p>
+              </div>
+              <div className="grid grid-cols-3 px-4 pb-2">
+                <div className="col-span-1">
+                  <p className="text-xs">Token</p>
+                </div>
+                <div className="col-span-1 flex justify-end">
+                  <p className="text-xs">Deposit Rate (APR)</p>
+                </div>
+                <div className="col-span-1 flex justify-end">
+                  <p className="text-xs">Collateral Weight</p>
+                </div>
+              </div>
+              <div className="space-y-2 pb-6">
+                {banks.map((bank) => (
+                  <button className="grid w-full grid-cols-3 rounded-md border border-th-bkg-4 px-4 py-3 md:hover:border-th-fgd-4">
+                    <div className="col-span-1 flex items-center">
+                      <div className="mr-2.5 flex flex-shrink-0 items-center">
+                        <Image
+                          alt=""
+                          width="24"
+                          height="24"
+                          src={`/icons/${bank.value.name.toLowerCase()}.svg`}
+                        />
+                      </div>
+                      <p className="font-bold text-th-fgd-1">
+                        {bank.value.name}
+                      </p>
+                    </div>
+                    <div className="col-span-1 flex justify-end">
+                      <p className="text-th-green">
+                        {formatDecimal(
+                          bank.value.getDepositRate().toNumber(),
+                          2
+                        )}
+                        %
+                      </p>
+                    </div>
+                    <div className="col-span-1 flex justify-end">
+                      <p className="text-th-fgd-1">100%</p>
+                    </div>
+                  </button>
+                ))}
+              </div>
+            </div>
+            <div className="flex flex-col items-center">
+              <Button
+                onClick={handleDeposit}
+                className="mb-3 w-full"
+                size="large"
+              >
+                Deposit
+              </Button>
+              <LinkButton onClick={handleEndOnboarding}>
+                Skip for now
+              </LinkButton>
+            </div>
+          </div>
+        </Transition>
+      </div>
     </Modal>
   )
 }

components/shared/Button.tsx

@@ -10,6 +10,7 @@ interface AllButtonProps {
 
 interface ButtonProps {
   size?: 'large' | 'medium' | 'small'
+  highlightButton?: boolean
 }
 
 type ButtonCombinedProps = AllButtonProps & ButtonProps
@@ -21,14 +22,19 @@ const Button: FunctionComponent<ButtonCombinedProps> = ({
   className,
   secondary,
   size = 'medium',
+  highlightButton,
   ...props
 }) => {
   return (
     <button
       onClick={onClick}
       disabled={disabled}
-      className={`whitespace-nowrap rounded-md text-th-fgd-1 ${
+      className={`whitespace-nowrap rounded-md ${
-        secondary ? 'border border-th-bkg-button' : 'bg-th-bkg-button'
+        secondary
+          ? 'border border-th-bkg-button'
+          : highlightButton
+          ? 'bg-th-primary text-th-bkg-1'
+          : 'bg-th-bkg-button'
       } ${
         size === 'medium'
           ? 'h-10 px-4'

components/shared/Layout.tsx

@@ -20,6 +20,11 @@ import { HealthType, MangoAccount } from '@blockworks-foundation/mango-v4'
 import mangoStore from '../../store/state'
 import HealthHeart from '../account/HealthHeart'
 import BottomBar from '../mobile/BottomBar'
+import useLocalStorageState from '../../hooks/useLocalStorageState'
+import Button from './Button'
+import UserSetupModal from '../modals/UserSetupModal'
+
+export const IS_ONBOARDED_KEY = 'isOnboarded'
 
 const Layout = ({ children }: { children: ReactNode }) => {
   const mangoAccount = mangoStore((s) => s.mangoAccount)
@@ -28,6 +33,8 @@ const Layout = ({ children }: { children: ReactNode }) => {
   const [isCollapsed, setIsCollapsed] = useState(false)
   const { width } = useViewport()
   const isMobile = width ? width < breakpoints.md : false
+  const [isOnboarded] = useLocalStorageState(IS_ONBOARDED_KEY)
+  const [showUserSetupModal, setShowUserSetupModal] = useState(false)
 
   useEffect(() => {
     const collapsed = width ? width < breakpoints.xl : false
@@ -90,7 +97,20 @@ const Layout = ({ children }: { children: ReactNode }) => {
               </span>
             </div>
             <div className="flex items-center space-x-4">
-              {connected ? <WalletDisconnectButton /> : <WalletMultiButton />}
+              {isOnboarded ? (
+                connected ? (
+                  <WalletDisconnectButton />
+                ) : (
+                  <WalletMultiButton />
+                )
+              ) : (
+                <Button
+                  highlightButton
+                  onClick={() => setShowUserSetupModal(true)}
+                >
+                  Join Mango
+                </Button>
+              )}
             </div>
           </div>
           <div className={`min-h-screen p-8 ${isMobile ? 'pb-20' : ''}`}>
@@ -98,6 +118,12 @@ const Layout = ({ children }: { children: ReactNode }) => {
           </div>
         </div>
       </div>
+      {showUserSetupModal ? (
+        <UserSetupModal
+          isOpen={showUserSetupModal}
+          onClose={() => setShowUserSetupModal(false)}
+        />
+      ) : null}
     </div>
   )
 }

components/wallet/WalletSelect.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import { useWallet } from '@solana/wallet-adapter-react'
+// import { WalletReadyState } from '@solana/wallet-adapter-base'
+// import uniqBy from 'lodash/uniqBy'
+import { CheckCircleIcon } from '@heroicons/react/solid'
+
+const WalletSelect = () => {
+  const { wallet, wallets, select } = useWallet()
+
+  // const installedWallets = useMemo(() => {
+  //   const installed: Wallet[] = []
+
+  //   for (const wallet of wallets) {
+  //     if (wallet.readyState === WalletReadyState.Installed) {
+  //       installed.push(wallet)
+  //     }
+  //   }
+
+  //   return installed?.length ? installed : wallets
+  // }, [wallets])
+
+  // const displayedWallets = useMemo(() => {
+  //   return uniqBy([...installedWallets, ...wallets], (w) => {
+  //     return w.adapter.name
+  //   })
+  // }, [wallets, installedWallets])
+
+  // if (!wallets?.length) {
+  //   return null
+  // }
+
+  return (
+    <div className="space-y-2">
+      {wallets?.map((w) => (
+        <button
+          className={`flex w-full items-center justify-between rounded-md border ${
+            wallet?.adapter.name === w.adapter.name
+              ? 'border-th-primary md:hover:border-th-primary'
+              : 'border-th-bkg-4 md:hover:border-th-fgd-4'
+          } py-3 px-4 text-base focus:outline-none md:hover:cursor-pointer`}
+          onClick={() => select(w.adapter.name)}
+        >
+          <div className="flex items-center">
+            <img
+              src={w.adapter.icon}
+              className="mr-2 h-6 w-6"
+              alt={`${w.adapter.name} icon`}
+            />
+            {w.adapter.name}
+          </div>
+          {wallet?.adapter.name === w.adapter.name ? (
+            <CheckCircleIcon className="h-5 w-5 text-th-primary" />
+          ) : null}
+        </button>
+      ))}
+    </div>
+  )
+}
+
+export default WalletSelect

pages/index.tsx

@@ -3,17 +3,17 @@ import { useWallet } from '@solana/wallet-adapter-react'
 import type { NextPage } from 'next'
 import { useTranslation } from 'next-i18next'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import AccountActions from '../components/account/AccountActions'
 import DepositModal from '../components/modals/DepositModal'
-import UserSetupModal, {
+// import UserSetupModal, {
-  SKIP_ACCOUNT_SETUP_KEY,
+//   SKIP_ACCOUNT_SETUP_KEY,
-} from '../components/modals/UserSetupModal'
+// } 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'
+// import useLocalStorageState from '../hooks/useLocalStorageState'
 
 export async function getStaticProps({ locale }: { locale: string }) {
   return {
@@ -25,18 +25,18 @@ export async function getStaticProps({ locale }: { locale: string }) {
 
 const Index: NextPage = () => {
   const { t } = useTranslation('common')
-  const { connected } = useWallet()
+  // 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 [showFirstAccountModal, setShowFirstAccountModal] = useState(false)
-  const [skipAccountSetup] = useLocalStorageState(SKIP_ACCOUNT_SETUP_KEY)
+  // const [skipAccountSetup] = useLocalStorageState(SKIP_ACCOUNT_SETUP_KEY)
 
-  useEffect(() => {
+  // useEffect(() => {
-    if (connected && !mangoAccount && !skipAccountSetup) {
+  //   if (connected && !mangoAccount && !skipAccountSetup) {
-      setShowFirstAccountModal(true)
+  //     setShowFirstAccountModal(true)
-    }
+  //   }
-  }, [connected])
+  // }, [connected, mangoAccount])
 
   return (
     <>
@@ -68,12 +68,6 @@ const Index: NextPage = () => {
           onClose={() => setShowWithdrawModal(false)}
         />
       ) : null}
-      {showFirstAccountModal ? (
-        <UserSetupModal
-          isOpen={showFirstAccountModal}
-          onClose={() => setShowFirstAccountModal(false)}
-        />
-      ) : null}
     </>
   )
 }

styles/globals.css

@@ -144,7 +144,7 @@ body {
 }
 
 button {
-  @apply tracking-wide transition-all duration-500 ease-out focus:outline-none focus:ring-1 focus:ring-inset focus:ring-th-fgd-4;
+  @apply tracking-wide text-th-fgd-1 duration-500 ease-out hover:transition-all focus:outline-none;
 }
 
 svg {
@@ -172,13 +172,17 @@ h2 {
 }
 
 h3 {
-  @apply text-xl;
+  @apply text-lg;
 }
 
 p {
   @apply text-base text-th-fgd-3;
 }
 
+li {
+  @apply text-sm text-th-fgd-3;
+}
+
 /* Slider */
 
 input[type='range']::-webkit-slider-thumb {
@@ -254,6 +258,10 @@ table th {
   @apply text-xs font-normal text-th-fgd-3;
 }
 
+table p {
+  @apply text-th-fgd-1;
+}
+
 /* Scrollbars */
 
 .thin-scroll::-webkit-scrollbar {

utils/wallet.ts

@@ -1,5 +1,7 @@
 import { Wallet } from '@project-serum/anchor'
+import { Wallet as WalletAdapter } from '@solana/wallet-adapter-react'
 import { Keypair, PublicKey, Transaction } from '@solana/web3.js'
+import { notify } from './notifications'
 
 export default class EmptyWallet implements Wallet {
   constructor(readonly payer: Keypair) {}
@@ -20,3 +22,19 @@ export default class EmptyWallet implements Wallet {
     return this.payer.publicKey
   }
 }
+
+export const handleWalletConnect = (wallet: WalletAdapter) => {
+  if (!wallet) {
+    return
+  }
+
+  wallet?.adapter?.connect().catch((e) => {
+    if (e.name.includes('WalletLoadError')) {
+      notify({
+        title: `${wallet.adapter.name} Error`,
+        type: 'error',
+        description: `Please install ${wallet.adapter.name} and then reload this page.`,
+      })
+    }
+  })
+}