tidy: refactor

* fix: fixed the docker build

* tidy: cleanup

.env

@@ -1,13 +0,0 @@
-# DO NOT EDIT THIS FILE WHEN USING DOCKER
-# These values are used to replace the values in the built app, 
-# you should pass environment variables as defined in README.md
-
-# CONFIG #
-NEXT_PUBLIC_NETWORK=mainnet
-
-# OSMOSIS-1 #
-NEXT_PUBLIC_OSMOSIS_RPC=APP_NEXT_OSMOSIS_RPC
-NEXT_PUBLIC_OSMOSIS_REST=APP_NEXT_OSMOSIS_REST
-
-# WALLET CONNECT #
-NEXT_PUBLIC_WALLET_CONNECT_ID=APP_NEXT_WALLET_CONNECT_ID

src/components/account/Health/HealthBar.tsx

@@ -63,16 +63,22 @@ export default function HealthBar({
       health={isUpdated ? updatedHealth : health}
       healthFactor={isUpdated ? updatedHealthFactor : healthFactor}
     >
-      <>
+      <div className={classNames('flex w-full', showIcon && 'gap-2')}>
         {showIcon && (
           <HealthIcon
             health={health}
             isLoading={healthFactor === 0}
-            className={classNames('mr-2', iconClassName)}
+            className={iconClassName}
             colorClass='text-white'
           />
         )}
-        <div className={classNames('flex w-full', 'rounded-full overflow-hidden', className)}>
+        <div
+          className={classNames(
+            'flex w-full flex-shrink',
+            'rounded-full overflow-hidden',
+            className,
+          )}
+        >
           <svg
             version='1.1'
             xmlns='http://www.w3.org/2000/svg'
@@ -153,7 +159,7 @@ export default function HealthBar({
             )}
           </svg>
         </div>
-      </>
+      </div>
     </HealthTooltip>
   )
 }

src/components/account/Health/HealthIcon.tsx

@@ -5,7 +5,7 @@ import { ExclamationMarkCircled, Heart } from 'components/common/Icons'
 interface Props {
   isLoading: boolean
   health: number
-  className: string
+  className?: string
   colorClass?: string
 }
 
@@ -14,9 +14,9 @@ export default function HealthIcon(props: Props) {
   const color = colorClass ?? 'text-white'
 
   return (
-    <>
+    <div className='w-5'>
       {!isLoading && health === 0 ? (
-        <ExclamationMarkCircled className={classNames('w-5 text-loss animate-pulse', className)} />
+        <ExclamationMarkCircled className={classNames(' text-loss animate-pulse', className)} />
       ) : (
         <Heart
           className={classNames(
@@ -26,6 +26,6 @@ export default function HealthIcon(props: Props) {
           )}
         />
       )}
-    </>
+    </div>
   )
 }

src/components/common/Tooltip/index.tsx

@@ -48,7 +48,7 @@ export const Tooltip = (props: Props) => {
       visible={props.visible}
     >
       {props.children ? (
-        <span
+        <div
           className={classNames(
             props.underline &&
               'border-b hover:cursor-help  border-dashed border-white/20 pb-1 hover:border-transparent',
@@ -57,7 +57,7 @@ export const Tooltip = (props: Props) => {
           )}
         >
           {props.children}
-        </span>
+        </div>
       ) : (
         <span
           className={classNames(

src/components/portfolio/Account/BreadCrumbs.tsx

@@ -19,7 +19,9 @@ export default function PortfolioAccountPageHeader(props: Props) {
       <NavLink to={getRoute('portfolio', searchParams, address, selectedAccountId)}>
         <Text className='text-white/40'>Portfolio</Text>
       </NavLink>
+      <div className='h-3'>
         <ArrowRight className='h-3 text-white/60 ' />
+      </div>
       <Text tag='span'>Credit Account {props.accountId}</Text>
     </div>
   )

src/components/portfolio/Card/Skeleton.tsx

@@ -2,9 +2,9 @@ import React from 'react'
 
 import HealthBar from 'components/account/Health/HealthBar'
 import Card from 'components/common/Card'
-import HLSTag from 'components/hls/HLSTag'
 import Text from 'components/common/Text'
 import TitleAndSubCell from 'components/common/TitleAndSubCell'
+import HLSTag from 'components/hls/HLSTag'
 
 interface Props {
   stats: { title: React.ReactNode; sub: string }[]
@@ -33,7 +33,7 @@ export default function Skeleton(props: Props) {
           <TitleAndSubCell key={`${accountId}-${sub}`} title={title} sub={sub} />
         ))}
       </div>
-      <div className='flex gap-1 mt-6'>
+      <div className='flex mt-6'>
         <HealthBar health={health} healthFactor={healthFactor} showIcon />
       </div>
     </Card>

src/components/portfolio/SummarySkeleton.tsx

@@ -3,10 +3,10 @@ import React from 'react'
 import HealthBar from 'components/account/Health/HealthBar'
 import HealthIcon from 'components/account/Health/HealthIcon'
 import Card from 'components/common/Card'
-import HLSTag from 'components/hls/HLSTag'
 import Loading from 'components/common/Loading'
 import Text from 'components/common/Text'
 import TitleAndSubCell from 'components/common/TitleAndSubCell'
+import HLSTag from 'components/hls/HLSTag'
 import useAccount from 'hooks/accounts/useAccount'
 import { DEFAULT_PORTFOLIO_STATS } from 'utils/constants'
 
@@ -31,9 +31,11 @@ export default function SummarySkeleton(props: Props) {
           {account?.kind === 'high_levered_strategy' && <HLSTag />}
         </div>
         {health !== undefined && healthFactor !== undefined && (
-          <div className='flex gap-1 max-w-[300px] flex-grow'>
-            <HealthIcon isLoading={healthFactor === 0} health={health} className='w-5' />
-            <HealthBar health={health} healthFactor={healthFactor} className='h-full' />
+          <div className='flex items-center justify-end flex-grow gap-2'>
+            <HealthIcon isLoading={healthFactor === 0} health={health} />
+            <div className='w-[260px]'>
+              <HealthBar health={health} healthFactor={healthFactor} className='h-3' />
+            </div>
           </div>
         )}
       </div>

src/utils/url.ts

@@ -1,4 +1,8 @@
 export const getUrl = (baseUrl: string, path: string): string => {
+  const isPlaceholder = baseUrl.split('APP_').length > 1
+
+  if (isPlaceholder) return baseUrl + '/' + path
+
   const url = new URL(baseUrl)
 
   if (process.env.NEXT_PUBLIC_API_KEY)