chore(explorer): minor fixes and styling improvements

kadena-community · Jul 2, 2024 · de52270 · de52270
1 parent e80d984
commit de52270
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 10 deletions.
diff --git a/.changeset/cyan-dots-sort.md b/.changeset/cyan-dots-sort.md
@@ -0,0 +1,5 @@
+---
+"@kadena/explorer": patch
+---
+
+Added minHeight to the layout to prevent flickering across the page
diff --git a/packages/apps/explorer/src/components/data-render-component/styles.css.ts b/packages/apps/explorer/src/components/data-render-component/styles.css.ts
@@ -1,12 +1,14 @@
-import { atoms } from '@kadena/kode-ui/styles';
+import { atoms, token } from '@kadena/kode-ui/styles';
 import { style } from '@vanilla-extract/css';
 
 export const sectionClass = style([
   atoms({
     padding: 'n6',
-    backgroundColor: 'base.default',
     marginBlockEnd: 'md',
   }),
+  {
+    backgroundColor: token('color.background.surface.default'),
+  },
 ]);
 
 export const headingClass = style([

diff --git a/packages/apps/explorer/src/components/layout/layout.tsx b/packages/apps/explorer/src/components/layout/layout.tsx
@@ -3,7 +3,8 @@ import Header from '@/components/header/header';
 import { Stack } from '@kadena/kode-ui';
 import type { FC, ReactNode } from 'react';
 import React from 'react';
-import { documentStyle, layoutWrapperClass } from './styles.css';
+import { contentClass, documentStyle, layoutWrapperClass } from './styles.css';
+import classNames from 'classnames';
 
 interface IProps {
   children?: ReactNode;
@@ -14,7 +15,7 @@ export const Layout: FC<IProps> = ({ children }: IProps) => {
     <div className={documentStyle}>
       <Header />
       <Stack marginBlock="xl" />
-      <Stack as="main" flexDirection="column" className={layoutWrapperClass}>
+      <Stack as="main" flexDirection="column" className={classNames(layoutWrapperClass, contentClass)}>
         {children}
       </Stack>
       <Footer />

diff --git a/packages/apps/explorer/src/components/layout/styles.css.ts b/packages/apps/explorer/src/components/layout/styles.css.ts
@@ -14,3 +14,7 @@ export const layoutWrapperClass = style({
   marginInline: 'auto',
   maxWidth: $$pageWidth,
 });
+
+export const contentClass = style({
+  minHeight: 'calc(100vh - 248px)',
+});
diff --git a/...ges/apps/explorer/src/components/transaction-components/transaction-request-component.tsx b/...ges/apps/explorer/src/components/transaction-components/transaction-request-component.tsx
@@ -105,7 +105,7 @@ export const TransactionRequestComponent: React.FC<{
             { key: 'Scheme', value: signer.scheme ?? '' },
             {
               key: 'Capabilities',
-              value: (
+              value: signer.clist.length === 0 ? <></> : (
                 <DataRenderComponent
                   fields={signer.clist.map((capability) => ({
                     key: capability.name,

diff --git a/...ages/apps/explorer/src/components/transaction-components/transaction-result-component.tsx b/...ages/apps/explorer/src/components/transaction-components/transaction-result-component.tsx
@@ -4,7 +4,7 @@ import type {
   Transfer,
 } from '@/__generated__/sdk';
 import DataRenderComponent from '@/components/data-render-component/data-render-component';
-import { Text } from '@kadena/kode-ui';
+import { Grid, Text } from '@kadena/kode-ui';
 import React, { useEffect } from 'react';
 import { ifNill } from '../../utils/ifNill';
 
@@ -90,7 +90,7 @@ export const TransactionResultComponent: React.FC<{
           { key: 'Transaction ID', value: transactionResult.transactionId },
           {
             key: 'Continuation',
-            value: (
+            value: transactionResult.continuation && (
               <DataRenderComponent
                 fields={objectToDataRenderComponentFields({
                   ...JSON.parse(transactionResult.continuation ?? '[]'),
@@ -126,7 +126,7 @@ function mapParameters(
   if (!parameters) return '';
   try {
     return (
-      <>
+      <Grid>
         {(JSON.parse(parameters) as unknown[]).map((param) => {
           if (typeof param === 'object') {
             // eslint-disable-next-line react/jsx-key
@@ -139,7 +139,7 @@ function mapParameters(
           // eslint-disable-next-line react/jsx-key
           return <Text variant="code">{JSON.stringify(param)}</Text>;
         })}
-      </>
+      </Grid>
     );
   } catch {
     return parameters;

diff --git a/packages/apps/explorer/src/utils/menuConfig.ts b/packages/apps/explorer/src/utils/menuConfig.ts
@@ -1,6 +1,6 @@
 export const menuConfig: IMenuConfig = [
   {
-    label: 'build',
+    label: 'Build',
     children: [
       { url: 'https://www.kadena.io/marmalade', label: 'Marmalade' },
       {