connect empty state icons

components/swap/SwapHistoryTable.tsx

@@ -2,8 +2,8 @@ import { Fragment, useState } from 'react'
 import {
   ArrowRightIcon,
   ChevronDownIcon,
-  ClockIcon,
   LinkIcon,
+  NoSymbolIcon,
 } from '@heroicons/react/20/solid'
 import dayjs from 'dayjs'
 import { useTranslation } from 'next-i18next'
@@ -24,9 +24,9 @@ import { PREFERRED_EXPLORER_KEY } from 'utils/constants'
 import { EXPLORERS } from 'pages/settings'
 import Tooltip from '@components/shared/Tooltip'
 import { formatTokenSymbol } from 'utils/tokens'
-import useMangoAccount from 'hooks/useMangoAccount'
 import useJupiterMints from 'hooks/useJupiterMints'
 import { Table, Td, Th, TrBody } from '@components/shared/TableElements'
+import { useWallet } from '@solana/wallet-adapter-react'
 
 const SwapHistoryTable = ({
   swapHistory,
@@ -35,9 +35,9 @@ const SwapHistoryTable = ({
   swapHistory: Array<SwapHistoryItem>
   loading: boolean
 }) => {
-  const { t } = useTranslation(['common', 'settings'])
+  const { t } = useTranslation(['common', 'settings', 'swap'])
+  const { connected } = useWallet()
   const { mangoTokens } = useJupiterMints()
-  const { mangoAccount } = useMangoAccount()
   const [showSwapDetails, setSwapDetails] = useState('')
   const { width } = useViewport()
   const showTableView = width ? width > breakpoints.md : false
@@ -50,7 +50,7 @@ const SwapHistoryTable = ({
     showSwapDetails ? setSwapDetails('') : setSwapDetails(signature)
   }
 
-  return mangoAccount ? (
+  return connected ? (
     !loading ? (
       swapHistory.length ? (
         showTableView ? (
@@ -400,8 +400,8 @@ const SwapHistoryTable = ({
         )
       ) : (
         <div className="flex flex-col items-center p-8">
-          <ClockIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
+          <NoSymbolIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
-          <p>No swap history found...</p>
+          <p>{t('swap:no-history')}</p>
         </div>
       )
     ) : (
@@ -416,7 +416,7 @@ const SwapHistoryTable = ({
   ) : (
     <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 swap history</p>
+      <p>{t('swap:connect-swap')}</p>
     </div>
   )
 }

components/trade/OpenOrders.tsx

@@ -9,7 +9,7 @@ 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 { LinkIcon, TrashIcon } from '@heroicons/react/20/solid'
+import { LinkIcon, NoSymbolIcon, TrashIcon } from '@heroicons/react/20/solid'
 import { Order } from '@project-serum/serum/lib/market'
 import { useWallet } from '@solana/wallet-adapter-react'
 import { PublicKey } from '@solana/web3.js'
@@ -306,6 +306,7 @@ const OpenOrders = () => {
       )
     ) : (
       <div className="flex flex-col items-center p-8">
+        <NoSymbolIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
         <p>{t('trade:no-orders')}</p>
       </div>
     )

components/trade/PerpPositions.tsx

@@ -1,7 +1,7 @@
 import { PerpMarket } from '@blockworks-foundation/mango-v4'
 import { LinkButton } from '@components/shared/Button'
 import { Table, Td, Th, TrBody, TrHead } from '@components/shared/TableElements'
-import { LinkIcon } from '@heroicons/react/20/solid'
+import { LinkIcon, NoSymbolIcon } from '@heroicons/react/20/solid'
 import { useWallet } from '@solana/wallet-adapter-react'
 import mangoStore from '@store/mangoStore'
 import Decimal from 'decimal.js'
@@ -127,6 +127,7 @@ const PerpPositions = () => {
       </div>
     ) : (
       <div className="flex flex-col items-center p-8">
+        <NoSymbolIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
         <p>{t('trade:no-positions')}</p>
       </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 } from '@heroicons/react/20/solid'
+import { CheckIcon, LinkIcon, NoSymbolIcon } from '@heroicons/react/20/solid'
 import Tooltip from '@components/shared/Tooltip'
 import Loading from '@components/shared/Loading'
 import { useViewport } from 'hooks/useViewport'
@@ -216,6 +216,7 @@ const UnsettledTrades = ({
       )
     ) : (
       <div className="flex flex-col items-center p-8">
+        <NoSymbolIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
         <p>{t('trade:no-unsettled')}</p>
       </div>
     )

public/locales/en/swap.json

@@ -1,11 +1,13 @@
 {
     "confirm-swap": "Confirm Swap",
+    "connect-swap": "Connect to view your swap history",
     "est-liq-price": "Est. Liq Price",
     "fees-paid-to": "Fees Paid to {{route}}",
     "health-impact": "Health Impact",
     "insufficient-balance": "Insufficient {{symbol}} Balance",
     "insufficient-collateral": "Insufficient Collateral",
     "minimum-received": "Minimum Received",
+    "no-history": "No swap history",
     "pay": "You Pay",
     "rate": "Rate",
     "receive": "You Receive",

public/locales/es/swap.json

@@ -1,11 +1,13 @@
 {
     "confirm-swap": "Confirm Swap",
+    "connect-swap": "Connect to view your swap history",
     "est-liq-price": "Est. Liq Price",
     "fees-paid-to": "Fees Paid to {{route}}",
     "health-impact": "Health Impact",
     "insufficient-balance": "Insufficient {{symbol}} Balance",
     "insufficient-collateral": "Insufficient Collateral",
     "minimum-received": "Minimum Received",
+    "no-history": "No swap history",
     "pay": "You Pay",
     "rate": "Rate",
     "receive": "You Receive",

public/locales/ru/swap.json

@@ -1,11 +1,13 @@
 {
     "confirm-swap": "Confirm Swap",
+    "connect-swap": "Connect to view your swap history",
     "est-liq-price": "Est. Liq Price",
     "fees-paid-to": "Fees Paid to {{route}}",
     "health-impact": "Health Impact",
     "insufficient-balance": "Insufficient {{symbol}} Balance",
     "insufficient-collateral": "Insufficient Collateral",
     "minimum-received": "Minimum Received",
+    "no-history": "No swap history",
     "pay": "You Pay",
     "rate": "Rate",
     "receive": "You Receive",

public/locales/zh/swap.json

@@ -1,11 +1,13 @@
 {
     "confirm-swap": "Confirm Swap",
+    "connect-swap": "Connect to view your swap history",
     "est-liq-price": "Est. Liq Price",
     "fees-paid-to": "Fees Paid to {{route}}",
     "health-impact": "Health Impact",
     "insufficient-balance": "Insufficient {{symbol}} Balance",
     "insufficient-collateral": "Insufficient Collateral",
     "minimum-received": "Minimum Received",
+    "no-history": "No swap history",
     "pay": "You Pay",
     "rate": "Rate",
     "receive": "You Receive",

public/locales/zh_tw/swap.json

@@ -1,11 +1,13 @@
 {
     "confirm-swap": "Confirm Swap",
+    "connect-swap": "Connect to view your swap history",
     "est-liq-price": "Est. Liq Price",
     "fees-paid-to": "Fees Paid to {{route}}",
     "health-impact": "Health Impact",
     "insufficient-balance": "Insufficient {{symbol}} Balance",
     "insufficient-collateral": "Insufficient Collateral",
     "minimum-received": "Minimum Received",
+    "no-history": "No swap history",
     "pay": "You Pay",
     "rate": "Rate",
     "receive": "You Receive",