add active connect buttons

components/BorrowForm.tsx

@@ -39,6 +39,7 @@ import useJupiterMints from 'hooks/useJupiterMints'
 import useMangoGroup from 'hooks/useMangoGroup'
 import TokenVaultWarnings from '@components/shared/TokenVaultWarnings'
 import { useWallet } from '@solana/wallet-adapter-react'
+import { useEnhancedWallet } from './wallet/EnhancedWalletProvider'
 
 interface BorrowFormProps {
   onSuccess: () => void
@@ -58,6 +59,7 @@ function BorrowForm({ onSuccess, token }: BorrowFormProps) {
   const { mangoTokens } = useJupiterMints()
   const { mangoAccount } = useMangoAccount()
   const { connected } = useWallet()
+  const { handleConnect } = useEnhancedWallet()
 
   const bank = useMemo(() => {
     const group = mangoStore.getState().group
@@ -113,7 +115,7 @@ function BorrowForm({ onSuccess, token }: BorrowFormProps) {
     setShowTokenList(false)
   }
 
-  const handleWithdraw = async () => {
+  const handleBorrow = async () => {
     const client = mangoStore.getState().client
     const group = mangoStore.getState().group
     const mangoAccount = mangoStore.getState().mangoAccount.current
@@ -392,9 +394,9 @@ function BorrowForm({ onSuccess, token }: BorrowFormProps) {
             ) : null}
           </div>
           <Button
-            onClick={handleWithdraw}
+            onClick={connected ? handleBorrow : handleConnect}
             className="flex w-full items-center justify-center"
-            disabled={!inputAmount || showInsufficientBalance || !connected}
+            disabled={connected && (!inputAmount || showInsufficientBalance)}
             size="large"
           >
             {!connected ? (

components/DepositForm.tsx

@@ -36,6 +36,7 @@ import HealthImpactTokenChange from '@components/HealthImpactTokenChange'
 import SolBalanceWarnings from '@components/shared/SolBalanceWarnings'
 import useJupiterMints from 'hooks/useJupiterMints'
 import useMangoGroup from 'hooks/useMangoGroup'
+import { useEnhancedWallet } from './wallet/EnhancedWalletProvider'
 
 interface DepositFormProps {
   onSuccess: () => void
@@ -95,6 +96,7 @@ function DepositForm({ onSuccess, token }: DepositFormProps) {
   const [showTokenList, setShowTokenList] = useState(false)
   const [sizePercentage, setSizePercentage] = useState('')
   const { mangoTokens } = useJupiterMints()
+  const { handleConnect } = useEnhancedWallet()
 
   const bank = useMemo(() => {
     const group = mangoStore.getState().group
@@ -366,13 +368,11 @@ function DepositForm({ onSuccess, token }: DepositFormProps) {
             </div>
           </div>
           <Button
-            onClick={handleDeposit}
+            onClick={connected ? handleDeposit : handleConnect}
             className="flex w-full items-center justify-center"
             disabled={
-              !inputAmount ||
-              exceedsAlphaMax ||
-              showInsufficientBalance ||
-              !connected
+              connected &&
+              (!inputAmount || exceedsAlphaMax || showInsufficientBalance)
             }
             size="large"
           >

components/RepayForm.tsx

@@ -3,7 +3,6 @@ import {
   ArrowLeftIcon,
   ChevronDownIcon,
   ExclamationCircleIcon,
-  LinkIcon,
   QuestionMarkCircleIcon,
 } from '@heroicons/react/20/solid'
 import { Wallet } from '@project-serum/anchor'
@@ -34,6 +33,7 @@ import {
   ACCOUNT_ACTION_MODAL_INNER_HEIGHT,
   INPUT_TOKEN_DEFAULT,
 } from 'utils/constants'
+import ConnectEmptyState from './shared/ConnectEmptyState'
 
 interface RepayFormProps {
   onSuccess: () => void
@@ -358,8 +358,7 @@ function RepayForm({ onSuccess, token }: RepayFormProps) {
     </>
   ) : !connected ? (
     <div className="flex h-[356px] flex-col items-center justify-center">
-      <LinkIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
-      <p>Connect to repay your borrows</p>
+      <ConnectEmptyState text="Connect to repay your borrows" />
     </div>
   ) : (
     <div className="flex h-[356px] flex-col items-center justify-center">

components/WithdrawForm.tsx

@@ -35,6 +35,7 @@ import useJupiterMints from 'hooks/useJupiterMints'
 import useMangoGroup from 'hooks/useMangoGroup'
 import TokenVaultWarnings from '@components/shared/TokenVaultWarnings'
 import { useWallet } from '@solana/wallet-adapter-react'
+import { useEnhancedWallet } from './wallet/EnhancedWalletProvider'
 
 interface WithdrawFormProps {
   onSuccess: () => void
@@ -54,6 +55,7 @@ function WithdrawForm({ onSuccess, token }: WithdrawFormProps) {
   const { mangoTokens } = useJupiterMints()
   const { mangoAccount } = useMangoAccount()
   const { connected } = useWallet()
+  const { handleConnect } = useEnhancedWallet()
 
   const bank = useMemo(() => {
     const group = mangoStore.getState().group
@@ -302,14 +304,12 @@ function WithdrawForm({ onSuccess, token }: WithdrawFormProps) {
             </div>
           </div>
           <Button
-            onClick={handleWithdraw}
+            onClick={connected ? handleWithdraw : handleConnect}
             className="flex w-full items-center justify-center"
             size="large"
             disabled={
-              !inputAmount ||
-              showInsufficientBalance ||
-              initHealth <= 0 ||
-              !connected
+              connected &&
+              (!inputAmount || showInsufficientBalance || initHealth <= 0)
             }
           >
             {!connected ? (

components/account/ActivityFeedTable.tsx

@@ -1,5 +1,6 @@
 import { EXPLORERS } from '@components/settings/PreferredExplorerSettings'
 import { IconButton, LinkButton } from '@components/shared/Button'
+import ConnectEmptyState from '@components/shared/ConnectEmptyState'
 import SheenLoader from '@components/shared/SheenLoader'
 import { Table, Td, Th, TrBody, TrHead } from '@components/shared/TableElements'
 import Tooltip from '@components/shared/Tooltip'
@@ -7,7 +8,6 @@ import { Transition } from '@headlessui/react'
 import {
   ChevronDownIcon,
   ChevronRightIcon,
-  LinkIcon,
   NoSymbolIcon,
 } from '@heroicons/react/20/solid'
 import mangoStore, { LiquidationFeedItem } from '@store/mangoStore'
@@ -293,9 +293,8 @@ const ActivityFeedTable = ({
       </div>
     )
   ) : (
-    <div className="flex flex-col items-center p-8">
-      <LinkIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
-      <p>{t('activity:connect-activity')}</p>
+    <div className="p-8">
+      <ConnectEmptyState text={t('activity:connect-activity')} />
     </div>
   )
 }

components/shared/ConnectEmptyState.tsx

@@ -0,0 +1,24 @@
+import WalletIcon from '@components/icons/WalletIcon'
+import { useEnhancedWallet } from '@components/wallet/EnhancedWalletProvider'
+import { LinkIcon } from '@heroicons/react/20/solid'
+import { useTranslation } from 'next-i18next'
+import Button from './Button'
+
+const ConnectEmptyState = ({ text }: { text: string }) => {
+  const { t } = useTranslation('common')
+  const { handleConnect } = useEnhancedWallet()
+  return (
+    <div className="flex flex-col items-center">
+      <WalletIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
+      <p className="mb-4">{text}</p>
+      <Button onClick={handleConnect}>
+        <div className="flex items-center">
+          <LinkIcon className="mr-2 h-5 w-5" />
+          {t('connect')}
+        </div>
+      </Button>
+    </div>
+  )
+}
+
+export default ConnectEmptyState

components/swap/SwapForm.tsx

@@ -46,6 +46,7 @@ import MaxSwapAmount from './MaxSwapAmount'
 import PercentageSelectButtons from './PercentageSelectButtons'
 import useIpAddress from 'hooks/useIpAddress'
 import Checkbox from '@components/forms/Checkbox'
+import { useEnhancedWallet } from '@components/wallet/EnhancedWalletProvider'
 
 const MAX_DIGITS = 11
 export const withValueLimit = (values: NumberFormatValues): boolean => {
@@ -498,17 +499,20 @@ const SwapFormSubmitButton = ({
   const { t } = useTranslation('common')
   const { connected } = useWallet()
   const { amount: tokenMax, amountWithBorrow } = useTokenMax(useMargin)
+  const { handleConnect } = useEnhancedWallet()
 
   const showInsufficientBalance = useMargin
     ? amountWithBorrow.lt(amountIn)
     : tokenMax.lt(amountIn)
 
   const disabled =
-    !amountIn.toNumber() || !connected || showInsufficientBalance || !amountOut
+    connected && (!amountIn.toNumber() || showInsufficientBalance || !amountOut)
+
+  const onClick = connected ? () => setShowConfirm(true) : handleConnect
 
   return (
     <Button
-      onClick={() => setShowConfirm(true)}
+      onClick={onClick}
       className="mt-6 mb-4 flex w-full items-center justify-center text-base"
       disabled={disabled}
       size="large"

components/swap/SwapHistoryTable.tsx

@@ -2,7 +2,6 @@ import { Fragment, useEffect, useState } from 'react'
 import {
   ArrowRightIcon,
   ChevronDownIcon,
-  LinkIcon,
   NoSymbolIcon,
 } from '@heroicons/react/20/solid'
 import dayjs from 'dayjs'
@@ -28,6 +27,7 @@ import { Table, Td, Th, TrBody, TrHead } from '@components/shared/TableElements'
 import { useWallet } from '@solana/wallet-adapter-react'
 import { EXPLORERS } from '@components/settings/PreferredExplorerSettings'
 import useMangoAccount from 'hooks/useMangoAccount'
+import ConnectEmptyState from '@components/shared/ConnectEmptyState'
 
 const SwapHistoryTable = ({
   swapHistory,
@@ -422,9 +422,8 @@ const SwapHistoryTable = ({
       </div>
     )
   ) : (
-    <div className="flex flex-col items-center p-8">
-      <LinkIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
-      <p>{t('swap:connect-swap')}</p>
+    <div className="p-8">
+      <ConnectEmptyState text={t('swap:connect-swap')} />
     </div>
   )
 }

components/trade/AdvancedTradeForm.tsx

@@ -22,7 +22,7 @@ import { notify } from 'utils/notifications'
 import SpotSlider from './SpotSlider'
 import { calculateLimitPriceForMarketOrder } from 'utils/tradeForm'
 import Image from 'next/legacy/image'
-import { QuestionMarkCircleIcon } from '@heroicons/react/20/solid'
+import { LinkIcon, QuestionMarkCircleIcon } from '@heroicons/react/20/solid'
 import Loading from '@components/shared/Loading'
 import TabUnderline from '@components/shared/TabUnderline'
 import PerpSlider from './PerpSlider'
@@ -40,6 +40,8 @@ import ButtonGroup from '@components/forms/ButtonGroup'
 import TradeSummary from './TradeSummary'
 import useMangoAccount from 'hooks/useMangoAccount'
 import MaxSizeButton from './MaxSizeButton'
+import { useWallet } from '@solana/wallet-adapter-react'
+import { useEnhancedWallet } from '@components/wallet/EnhancedWalletProvider'
 
 const set = mangoStore.getState().set
 
@@ -53,6 +55,8 @@ const AdvancedTradeForm = () => {
   const [placingOrder, setPlacingOrder] = useState(false)
   const [tradeFormSizeUi] = useLocalStorageState(SIZE_INPUT_UI_KEY, 'Slider')
   const { ipAllowed, ipCountry } = useIpAddress()
+  const { connected } = useWallet()
+  const { handleConnect } = useEnhancedWallet()
 
   const baseSymbol = useMemo(() => {
     return selectedMarket?.name.split(/-|\//)[0]
@@ -537,16 +541,23 @@ const AdvancedTradeForm = () => {
       <div className="mt-6 mb-4 flex px-3 md:px-4">
         {ipAllowed ? (
           <Button
-            onClick={handlePlaceOrder}
-            className={`flex w-full items-center justify-center text-white ${
-              tradeForm.side === 'buy'
-                ? 'bg-th-up-dark md:hover:bg-th-up'
-                : 'bg-th-down-dark md:hover:bg-th-down'
+            onClick={connected ? handlePlaceOrder : handleConnect}
+            className={`flex w-full items-center justify-center ${
+              !connected
+                ? ''
+                : tradeForm.side === 'buy'
+                ? 'bg-th-up-dark text-white md:hover:bg-th-up'
+                : 'bg-th-down-dark text-white md:hover:bg-th-down'
             }`}
-            disabled={!tradeForm.baseSize}
+            disabled={connected && !tradeForm.baseSize}
             size="large"
           >
-            {!placingOrder ? (
+            {!connected ? (
+              <div className="flex items-center">
+                <LinkIcon className="mr-2 h-5 w-5" />
+                {t('connect')}
+              </div>
+            ) : !placingOrder ? (
               <span className="capitalize">
                 {t('trade:place-order', { side: tradeForm.side })}
               </span>

components/trade/OpenOrders.tsx

@@ -9,13 +9,13 @@ import {
 } from '@blockworks-foundation/mango-v4'
 import Input from '@components/forms/Input'
 import { IconButton } from '@components/shared/Button'
+import ConnectEmptyState from '@components/shared/ConnectEmptyState'
 import Loading from '@components/shared/Loading'
 import SideBadge from '@components/shared/SideBadge'
 import { Table, Td, Th, TrBody, TrHead } from '@components/shared/TableElements'
 import Tooltip from '@components/shared/Tooltip'
 import {
   CheckIcon,
-  LinkIcon,
   NoSymbolIcon,
   PencilIcon,
   TrashIcon,
@@ -526,9 +526,8 @@ const OpenOrders = () => {
       </div>
     )
   ) : (
-    <div className="flex flex-col items-center p-8">
-      <LinkIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
-      <p>{t('trade:connect-orders')}</p>
+    <div className="p-8">
+      <ConnectEmptyState text={t('trade:connect-orders')} />
     </div>
   )
 }

components/trade/PerpPositions.tsx

@@ -1,7 +1,8 @@
 import { PerpMarket } from '@blockworks-foundation/mango-v4'
 import { LinkButton } from '@components/shared/Button'
+import ConnectEmptyState from '@components/shared/ConnectEmptyState'
 import { Table, Td, Th, TrBody, TrHead } from '@components/shared/TableElements'
-import { LinkIcon, NoSymbolIcon } from '@heroicons/react/20/solid'
+import { NoSymbolIcon } from '@heroicons/react/20/solid'
 import { useWallet } from '@solana/wallet-adapter-react'
 import mangoStore from '@store/mangoStore'
 import useMangoGroup from 'hooks/useMangoGroup'
@@ -156,9 +157,8 @@ const PerpPositions = () => {
       </div>
     )
   ) : (
-    <div className="flex flex-col items-center p-8">
-      <LinkIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
-      <p>{t('trade:connect-positions')}</p>
+    <div className="p-8">
+      <ConnectEmptyState text={t('trade:connect-positions')} />
     </div>
   )
 }

components/trade/TradeHistory.tsx

@@ -1,4 +1,5 @@
 import { I80F48, PerpMarket } from '@blockworks-foundation/mango-v4'
+import ConnectEmptyState from '@components/shared/ConnectEmptyState'
 import InlineNotification from '@components/shared/InlineNotification'
 import SideBadge from '@components/shared/SideBadge'
 import {
@@ -9,7 +10,7 @@ import {
   TrBody,
   TrHead,
 } from '@components/shared/TableElements'
-import { LinkIcon, NoSymbolIcon } from '@heroicons/react/20/solid'
+import { NoSymbolIcon } from '@heroicons/react/20/solid'
 import { useWallet } from '@solana/wallet-adapter-react'
 import { PublicKey } from '@solana/web3.js'
 import mangoStore from '@store/mangoStore'
@@ -232,9 +233,8 @@ const TradeHistory = () => {
       </div>
     )
   ) : (
-    <div className="flex flex-col items-center p-8">
-      <LinkIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
-      <p>Connect to view your trade history</p>
+    <div className="p-8">
+      <ConnectEmptyState text="Connect to view your trade history" />
     </div>
   )
 }

components/trade/UnsettledTrades.tsx

@@ -4,7 +4,7 @@ import { useCallback, useState } from 'react'
 import { PublicKey } from '@solana/web3.js'
 import { IconButton } from '@components/shared/Button'
 import { notify } from 'utils/notifications'
-import { CheckIcon, LinkIcon, NoSymbolIcon } from '@heroicons/react/20/solid'
+import { CheckIcon, NoSymbolIcon } from '@heroicons/react/20/solid'
 import Tooltip from '@components/shared/Tooltip'
 import Loading from '@components/shared/Loading'
 import { useViewport } from 'hooks/useViewport'
@@ -14,6 +14,7 @@ import useMangoGroup from 'hooks/useMangoGroup'
 import { PerpMarket, PerpPosition } from '@blockworks-foundation/mango-v4'
 import { useWallet } from '@solana/wallet-adapter-react'
 import TableMarketName from './TableMarketName'
+import ConnectEmptyState from '@components/shared/ConnectEmptyState'
 
 const UnsettledTrades = ({
   unsettledSpotBalances,
@@ -286,9 +287,8 @@ const UnsettledTrades = ({
       </div>
     )
   ) : (
-    <div className="flex flex-col items-center p-8">
-      <LinkIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
-      <p>{t('trade:connect-unsettled')}</p>
+    <div className="p-8">
+      <ConnectEmptyState text={t('trade:connect-unsettled')} />
     </div>
   )
 }