Data Render Component and Transactions Table (#2181)

* initial commit * two column setup * test * data render component done * desktop version compact transaction table done * Explorer Media SSR * transactions table done * horizontal row for data component and transaction tables updated * Apply hash routing * changeset * build fix
kadena-community · May 30, 2024 · e5f8572 · e5f8572
1 parent 1f5511d
commit e5f8572
Show file tree

Hide file tree

Showing 22 changed files with 844 additions and 15 deletions.
diff --git a/.changeset/famous-dolphins-stare.md b/.changeset/famous-dolphins-stare.md
@@ -0,0 +1,6 @@
+---
+"@kadena/explorer": patch
+"@kadena/graph": patch
+---
+
+Data Render Component, Transactions List and hash tab routing done. Including mobile support.
diff --git a/packages/apps/explorer/package.json b/packages/apps/explorer/package.json
@@ -31,6 +31,7 @@
     "@kadena/react-icons": "workspace:*",
     "@kadena/react-ui": "workspace:*",
     "@parcel/watcher": "^2.4.1",
+    "classnames": "^2.3.1",
     "eslint": "^8.45.0",
     "graphql": "~16.8.1",
     "graphql-ws": "^5.16.0",

diff --git a/...nsactions-table/compact-transactions-table-desktop/compact-transactions-table-desktop.tsx b/...nsactions-table/compact-transactions-table-desktop/compact-transactions-table-desktop.tsx
@@ -0,0 +1,72 @@
+import type {
+  ExecutionPayload,
+  Transaction,
+  TransactionResult,
+} from '@/__generated__/sdk';
+import {
+  MonoArrowOutward,
+  MonoCheck,
+  MonoClear,
+} from '@kadena/react-icons/system';
+import { Badge, Text } from '@kadena/react-ui';
+import React, { Fragment } from 'react';
+import {
+  badgeClass,
+  dataFieldClass,
+  dataFieldLinkClass,
+  headerClass,
+  iconLinkClass,
+  linkClass,
+  linkIconClass,
+  sectionClass,
+} from './styles.css';
+
+interface ICompactTransactionsTableDesktopProps {
+  transactions: Transaction[];
+}
+
+const CompactTransactionsTableDesktop: React.FC<
+  ICompactTransactionsTableDesktopProps
+> = ({ transactions }) => {
+  return (
+    <section className={sectionClass}>
+      <span>
+        <Badge className={badgeClass} size="sm">
+          Status
+        </Badge>
+      </span>
+      <span className={headerClass}>Sender</span>
+      <span className={headerClass}>Request Key</span>
+      <span className={headerClass}>Code Preview</span>
+      {transactions.map((transaction, index) => (
+        <Fragment key={index}>
+          {(transaction.result as TransactionResult).goodResult ? (
+            <MonoCheck />
+          ) : (
+            <MonoClear />
+          )}
+          <Text variant="code" className={dataFieldClass}>
+            {transaction.cmd.meta.sender}
+          </Text>
+          <span className={dataFieldLinkClass}>
+            <a href={`/transaction/${transaction.hash}`} className={linkClass}>
+              <Text variant="code" className={dataFieldClass}>
+                {transaction.hash}
+              </Text>
+            </a>
+            <a
+              href={`/transaction/${transaction.hash}`}
+              className={iconLinkClass}
+            >
+              <MonoArrowOutward className={linkIconClass} />
+            </a>
+          </span>
+          <Text variant="code" className={dataFieldClass}>
+            {(transaction.cmd.payload as ExecutionPayload).code}
+          </Text>
+        </Fragment>
+      ))}
+    </section>
+  );
+};
+export default CompactTransactionsTableDesktop;
diff --git a/...rc/components/compact-transactions-table/compact-transactions-table-desktop/styles.css.ts b/...rc/components/compact-transactions-table/compact-transactions-table-desktop/styles.css.ts
@@ -0,0 +1,65 @@
+import { atoms, tokens } from '@kadena/react-ui/styles';
+import { style } from '@vanilla-extract/css';
+
+export const sectionClass = style([
+  atoms({
+    padding: 'n6',
+    backgroundColor: 'base.default',
+    marginBlockEnd: 'md',
+    display: 'grid',
+  }),
+  {
+    justifyContent: 'start',
+    gridTemplateColumns: `auto repeat(3, minmax(${tokens.kda.foundation.size.n32}, 1fr))`,
+    gap: `${tokens.kda.foundation.spacing.sm} ${tokens.kda.foundation.spacing.xl}`,
+  },
+]);
+
+export const headerClass = style([
+  atoms({
+    fontWeight: 'primaryFont.bold',
+  }),
+]);
+
+export const badgeClass = style({
+  backgroundColor: tokens.kda.foundation.color.neutral.n100,
+  color: tokens.kda.foundation.color.neutral.n0,
+});
+
+export const dataFieldLinkClass = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: tokens.kda.foundation.spacing.sm,
+  minWidth: 0,
+});
+
+export const linkClass = style({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  textDecoration: 'none',
+});
+
+export const iconLinkClass = style([
+  atoms({
+    color: 'text.base.default',
+  }),
+]);
+
+export const linkIconClass = style([
+  atoms({
+    fontSize: 'xs',
+  }),
+  {
+    minWidth: 'fit-content',
+  },
+]);
+
+export const dataFieldClass = style({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  fontWeight: tokens.kda.foundation.typography.weight.primaryFont.medium,
+  // If we use atoms it will be overridden by the Text component.
+  color: tokens.kda.foundation.color.text.base.default,
+});
diff --git a/...ransactions-table/compact-transactions-table-mobile/compact-transactions-table-mobile.tsx b/...ransactions-table/compact-transactions-table-mobile/compact-transactions-table-mobile.tsx
@@ -0,0 +1,84 @@
+import type {
+  ExecutionPayload,
+  Transaction,
+  TransactionResult,
+} from '@/__generated__/sdk';
+import {
+  MonoArrowOutward,
+  MonoCheck,
+  MonoClear,
+} from '@kadena/react-icons/system';
+import { Badge, Text } from '@kadena/react-ui';
+import React, { Fragment } from 'react';
+import {
+  badgeClass,
+  dataFieldClass,
+  dataFieldLinkClass,
+  headerClass,
+  iconLinkClass,
+  linkClass,
+  linkIconClass,
+  rowClass,
+  sectionClass,
+} from './styles.css';
+
+interface ICompactTransactionsTableMobileProps {
+  transactions: Transaction[];
+}
+
+const CompactTransactionsTableMobile: React.FC<
+  ICompactTransactionsTableMobileProps
+> = ({ transactions }) => {
+  return (
+    <>
+      {transactions.map((transaction, index) => (
+        <section key={index} className={sectionClass}>
+          <div className={rowClass}>
+            <span>
+              <Badge className={badgeClass} size="sm">
+                Status
+              </Badge>
+            </span>
+            {(transaction.result as TransactionResult).goodResult ? (
+              <MonoCheck />
+            ) : (
+              <MonoClear />
+            )}
+          </div>
+          <div className={rowClass}>
+            <span className={headerClass}>Sender</span>
+            <Text variant="code" className={dataFieldClass}>
+              {transaction.cmd.meta.sender}
+            </Text>
+          </div>
+          <div className={rowClass}>
+            <span className={headerClass}>RequestKey</span>
+            <span className={dataFieldLinkClass}>
+              <a
+                href={`/transaction/${transaction.hash}`}
+                className={linkClass}
+              >
+                <Text variant="code" className={dataFieldClass}>
+                  {transaction.hash}
+                </Text>
+              </a>
+              <a
+                href={`/transaction/${transaction.hash}`}
+                className={iconLinkClass}
+              >
+                <MonoArrowOutward className={linkIconClass} />
+              </a>
+            </span>
+          </div>
+          <div className={rowClass}>
+            <span className={headerClass}>Code</span>
+            <Text variant="code" className={dataFieldClass}>
+              {(transaction.cmd.payload as ExecutionPayload).code}
+            </Text>
+          </div>
+        </section>
+      ))}
+    </>
+  );
+};
+export default CompactTransactionsTableMobile;
diff --git a/...src/components/compact-transactions-table/compact-transactions-table-mobile/styles.css.ts b/...src/components/compact-transactions-table/compact-transactions-table-mobile/styles.css.ts
@@ -0,0 +1,66 @@
+import { atoms, tokens } from '@kadena/react-ui/styles';
+import { style } from '@vanilla-extract/css';
+
+export const sectionClass = style([
+  atoms({
+    padding: 'n6',
+    backgroundColor: 'base.default',
+    marginBlockEnd: 'md',
+  }),
+]);
+
+export const headerClass = style([
+  atoms({
+    fontWeight: 'primaryFont.bold',
+  }),
+]);
+
+export const dataFieldClass = style({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  fontWeight: tokens.kda.foundation.typography.weight.primaryFont.medium,
+  // If we use atoms it will be overridden by the Text component.
+  color: tokens.kda.foundation.color.text.base.default,
+});
+
+export const rowClass = style([
+  atoms({ gap: 'md' }),
+  {
+    display: 'flex',
+  },
+]);
+
+export const badgeClass = style({
+  backgroundColor: tokens.kda.foundation.color.neutral.n100,
+  color: tokens.kda.foundation.color.neutral.n0,
+});
+
+export const dataFieldLinkClass = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: tokens.kda.foundation.spacing.sm,
+  minWidth: 0,
+});
+
+export const linkClass = style({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  textDecoration: 'none',
+});
+
+export const iconLinkClass = style([
+  atoms({
+    color: 'text.base.default',
+  }),
+]);
+
+export const linkIconClass = style([
+  atoms({
+    fontSize: 'xs',
+  }),
+  {
+    minWidth: 'fit-content',
+  },
+]);
diff --git a/...es/apps/explorer/src/components/compact-transactions-table/compact-transactions-table.tsx b/...es/apps/explorer/src/components/compact-transactions-table/compact-transactions-table.tsx
@@ -0,0 +1,25 @@
+import type { Transaction } from '@/__generated__/sdk';
+import { Media } from '@/components/layout/media';
+import React from 'react';
+import CompactTransactionsTableDesktop from './compact-transactions-table-desktop/compact-transactions-table-desktop';
+import CompactTransactionsTableMobile from './compact-transactions-table-mobile/compact-transactions-table-mobile';
+
+interface ICompactTransactionsTableProps {
+  transactions: Transaction[];
+}
+
+const CompactTransactionsTable: React.FC<ICompactTransactionsTableProps> = ({
+  transactions,
+}) => {
+  return (
+    <>
+      <Media lessThan="sm">
+        <CompactTransactionsTableMobile transactions={transactions} />
+      </Media>
+      <Media greaterThanOrEqual="sm">
+        <CompactTransactionsTableDesktop transactions={transactions} />
+      </Media>
+    </>
+  );
+};
+export default CompactTransactionsTable;
diff --git a/...ta-render-component/data-render-component-horizontal/data-render-component-horizontal.tsx b/...ta-render-component/data-render-component-horizontal/data-render-component-horizontal.tsx
@@ -0,0 +1,65 @@
+import { MonoArrowOutward } from '@kadena/react-icons/system';
+import { Text } from '@kadena/react-ui';
+import React from 'react';
+import {
+  dataFieldClass,
+  dataFieldLinkClass,
+  flexClass,
+  headerClass,
+  iconLinkClass,
+  linkClass,
+  linkIconClass,
+} from './styles.css';
+
+interface IDataRenderComponentField {
+  type?: 'text' | 'code';
+  key: string;
+  value: string | string[];
+  link?: string;
+}
+
+interface IDataRenderComponentProps {
+  fields: IDataRenderComponentField[];
+}
+
+const DataRenderComponentHorizontal: React.FC<IDataRenderComponentProps> = ({
+  fields,
+}) => {
+  return (
+    <div className={flexClass}>
+      {fields.map((field, index) => (
+        <div key={index}>
+          <div className={headerClass}>{field.key}</div>
+          {field.link ? (
+            <div className={dataFieldLinkClass}>
+              <a href={field.link} className={linkClass}>
+                <Text variant="code" className={dataFieldClass}>
+                  {field.value}
+                </Text>
+              </a>
+              <a href={field.link} className={iconLinkClass}>
+                <MonoArrowOutward className={linkIconClass} />
+              </a>
+            </div>
+          ) : field.type === 'code' ? (
+            <Text variant="code" className={dataFieldClass}>
+              <pre>{field.value}</pre>
+            </Text>
+          ) : Array.isArray(field.value) ? (
+            field.value.map((value, index) => (
+              <Text variant="code" className={dataFieldClass} key={index}>
+                {value}
+              </Text>
+            ))
+          ) : (
+            <Text variant="code" className={dataFieldClass}>
+              {field.value}
+            </Text>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default DataRenderComponentHorizontal;