From f2cd496eb921a7934b3519a5ea7321352a94e1fa Mon Sep 17 00:00:00 2001
From: Matias Benary <matiasbenary@gmail.com>
Date: Wed, 16 Oct 2024 12:48:13 -0300
Subject: [PATCH 1/4] feat: network selector added

---
 src/components/sidebar-navigation/Sidebar.tsx | 66 ++++++++++++++++++-
 .../sidebar-navigation/SmallScreenHeader.tsx  | 55 +++++++++++++---
 src/components/sidebar-navigation/styles.ts   |  6 +-
 3 files changed, 113 insertions(+), 14 deletions(-)

diff --git a/src/components/sidebar-navigation/Sidebar.tsx b/src/components/sidebar-navigation/Sidebar.tsx
index 17bb8abea..2be959590 100644
--- a/src/components/sidebar-navigation/Sidebar.tsx
+++ b/src/components/sidebar-navigation/Sidebar.tsx
@@ -1,9 +1,12 @@
-import { Tooltip } from '@near-pagoda/ui';
+import { Dropdown, SvgIcon, Tooltip } from '@near-pagoda/ui';
+import { CaretDown } from '@phosphor-icons/react';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useContext } from 'react';
+import styled from 'styled-components';
 
+import { networkId } from '@/config';
 import { useSignInRedirect } from '@/hooks/useSignInRedirect';
 
 import { NearContext } from '../wallet-selector/WalletSelector';
@@ -14,6 +17,26 @@ import * as S from './styles';
 import { UserDropdownMenu } from './UserDropdownMenu';
 import { currentPathMatchesRoute } from './utils';
 
+const Redirect = styled.a<{ selected?: boolean }>`
+  text-decoration: none;
+  color: #444;
+`;
+
+const Badge = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem 0.5rem;
+  gap: 4px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: ${() => (networkId === 'mainnet' ? '#0072de' : '#d14e00')};
+  background-color: ${() => (networkId === 'mainnet' ? '#0084f116' : '#f9900026')};
+  text-transform: capitalize;
+  border-radius: 0.25rem;
+  letter-spacing: 0.05em;
+`;
+
 export const Sidebar = () => {
   const router = useRouter();
   const expandedDrawer = useNavigationStore((store) => store.expandedDrawer);
@@ -25,6 +48,13 @@ export const Sidebar = () => {
   const { signedAccountId } = useContext(NearContext);
   const { requestAuthentication } = useSignInRedirect();
   const inputRef = useRef<HTMLInputElement>(null);
+  const [isOpenNetwork, setIsOpenNetwork] = useState(false);
+
+  const preventRedirect = (network: string) => (e: React.MouseEvent) => {
+    if (networkId == network) {
+      e.preventDefault();
+    }
+  };
 
   const handleCreateAccount = () => {
     requestAuthentication(true);
@@ -53,6 +83,38 @@ export const Sidebar = () => {
           <S.Logo href="/" aria-label="Go Home">
             <Image src={NearIconSvg} alt="NEAR" />
           </S.Logo>
+          <S.Network>
+            <Dropdown.Root open={isOpenNetwork} onOpenChange={(open) => setIsOpenNetwork(open)}>
+              <Dropdown.Trigger asChild>
+                <Badge>
+                  {networkId}{' '}
+                  <SvgIcon
+                    icon={<CaretDown />}
+                    size="xs"
+                    style={{
+                      marginBottom: '2px',
+                      transform: isOpenNetwork ? 'rotate(180deg)' : 'rotate(0deg)',
+                      transition: 'all 200ms',
+                    }}
+                  />
+                </Badge>
+              </Dropdown.Trigger>
+              <Dropdown.Content>
+                <Dropdown.Section>
+                  <Dropdown.Item>
+                    <Redirect href="https://dev.near.org" target="_blank" onClick={preventRedirect('mainnet')}>
+                      Mainnet
+                    </Redirect>
+                  </Dropdown.Item>
+                  <Dropdown.Item>
+                    <Redirect href="https://test.near.org" target="_blank" onClick={preventRedirect('testnet')}>
+                      Testnet
+                    </Redirect>
+                  </Dropdown.Item>
+                </Dropdown.Section>
+              </Dropdown.Content>
+            </Dropdown.Root>
+          </S.Network>
 
           <S.ToggleExpandButton type="button" aria-label="Expand/Collapse Menu" onClick={toggleExpandedSidebar}>
             <i className={`ph-bold ${isSidebarExpanded ? 'ph-arrow-line-left' : 'ph-list'}`} />
diff --git a/src/components/sidebar-navigation/SmallScreenHeader.tsx b/src/components/sidebar-navigation/SmallScreenHeader.tsx
index 0f40941d7..facf3a5c6 100644
--- a/src/components/sidebar-navigation/SmallScreenHeader.tsx
+++ b/src/components/sidebar-navigation/SmallScreenHeader.tsx
@@ -1,9 +1,11 @@
-import { Button } from '@near-pagoda/ui';
-import { MagnifyingGlass } from '@phosphor-icons/react';
+import { Button, Dropdown } from '@near-pagoda/ui';
+import { MagnifyingGlass, WifiHigh } from '@phosphor-icons/react';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { useContext } from 'react';
+import styled from 'styled-components';
 
+import { networkId } from '@/config';
 import { useSignInRedirect } from '@/hooks/useSignInRedirect';
 
 import { NearContext } from '../wallet-selector/WalletSelector';
@@ -12,6 +14,11 @@ import { useNavigationStore } from './store';
 import * as S from './styles';
 import { UserDropdownMenu } from './UserDropdownMenu';
 
+const Redirect = styled.a<{ selected?: boolean }>`
+  text-decoration: none;
+  color: #444;
+`;
+
 export const SmallScreenHeader = () => {
   const router = useRouter();
   const redirect = (url: string) => () => router.push(url);
@@ -23,6 +30,12 @@ export const SmallScreenHeader = () => {
   const { signedAccountId } = useContext(NearContext);
   const { requestAuthentication } = useSignInRedirect();
 
+  const preventRedirect = (network: string) => (e: React.MouseEvent) => {
+    if (networkId == network) {
+      e.preventDefault();
+    }
+  };
+
   const handleCreateAccount = () => {
     requestAuthentication(true);
   };
@@ -50,23 +63,45 @@ export const SmallScreenHeader = () => {
           <Image src={NearIconSvg} alt="NEAR" />
         </S.SmallScreenHeaderLogo>
       )}
-
       {signedAccountId ? (
         <S.SmallScreenHeaderActions $hidden={isOpenedOnSmallScreens} $gap="16px">
           <Button label="search" icon={<MagnifyingGlass />} variant="secondary" onClick={redirect('/search')} />
           <UserDropdownMenu />
         </S.SmallScreenHeaderActions>
       ) : (
-        <>
+        <Button
+          label="Sign-up or Login"
+          variant="primary"
+          onClick={handleCreateAccount}
+          style={{ alignSelf: 'center', marginRight: '1rem' }}
+        />
+      )}
+      <Dropdown.Root>
+        <Dropdown.Trigger asChild>
           <Button
-            label="Sign-up or Login"
-            variant="primary"
-            onClick={handleCreateAccount}
-            style={{ alignSelf: 'center', marginRight: '1rem' }}
+            label={networkId}
+            icon={<WifiHigh fill="bold" style={{ color: networkId == 'mainnet' ? '#0072de' : '#d14e00' }} />}
+            fill="outline"
+            style={{ alignSelf: 'center' }}
+            type="button"
           />
-        </>
-      )}
+        </Dropdown.Trigger>
 
+        <Dropdown.Content>
+          <Dropdown.Section>
+            <Dropdown.Item>
+              <Redirect href="https://dev.near.org" target="_blank" onClick={preventRedirect('mainnet')}>
+                Mainnet
+              </Redirect>
+            </Dropdown.Item>
+            <Dropdown.Item>
+              <Redirect href="https://test.near.org" target="_blank" onClick={preventRedirect('testnet')}>
+                Testnet
+              </Redirect>
+            </Dropdown.Item>
+          </Dropdown.Section>
+        </Dropdown.Content>
+      </Dropdown.Root>
       <S.SmallScreenHeaderIconButton
         type="button"
         aria-label="Expand/Collapse Menu"
diff --git a/src/components/sidebar-navigation/styles.ts b/src/components/sidebar-navigation/styles.ts
index 8aae33cd3..251505d6b 100644
--- a/src/components/sidebar-navigation/styles.ts
+++ b/src/components/sidebar-navigation/styles.ts
@@ -70,6 +70,8 @@ export const Logo = styled(Link)`
   }
 `;
 
+export const Network = styled.div``;
+
 export const ToggleExpandButton = styled.button`
   all: unset;
   box-sizing: border-box;
@@ -605,13 +607,13 @@ export const Sidebar = styled.div<{
           ${NavigationItem} span,
           ${SectionLabelIconLink},
           ${SectionLabel},
-          ${Logo} {
+          ${Logo},
+          ${Network} {
             pointer-events: none;
             opacity: 0;
             padding: 0;
             width: 0;
           }
-
           ${SectionLabel} {
             margin-bottom: -2rem;
           }

From e97a775c802574e4403b281cc05f7b9b02287990 Mon Sep 17 00:00:00 2001
From: Matias Benary <matiasbenary@gmail.com>
Date: Wed, 16 Oct 2024 14:06:34 -0300
Subject: [PATCH 2/4] feat: disabled search for testnet

---
 src/components/sidebar-navigation/Search.tsx  | 30 ++++++++++++++-----
 src/components/sidebar-navigation/Sidebar.tsx |  2 +-
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/components/sidebar-navigation/Search.tsx b/src/components/sidebar-navigation/Search.tsx
index b5f3a8ed2..7cf787836 100644
--- a/src/components/sidebar-navigation/Search.tsx
+++ b/src/components/sidebar-navigation/Search.tsx
@@ -3,6 +3,7 @@ import * as HoverCard from '@radix-ui/react-hover-card';
 import Link from 'next/link';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 
+import { networkId } from '@/config';
 import useDebounce from '@/hooks/useDebounce';
 import { fetchSearchHits } from '@/utils/algoliaSearchApi';
 import { fetchCatalog } from '@/utils/catalogSearchApi';
@@ -51,11 +52,15 @@ export const Search = ({ inputRef }: { inputRef: any }) => {
   const fetchResults = useCallback(async () => {
     setIsLoading(true);
 
-    const [docs, apps, components] = await Promise.all([
+    const isMainnet = networkId === 'mainnet';
+
+    const fetchPromises = [
       fetchSearchHits('Docs', debouncedSearchTerm),
-      fetchCatalog(debouncedSearchTerm),
-      fetchSearchHits('Components', debouncedSearchTerm),
-    ]);
+      isMainnet ? fetchCatalog(debouncedSearchTerm) : Promise.resolve(),
+      isMainnet ? fetchSearchHits('Components', debouncedSearchTerm) : Promise.resolve(),
+    ];
+
+    const [docs, apps, components] = await Promise.all(fetchPromises);
 
     setResults({
       Docs: renderResults('Docs', docs),
@@ -135,11 +140,20 @@ export const Search = ({ inputRef }: { inputRef: any }) => {
               <S.Tab $active={activeTab === 'Docs'} onClick={() => handleTabChange('Docs')} $isFirst={true}>
                 Docs
               </S.Tab>
-              <S.Tab $active={activeTab === 'Apps'} onClick={() => handleTabChange('Apps')}>
-                Apps
+              <S.Tab
+                $active={activeTab === 'Apps'}
+                onClick={() => handleTabChange('Apps')}
+                disabled={networkId == 'testnet'}
+              >
+                Apps {networkId == 'testnet' && '(Mainnet only)'}
               </S.Tab>
-              <S.Tab $active={activeTab === 'Components'} onClick={() => handleTabChange('Components')} $isLast={true}>
-                Components
+              <S.Tab
+                $active={activeTab === 'Components'}
+                onClick={() => handleTabChange('Components')}
+                disabled={networkId == 'testnet'}
+                $isLast={true}
+              >
+                Components {networkId == 'testnet' && '(Mainnet only)'}
               </S.Tab>
             </S.TabContainer>
 
diff --git a/src/components/sidebar-navigation/Sidebar.tsx b/src/components/sidebar-navigation/Sidebar.tsx
index 2be959590..dd3d469ba 100644
--- a/src/components/sidebar-navigation/Sidebar.tsx
+++ b/src/components/sidebar-navigation/Sidebar.tsx
@@ -92,7 +92,7 @@ export const Sidebar = () => {
                     icon={<CaretDown />}
                     size="xs"
                     style={{
-                      marginBottom: '2px',
+                      marginBottom: '1px',
                       transform: isOpenNetwork ? 'rotate(180deg)' : 'rotate(0deg)',
                       transition: 'all 200ms',
                     }}

From a6a025ed6a176fe59312b6038f99689dc35f6b40 Mon Sep 17 00:00:00 2001
From: Matias Benary <matiasbenary@gmail.com>
Date: Wed, 16 Oct 2024 16:11:18 -0300
Subject: [PATCH 3/4] fix: correction in the dropdown

---
 src/components/sidebar-navigation/Sidebar.tsx    |  8 ++++----
 .../sidebar-navigation/SmallScreenHeader.tsx     | 16 ++++++++--------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/sidebar-navigation/Sidebar.tsx b/src/components/sidebar-navigation/Sidebar.tsx
index dd3d469ba..fc686685b 100644
--- a/src/components/sidebar-navigation/Sidebar.tsx
+++ b/src/components/sidebar-navigation/Sidebar.tsx
@@ -101,16 +101,16 @@ export const Sidebar = () => {
               </Dropdown.Trigger>
               <Dropdown.Content>
                 <Dropdown.Section>
+                <Redirect href="https://dev.near.org" target="_blank" onClick={preventRedirect('mainnet')}>
                   <Dropdown.Item>
-                    <Redirect href="https://dev.near.org" target="_blank" onClick={preventRedirect('mainnet')}>
                       Mainnet
-                    </Redirect>
                   </Dropdown.Item>
+                  </Redirect>
+                  <Redirect href="https://test.near.org" target="_blank" onClick={preventRedirect('testnet')}>
                   <Dropdown.Item>
-                    <Redirect href="https://test.near.org" target="_blank" onClick={preventRedirect('testnet')}>
                       Testnet
-                    </Redirect>
                   </Dropdown.Item>
+                  </Redirect>
                 </Dropdown.Section>
               </Dropdown.Content>
             </Dropdown.Root>
diff --git a/src/components/sidebar-navigation/SmallScreenHeader.tsx b/src/components/sidebar-navigation/SmallScreenHeader.tsx
index facf3a5c6..9fa9e7933 100644
--- a/src/components/sidebar-navigation/SmallScreenHeader.tsx
+++ b/src/components/sidebar-navigation/SmallScreenHeader.tsx
@@ -89,16 +89,16 @@ export const SmallScreenHeader = () => {
 
         <Dropdown.Content>
           <Dropdown.Section>
-            <Dropdown.Item>
-              <Redirect href="https://dev.near.org" target="_blank" onClick={preventRedirect('mainnet')}>
+            <Redirect href="https://dev.near.org" target="_blank" onClick={preventRedirect('mainnet')}>
+              <Dropdown.Item>
                 Mainnet
-              </Redirect>
-            </Dropdown.Item>
-            <Dropdown.Item>
-              <Redirect href="https://test.near.org" target="_blank" onClick={preventRedirect('testnet')}>
+              </Dropdown.Item>
+            </Redirect>
+            <Redirect href="https://test.near.org" target="_blank" onClick={preventRedirect('testnet')}>
+              <Dropdown.Item>
                 Testnet
-              </Redirect>
-            </Dropdown.Item>
+              </Dropdown.Item>
+            </Redirect>
           </Dropdown.Section>
         </Dropdown.Content>
       </Dropdown.Root>

From 25fb316ed7956bf31c7a9369aeef9d9662a4b64d Mon Sep 17 00:00:00 2001
From: Matias Benary <matiasbenary@gmail.com>
Date: Wed, 16 Oct 2024 16:12:38 -0300
Subject: [PATCH 4/4] fix: correction in the dropdown

---
 src/components/sidebar-navigation/Sidebar.tsx          | 10 +++-------
 .../sidebar-navigation/SmallScreenHeader.tsx           |  8 ++------
 2 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/src/components/sidebar-navigation/Sidebar.tsx b/src/components/sidebar-navigation/Sidebar.tsx
index fc686685b..852bdb463 100644
--- a/src/components/sidebar-navigation/Sidebar.tsx
+++ b/src/components/sidebar-navigation/Sidebar.tsx
@@ -101,15 +101,11 @@ export const Sidebar = () => {
               </Dropdown.Trigger>
               <Dropdown.Content>
                 <Dropdown.Section>
-                <Redirect href="https://dev.near.org" target="_blank" onClick={preventRedirect('mainnet')}>
-                  <Dropdown.Item>
-                      Mainnet
-                  </Dropdown.Item>
+                  <Redirect href="https://dev.near.org" target="_blank" onClick={preventRedirect('mainnet')}>
+                    <Dropdown.Item>Mainnet</Dropdown.Item>
                   </Redirect>
                   <Redirect href="https://test.near.org" target="_blank" onClick={preventRedirect('testnet')}>
-                  <Dropdown.Item>
-                      Testnet
-                  </Dropdown.Item>
+                    <Dropdown.Item>Testnet</Dropdown.Item>
                   </Redirect>
                 </Dropdown.Section>
               </Dropdown.Content>
diff --git a/src/components/sidebar-navigation/SmallScreenHeader.tsx b/src/components/sidebar-navigation/SmallScreenHeader.tsx
index 9fa9e7933..3ef2f822e 100644
--- a/src/components/sidebar-navigation/SmallScreenHeader.tsx
+++ b/src/components/sidebar-navigation/SmallScreenHeader.tsx
@@ -90,14 +90,10 @@ export const SmallScreenHeader = () => {
         <Dropdown.Content>
           <Dropdown.Section>
             <Redirect href="https://dev.near.org" target="_blank" onClick={preventRedirect('mainnet')}>
-              <Dropdown.Item>
-                Mainnet
-              </Dropdown.Item>
+              <Dropdown.Item>Mainnet</Dropdown.Item>
             </Redirect>
             <Redirect href="https://test.near.org" target="_blank" onClick={preventRedirect('testnet')}>
-              <Dropdown.Item>
-                Testnet
-              </Dropdown.Item>
+              <Dropdown.Item>Testnet</Dropdown.Item>
             </Redirect>
           </Dropdown.Section>
         </Dropdown.Content>