feat: added external links and marked them accordingly (#740)

src/components/common/chain/ChainLogo.tsx

@@ -11,6 +11,7 @@ export default function ChainLogo(props: Props) {
 
   switch (chainID) {
     case ChainInfoID.Pion1:
+    case ChainInfoID.Neutron1:
       return <Neutron className={className} />
 
     default:

src/components/header/ChainSelect.tsx

@@ -4,17 +4,24 @@ import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
 import { useSWRConfig } from 'swr'
 
 import Button from 'components/common/Button'
-import ChainLogo from 'components/common/chain/ChainLogo'
+import { ExternalLink } from 'components/common/Icons'
 import Overlay from 'components/common/Overlay'
 import Text from 'components/common/Text'
+import ChainLogo from 'components/common/chain/ChainLogo'
 import chains from 'configs/chains'
 import useCurrentChainId from 'hooks/localStorage/useCurrentChainId'
 import useChainConfig from 'hooks/useChainConfig'
 import useToggle from 'hooks/useToggle'
 import useStore from 'store'
 import { NETWORK } from 'types/enums/network'
+import { ChainInfoID } from 'types/enums/wallet'
 import { getPage, getRoute } from 'utils/route'
 
+const v1Outposts = [
+  { chainId: ChainInfoID.Neutron1, name: 'Neutron', url: 'https://neutron.marsprotocol.io' },
+  { chainId: ChainInfoID.Osmosis1, name: 'Osmosis', url: 'https://v1.marsprotocol.io' },
+]
+
 export default function ChainSelect() {
   const [showMenu, setShowMenu] = useToggle()
   const chainConfig = useChainConfig()
@@ -54,11 +61,8 @@ export default function ChainSelect() {
         leftIcon={<ChainLogo chainID={chainConfig.id} className='w-4' />}
         iconClassName='w-5 h-5'
         color='tertiary'
-        onClick={currentChains.length > 1 ? () => setShowMenu() : undefined}
+        onClick={() => setShowMenu()}
-        className={classNames(
+        className={classNames('!p-0 w-8 flex items-center justify-center')}
-          '!p-0 w-8 flex items-center justify-center',
-          currentChains.length === 1 && 'pointer-events-none',
-        )}
       ></Button>
       <Overlay show={showMenu} setShow={setShowMenu} className='right-0 w-[180px] mt-2'>
         <div
@@ -75,7 +79,7 @@ export default function ChainSelect() {
           {currentChains.map(([name, chain]) => (
             <li
               className={classNames(
-                'w-full py-2 flex gap-3 group/chain text-white',
+                'w-full py-2 flex gap-3 group/chain text-white items-center',
                 chainConfig.name === chain.name
                   ? 'pointer-events-none'
                   : 'opacity-60 hover:opacity-100',
@@ -84,11 +88,40 @@ export default function ChainSelect() {
               key={name}
               onClick={() => selectChain(chain)}
             >
-              <ChainLogo chainID={chain.id} className={classNames('w-5')} />
+              <ChainLogo chainID={chain.id} className='w-6' />
               <Text size='sm'>{chain.name}</Text>
             </li>
           ))}
         </ul>
+        {process.env.NEXT_PUBLIC_NETWORK === NETWORK.MAINNET && (
+          <>
+            <div
+              className={classNames(
+                'flex w-full items-center bg-white/5 px-4 py-3',
+                'border border-transparent border-y-white/10',
+              )}
+            >
+              <Text size='lg' className='font-bold'>
+                V1 Outposts
+              </Text>
+            </div>
+            <ul className='w-full px-4 py-3 list-none'>
+              {v1Outposts.map((outpost) => (
+                <li
+                  className='flex items-center w-full gap-3 py-2 text-white group/chain opacity-60 hover:opacity-100'
+                  role='button'
+                  onClick={() => window.open(outpost.url, '_blank')}
+                  key={outpost.name}
+                >
+                  <ChainLogo chainID={outpost.chainId} className='w-6' />
+                  <Text size='sm'>
+                    {outpost.name} <ExternalLink className='w-4 ml-1 mb-0.5 inline' />
+                  </Text>
+                </li>
+              ))}
+            </ul>
+          </>
+        )}
       </Overlay>
     </div>
   )

src/components/header/OracleResyncButton.tsx

@@ -7,7 +7,7 @@ import useStore from 'store'
 
 export default function OracleResyncButton() {
   const updateOracle = useStore((s) => s.updateOracle)
-  const updatePythOracle = useCallback(() => updateOracle(), [])
+  const updatePythOracle = useCallback(() => updateOracle(), [updateOracle])
 
   return (
     <Tooltip

src/components/header/navigation/NavLink.tsx

@@ -2,6 +2,7 @@ import classNames from 'classnames'
 import { ReactNode } from 'react'
 import { NavLink as Link, useSearchParams } from 'react-router-dom'
 
+import { ExternalLink } from 'components/common/Icons'
 import { getIsActive } from 'components/header/navigation/DesktopNavigation'
 import useAccountId from 'hooks/useAccountId'
 import useStore from 'store'
@@ -38,7 +39,10 @@ export const NavLink = (props: Props) => {
       )}
       target={item.externalUrl ? '_blank' : undefined}
     >
-      {props.children}
+      <>
+        {props.children}
+        {item.externalUrl && <ExternalLink className='inline-block w-4 ml-1 mb-0.5' />}
+      </>
     </Link>
   )
 }

src/types/enums/wallet.ts

@@ -15,4 +15,5 @@ export enum ChainInfoID {
   Osmosis1 = 'osmosis-1',
   OsmosisDevnet = 'devnet',
   Pion1 = 'pion-1',
+  Neutron1 = 'neutron-1',
 }