From 211bd40de18fcec7f644e83f49c2525a3e81854c Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Fri, 20 Jan 2023 12:45:08 +1100
Subject: [PATCH] add connect wallet empty states

---
 components/account/ActivityFeedTable.tsx |  9 ++-
 components/shared/BalancesTable.tsx      |  9 ++-
 components/swap/SwapHistoryTable.tsx     |  9 ++-
 components/trade/OpenOrders.tsx          | 97 ++++++++++++------------
 components/trade/PerpPositions.tsx       |  9 ++-
 components/trade/TradeHistory.tsx        |  9 ++-
 components/trade/UnsettledTrades.tsx     | 65 ++++++++--------
 public/locales/en/common.json            |  1 +
 public/locales/en/trade.json             |  1 +
 public/locales/es/common.json            |  1 +
 public/locales/es/trade.json             |  1 +
 public/locales/ru/common.json            |  1 +
 public/locales/ru/trade.json             |  1 +
 public/locales/zh/common.json            |  1 +
 public/locales/zh/trade.json             |  1 +
 public/locales/zh_tw/common.json         |  1 +
 public/locales/zh_tw/trade.json          |  1 +
 17 files changed, 133 insertions(+), 84 deletions(-)

diff --git a/components/account/ActivityFeedTable.tsx b/components/account/ActivityFeedTable.tsx
index 1f9c87b5..a137cedc 100644
--- a/components/account/ActivityFeedTable.tsx
+++ b/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'
@@ -9,6 +10,7 @@ import {
   ChevronRightIcon,
   NoSymbolIcon,
 } from '@heroicons/react/20/solid'
+import { useWallet } from '@solana/wallet-adapter-react'
 import mangoStore, { LiquidationFeedItem } from '@store/mangoStore'
 import dayjs from 'dayjs'
 import useLocalStorageState from 'hooks/useLocalStorageState'
@@ -42,6 +44,7 @@ const ActivityFeedTable = ({
   const actions = mangoStore.getState().actions
   const loadActivityFeed = mangoStore((s) => s.activityFeed.loading)
   const [offset, setOffset] = useState(0)
+  const { connected } = useWallet()
   const [preferredExplorer] = useLocalStorageState(
     PREFERRED_EXPLORER_KEY,
     EXPLORERS[0]
@@ -327,11 +330,15 @@ const ActivityFeedTable = ({
         </div>
       ) : null}
     </>
-  ) : (
+  ) : connected ? (
     <div className="flex flex-col items-center p-8">
       <NoSymbolIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
       <p>{t('activity:no-activity')}</p>
     </div>
+  ) : (
+    <div className="p-8">
+      <ConnectEmptyState text={t('activity:connect-activity')} />
+    </div>
   )
 }
 
diff --git a/components/shared/BalancesTable.tsx b/components/shared/BalancesTable.tsx
index 147c451c..217bbf87 100644
--- a/components/shared/BalancesTable.tsx
+++ b/components/shared/BalancesTable.tsx
@@ -22,6 +22,8 @@ import { Table, Td, Th, TrBody, TrHead } from './TableElements'
 import useSelectedMarket from 'hooks/useSelectedMarket'
 import useMangoGroup from 'hooks/useMangoGroup'
 import AmountWithValue from './AmountWithValue'
+import ConnectEmptyState from './ConnectEmptyState'
+import { useWallet } from '@solana/wallet-adapter-react'
 
 const BalancesTable = () => {
   const { t } = useTranslation(['common', 'trade'])
@@ -30,6 +32,7 @@ const BalancesTable = () => {
   const { group } = useMangoGroup()
   const { mangoTokens } = useJupiterMints()
   const { width } = useViewport()
+  const { connected } = useWallet()
   const showTableView = width ? width > breakpoints.md : false
 
   const banks = useMemo(() => {
@@ -210,11 +213,15 @@ const BalancesTable = () => {
         })}
       </>
     )
-  ) : (
+  ) : connected ? (
     <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-balances')}</p>
     </div>
+  ) : (
+    <div className="p-8">
+      <ConnectEmptyState text={t('connect-balances')} />
+    </div>
   )
 }
 
diff --git a/components/swap/SwapHistoryTable.tsx b/components/swap/SwapHistoryTable.tsx
index 0b4d7046..1e977374 100644
--- a/components/swap/SwapHistoryTable.tsx
+++ b/components/swap/SwapHistoryTable.tsx
@@ -27,6 +27,8 @@ import useJupiterMints from 'hooks/useJupiterMints'
 import { Table, Td, Th, TrBody, TrHead } from '@components/shared/TableElements'
 import { EXPLORERS } from '@components/settings/PreferredExplorerSettings'
 import useMangoAccount from 'hooks/useMangoAccount'
+import ConnectEmptyState from '@components/shared/ConnectEmptyState'
+import { useWallet } from '@solana/wallet-adapter-react'
 
 const SwapHistoryTable = () => {
   const { t } = useTranslation(['common', 'settings', 'swap'])
@@ -37,6 +39,7 @@ const SwapHistoryTable = () => {
   const [offset, setOffset] = useState(0)
   const actions = mangoStore.getState().actions
   const { mangoAccountAddress } = useMangoAccount()
+  const { connected } = useWallet()
   const { width } = useViewport()
   const showTableView = width ? width > breakpoints.md : false
   const [preferredExplorer] = useLocalStorageState(
@@ -437,11 +440,15 @@ const SwapHistoryTable = () => {
         </div>
       ) : null}
     </>
-  ) : (
+  ) : connected ? (
     <div className="flex flex-col items-center p-8">
       <NoSymbolIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
       <p>{t('swap:no-history')}</p>
     </div>
+  ) : (
+    <div className="p-8">
+      <ConnectEmptyState text={t('swap:connect-swap')} />
+    </div>
   )
 }
 
diff --git a/components/trade/OpenOrders.tsx b/components/trade/OpenOrders.tsx
index b33ca4bb..30522f62 100644
--- a/components/trade/OpenOrders.tsx
+++ b/components/trade/OpenOrders.tsx
@@ -9,6 +9,7 @@ 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'
@@ -235,7 +236,7 @@ const OpenOrders = () => {
             <Th className="w-[16.67%] text-right">{t('trade:size')}</Th>
             <Th className="w-[16.67%] text-right">{t('price')}</Th>
             <Th className="w-[16.67%] text-right">{t('value')}</Th>
-            {connected ? <Th className="w-[16.67%] text-right"></Th> : null}
+            <Th className="w-[16.67%] text-right"></Th>
           </TrHead>
         </thead>
         <tbody>
@@ -326,58 +327,56 @@ const OpenOrders = () => {
                     <Td className="w-[16.67%] text-right">
                       {formatFixedDecimals(o.size * o.price, true, true)}
                     </Td>
-                    {connected ? (
-                      <Td className="w-[16.67%]">
-                        <div className="flex justify-end space-x-2">
-                          {modifyOrderId !== o.orderId.toString() ? (
-                            <>
+                    <Td className="w-[16.67%]">
+                      <div className="flex justify-end space-x-2">
+                        {modifyOrderId !== o.orderId.toString() ? (
+                          <>
+                            <IconButton
+                              onClick={() => showEditOrderForm(o, tickSize)}
+                              size="small"
+                            >
+                              <PencilIcon className="h-4 w-4" />
+                            </IconButton>
+                            <Tooltip content={t('cancel')}>
                               <IconButton
-                                onClick={() => showEditOrderForm(o, tickSize)}
+                                disabled={cancelId === o.orderId.toString()}
+                                onClick={() =>
+                                  o instanceof PerpOrder
+                                    ? handleCancelPerpOrder(o)
+                                    : handleCancelSerumOrder(o)
+                                }
                                 size="small"
                               >
-                                <PencilIcon className="h-4 w-4" />
-                              </IconButton>
-                              <Tooltip content={t('cancel')}>
-                                <IconButton
-                                  disabled={cancelId === o.orderId.toString()}
-                                  onClick={() =>
-                                    o instanceof PerpOrder
-                                      ? handleCancelPerpOrder(o)
-                                      : handleCancelSerumOrder(o)
-                                  }
-                                  size="small"
-                                >
-                                  {cancelId === o.orderId.toString() ? (
-                                    <Loading className="h-4 w-4" />
-                                  ) : (
-                                    <TrashIcon className="h-4 w-4" />
-                                  )}
-                                </IconButton>
-                              </Tooltip>
-                            </>
-                          ) : (
-                            <>
-                              <IconButton
-                                onClick={() => modifyOrder(o)}
-                                size="small"
-                              >
-                                {loadingModifyOrder ? (
+                                {cancelId === o.orderId.toString() ? (
                                   <Loading className="h-4 w-4" />
                                 ) : (
-                                  <CheckIcon className="h-4 w-4" />
+                                  <TrashIcon className="h-4 w-4" />
                                 )}
                               </IconButton>
-                              <IconButton
-                                onClick={cancelEditOrderForm}
-                                size="small"
-                              >
-                                <XMarkIcon className="h-4 w-4" />
-                              </IconButton>
-                            </>
-                          )}
-                        </div>
-                      </Td>
-                    ) : null}
+                            </Tooltip>
+                          </>
+                        ) : (
+                          <>
+                            <IconButton
+                              onClick={() => modifyOrder(o)}
+                              size="small"
+                            >
+                              {loadingModifyOrder ? (
+                                <Loading className="h-4 w-4" />
+                              ) : (
+                                <CheckIcon className="h-4 w-4" />
+                              )}
+                            </IconButton>
+                            <IconButton
+                              onClick={cancelEditOrderForm}
+                              size="small"
+                            >
+                              <XMarkIcon className="h-4 w-4" />
+                            </IconButton>
+                          </>
+                        )}
+                      </div>
+                    </Td>
                   </TrBody>
                 )
               })
@@ -529,11 +528,15 @@ const OpenOrders = () => {
         })}
       </div>
     )
-  ) : (
+  ) : connected ? (
     <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>
+  ) : (
+    <div className="p-8">
+      <ConnectEmptyState text={t('trade:connect-orders')} />
+    </div>
   )
 }
 
diff --git a/components/trade/PerpPositions.tsx b/components/trade/PerpPositions.tsx
index b667178a..a63323de 100644
--- a/components/trade/PerpPositions.tsx
+++ b/components/trade/PerpPositions.tsx
@@ -1,7 +1,9 @@
 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 { NoSymbolIcon } from '@heroicons/react/20/solid'
+import { useWallet } from '@solana/wallet-adapter-react'
 import mangoStore from '@store/mangoStore'
 import useMangoAccount from 'hooks/useMangoAccount'
 import useMangoGroup from 'hooks/useMangoGroup'
@@ -23,6 +25,7 @@ const PerpPositions = () => {
   const { group } = useMangoGroup()
   const perpPositions = mangoStore((s) => s.mangoAccount.perpPositions)
   const { selectedMarket } = useSelectedMarket()
+  const { connected } = useWallet()
   const { mangoAccount } = useMangoAccount()
 
   const handlePositionClick = (positionSize: number) => {
@@ -144,11 +147,15 @@ const PerpPositions = () => {
         </tbody>
       </Table>
     </div>
-  ) : (
+  ) : connected ? (
     <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>
+  ) : (
+    <div className="p-8">
+      <ConnectEmptyState text={t('trade:connect-positions')} />
+    </div>
   )
 }
 
diff --git a/components/trade/TradeHistory.tsx b/components/trade/TradeHistory.tsx
index 473fed20..0eaa2abe 100644
--- a/components/trade/TradeHistory.tsx
+++ b/components/trade/TradeHistory.tsx
@@ -1,5 +1,6 @@
 import { I80F48, PerpMarket } from '@blockworks-foundation/mango-v4'
 import { IconButton, LinkButton } from '@components/shared/Button'
+import ConnectEmptyState from '@components/shared/ConnectEmptyState'
 import SheenLoader from '@components/shared/SheenLoader'
 import SideBadge from '@components/shared/SideBadge'
 import {
@@ -12,6 +13,7 @@ import {
 } from '@components/shared/TableElements'
 import Tooltip from '@components/shared/Tooltip'
 import { NoSymbolIcon, UsersIcon } from '@heroicons/react/20/solid'
+import { useWallet } from '@solana/wallet-adapter-react'
 import { PublicKey } from '@solana/web3.js'
 import mangoStore from '@store/mangoStore'
 import useMangoAccount from 'hooks/useMangoAccount'
@@ -104,6 +106,7 @@ const TradeHistory = () => {
   )
   const [offset, setOffset] = useState(0)
   const { width } = useViewport()
+  const { connected } = useWallet()
   const showTableView = width ? width > breakpoints.md : false
 
   const openOrderOwner = useMemo(() => {
@@ -379,11 +382,15 @@ const TradeHistory = () => {
         </div>
       ) : null}
     </>
-  ) : (
+  ) : connected ? (
     <div className="flex flex-col items-center p-8">
       <NoSymbolIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
       <p>No trade history</p>
     </div>
+  ) : (
+    <div className="p-8">
+      <ConnectEmptyState text={t('trade:connect-trade-history')} />
+    </div>
   )
 }
 
diff --git a/components/trade/UnsettledTrades.tsx b/components/trade/UnsettledTrades.tsx
index 6530c2c2..6df9ec67 100644
--- a/components/trade/UnsettledTrades.tsx
+++ b/components/trade/UnsettledTrades.tsx
@@ -16,6 +16,7 @@ import TableMarketName from './TableMarketName'
 import useMangoAccount from 'hooks/useMangoAccount'
 import { useWallet } from '@solana/wallet-adapter-react'
 import { formatDecimal } from 'utils/numbers'
+import ConnectEmptyState from '@components/shared/ConnectEmptyState'
 
 const UnsettledTrades = ({
   unsettledSpotBalances,
@@ -140,7 +141,7 @@ const UnsettledTrades = ({
           <TrHead>
             <Th className="bg-th-bkg-1 text-left">{t('market')}</Th>
             <Th className="bg-th-bkg-1 text-right">{t('trade:amount')}</Th>
-            {connected ? <Th className="bg-th-bkg-1 text-right" /> : null}
+            <Th className="bg-th-bkg-1 text-right" />
           </TrHead>
         </thead>
         <tbody>
@@ -172,24 +173,22 @@ const UnsettledTrades = ({
                     ) : null}
                   </div>
                 </Td>
-                {connected ? (
-                  <Td>
-                    <div className="flex justify-end">
-                      <Tooltip content={t('trade:settle-funds')}>
-                        <IconButton
-                          onClick={() => handleSettleSerumFunds(mktAddress)}
-                          size="small"
-                        >
-                          {settleMktAddress === mktAddress ? (
-                            <Loading className="h-4 w-4" />
-                          ) : (
-                            <CheckIcon className="h-4 w-4" />
-                          )}
-                        </IconButton>
-                      </Tooltip>
-                    </div>
-                  </Td>
-                ) : null}
+                <Td>
+                  <div className="flex justify-end">
+                    <Tooltip content={t('trade:settle-funds')}>
+                      <IconButton
+                        onClick={() => handleSettleSerumFunds(mktAddress)}
+                        size="small"
+                      >
+                        {settleMktAddress === mktAddress ? (
+                          <Loading className="h-4 w-4" />
+                        ) : (
+                          <CheckIcon className="h-4 w-4" />
+                        )}
+                      </IconButton>
+                    </Tooltip>
+                  </div>
+                </Td>
               </TrBody>
             )
           })}
@@ -257,29 +256,31 @@ const UnsettledTrades = ({
                     <span className="font-body text-th-fgd-4">{quote}</span>
                   </span>
                 ) : null}
-                {connected ? (
-                  <IconButton
-                    onClick={() => handleSettleSerumFunds(mktAddress)}
-                    size="medium"
-                  >
-                    {settleMktAddress === mktAddress ? (
-                      <Loading className="h-4 w-4" />
-                    ) : (
-                      <CheckIcon className="h-4 w-4" />
-                    )}
-                  </IconButton>
-                ) : null}
+                <IconButton
+                  onClick={() => handleSettleSerumFunds(mktAddress)}
+                  size="medium"
+                >
+                  {settleMktAddress === mktAddress ? (
+                    <Loading className="h-4 w-4" />
+                  ) : (
+                    <CheckIcon className="h-4 w-4" />
+                  )}
+                </IconButton>
               </div>
             </div>
           )
         })}
       </div>
     )
-  ) : (
+  ) : connected ? (
     <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>
+  ) : (
+    <div className="p-8">
+      <ConnectEmptyState text={t('trade:connect-unsettled')} />
+    </div>
   )
 }
 
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index ddd3cedd..d7f04097 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -37,6 +37,7 @@
   "closing-account": "Closing your account...",
   "collateral-value": "Collateral Value",
   "connect": "Connect",
+  "connect-balances": "Connect to view your balances",
   "connect-helper": "Connect to get started",
   "copy-address": "Copy Address",
   "copy-address-success": "Copied address: {{pk}}",
diff --git a/public/locales/en/trade.json b/public/locales/en/trade.json
index fed60d19..ed5d0453 100644
--- a/public/locales/en/trade.json
+++ b/public/locales/en/trade.json
@@ -6,6 +6,7 @@
     "cancel-order-error": "Failed to cancel order",
     "connect-orders": "Connect to view your open orders",
     "connect-positions": "Connect to view your perp positions",
+    "connect-trade-history": "Connect to view your trade history",
     "connect-unsettled": "Connect to view your unsettled funds",
     "entry-price": "Entry Price",
     "est-slippage": "Est. Slippage",
diff --git a/public/locales/es/common.json b/public/locales/es/common.json
index ddd3cedd..d7f04097 100644
--- a/public/locales/es/common.json
+++ b/public/locales/es/common.json
@@ -37,6 +37,7 @@
   "closing-account": "Closing your account...",
   "collateral-value": "Collateral Value",
   "connect": "Connect",
+  "connect-balances": "Connect to view your balances",
   "connect-helper": "Connect to get started",
   "copy-address": "Copy Address",
   "copy-address-success": "Copied address: {{pk}}",
diff --git a/public/locales/es/trade.json b/public/locales/es/trade.json
index fed60d19..ed5d0453 100644
--- a/public/locales/es/trade.json
+++ b/public/locales/es/trade.json
@@ -6,6 +6,7 @@
     "cancel-order-error": "Failed to cancel order",
     "connect-orders": "Connect to view your open orders",
     "connect-positions": "Connect to view your perp positions",
+    "connect-trade-history": "Connect to view your trade history",
     "connect-unsettled": "Connect to view your unsettled funds",
     "entry-price": "Entry Price",
     "est-slippage": "Est. Slippage",
diff --git a/public/locales/ru/common.json b/public/locales/ru/common.json
index ddd3cedd..d7f04097 100644
--- a/public/locales/ru/common.json
+++ b/public/locales/ru/common.json
@@ -37,6 +37,7 @@
   "closing-account": "Closing your account...",
   "collateral-value": "Collateral Value",
   "connect": "Connect",
+  "connect-balances": "Connect to view your balances",
   "connect-helper": "Connect to get started",
   "copy-address": "Copy Address",
   "copy-address-success": "Copied address: {{pk}}",
diff --git a/public/locales/ru/trade.json b/public/locales/ru/trade.json
index fed60d19..ed5d0453 100644
--- a/public/locales/ru/trade.json
+++ b/public/locales/ru/trade.json
@@ -6,6 +6,7 @@
     "cancel-order-error": "Failed to cancel order",
     "connect-orders": "Connect to view your open orders",
     "connect-positions": "Connect to view your perp positions",
+    "connect-trade-history": "Connect to view your trade history",
     "connect-unsettled": "Connect to view your unsettled funds",
     "entry-price": "Entry Price",
     "est-slippage": "Est. Slippage",
diff --git a/public/locales/zh/common.json b/public/locales/zh/common.json
index ddd3cedd..d7f04097 100644
--- a/public/locales/zh/common.json
+++ b/public/locales/zh/common.json
@@ -37,6 +37,7 @@
   "closing-account": "Closing your account...",
   "collateral-value": "Collateral Value",
   "connect": "Connect",
+  "connect-balances": "Connect to view your balances",
   "connect-helper": "Connect to get started",
   "copy-address": "Copy Address",
   "copy-address-success": "Copied address: {{pk}}",
diff --git a/public/locales/zh/trade.json b/public/locales/zh/trade.json
index fed60d19..ed5d0453 100644
--- a/public/locales/zh/trade.json
+++ b/public/locales/zh/trade.json
@@ -6,6 +6,7 @@
     "cancel-order-error": "Failed to cancel order",
     "connect-orders": "Connect to view your open orders",
     "connect-positions": "Connect to view your perp positions",
+    "connect-trade-history": "Connect to view your trade history",
     "connect-unsettled": "Connect to view your unsettled funds",
     "entry-price": "Entry Price",
     "est-slippage": "Est. Slippage",
diff --git a/public/locales/zh_tw/common.json b/public/locales/zh_tw/common.json
index ddd3cedd..d7f04097 100644
--- a/public/locales/zh_tw/common.json
+++ b/public/locales/zh_tw/common.json
@@ -37,6 +37,7 @@
   "closing-account": "Closing your account...",
   "collateral-value": "Collateral Value",
   "connect": "Connect",
+  "connect-balances": "Connect to view your balances",
   "connect-helper": "Connect to get started",
   "copy-address": "Copy Address",
   "copy-address-success": "Copied address: {{pk}}",
diff --git a/public/locales/zh_tw/trade.json b/public/locales/zh_tw/trade.json
index fed60d19..ed5d0453 100644
--- a/public/locales/zh_tw/trade.json
+++ b/public/locales/zh_tw/trade.json
@@ -6,6 +6,7 @@
     "cancel-order-error": "Failed to cancel order",
     "connect-orders": "Connect to view your open orders",
     "connect-positions": "Connect to view your perp positions",
+    "connect-trade-history": "Connect to view your trade history",
     "connect-unsettled": "Connect to view your unsettled funds",
     "entry-price": "Entry Price",
     "est-slippage": "Est. Slippage",