Add voucher table expander

gear-tech · Jan 29, 2024 · 28b7808 · 28b7808
1 parent 2026484
commit 28b7808
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 27 deletions.
diff --git a/idea/frontend/src/features/voucher/ui/voucher-table/voucher-table.module.scss b/idea/frontend/src/features/voucher/ui/voucher-table/voucher-table.module.scss
@@ -2,3 +2,41 @@
   margin-right: 8px;
   font-weight: 600;
 }
+
+.table {
+  display: flex;
+
+  > *:first-child {
+    flex: 1;
+  }
+}
+
+.openButton {
+  margin-left: 4px;
+  padding: 44px 0;
+
+  display: flex;
+  align-items: flex-start;
+
+  background-color: transparent;
+
+  transition: opacity 0.25s;
+
+  &:hover {
+    opacity: 0.75;
+  }
+
+  svg {
+    transform: rotate(90deg);
+
+    path {
+      fill: #fff;
+    }
+  }
+
+  &.open {
+    svg {
+      transform: rotate(-90deg);
+    }
+  }
+}
diff --git a/idea/frontend/src/features/voucher/ui/voucher-table/voucher-table.tsx b/idea/frontend/src/features/voucher/ui/voucher-table/voucher-table.tsx
@@ -1,12 +1,16 @@
 import { HexString } from '@gear-js/api';
 import { useBalance, useBalanceFormat, useVoucherStatus } from '@gear-js/react-hooks';
+import { Button } from '@gear-js/ui';
+import { useState } from 'react';
+import clsx from 'clsx';
 
 import VoucherPlaceholderSVG from '@/features/voucher/assets/voucher-placeholder.svg?react';
 import { ContentLoader } from '@/shared/ui/contentLoader';
 import { BulbBlock, BulbStatus } from '@/shared/ui/bulbBlock';
 import { withAccount } from '@/shared/ui';
 import { Table, TableRow } from '@/shared/ui/table';
 import { IdBlock } from '@/shared/ui/idBlock';
+import ArrowSVG from '@/shared/assets/images/actions/arrowRight.svg?react';
 
 import styles from './voucher-table.module.scss';
 
@@ -31,38 +35,51 @@ const VoucherTable = withAccount(({ id, expireBlock, owner, isCodeUploadEnabled
 
   const isV110Runtime = expirationTimestamp && owner && expireBlock && isCodeUploadEnabled !== undefined;
 
+  const [isOpen, setIsOpen] = useState(false);
+  const toggle = () => setIsOpen((prevValue) => !prevValue);
+
   return isBalanceReady && isVoucherStatusReady ? (
-    <Table>
-      <TableRow name="Status">
-        <BulbBlock status={getBulb(isVoucherActive)} text={isVoucherActive ? 'Available' : 'Expired'} size="large" />
-      </TableRow>
+    <div className={styles.table}>
+      <Table>
+        <TableRow name="Status">
+          <BulbBlock status={getBulb(isVoucherActive)} text={isVoucherActive ? 'Available' : 'Expired'} size="large" />
+        </TableRow>
+        <TableRow name="Amount">
+          <span className={styles.highlight}>{formattedBalance.value}</span>
+          <span>{formattedBalance.unit}</span>
+        </TableRow>
+
+        {isV110Runtime && isOpen && (
+          <>
+            <TableRow name="Issued by">
+              <IdBlock id={owner} size="big" />
+            </TableRow>
+
+            <TableRow name="Expire at">
+              <span className={styles.highlight}>{new Date(expirationTimestamp).toLocaleString()}</span>
+              <span>(#{expireBlock})</span>
+            </TableRow>
 
-      <TableRow name="Amount">
-        <span className={styles.highlight}>{formattedBalance.value}</span>
-        <span>{formattedBalance.unit}</span>
-      </TableRow>
+            <TableRow name="Allow code upload">
+              <BulbBlock
+                status={getBulb(isCodeUploadEnabled)}
+                text={isCodeUploadEnabled ? 'Enabled' : 'Disabled'}
+                size="large"
+              />
+            </TableRow>
+          </>
+        )}
+      </Table>
 
       {isV110Runtime && (
-        <>
-          <TableRow name="Issued by">
-            <IdBlock id={owner} size="big" />
-          </TableRow>
-
-          <TableRow name="Expire at">
-            <span className={styles.highlight}>{new Date(expirationTimestamp).toLocaleString()}</span>
-            <span>(#{expireBlock})</span>
-          </TableRow>
-
-          <TableRow name="Allow code upload">
-            <BulbBlock
-              status={getBulb(isCodeUploadEnabled)}
-              text={isCodeUploadEnabled ? 'Enabled' : 'Disabled'}
-              size="large"
-            />
-          </TableRow>
-        </>
+        <Button
+          icon={ArrowSVG}
+          color="transparent"
+          onClick={toggle}
+          className={clsx(styles.openButton, isOpen && styles.open)}
+        />
       )}
-    </Table>
+    </div>
   ) : (
     <ContentLoader text="There's no voucher" isEmpty={false}>
       <VoucherPlaceholderSVG />