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({ ) : (
- - - + + + + + + + Vesting + {formatSqd(SQD_TOKEN, data?.releasable, 8)} + + + 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)}