diff --git a/src/pages/AssetsPage/ReleaseButton.tsx b/src/pages/AssetsPage/ReleaseButton.tsx
index 77d201c..471d8e3 100644
--- 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({
) : (
diff --git a/src/pages/AssetsPage/VestingName.tsx b/src/pages/AssetsPage/VestingName.tsx
new file mode 100644
index 0000000..bd24a63
--- /dev/null
+++ 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 (
+
+
+
+ Vesting contract
+
+
+
+ );
+}
diff --git a/src/pages/AssetsPage/Vestings.tsx b/src/pages/AssetsPage/Vestings.tsx
index 8f5f28e..c356dee 100644
--- 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 (
-
+
{assets.vestings.length ? (
@@ -51,16 +49,7 @@ export function MyVestings() {
key={vesting.address}
>
-
-
-
-
+
{formatSqd(SQD_TOKEN, fromSqd(d?.balance))}
{formatSqd(SQD_TOKEN, d?.releasable)}