feat: block page advanced (#98)

Co-authored-by: Luiz Estácio | stacio.eth <luizstacio@gmail.com>
FuelLabs · Nov 7, 2023 · bfc0c16 · bfc0c16
1 parent 85e5805
commit bfc0c16
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/packages/app/src/systems/Block/components/BlockScreenAdvanced.tsx b/packages/app/src/systems/Block/components/BlockScreenAdvanced.tsx
@@ -0,0 +1,18 @@
+import type { Maybe, BlockItemFragment } from '@fuel-explorer/graphql';
+import { VStack } from '@fuels/ui';
+import { CodeBlock } from '~/systems/Core/components/CodeBlock/CodeBlock';
+
+type BlockScreenAdvancedProps = {
+  block?: Maybe<BlockItemFragment & { producer: Maybe<string> }>;
+};
+
+export function BlockScreenAdvanced({ block }: BlockScreenAdvancedProps) {
+  if (!block) {
+    return null;
+  }
+  return (
+    <VStack gap="6">
+      <CodeBlock value={block} type="json" />
+    </VStack>
+  );
+}
diff --git a/packages/app/src/systems/Block/screens/BlockScreen.tsx b/packages/app/src/systems/Block/screens/BlockScreen.tsx
@@ -11,6 +11,7 @@ import {
 } from '~/systems/Core/components/ViewMode/ViewMode';
 import { isValidAddress } from '~/systems/Core/utils/address';
 
+import { BlockScreenAdvanced } from '../components/BlockScreenAdvanced';
 import { BlockScreenSimple } from '../components/BlockScreenSimple';
 
 type BlockScreenProps = {
@@ -44,7 +45,9 @@ export function BlockScreen({
       {viewMode === ViewModes.Simple && (
         <BlockScreenSimple block={block} producer={producer} />
       )}
-      {viewMode === ViewModes.Advanced && <div>Advanced</div>}
+      {viewMode === ViewModes.Advanced && (
+        <BlockScreenAdvanced block={block ? { ...block, producer } : null} />
+      )}
     </VStack>
   );
 }