feat: prettify vestings table and release dialog

subsquid · May 16, 2024 · 87a88a6 · 87a88a6
1 parent 9d57429
commit 87a88a6
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 28 deletions.
diff --git a/src/pages/AssetsPage/ReleaseButton.tsx b/src/pages/AssetsPage/ReleaseButton.tsx
@@ -1,16 +1,19 @@
 import React, { useState } from 'react';
 
-import { addressFormatter } from '@lib/formatters/formatters';
-import { Button } from '@mui/material';
+import { Button, TableBody, TableCell, TableRow } from '@mui/material';
 import { useFormik } from 'formik';
 import * as yup from 'yup';
 
-import { fromSqd } from '@api/contracts/utils';
+import { formatSqd, fromSqd } from '@api/contracts/utils';
 import { useVestingContract, useVestingContractRelease } from '@api/contracts/vesting';
 import { BlockchainContractError } from '@components/BlockchainContractError';
 import { ContractCallDialog } from '@components/ContractCallDialog';
-import { Form, FormikSelect, FormRow } from '@components/Form';
+import { Form } from '@components/Form';
 import { Loader } from '@components/Loader';
+import { TableList } from '@components/Table/TableList';
+import { useContracts } from '@network/useContracts';
+
+import { VestingName } from './VestingName';
 
 export const claimSchema = yup.object({
   source: yup.string().label('Source').trim().required('Source is required'),
@@ -29,6 +32,7 @@ export function ReleaseButton({
   const { data, isLoading: isVestingLoading } = useVestingContract({
     address: vesting.address as `0x${string}`,
   });
+  const { SQD_TOKEN } = useContracts();
 
   const formik = useFormik({
     initialValues: {
@@ -79,15 +83,17 @@ export function ReleaseButton({
           <Loader />
         ) : (
           <Form onSubmit={formik.handleSubmit}>
-            <FormRow>
-              <FormikSelect
-                id="source"
-                showErrorOnlyOfTouched
-                options={[{ label: addressFormatter(vesting.address), value: vesting.address }]}
-                formik={formik}
-                disabled={true}
-              />
-            </FormRow>
+            <TableList>
+              <TableBody>
+                <TableRow>
+                  <TableCell>
+                    <VestingName vesting={vesting} />
+                  </TableCell>
+                  <TableCell>Vesting</TableCell>
+                  <TableCell align="right">{formatSqd(SQD_TOKEN, data?.releasable, 8)}</TableCell>
+                </TableRow>
+              </TableBody>
+            </TableList>
 
             <BlockchainContractError error={error} />
           </Form>

diff --git a/src/pages/AssetsPage/VestingName.tsx b/src/pages/AssetsPage/VestingName.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { addressFormatter } from '@lib/formatters/formatters';
+import { Box, Stack, styled } from '@mui/material';
+
+import { Avatar } from '@components/Avatar';
+import { CopyToClipboard } from '@components/CopyToClipboard';
+
+const Name = styled(Box, {
+  name: 'Name',
+})(({ theme }) => ({
+  marginBottom: theme.spacing(0.5),
+  fontWeight: 500,
+  whiteSpace: 'nowrap',
+}));
+
+export function VestingName({ vesting }: { vesting: { address: string } }) {
+  return (
+    <Stack direction="row" spacing={2}>
+      <Avatar name={vesting.address.slice(2)} colorDescriminator={vesting.address} />
+      <Box>
+        <Name>Vesting contract</Name>
+        <CopyToClipboard text={vesting.address} content={addressFormatter(vesting.address, true)} />
+      </Box>
+    </Stack>
+  );
+}
diff --git a/src/pages/AssetsPage/Vestings.tsx b/src/pages/AssetsPage/Vestings.tsx
@@ -1,21 +1,19 @@
 import React from 'react';
 
-import { addressFormatter } from '@lib/formatters/formatters.ts';
-import { Box, Stack, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
+import { Box, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
 
 import { formatSqd, fromSqd } from '@api/contracts/utils';
 import { useVestingContracts } from '@api/contracts/vesting';
 import { useMyAssets } from '@api/subsquid-network-squid';
-import { Avatar } from '@components/Avatar';
 import { Card } from '@components/Card';
-import { CopyToClipboard } from '@components/CopyToClipboard';
 import { Loader } from '@components/Loader';
 import { BorderedTable } from '@components/Table/BorderedTable';
 import { NetworkPageTitle } from '@layouts/NetworkLayout';
 import { useContracts } from '@network/useContracts';
 
 import { ReleaseButton } from './ReleaseButton';
+import { VestingName } from './VestingName';
 
 export function MyVestings() {
   const navigate = useNavigate();
@@ -29,7 +27,7 @@ export function MyVestings() {
 
   return (
     <Box>
-      <NetworkPageTitle title="My vestings" />
+      <NetworkPageTitle title="My Vesting" />
       {assets.vestings.length ? (
         <BorderedTable>
           <TableHead>
@@ -51,16 +49,7 @@ export function MyVestings() {
                   key={vesting.address}
                 >
                   <TableCell>
-                    <Stack direction="row" spacing={2}>
-                      <Avatar
-                        name={vesting.address.slice(2)}
-                        colorDescriminator={vesting.address}
-                      />
-                      <CopyToClipboard
-                        text={vesting.address}
-                        content={addressFormatter(vesting.address, false)}
-                      />
-                    </Stack>
+                    <VestingName vesting={vesting} />
                   </TableCell>
                   <TableCell>{formatSqd(SQD_TOKEN, fromSqd(d?.balance))}</TableCell>
                   <TableCell>{formatSqd(SQD_TOKEN, d?.releasable)}</TableCell>