fix: merge

near · Oct 16, 2024 · df6af48 · df6af48
2 parents 18410e1 + 4327d7b
commit df6af48
Show file tree

Hide file tree

Showing 4 changed files with 124 additions and 15 deletions.
diff --git 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
@@ -1,8 +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 { NearContext } from '../wallet-selector/WalletSelector';
 import NearIconSvg from './icons/near-icon.svg';
@@ -12,6 +16,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);
@@ -22,6 +46,13 @@ export const Sidebar = () => {
   const tooltipsDisabled = isSidebarExpanded;
   const { wallet, signedAccountId } = useContext(NearContext);
   const inputRef = useRef<HTMLInputElement>(null);
+  const [isOpenNetwork, setIsOpenNetwork] = useState(false);
+
+  const preventRedirect = (network: string) => (e: React.MouseEvent) => {
+    if (networkId == network) {
+      e.preventDefault();
+    }
+  };
 
   const isNavigationItemActive = useCallback(
     (route: string | string[], exactMatch = false) => {
@@ -46,6 +77,34 @@ 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: '1px',
+                      transform: isOpenNetwork ? 'rotate(180deg)' : 'rotate(0deg)',
+                      transition: 'all 200ms',
+                    }}
+                  />
+                </Badge>
+              </Dropdown.Trigger>
+              <Dropdown.Content>
+                <Dropdown.Section>
+                  <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>
+                  </Redirect>
+                </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
@@ -1,15 +1,23 @@
-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 { NearContext } from '../wallet-selector/WalletSelector';
 import NearIconSvg from './icons/near-icon.svg';
 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);
@@ -20,6 +28,12 @@ export const SmallScreenHeader = () => {
   const expandedDrawerTitle = useNavigationStore((store) => store.expandedDrawerTitle);
   const { wallet, signedAccountId } = useContext(NearContext);
 
+  const preventRedirect = (network: string) => (e: React.MouseEvent) => {
+    if (networkId == network) {
+      e.preventDefault();
+    }
+  };
+
   return (
     <S.SmallScreenHeader>
       {showDrawerCollapse ? (
@@ -43,7 +57,6 @@ 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')} />
@@ -59,7 +72,28 @@ export const SmallScreenHeader = () => {
           />
         </>
       )}
+      <Dropdown.Root>
+        <Dropdown.Trigger asChild>
+          <Button
+            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>
+            <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>
+            </Redirect>
+          </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
@@ -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;
           }