Merge branch 'main' into feature/compute

src/components/organisms/AssetContent/EditHistory.tsx

@@ -32,7 +32,7 @@ export default function EditHistory(): ReactElement {
   const [creationTx, setCreationTx] = useState<string>()
 
   useEffect(() => {
-    if (!data) return
+    if (!data || data.datatokens.length === 0) return
     setReceipts(data.datatokens[0].updates)
     setCreationTx(data.datatokens[0].tx)
   }, [data])

src/components/pages/History/index.module.css

@@ -18,17 +18,29 @@
 
 .content {
   margin-top: var(--spacer);
+  background-color: var(--background-content) !important;
 }
 
-.section {
-  margin-top: calc(var(--spacer) * 1.5);
+.tabs div[class*='tabs'] {
+  background-color: var(--background-content);
 }
 
-.section:last-child {
-  margin-bottom: 0;
+.tabs ul[class*='tabList'] {
+  background-color: var(--background-content);
+  border: 1px solid var(--border-color);
+  border-bottom: 0;
+  border-top-left-radius: var(--border-radius);
+  border-top-right-radius: var(--border-radius);
+  white-space: nowrap;
+  overflow-y: hidden;
+  overflow-x: auto;
 }
 
-.sectionTitle {
-  font-size: var(--font-size-h3);
-  margin-bottom: calc(var(--spacer) / 2);
+.tabs div[class*='tabContent'] {
+  border: 1px solid var(--border-color);
+  padding-bottom: 0;
+}
+
+.tabs div[class*='tab-panel--selected'] {
+  margin-bottom: var(--spacer);
 }

src/components/pages/History/index.tsx

@@ -1,56 +1,39 @@
-import React, { ReactElement, ReactNode } from 'react'
+import React, { ReactElement } from 'react'
 import ComputeJobs from './ComputeJobs'
 import styles from './index.module.css'
 import PoolShares from './PoolShares'
 import PoolTransactions from '../../molecules/PoolTransactions'
 import PublishedList from './PublishedList'
 import Downloads from './Downloads'
+import Tabs from '../../atoms/Tabs'
 
-const sections = [
+const tabs = [
   {
     title: 'Published',
-    component: <PublishedList />
+    content: <PublishedList />
   },
   {
     title: 'Pool Shares',
-    component: <PoolShares />
+    content: <PoolShares />
   },
   {
     title: 'Pool Transactions',
-    component: <PoolTransactions />
+    content: <PoolTransactions />
   },
   {
     title: 'Downloads',
-    component: <Downloads />
+    content: <Downloads />
   },
   {
     title: 'Compute Jobs',
-    component: <ComputeJobs />
+    content: <ComputeJobs />
   }
 ]
 
-const Section = ({
-  title,
-  component
-}: {
-  title: string
-  component: ReactNode
-}) => {
-  return (
-    <div className={styles.section}>
-      <h2 className={styles.sectionTitle}>{title}</h2>
-      {component}
-    </div>
-  )
-}
-
 export default function HistoryPage(): ReactElement {
   return (
     <article className={styles.content}>
-      {sections.map((section) => {
-        const { title, component } = section
-        return <Section key={title} title={title} component={component} />
-      })}
+      <Tabs items={tabs} className={styles.tabs} />
     </article>
   )
 }

src/global/_variables.css

@@ -26,6 +26,7 @@
   --font-color-text: #41474e;
   --font-color-heading: #141414;
   --background-body: #fcfcfc;
+  --background-content: #fff;
   --background-body-transparent: rgba(255, 255, 255, 0.8);
   --background-content: #fff;
   --background-highlight: #f7f7f7;