Merge pull request #169 from blockworks-foundation/manual-refresh

add manual refresh button

components/account/AccountTabs.tsx

@@ -11,6 +11,7 @@ import PerpPositions from '@components/trade/PerpPositions'
 import useOpenPerpPositions from 'hooks/useOpenPerpPositions'
 import OpenOrders from '@components/trade/OpenOrders'
 import HistoryTabs from './HistoryTabs'
+import ManualRefresh from '@components/shared/ManualRefresh'
 
 const AccountTabs = () => {
   const [activeTab, setActiveTab] = useState('balances')
@@ -42,7 +43,7 @@ const AccountTabs = () => {
 
   return (
     <>
-      <div className="hide-scroll overflow-x-auto border-b border-th-bkg-3">
+      <div className="hide-scroll flex items-center overflow-x-auto border-b border-th-bkg-3">
         <TabButtons
           activeValue={activeTab}
           onChange={(v) => setActiveTab(v)}
@@ -50,6 +51,11 @@ const AccountTabs = () => {
           showBorders
           fillWidth={isMobile}
         />
+        <ManualRefresh
+          classNames="fixed bottom-16 right-4 lg:relative lg:bottom-0 md:bottom-6 md:right-6 z-10 shadow-lg lg:shadow-none bg-th-bkg-3 lg:bg-transparent"
+          hideBg={isMobile}
+          size={isMobile ? 'large' : 'small'}
+        />
       </div>
       <TabContent activeTab={activeTab} />
     </>

components/shared/ManualRefresh.tsx

@@ -0,0 +1,61 @@
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'next-i18next'
+import mangoStore from '@store/mangoStore'
+import useMangoAccount from 'hooks/useMangoAccount'
+import Tooltip from './Tooltip'
+import { IconButton } from './Button'
+import { ArrowPathIcon } from '@heroicons/react/20/solid'
+
+const ManualRefresh = ({
+  classNames,
+  hideBg = false,
+  size,
+}: {
+  classNames?: string
+  hideBg?: boolean
+  size?: 'small' | 'medium' | 'large'
+}) => {
+  const { t } = useTranslation('common')
+  const [spin, setSpin] = useState(false)
+  const actions = mangoStore((s) => s.actions)
+  const { mangoAccountAddress } = useMangoAccount()
+
+  const handleRefreshData = async () => {
+    setSpin(true)
+    await actions.fetchGroup()
+    if (mangoAccountAddress) {
+      await actions.reloadMangoAccount()
+      actions.fetchOpenOrders()
+    }
+  }
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout
+    if (spin) {
+      timer = setTimeout(() => setSpin(false), 5000)
+    }
+
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [spin])
+
+  return (
+    <div className={`${classNames} rounded-full`}>
+      <Tooltip content={t('refresh-data')} className="py-1 text-xs">
+        <IconButton
+          hideBg={hideBg}
+          onClick={handleRefreshData}
+          disabled={spin}
+          size={size}
+        >
+          <ArrowPathIcon
+            className={`h-5 w-5 ${spin ? 'animate-spin' : null}`}
+          />
+        </IconButton>
+      </Tooltip>
+    </div>
+  )
+}
+
+export default ManualRefresh

components/swap/SwapInfoTabs.tsx

@@ -4,11 +4,16 @@ import SwapTradeBalances from '../shared/BalancesTable'
 import mangoStore from '@store/mangoStore'
 import SwapHistoryTable from './SwapHistoryTable'
 import useMangoAccount from 'hooks/useMangoAccount'
+import ManualRefresh from '@components/shared/ManualRefresh'
+import { useViewport } from 'hooks/useViewport'
+import { breakpoints } from 'utils/theme'
 
 const SwapInfoTabs = () => {
   const [selectedTab, setSelectedTab] = useState('balances')
   const openOrders = mangoStore((s) => s.mangoAccount.openOrders)
   const { mangoAccount } = useMangoAccount()
+  const { width } = useViewport()
+  const isMobile = width ? width < breakpoints.lg : false
 
   const tabsWithCount: [string, number][] = useMemo(() => {
     return [
@@ -19,13 +24,18 @@ const SwapInfoTabs = () => {
 
   return (
     <div className="hide-scroll h-full overflow-y-scroll">
-      <div className="sticky top-0 z-10 border-b border-th-bkg-3">
+      <div className="flex items-center border-b border-th-bkg-3">
         <TabButtons
           activeValue={selectedTab}
           onChange={(tab: string) => setSelectedTab(tab)}
           values={tabsWithCount}
           showBorders
         />
+        <ManualRefresh
+          classNames="fixed bottom-16 right-4 lg:relative lg:bottom-0 md:bottom-6 md:right-6 z-10 shadow-lg lg:shadow-none bg-th-bkg-3 lg:bg-transparent"
+          hideBg={isMobile}
+          size={isMobile ? 'large' : 'small'}
+        />
       </div>
       {selectedTab === 'balances' ? <SwapTradeBalances /> : null}
       {selectedTab === 'swap:swap-history' ? <SwapHistoryTable /> : null}

components/trade/AdvancedMarketHeader.tsx

@@ -20,6 +20,9 @@ import SpotMarketDetailsModal from '@components/modals/SpotMarketDetailsModal'
 import { useQuery } from '@tanstack/react-query'
 import { MANGO_DATA_OPENBOOK_URL } from 'utils/constants'
 import { TickerData } from 'types'
+import ManualRefresh from '@components/shared/ManualRefresh'
+import { useViewport } from 'hooks/useViewport'
+import { breakpoints } from 'utils/theme'
 
 export const fetchSpotVolume = async () => {
   try {
@@ -53,6 +56,8 @@ const AdvancedMarketHeader = ({
   const previousMarketName = usePrevious(selectedMarketName)
   const [showMarketDetails, setShowMarketDetails] = useState(false)
   const { group } = useMangoGroup()
+  const { width } = useViewport()
+  const isMobile = width ? width < breakpoints.md : false
 
   const {
     data: spotVolumeData,
@@ -227,6 +232,10 @@ const AdvancedMarketHeader = ({
             )}
           </div>
           <div className="ml-6 flex items-center space-x-4">
+            <ManualRefresh
+              hideBg={isMobile}
+              size={isMobile ? undefined : 'small'}
+            />
             <LinkButton
               className="flex items-center whitespace-nowrap text-th-fgd-3"
               onClick={() => setShowMarketDetails(true)}

public/locales/en/common.json

@@ -118,6 +118,7 @@
   "quantity": "Quantity",
   "rate": "Rate (APR)",
   "rates": "Rates (APR)",
+  "refresh-data": "Manually refresh data",
   "remove": "Remove",
   "remove-delegate": "Remove Delegate",
   "repay": "Repay",

public/locales/es/common.json

@@ -118,6 +118,7 @@
   "quantity": "Quantity",
   "rate": "Rate (APR)",
   "rates": "Rates (APR)",
+  "refresh-data": "Manually refresh data",
   "remove": "Remove",
   "remove-delegate": "Remove Delegate",
   "repay": "Repay",

public/locales/ru/common.json

@@ -118,6 +118,7 @@
   "quantity": "Quantity",
   "rate": "Rate (APR)",
   "rates": "Rates (APR)",
+  "refresh-data": "Manually refresh data",
   "remove": "Remove",
   "remove-delegate": "Remove Delegate",
   "repay": "Repay",

public/locales/zh/common.json

@@ -118,6 +118,7 @@
   "quantity": "数量",
   "rate": "利率(APR)",
   "rates": "利率(APR)",
+  "refresh-data": "Manually refresh data",
   "remove": "删除",
   "remove-delegate": "铲除委托",
   "repay": "归还",

public/locales/zh_tw/common.json

@@ -118,6 +118,7 @@
   "quantity": "數量",
   "rate": "利率(APR)",
   "rates": "利率(APR)",
+  "refresh-data": "Manually refresh data",
   "remove": "刪除",
   "remove-delegate": "剷除委託",
   "repay": "歸還",