Merge pull request #1327 from near/develop

2x weekly promotion of develop to main
near · Oct 16, 2024 · 61df5dd · 61df5dd
2 parents 7e85300 + dd30f96
commit 61df5dd
Show file tree

Hide file tree

Showing 15 changed files with 189 additions and 125 deletions.
diff --git a/src/assets/images/wallets/fastAuth.png b/src/assets/images/wallets/fastAuth.png
diff --git a/src/components/home/Contracts/index.tsx b/src/components/home/Contracts/index.tsx
@@ -87,7 +87,7 @@ export const Contracts = () => {
         gap="xl"
         columnsPhone="minmax(0, 1fr)"
         columnsTablet="minmax(0, 1fr)"
-        style={{ flexGrow: 1 }}
+        style={{ height: '88%' }}
       >
         <Flex stack justify="space-between">
           <Flex stack gap="m">
@@ -119,7 +119,7 @@ export const Contracts = () => {
         </Flex>
 
         <Tabs.Root value={language}>
-          <Flex stack justify="space-between" style={{ flexGrow: 1 }}>
+          <Flex stack justify="space-between" style={{ height: '100%' }}>
             <Tabs.Content value="js">
               <Title> One Command Setup </Title>
               <Code code={`npx create-near-app@latest`} language="bash" />

diff --git a/src/components/home/DecentralizedApps/index.tsx b/src/components/home/DecentralizedApps/index.tsx
@@ -67,6 +67,7 @@ const Carousel = styled.div`
 const WalletImg = styled(Image)`
   margin: 0 2px;
   height: 40px;
+  width: 40px;
   border-radius: 4px;
 `;
 
@@ -80,7 +81,7 @@ export const DecentralizedApps = () => {
         gapTablet="xl"
         columnsPhone="minmax(0, 1fr)"
         columnsTablet="minmax(0, 1fr)"
-        style={{ flex: 1 }}
+        style={{ height: '88%' }}
       >
         <Flex stack justify="space-between">
           <Flex stack gap="m">
@@ -97,7 +98,7 @@ export const DecentralizedApps = () => {
           </Flex>
         </Flex>
 
-        <Flex stack gap="m" justify="space-between" style={{ flexGrow: 1 }}>
+        <Flex stack gap="m" justify="space-between" style={{ height: '100%' }}>
           <Flex stack>
             <Title> NEAR React App </Title>
             <Code code={ReactApp} height={450} language="ts" />

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,10 +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 { useSignInRedirect } from '@/hooks/useSignInRedirect';
+import { networkId } from '@/config';
 
 import { NearContext } from '../wallet-selector/WalletSelector';
 import NearIconSvg from './icons/near-icon.svg';
@@ -14,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,12 +44,14 @@ export const Sidebar = () => {
   const toggleExpandedSidebar = useNavigationStore((store) => store.toggleExpandedSidebar);
   const handleBubbledClickInSidebar = useNavigationStore((store) => store.handleBubbledClickInSidebar);
   const tooltipsDisabled = isSidebarExpanded;
-  const { signedAccountId } = useContext(NearContext);
-  const { requestAuthentication } = useSignInRedirect();
+  const { wallet, signedAccountId } = useContext(NearContext);
   const inputRef = useRef<HTMLInputElement>(null);
+  const [isOpenNetwork, setIsOpenNetwork] = useState(false);
 
-  const handleCreateAccount = () => {
-    requestAuthentication(true);
+  const preventRedirect = (network: string) => (e: React.MouseEvent) => {
+    if (networkId == network) {
+      e.preventDefault();
+    }
   };
 
   const isNavigationItemActive = useCallback(
@@ -53,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'}`} />
@@ -202,10 +254,10 @@ export const Sidebar = () => {
           {signedAccountId ? (
             <UserDropdownMenu collapsed={!isSidebarExpanded} />
           ) : (
-            <Tooltip content="Sign-up or Login" side="right" disabled={tooltipsDisabled} asChild>
-              <S.LoginItem $active={false} $type="featured" onClick={handleCreateAccount}>
+            <Tooltip content="Login" side="right" disabled={tooltipsDisabled} asChild>
+              <S.LoginItem $active={false} $type="featured" onClick={wallet?.signIn}>
                 <i className="ph-bold ph-user" />
-                <span>Sign-up or Login</span>
+                <span>Login</span>
               </S.LoginItem>
             </Tooltip>
           )}

diff --git a/src/components/sidebar-navigation/SmallScreenHeader.tsx b/src/components/sidebar-navigation/SmallScreenHeader.tsx
@@ -1,17 +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 { useSignInRedirect } from '@/hooks/useSignInRedirect';
+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,11 +26,12 @@ export const SmallScreenHeader = () => {
   const setNavigation = useNavigationStore((store) => store.set);
   const showDrawerCollapse = useNavigationStore((store) => store.isOpenedOnSmallScreens && !!store.expandedDrawer);
   const expandedDrawerTitle = useNavigationStore((store) => store.expandedDrawerTitle);
-  const { signedAccountId } = useContext(NearContext);
-  const { requestAuthentication } = useSignInRedirect();
+  const { wallet, signedAccountId } = useContext(NearContext);
 
-  const handleCreateAccount = () => {
-    requestAuthentication(true);
+  const preventRedirect = (network: string) => (e: React.MouseEvent) => {
+    if (networkId == network) {
+      e.preventDefault();
+    }
   };
 
   return (
@@ -50,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,14 +65,35 @@ export const SmallScreenHeader = () => {
       ) : (
         <>
           <Button
-            label="Sign-up or Login"
+            label="Login"
             variant="primary"
-            onClick={handleCreateAccount}
+            onClick={wallet?.signIn}
             style={{ alignSelf: 'center', marginRight: '1rem' }}
           />
         </>
       )}
+      <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;
           }

diff --git a/src/components/tools/FungibleToken/CreateTokenForm.tsx b/src/components/tools/FungibleToken/CreateTokenForm.tsx
@@ -173,7 +173,13 @@ const CreateTokenForm = ({ reload }: { reload: (delay: number) => void }) => {
               label="Total Supply"
               placeholder="e.g. 1000"
               error={errors.total_supply?.message}
-              {...register('total_supply', { required: 'Total supply is required' })}
+              {...register('total_supply', {
+                required: 'Total supply is required',
+                pattern: {
+                  value: /^[1-9][0-9]*$/,
+                  message: 'Total supply must be a whole number greater than 0',
+                },
+              })}
               disabled={!signedAccountId}
             />
             <Input