add init health zero errors

components/modals/BorrowModal.tsx

@@ -1,6 +1,7 @@
 import {
   Bank,
   Group,
+  HealthType,
   MangoAccount,
   toUiDecimals,
 } from '@blockworks-foundation/mango-v4'
@@ -19,6 +20,7 @@ import Input from '../forms/Input'
 import Label from '../forms/Label'
 import Button, { LinkButton } from '../shared/Button'
 import HealthImpact from '../shared/HealthImpact'
+import InlineNotification from '../shared/InlineNotification'
 import Loading from '../shared/Loading'
 import Modal from '../shared/Modal'
 import { EnterBottomExitBottom, FadeInFadeOut } from '../shared/Transitions'
@@ -149,6 +151,10 @@ function BorrowModal({ isOpen, onClose, token }: ModalCombinedProps) {
     return []
   }, [mangoAccount, group])
 
+  const initHealth = useMemo(() => {
+    return mangoAccount ? mangoAccount.getHealthRatioUi(HealthType.init) : 100
+  }, [mangoAccount])
+
   const showInsufficientBalance = tokenMax < Number(inputAmount)
 
   return (
@@ -183,6 +189,14 @@ function BorrowModal({ isOpen, onClose, token }: ModalCombinedProps) {
       >
         <div>
           <h2 className="mb-4 text-center">{t('borrow')}</h2>
+          {initHealth <= 0 ? (
+            <div className="mb-4">
+              <InlineNotification
+                type="error"
+                desc="You have no available collateral to borrow against."
+              />
+            </div>
+          ) : null}
           <div className="grid grid-cols-2 pb-6">
             <div className="col-span-2 flex justify-between">
               <Label text={t('token')} />

components/modals/WithdrawModal.tsx

@@ -1,4 +1,9 @@
-import { Bank, Group, MangoAccount } from '@blockworks-foundation/mango-v4'
+import {
+  Bank,
+  Group,
+  HealthType,
+  MangoAccount,
+} from '@blockworks-foundation/mango-v4'
 import { ChevronDownIcon, ExclamationCircleIcon } from '@heroicons/react/solid'
 import { useTranslation } from 'next-i18next'
 import Image from 'next/image'
@@ -15,6 +20,7 @@ import Input from '../forms/Input'
 import Label from '../forms/Label'
 import Button, { LinkButton } from '../shared/Button'
 import HealthImpact from '../shared/HealthImpact'
+import InlineNotification from '../shared/InlineNotification'
 import Loading from '../shared/Loading'
 import Modal from '../shared/Modal'
 import { EnterBottomExitBottom, FadeInFadeOut } from '../shared/Transitions'
@@ -151,6 +157,10 @@ function WithdrawModal({ isOpen, onClose, token }: ModalCombinedProps) {
     return []
   }, [mangoAccount, group])
 
+  const initHealth = useMemo(() => {
+    return mangoAccount ? mangoAccount.getHealthRatioUi(HealthType.init) : 100
+  }, [mangoAccount])
+
   const showInsufficientBalance = tokenMax < Number(inputAmount)
 
   return (
@@ -182,6 +192,14 @@ function WithdrawModal({ isOpen, onClose, token }: ModalCombinedProps) {
         >
           <div>
             <h2 className="mb-4 text-center">{t('withdraw')}</h2>
+            {initHealth <= 0 ? (
+              <div className="mb-4">
+                <InlineNotification
+                  type="error"
+                  desc="You have no available collateral to withdraw."
+                />
+              </div>
+            ) : null}
             <div className="grid grid-cols-2 pb-6">
               <div className="col-span-2 flex justify-between">
                 <Label text={t('token')} />
@@ -250,7 +268,9 @@ function WithdrawModal({ isOpen, onClose, token }: ModalCombinedProps) {
               onClick={handleWithdraw}
               className="flex w-full items-center justify-center"
               size="large"
-              disabled={!inputAmount || showInsufficientBalance}
+              disabled={
+                !inputAmount || showInsufficientBalance || initHealth <= 0
+              }
             >
               {submitting ? (
                 <Loading className="mr-2 h-5 w-5" />

components/shared/HealthImpact.tsx

@@ -22,11 +22,6 @@ const HealthImpact = ({
     return mangoAccount.getHealthRatioUi(HealthType.maint)
   }, [mangoAccount])
 
-  const currentInitHealth = useMemo(() => {
-    if (!mangoAccount) return 0
-    return mangoAccount.getHealthRatioUi(HealthType.init)
-  }, [mangoAccount])
-
   const maintProjectedHealth = useMemo(() => {
     const group = mangoStore.getState().group
     if (!group || !mangoAccount) return 0

components/shared/InlineNotification.tsx

@@ -10,42 +10,54 @@ interface InlineNotificationProps {
   desc?: string
   title?: string
   type: 'error' | 'info' | 'success' | 'warning'
+  hideBorder?: boolean
+  hidePadding?: boolean
 }
 
 const InlineNotification: FunctionComponent<InlineNotificationProps> = ({
   desc,
   title,
   type,
+  hideBorder,
+  hidePadding,
 }) => (
   <div
-    className={`border ${
-      type === 'error'
-        ? 'border-th-red'
+    className={`${
+      !hideBorder
+        ? `border text-th-fgd-3 ${
+            type === 'error'
+              ? 'border-th-red'
+              : type === 'success'
+              ? 'border-th-green'
+              : type === 'info'
+              ? 'border-th-bkg-4'
+              : 'border-th-orange'
+          }`
+        : type === 'error'
+        ? 'text-th-red'
         : type === 'success'
-        ? 'border-th-green'
+        ? 'text-th-green'
         : type === 'info'
-        ? 'border-th-bkg-4'
-        : 'border-th-orange'
-    } flex items-center rounded-md p-2`}
+        ? 'text-th-bkg-4'
+        : 'text-th-orange'
+    } flex items-center rounded-md ${!hidePadding ? 'p-2' : ''}`}
   >
     {type === 'error' ? (
-      <ExclamationCircleIcon className="mr-2 h-5 w-5 flex-shrink-0 text-th-red" />
+      <ExclamationCircleIcon className="mr-1.5 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" />
+      <CheckCircleIcon className="mr-1.5 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" />
+      <ExclamationIcon className="mr-1.5 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" />
+      <InformationCircleIcon className="mr-1.5 h-5 w-5 flex-shrink-0 text-th-fgd-4" />
     ) : null}
     <div>
-      <div className="text-th-fgd-3">{title}</div>
+      <div>{title}</div>
       <div
-        className={`${
-          title && desc && 'pt-1'
-        } text-left text-xs font-normal text-th-fgd-3`}
+        className={`${title && desc && 'pt-1'} text-left text-xs font-normal`}
       >
         {desc}
       </div>

components/wallet/WalletSelect.tsx

@@ -2,16 +2,19 @@ import React, { Fragment } from 'react'
 import { useWallet } from '@solana/wallet-adapter-react'
 import { ChevronDownIcon } from '@heroicons/react/solid'
 import { Menu, Transition } from '@headlessui/react'
+import mangoStore from '../../store/mangoStore'
 
 const WalletSelect = () => {
   const { wallets, select } = useWallet()
+  const group = mangoStore((s) => s.group)
 
   return (
     <Menu>
       {({ open }) => (
         <>
           <Menu.Button
-            className={`flex h-full w-14 cursor-pointer items-center justify-center rounded-none bg-transparent text-white hover:brightness-[1.1] focus:outline-none`}
+            className={`flex h-full w-14 cursor-pointer items-center justify-center rounded-none bg-transparent text-white hover:brightness-[1.1] focus:outline-none disabled:opacity-25`}
+            disabled={!group}
           >
             <ChevronDownIcon
               className={`default-transition h-6 w-6 ${

pages/index.tsx

@@ -121,10 +121,6 @@ const Index: NextPage = () => {
     return mangoAccount ? mangoAccount.getHealthRatioUi(HealthType.maint) : 100
   }, [mangoAccount])
 
-  const initHealth = useMemo(() => {
-    return mangoAccount ? mangoAccount.getHealthRatioUi(HealthType.init) : 100
-  }, [mangoAccount])
-
   return !chartToShow ? (
     <>
       <div className="mb-8 flex flex-col md:mb-10 lg:flex-row lg:items-end lg:justify-between">