style new app version refresh button

components/Layout.tsx

@@ -1,6 +1,6 @@
 import SideNav from './SideNav'
-import { ReactNode, useCallback, useEffect } from 'react'
+import { Fragment, ReactNode, useCallback, useEffect, useState } from 'react'
-import { ChevronRightIcon } from '@heroicons/react/20/solid'
+import { ArrowPathIcon, ChevronRightIcon } from '@heroicons/react/20/solid'
 import { useViewport } from '../hooks/useViewport'
 import { breakpoints } from '../utils/theme'
 import mangoStore from '@store/mangoStore'
@@ -13,6 +13,9 @@ import { useWallet } from '@solana/wallet-adapter-react'
 import SuccessParticles from './shared/SuccessParticles'
 import { tsParticles } from 'tsparticles-engine'
 import { loadFull } from 'tsparticles'
+import useInterval from './shared/useInterval'
+import { Transition } from '@headlessui/react'
+import { useTranslation } from 'next-i18next'
 
 const sideBarAnimationDuration = 500
 
@@ -98,9 +101,48 @@ const Layout = ({ children }: { children: ReactNode }) => {
           </div>
           {children}
         </div>
+        <DeployRefreshManager />
       </div>
     </>
   )
 }
 
 export default Layout
+
+function DeployRefreshManager(): JSX.Element | null {
+  const { t } = useTranslation('common')
+  const [newBuildAvailable, setNewBuildAvailable] = useState(false)
+  useInterval(async () => {
+    const response = await fetch('/api/build-id')
+    const { buildId } = await response.json()
+
+    if (buildId && process.env.BUILD_ID && buildId !== process.env.BUILD_ID) {
+      // There's a new version deployed that we need to load
+      setNewBuildAvailable(true)
+    }
+  }, 30000)
+
+  return (
+    <Transition
+      appear={true}
+      show={newBuildAvailable}
+      as={Fragment}
+      enter="transition ease-in duration-300"
+      enterFrom="translate-y-0"
+      enterTo="-translate-y-[130px] md:-translate-y-20"
+      leave="transition ease-out"
+      leaveFrom="opacity-100"
+      leaveTo="opacity-0"
+    >
+      <button
+        className="default-transition fixed -bottom-[46px] left-1/2 z-50 flex -translate-x-1/2 items-center rounded-full border border-th-bkg-4 bg-th-bkg-3 py-3 px-4 shadow-md focus:outline-none md:hover:bg-th-bkg-4 md:hover:shadow-none"
+        onClick={() => window.location.reload()}
+      >
+        <p className="mr-2 whitespace-nowrap text-th-fgd-1">
+          {t('new-version')}
+        </p>
+        <ArrowPathIcon className="h-5 w-5" />
+      </button>
+    </Transition>
+  )
+}

components/TopBar.tsx

@@ -25,29 +25,6 @@ import { useViewport } from 'hooks/useViewport'
 import { breakpoints } from 'utils/theme'
 import AccountsButton from './AccountsButton'
 import useUnownedAccount from 'hooks/useUnownedAccount'
-import useInterval from './shared/useInterval'
-
-export function DeployRefreshManager(): JSX.Element | null {
-  const [newBuildAvailable, setNewBuildAvailable] = useState(false)
-  useInterval(async () => {
-    const response = await fetch('/api/build-id')
-    const { buildId } = await response.json()
-
-    if (buildId && process.env.BUILD_ID && buildId !== process.env.BUILD_ID) {
-      // There's a new version deployed that we need to load
-      setNewBuildAvailable(true)
-    }
-  }, 30000)
-
-  return newBuildAvailable ? (
-    <div className="absolute left-1/2 z-10 flex -translate-x-1/2 items-center rounded-full border border-th-bkg-3 bg-th-bkg-1 py-2 px-4">
-      <ExclamationTriangleIcon className="h-5 w-5 text-th-fgd-1" />
-      <p className="ml-2 text-th-fgd-1">
-        Refresh for the latest version of the app
-      </p>
-    </div>
-  ) : null
-}
 
 const TopBar = () => {
   const { t } = useTranslation('common')
@@ -132,11 +109,7 @@ const TopBar = () => {
             </p>
           </div>
         ) : null}
-        <DeployRefreshManager />
         <div className="flex items-center">
-          {/* <div className="px-3 md:px-4">
-            <ThemeSwitcher />
-          </div> */}
           {isUnownedAccount || (!connected && isMobile) ? null : (
             <Button
               onClick={() => handleDepositWithdrawModal('deposit')}

public/locales/en/common.json

@@ -95,6 +95,7 @@
   "new-account": "New Account",
   "new-account-failed": "Failed to create account",
   "new-account-success": "Your new account is ready 😎",
+  "new-version": "New version available",
   "optional": "Optional",
   "outstanding-balance": "Outstanding Balance",
   "perp": "Perp",

public/locales/es/common.json

@@ -94,6 +94,7 @@
   "new-account": "New Account",
   "new-account-failed": "Failed to create account",
   "new-account-success": "Your new account is ready 😎",
+  "new-version": "New version available",
   "optional": "Optional",
   "outstanding-balance": "Outstanding Balance",
   "perp": "Perp",

public/locales/es/swap.json

@@ -27,7 +27,7 @@
     "swap-history": "Swap History",
     "swap-into-1": "Borrow against your collateral and swap with up to 5x leverage.",
     "swap-into-2": "Swap your Mango assets via the top DEXs on Solana and get the best possible price.",
-    "swap-into-3": "The sky's the limit. Long or short any token vs any other.",
+    "swap-into-3": "Use the slider to set your swap size. Margin can be switched off in swap settings.",
     "swap-route": "Swap Route",
     "tooltip-borrow-balance": "You'll use your {{balance}} {{token}} balance and borrow {{borrowAmount}} {{token}} to execute this swap. The current {{token}} variable borrow rate is {{rate}}%",
     "tooltip-borrow-no-balance": "You'll borrow {{borrowAmount}} {{token}} to execute this swap. The current {{token}} variable borrow rate is {{rate}}%",

public/locales/ru/common.json

@@ -94,6 +94,7 @@
   "new-account": "New Account",
   "new-account-failed": "Failed to create account",
   "new-account-success": "Your new account is ready 😎",
+  "new-version": "New version available",
   "optional": "Optional",
   "outstanding-balance": "Outstanding Balance",
   "perp": "Perp",

public/locales/ru/swap.json

@@ -27,7 +27,7 @@
     "swap-history": "Swap History",
     "swap-into-1": "Borrow against your collateral and swap with up to 5x leverage.",
     "swap-into-2": "Swap your Mango assets via the top DEXs on Solana and get the best possible price.",
-    "swap-into-3": "The sky's the limit. Long or short any token vs any other.",
+    "swap-into-3": "Use the slider to set your swap size. Margin can be switched off in swap settings.",
     "swap-route": "Swap Route",
     "tooltip-borrow-balance": "You'll use your {{balance}} {{token}} balance and borrow {{borrowAmount}} {{token}} to execute this swap. The current {{token}} variable borrow rate is {{rate}}%",
     "tooltip-borrow-no-balance": "You'll borrow {{borrowAmount}} {{token}} to execute this swap. The current {{token}} variable borrow rate is {{rate}}%",

public/locales/zh/common.json

@@ -94,6 +94,7 @@
   "new-account": "New Account",
   "new-account-failed": "Failed to create account",
   "new-account-success": "Your new account is ready 😎",
+  "new-version": "New version available",
   "optional": "Optional",
   "outstanding-balance": "Outstanding Balance",
   "perp": "Perp",

public/locales/zh/swap.json

@@ -27,7 +27,7 @@
     "swap-history": "Swap History",
     "swap-into-1": "Borrow against your collateral and swap with up to 5x leverage.",
     "swap-into-2": "Swap your Mango assets via the top DEXs on Solana and get the best possible price.",
-    "swap-into-3": "The sky's the limit. Long or short any token vs any other.",
+    "swap-into-3": "Use the slider to set your swap size. Margin can be switched off in swap settings.",
     "swap-route": "Swap Route",
     "tooltip-borrow-balance": "You'll use your {{balance}} {{token}} balance and borrow {{borrowAmount}} {{token}} to execute this swap. The current {{token}} variable borrow rate is {{rate}}%",
     "tooltip-borrow-no-balance": "You'll borrow {{borrowAmount}} {{token}} to execute this swap. The current {{token}} variable borrow rate is {{rate}}%",

public/locales/zh_tw/common.json

@@ -94,6 +94,7 @@
   "new-account": "New Account",
   "new-account-failed": "Failed to create account",
   "new-account-success": "Your new account is ready 😎",
+  "new-version": "New version available",
   "optional": "Optional",
   "outstanding-balance": "Outstanding Balance",
   "perp": "Perp",

public/locales/zh_tw/swap.json

@@ -27,7 +27,7 @@
     "swap-history": "Swap History",
     "swap-into-1": "Borrow against your collateral and swap with up to 5x leverage.",
     "swap-into-2": "Swap your Mango assets via the top DEXs on Solana and get the best possible price.",
-    "swap-into-3": "The sky's the limit. Long or short any token vs any other.",
+    "swap-into-3": "Use the slider to set your swap size. Margin can be switched off in swap settings.",
     "swap-route": "Swap Route",
     "tooltip-borrow-balance": "You'll use your {{balance}} {{token}} balance and borrow {{borrowAmount}} {{token}} to execute this swap. The current {{token}} variable borrow rate is {{rate}}%",
     "tooltip-borrow-no-balance": "You'll borrow {{borrowAmount}} {{token}} to execute this swap. The current {{token}} variable borrow rate is {{rate}}%",