Merge branch 'FuelLabs:main' into feat/statsOptimization

FuelLabs · Sep 27, 2024 · ee3a7a8 · ee3a7a8
2 parents e16d166 + 45164f7
commit ee3a7a8
Show file tree

Hide file tree

Showing 41 changed files with 2,396 additions and 198 deletions.
diff --git a/package.json b/package.json
@@ -136,5 +136,10 @@
       "ws@<8.17.1": ">=8.17.1",
       "fast-loops@<1.1.4": ">=1.1.4"
     }
+  },
+  "dependencies": {
+    "react-data-table-component": "7.6.2",
+    "react-paginate": "8.2.0",
+    "recharts": "2.12.7"
   }
 }
diff --git a/packages/app-explorer/package.json b/packages/app-explorer/package.json
@@ -40,8 +40,10 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-json-view-lite": "1.4.0",
+    "react-modal": "3.16.1",
     "react-use": "17.5.0",
     "react-window": "1.8.10",
+    "recharts": "2.12.7",
     "tai64": "1.0.0",
     "tailwind-variants": "0.1.20",
     "wagmi": "2.12.7",

diff --git a/packages/app-explorer/public/ecosystem/images/executoors.jpeg b/packages/app-explorer/public/ecosystem/images/executoors.jpeg
diff --git a/packages/app-explorer/public/ecosystem/images/fuelet.jpeg b/packages/app-explorer/public/ecosystem/images/fuelet.jpeg
diff --git a/packages/app-explorer/src/app/layout.tsx b/packages/app-explorer/src/app/layout.tsx
@@ -43,7 +43,7 @@ export default function RootLayout({
       <body>
         <ThemeProvider>
           <PointsProgramEyebrow />
-          <Layout contentClassName="[&_.rt-ContainerInner]:flex-col [&_.rt-ContainerInner]:gap-10">
+          <Layout contentClassName="[&_.rt-ContainerInner]:flex-col [&_.rt-ContainerInner]:gap-10 bg-gray-3 dark:bg-gray-1">
             {children}
           </Layout>
           <Analytics />

diff --git a/packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx b/packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx
@@ -46,14 +46,35 @@ export const BlocksScreen = () => {
       let newCursor: string | null = null;
       setDir(newDir);
 
-      if (newDir === 'before' && data.pageInfo.endCursor) {
-        newCursor = data.pageInfo.endCursor;
-      } else if (newDir === 'after' && data.pageInfo.startCursor) {
-        newCursor = data.pageInfo.startCursor;
+      if (
+        newPageNumber === currentPage + 1 ||
+        newPageNumber === currentPage - 1
+      ) {
+        if (newDir === 'before' && data.pageInfo.endCursor) {
+          newCursor = data.pageInfo.endCursor;
+        } else if (newDir === 'after' && data.pageInfo.startCursor) {
+          newCursor = data.pageInfo.startCursor;
+        }
+      } else {
+        if (newDir === 'before' && data.pageInfo.endCursor) {
+          newCursor = (
+            +data.pageInfo.endCursor -
+            (newPageNumber - currentPage) * limit
+          ).toString();
+        } else if (newDir === 'after' && data.pageInfo.startCursor) {
+          newCursor = (
+            +data.pageInfo.startCursor +
+            (currentPage - newPageNumber) * limit
+          ).toString();
+        }
       }
 
       setCurrentPage(newPageNumber);
       setCurrentCursor(newCursor);
+      if (newPageNumber === 1) {
+        router.push('/blocks');
+        return;
+      }
       router.push(`/blocks?page=${newPageNumber}&cursor=${newCursor}`);
     }
   };

diff --git a/packages/app-explorer/src/systems/Core/components/Layout/Layout.tsx b/packages/app-explorer/src/systems/Core/components/Layout/Layout.tsx
@@ -1,8 +1,10 @@
 'use client';
 
-import { Container, VStack } from '@fuels/ui';
+import { Container, LoadingBox, VStack } from '@fuels/ui';
 import { usePathname } from 'next/navigation';
-import { Hero } from '~/systems/Home/components/Hero/Hero';
+const Hero = React.lazy(() => import('~/systems/Home/components/Hero/Hero'));
+import { DateTime } from 'fuels';
+import React, { Suspense } from 'react';
 import { cx } from '../../utils/cx';
 import { Footer } from '../Footer/Footer';
 import { TopNav } from '../TopNav/TopNav';
@@ -15,15 +17,19 @@ export type LayoutProps = {
 export function Layout({ children, contentClassName }: LayoutProps) {
   const pathname = usePathname();
   const isHomePage = pathname === '/';
-
+  console.log('Page loaded', DateTime.now);
   return (
     <VStack className="min-w-screen min-h-screen" gap="0">
       <TopNav />
-      {isHomePage && <Hero />}
+      {isHomePage && (
+        <Suspense fallback={<LoadingBox className="w-full h-[12rem]" />}>
+          <Hero />
+        </Suspense>
+      )}
       <Container
         size="4"
         className={cx(
-          'py-8 pb-10 px-6 tablet:px-10 tablet:py-12 tablet:pb-8 laptop:py-16 laptop:pb-18 min-h-[80vh]',
+          'py-8 pb-10 px-6 tablet:px-10 tablet:py-8 tablet:pb-8 laptop:py-8 laptop:pb-18 min-h-[80vh]',
           contentClassName,
         )}
       >

diff --git a/packages/app-explorer/src/systems/Core/components/Search/SearchForm.tsx b/packages/app-explorer/src/systems/Core/components/Search/SearchForm.tsx
@@ -8,14 +8,9 @@ import { styles } from './styles';
 type SearchFormProps = {
   className: string;
   autoFocus?: boolean;
-  variablePosition?: boolean;
 };
 
-export function SearchForm({
-  className,
-  autoFocus,
-  variablePosition,
-}: SearchFormProps) {
+export function SearchForm({ className, autoFocus }: SearchFormProps) {
   const classes = styles();
   const [results, action] = useFormState(
     (_: GQLSearchResult | null, formData: FormData) => {
@@ -27,7 +22,6 @@ export function SearchForm({
   return (
     <form action={action} className={classes.searchSize()}>
       <SearchInput
-        variablePosition={variablePosition}
         className={className}
         searchResult={results}
         autoFocus={autoFocus}

diff --git a/packages/app-explorer/src/systems/Core/components/Search/SearchInput/SearchInput.tsx b/packages/app-explorer/src/systems/Core/components/Search/SearchInput/SearchInput.tsx
@@ -20,7 +20,6 @@ type SearchInputProps = BaseProps<InputProps> & {
   onSubmit?: (value: string) => void;
   searchResult?: Maybe<GQLSearchResult>;
   alwaysDisplayActionButtons?: boolean;
-  variablePosition?: boolean;
 };
 
 export function SearchInput({
@@ -29,7 +28,6 @@ export function SearchInput({
   autoFocus,
   placeholder = 'Search here...',
   searchResult,
-  variablePosition,
   ...props
 }: SearchInputProps) {
   const classes = styles();
@@ -92,7 +90,6 @@ export function SearchInput({
     <div className="relative">
       <VStack
         gap="0"
-        data-variable-position={variablePosition}
         className={classes.searchBox()}
         data-active={isFocused || openDropdown}
       >

diff --git a/packages/app-explorer/src/systems/Core/components/Search/SearchInput/styles.ts b/packages/app-explorer/src/systems/Core/components/Search/SearchInput/styles.ts
@@ -6,9 +6,9 @@ export const styles = tv({
       'transition-all duration-200 [&[data-active=false]]:ease-in [&[data-active=true]]:ease-out',
       'group justify-center items-center',
       'block left-0 w-full', // needed for properly execution of transitions
-      '[&[data-variable-position=true]]:[&[data-active=true]]:w-[calc(100vw+1px)] [&[data-variable-position=true]]:[&[data-active=true]]:left-[-64px] tablet:[&[data-variable-position=true]]:[&[data-active=true]]:w-full',
-      '[&[data-active=true]]:absolute tablet:[&[data-variable-position=true]]:[&[data-active=true]]:left-0 [&[data-active=true]]:right-0',
-      '[&[data-variable-position=true]]:[&[data-active=true]]:top-[-14px] [&[data-variable-position=true]]:tablet:[&[data-active=true]]:top-[-4px] [&[data-variable-position=true]]:desktop:[&[data-active=true]]:top-[-20px]',
+      '[&[data-active=true]]:w-[calc(100vw+1px)] [&[data-active=true]]:left-[-64px] tablet:[&[data-active=true]]:w-full',
+      '[&[data-active=true]]:absolute tablet:[&[data-active=true]]:left-0 [&[data-active=true]]:right-0',
+      '[&[data-active=true]]:top-[-14px] tablet:[&[data-active=true]]:top-[-4px] desktop:[&[data-active=true]]:top-[-20px]',
       '[&[data-active=true]]:z-50',
     ],
     inputContainer: 'w-full',

diff --git a/packages/app-explorer/src/systems/Core/components/Search/SearchWidget.tsx b/packages/app-explorer/src/systems/Core/components/Search/SearchWidget.tsx
@@ -12,24 +12,16 @@ export const SearchContext = createContext<{
 
 type SearchWidgetProps = {
   autoFocus?: boolean;
-  variablePosition?: boolean;
 };
 
-export const SearchWidget = ({
-  autoFocus,
-  variablePosition,
-}: SearchWidgetProps) => {
+export const SearchWidget = ({ autoFocus }: SearchWidgetProps) => {
   const classes = styles();
   const dropdownRef = useRef<HTMLDivElement>(null);
 
   return (
     <SearchContext.Provider value={{ dropdownRef }}>
       <Flex className="items-center gap-0 laptop:gap-4 justify-center flex-1 self-start">
-        <SearchForm
-          className={classes.searchSize()}
-          autoFocus={autoFocus}
-          variablePosition={variablePosition}
-        />
+        <SearchForm className={classes.searchSize()} autoFocus={autoFocus} />
       </Flex>
     </SearchContext.Provider>
   );

diff --git a/packages/app-explorer/src/systems/Core/components/TopNav/TopNav.tsx b/packages/app-explorer/src/systems/Core/components/TopNav/TopNav.tsx
@@ -22,7 +22,6 @@ export function TopNav() {
     PortalRoutes.bridgeHistory,
   ]);
   const isEcosystemBridge = isRoute(pathname, [PortalRoutes.ecosystem]);
-  const isHomePage = pathname === '/';
   const isExplorer = !isBridge && !isEcosystemBridge;
 
   useEffect(() => {
@@ -39,16 +38,6 @@ export function TopNav() {
     </NextLink>
   );
 
-  const externalLinks = (
-    <>
-      <Nav.MenuItem href="https://docs.fuel.network/">Developers</Nav.MenuItem>
-      <Nav.MenuItem href="https://forum.fuel.network">Community</Nav.MenuItem>
-      <Nav.MenuItem isExternal href="https://fuel.network">
-        Labs
-      </Nav.MenuItem>
-    </>
-  );
-
   const tooling = (
     <>
       <Nav.MenuItem
@@ -80,9 +69,10 @@ export function TopNav() {
       <Nav.Desktop className={'px-10 justify-between'}>
         <Nav.Menu>
           {logo}
-          {externalLinks}
         </Nav.Menu>
-        <Nav.Menu>{!isHomePage && <SearchWidget variablePosition />}</Nav.Menu>
+        <Nav.Menu>
+          <SearchWidget />
+        </Nav.Menu>
         <Nav.Menu>
           {tooling}
           {themeToggle}
@@ -91,13 +81,10 @@ export function TopNav() {
       <Nav.Mobile>
         <Nav.MobileContent>
           {logo}
-          {!isHomePage && <SearchWidget variablePosition />}
+          <SearchWidget />
           {themeToggle}
         </Nav.MobileContent>
-        <Nav.Menu>
-          {externalLinks}
-          {tooling}
-        </Nav.Menu>
+        <Nav.Menu>{tooling}</Nav.Menu>
       </Nav.Mobile>
     </Nav>
   );

diff --git a/packages/app-explorer/src/systems/Home/components/BlockTableTile.tsx b/packages/app-explorer/src/systems/Home/components/BlockTableTile.tsx
@@ -0,0 +1,77 @@
+import { HStack, RoundedContainer, VStack } from '@fuels/ui';
+import { tv } from 'tailwind-variants';
+import { fromNow } from '~/systems/Core/utils/dayjs';
+import { Block } from '../interface/blocks.interface';
+
+interface BlockTableProps {
+  block: Block;
+}
+
+export const BlockTableTile: React.FC<BlockTableProps> = ({ block }) => {
+  const classes = styles();
+
+  return (
+    <RoundedContainer className="bg-white hover:bg-gray-5 py-3">
+      <HStack align={'center'} className="justify-between">
+        <div className="space-y-[4px]">
+          <p className={classes.paragraphStrong()}>#{block.blockNo}</p>
+          <p className={classes.paragraph()}>{+block.gasUsed / 10 ** 9} ETH</p>
+        </div>
+        <div className="flex items-center gap-[4px] overflow-hidden">
+          <p
+            className={`${classes.paragraph()} overflow-hidden text-ellipsis whitespace-nowrap w-[100px]`}
+          >
+            {block.producer}
+          </p>
+        </div>
+
+        <div className="space-y-[4px]">
+          <VStack gap={'0'}>
+            <HStack gap={'1'} className="items-center">
+              <svg
+                width="11"
+                height="8"
+                viewBox="0 0 11 8"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M0.875 4.25L3.5 6.875L9.5 0.875"
+                  stroke="#00F58C"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+              <p className={classes.paragraphAccent()}>Settled</p>
+            </HStack>
+            <p
+              className={`${classes.paragraph()} overflow-hidden text-ellipsis whitespace-nowrap`}
+            >
+              {fromNow(block.timeStamp)}
+            </p>
+          </VStack>
+        </div>
+      </HStack>
+    </RoundedContainer>
+  );
+};
+
+const styles = tv({
+  slots: {
+    paragraphStrong: [
+      'text-[12px]',
+      'text-[color:var(--gray-12)]',
+      'font-bold',
+      ' w-[110px]',
+    ],
+    paragraph: [
+      'text-muted',
+      'text-[12px]',
+      'p-0',
+      'whitespace-nowrap',
+      'text-ellipsis',
+    ],
+    paragraphAccent: ['text-accent text-[12px] p-0'],
+  },
+});