diff --git a/packages/frontend/src/app/transaction/[hash]/Transaction.js b/packages/frontend/src/app/transaction/[hash]/Transaction.js deleted file mode 100644 index b1c8c7327..000000000 --- a/packages/frontend/src/app/transaction/[hash]/Transaction.js +++ /dev/null @@ -1,166 +0,0 @@ -'use client' - -import * as Api from '../../../util/Api' -import { useState, useEffect, useCallback } from 'react' -import { getTransitionTypeStringById, fetchHandlerSuccess, fetchHandlerError } from '../../../util' -import { Credits } from '../../../components/data' -import { LoadingLine, LoadingList } from '../../../components/loading' -import { ErrorMessageBlock } from '../../../components/Errors' -import TransactionData from './TransactionData' -import { CheckCircleIcon, WarningTwoIcon } from '@chakra-ui/icons' -import { RateTooltip } from '../../../components/ui/Tooltips' -import './Transaction.scss' - -import { - Container, - TableContainer, Table, Thead, Tbody, Tr, Th, Td, - Heading, - Flex, - Code -} from '@chakra-ui/react' - -function Transaction ({ hash }) { - const [transaction, setTransaction] = useState({ data: {}, loading: true, error: false }) - const [rate, setRate] = useState({ data: {}, loading: true, error: false }) - const [decodedST, setDecodedST] = useState(null) - const tdTitleWidth = 250 - - const decodeTx = useCallback((tx) => { - Api.decodeTx(tx) - .then((stateTransition) => { - setDecodedST(stateTransition) - }) - .catch(console.log) - }, []) - - const fetchData = () => { - setTransaction(state => ({ ...state, loading: true })) - - Api.getTransaction(hash) - .then((res) => { - fetchHandlerSuccess(setTransaction, res) - decodeTx(res.data) - }) - .catch(err => fetchHandlerError(setTransaction, err)) - - Api.getRate() - .then(res => fetchHandlerSuccess(setRate, res)) - .catch(err => fetchHandlerError(setRate, err)) - } - - useEffect(fetchData, [hash, decodeTx]) - - const StatusIcon = transaction.data?.status === 'SUCCESS' - ? - : - - return ( - - - {!transaction.error - ? - - - - - - - - - - - - {transaction.data?.error && - - - - - } - - - - - - - - - - - - - - - - - - - - - - - - - -
transaction info
Status - - {transaction.data?.status}{StatusIcon} - -
Error - - - {transaction.data?.error} - - -
Hash - {transaction.data?.hash} -
Height - {transaction.data?.blockHeight} -
Type - - {transaction.data?.type && getTransitionTypeStringById(transaction.data?.type)} - -
Index - {transaction.data?.index} -
Timestamp - {transaction.data?.timestamp && new Date(transaction.data?.timestamp).toLocaleString()} -
Gas Used - - - {transaction.data?.gasUsed} Credits - - -
- : } - - - {!transaction.error && - - Transaction data - - {(!transaction.loading && decodedST) - ? - -
- : } - - } - - ) -} - -export default Transaction diff --git a/packages/frontend/src/app/transaction/[hash]/TransactionData.js b/packages/frontend/src/app/transaction/[hash]/TransactionData.js index b9f14d123..1f3a47a43 100644 --- a/packages/frontend/src/app/transaction/[hash]/TransactionData.js +++ b/packages/frontend/src/app/transaction/[hash]/TransactionData.js @@ -1,202 +1,136 @@ -import Link from 'next/link' +// import Link from 'next/link' import { StateTransitionEnum } from '../../../enums/state.transition.type' -import { Thead, Tbody, Tr, Th, Td } from '@chakra-ui/react' +// import { Thead, Tbody, Tr, Th, Td } from '@chakra-ui/react' +import { ValueCard } from '../../../components/cards' +import { Identifier, InfoLine } from '../../../components/data' +import { TransactionCard } from '../../../components/transactions' function TransactionData ({ data }) { if (data === null) return <> - if (data.type === StateTransitionEnum.DATA_CONTRACT_CREATE) { - return (<> - - - Created data contract - - - + console.log('data', data) - - - Data contract - {data.dataContractId} - - - Owner - {data.identityId} - - + if (data.type === StateTransitionEnum.MASTERNODE_VOTE) { + return (<> + + + {/* {data?.proTxHash} */} + + + )} + // loading={transaction.loading} + // error={transaction.error} + /> + + + {data?.contractId} + + + )} + // loading={transaction.loading} + error={!data?.contractId} + /> + + + {data?.identity} + + + )} + // loading={transaction.loading} + error={!data?.identity} + /> + ) } + if (data.type === StateTransitionEnum.DATA_CONTRACT_CREATE) { + return (<>DATA_CONTRACT_CREATE) + } + if (data.type === StateTransitionEnum.DOCUMENTS_BATCH) { return (<> - - - Changed documents - - - - - {data.transitions.map((transition, key) => - - - Data contract - {transition.dataContractId} - - - Document - {transition.id} - - + + + {data?.owner} + + )} + // loading={transaction.loading} + error={!data?.owner} + /> + + + {data?.transitions?.map((transaction, i) => ( + + ))} + )} + // loading={transaction.loading} + error={data?.transitions === undefined} + /> ) } if (data.type === StateTransitionEnum.IDENTITY_CREATE) { return (<> - - - Created identity - - - - - - - Identity - {data.identityId} - - + + + {data?.identityId} + + + )} + // loading={transaction.loading} + // error={data?.identityId} + /> ) } if (data.type === StateTransitionEnum.IDENTITY_TOP_UP) { - return (<> - - - Credit top up - - - - - - - Amount - {data.amount} Credits - - - Identity - {data.identityId} - - - ) + return (<>IDENTITY_TOP_UP) } if (data.type === StateTransitionEnum.DATA_CONTRACT_UPDATE) { - return (<> - - - Updated data contract - - - - - - - Data contract - {data.dataContractId} - - - Owner - {data.identityId} - - - Version - {data.version} - - - ) + return (<>DATA_CONTRACT_UPDATE) } if (data.type === StateTransitionEnum.IDENTITY_UPDATE) { - return (<> - - - Updated identity - - - - - - - Identity - {data.identityId} - - - Revision - {data.revision} - - - ) + return (<>IDENTITY_UPDATE) } if (data.type === StateTransitionEnum.IDENTITY_CREDIT_WITHDRAWAL) { - return (<> - - - Credit withdrawal - - - - - - - Identity - {data.senderId} - - - Output script - {data.outputScript} - - - Amount - {data.amount} Credits - - - Core fee per byte - {data.coreFeePerByte} - - - Nonce - {data.nonce} - - - ) + return (<>IDENTITY_CREDIT_WITHDRAWAL) } if (data.type === StateTransitionEnum.IDENTITY_CREDIT_TRANSFER) { - return (<> - - - Credit transfer - - - - - - - Amount - {data.amount} Credits - - - Sender - {data.senderId} - - - Recipient - {data.recipientId} - - - ) + return (<>IDENTITY_CREDIT_TRANSFER) } } diff --git a/packages/frontend/src/app/transaction/[hash]/TransactionPage.js b/packages/frontend/src/app/transaction/[hash]/TransactionPage.js new file mode 100644 index 000000000..536628afb --- /dev/null +++ b/packages/frontend/src/app/transaction/[hash]/TransactionPage.js @@ -0,0 +1,339 @@ +'use client' + +import * as Api from '../../../util/Api' +import { useState, useEffect, useCallback } from 'react' +// import { getTransitionTypeStringById, fetchHandlerSuccess, fetchHandlerError } from '../../../util' +import { fetchHandlerSuccess, fetchHandlerError } from '../../../util' +// import { Credits, CreditsBlock, InfoLine, DateBlock, Identifier } from '../../../components/data' +import { CreditsBlock, InfoLine, DateBlock, Identifier } from '../../../components/data' +// import { LoadingLine, LoadingList } from '../../../components/loading' +// import { ErrorMessageBlock } from '../../../components/Errors' +import TransactionData from './TransactionData' +import { CheckCircleIcon, WarningTwoIcon } from '@chakra-ui/icons' +// import { RateTooltip } from '../../../components/ui/Tooltips' +import { ValueContainer, PageDataContainer } from '../../../components/ui/containers' +import { ValueCard } from '../../../components/cards' +import { HorisontalSeparator } from '../../../components/ui/separators' +import { CopyButton } from '../../../components/ui/Buttons' +import { + // Container, + // TableContainer, Table, Thead, Tbody, Tr, Th, Td, + // Heading, + // Flex, + // Code, + Badge +} from '@chakra-ui/react' +import TypeBadge from '../../../components/transactions/TypeBadge' +import './TransactionPage.scss' + +function Transaction ({ hash }) { + const [transaction, setTransaction] = useState({ data: {}, loading: true, error: false }) + const [rate, setRate] = useState({ data: {}, loading: true, error: false }) + const [decodedST, setDecodedST] = useState(null) + // const tdTitleWidth = 250 + + console.log('transaction', transaction) + console.log('decodedST', decodedST) + + const decodeTx = useCallback((tx) => { + Api.decodeTx(tx) + .then((stateTransition) => { + setDecodedST(stateTransition) + }) + .catch(console.log) + }, []) + + const fetchData = () => { + setTransaction(state => ({ ...state, loading: true })) + + Api.getTransaction(hash) + .then((res) => { + fetchHandlerSuccess(setTransaction, res) + decodeTx(res.data) + }) + .catch(err => fetchHandlerError(setTransaction, err)) + + Api.getRate() + .then(res => fetchHandlerSuccess(setRate, res)) + .catch(err => fetchHandlerError(setRate, err)) + } + + useEffect(fetchData, [hash, decodeTx]) + + const StatusIcon = transaction.data?.status === 'SUCCESS' + ? + : + + // temp + if (!transaction.data?.error) transaction.data.error = 'Document Ciifrnm8gjhAcRhySwtLhfwguGZ7cetssj3ETMSMX6j3 has invalid revision Some(1). The desired revision is 1' + if (!transaction.data?.owner) transaction.data.owner = '4qwHscUBwHeCJ1Q2KsMV8jpkkN68LfBxVPmCaKBKhzGK' + if (!transaction.data?.feeMultiplier) transaction.data.feeMultiplier = '10' + if (!transaction.data?.signature) transaction.data.signature = '19E4611A8CAF217C18BD978A5BE8D3EFA9C971C394BF8FE9C661AF86164DB517' + + return ( + +
+ )} + loading={transaction.loading} + error={transaction.error} + /> + + + {transaction.data?.hash} + + )} + loading={transaction.loading} + error={transaction.error} + /> + + + Height: {transaction.data?.blockHeight} + + {transaction.data?.blockHash} + + + )} + loading={transaction.loading} + error={transaction.error} + /> + + + + )} + loading={transaction.loading} + error={transaction.error} + /> + + + + {StatusIcon} + {transaction.data?.status} + + {transaction.data?.error && + + {transaction.data.error} + + } +
+ )} + loading={transaction.loading} + error={transaction.error} + /> + + + + {transaction.data?.owner} + + + )} + loading={transaction.loading} + error={transaction.error} + /> + + + {transaction.data?.data} + + + )} + loading={transaction.loading} + error={transaction.error} + /> + + + )} + loading={transaction.loading} + error={transaction.error} + /> + + + +{transaction.data?.feeMultiplier}% + + )} + loading={transaction.loading} + error={transaction.error || !transaction.data?.feeMultiplier} + /> + + + {transaction.data?.signature} + + )} + loading={transaction.loading} + error={transaction.error || !transaction.data?.signature} + /> + + + + +
+
+ Details +
+ + +
+ + + ) + +// return ( +// +// +// {!transaction.error +// ? +// +// +// +// +// +// +// +// +// +// +// +// {transaction.data?.error && +// +// +// +// +// } +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +//
transaction info
Status +// +// {transaction.data?.status}{StatusIcon} +// +//
Error +// +// +// {transaction.data?.error} +// +// +//
Hash +// {transaction.data?.hash} +//
Height +// {transaction.data?.blockHeight} +//
Type +// +// {transaction.data?.type && getTransitionTypeStringById(transaction.data?.type)} +// +//
Index +// {transaction.data?.index} +//
Timestamp +// {transaction.data?.timestamp && new Date(transaction.data?.timestamp).toLocaleString()} +//
Gas Used +// +// +// {transaction.data?.gasUsed} Credits +// +// +//
+// : } +// +// +// {!transaction.error && +// +// Transaction data +// +// {(!transaction.loading && decodedST) +// ? +// +//
+// : } +// +// } +// +// ) +} + +export default Transaction diff --git a/packages/frontend/src/app/transaction/[hash]/TransactionPage.scss b/packages/frontend/src/app/transaction/[hash]/TransactionPage.scss new file mode 100644 index 000000000..10ef3fae6 --- /dev/null +++ b/packages/frontend/src/app/transaction/[hash]/TransactionPage.scss @@ -0,0 +1,170 @@ +@use '../../../styles/mixins.scss'; +@import '../../../styles/variables.scss'; + +.TransactionPage { + position: relative; + + &__CommonInfo { + .InfoLine--Loading .InfoLine { + &__Value { + height: 28px; + flex-grow: 1; + width: 100% !important; + } + } + } + + &__InfoLine { + margin-bottom: 14px; + justify-content: flex-start; + + &--RawTransaction, &--Status, &--Transactions { + align-items: baseline; + } + + .InfoLine__Title { + width: 200px; + line-height: 20px; + } + + .InfoLine__Value { + text-align: left; + font-size: 0.75rem; + } + } + + &__StatusContainer {} + + .HorisontalSeparator { + margin: 14px 0; + } + + &__Signature { + background: transparent; + overflow-wrap: break-word; + word-break: break-word; + } + + &__ErrorContainer { + margin-top: 8px; + font-size: 0.688rem; + + .ValueContainer__Value { + overflow: hidden; + overflow-wrap: break-word; + word-break: break-word; + } + } + + &__BlockHeight { + padding: 2px 8px; + border-radius: 3px; + font-size: 0.625rem; + margin-right: 12px; + white-space: nowrap; + } + + &__BlockHash { + //padding: 7px 10px; + } + + &__DetailsInfo { + + } + + &__DetailsInfoTitle { + font-family: $font-heading; + font-size: 0.75rem; + letter-spacing: .4px; + text-transform: uppercase; + font-weight: 700; + } + + &__RawTransaction { + align-items: flex-start; + max-width: 510px; + overflow-wrap: break-word; + word-break: break-word; + + .CopyButton { + margin-left: 12px; + } + } + + @media screen and (max-width: $breakpoint-md) { + &__InfoLine { + margin-bottom: 12px; + justify-content: space-between; + flex-wrap: wrap; + + &:not(&--Index):not(&--Type) { + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + + .InfoLine__Title { + width: 100%; + margin-bottom: 4px; + margin-right: 0; + } + + .InfoLine__Value { + width: 100%; + } + } + + &--Status { + position: relative; + } + + &--GasUsed { + .CreditsBlock { + display: flex; + flex-wrap: wrap; + + .CreditsBlock__Usd { + margin-left: auto; + } + } + } + + &--Timestamp { + .DateBlock__Delta { + margin-left: auto; + } + } + + .InfoLine__Title { + width: auto; + } + + .ValueCard { + .Identifier { + flex-grow: 1; + + .Identifier__SymbolsContainer { + flex-grow: 1; + } + } + } + } + + &__StatusBadge { + position: absolute; + top: 0; + right: 0; + } + + &__ErrorContainer { + margin-top: 0; + } + + &__StatusContainer { + + } + + &__RawTransaction { + max-width: none; + } + } +} \ No newline at end of file diff --git a/packages/frontend/src/app/transaction/[hash]/page.js b/packages/frontend/src/app/transaction/[hash]/page.js index c44519daf..8c6c5a1f6 100644 --- a/packages/frontend/src/app/transaction/[hash]/page.js +++ b/packages/frontend/src/app/transaction/[hash]/page.js @@ -1,4 +1,4 @@ -import Transaction from './Transaction' +import Transaction from './TransactionPage' export function generateMetadata ({ params }) { return { diff --git a/packages/frontend/src/app/validator/[hash]/ValidatorPage.scss b/packages/frontend/src/app/validator/[hash]/ValidatorPage.scss index 44f4c9c13..26a4450f3 100644 --- a/packages/frontend/src/app/validator/[hash]/ValidatorPage.scss +++ b/packages/frontend/src/app/validator/[hash]/ValidatorPage.scss @@ -1,7 +1,6 @@ @use '../../../styles/mixins.scss'; @import '../../../styles/variables.scss'; - @mixin blockOffsets ($property) { #{$property}: 12px; @@ -50,7 +49,7 @@ flex-direction: column; flex-grow: 1; padding-top: 12px !important; - padding-bottom: 12px !important; + padding-bottom: 0 !important; @include mixins.InfoContainerPadding(padding-left, 0px, true); @include mixins.InfoContainerPadding(padding-right, 0px, true); } @@ -65,7 +64,7 @@ } &__ListPagination { - margin-top: 20px; + @include mixins.InfoContainerPadding(margin-top); .PageItem { &--Previous, &--Next { @@ -102,6 +101,10 @@ &__InfoLine { margin-bottom: 14px; + + .DateBlock { + justify-content: flex-end; + } } &__ValueContainer { @@ -124,6 +127,12 @@ &__ContentContainer { grid-template-columns: 1fr; } + + .PageDataContainer__Content { + padding: 0; + border-radius: 0; + background: transparent; + } } @media screen and (min-width: $breakpoint-lg) and (max-width: 1100px) { diff --git a/packages/frontend/src/components/cards/ValueCard.js b/packages/frontend/src/components/cards/ValueCard.js index 4e8bf0b0d..b2cfd7d15 100644 --- a/packages/frontend/src/components/cards/ValueCard.js +++ b/packages/frontend/src/components/cards/ValueCard.js @@ -1,7 +1,7 @@ import Link from 'next/link' import './ValueCard.scss' -const Wrapper = (props, ref) => { +const Wrapper = (props) => { return props?.link ? {props.children} :
{props.children}
@@ -10,7 +10,7 @@ const Wrapper = (props, ref) => { export default function ValueCard ({ link, loading, children, className }) { return ( {children} diff --git a/packages/frontend/src/components/data/CreditsBlock.scss b/packages/frontend/src/components/data/CreditsBlock.scss index f0fd78d29..cbcbce981 100644 --- a/packages/frontend/src/components/data/CreditsBlock.scss +++ b/packages/frontend/src/components/data/CreditsBlock.scss @@ -31,8 +31,8 @@ display: inline-block; padding: 6px 8px; font-size: 0.688rem; - color: var(--chakra-colors-green-label); - background-color: rgba(88, 244, 188, .2); + color: var(--chakra-colors-green-emeralds); + background-color: rgba(var(--chakra-colors-green-emeralds-rgb), .2); border-radius: 8px; } } \ No newline at end of file diff --git a/packages/frontend/src/components/data/DateBlock.js b/packages/frontend/src/components/data/DateBlock.js index 1a57f07aa..90d85c484 100644 --- a/packages/frontend/src/components/data/DateBlock.js +++ b/packages/frontend/src/components/data/DateBlock.js @@ -4,7 +4,7 @@ import { getTimeDelta } from '../../util' import { CalendarIcon } from '../ui/icons' import './DateBlock.scss' -function DateBlock ({ timestamp, format }) { +function DateBlock ({ timestamp, format, showTime = false }) { const date = new Date(timestamp) if (String(date) === 'Invalid Date') return null @@ -12,7 +12,8 @@ function DateBlock ({ timestamp, format }) { const options = { day: 'numeric', month: 'short', - year: 'numeric' + year: 'numeric', + ...(showTime && { hour: '2-digit', minute: '2-digit' }) } const formattedDate = date.toLocaleDateString('en-GB', options) diff --git a/packages/frontend/src/components/data/Identifier.js b/packages/frontend/src/components/data/Identifier.js index d168b3773..9219bb300 100644 --- a/packages/frontend/src/components/data/Identifier.js +++ b/packages/frontend/src/components/data/Identifier.js @@ -29,7 +29,7 @@ export default function Identifier ({ children, ellipsis = true, avatar, styles } return ( -
+
{avatar && children && ( )} diff --git a/packages/frontend/src/components/data/Identifier.scss b/packages/frontend/src/components/data/Identifier.scss index 20445cb80..250ce7b7b 100644 --- a/packages/frontend/src/components/data/Identifier.scss +++ b/packages/frontend/src/components/data/Identifier.scss @@ -40,6 +40,6 @@ } &__CopyButton { - margin-left: 4px; + margin-left: 12px; } } \ No newline at end of file diff --git a/packages/frontend/src/components/data/InfoLine.scss b/packages/frontend/src/components/data/InfoLine.scss index 608eea2a2..f38fe3719 100644 --- a/packages/frontend/src/components/data/InfoLine.scss +++ b/packages/frontend/src/components/data/InfoLine.scss @@ -18,10 +18,6 @@ font-size: 0.688rem; color: #fff; text-align: right; - - .DateBlock { - justify-content: flex-end; - } } &--Loading & { diff --git a/packages/frontend/src/components/layout/navbar/NavLink.scss b/packages/frontend/src/components/layout/navbar/NavLink.scss index fa8ab16b4..c08ff4301 100644 --- a/packages/frontend/src/components/layout/navbar/NavLink.scss +++ b/packages/frontend/src/components/layout/navbar/NavLink.scss @@ -11,7 +11,7 @@ color: var(--chakra-colors-gray-250); transition: $transition-time-def; white-space: nowrap; - padding: 4px 8px; + padding: 4px 0; &--Active { color: $color-brand-normal; diff --git a/packages/frontend/src/components/layout/navbar/Navbar.scss b/packages/frontend/src/components/layout/navbar/Navbar.scss index 1f1ea16bd..0c6ad2b24 100644 --- a/packages/frontend/src/components/layout/navbar/Navbar.scss +++ b/packages/frontend/src/components/layout/navbar/Navbar.scss @@ -20,7 +20,7 @@ left: 0; width: 100%; height: 100%; - border-radius: 0px 0px 20px 20px; + border-radius: 0 0 20px 20px; background: rgba(24, 31, 34, 0.8); backdrop-filter: $blockBackgroundBlur; border: 1px solid rgba(255, 255, 255, .07); @@ -36,8 +36,26 @@ align-items: center; gap: 16px; margin-left: 16px; - - @media screen and (max-width: $breakpoint-sm) { + } + + &__Menu { + gap: 40px !important; + } + + @media screen and (max-width: $breakpoint-xl) { + &__Menu { + gap: 24px !important; + } + } + + @media screen and (max-width: $breakpoint-md) { + &__Menu { + gap: 16px !important; + } + } + + @media screen and (max-width: $breakpoint-sm) { + &__WrapperNetworkSelect { gap: 8px; margin-left: 8px; } diff --git a/packages/frontend/src/components/layout/navbar/NavbarMobileMenu.scss b/packages/frontend/src/components/layout/navbar/NavbarMobileMenu.scss index 866050e0f..6af543e9f 100644 --- a/packages/frontend/src/components/layout/navbar/NavbarMobileMenu.scss +++ b/packages/frontend/src/components/layout/navbar/NavbarMobileMenu.scss @@ -10,13 +10,14 @@ width: 100%; background-color: var(--chakra-colors-gray-650); border-radius: 0 0 20px 20px; - margin-top: 6px; - padding: 88px 24px 0 24px; margin-top: 0; - box-shadow: 0px 20px 32px 0px var(--chakra-colors-gray-900); + box-shadow: 0 20px 32px 0 var(--chakra-colors-gray-900); transition: all .3s; max-height: 100%; transform: translateY(calc(20px - 100%)); + padding-top: 88px; + @include mixins.navContainerPadding(padding-left); + @include mixins.navContainerPadding(padding-right); &--Open { transform: translateY(0); diff --git a/packages/frontend/src/components/networkStatus/index.js b/packages/frontend/src/components/networkStatus/index.js index fd9a6188a..f6282afbb 100644 --- a/packages/frontend/src/components/networkStatus/index.js +++ b/packages/frontend/src/components/networkStatus/index.js @@ -70,7 +70,7 @@ function NetworkStatus ({ className }) {
Network:
- + {NetworkStatusIcon} {status?.data?.network ? `${status.data.network}` : 'n/a'} @@ -80,7 +80,7 @@ function NetworkStatus ({ className }) {
API:
- + {ApiStatusIcon} {apiStatus ? 'operational' : 'disrupted'} @@ -90,7 +90,7 @@ function NetworkStatus ({ className }) {
Latest block:
- + {status?.data?.api?.block?.height !== undefined ?
diff --git a/packages/frontend/src/components/transactions/TransactionCard.js b/packages/frontend/src/components/transactions/TransactionCard.js new file mode 100644 index 000000000..ffb1e0cf9 --- /dev/null +++ b/packages/frontend/src/components/transactions/TransactionCard.js @@ -0,0 +1,32 @@ +import './TransactionCard.scss' +import { ValueCard } from '../cards' +import { Identifier, InfoLine } from '../data' + +function TransactionsListItem ({ transaction }) { + console.log('transaction', transaction) + + return ( +
+ + + + {transaction.dataContractId} + + + )} + // loading={transaction.loading} + // error={transaction.error} + /> +
+ ) +} + +export default TransactionsListItem diff --git a/packages/frontend/src/components/transactions/TransactionCard.scss b/packages/frontend/src/components/transactions/TransactionCard.scss new file mode 100644 index 000000000..8015df713 --- /dev/null +++ b/packages/frontend/src/components/transactions/TransactionCard.scss @@ -0,0 +1,3 @@ +.TransactionCard { + +} \ No newline at end of file diff --git a/packages/frontend/src/components/transactions/index.js b/packages/frontend/src/components/transactions/index.js new file mode 100644 index 000000000..2e913be7f --- /dev/null +++ b/packages/frontend/src/components/transactions/index.js @@ -0,0 +1,7 @@ +import TransactionCard from './TransactionCard' +import TransactionsList from './TransactionsList' + +export { + TransactionCard, + TransactionsList +} diff --git a/packages/frontend/src/components/ui/Buttons/CopyButton.js b/packages/frontend/src/components/ui/Buttons/CopyButton.js index ba114b238..ddd54b3f7 100644 --- a/packages/frontend/src/components/ui/Buttons/CopyButton.js +++ b/packages/frontend/src/components/ui/Buttons/CopyButton.js @@ -40,6 +40,7 @@ function CopyButton ({ text, className }) { copyToClipboard(text, showMessage) }} minW={0} + height={'max-content'} p={0} className={`CopyButton ${className}`} _hover={{ color: 'gray.100' }} @@ -65,6 +66,7 @@ function CopyButton ({ text, className }) { transition={'.2s'} boxSizing={'content-box'} p={1} + m={-1} /> diff --git a/packages/frontend/src/components/ui/containers/InfoContainer.scss b/packages/frontend/src/components/ui/containers/InfoContainer.scss index 31a44219c..b9c2f15f4 100644 --- a/packages/frontend/src/components/ui/containers/InfoContainer.scss +++ b/packages/frontend/src/components/ui/containers/InfoContainer.scss @@ -31,6 +31,7 @@ } &--Tabs { + @include mixins.InfoContainerPadding(padding-bottom); padding: 10px 0 24px 0; overflow: hidden; diff --git a/packages/frontend/src/components/ui/containers/PageDataContainer.js b/packages/frontend/src/components/ui/containers/PageDataContainer.js index 777be5611..d974793c7 100644 --- a/packages/frontend/src/components/ui/containers/PageDataContainer.js +++ b/packages/frontend/src/components/ui/containers/PageDataContainer.js @@ -3,10 +3,10 @@ import Link from 'next/link' import { ChevronLeftIcon } from '@chakra-ui/icons' import './PageDataContainer.scss' -function PageDataContainer ({ title, backLink, children }) { +function PageDataContainer ({ className, title, backLink, children }) { return (