From 5c4549149796ca52826030665afd8bcca68aca97 Mon Sep 17 00:00:00 2001
From: Linkie Link <linkielink.dev@gmail.com>
Date: Mon, 22 Jan 2024 15:02:37 +0100
Subject: [PATCH] feat: added external links and marked them accordingly (#740)

---
 src/components/common/chain/ChainLogo.tsx    |  1 +
 src/components/header/ChainSelect.tsx        | 49 ++++++++++++++++----
 src/components/header/OracleResyncButton.tsx |  2 +-
 src/components/header/navigation/NavLink.tsx |  6 ++-
 src/types/enums/wallet.ts                    |  1 +
 5 files changed, 49 insertions(+), 10 deletions(-)

diff --git a/src/components/common/chain/ChainLogo.tsx b/src/components/common/chain/ChainLogo.tsx
index 6d84497d..8a2a8382 100644
--- a/src/components/common/chain/ChainLogo.tsx
+++ b/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:
diff --git a/src/components/header/ChainSelect.tsx b/src/components/header/ChainSelect.tsx
index 45686f5a..7d69bfcb 100644
--- a/src/components/header/ChainSelect.tsx
+++ b/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}
-        className={classNames(
-          '!p-0 w-8 flex items-center justify-center',
-          currentChains.length === 1 && 'pointer-events-none',
-        )}
+        onClick={() => setShowMenu()}
+        className={classNames('!p-0 w-8 flex items-center justify-center')}
       ></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>
   )
diff --git a/src/components/header/OracleResyncButton.tsx b/src/components/header/OracleResyncButton.tsx
index 018af4af..f1f53825 100644
--- a/src/components/header/OracleResyncButton.tsx
+++ b/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
diff --git a/src/components/header/navigation/NavLink.tsx b/src/components/header/navigation/NavLink.tsx
index e54bb1a9..9c420293 100644
--- a/src/components/header/navigation/NavLink.tsx
+++ b/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>
   )
 }
diff --git a/src/types/enums/wallet.ts b/src/types/enums/wallet.ts
index 5cb3efa7..a0e5cf4c 100644
--- a/src/types/enums/wallet.ts
+++ b/src/types/enums/wallet.ts
@@ -15,4 +15,5 @@ export enum ChainInfoID {
   Osmosis1 = 'osmosis-1',
   OsmosisDevnet = 'devnet',
   Pion1 = 'pion-1',
+  Neutron1 = 'neutron-1',
 }