feat: prepared everything for modal interaction

src/components/account/AccountDetails/index.tsx

@@ -37,6 +37,7 @@ import {
 export default function AccountDetailsController() {
   const address = useStore((s) => s.address)
   const isHLS = useStore((s) => s.isHLS)
+  const isV1 = useStore((s) => s.isV1)
   const { data: _, isLoading } = useAccounts('default', address)
   const { data: accountIds } = useAccountIds(address, false, true)
 
@@ -45,10 +46,11 @@ export default function AccountDetailsController() {
   const account = useCurrentAccount()
   const focusComponent = useStore((s) => s.focusComponent)
   const isOwnAccount = accountId && accountIds?.includes(accountId)
+  const hideAccountDetails = !address || focusComponent || !isOwnAccount || isHLS || isV1
+  const isLoadingAccountDetails = (isLoading && accountId && !focusComponent) || !account
 
-  if (!address || focusComponent || !isOwnAccount || isHLS) return null
+  if (hideAccountDetails) return null
-
+  if (isLoadingAccountDetails) return <Skeleton />
-  if ((isLoading && accountId && !focusComponent) || !account) return <Skeleton />
 
   return <AccountDetails account={account} />
 }

src/components/common/Background.tsx

@@ -15,11 +15,23 @@ export default function Background() {
   )
   const { pathname } = useLocation()
   const page = getPage(pathname)
-  const isHLS = useMemo(() => page.split('-')[0] === 'hls', [page])
+  const [isHLS, isV1] = useMemo(() => [page.split('-')[0] === 'hls', page === 'v1'], [page])
 
   useEffect(() => {
-    useStore.setState({ isHLS })
+    useStore.setState({ isHLS: isHLS, isV1: isV1 })
-  }, [isHLS])
+  }, [isHLS, isV1])
+
+  const [primaryOrbClassName, secondaryOrbClassName, tertiaryOrbClassName, bodyClassName] =
+    useMemo(() => {
+      if (isHLS) {
+        return ['bg-orb-primary-hls', 'bg-orb-secondary-hls', 'bg-orb-tertiary-hls', 'bg-body-hls']
+      }
+      if (isV1) {
+        return ['bg-orb-primary-v1', 'bg-orb-secondary-v1', 'bg-orb-tertiary-v1', 'bg-body-v1']
+      }
+
+      return ['bg-orb-primary', 'bg-orb-secondary', 'bg-orb-tertiary', 'bg-body']
+    }, [isHLS, isV1])
 
   return (
     <div
@@ -27,7 +39,7 @@ export default function Background() {
         'fixed inset-0',
         'w-full h-full',
         'overflow-hidden pointer-events-none background ',
-        isHLS ? 'bg-body-hls' : 'bg-body',
+        bodyClassName,
         !reduceMotion && 'transition-bg duration-1000 delay-300',
       )}
     >
@@ -39,7 +51,7 @@ export default function Background() {
           'max-h-[500px] max-w-[500px]',
           'left-[-10vw] top-[-10vw]',
           'blur-orb-primary',
-          isHLS ? ' bg-orb-primary-hls' : 'bg-orb-primary',
+          primaryOrbClassName,
           'translate-x-0 translate-y-0 rounded-full opacity-20',
           !reduceMotion && 'animate-[float_120s_ease-in-out_infinite_2s]',
           !reduceMotion && 'transition-bg duration-1000 delay-300',
@@ -53,7 +65,7 @@ export default function Background() {
           'max-h-[1000px] max-w-[1000px]',
           'bottom-[-20vw] right-[-10vw]',
           'blur-orb-secondary',
-          isHLS ? ' bg-orb-secondary-hls' : 'bg-orb-secondary',
+          secondaryOrbClassName,
           'translate-x-0 translate-y-0  rounded-full opacity-30',
           !reduceMotion && 'transition-bg duration-1000 delay-300',
         )}
@@ -66,7 +78,7 @@ export default function Background() {
           'max-h-[600px] max-w-[600px]',
           'right-[-4vw] top-[-10vw]',
           'blur-orb-tertiary ',
-          isHLS ? ' bg-orb-tertiary-hls' : 'bg-orb-tertiary',
+          tertiaryOrbClassName,
           'translate-x-0 translate-y-0 rounded-full opacity-20',
           !reduceMotion && 'animate-[float_180s_ease-in_infinite]',
           !reduceMotion && 'transition-bg duration-1000 delay-300',

src/components/header/DesktopHeader.tsx

@@ -49,7 +49,9 @@ export default function DesktopHeader() {
   const focusComponent = useStore((s) => s.focusComponent)
   const isOracleStale = useStore((s) => s.isOracleStale)
   const isHLS = useStore((s) => s.isHLS)
+  const isV1 = useStore((s) => s.isV1)
   const accountId = useAccountId()
+  const showAccountMenu = address && !isHLS && !isV1
 
   function handleCloseFocusMode() {
     if (focusComponent && focusComponent.onClose) focusComponent.onClose()
@@ -93,7 +95,7 @@ export default function DesktopHeader() {
           <div className='flex gap-4'>
             {showStaleOracle && <OracleResyncButton />}
             {accountId && <RewardsCenter />}
-            {address && !isHLS && <AccountMenu />}
+            {showAccountMenu && <AccountMenu />}
             <Wallet />
             <ChainSelect />
             <Settings />

src/components/v1/Deposits.tsx

@@ -10,8 +10,6 @@ export default function Deposits() {
     return <Fallback />
   }
 
-  console.log(depositAssets)
-
   return (
     <>
       <DepositsTable data={depositAssets} isLoading={false} v1 />

src/components/v1/Table/deposits/Columns/Manage.tsx

@@ -17,8 +17,6 @@ export default function Manage(props: Props) {
   const { data: balances } = useWalletBalances(address)
   const hasBalance = !!balances.find(byDenom(props.data.asset.denom))
 
-  console.log(balances)
-
   const ITEMS: DropDownItem[] = useMemo(
     () => [
       {

src/store/slices/common.ts

@@ -19,5 +19,6 @@ export default function createCommonSlice(set: SetState<CommonSlice>, get: GetSt
     useAutoRepay: true,
     isOracleStale: false,
     isHLS: false,
+    isV1: false,
   }
 }

src/types/interfaces/store/common.d.ts

@@ -18,6 +18,7 @@ interface CommonSlice {
   useAutoRepay: boolean
   isOracleStale: boolean
   isHLS: boolean
+  isV1: boolean
 }
 
 interface FocusComponent {

src/utils/route.ts

@@ -40,6 +40,7 @@ export function getPage(pathname: string): Page {
     'portfolio',
     'hls-farm',
     'hls-staking',
+    'v1',
   ]
   const segments = pathname.split('/')
 

tailwind.config.js

@@ -102,6 +102,7 @@ module.exports = {
         axlusdc: '#478edc',
         body: '#0D0012',
         'body-hls': '#090000',
+        'body-v1': '#10000a',
         'body-dark': '#141621',
         chart: '#220e1d',
         error: '#F04438',
@@ -123,10 +124,13 @@ module.exports = {
         osmo: '#9f1ab9',
         'orb-primary': '#b12f25',
         'orb-primary-hls': '#FF645F',
+        'orb-primary-v1': '#612e4d',
         'orb-secondary': '#530781',
         'orb-secondary-hls': '#a03b45',
+        'orb-secondary-v1': '#692f55',
         'orb-tertiary': '#ff00c7',
         'orb-tertiary-hls': '#FB9562',
+        'orb-tertiary-v1': '#993878',
         profit: '#4CA30D',
         primary: '#FF625E',
         secondary: '#FB9562',