From 4ec86e5a833af89fa1d237908c630b9e5e1de7e2 Mon Sep 17 00:00:00 2001 From: Alexey Date: Tue, 26 Nov 2024 18:46:39 +0300 Subject: [PATCH 01/80] Initializing the Identity page update --- .../src/app/identity/[identifier]/Identity.js | 468 ++++++++++-------- packages/frontend/src/util/index.js | 8 +- 2 files changed, 279 insertions(+), 197 deletions(-) diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.js b/packages/frontend/src/app/identity/[identifier]/Identity.js index d761a4c42..c35773c40 100644 --- a/packages/frontend/src/app/identity/[identifier]/Identity.js +++ b/packages/frontend/src/app/identity/[identifier]/Identity.js @@ -2,26 +2,30 @@ import { useState, useEffect } from 'react' import * as Api from '../../../util/Api' -import Link from 'next/link' +// import Link from 'next/link' import TransactionsList from '../../../components/transactions/TransactionsList' import DocumentsList from '../../../components/documents/DocumentsList' import DataContractsList from '../../../components/dataContracts/DataContractsList' import TransfersList from '../../../components/transfers/TransfersList' -import { fetchHandlerSuccess, fetchHandlerError } from '../../../util' -import { LoadingLine, LoadingList } from '../../../components/loading' +import { fetchHandlerSuccess, fetchHandlerError, findActiveAlias } from '../../../util' +// import { LoadingLine, LoadingList } from '../../../components/loading' +import { LoadingList } from '../../../components/loading' import { ErrorMessageBlock } from '../../../components/Errors' -import ImageGenerator from '../../../components/imageGenerator' +// import ImageGenerator from '../../../components/imageGenerator' import { usePathname, useRouter, useSearchParams } from 'next/navigation' -import { Credits, Alias } from '../../../components/data' -import { RateTooltip } from '../../../components/ui/Tooltips' +// import { Credits, Alias, InfoLine, Identifier, DateBlock, CreditsBlock } from '../../../components/data' +import { Alias, InfoLine, CreditsBlock } from '../../../components/data' + +// import { RateTooltip } from '../../../components/ui/Tooltips' import './Identity.scss' import { - Box, - Container, - TableContainer, Table, Thead, Tbody, Tr, Th, Td, - Tabs, TabList, TabPanels, Tab, TabPanel, - Flex + // Box, + // Container, + // Flex, + Tabs, TabList, TabPanels, Tab, TabPanel } from '@chakra-ui/react' +// import BlocksChart from '../../validator/[hash]/BlocksChart' +import { InfoContainer, PageDataContainer } from '../../../components/ui/containers' const tabs = [ 'transactions', @@ -40,10 +44,10 @@ function Identity ({ identifier }) { const [transfers, setTransfers] = useState({ data: {}, loading: true, error: false }) const [rate, setRate] = useState({ data: {}, loading: true, error: false }) const [activeTab, setActiveTab] = useState(tabs.indexOf(defaultTabName.toLowerCase()) !== -1 ? tabs.indexOf(defaultTabName.toLowerCase()) : 0) - const tdTitleWidth = 100 const router = useRouter() const pathname = usePathname() const searchParams = useSearchParams() + const activeAlias = findActiveAlias(identity.data.aliases) const fetchData = () => { Promise.all([ @@ -97,196 +101,268 @@ function Identity ({ identifier }) { }, [activeTab, router, pathname]) return ( -
- - - - {!identity.error - ? - - - - - - - - - - - - {identity?.data?.aliases?.length > 0 && - - - - - } - - - - - - - - - - {!identity.data.isSystem && - - - - - } - - - - - - - {!identity.data?.isSystem && - - - - - } + +
+
+ {activeAlias && +
+ {activeAlias.alias} +
+ } -
- - - - - - - - - - - - -
Identity info - {identifier - ?
- -
- : - } -
Identifier - - {identity.data?.identifier} - -
Names - -
- {identity?.data.aliases.map((alias, i) => ( - - ))} -
- -
Balance - - - {identity.data?.balance} Credits - - -
System - {identity.data?.isSystem ? 'true' : 'false'} -
Created - - - {identity.data?.timestamp && new Date(identity.data?.timestamp).toLocaleString()} - - -
Revision - {identity.data?.revision} -
Transactions - {identity.data?.totalTxs} -
Transfers - {identity.data?.totalTransfers} -
Documents - {identity.data?.totalDocuments} -
Data contracts - {identity.data?.totalDataContracts} -
- : } - +
+ } + loading={identity.loading} + error={identity.error && !identity.data?.balance} + /> +
+
- + + setActiveTab(index)} index={activeTab}> + + Transactions {identity.data?.totalTxs !== undefined ? `(${identity.data.totalTxs})` : ''} + Data contracts {identity.data?.totalDataContracts !== undefined ? `(${identity.data.totalDataContracts})` : ''} + Documents {identity.data?.totalDocuments !== undefined ? `(${identity.data.totalDocuments})` : ''} + Credit Transfers {identity.data?.totalTransfers !== undefined ? `(${identity.data.totalTransfers})` : ''} + + + + {!transactions.error + ? !transactions.loading + ? + : + : } + - - - - Transactions - Transfers - Documents - Data contracts - + + {!transfers.error + ? !transfers.loading + ? + : + : } + - - - {!transactions.error - ? !transactions.loading - ? - : - : } - + + {!documents.error + ? !documents.loading + ? + : + : + } + - - {!transfers.error - ? !transfers.loading - ? - : - : } - - - - {!documents.error - ? !documents.loading - ? - : - : } - - - - {!dataContracts.error - ? !dataContracts.loading - ? - : - : } - - - - - - - + + {!dataContracts.error + ? !dataContracts.loading + ? + : + : } + + + + + + ) + + // return ( + //
+ // + // + // + // {!identity.error + // ? + // + // + // + // + // + // + // + // + // + // + // + // {identity?.data?.aliases?.length > 0 && + // + // + // + // + // } + // + // + // + // + // + // + // + // + // + // {!identity.data.isSystem && + // + // + // + // + // } + // + // + // + // + // + // + // {!identity.data?.isSystem && + // + // + // + // + // } + // + // + // + // + // + // + // + // + // + // + // + // + // + // + //
Identity info + // {identifier + // ?
+ // + //
+ // : + // } + //
Identifier + // + // {identity.data?.identifier} + // + //
Names + // + //
+ // {identity?.data.aliases.map((alias, i) => ( + // + // ))} + //
+ // + //
Balance + // + // + // {identity.data?.balance} Credits + // + // + //
System + // {identity.data?.isSystem ? 'true' : 'false'} + //
Created + // + // + // {identity.data?.timestamp && new Date(identity.data?.timestamp).toLocaleString()} + // + // + //
Revision + // {identity.data?.revision} + //
Transactions + // {identity.data?.totalTxs} + //
Transfers + // {identity.data?.totalTransfers} + //
Documents + // {identity.data?.totalDocuments} + //
Data contracts + // {identity.data?.totalDataContracts} + //
+ // : } + // + // + // + // + // + // + // + // Transactions + // Transfers + // Documents + // Data contracts + // + // + // + // + // {!transactions.error + // ? !transactions.loading + // ? + // : + // : } + // + // + // + // {!transfers.error + // ? !transfers.loading + // ? + // : + // : } + // + // + // + // {!documents.error + // ? !documents.loading + // ? + // : + // : } + // + // + // + // {!dataContracts.error + // ? !dataContracts.loading + // ? + // : + // : } + // + // + // + // + // + // + //
+ // ) } export default Identity diff --git a/packages/frontend/src/util/index.js b/packages/frontend/src/util/index.js index 49daf8242..c6c6f6879 100644 --- a/packages/frontend/src/util/index.js +++ b/packages/frontend/src/util/index.js @@ -69,6 +69,11 @@ function roundUsd (usd, maxDecimals = 5) { return usd.toFixed(precision) } +function findActiveAlias (aliases = []) { + if (!aliases?.length) return null + return aliases?.find(alias => alias.status === 'ok') +} + export { getTransitionTypeStringById, fetchHandlerSuccess, @@ -81,5 +86,6 @@ export { creditsToDash, roundUsd, getDaysBetweenDates, - getDynamicRange + getDynamicRange, + findActiveAlias } From a506a844e9466615ae57434397336a1c1439c846 Mon Sep 17 00:00:00 2001 From: Alexey Date: Tue, 26 Nov 2024 23:16:04 +0300 Subject: [PATCH 02/80] Create AliasList and add new fields to IdentityTotalCard --- .../src/app/identity/[identifier]/Identity.js | 117 +++++++++++++++--- .../app/identity/[identifier]/Identity.scss | 69 ++++++----- .../[identifier]/IdentityTotalCard.scss | 54 ++++++++ .../components/validators/ValidatorCard.scss | 74 +++++------ packages/frontend/src/styles/mixins.scss | 34 +++++ 5 files changed, 264 insertions(+), 84 deletions(-) create mode 100644 packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.js b/packages/frontend/src/app/identity/[identifier]/Identity.js index c35773c40..5ef839c36 100644 --- a/packages/frontend/src/app/identity/[identifier]/Identity.js +++ b/packages/frontend/src/app/identity/[identifier]/Identity.js @@ -14,10 +14,9 @@ import { ErrorMessageBlock } from '../../../components/Errors' // import ImageGenerator from '../../../components/imageGenerator' import { usePathname, useRouter, useSearchParams } from 'next/navigation' // import { Credits, Alias, InfoLine, Identifier, DateBlock, CreditsBlock } from '../../../components/data' -import { Alias, InfoLine, CreditsBlock } from '../../../components/data' +import { Alias, InfoLine, CreditsBlock, Identifier, DateBlock } from '../../../components/data' // import { RateTooltip } from '../../../components/ui/Tooltips' -import './Identity.scss' import { // Box, // Container, @@ -26,6 +25,10 @@ import { } from '@chakra-ui/react' // import BlocksChart from '../../validator/[hash]/BlocksChart' import { InfoContainer, PageDataContainer } from '../../../components/ui/containers' +import './Identity.scss' +import './IdentityTotalCard.scss' +import ImageGenerator from '../../../components/imageGenerator' +import { HorisontalSeparator } from '../../../components/ui/separators' const tabs = [ 'transactions', @@ -36,6 +39,27 @@ const tabs = [ const defaultTabName = 'transactions' +function AliasesList ({ aliases = [], smallCount = 5 }) { + const [showAll, setShowAll] = useState(false) + + const filteredArray = showAll + ? aliases + : aliases.filter((item, i) => i < smallCount) + + return ( +
+
+ {filteredArray?.map((alias, i) => ( + {alias.alias} + ))} +
+
setShowAll(!showAll)}> + {showAll ? 'Show less' : 'Show more'} +
+
+ ) +} + function Identity ({ identifier }) { const [identity, setIdentity] = useState({ data: {}, loading: true, error: false }) const [dataContracts, setDataContracts] = useState({ data: {}, loading: true, error: false }) @@ -100,29 +124,89 @@ function Identity ({ identifier }) { router.push(`${pathname}?${urlParameters.toString()}`, { scroll: false }) }, [activeTab, router, pathname]) + console.log('identity', identity) + return ( -
-
- {activeAlias && -
- {activeAlias.alias} +
+ {activeAlias && +
+ {activeAlias.alias} +
+ } + +
+
+
+
+ {!identity.error + ? + : 'n/a' + } +
+
+ + {identity.data?.identifier} + + )} + /> + } + loading={identity.loading} + error={identity.error || !identity.data?.balance} + /> +
+
+ + + +
+ + } + /> + } + />
- } -
- } - loading={identity.loading} - error={identity.error && !identity.data?.balance} - /> +
+ +
+
+
setActiveTab(index)} index={activeTab}> @@ -168,7 +252,6 @@ function Identity ({ identifier }) { -
) diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.scss b/packages/frontend/src/app/identity/[identifier]/Identity.scss index c8e3fe3d1..1231c25dc 100644 --- a/packages/frontend/src/app/identity/[identifier]/Identity.scss +++ b/packages/frontend/src/app/identity/[identifier]/Identity.scss @@ -1,36 +1,43 @@ @use '../../../styles/mixins.scss'; +@import '../../../styles/variables.scss'; -.IdentityInfo { - height: min-content; - - &__Avatar { - margin-left: auto; - width: 32px; - height: 32px; - } - - &__AliasesContainer { - max-height: 110px; - min-height: 21px; - height: 100%; - overflow-y: auto; +.IdentityPage { + &__CommonInfo { + margin-bottom: 24px; } } -.IdentityData { - &__Tabs { - flex-wrap: wrap; - } - - @media screen and (max-width: 530px) { - &__Tab { - width: 50%; - } - } - - @media screen and (max-width: 320px) { - &__Tab { - width: 100%; - } - } -} \ No newline at end of file +//.IdentityInfo { +// height: min-content; +// +// &__Avatar { +// margin-left: auto; +// width: 32px; +// height: 32px; +// } +// +// &__AliasesContainer { +// max-height: 110px; +// min-height: 21px; +// height: 100%; +// overflow-y: auto; +// } +//} +// +//.IdentityData { +// &__Tabs { +// flex-wrap: wrap; +// } +// +// @media screen and (max-width: 530px) { +// &__Tab { +// width: 50%; +// } +// } +// +// @media screen and (max-width: 320px) { +// &__Tab { +// width: 100%; +// } +// } +//} \ No newline at end of file diff --git a/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss b/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss new file mode 100644 index 000000000..b63c1b131 --- /dev/null +++ b/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss @@ -0,0 +1,54 @@ +@use '../../../styles/mixins.scss'; +@import '../../../styles/variables.scss'; + +.IdentityTotalCard { + @include mixins.EntityCard(); + + &__Title { + margin-bottom: 14px; + + .Alias__Name, .Alias__Domain { + font-family: $font-heading; + font-size: 0.875rem; + font-weight: 700; + } + + .Alias__Domain { + color: var(--chakra-colors-brand-light); + opacity: 1; + } + } + + &--Loading & { + &__Avatar { + position: absolute !important; + @include mixins.LoadingContainer; + } + } + + &__Header { + display: flex; + align-items: center; + width: 100%; + } + + //&__HeaderLines { + // display: flex; + // flex-direction: column; + // justify-content: space-between; + // width: 100%; + // padding: 6px 0; + // overflow: hidden; + // gap: 20px; + //} + + &__ContentContainer { + display: flex; + gap: 40px; + } + + &__Column { + position: relative; + width: 50%; + } +} \ No newline at end of file diff --git a/packages/frontend/src/components/validators/ValidatorCard.scss b/packages/frontend/src/components/validators/ValidatorCard.scss index deccf568b..b320373e2 100644 --- a/packages/frontend/src/components/validators/ValidatorCard.scss +++ b/packages/frontend/src/components/validators/ValidatorCard.scss @@ -2,18 +2,20 @@ @import '../../styles/variables.scss'; .ValidatorCard { + @include mixins.EntityCard(); + &__Header { display: flex; width: 100%; align-items: center; - .InfoLine { - margin-bottom: 20px; - - &:last-child { - margin-bottom: 0; - } - } + //.InfoLine { + // margin-bottom: 20px; + // + // &:last-child { + // margin-bottom: 0; + // } + //} } .InfoLine--Loading .InfoLine { @@ -29,28 +31,28 @@ } } - &__Avatar { - display: flex; - align-items: center; - justify-content: center; - font-family: $font-mono; - font-size: 0.75rem; - color: var(--chakra-colors-gray-500); - width: 88px; - height: 88px; - border: 1px solid rgba(137, 126, 126, 0.1); - flex-shrink: 0; - margin-right: 24px; - } - - &__HeaderLines { - display: flex; - flex-direction: column; - justify-content: space-between; - width: 100%; - padding: 6px 0; - overflow: hidden; - } + //&__Avatar { + // display: flex; + // align-items: center; + // justify-content: center; + // font-family: $font-mono; + // font-size: 0.75rem; + // color: var(--chakra-colors-gray-500); + // width: 88px; + // height: 88px; + // border: 1px solid rgba(137, 126, 126, 0.1); + // flex-shrink: 0; + // margin-right: 24px; + //} + + //&__HeaderLines { + // display: flex; + // flex-direction: column; + // justify-content: space-between; + // width: 100%; + // padding: 6px 0; + // overflow: hidden; + //} &__Separator { margin: 12px 0; @@ -60,13 +62,13 @@ font-size: 0.813rem; } - &__InfoLine { - margin-bottom: 14px; - - &:last-child { - margin-bottom: 0; - } - } + //&__InfoLine { + // margin-bottom: 14px; + // + // &:last-child { + // margin-bottom: 0; + // } + //} &__ProTxHash { .Identifier__SymbolsContainer { diff --git a/packages/frontend/src/styles/mixins.scss b/packages/frontend/src/styles/mixins.scss index e5c845f95..63bcb73ef 100644 --- a/packages/frontend/src/styles/mixins.scss +++ b/packages/frontend/src/styles/mixins.scss @@ -373,4 +373,38 @@ color: $color-brand-light; } } +} + +@mixin EntityCard () { + &__Avatar { + display: flex; + align-items: center; + justify-content: center; + font-family: $font-mono; + font-size: 0.75rem; + color: var(--chakra-colors-gray-500); + width: 88px; + height: 88px; + border: 1px solid rgba(137, 126, 126, 0.1); + flex-shrink: 0; + margin-right: 24px; + } + + &__HeaderLines { + display: flex; + gap: 20px; + flex-direction: column; + justify-content: space-between; + width: 100%; + padding: 6px 0; + overflow: hidden; + } + + &__InfoLine { + margin-bottom: 14px; + + &:last-child { + margin-bottom: 0; + } + } } \ No newline at end of file From 33ff1b36b3cbf4d1a6a624da8cfa9eefb5b4ea44 Mon Sep 17 00:00:00 2001 From: Alexey Date: Tue, 3 Dec 2024 19:38:52 +0300 Subject: [PATCH 03/80] Create IdentityDigestCard component --- .../src/app/identity/[identifier]/Identity.js | 6 +- .../[identifier]/IdentityDigestCard.js | 89 +++++++++++++++++++ .../[identifier]/IdentityDigestCard.scss | 43 +++++++++ 3 files changed, 136 insertions(+), 2 deletions(-) create mode 100644 packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.js create mode 100644 packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.scss diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.js b/packages/frontend/src/app/identity/[identifier]/Identity.js index 5ef839c36..89d2cefe4 100644 --- a/packages/frontend/src/app/identity/[identifier]/Identity.js +++ b/packages/frontend/src/app/identity/[identifier]/Identity.js @@ -15,7 +15,7 @@ import { ErrorMessageBlock } from '../../../components/Errors' import { usePathname, useRouter, useSearchParams } from 'next/navigation' // import { Credits, Alias, InfoLine, Identifier, DateBlock, CreditsBlock } from '../../../components/data' import { Alias, InfoLine, CreditsBlock, Identifier, DateBlock } from '../../../components/data' - +import IdentityDigestCard from './IdentityDigestCard' // import { RateTooltip } from '../../../components/ui/Tooltips' import { // Box, @@ -73,6 +73,8 @@ function Identity ({ identifier }) { const searchParams = useSearchParams() const activeAlias = findActiveAlias(identity.data.aliases) + console.log('identity', identity) + const fetchData = () => { Promise.all([ Api.getIdentity(identifier) @@ -203,7 +205,7 @@ function Identity ({ identifier }) {
- +
diff --git a/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.js b/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.js new file mode 100644 index 000000000..2a051fd93 --- /dev/null +++ b/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.js @@ -0,0 +1,89 @@ +import './IdentityDigestCard.scss' +import { CreditsBlock, DateBlock, Identifier, InfoLine } from '../../../components/data' +import Link from 'next/link' +import { ValueContainer } from '../../../components/ui/containers' +import { LoadingLine } from '../../../components/loading' +import { networks } from '../../../constants/networks' + +function IdentityDigestCard ({ identity, rate, className }) { + const baseUrl = process.env.NEXT_PUBLIC_BASE_URL + const activeNetwork = networks.find(network => network.explorerBaseUrl === baseUrl) + const l1explorerBaseUrl = activeNetwork?.l1explorerBaseUrl || null + + if (!identity.data?.lastWithdrawal) identity.data.lastWithdrawal = '6AC5EDA942093A9275A2837CFDF2C18CAAD9D922BA211BD5EA5E6333FE904CE7' + if (!identity.data?.lastWithdrawalTime) identity.data.lastWithdrawalTime = '2024-11-21T10:26:04.053Z' + + return ( +
+
+
+
Total Top-up’s:
+ + + +
+
+
Total Withdrawals:
+ + + +
+
+ +
+ + + + {identity.data?.proTxInfo?.collateralAddress || ''} + + + + )} + loading={identity.loading} + // error={} + /> + + + {identity.data?.lastWithdrawalTime && + } + + {identity.data?.lastWithdrawal} + + + + )} + loading={identity.loading} + error={identity.error} + /> + } + loading={identity.loading} + // error={} + /> + } + loading={identity.loading} + // error={} + /> +
+
+ ) +} + +export default IdentityDigestCard diff --git a/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.scss b/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.scss new file mode 100644 index 000000000..bf38da243 --- /dev/null +++ b/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.scss @@ -0,0 +1,43 @@ +@use '../../../styles/mixins.scss'; +@import '../../../styles/variables.scss'; + +.IdentityDigestCard { + flex-direction: column; + padding: 24px; + background: rgba(var(--chakra-colors-gray-800-rgb), .5); + border-radius: $border-radius-def; + + &, &__Transfers, &__LinesContainer { + display: flex; + gap: 14px; + } + + &__LinesContainer { + flex-direction: column; + } + + &__Transfer { + width: 50%; + display: flex; + flex-direction: column; + gap: 4px; + padding: 24px; + background: rgba(var(--chakra-colors-gray-800-rgb), .5); + border-radius: $border-radius-def; + + &--TupUp { + + } + + &--Withdrawals { + + } + } + + &__ValueContainer { + display: flex; + justify-content: flex-end; + overflow: hidden; + max-width: 324px; + } +} From 24f1123c2806ec4c99fb9330265b5e47f974ce67 Mon Sep 17 00:00:00 2001 From: Alexey Date: Tue, 3 Dec 2024 20:04:32 +0300 Subject: [PATCH 04/80] Create AliasesList component --- .../app/identity/[identifier]/AliasesList.js | 25 ++++++++++++++ .../src/app/identity/[identifier]/Identity.js | 34 +++++++------------ 2 files changed, 37 insertions(+), 22 deletions(-) create mode 100644 packages/frontend/src/app/identity/[identifier]/AliasesList.js diff --git a/packages/frontend/src/app/identity/[identifier]/AliasesList.js b/packages/frontend/src/app/identity/[identifier]/AliasesList.js new file mode 100644 index 000000000..430cf6f08 --- /dev/null +++ b/packages/frontend/src/app/identity/[identifier]/AliasesList.js @@ -0,0 +1,25 @@ +import { useState } from 'react' +import { Alias } from '../../../components/data' + +function AliasesList ({ aliases = [], smallCount = 5 }) { + const [showAll, setShowAll] = useState(false) + + const filteredArray = showAll + ? aliases + : aliases.filter((item, i) => i < smallCount) + + return ( +
+
+ {filteredArray?.map((alias, i) => ( + {alias.alias} + ))} +
+
setShowAll(!showAll)}> + {showAll ? 'Show less' : 'Show more'} +
+
+ ) +} + +export default AliasesList diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.js b/packages/frontend/src/app/identity/[identifier]/Identity.js index 89d2cefe4..7b5a3081e 100644 --- a/packages/frontend/src/app/identity/[identifier]/Identity.js +++ b/packages/frontend/src/app/identity/[identifier]/Identity.js @@ -16,6 +16,7 @@ import { usePathname, useRouter, useSearchParams } from 'next/navigation' // import { Credits, Alias, InfoLine, Identifier, DateBlock, CreditsBlock } from '../../../components/data' import { Alias, InfoLine, CreditsBlock, Identifier, DateBlock } from '../../../components/data' import IdentityDigestCard from './IdentityDigestCard' +import AliasesList from './AliasesList' // import { RateTooltip } from '../../../components/ui/Tooltips' import { // Box, @@ -24,7 +25,7 @@ import { Tabs, TabList, TabPanels, Tab, TabPanel } from '@chakra-ui/react' // import BlocksChart from '../../validator/[hash]/BlocksChart' -import { InfoContainer, PageDataContainer } from '../../../components/ui/containers' +import { InfoContainer, PageDataContainer, ValueContainer } from '../../../components/ui/containers' import './Identity.scss' import './IdentityTotalCard.scss' import ImageGenerator from '../../../components/imageGenerator' @@ -39,27 +40,6 @@ const tabs = [ const defaultTabName = 'transactions' -function AliasesList ({ aliases = [], smallCount = 5 }) { - const [showAll, setShowAll] = useState(false) - - const filteredArray = showAll - ? aliases - : aliases.filter((item, i) => i < smallCount) - - return ( -
-
- {filteredArray?.map((alias, i) => ( - {alias.alias} - ))} -
-
setShowAll(!showAll)}> - {showAll ? 'Show less' : 'Show more'} -
-
- ) -} - function Identity ({ identifier }) { const [identity, setIdentity] = useState({ data: {}, loading: true, error: false }) const [dataContracts, setDataContracts] = useState({ data: {}, loading: true, error: false }) @@ -194,6 +174,16 @@ function Identity ({ identifier }) { error={identity.error || (!identity.loading && !identity.data?.timestamp)} value={} /> + + : none + } + /> + Date: Tue, 3 Dec 2024 20:05:00 +0300 Subject: [PATCH 05/80] Update IdentityDigestCard styles --- .../app/identity/[identifier]/IdentityDigestCard.js | 8 +++++--- .../identity/[identifier]/IdentityDigestCard.scss | 13 ++++++++++++- .../identity/[identifier]/IdentityTotalCard.scss | 6 ++++++ 3 files changed, 23 insertions(+), 4 deletions(-) diff --git a/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.js b/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.js index 2a051fd93..c781f006c 100644 --- a/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.js +++ b/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.js @@ -12,6 +12,7 @@ function IdentityDigestCard ({ identity, rate, className }) { if (!identity.data?.lastWithdrawal) identity.data.lastWithdrawal = '6AC5EDA942093A9275A2837CFDF2C18CAAD9D922BA211BD5EA5E6333FE904CE7' if (!identity.data?.lastWithdrawalTime) identity.data.lastWithdrawalTime = '2024-11-21T10:26:04.053Z' + if (!identity.data?.fundingAddress) identity.data.fundingAddress = '=yS9GnnRdzX9W9G9kxihdgB5VovKWbPGjS1' return (
@@ -36,13 +37,13 @@ function IdentityDigestCard ({ identity, rate, className }) { title={'Funding Address'} value={( - {identity.data?.proTxInfo?.collateralAddress || ''} + {identity.data.fundingAddress || null} @@ -57,7 +58,8 @@ function IdentityDigestCard ({ identity, rate, className }) { {identity.data?.lastWithdrawalTime && - } + + } {identity.data?.lastWithdrawal} diff --git a/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.scss b/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.scss index bf38da243..bbb0d7482 100644 --- a/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.scss +++ b/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.scss @@ -38,6 +38,17 @@ display: flex; justify-content: flex-end; overflow: hidden; - max-width: 324px; + + .DateBlock { + margin-bottom: 4px; + } + } + + &__InfoLine { + margin-bottom: 14px; + + .DateBlock { + justify-content: flex-end; + } } } diff --git a/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss b/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss index b63c1b131..7d2892f58 100644 --- a/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss +++ b/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss @@ -32,6 +32,12 @@ width: 100%; } + &__ZeroListBadge { + padding: 4px 10px; + font-family: $font-mono; + color: var(--chakra-colors-gray-250); + } + //&__HeaderLines { // display: flex; // flex-direction: column; From 4a898f2f657824810bcb797a7d1ac4a71a5c0a41 Mon Sep 17 00:00:00 2001 From: Alexey Date: Tue, 3 Dec 2024 20:28:07 +0300 Subject: [PATCH 06/80] Update lists paddings on Identity page --- packages/frontend/src/app/identity/[identifier]/Identity.js | 2 +- .../frontend/src/components/ui/containers/InfoContainer.scss | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.js b/packages/frontend/src/app/identity/[identifier]/Identity.js index 7b5a3081e..72656c97f 100644 --- a/packages/frontend/src/app/identity/[identifier]/Identity.js +++ b/packages/frontend/src/app/identity/[identifier]/Identity.js @@ -200,7 +200,7 @@ function Identity ({ identifier }) {
- + setActiveTab(index)} index={activeTab}> Transactions {identity.data?.totalTxs !== undefined ? `(${identity.data.totalTxs})` : ''} diff --git a/packages/frontend/src/components/ui/containers/InfoContainer.scss b/packages/frontend/src/components/ui/containers/InfoContainer.scss index b9c2f15f4..07f534437 100644 --- a/packages/frontend/src/components/ui/containers/InfoContainer.scss +++ b/packages/frontend/src/components/ui/containers/InfoContainer.scss @@ -49,6 +49,11 @@ overflow-y: hidden; overflow-x: auto; } + + .chakra-tabs__tab-panel { + @include mixins.InfoContainerPadding(padding-left, 0px, true); + @include mixins.InfoContainerPadding(padding-right, 0px, true); + } } @media screen and (max-width: $breakpoint-sm) { From 4ceb243759de9f1df30b1cd514a8e57e050f4189 Mon Sep 17 00:00:00 2001 From: Alexey Date: Tue, 3 Dec 2024 20:30:03 +0300 Subject: [PATCH 07/80] Fix tabs content --- .../src/app/identity/[identifier]/Identity.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.js b/packages/frontend/src/app/identity/[identifier]/Identity.js index 72656c97f..b3022f7da 100644 --- a/packages/frontend/src/app/identity/[identifier]/Identity.js +++ b/packages/frontend/src/app/identity/[identifier]/Identity.js @@ -218,9 +218,9 @@ function Identity ({ identifier }) { - {!transfers.error - ? !transfers.loading - ? + {!dataContracts.error + ? !dataContracts.loading + ? : : } @@ -235,9 +235,9 @@ function Identity ({ identifier }) { - {!dataContracts.error - ? !dataContracts.loading - ? + {!transfers.error + ? !transfers.loading + ? : : } From cbaa4bfb9d8fb9dfd7197e61b79f4ce7bcbea569 Mon Sep 17 00:00:00 2001 From: Alexey Date: Wed, 4 Dec 2024 17:24:41 +0300 Subject: [PATCH 08/80] Update Data contracts list --- .../src/app/dataContracts/DataContracts.js | 2 +- .../dataContracts/DataContractsList.js | 22 ++++---- .../dataContracts/DataContractsListItem.js | 38 +++++++++----- .../dataContracts/DataContractsListItem.scss | 51 +++++++++---------- 4 files changed, 58 insertions(+), 55 deletions(-) diff --git a/packages/frontend/src/app/dataContracts/DataContracts.js b/packages/frontend/src/app/dataContracts/DataContracts.js index 4cd7998f7..9346029ec 100644 --- a/packages/frontend/src/app/dataContracts/DataContracts.js +++ b/packages/frontend/src/app/dataContracts/DataContracts.js @@ -85,7 +85,7 @@ function DataContractsLayout ({ defaultPage = 1, defaultPageSize }) { {!dataContracts.loading ? !dataContracts.error - ? + ? : : } diff --git a/packages/frontend/src/components/dataContracts/DataContractsList.js b/packages/frontend/src/components/dataContracts/DataContractsList.js index 3a683b7f3..86ef24e9b 100644 --- a/packages/frontend/src/components/dataContracts/DataContractsList.js +++ b/packages/frontend/src/components/dataContracts/DataContractsList.js @@ -2,21 +2,17 @@ import DataContractsListItem from './DataContractsListItem' import { EmptyListMessage } from '../ui/lists' import './DataContractsList.scss' -function DataContractsList ({ dataContracts = [], size = 'l' }) { +function DataContractsList ({ dataContracts = [] }) { return ( -
- {dataContracts.map((dataContract, key) => - - )} +
+ {dataContracts.map((dataContract, key) => + + )} - {dataContracts.length === 0 && - There are no data contracts created yet. - } -
+ {dataContracts.length === 0 && + There are no data contracts created yet. + } +
) } diff --git a/packages/frontend/src/components/dataContracts/DataContractsListItem.js b/packages/frontend/src/components/dataContracts/DataContractsListItem.js index a6e179618..704281590 100644 --- a/packages/frontend/src/components/dataContracts/DataContractsListItem.js +++ b/packages/frontend/src/components/dataContracts/DataContractsListItem.js @@ -1,27 +1,37 @@ import Link from 'next/link' import ImageGenerator from '../imageGenerator' import './DataContractsListItem.scss' +import { Alias, DateBlock, Identifier } from '../data' function DataContractsListItem ({ dataContract }) { - const { identifier, name, timestamp, isSystem } = dataContract - return ( -
- -
{name ? {name} : identifier}
-
+
+ {dataContract?.name + ? <> + + {dataContract.name} + + : + {dataContract.identifier} + } +
- {isSystem &&
SYSTEM
} + {dataContract?.isSystem &&
SYSTEM
} - {(typeof timestamp === 'string') && -
- {new Date(timestamp).toLocaleString()} -
- } + {(typeof dataContract?.timestamp === 'string') && +
+ +
+ } ) } diff --git a/packages/frontend/src/components/dataContracts/DataContractsListItem.scss b/packages/frontend/src/components/dataContracts/DataContractsListItem.scss index fae0af0af..dc6538d1c 100644 --- a/packages/frontend/src/components/dataContracts/DataContractsListItem.scss +++ b/packages/frontend/src/components/dataContracts/DataContractsListItem.scss @@ -2,39 +2,36 @@ @import '../../styles/variables.scss'; .DataContractsListItem { - @include mixins.DefListItem; + @include mixins.DefListItem; - width: 100%; - justify-content: space-between; + width: 100%; + justify-content: space-between; - &__Identifier { - text-overflow: ellipsis; - overflow: hidden; - line-height: 24px; - white-space: nowrap; - margin-right: 16px; - } + &__Identifier { + text-overflow: ellipsis; + overflow: hidden; + line-height: 24px; + white-space: nowrap; + margin-right: 16px; + } - &__Timestamp { - white-space: nowrap; - } + &__SystemLabel { + font-size: 0.75rem; + } - .DataContractsList--SizeS &, - .DataContractsList--SizeM & { - &__Identifier { - margin-right: 16px; - } - } + &__Timestamp { + white-space: nowrap; + } - @media screen and (max-width: $breakpoint-sm) { - flex-wrap: wrap; + @media screen and (max-width: $breakpoint-sm) { + flex-wrap: wrap; - &__Identifier { - width: 100%; - } + &__Identifier { + width: 100%; + } - &__Timestamp { - white-space: wrap; - } + &__Timestamp { + white-space: wrap; } + } } \ No newline at end of file From df93ede4c843245af175ab84e146d795015ac646 Mon Sep 17 00:00:00 2001 From: Alexey Date: Wed, 4 Dec 2024 17:25:05 +0300 Subject: [PATCH 09/80] Update DateBlock format --- .../src/app/validator/[hash]/Validator.js | 4 +- .../frontend/src/components/data/DateBlock.js | 54 +++++++++++++------ .../src/components/data/DateBlock.scss | 15 ++++-- 3 files changed, 50 insertions(+), 23 deletions(-) diff --git a/packages/frontend/src/app/validator/[hash]/Validator.js b/packages/frontend/src/app/validator/[hash]/Validator.js index 02a1dd965..d1a0ad99f 100644 --- a/packages/frontend/src/app/validator/[hash]/Validator.js +++ b/packages/frontend/src/app/validator/[hash]/Validator.js @@ -253,7 +253,7 @@ function Validator ({ hash }) { {validator.data?.lastProposedBlockHeader?.timestamp && } @@ -279,7 +279,7 @@ function Validator ({ hash }) { {validator.data?.lastWithdrawalTime && - } + } {validator.data?.lastWithdrawal} diff --git a/packages/frontend/src/components/data/DateBlock.js b/packages/frontend/src/components/data/DateBlock.js index 90d85c484..75b7dbf06 100644 --- a/packages/frontend/src/components/data/DateBlock.js +++ b/packages/frontend/src/components/data/DateBlock.js @@ -4,11 +4,29 @@ import { getTimeDelta } from '../../util' import { CalendarIcon } from '../ui/icons' import './DateBlock.scss' -function DateBlock ({ timestamp, format, showTime = false }) { +function DateBlock ({ timestamp, format = 'all', showTime = false }) { const date = new Date(timestamp) if (String(date) === 'Invalid Date') return null + const formats = { + all: { + calendarIcon: true, + date: true, + delta: true + }, + deltaOnly: { + calendarIcon: false, + date: false, + delta: true + }, + dateOnly: { + calendarIcon: false, + date: true, + delta: false + } + } + const options = { day: 'numeric', month: 'short', @@ -20,21 +38,25 @@ function DateBlock ({ timestamp, format, showTime = false }) { return (
- {format !== 'delta-only' && - - } - {format !== 'delta-only' && -
- {formattedDate} -
- } -
- {getTimeDelta(new Date(), date)} +
+ {formats[format].calendarIcon && + + } + {formats[format].date && +
+ {formattedDate} +
+ } + {formats[format].delta && +
+ {getTimeDelta(new Date(), date)} +
+ }
) diff --git a/packages/frontend/src/components/data/DateBlock.scss b/packages/frontend/src/components/data/DateBlock.scss index 8de5e8561..9971ff444 100644 --- a/packages/frontend/src/components/data/DateBlock.scss +++ b/packages/frontend/src/components/data/DateBlock.scss @@ -2,13 +2,18 @@ @import '../../styles/variables.scss'; .DateBlock { - display: flex; - flex-wrap: wrap; - align-items: center; font-family: $font-mono; - white-space: nowrap; - &__CalendarIcon, &__Date { + &__InfoContainer { + display: flex; + flex-wrap: wrap; + align-items: center; + white-space: nowrap; + margin-top: -4px; + margin-bottom: -4px; + } + + &__CalendarIcon, &__Date, &__Delta { margin-top: 4px; margin-bottom: 4px; } From 826b8ea795b7e5c01da74d2ac0a14a8028584a3c Mon Sep 17 00:00:00 2001 From: Alexey Date: Wed, 4 Dec 2024 17:25:19 +0300 Subject: [PATCH 10/80] Update size of avatar in lists --- packages/frontend/src/styles/mixins.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/frontend/src/styles/mixins.scss b/packages/frontend/src/styles/mixins.scss index 9f62066f7..8aee9e693 100644 --- a/packages/frontend/src/styles/mixins.scss +++ b/packages/frontend/src/styles/mixins.scss @@ -4,7 +4,7 @@ display: flex; width: 100%; text-decoration: none; - padding: 6px 12px; + padding: 7px 12px; margin-bottom: 8px; line-height: 24px; color: var(--chakra-colors-gray-100); @@ -42,8 +42,8 @@ &__Avatar { margin-right: 12px; - height: 28px; - width: 28px; + height: 24px; + width: 24px; } } From 86d06584cc0c515cfffee5a3182d160df220db15 Mon Sep 17 00:00:00 2001 From: Alexey Date: Wed, 4 Dec 2024 17:25:38 +0300 Subject: [PATCH 11/80] Update IdentityDigestCard --- packages/frontend/src/app/identity/[identifier]/Identity.js | 2 +- .../src/app/identity/[identifier]/IdentityDigestCard.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.js b/packages/frontend/src/app/identity/[identifier]/Identity.js index b3022f7da..c4fd24543 100644 --- a/packages/frontend/src/app/identity/[identifier]/Identity.js +++ b/packages/frontend/src/app/identity/[identifier]/Identity.js @@ -220,7 +220,7 @@ function Identity ({ identifier }) { {!dataContracts.error ? !dataContracts.loading - ? + ? : : } diff --git a/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.js b/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.js index c781f006c..ff202ea84 100644 --- a/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.js +++ b/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.js @@ -58,7 +58,7 @@ function IdentityDigestCard ({ identity, rate, className }) { {identity.data?.lastWithdrawalTime && - + } {identity.data?.lastWithdrawal} From 72c3413a80794610f38bfffdc3db95278573fcb1 Mon Sep 17 00:00:00 2001 From: Alexey Date: Wed, 4 Dec 2024 19:58:41 +0300 Subject: [PATCH 12/80] Initialize PublicKeysList component --- .../src/app/identity/[identifier]/Identity.js | 25 +++++++++-- .../components/publicKeys/PublicKeysList.js | 44 +++++++++++++++++++ .../src/components/publicKeys/index.js | 5 +++ 3 files changed, 70 insertions(+), 4 deletions(-) create mode 100644 packages/frontend/src/components/publicKeys/PublicKeysList.js create mode 100644 packages/frontend/src/components/publicKeys/index.js diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.js b/packages/frontend/src/app/identity/[identifier]/Identity.js index c4fd24543..5fac430c7 100644 --- a/packages/frontend/src/app/identity/[identifier]/Identity.js +++ b/packages/frontend/src/app/identity/[identifier]/Identity.js @@ -25,6 +25,7 @@ import { Tabs, TabList, TabPanels, Tab, TabPanel } from '@chakra-ui/react' // import BlocksChart from '../../validator/[hash]/BlocksChart' +import { PublicKeysList } from '../../../components/publicKeys' import { InfoContainer, PageDataContainer, ValueContainer } from '../../../components/ui/containers' import './Identity.scss' import './IdentityTotalCard.scss' @@ -55,6 +56,22 @@ function Identity ({ identifier }) { console.log('identity', identity) + if (!identity.data?.publicKeys) { + identity.data.publicKeys = [ + { + contractBounds: null, + data: '0258abe04886308feb52b8f3d64eace4913c9d049f4dda9a88a217e6ca6b89a107', + id: 0, + publicKeyHash: '8186d9a996b9848c09b9ac8340644fa8c2685376', + purpose: 'AUTHENTICATION', + readOnly: false, + securityLevel: 'MASTER', + signature: '1f60451588fe72a067daaa0a1ee04279e77ce346128560129162386f76d51eccdc1d88704f2262fe173de57e5598010655d410da94ae2e1cf7086049878b08e966', + type: 'ECDSA_SECP256K1' + } + ] + } + const fetchData = () => { Promise.all([ Api.getIdentity(identifier) @@ -181,14 +198,14 @@ function Identity ({ identifier }) { value={identity.data?.aliases?.length ? : none - } + } /> } + error={identity.error} + value={} />
diff --git a/packages/frontend/src/components/publicKeys/PublicKeysList.js b/packages/frontend/src/components/publicKeys/PublicKeysList.js new file mode 100644 index 000000000..b6f578546 --- /dev/null +++ b/packages/frontend/src/components/publicKeys/PublicKeysList.js @@ -0,0 +1,44 @@ +import { Grid, GridItem } from '@chakra-ui/react' + +function PublicKeysList ({ publicKeys = [] }) { + + return ( +
+ + + Time + + + Hash + + + Gas used + + + Owner + + + Type + + + + {publicKeys.map((publicKey, i) => ( +
+
+ +
{publicKey?.id}
+
{publicKey?.publicKeyHash}
+
{publicKey?.type}
+
{publicKey?.purpose}
+
{publicKey?.securityLevel}
+
{publicKey?.readOnly}
+
{publicKey?.data}
+ +
+
+ ))} +
+ ) +} + +export default PublicKeysList diff --git a/packages/frontend/src/components/publicKeys/index.js b/packages/frontend/src/components/publicKeys/index.js new file mode 100644 index 000000000..f34cf6128 --- /dev/null +++ b/packages/frontend/src/components/publicKeys/index.js @@ -0,0 +1,5 @@ +import PublicKeysList from './PublicKeysList' + +export { + PublicKeysList +} From 10fd09de21379de84e9d69e63fbb51b672afb275 Mon Sep 17 00:00:00 2001 From: Alexey Date: Wed, 4 Dec 2024 23:38:22 +0300 Subject: [PATCH 13/80] Update PublicKeysList titles styles --- .../src/app/identity/[identifier]/Identity.js | 6 +- .../[identifier]/IdentityDigestCard.js | 6 +- .../components/publicKeys/PublicKeysList.js | 19 +++-- .../components/publicKeys/PublicKeysList.scss | 16 ++++ .../publicKeys/PublicKeysListItem.scss | 9 +++ .../src/components/publicKeys/_variables.scss | 79 +++++++++++++++++++ 6 files changed, 124 insertions(+), 11 deletions(-) create mode 100644 packages/frontend/src/components/publicKeys/PublicKeysList.scss create mode 100644 packages/frontend/src/components/publicKeys/PublicKeysListItem.scss create mode 100644 packages/frontend/src/components/publicKeys/_variables.scss diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.js b/packages/frontend/src/app/identity/[identifier]/Identity.js index 5fac430c7..c6cbe8215 100644 --- a/packages/frontend/src/app/identity/[identifier]/Identity.js +++ b/packages/frontend/src/app/identity/[identifier]/Identity.js @@ -22,7 +22,7 @@ import { // Box, // Container, // Flex, - Tabs, TabList, TabPanels, Tab, TabPanel + Tabs, TabList, TabPanels, Tab, TabPanel, Button } from '@chakra-ui/react' // import BlocksChart from '../../validator/[hash]/BlocksChart' import { PublicKeysList } from '../../../components/publicKeys' @@ -205,7 +205,7 @@ function Identity ({ identifier }) { title={'Public Keys'} loading={identity.loading} error={identity.error} - value={} + value={} /> @@ -215,6 +215,8 @@ function Identity ({ identifier }) { + + diff --git a/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.js b/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.js index ff202ea84..72e15d71b 100644 --- a/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.js +++ b/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.js @@ -10,9 +10,9 @@ function IdentityDigestCard ({ identity, rate, className }) { const activeNetwork = networks.find(network => network.explorerBaseUrl === baseUrl) const l1explorerBaseUrl = activeNetwork?.l1explorerBaseUrl || null - if (!identity.data?.lastWithdrawal) identity.data.lastWithdrawal = '6AC5EDA942093A9275A2837CFDF2C18CAAD9D922BA211BD5EA5E6333FE904CE7' - if (!identity.data?.lastWithdrawalTime) identity.data.lastWithdrawalTime = '2024-11-21T10:26:04.053Z' - if (!identity.data?.fundingAddress) identity.data.fundingAddress = '=yS9GnnRdzX9W9G9kxihdgB5VovKWbPGjS1' + // if (!identity.data?.lastWithdrawal) identity.data.lastWithdrawal = '6AC5EDA942093A9275A2837CFDF2C18CAAD9D922BA211BD5EA5E6333FE904CE7' + // if (!identity.data?.lastWithdrawalTime) identity.data.lastWithdrawalTime = '2024-11-21T10:26:04.053Z' + // if (!identity.data?.fundingAddress) identity.data.fundingAddress = '=yS9GnnRdzX9W9G9kxihdgB5VovKWbPGjS1' return (
diff --git a/packages/frontend/src/components/publicKeys/PublicKeysList.js b/packages/frontend/src/components/publicKeys/PublicKeysList.js index b6f578546..b1f4ef958 100644 --- a/packages/frontend/src/components/publicKeys/PublicKeysList.js +++ b/packages/frontend/src/components/publicKeys/PublicKeysList.js @@ -1,24 +1,31 @@ import { Grid, GridItem } from '@chakra-ui/react' +import './PublicKeysList.scss' +import './PublicKeysListItem.scss' function PublicKeysList ({ publicKeys = [] }) { - return (
- Time + Key Id - Hash + Public Key Hash - Gas used + Type - Owner + Purpose - Type + Security Level + + + Read only + + + Data diff --git a/packages/frontend/src/components/publicKeys/PublicKeysList.scss b/packages/frontend/src/components/publicKeys/PublicKeysList.scss new file mode 100644 index 000000000..ad5e78af6 --- /dev/null +++ b/packages/frontend/src/components/publicKeys/PublicKeysList.scss @@ -0,0 +1,16 @@ +@use '../../styles/mixins.scss'; +@use './variables' as txs; +@import '../../styles/variables.scss'; + +.PublicKeysList { + container-type: inline-size; + + &__ColumnTitles { + @include mixins.defListTitles; + @include txs.Columns(); + } + + &__ColumnTitle { + @include txs.Column(); + } +} \ No newline at end of file diff --git a/packages/frontend/src/components/publicKeys/PublicKeysListItem.scss b/packages/frontend/src/components/publicKeys/PublicKeysListItem.scss new file mode 100644 index 000000000..971146c1f --- /dev/null +++ b/packages/frontend/src/components/publicKeys/PublicKeysListItem.scss @@ -0,0 +1,9 @@ +@use '../../styles/mixins.scss'; +@use './variables' as txs; +@import '../../styles/variables.scss'; + +.PublicKeysListItem { + &__Column { + @include txs.Column(); + } +} \ No newline at end of file diff --git a/packages/frontend/src/components/publicKeys/_variables.scss b/packages/frontend/src/components/publicKeys/_variables.scss new file mode 100644 index 000000000..3c1f19942 --- /dev/null +++ b/packages/frontend/src/components/publicKeys/_variables.scss @@ -0,0 +1,79 @@ +@mixin Columns () { + display: grid; + gap: 16px; + + grid-template-columns: + minmax(88px, 88px) + minmax(122px, 122px) + minmax(133px, 150px) + minmax(113px, 150px) + minmax(114px, 114px) + minmax(78px, 78px) + 150px; + + //@container (max-width: 810px) { + // grid-template-columns: + // minmax(120px, 120px) + // minmax(0, 240px) + // minmax(0, 1fr) + // auto; + //} + // + //@container (max-width: 660px) { + // grid-template-columns: + // minmax(120px, 120px) + // minmax(0, 600px) + // 20px + // auto; + //} + // + //@container (max-width: 430px) { + // gap: 12px; + // grid-template-columns: + // minmax(120px, 120px) + // minmax(0, 600px) + // auto; + //} + // + //@container (max-width: 400px) { + // grid-template-columns: + // minmax(80px, 80px) + // minmax(0, 600px) + // auto; + //} +} + +@mixin Column () { + display: flex; + align-items: center; + + &--Hash { + max-width: 600px; + } + + &--Owner { + max-width: 400px; + width: 100%; + } + + &--Type { + justify-content: flex-end; + white-space: nowrap; + } + + &--GasUsed { + width: 150px; + } + + @container (max-width: 810px) { + &--GasUsed { + display: none; + } + } + + @container (max-width: 430px) { + &--Owner { + display: none; + } + } +} From f99228ab6c105e80f402f461b05f4e9a02aa351c Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 5 Dec 2024 19:25:26 +0300 Subject: [PATCH 14/80] Implement the colorScheme property in the ValueContainer component --- .../ui/containers/ValueContainer.js | 12 ++++++++++- .../ui/containers/ValueContainer.scss | 20 +++++++++++++++++++ packages/frontend/src/styles/theme.js | 4 +++- 3 files changed, 34 insertions(+), 2 deletions(-) diff --git a/packages/frontend/src/components/ui/containers/ValueContainer.js b/packages/frontend/src/components/ui/containers/ValueContainer.js index e1814db2f..1c7b41bff 100644 --- a/packages/frontend/src/components/ui/containers/ValueContainer.js +++ b/packages/frontend/src/components/ui/containers/ValueContainer.js @@ -1,13 +1,23 @@ import './ValueContainer.scss' import { ArrowCornerIcon } from '../icons' -function ValueContainer ({ children, clickable, external, light, className, ...props }) { +function ValueContainer ({ children, clickable, colorScheme = 'default', external, light, className, ...props }) { + const colorClasses = { + default: '', + red: 'ValueContainer--Red', + green: 'ValueContainer--Green', + blue: 'ValueContainer--Blue', + gray: 'ValueContainer--Gray' + } + let extraClass = '' if (clickable) extraClass += ' ValueContainer--Clickable' if (external) extraClass += ' ValueContainer--External' if (light) extraClass += ' ValueContainer--Light' + extraClass += colorClasses?.[colorScheme] || colorClasses.default + return (
{external && ( diff --git a/packages/frontend/src/components/ui/containers/ValueContainer.scss b/packages/frontend/src/components/ui/containers/ValueContainer.scss index 619ee3dba..e853005a1 100644 --- a/packages/frontend/src/components/ui/containers/ValueContainer.scss +++ b/packages/frontend/src/components/ui/containers/ValueContainer.scss @@ -10,6 +10,26 @@ padding: 12px; transition: all .1s; + &--Red { + color: var(--chakra-colors-red-default); + background: rgba(var(--chakra-colors-red-default-rgb), .2); + } + + &--Green { + color: var(--chakra-colors-green-default); + background: rgba(var(--chakra-colors-green-default-rgb), .2); + } + + &--Blue { + color: var(--chakra-colors-brand-light); + background: rgba(var(--chakra-colors-brand-normal-rgb), .2); + } + + &--Gray { + color: #fff; + background: rgba(255, 255, 255, .2); + } + &--Clickable { @media (hover: hover) and (pointer: fine) { &:hover { diff --git a/packages/frontend/src/styles/theme.js b/packages/frontend/src/styles/theme.js index ed0ab006a..e49ed0b65 100644 --- a/packages/frontend/src/styles/theme.js +++ b/packages/frontend/src/styles/theme.js @@ -57,13 +57,15 @@ export const theme = extendTheme({ 50: '#FFFFFF' }, red: { - default: '#F45858' + default: '#F45858', + 'default-rgb': '244, 88, 88' }, yellow: { default: '#FFD205' }, green: { default: '#1CC400', + 'default-rgb': '28, 196, 0', label: '#81F458', emeralds: '#58F4BC', 'emeralds-rgb': '88, 244, 188' From e440e7d681a497c91295b038864f01f3d87028aa Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 5 Dec 2024 19:26:02 +0300 Subject: [PATCH 15/80] Update DateBlock styles in ValidatorPage to fit new DateBlock component architecture --- .../src/app/validator/[hash]/ValidatorPage.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/frontend/src/app/validator/[hash]/ValidatorPage.scss b/packages/frontend/src/app/validator/[hash]/ValidatorPage.scss index 26a4450f3..608174a07 100644 --- a/packages/frontend/src/app/validator/[hash]/ValidatorPage.scss +++ b/packages/frontend/src/app/validator/[hash]/ValidatorPage.scss @@ -99,13 +99,13 @@ } } - &__InfoLine { - margin-bottom: 14px; + &__InfoLine { + margin-bottom: 14px; - .DateBlock { - justify-content: flex-end; + .DateBlock__InfoContainer { + justify-content: flex-end; + } } - } &__ValueContainer { display: flex; From dd26ac0e75b73657b9914992afdef3da7ee5f5d8 Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 5 Dec 2024 19:26:28 +0300 Subject: [PATCH 16/80] Update PublicKeysList styles --- .../src/app/identity/[identifier]/Identity.js | 35 +++++++-- .../components/publicKeys/PublicKeysList.js | 52 ++++++++++--- .../components/publicKeys/PublicKeysList.scss | 6 +- .../publicKeys/PublicKeysListItem.scss | 47 ++++++++++- .../src/components/publicKeys/_variables.scss | 77 +++++++------------ 5 files changed, 145 insertions(+), 72 deletions(-) diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.js b/packages/frontend/src/app/identity/[identifier]/Identity.js index c6cbe8215..caaa4c854 100644 --- a/packages/frontend/src/app/identity/[identifier]/Identity.js +++ b/packages/frontend/src/app/identity/[identifier]/Identity.js @@ -59,15 +59,34 @@ function Identity ({ identifier }) { if (!identity.data?.publicKeys) { identity.data.publicKeys = [ { - contractBounds: null, - data: '0258abe04886308feb52b8f3d64eace4913c9d049f4dda9a88a217e6ca6b89a107', - id: 0, - publicKeyHash: '8186d9a996b9848c09b9ac8340644fa8c2685376', - purpose: 'AUTHENTICATION', + contractBounds: { + type: 'documentType', + id: '3Fq4GuFDSaPm7qN2rG8chtif6jgZnqyY48rw9caUMGo6', + typeName: 'contact' + }, + id: 5, + type: 'ECDSA_SECP256K1', + data: '023b63a7e2321db63f5dbd26e08e3aa1da974404fd6b9303903195be10fe12e2b0', + publicKeyHash: 'aefbbefbbf99eee9e134c0657a13651a5692e98d', + purpose: 'ENCRYPTION', + securityLevel: 'MEDIUM', readOnly: false, - securityLevel: 'MASTER', - signature: '1f60451588fe72a067daaa0a1ee04279e77ce346128560129162386f76d51eccdc1d88704f2262fe173de57e5598010655d410da94ae2e1cf7086049878b08e966', - type: 'ECDSA_SECP256K1' + signature: '1f58d5c8ee4e87e6d6fffcfebcaadc030599cc4e18e41f3d7f78bd993666e146973beb1ca57e0366eceef0510e3b55a97db765110d4ff07b9653db237d8a021d51' + }, + { + contractBounds: { + type: 'documentType', + id: '3Fq4GuFDSaPm7qN2rG8chtif6jgZnqyY48rw9caUMGo6', + typeName: 'contact' + }, + id: 6, + type: 'ECDSA_SECP256K1', + data: '026e9189c76f667c774da971d5eacee575acfd747c3ea6ca8af3636f93ac871f73', + publicKeyHash: '56db223d9e394d9a15db5064f9e19be3c40d20ff', + purpose: 'DECRYPTION', + securityLevel: 'MEDIUM', + readOnly: false, + signature: '1fd753dbf431f8be55fe5545678c05ca81a1b3cfb676ff85fe22caf0042b2ad84b437c203bf16ead8d3f62f74d832d6ca8a492804340d356f1d003856ca50f170a' } ] } diff --git a/packages/frontend/src/components/publicKeys/PublicKeysList.js b/packages/frontend/src/components/publicKeys/PublicKeysList.js index b1f4ef958..23a4f7bdb 100644 --- a/packages/frontend/src/components/publicKeys/PublicKeysList.js +++ b/packages/frontend/src/components/publicKeys/PublicKeysList.js @@ -1,8 +1,14 @@ import { Grid, GridItem } from '@chakra-ui/react' +import { ValueCard } from '../../components/cards' import './PublicKeysList.scss' import './PublicKeysListItem.scss' +import {ValueContainer} from "../ui/containers"; function PublicKeysList ({ publicKeys = [] }) { + const boundTypeTitles = { + documentType: 'Document Type' + } + return (
@@ -31,17 +37,43 @@ function PublicKeysList ({ publicKeys = [] }) { {publicKeys.map((publicKey, i) => (
-
- -
{publicKey?.id}
-
{publicKey?.publicKeyHash}
-
{publicKey?.type}
-
{publicKey?.purpose}
-
{publicKey?.securityLevel}
-
{publicKey?.readOnly}
-
{publicKey?.data}
+ + {publicKey?.id} + + {publicKey?.publicKeyHash} + + + + {publicKey?.type} + + + + + {publicKey?.purpose} + + + + + {publicKey?.securityLevel} + + + + + {publicKey?.readOnly ? 'True' : 'False'} + + + + {publicKey?.data} -
+ {publicKey?.contractBounds && +
+
Bound to
+
{publicKey?.contractBounds?.id}
+ {boundTypeTitles[publicKey?.contractBounds?.type] || publicKey?.contractBounds?.type}: {publicKey?.contractBounds?.typeName} +
+ } + +
))}
diff --git a/packages/frontend/src/components/publicKeys/PublicKeysList.scss b/packages/frontend/src/components/publicKeys/PublicKeysList.scss index ad5e78af6..c4e40337a 100644 --- a/packages/frontend/src/components/publicKeys/PublicKeysList.scss +++ b/packages/frontend/src/components/publicKeys/PublicKeysList.scss @@ -1,5 +1,5 @@ @use '../../styles/mixins.scss'; -@use './variables' as txs; +@use './variables' as pk; @import '../../styles/variables.scss'; .PublicKeysList { @@ -7,10 +7,10 @@ &__ColumnTitles { @include mixins.defListTitles; - @include txs.Columns(); + @include pk.Columns(); } &__ColumnTitle { - @include txs.Column(); + @include pk.Column(); } } \ No newline at end of file diff --git a/packages/frontend/src/components/publicKeys/PublicKeysListItem.scss b/packages/frontend/src/components/publicKeys/PublicKeysListItem.scss index 971146c1f..807e9f79c 100644 --- a/packages/frontend/src/components/publicKeys/PublicKeysListItem.scss +++ b/packages/frontend/src/components/publicKeys/PublicKeysListItem.scss @@ -1,9 +1,52 @@ @use '../../styles/mixins.scss'; -@use './variables' as txs; +@use './variables' as pk; @import '../../styles/variables.scss'; .PublicKeysListItem { + @include mixins.DefListItem(false); + display: block; + + &__Content { + @include pk.Columns(); + align-items: baseline; + + &--Inline { + display: inline !important; + } + } + &__Column { - @include txs.Column(); + @include pk.Column(); + font-size: 0.688rem; + + &--Id { + font-size: 0.75rem; + color: #fff; + } + + &--Data { + flex-direction: column; + align-items: flex-start; + } + + &--PublicKeyHash { + font-size: 0.688rem; + color: var(--chakra-colors-gray-250); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + + &__PublicKeyHash { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + &__Data { + word-break: break-all; + min-width: 100px; } } \ No newline at end of file diff --git a/packages/frontend/src/components/publicKeys/_variables.scss b/packages/frontend/src/components/publicKeys/_variables.scss index 3c1f19942..85fbe0ec2 100644 --- a/packages/frontend/src/components/publicKeys/_variables.scss +++ b/packages/frontend/src/components/publicKeys/_variables.scss @@ -5,74 +5,53 @@ grid-template-columns: minmax(88px, 88px) minmax(122px, 122px) - minmax(133px, 150px) - minmax(113px, 150px) - minmax(114px, 114px) + minmax(133px, 113px) + minmax(113px, 113px) + minmax(115px, 115px) minmax(78px, 78px) - 150px; - - //@container (max-width: 810px) { - // grid-template-columns: - // minmax(120px, 120px) - // minmax(0, 240px) - // minmax(0, 1fr) - // auto; - //} - // - //@container (max-width: 660px) { - // grid-template-columns: - // minmax(120px, 120px) - // minmax(0, 600px) - // 20px - // auto; - //} - // - //@container (max-width: 430px) { - // gap: 12px; - // grid-template-columns: - // minmax(120px, 120px) - // minmax(0, 600px) - // auto; - //} - // - //@container (max-width: 400px) { - // grid-template-columns: - // minmax(80px, 80px) - // minmax(0, 600px) - // auto; - //} + auto; } @mixin Column () { display: flex; align-items: center; - &--Hash { - max-width: 600px; + &--Id { + max-width: 88px; + width: 100%; } - &--Owner { - max-width: 400px; + &--PublicKeyHash { + max-width: 122px; width: 100%; } &--Type { - justify-content: flex-end; - white-space: nowrap; + max-width: 113px; + width: 100%; } - &--GasUsed { - width: 150px; + &--Purpose { + max-width: 113px; + width: 100%; } - @container (max-width: 810px) { - &--GasUsed { - display: none; - } + &--SecurityLevel { + max-width: 115px; + width: 100%; } - @container (max-width: 430px) { - &--Owner { + &--ReadOnly { + max-width: 78px; + width: 100%; + } + + &--Data { + width: 100%; + } + + @container (max-width: 810px) { + &--GasUsed { display: none; } } From df7c77393c23fede894d378b35469f0e4bfc5f20 Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 5 Dec 2024 19:27:19 +0300 Subject: [PATCH 17/80] Fix linter error --- packages/frontend/src/components/publicKeys/PublicKeysList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/frontend/src/components/publicKeys/PublicKeysList.js b/packages/frontend/src/components/publicKeys/PublicKeysList.js index 23a4f7bdb..85c5e43bd 100644 --- a/packages/frontend/src/components/publicKeys/PublicKeysList.js +++ b/packages/frontend/src/components/publicKeys/PublicKeysList.js @@ -2,7 +2,7 @@ import { Grid, GridItem } from '@chakra-ui/react' import { ValueCard } from '../../components/cards' import './PublicKeysList.scss' import './PublicKeysListItem.scss' -import {ValueContainer} from "../ui/containers"; +import { ValueContainer } from '../ui/containers' function PublicKeysList ({ publicKeys = [] }) { const boundTypeTitles = { From 731eee14c5338356954ad001fa7d5b092f6c2138 Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 5 Dec 2024 19:27:46 +0300 Subject: [PATCH 18/80] Update IdentityDigestCard nested styles --- .../src/app/identity/[identifier]/IdentityDigestCard.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.scss b/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.scss index bbb0d7482..3063831a2 100644 --- a/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.scss +++ b/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.scss @@ -47,7 +47,7 @@ &__InfoLine { margin-bottom: 14px; - .DateBlock { + .DateBlock__InfoContainer { justify-content: flex-end; } } From 7980455e6388dd511ebaca4ed4de1976c47265f6 Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 5 Dec 2024 19:55:15 +0300 Subject: [PATCH 19/80] Implement the size property to the ValueContainer component --- .../ui/containers/ValueContainer.js | 25 +++++++++++++++---- .../ui/containers/ValueContainer.scss | 8 +++++- 2 files changed, 27 insertions(+), 6 deletions(-) diff --git a/packages/frontend/src/components/ui/containers/ValueContainer.js b/packages/frontend/src/components/ui/containers/ValueContainer.js index 1c7b41bff..864bd80c1 100644 --- a/packages/frontend/src/components/ui/containers/ValueContainer.js +++ b/packages/frontend/src/components/ui/containers/ValueContainer.js @@ -1,7 +1,16 @@ import './ValueContainer.scss' import { ArrowCornerIcon } from '../icons' -function ValueContainer ({ children, clickable, colorScheme = 'default', external, light, className, ...props }) { +function ValueContainer ({ + children, + clickable, + colorScheme = 'default', + size = 'default', + external, + light, + className, + ...props +}) { const colorClasses = { default: '', red: 'ValueContainer--Red', @@ -10,13 +19,19 @@ function ValueContainer ({ children, clickable, colorScheme = 'default', externa gray: 'ValueContainer--Gray' } + const sizeClasses = { + default: '', + sm: 'ValueContainer--SizeSm' + } + let extraClass = '' - if (clickable) extraClass += ' ValueContainer--Clickable' - if (external) extraClass += ' ValueContainer--External' - if (light) extraClass += ' ValueContainer--Light' + if (clickable) extraClass += 'ValueContainer--Clickable' + if (external) extraClass += 'ValueContainer--External' + if (light) extraClass += 'ValueContainer--Light' - extraClass += colorClasses?.[colorScheme] || colorClasses.default + extraClass += ' ' + colorClasses?.[colorScheme] || colorClasses.default + extraClass += ' ' + sizeClasses?.[size] || sizeClasses.default return (
diff --git a/packages/frontend/src/components/ui/containers/ValueContainer.scss b/packages/frontend/src/components/ui/containers/ValueContainer.scss index e853005a1..931a98486 100644 --- a/packages/frontend/src/components/ui/containers/ValueContainer.scss +++ b/packages/frontend/src/components/ui/containers/ValueContainer.scss @@ -5,7 +5,7 @@ display: flex; align-items: center; flex-wrap: nowrap; - border-radius: 10px; + border-radius: $border-radius-def; background: rgba(46, 57, 61, .5); padding: 12px; transition: all .1s; @@ -30,6 +30,12 @@ background: rgba(255, 255, 255, .2); } + &--SizeSm { + padding: 6px 10px; + line-height: 14px; + border-radius: 8px; + } + &--Clickable { @media (hover: hover) and (pointer: fine) { &:hover { From 8b29c9d1af3edbc5ee64f4141527f7f803f86c38 Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 5 Dec 2024 19:55:39 +0300 Subject: [PATCH 20/80] Implement the size and color properties to the ValueCard component --- .../src/components/cards/ValueCard.js | 21 +++++++++++++++++-- .../src/components/cards/ValueCard.scss | 10 +++++++++ 2 files changed, 29 insertions(+), 2 deletions(-) diff --git a/packages/frontend/src/components/cards/ValueCard.js b/packages/frontend/src/components/cards/ValueCard.js index b2cfd7d15..b73bb9d5b 100644 --- a/packages/frontend/src/components/cards/ValueCard.js +++ b/packages/frontend/src/components/cards/ValueCard.js @@ -7,10 +7,27 @@ const Wrapper = (props) => { :
{props.children}
} -export default function ValueCard ({ link, loading, children, className }) { +export default function ValueCard ({ link, loading, colorScheme = 'default', size = 'default', children, className }) { + const colorClasses = { + default: '', + transparent: 'ValueCard--BgTransparent' + } + + const sizeClasses = { + default: '', + sm: 'ValueCard--SizeSm' + } + + let extraClass = '' + + if (link) extraClass += 'ValueCard--Clickable' + + extraClass += ' ' + colorClasses?.[colorScheme] || colorClasses.default + extraClass += ' ' + sizeClasses?.[size] || sizeClasses.default + return ( {children} diff --git a/packages/frontend/src/components/cards/ValueCard.scss b/packages/frontend/src/components/cards/ValueCard.scss index d2d47016b..e9beeff0d 100644 --- a/packages/frontend/src/components/cards/ValueCard.scss +++ b/packages/frontend/src/components/cards/ValueCard.scss @@ -14,6 +14,16 @@ @include mixins.LoadingLine(); } + &--SizeSm { + padding: 5px 10px; + line-height: 14px; + border-radius: 4px; + } + + &--BgTransparent { + background: transparent; + } + &--Clickable { @media (hover: hover) and (pointer: fine) { &:hover { From 1db5f854d941be9d04a2e15623503a17f41934a3 Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 5 Dec 2024 19:56:00 +0300 Subject: [PATCH 21/80] Update PublicKeysListItem styles --- .../src/components/publicKeys/PublicKeysList.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/packages/frontend/src/components/publicKeys/PublicKeysList.js b/packages/frontend/src/components/publicKeys/PublicKeysList.js index 85c5e43bd..b830185e4 100644 --- a/packages/frontend/src/components/publicKeys/PublicKeysList.js +++ b/packages/frontend/src/components/publicKeys/PublicKeysList.js @@ -38,27 +38,31 @@ function PublicKeysList ({ publicKeys = [] }) { {publicKeys.map((publicKey, i) => (
- {publicKey?.id} + + {publicKey?.id} + - {publicKey?.publicKeyHash} + + {publicKey?.publicKeyHash} + - + {publicKey?.type} - + {publicKey?.purpose} - + {publicKey?.securityLevel} - + {publicKey?.readOnly ? 'True' : 'False'} From 05bafe97f4e0ba3d5cf623bf697943382fd533e0 Mon Sep 17 00:00:00 2001 From: Alexey Date: Fri, 6 Dec 2024 01:04:11 +0300 Subject: [PATCH 22/80] Add link properties and LightGray colorScheme to ValueContainer component --- .../ui/containers/ValueContainer.js | 26 ++++++++++++++----- .../ui/containers/ValueContainer.scss | 18 +++++++++++++ 2 files changed, 37 insertions(+), 7 deletions(-) diff --git a/packages/frontend/src/components/ui/containers/ValueContainer.js b/packages/frontend/src/components/ui/containers/ValueContainer.js index 864bd80c1..c5470a23c 100644 --- a/packages/frontend/src/components/ui/containers/ValueContainer.js +++ b/packages/frontend/src/components/ui/containers/ValueContainer.js @@ -1,9 +1,12 @@ -import './ValueContainer.scss' import { ArrowCornerIcon } from '../icons' +import Link from 'next/link' +import './ValueContainer.scss' function ValueContainer ({ children, clickable, + link, + elipsed = false, colorScheme = 'default', size = 'default', external, @@ -11,30 +14,39 @@ function ValueContainer ({ className, ...props }) { + const Wrapper = (props) => { + return typeof link === 'string' + ? {props.children} + :
{props.children}
+ } + const colorClasses = { default: '', red: 'ValueContainer--Red', green: 'ValueContainer--Green', blue: 'ValueContainer--Blue', + lightGray: 'ValueContainer--LightGray', gray: 'ValueContainer--Gray' } const sizeClasses = { default: '', - sm: 'ValueContainer--SizeSm' + sm: 'ValueContainer--SizeSm', + xs: 'ValueContainer--SizeXs' } let extraClass = '' - if (clickable) extraClass += 'ValueContainer--Clickable' - if (external) extraClass += 'ValueContainer--External' - if (light) extraClass += 'ValueContainer--Light' + if (clickable || link) extraClass += ' ValueContainer--Clickable' + if (external) extraClass += ' ValueContainer--External' + if (light) extraClass += ' ValueContainer--Light' + if (elipsed) extraClass += ' ValueContainer--Elipsed' extraClass += ' ' + colorClasses?.[colorScheme] || colorClasses.default extraClass += ' ' + sizeClasses?.[size] || sizeClasses.default return ( -
+ {external && (
@@ -43,7 +55,7 @@ function ValueContainer ({
{children}
-
+ ) } diff --git a/packages/frontend/src/components/ui/containers/ValueContainer.scss b/packages/frontend/src/components/ui/containers/ValueContainer.scss index 931a98486..b13aedb42 100644 --- a/packages/frontend/src/components/ui/containers/ValueContainer.scss +++ b/packages/frontend/src/components/ui/containers/ValueContainer.scss @@ -10,6 +10,13 @@ padding: 12px; transition: all .1s; + &--Elipsed { + max-width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + &--Red { color: var(--chakra-colors-red-default); background: rgba(var(--chakra-colors-red-default-rgb), .2); @@ -25,6 +32,11 @@ background: rgba(var(--chakra-colors-brand-normal-rgb), .2); } + &--LightGray { + color: #fff; + background: #404E53; + } + &--Gray { color: #fff; background: rgba(255, 255, 255, .2); @@ -36,6 +48,12 @@ border-radius: 8px; } + &--SizeXs { + padding: 4px 6px; + line-height: 16px; + border-radius: 8px; + } + &--Clickable { @media (hover: hover) and (pointer: fine) { &:hover { From 4cb59b2a78181aae37ff059226ac93e5148072d4 Mon Sep 17 00:00:00 2001 From: Alexey Date: Fri, 6 Dec 2024 01:05:20 +0300 Subject: [PATCH 23/80] Create PublicKeyBoundCard component and separate PublicKeysListItem to individual component --- .../publicKeys/PublicKeyBoundCard.js | 36 +++++++++++ .../publicKeys/PublicKeyBoundCard.scss | 40 ++++++++++++ .../components/publicKeys/PublicKeysList.js | 54 +--------------- .../publicKeys/PublicKeysListItem.js | 61 +++++++++++++++++++ .../publicKeys/PublicKeysListItem.scss | 16 +++++ 5 files changed, 156 insertions(+), 51 deletions(-) create mode 100644 packages/frontend/src/components/publicKeys/PublicKeyBoundCard.js create mode 100644 packages/frontend/src/components/publicKeys/PublicKeyBoundCard.scss create mode 100644 packages/frontend/src/components/publicKeys/PublicKeysListItem.js diff --git a/packages/frontend/src/components/publicKeys/PublicKeyBoundCard.js b/packages/frontend/src/components/publicKeys/PublicKeyBoundCard.js new file mode 100644 index 000000000..61bcab7e4 --- /dev/null +++ b/packages/frontend/src/components/publicKeys/PublicKeyBoundCard.js @@ -0,0 +1,36 @@ +import { ValueContainer } from '../ui/containers' +import { ValueCard } from '../cards' +import './PublicKeyBoundCard.scss' + +function PublicKeyBoundCard ({ publicKeyBounds, className }) { + const boundTypeTitles = { + documentType: 'Document Type' + } + + return ( + +
Bound to
+
+ + {publicKeyBounds?.id} + +
+
+ + {boundTypeTitles[publicKeyBounds?.type] || publicKeyBounds.type}: + + + {publicKeyBounds.typeName} + +
+ + ) +} + +export default PublicKeyBoundCard diff --git a/packages/frontend/src/components/publicKeys/PublicKeyBoundCard.scss b/packages/frontend/src/components/publicKeys/PublicKeyBoundCard.scss new file mode 100644 index 000000000..61653eff8 --- /dev/null +++ b/packages/frontend/src/components/publicKeys/PublicKeyBoundCard.scss @@ -0,0 +1,40 @@ +@use '../../styles/mixins.scss'; +@import '../../styles/variables.scss'; + +.PublicKeyBoundCard { + display: flex; + gap: 4px; + font-size: 0.75rem; + + &__Title { + white-space: nowrap; + color: var(--chakra-colors-gray-250); + } + + &__Id { + overflow: hidden; + font-size: 0.75rem; + + .ValueContainer__Value { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + } + + &__Type { + display: flex; + flex-wrap: nowrap; + white-space: nowrap; + gap: 6px; + } + + &__TypeTitle { + white-space: nowrap; + color: var(--chakra-colors-gray-250); + } + + &__TypeValue { + color: #ffffff; + } +} \ No newline at end of file diff --git a/packages/frontend/src/components/publicKeys/PublicKeysList.js b/packages/frontend/src/components/publicKeys/PublicKeysList.js index b830185e4..7edf1fd9a 100644 --- a/packages/frontend/src/components/publicKeys/PublicKeysList.js +++ b/packages/frontend/src/components/publicKeys/PublicKeysList.js @@ -1,14 +1,10 @@ import { Grid, GridItem } from '@chakra-ui/react' -import { ValueCard } from '../../components/cards' +import PublicKeysListItem from './PublicKeysListItem' import './PublicKeysList.scss' import './PublicKeysListItem.scss' -import { ValueContainer } from '../ui/containers' +import './PublicKeyBoundCard.scss' function PublicKeysList ({ publicKeys = [] }) { - const boundTypeTitles = { - documentType: 'Document Type' - } - return (
@@ -35,51 +31,7 @@ function PublicKeysList ({ publicKeys = [] }) { - {publicKeys.map((publicKey, i) => ( -
- - - {publicKey?.id} - - - - {publicKey?.publicKeyHash} - - - - - {publicKey?.type} - - - - - {publicKey?.purpose} - - - - - {publicKey?.securityLevel} - - - - - {publicKey?.readOnly ? 'True' : 'False'} - - - - {publicKey?.data} - - {publicKey?.contractBounds && -
-
Bound to
-
{publicKey?.contractBounds?.id}
- {boundTypeTitles[publicKey?.contractBounds?.type] || publicKey?.contractBounds?.type}: {publicKey?.contractBounds?.typeName} -
- } - - -
- ))} + {publicKeys.map((publicKey, i) => )}
) } diff --git a/packages/frontend/src/components/publicKeys/PublicKeysListItem.js b/packages/frontend/src/components/publicKeys/PublicKeysListItem.js new file mode 100644 index 000000000..49565bfa7 --- /dev/null +++ b/packages/frontend/src/components/publicKeys/PublicKeysListItem.js @@ -0,0 +1,61 @@ +import { Grid, GridItem } from '@chakra-ui/react' +import { ValueCard } from '../../components/cards' +import PublicKeyBoundCard from './PublicKeyBoundCard' +import { ValueContainer } from '../ui/containers' +import './PublicKeysListItem.scss' +import './PublicKeyBoundCard.scss' +import { CopyButton } from '../ui/Buttons' + +function PublicKeysListItem ({ publicKey, className }) { + return ( +
+ + + {publicKey?.id} + + + + {publicKey?.publicKeyHash} + + + + + {publicKey?.type} + + + + + {publicKey?.purpose} + + + + + {publicKey?.securityLevel} + + + + + {publicKey?.readOnly ? 'True' : 'False'} + + + + {publicKey?.data && + + {publicKey.data} + + + } + + {publicKey?.contractBounds && + + } + + +
+ ) +} + +export default PublicKeysListItem diff --git a/packages/frontend/src/components/publicKeys/PublicKeysListItem.scss b/packages/frontend/src/components/publicKeys/PublicKeysListItem.scss index 807e9f79c..c1936507b 100644 --- a/packages/frontend/src/components/publicKeys/PublicKeysListItem.scss +++ b/packages/frontend/src/components/publicKeys/PublicKeysListItem.scss @@ -27,6 +27,10 @@ &--Data { flex-direction: column; align-items: flex-start; + overflow: hidden; + display: flex; + flex-direction: column; + gap: 4px; } &--PublicKeyHash { @@ -46,7 +50,19 @@ } &__Data { + display: flex; + justify-content: space-between; + align-items: center; word-break: break-all; min-width: 100px; + width: 100%; + + .CopyButton { + margin-left: 8px; + } + } + + &__PublicKeyBounds { + max-width: 100%; } } \ No newline at end of file From 20e6bed63bcf3bd5b7cd4601637c7470f94d465d Mon Sep 17 00:00:00 2001 From: Alexey Date: Fri, 6 Dec 2024 01:05:38 +0300 Subject: [PATCH 24/80] Update publicKeys index file exports --- packages/frontend/src/components/publicKeys/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/frontend/src/components/publicKeys/index.js b/packages/frontend/src/components/publicKeys/index.js index f34cf6128..d77cdfbd8 100644 --- a/packages/frontend/src/components/publicKeys/index.js +++ b/packages/frontend/src/components/publicKeys/index.js @@ -1,5 +1,7 @@ import PublicKeysList from './PublicKeysList' +import PublicKeyBoundCard from './PublicKeyBoundCard' export { - PublicKeysList + PublicKeysList, + PublicKeyBoundCard } From a749625cbdd492788193a09347f4ff3936bb444d Mon Sep 17 00:00:00 2001 From: Alexey Date: Fri, 6 Dec 2024 01:06:34 +0300 Subject: [PATCH 25/80] Update of mock data in Identity.js --- packages/frontend/src/app/identity/[identifier]/Identity.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.js b/packages/frontend/src/app/identity/[identifier]/Identity.js index caaa4c854..d423eae78 100644 --- a/packages/frontend/src/app/identity/[identifier]/Identity.js +++ b/packages/frontend/src/app/identity/[identifier]/Identity.js @@ -61,7 +61,7 @@ function Identity ({ identifier }) { { contractBounds: { type: 'documentType', - id: '3Fq4GuFDSaPm7qN2rG8chtif6jgZnqyY48rw9caUMGo6', + id: '3LSLuooomkZVVUgT8oDejK92jzcgroqyrMemVC5NX5P5', typeName: 'contact' }, id: 5, @@ -76,7 +76,7 @@ function Identity ({ identifier }) { { contractBounds: { type: 'documentType', - id: '3Fq4GuFDSaPm7qN2rG8chtif6jgZnqyY48rw9caUMGo6', + id: '3LSLuooomkZVVUgT8oDejK92jzcgroqyrMemVC5NX5P5', typeName: 'contact' }, id: 6, @@ -140,7 +140,7 @@ function Identity ({ identifier }) { } router.push(`${pathname}?${urlParameters.toString()}`, { scroll: false }) - }, [activeTab, router, pathname]) + }, [activeTab, router, pathname, searchParams]) console.log('identity', identity) From 638e581e616ce6579303a641d6cc1e7bc8ed0722 Mon Sep 17 00:00:00 2001 From: Alexey Date: Fri, 6 Dec 2024 01:57:46 +0300 Subject: [PATCH 26/80] Update AliasesList show more button --- .../src/app/identity/[identifier]/AliasesList.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/frontend/src/app/identity/[identifier]/AliasesList.js b/packages/frontend/src/app/identity/[identifier]/AliasesList.js index 430cf6f08..481db9143 100644 --- a/packages/frontend/src/app/identity/[identifier]/AliasesList.js +++ b/packages/frontend/src/app/identity/[identifier]/AliasesList.js @@ -1,5 +1,6 @@ import { useState } from 'react' import { Alias } from '../../../components/data' +import { Button } from '@chakra-ui/react' function AliasesList ({ aliases = [], smallCount = 5 }) { const [showAll, setShowAll] = useState(false) @@ -15,9 +16,14 @@ function AliasesList ({ aliases = [], smallCount = 5 }) { {alias.alias} ))}
-
setShowAll(!showAll)}> +
+
) } From 3c73a6e68f3fa77a531148a9a8e08ea931193332 Mon Sep 17 00:00:00 2001 From: Alexey Date: Fri, 6 Dec 2024 01:58:35 +0300 Subject: [PATCH 27/80] Update show/hide button of public keys in Identity page --- .../src/app/identity/[identifier]/Identity.js | 224 ++---------------- 1 file changed, 25 insertions(+), 199 deletions(-) diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.js b/packages/frontend/src/app/identity/[identifier]/Identity.js index d423eae78..2f1157d43 100644 --- a/packages/frontend/src/app/identity/[identifier]/Identity.js +++ b/packages/frontend/src/app/identity/[identifier]/Identity.js @@ -49,6 +49,8 @@ function Identity ({ identifier }) { const [transfers, setTransfers] = useState({ data: {}, loading: true, error: false }) const [rate, setRate] = useState({ data: {}, loading: true, error: false }) const [activeTab, setActiveTab] = useState(tabs.indexOf(defaultTabName.toLowerCase()) !== -1 ? tabs.indexOf(defaultTabName.toLowerCase()) : 0) + const [showPublicKeys, setShowPublicKeys] = useState(false) + const router = useRouter() const pathname = usePathname() const searchParams = useSearchParams() @@ -91,6 +93,8 @@ function Identity ({ identifier }) { ] } + // identity.data.publicKeys = [] + const fetchData = () => { Promise.all([ Api.getIdentity(identifier) @@ -199,32 +203,44 @@ function Identity ({ identifier }) {
} loading={identity.loading} error={identity.error || (!identity.loading && !identity.data?.timestamp)} - value={} /> : none } + loading={identity.loading} + error={identity.error || (!identity.loading && identity.data?.aliases === undefined)} /> 0 ? 'gray' : 'blue'} + onClick={() => setShowPublicKeys(prev => !prev)} + > + {identity.data?.publicKeys?.length !== undefined ? identity.data?.publicKeys?.length : ''} public keys + + )} loading={identity.loading} - error={identity.error} - value={} + error={identity.error || (!identity.loading && identity.data?.publicKeys === undefined)} />
@@ -235,7 +251,9 @@ function Identity ({ identifier }) {
- + {showPublicKeys && identity.data?.publicKeys?.length > 0 && + + }
@@ -284,198 +302,6 @@ function Identity ({ identifier }) { ) - - // return ( - //
- // - // - // - // {!identity.error - // ? - // - // - // - // - // - // - // - // - // - // - // - // {identity?.data?.aliases?.length > 0 && - // - // - // - // - // } - // - // - // - // - // - // - // - // - // - // {!identity.data.isSystem && - // - // - // - // - // } - // - // - // - // - // - // - // {!identity.data?.isSystem && - // - // - // - // - // } - // - // - // - // - // - // - // - // - // - // - // - // - // - // - //
Identity info - // {identifier - // ?
- // - //
- // : - // } - //
Identifier - // - // {identity.data?.identifier} - // - //
Names - // - //
- // {identity?.data.aliases.map((alias, i) => ( - // - // ))} - //
- // - //
Balance - // - // - // {identity.data?.balance} Credits - // - // - //
System - // {identity.data?.isSystem ? 'true' : 'false'} - //
Created - // - // - // {identity.data?.timestamp && new Date(identity.data?.timestamp).toLocaleString()} - // - // - //
Revision - // {identity.data?.revision} - //
Transactions - // {identity.data?.totalTxs} - //
Transfers - // {identity.data?.totalTransfers} - //
Documents - // {identity.data?.totalDocuments} - //
Data contracts - // {identity.data?.totalDataContracts} - //
- // : } - // - // - // - // - // - // - // - // Transactions - // Transfers - // Documents - // Data contracts - // - // - // - // - // {!transactions.error - // ? !transactions.loading - // ? - // : - // : } - // - // - // - // {!transfers.error - // ? !transfers.loading - // ? - // : - // : } - // - // - // - // {!documents.error - // ? !documents.loading - // ? - // : - // : } - // - // - // - // {!dataContracts.error - // ? !dataContracts.loading - // ? - // : - // : } - // - // - // - // - // - // - //
- // ) } export default Identity From f7d0fdd703ca170e71b13e1fceacf46f25bcf07e Mon Sep 17 00:00:00 2001 From: Alexey Date: Fri, 6 Dec 2024 01:59:03 +0300 Subject: [PATCH 28/80] Update IdentityTotalCard layout offsets --- .../[identifier]/IdentityTotalCard.scss | 24 +++++++++---------- .../components/publicKeys/PublicKeysList.js | 13 +++++++--- 2 files changed, 22 insertions(+), 15 deletions(-) diff --git a/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss b/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss index 7d2892f58..b2d814f5b 100644 --- a/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss +++ b/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss @@ -3,10 +3,11 @@ .IdentityTotalCard { @include mixins.EntityCard(); + display: flex; + flex-direction: column; + gap: 14px; &__Title { - margin-bottom: 14px; - .Alias__Name, .Alias__Domain { font-family: $font-heading; font-size: 0.875rem; @@ -38,16 +39,6 @@ color: var(--chakra-colors-gray-250); } - //&__HeaderLines { - // display: flex; - // flex-direction: column; - // justify-content: space-between; - // width: 100%; - // padding: 6px 0; - // overflow: hidden; - // gap: 20px; - //} - &__ContentContainer { display: flex; gap: 40px; @@ -57,4 +48,13 @@ position: relative; width: 50%; } + + &__InfoLine { + &--Names { + align-items: baseline; + } + } + + &__PublicKeysList { + } } \ No newline at end of file diff --git a/packages/frontend/src/components/publicKeys/PublicKeysList.js b/packages/frontend/src/components/publicKeys/PublicKeysList.js index 7edf1fd9a..6ca1485f1 100644 --- a/packages/frontend/src/components/publicKeys/PublicKeysList.js +++ b/packages/frontend/src/components/publicKeys/PublicKeysList.js @@ -1,12 +1,13 @@ import { Grid, GridItem } from '@chakra-ui/react' import PublicKeysListItem from './PublicKeysListItem' +import { EmptyListMessage } from '../ui/lists' import './PublicKeysList.scss' import './PublicKeysListItem.scss' import './PublicKeyBoundCard.scss' -function PublicKeysList ({ publicKeys = [] }) { +function PublicKeysList ({ publicKeys = [], className }) { return ( -
+
Key Id @@ -31,7 +32,13 @@ function PublicKeysList ({ publicKeys = [] }) { - {publicKeys.map((publicKey, i) => )} + {publicKeys?.length > 0 && + publicKeys.map((publicKey, i) => ) + } + + {publicKeys?.length === 0 && + There are no public keys + }
) } From 7134162f5447ea9252cf8f66d28ba5a510579636 Mon Sep 17 00:00:00 2001 From: Alexey Date: Fri, 6 Dec 2024 02:59:12 +0300 Subject: [PATCH 29/80] Update chakra button variants --- packages/frontend/src/styles/theme.js | 111 +++++++++++++++++++++----- 1 file changed, 91 insertions(+), 20 deletions(-) diff --git a/packages/frontend/src/styles/theme.js b/packages/frontend/src/styles/theme.js index e49ed0b65..d05b9ff3d 100644 --- a/packages/frontend/src/styles/theme.js +++ b/packages/frontend/src/styles/theme.js @@ -10,6 +10,63 @@ const montserrat = Montserrat({ subsets: ['latin'] }) const openSans = OpenSans({ subsets: ['latin'] }) const robotoMono = RobotoMono({ subsets: ['latin'] }) +const badgeColors = { + red: { + bg: '#4E3234', + bgHover: '', + text: '#F45858' + }, + green: { + bg: '#2B4629', + bgHover: '', + text: '#81F458' + }, + gray: { + bg: 'gray.600', + bgHover: 'gray.500', + text: 'gray.50' + }, + blue: { + bg: 'rgba(0, 141, 228, 0.2)', + bgHover: 'rgba(44, 187, 255, 0.2)', + text: 'rgb(0, 141, 228)' + }, + yellow: { + bg: 'rgba(244, 228, 88, 0.2)', + bgHover: '', + text: '#F4E458' + }, + orange: { + bg: 'rgba(244, 154, 88, 0.2)', + bgHover: '', + text: 'rgb(244, 154, 88)' + }, + emerald: { + bg: 'rgba(88, 244, 188, 0.2)', + bgHover: '', + text: 'rgb(88, 244, 188)' + } +} + +const badgeBackgroundColors = { + red: '#4E3234', + green: '#2B4629', + gray: 'gray.600', + blue: 'rgba(0, 141, 228, 0.2)', + yellow: 'rgba(244, 228, 88, 0.2)', + orange: 'rgba(244, 154, 88, 0.2)', + emerald: 'rgba(88, 244, 188, 0.2)' +} +const badgeTextColor = { + red: '#F45858', + green: '#81F458', + gray: 'gray.50', + blue: 'rgb(0, 141, 228)', + yellow: '#F4E458', + orange: 'rgb(244, 154, 88)', + emerald: 'rgb(88, 244, 188)' +} + export const theme = extendTheme({ config: { useSystemColorMode: false, @@ -233,30 +290,44 @@ export const theme = extendTheme({ _hover: { bg: 'green.label' } + }, + blue: { + bg: badgeColors.blue.bg, + color: badgeColors.blue.text, + _hover: { + bg: badgeColors.blue.bgHover + } + }, + gray: { + bg: badgeColors.gray.bg, + color: badgeColors.gray.text, + _hover: { + bg: badgeColors.gray.bgHover + } } } }, Badge: { baseStyle: props => { const { colorScheme } = props - const backgroundColors = { - red: '#4E3234', - green: '#2B4629', - gray: 'gray.600', - blue: 'rgba(0, 141, 228, 0.2)', - yellow: 'rgba(244, 228, 88, 0.2)', - orange: 'rgba(244, 154, 88, 0.2)', - emerald: 'rgba(88, 244, 188, 0.2)' - } - const textColor = { - red: '#F45858', - green: '#81F458', - gray: 'gray.50', - blue: 'rgb(0, 141, 228)', - yellow: '#F4E458', - orange: 'rgb(244, 154, 88)', - emerald: 'rgb(88, 244, 188)' - } + // const backgroundColors = { + // red: '#4E3234', + // green: '#2B4629', + // gray: 'gray.600', + // blue: 'rgba(0, 141, 228, 0.2)', + // yellow: 'rgba(244, 228, 88, 0.2)', + // orange: 'rgba(244, 154, 88, 0.2)', + // emerald: 'rgba(88, 244, 188, 0.2)' + // } + // const textColor = { + // red: '#F45858', + // green: '#81F458', + // gray: 'gray.50', + // blue: 'rgb(0, 141, 228)', + // yellow: '#F4E458', + // orange: 'rgb(244, 154, 88)', + // emerald: 'rgb(88, 244, 188)' + // } return { borderWidth: '0px', @@ -268,8 +339,8 @@ export const theme = extendTheme({ display: 'inline-flex', alignItems: 'center', lineHeight: '20px', - bg: backgroundColors[colorScheme] || 'gray.500', - color: textColor[colorScheme] || 'white' + bg: badgeBackgroundColors[colorScheme] || 'gray.500', + color: badgeTextColor[colorScheme] || 'white' } } }, From 197a7f5677b5ba53ef12064f830b69701ee111c0 Mon Sep 17 00:00:00 2001 From: Alexey Date: Fri, 6 Dec 2024 02:59:47 +0300 Subject: [PATCH 30/80] Update public keys show/hide button in IdentityDigestCard --- .../src/app/identity/[identifier]/IdentityTotalCard.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss b/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss index b2d814f5b..4f86e1c84 100644 --- a/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss +++ b/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss @@ -55,6 +55,12 @@ } } + &__PublicKeysShowButton { + width: max-content; + font-weight: 500 !important; + text-transform: capitalize !important; + } + &__PublicKeysList { } } \ No newline at end of file From 0cb1b77dc84b7f766e131c65cb356e042631bec0 Mon Sep 17 00:00:00 2001 From: Alexey Date: Fri, 6 Dec 2024 03:00:04 +0300 Subject: [PATCH 31/80] Update IdentityDigestCard styles --- .../[identifier]/IdentityDigestCard.js | 6 +++--- .../[identifier]/IdentityDigestCard.scss | 21 ++++++++++++++++++- 2 files changed, 23 insertions(+), 4 deletions(-) diff --git a/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.js b/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.js index 72e15d71b..ff202ea84 100644 --- a/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.js +++ b/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.js @@ -10,9 +10,9 @@ function IdentityDigestCard ({ identity, rate, className }) { const activeNetwork = networks.find(network => network.explorerBaseUrl === baseUrl) const l1explorerBaseUrl = activeNetwork?.l1explorerBaseUrl || null - // if (!identity.data?.lastWithdrawal) identity.data.lastWithdrawal = '6AC5EDA942093A9275A2837CFDF2C18CAAD9D922BA211BD5EA5E6333FE904CE7' - // if (!identity.data?.lastWithdrawalTime) identity.data.lastWithdrawalTime = '2024-11-21T10:26:04.053Z' - // if (!identity.data?.fundingAddress) identity.data.fundingAddress = '=yS9GnnRdzX9W9G9kxihdgB5VovKWbPGjS1' + if (!identity.data?.lastWithdrawal) identity.data.lastWithdrawal = '6AC5EDA942093A9275A2837CFDF2C18CAAD9D922BA211BD5EA5E6333FE904CE7' + if (!identity.data?.lastWithdrawalTime) identity.data.lastWithdrawalTime = '2024-11-21T10:26:04.053Z' + if (!identity.data?.fundingAddress) identity.data.fundingAddress = '=yS9GnnRdzX9W9G9kxihdgB5VovKWbPGjS1' return (
diff --git a/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.scss b/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.scss index 3063831a2..d7a8d1edd 100644 --- a/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.scss +++ b/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.scss @@ -25,15 +25,34 @@ background: rgba(var(--chakra-colors-gray-800-rgb), .5); border-radius: $border-radius-def; + .CreditsBlock { + display: flex; + flex-direction: column; + + .CreditsBlock__Usd { + margin-top: 0.25rem; + margin-left: auto; + } + } + + &--TupUp { } &--Withdrawals { - + .CreditsBlock__Usd { + background-color: rgba(var(--chakra-colors-red-default-rgb), .2); + color: var(--chakra-colors-red-default); + } } } + &__TransferTitle { + font-size: 0.75rem; + color: var(--chakra-colors-gray-250); + } + &__ValueContainer { display: flex; justify-content: flex-end; From 38b2ed1398bd909b703956ef4918714d450f28b4 Mon Sep 17 00:00:00 2001 From: Alexey Date: Fri, 6 Dec 2024 03:00:18 +0300 Subject: [PATCH 32/80] Update button styles on Identity page --- packages/frontend/src/app/identity/[identifier]/Identity.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.js b/packages/frontend/src/app/identity/[identifier]/Identity.js index 2f1157d43..23f2649bc 100644 --- a/packages/frontend/src/app/identity/[identifier]/Identity.js +++ b/packages/frontend/src/app/identity/[identifier]/Identity.js @@ -232,8 +232,9 @@ function Identity ({ identifier }) { title={'Public Keys'} value={( diff --git a/packages/frontend/src/app/identity/[identifier]/AliasesList.scss b/packages/frontend/src/app/identity/[identifier]/AliasesList.scss new file mode 100644 index 000000000..b44fd2c0e --- /dev/null +++ b/packages/frontend/src/app/identity/[identifier]/AliasesList.scss @@ -0,0 +1,24 @@ +@use '../../../styles/mixins.scss'; +@import '../../../styles/variables.scss'; + +.AliasesList { + &, &__ItemsContainer { + display: flex; + flex-direction: column; + align-items: end; + gap: 0.25rem; + } + + &__Item { + display: flex; + align-items: center; + gap: 0.5rem; + justify-content: flex-end; + } + + &__ShowMoreButton { + width: max-content; + font-weight: 500 !important; + text-transform: capitalize !important; + } +} \ No newline at end of file From cc34489f61a78a82e665f4bf5adcf327dbde73e3 Mon Sep 17 00:00:00 2001 From: Alexey Date: Tue, 10 Dec 2024 12:11:28 +0300 Subject: [PATCH 34/80] Update column size --- packages/frontend/src/components/publicKeys/_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/frontend/src/components/publicKeys/_variables.scss b/packages/frontend/src/components/publicKeys/_variables.scss index 85fbe0ec2..604205135 100644 --- a/packages/frontend/src/components/publicKeys/_variables.scss +++ b/packages/frontend/src/components/publicKeys/_variables.scss @@ -3,7 +3,7 @@ gap: 16px; grid-template-columns: - minmax(88px, 88px) + minmax(50px, 50px) minmax(122px, 122px) minmax(133px, 113px) minmax(113px, 113px) From 23fbca3d22c0267c6f9563509b43cd8d41588d0f Mon Sep 17 00:00:00 2001 From: Alexey Date: Tue, 10 Dec 2024 16:56:32 +0300 Subject: [PATCH 35/80] Update paddings of navigation and pageDataC mixins --- .../src/components/publicKeys/_variables.scss | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/frontend/src/components/publicKeys/_variables.scss b/packages/frontend/src/components/publicKeys/_variables.scss index 604205135..58844dc9f 100644 --- a/packages/frontend/src/components/publicKeys/_variables.scss +++ b/packages/frontend/src/components/publicKeys/_variables.scss @@ -1,3 +1,5 @@ +@import '../../styles/variables.scss'; + @mixin Columns () { display: grid; gap: 16px; @@ -10,6 +12,10 @@ minmax(115px, 115px) minmax(78px, 78px) auto; + + @container (max-width: 800px) { + gap: 8px; + } } @mixin Column () { @@ -47,12 +53,7 @@ } &--Data { + min-width: 380px; width: 100%; } - - @container (max-width: 810px) { - &--GasUsed { - display: none; - } - } } From f79108a96d7d100f34e4edd5aa3d2b700e4670d5 Mon Sep 17 00:00:00 2001 From: Alexey Date: Tue, 10 Dec 2024 18:38:38 +0300 Subject: [PATCH 36/80] Update responsive styles of IdentityDigestCard --- .../[identifier]/IdentityDigestCard.scss | 28 ++++++++++++++++--- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.scss b/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.scss index d7a8d1edd..b90c51348 100644 --- a/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.scss +++ b/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.scss @@ -2,8 +2,9 @@ @import '../../../styles/variables.scss'; .IdentityDigestCard { + @include mixins.InfoContainerPadding(padding, 0px, false); flex-direction: column; - padding: 24px; + background: rgba(var(--chakra-colors-gray-800-rgb), .5); border-radius: $border-radius-def; @@ -35,7 +36,6 @@ } } - &--TupUp { } @@ -64,10 +64,30 @@ } &__InfoLine { - margin-bottom: 14px; - .DateBlock__InfoContainer { justify-content: flex-end; } } + + @media screen and (min-width: $breakpoint-md) and (max-width: $breakpoint-lg), + screen and (max-width: $breakpoint-sm) { + &__Transfers { + flex-direction: column; + } + + &__Transfer { + width: 100%; + + .CreditsBlock { + flex-direction: row; + flex-wrap: wrap; + align-items: center; + + .CreditsBlock__Usd { + margin-top: 0.25rem; + margin-bottom: 0.25rem; + } + } + } + } } From 7e73b914d11f7c09d7197cb977af888c7d107d41 Mon Sep 17 00:00:00 2001 From: Alexey Date: Tue, 10 Dec 2024 18:38:46 +0300 Subject: [PATCH 37/80] Update responsive styles of IdentityTotalCard --- .../[identifier]/IdentityTotalCard.scss | 33 +++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss b/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss index 4f86e1c84..7ff816faa 100644 --- a/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss +++ b/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss @@ -3,6 +3,7 @@ .IdentityTotalCard { @include mixins.EntityCard(); + @include mixins.InfoContainerPadding(padding, 0px, true); display: flex; flex-direction: column; gap: 14px; @@ -62,5 +63,37 @@ } &__PublicKeysList { + + } + + @media screen and (max-width: $breakpoint-lg) { + &__InfoLine { + &--Names { + flex-wrap: wrap; + justify-content: space-between; + + .InfoLine__Value { + margin-left: auto; + } + } + } + } + + @media screen and (max-width: $breakpoint-md) { + &__ContentContainer { + flex-direction: column; + } + + &__Column { + width: 100%; + } + } + + @media screen and (max-width: $breakpoint-sm) { + &__Digest { + @include mixins.InfoContainerPadding(margin-left, 0px, true, true); + @include mixins.InfoContainerPadding(margin-right, 0px, true, true); + @include mixins.InfoContainerPadding(margin-bottom, 0px, true, true); + } } } \ No newline at end of file From af560472503072ac97f52cadf2bd444c5c8cb701 Mon Sep 17 00:00:00 2001 From: Alexey Date: Tue, 10 Dec 2024 18:39:26 +0300 Subject: [PATCH 38/80] Improve mixins of paddings: add $invert property --- packages/frontend/src/styles/mixins.scss | 31 +++++++++++++++--------- 1 file changed, 20 insertions(+), 11 deletions(-) diff --git a/packages/frontend/src/styles/mixins.scss b/packages/frontend/src/styles/mixins.scss index 86314aeaa..ddc6b00bf 100644 --- a/packages/frontend/src/styles/mixins.scss +++ b/packages/frontend/src/styles/mixins.scss @@ -303,24 +303,29 @@ } } -@mixin InfoContainerPadding($property, $adjustment: 0px, $important: false) { - #{$property}: calc(var(--chakra-space-3) + #{$adjustment})#{if($important, ' !important', '')}; +@mixin InfoContainerPadding($property, $adjustment: 0px, $important: false, $invert: false) { + $base-value: if($invert, 'calc(0px - var(--chakra-space-3))', 'var(--chakra-space-3)'); + + #{$property}: calc(#{$base-value} + #{$adjustment})#{if($important, ' !important', '')}; @media screen and (min-width: $breakpoint-md) { - #{$property}: calc(var(--chakra-space-4) + #{$adjustment})#{if($important, ' !important', '')}; + $base-value: if($invert, 'calc(0px - var(--chakra-space-4))', 'var(--chakra-space-4)'); + #{$property}: calc(#{$base-value} + #{$adjustment})#{if($important, ' !important', '')}; } @media screen and (min-width: $breakpoint-lg) { - #{$property}: calc(var(--chakra-space-5) + #{$adjustment})#{if($important, ' !important', '')}; + $base-value: if($invert, 'calc(0px - var(--chakra-space-5))', 'var(--chakra-space-5)'); + #{$property}: calc(#{$base-value} + #{$adjustment})#{if($important, ' !important', '')}; } @media screen and (min-width: $breakpoint-xl) { - #{$property}: calc(var(--chakra-space-6) + #{$adjustment})#{if($important, ' !important', '')}; + $base-value: if($invert, 'calc(0px - var(--chakra-space-6))', 'var(--chakra-space-6)'); + #{$property}: calc(#{$base-value} + #{$adjustment})#{if($important, ' !important', '')}; } } @mixin navContainerPadding ($property) { - #{$property}: var(--chakra-space-8); + #{$property}: var(--chakra-space-3); @media screen and (min-width: $breakpoint-md) { #{$property}: var(--chakra-space-4); @@ -335,19 +340,23 @@ } } -@mixin pageDataPadding ($property) { - #{$property}: var(--chakra-space-4); +@mixin pageDataPadding($property, $important: false, $invert: false) { + $base-value: if($invert, 'calc(0px - var(--chakra-space-3))', 'var(--chakra-space-3)'); + #{$property}: #{$base-value}#{if($important, ' !important', '')}; @media screen and (min-width: $breakpoint-md) { - #{$property}: var(--chakra-space-4); + $base-value: if($invert, 'calc(0px - var(--chakra-space-4))', 'var(--chakra-space-4)'); + #{$property}: #{$base-value}#{if($important, ' !important', '')}; } @media screen and (min-width: $breakpoint-lg) { - #{$property}: var(--chakra-space-6); + $base-value: if($invert, 'calc(0px - var(--chakra-space-6))', 'var(--chakra-space-6)'); + #{$property}: #{$base-value}#{if($important, ' !important', '')}; } @media screen and (min-width: $breakpoint-xl) { - #{$property}: var(--chakra-space-8); + $base-value: if($invert, 'calc(0px - var(--chakra-space-8))', 'var(--chakra-space-8)'); + #{$property}: #{$base-value}#{if($important, ' !important', '')}; } } From e7300344a14a33910654c3a991aabf168da473c3 Mon Sep 17 00:00:00 2001 From: Alexey Date: Tue, 10 Dec 2024 18:39:48 +0300 Subject: [PATCH 39/80] Update PageDataContainer styles --- .../components/ui/containers/PageDataContainer.js | 4 +++- .../ui/containers/PageDataContainer.scss | 15 +++++++++++---- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/packages/frontend/src/components/ui/containers/PageDataContainer.js b/packages/frontend/src/components/ui/containers/PageDataContainer.js index d974793c7..b52751161 100644 --- a/packages/frontend/src/components/ui/containers/PageDataContainer.js +++ b/packages/frontend/src/components/ui/containers/PageDataContainer.js @@ -21,7 +21,9 @@ function PageDataContainer ({ className, title, backLink, children }) { {title &&
{title}
}
-
{children}
+
+
{children}
+
) diff --git a/packages/frontend/src/components/ui/containers/PageDataContainer.scss b/packages/frontend/src/components/ui/containers/PageDataContainer.scss index 835d2b0ce..3843164d6 100644 --- a/packages/frontend/src/components/ui/containers/PageDataContainer.scss +++ b/packages/frontend/src/components/ui/containers/PageDataContainer.scss @@ -33,8 +33,8 @@ $borderRadius: 20px; overflow: hidden; border-radius: 0 0 $borderRadius $borderRadius; background: var(--chakra-colors-gray-675); - @include mixins.pageDataPadding(padding-left); - @include mixins.pageDataPadding(padding-right); + @include mixins.pageDataPadding(padding-left, true); + @include mixins.pageDataPadding(padding-right, true); } &__BackLink { @@ -73,8 +73,8 @@ $borderRadius: 20px; @media screen and (max-width: $breakpoint-lg) { &__Content { - @include mixins.pageDataPadding(padding-top); - @include mixins.pageDataPadding(padding-bottom); + @include mixins.pageDataPadding(padding-top, true); + @include mixins.pageDataPadding(padding-bottom, true); border-radius: $borderRadius; } @@ -86,4 +86,11 @@ $borderRadius: 20px; } } } + + @media screen and (max-width: 420px) { + &__ContentContainer { + @include mixins.pageDataPadding(margin-right, true, true); + @include mixins.pageDataPadding(margin-left, true, true); + } + } } From b1857b74bb660cd030fd0c38be48e73f8241f583 Mon Sep 17 00:00:00 2001 From: Alexey Date: Tue, 10 Dec 2024 18:40:33 +0300 Subject: [PATCH 40/80] Add scroll to PublicKeysList for small resolution --- .../components/publicKeys/PublicKeysList.js | 60 ++++++++++--------- .../components/publicKeys/PublicKeysList.scss | 7 ++- 2 files changed, 37 insertions(+), 30 deletions(-) diff --git a/packages/frontend/src/components/publicKeys/PublicKeysList.js b/packages/frontend/src/components/publicKeys/PublicKeysList.js index 6ca1485f1..faa4b6110 100644 --- a/packages/frontend/src/components/publicKeys/PublicKeysList.js +++ b/packages/frontend/src/components/publicKeys/PublicKeysList.js @@ -8,37 +8,39 @@ import './PublicKeyBoundCard.scss' function PublicKeysList ({ publicKeys = [], className }) { return (
- - - Key Id - - - Public Key Hash - - - Type - - - Purpose - - - Security Level - - - Read only - - - Data - - +
+ + + Key Id + + + Public Key Hash + + + Type + + + Purpose + + + Security Level + + + Read only + + + Data + + - {publicKeys?.length > 0 && - publicKeys.map((publicKey, i) => ) - } + {publicKeys?.length > 0 && + publicKeys.map((publicKey, i) => ) + } - {publicKeys?.length === 0 && - There are no public keys - } + {publicKeys?.length === 0 && + There are no public keys + } +
) } diff --git a/packages/frontend/src/components/publicKeys/PublicKeysList.scss b/packages/frontend/src/components/publicKeys/PublicKeysList.scss index c4e40337a..f05de5067 100644 --- a/packages/frontend/src/components/publicKeys/PublicKeysList.scss +++ b/packages/frontend/src/components/publicKeys/PublicKeysList.scss @@ -4,6 +4,11 @@ .PublicKeysList { container-type: inline-size; + overflow-x: scroll; + + &__ScrollZone { + width: fit-content; + } &__ColumnTitles { @include mixins.defListTitles; @@ -13,4 +18,4 @@ &__ColumnTitle { @include pk.Column(); } -} \ No newline at end of file +} From 1a34a9a397f8cb22daf55396fe38ffab561bbd30 Mon Sep 17 00:00:00 2001 From: Alexey Date: Wed, 11 Dec 2024 13:57:25 +0300 Subject: [PATCH 41/80] Add ChevronIcon to show more buttons --- .../app/identity/[identifier]/AliasesList.js | 21 +++++++++------ .../identity/[identifier]/AliasesList.scss | 4 +++ .../src/app/identity/[identifier]/Identity.js | 6 +++-- .../[identifier]/IdentityTotalCard.scss | 27 +++++++++++++++++++ .../frontend/src/components/ui/icons/index.js | 6 ++--- 5 files changed, 50 insertions(+), 14 deletions(-) diff --git a/packages/frontend/src/app/identity/[identifier]/AliasesList.js b/packages/frontend/src/app/identity/[identifier]/AliasesList.js index 162d8dca5..40643950a 100644 --- a/packages/frontend/src/app/identity/[identifier]/AliasesList.js +++ b/packages/frontend/src/app/identity/[identifier]/AliasesList.js @@ -1,6 +1,7 @@ import { useState } from 'react' import { Alias, DateBlock } from '../../../components/data' import { Button } from '@chakra-ui/react' +import { ChevronIcon } from '../../../components/ui/icons' import './AliasesList.scss' function AliasesList ({ aliases = [], smallCount = 5 }) { @@ -20,14 +21,18 @@ function AliasesList ({ aliases = [], smallCount = 5 }) {
))}
- + + {aliases.length > smallCount && + + } ) } diff --git a/packages/frontend/src/app/identity/[identifier]/AliasesList.scss b/packages/frontend/src/app/identity/[identifier]/AliasesList.scss index b44fd2c0e..9570aa422 100644 --- a/packages/frontend/src/app/identity/[identifier]/AliasesList.scss +++ b/packages/frontend/src/app/identity/[identifier]/AliasesList.scss @@ -20,5 +20,9 @@ width: max-content; font-weight: 500 !important; text-transform: capitalize !important; + + svg { + transition: .2s; + } } } \ No newline at end of file diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.js b/packages/frontend/src/app/identity/[identifier]/Identity.js index 23f2649bc..fdeb81bdd 100644 --- a/packages/frontend/src/app/identity/[identifier]/Identity.js +++ b/packages/frontend/src/app/identity/[identifier]/Identity.js @@ -31,6 +31,7 @@ import './Identity.scss' import './IdentityTotalCard.scss' import ImageGenerator from '../../../components/imageGenerator' import { HorisontalSeparator } from '../../../components/ui/separators' +import { ChevronIcon } from '../../../components/ui/icons' const tabs = [ 'transactions', @@ -177,6 +178,7 @@ function Identity ({ identifier }) {
} loading={identity.loading} @@ -226,7 +229,6 @@ function Identity ({ identifier }) { loading={identity.loading} error={identity.error || (!identity.loading && identity.data?.aliases === undefined)} /> - setShowPublicKeys(prev => !prev)} > {identity.data?.publicKeys?.length !== undefined ? identity.data?.publicKeys?.length : ''} public keys + )} loading={identity.loading} error={identity.error || (!identity.loading && identity.data?.publicKeys === undefined)} />
-
diff --git a/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss b/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss index 7ff816faa..44fb60528 100644 --- a/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss +++ b/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss @@ -60,6 +60,10 @@ width: max-content; font-weight: 500 !important; text-transform: capitalize !important; + + svg { + transition: .2s; + } } &__PublicKeysList { @@ -79,14 +83,37 @@ } } + + @media screen and (min-width: $breakpoint-md) and (max-width: $breakpoint-lg), + screen and (max-width: $breakpoint-sm) { + &__InfoLine { + &--Identifier, &--Balance { + flex-direction: column; + align-items: flex-start; + + .InfoLine__Value { + text-align: left; + } + } + } + } + @media screen and (max-width: $breakpoint-md) { &__ContentContainer { flex-direction: column; } + &__Column { + position: static; + } + &__Column { width: 100%; } + + &__InfoLine { + flex-wrap: wrap; + } } @media screen and (max-width: $breakpoint-sm) { diff --git a/packages/frontend/src/components/ui/icons/index.js b/packages/frontend/src/components/ui/icons/index.js index c44642eb5..02d55a095 100644 --- a/packages/frontend/src/components/ui/icons/index.js +++ b/packages/frontend/src/components/ui/icons/index.js @@ -29,10 +29,8 @@ const CloseIcon = (props) => ( ) const ChevronIcon = (props) => ( - - - - + + ) From b15a418d1608fcaabb58362a7c80be15a783f483 Mon Sep 17 00:00:00 2001 From: Alexey Date: Wed, 11 Dec 2024 18:43:02 +0300 Subject: [PATCH 42/80] Create a Smooth Size container to smoothly animate the size of child elements --- .../components/ui/containers/SmoothSize.js | 31 +++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 packages/frontend/src/components/ui/containers/SmoothSize.js diff --git a/packages/frontend/src/components/ui/containers/SmoothSize.js b/packages/frontend/src/components/ui/containers/SmoothSize.js new file mode 100644 index 000000000..d19acb378 --- /dev/null +++ b/packages/frontend/src/components/ui/containers/SmoothSize.js @@ -0,0 +1,31 @@ +import { useState, useEffect, useRef } from 'react' + +const SmoothSize = ({ className, children, duration = 0.3, smoothHeight = true, smoothWidth = false, easing = 'ease' }) => { + const containerRef = useRef(null) + const [dimensions, setDimensions] = useState({ width: 0, height: 0 }) + + useEffect(() => { + if (containerRef.current) { + const { scrollWidth, scrollHeight } = containerRef.current + setDimensions({ width: scrollWidth, height: scrollHeight }) + } + }, [children]) + + return ( +
+
+ {children} +
+
+ ) +} + +export default SmoothSize From 48614b7c0775b21f29a18115165e282c0f225730 Mon Sep 17 00:00:00 2001 From: Alexey Date: Wed, 11 Dec 2024 18:43:28 +0300 Subject: [PATCH 43/80] Implement SmoothSize container to index.js container file --- packages/frontend/src/components/ui/containers/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/frontend/src/components/ui/containers/index.js b/packages/frontend/src/components/ui/containers/index.js index 963a36fb3..bcb414dcd 100644 --- a/packages/frontend/src/components/ui/containers/index.js +++ b/packages/frontend/src/components/ui/containers/index.js @@ -1,9 +1,11 @@ import ValueContainer from './ValueContainer' import PageDataContainer from './PageDataContainer' import InfoContainer from './InfoContainer' +import SmoothSize from './SmoothSize' export { ValueContainer, PageDataContainer, - InfoContainer + InfoContainer, + SmoothSize } From 872a278750dec7886721cdf13a60a72a6682ee9d Mon Sep 17 00:00:00 2001 From: Alexey Date: Wed, 11 Dec 2024 18:45:03 +0300 Subject: [PATCH 44/80] Create smooth animation of PublicKeysList on Identity page --- .../src/app/identity/[identifier]/Identity.js | 23 +++++++++++-------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.js b/packages/frontend/src/app/identity/[identifier]/Identity.js index fdeb81bdd..63d4bb1f0 100644 --- a/packages/frontend/src/app/identity/[identifier]/Identity.js +++ b/packages/frontend/src/app/identity/[identifier]/Identity.js @@ -26,7 +26,7 @@ import { } from '@chakra-ui/react' // import BlocksChart from '../../validator/[hash]/BlocksChart' import { PublicKeysList } from '../../../components/publicKeys' -import { InfoContainer, PageDataContainer, ValueContainer } from '../../../components/ui/containers' +import { InfoContainer, PageDataContainer, ValueContainer, SmoothSize } from '../../../components/ui/containers' import './Identity.scss' import './IdentityTotalCard.scss' import ImageGenerator from '../../../components/imageGenerator' @@ -43,20 +43,19 @@ const tabs = [ const defaultTabName = 'transactions' function Identity ({ identifier }) { + const router = useRouter() + const pathname = usePathname() + const searchParams = useSearchParams() const [identity, setIdentity] = useState({ data: {}, loading: true, error: false }) const [dataContracts, setDataContracts] = useState({ data: {}, loading: true, error: false }) const [documents, setDocuments] = useState({ data: {}, loading: true, error: false }) const [transactions, setTransactions] = useState({ data: {}, loading: true, error: false }) const [transfers, setTransfers] = useState({ data: {}, loading: true, error: false }) const [rate, setRate] = useState({ data: {}, loading: true, error: false }) + const activeAlias = findActiveAlias(identity.data.aliases) const [activeTab, setActiveTab] = useState(tabs.indexOf(defaultTabName.toLowerCase()) !== -1 ? tabs.indexOf(defaultTabName.toLowerCase()) : 0) const [showPublicKeys, setShowPublicKeys] = useState(false) - const router = useRouter() - const pathname = usePathname() - const searchParams = useSearchParams() - const activeAlias = findActiveAlias(identity.data.aliases) - console.log('identity', identity) if (!identity.data?.publicKeys) { @@ -253,10 +252,14 @@ function Identity ({ identifier }) {
- - {showPublicKeys && identity.data?.publicKeys?.length > 0 && - - } + + {showPublicKeys && identity.data?.publicKeys?.length > 0 && + + } + From 195ced26475ea3b4f58171419ebf585b14a2ab49 Mon Sep 17 00:00:00 2001 From: Alexey Date: Wed, 11 Dec 2024 19:09:07 +0300 Subject: [PATCH 45/80] Improve PublicKeysList show/hide animation --- .../frontend/src/app/identity/[identifier]/Identity.js | 6 +++--- .../src/app/identity/[identifier]/IdentityTotalCard.scss | 9 +++++++++ .../frontend/src/components/ui/containers/SmoothSize.js | 1 + 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.js b/packages/frontend/src/app/identity/[identifier]/Identity.js index 63d4bb1f0..9dc5604e0 100644 --- a/packages/frontend/src/app/identity/[identifier]/Identity.js +++ b/packages/frontend/src/app/identity/[identifier]/Identity.js @@ -252,10 +252,10 @@ function Identity ({ identifier }) { - - {showPublicKeys && identity.data?.publicKeys?.length > 0 && + + {identity.data?.publicKeys?.length > 0 && } diff --git a/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss b/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss index 44fb60528..e8650458f 100644 --- a/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss +++ b/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss @@ -67,7 +67,16 @@ } &__PublicKeysList { + position: absolute; + width: 100%; + top: 0; + opacity: 0; + transition: opacity .3s; + &--Show { + position: relative; + opacity: 1; + } } @media screen and (max-width: $breakpoint-lg) { diff --git a/packages/frontend/src/components/ui/containers/SmoothSize.js b/packages/frontend/src/components/ui/containers/SmoothSize.js index d19acb378..bedccca2c 100644 --- a/packages/frontend/src/components/ui/containers/SmoothSize.js +++ b/packages/frontend/src/components/ui/containers/SmoothSize.js @@ -15,6 +15,7 @@ const SmoothSize = ({ className, children, duration = 0.3, smoothHeight = true,
Date: Wed, 11 Dec 2024 19:12:03 +0300 Subject: [PATCH 46/80] Fix AliasesList size animation --- .../app/identity/[identifier]/AliasesList.js | 19 +++++++++++-------- .../components/ui/containers/SmoothSize.js | 2 +- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/packages/frontend/src/app/identity/[identifier]/AliasesList.js b/packages/frontend/src/app/identity/[identifier]/AliasesList.js index 40643950a..baa6cad83 100644 --- a/packages/frontend/src/app/identity/[identifier]/AliasesList.js +++ b/packages/frontend/src/app/identity/[identifier]/AliasesList.js @@ -2,6 +2,7 @@ import { useState } from 'react' import { Alias, DateBlock } from '../../../components/data' import { Button } from '@chakra-ui/react' import { ChevronIcon } from '../../../components/ui/icons' +import { SmoothSize } from '../../../components/ui/containers' import './AliasesList.scss' function AliasesList ({ aliases = [], smallCount = 5 }) { @@ -13,14 +14,16 @@ function AliasesList ({ aliases = [], smallCount = 5 }) { return (
-
- {filteredArray?.map((alias, i) => ( -
- {alias.alias} - -
- ))} -
+ +
+ {filteredArray?.map((alias, i) => ( +
+ {alias.alias} + +
+ ))} +
+ {aliases.length > smallCount && - )} + )} loading={identity.loading} error={identity.error || (!identity.loading && identity.data?.publicKeys === undefined)} /> +
@@ -252,14 +268,11 @@ function Identity ({ identifier }) { - - {identity.data?.publicKeys?.length > 0 && - - } - + diff --git a/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss b/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss index e8650458f..b2fd0b203 100644 --- a/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss +++ b/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss @@ -79,6 +79,12 @@ } } + &__PublicKeysListContainer { + &--Mobile { + display: none !important; + } + } + @media screen and (max-width: $breakpoint-lg) { &__InfoLine { &--Names { @@ -123,6 +129,16 @@ &__InfoLine { flex-wrap: wrap; } + + &__PublicKeysListContainer { + &--Mobile { + display: block !important; + } + + &--Desktop { + display: none !important; + } + } } @media screen and (max-width: $breakpoint-sm) { From 4bff8831a4c6180581741bdc3bf46b61e2b36c71 Mon Sep 17 00:00:00 2001 From: Alexey Date: Wed, 11 Dec 2024 20:30:12 +0300 Subject: [PATCH 48/80] Implement it to PublicKeysList --- .../components/publicKeys/PublicKeysList.scss | 3 +- .../src/components/total/TotalInfo.scss | 29 ++----------------- packages/frontend/src/styles/mixins.scss | 26 ++++++++++++++++- packages/frontend/src/styles/variables.scss | 4 ++- 4 files changed, 32 insertions(+), 30 deletions(-) diff --git a/packages/frontend/src/components/publicKeys/PublicKeysList.scss b/packages/frontend/src/components/publicKeys/PublicKeysList.scss index f05de5067..f4536111f 100644 --- a/packages/frontend/src/components/publicKeys/PublicKeysList.scss +++ b/packages/frontend/src/components/publicKeys/PublicKeysList.scss @@ -3,8 +3,9 @@ @import '../../styles/variables.scss'; .PublicKeysList { - container-type: inline-size; + @include mixins.BrandScroll(); overflow-x: scroll; + container-type: inline-size; &__ScrollZone { width: fit-content; diff --git a/packages/frontend/src/components/total/TotalInfo.scss b/packages/frontend/src/components/total/TotalInfo.scss index 4bf790a84..1b3fa6972 100644 --- a/packages/frontend/src/components/total/TotalInfo.scss +++ b/packages/frontend/src/components/total/TotalInfo.scss @@ -1,13 +1,8 @@ @use '../../styles/mixins.scss'; @import '../../styles/variables.scss'; -$scrollColor: $color-brand-shaded; -$scrollBackgroundColor: rgba(0, 0, 0, .3); - .TotalInfo { - scroll-behavior: smooth; - scrollbar-width: thin; - scrollbar-color: $scrollColor $scrollBackgroundColor; + @include mixins.BrandScroll(); &__ContentContainer { margin: 0 auto; @@ -23,28 +18,8 @@ $scrollBackgroundColor: rgba(0, 0, 0, .3); } } - &::-webkit-scrollbar { - height: 8px; - border-radius: 10px; - } - - &::-webkit-scrollbar-thumb { - background-color: $scrollColor; - border-radius: 10px; - } - - &::-webkit-scrollbar-track { - background-color: $scrollBackgroundColor; - border-radius: 10px; - } - - @supports (scrollbar-width: thin) { - scrollbar-width: thin; - scrollbar-color: $scrollColor $scrollBackgroundColor; - } - @media screen and (max-width: $breakpoint-lg) { - overflow-y: scroll; + overflow-y: auto; padding-bottom: 4px; &__ContentContainer { diff --git a/packages/frontend/src/styles/mixins.scss b/packages/frontend/src/styles/mixins.scss index ddc6b00bf..46f981480 100644 --- a/packages/frontend/src/styles/mixins.scss +++ b/packages/frontend/src/styles/mixins.scss @@ -424,4 +424,28 @@ margin-bottom: 0; } } -} \ No newline at end of file +} + +@mixin BrandScroll () { + scroll-behavior: smooth; + scrollbar-width: thin; + scrollbar-color: $scrollColor $scrollBackgroundColor; + + &::-webkit-scrollbar { + height: 2px; + width: 2px; + } + + &::-webkit-scrollbar-thumb { + background-color: $scrollColor; + } + + &::-webkit-scrollbar-track { + background-color: $scrollBackgroundColor; + } + + @supports (scrollbar-width: thin) { + scrollbar-width: thin; + scrollbar-color: $scrollColor $scrollBackgroundColor; + } +} diff --git a/packages/frontend/src/styles/variables.scss b/packages/frontend/src/styles/variables.scss index 202857b6e..791051ad8 100644 --- a/packages/frontend/src/styles/variables.scss +++ b/packages/frontend/src/styles/variables.scss @@ -18,4 +18,6 @@ $color-brand-pressed: var(--chakra-colors-brand-pressed); $transition-time-def: .15s; -$blockBackgroundBlur: blur(44px) \ No newline at end of file + +$scrollColor: $color-brand-normal; +$scrollBackgroundColor: rgba(255, 255, 255, .05); From 250b58ef469a9aeb9bd80f534784d3171e37de67 Mon Sep 17 00:00:00 2001 From: Alexey Date: Wed, 11 Dec 2024 21:00:13 +0300 Subject: [PATCH 49/80] Restore scss variable --- packages/frontend/src/styles/variables.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/frontend/src/styles/variables.scss b/packages/frontend/src/styles/variables.scss index 791051ad8..21e1e02d9 100644 --- a/packages/frontend/src/styles/variables.scss +++ b/packages/frontend/src/styles/variables.scss @@ -18,6 +18,7 @@ $color-brand-pressed: var(--chakra-colors-brand-pressed); $transition-time-def: .15s; +$blockBackgroundBlur: blur(44px); $scrollColor: $color-brand-normal; $scrollBackgroundColor: rgba(255, 255, 255, .05); From 88c8d7e648e2ea3e245ef50925250fe2db20bee1 Mon Sep 17 00:00:00 2001 From: Alexey Date: Wed, 11 Dec 2024 21:15:48 +0300 Subject: [PATCH 50/80] Implement breadcrumbs on specific Identity and Transaction pages --- .../src/app/identity/[identifier]/Identity.js | 12 +++++++++++- .../src/app/transaction/[hash]/TransactionPage.js | 10 ++++++++++ .../frontend/src/components/layout/navbar/Navbar.js | 6 +++++- 3 files changed, 26 insertions(+), 2 deletions(-) diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.js b/packages/frontend/src/app/identity/[identifier]/Identity.js index 9491d6b99..c14f65427 100644 --- a/packages/frontend/src/app/identity/[identifier]/Identity.js +++ b/packages/frontend/src/app/identity/[identifier]/Identity.js @@ -17,6 +17,7 @@ import { usePathname, useRouter, useSearchParams } from 'next/navigation' import { Alias, InfoLine, CreditsBlock, Identifier, DateBlock } from '../../../components/data' import IdentityDigestCard from './IdentityDigestCard' import AliasesList from './AliasesList' +import { useBreadcrumbs } from '../../../contexts/BreadcrumbsContext' // import { RateTooltip } from '../../../components/ui/Tooltips' import { // Box, @@ -57,6 +58,7 @@ function Identity ({ identifier }) { const router = useRouter() const pathname = usePathname() const searchParams = useSearchParams() + const { setBreadcrumbs } = useBreadcrumbs() const [identity, setIdentity] = useState({ data: {}, loading: true, error: false }) const [dataContracts, setDataContracts] = useState({ data: {}, loading: true, error: false }) const [documents, setDocuments] = useState({ data: {}, loading: true, error: false }) @@ -67,6 +69,14 @@ function Identity ({ identifier }) { const [activeTab, setActiveTab] = useState(tabs.indexOf(defaultTabName.toLowerCase()) !== -1 ? tabs.indexOf(defaultTabName.toLowerCase()) : 0) const [showPublicKeys, setShowPublicKeys] = useState(false) + useEffect(() => { + setBreadcrumbs([ + { label: 'Home', path: '/' }, + { label: 'Identities', path: '/identities' }, + { label: identifier, avatar: true } + ]) + }, [setBreadcrumbs, identifier]) + console.log('identity', identity) if (!identity.data?.publicKeys) { @@ -162,7 +172,7 @@ function Identity ({ identifier }) { return (
diff --git a/packages/frontend/src/app/transaction/[hash]/TransactionPage.js b/packages/frontend/src/app/transaction/[hash]/TransactionPage.js index aa6bedbbd..a7de0c3e2 100644 --- a/packages/frontend/src/app/transaction/[hash]/TransactionPage.js +++ b/packages/frontend/src/app/transaction/[hash]/TransactionPage.js @@ -14,9 +14,11 @@ import { Badge } from '@chakra-ui/react' import { TypeBadge, FeeMultiplier } from '../../../components/transactions' import { ErrorMessageBlock } from '../../../components/Errors' import { networks } from '../../../constants/networks' +import { useBreadcrumbs } from '../../../contexts/BreadcrumbsContext' import './TransactionPage.scss' function Transaction ({ hash }) { + const { setBreadcrumbs } = useBreadcrumbs() const [transaction, setTransaction] = useState({ data: {}, loading: true, error: false }) const [rate, setRate] = useState({ data: {}, loading: true, error: false }) const [decodedST, setDecodedST] = useState({ data: {}, loading: true, error: false }) @@ -24,6 +26,14 @@ function Transaction ({ hash }) { const activeNetwork = networks.find(network => network.explorerBaseUrl === baseUrl) const l1explorerBaseUrl = activeNetwork?.l1explorerBaseUrl || null + useEffect(() => { + setBreadcrumbs([ + { label: 'Home', path: '/' }, + { label: 'Transactions', path: '/identities' }, + { label: hash } + ]) + }, [setBreadcrumbs, hash]) + const decodeTx = useCallback((tx) => { Api.decodeTx(tx) .then(stateTransition => fetchHandlerSuccess(setDecodedST, stateTransition)) diff --git a/packages/frontend/src/components/layout/navbar/Navbar.js b/packages/frontend/src/components/layout/navbar/Navbar.js index f7a0677a8..fb087ed63 100644 --- a/packages/frontend/src/components/layout/navbar/Navbar.js +++ b/packages/frontend/src/components/layout/navbar/Navbar.js @@ -43,7 +43,11 @@ const NavLink = ({ children, to, isActive, className }) => { function Navbar () { const pathname = usePathname() const { isOpen, onOpen, onClose } = useDisclosure() - const breadcrumbsActiveRoutes = ['/validator/'] + const breadcrumbsActiveRoutes = [ + '/validator/', + '/transaction/', + '/identity/' + ] const displayBreadcrumbs = breadcrumbsActiveRoutes.some(route => pathname.indexOf(route) !== -1) useEffect(onClose, [pathname, onClose]) From 991d0c36a59dfa51ce1161993d0258e99699d292 Mon Sep 17 00:00:00 2001 From: Alexey Date: Wed, 11 Dec 2024 21:24:23 +0300 Subject: [PATCH 51/80] Update AliasesList responsive styles --- .../frontend/src/app/identity/[identifier]/AliasesList.js | 4 ++-- .../frontend/src/app/identity/[identifier]/AliasesList.scss | 5 +++++ .../src/app/identity/[identifier]/IdentityTotalCard.scss | 6 ++++++ 3 files changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/frontend/src/app/identity/[identifier]/AliasesList.js b/packages/frontend/src/app/identity/[identifier]/AliasesList.js index baa6cad83..2c6250ab2 100644 --- a/packages/frontend/src/app/identity/[identifier]/AliasesList.js +++ b/packages/frontend/src/app/identity/[identifier]/AliasesList.js @@ -14,11 +14,11 @@ function AliasesList ({ aliases = [], smallCount = 5 }) { return (
- +
{filteredArray?.map((alias, i) => (
- {alias.alias} + {alias.alias}
))} diff --git a/packages/frontend/src/app/identity/[identifier]/AliasesList.scss b/packages/frontend/src/app/identity/[identifier]/AliasesList.scss index 9570aa422..f8784ca80 100644 --- a/packages/frontend/src/app/identity/[identifier]/AliasesList.scss +++ b/packages/frontend/src/app/identity/[identifier]/AliasesList.scss @@ -14,6 +14,7 @@ align-items: center; gap: 0.5rem; justify-content: flex-end; + max-width: 100%; } &__ShowMoreButton { @@ -25,4 +26,8 @@ transition: .2s; } } + + &__SmoothSize { + max-width: 100%; + } } \ No newline at end of file diff --git a/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss b/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss index b2fd0b203..080492219 100644 --- a/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss +++ b/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss @@ -53,6 +53,12 @@ &__InfoLine { &--Names { align-items: baseline; + flex-wrap: wrap; + + .InfoLine__Value { + margin-left: auto; + max-width: 100%; + } } } From 03b3a5fbd6807a79025b06199d0e216795c6355d Mon Sep 17 00:00:00 2001 From: Alexey Date: Wed, 11 Dec 2024 21:58:45 +0300 Subject: [PATCH 52/80] Update locked Alias styles --- .../app/identity/[identifier]/AliasesList.js | 2 +- .../[identifier]/IdentityDigestCard.scss | 29 ++++++++++++++++++- .../frontend/src/components/data/Alias.js | 5 +++- .../frontend/src/components/data/Alias.scss | 16 +++++++++- .../frontend/src/components/ui/icons/index.js | 12 ++++---- 5 files changed, 53 insertions(+), 11 deletions(-) diff --git a/packages/frontend/src/app/identity/[identifier]/AliasesList.js b/packages/frontend/src/app/identity/[identifier]/AliasesList.js index 2c6250ab2..65019236a 100644 --- a/packages/frontend/src/app/identity/[identifier]/AliasesList.js +++ b/packages/frontend/src/app/identity/[identifier]/AliasesList.js @@ -18,7 +18,7 @@ function AliasesList ({ aliases = [], smallCount = 5 }) {
{filteredArray?.map((alias, i) => (
- {alias.alias} + {alias.alias}
))} diff --git a/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.scss b/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.scss index b90c51348..dd3b46962 100644 --- a/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.scss +++ b/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.scss @@ -4,9 +4,9 @@ .IdentityDigestCard { @include mixins.InfoContainerPadding(padding, 0px, false); flex-direction: column; - background: rgba(var(--chakra-colors-gray-800-rgb), .5); border-radius: $border-radius-def; + container-type: inline-size; &, &__Transfers, &__LinesContainer { display: flex; @@ -64,6 +64,8 @@ } &__InfoLine { + gap: 4px; + .DateBlock__InfoContainer { justify-content: flex-end; } @@ -90,4 +92,29 @@ } } } + + @container (max-width: 24em) { + &__InfoLine { + flex-direction: column; + align-items: flex-start; + + .InfoLine__Value { + width: 100%; + text-align: left; + + .DateBlock__InfoContainer { + justify-content: flex-start; + } + } + + .CreditsBlock { + display: flex; + flex-wrap: wrap; + + &__Usd { + margin-left: auto; + } + } + } + } } diff --git a/packages/frontend/src/components/data/Alias.js b/packages/frontend/src/components/data/Alias.js index 08a9ad1f2..dc237b806 100644 --- a/packages/frontend/src/components/data/Alias.js +++ b/packages/frontend/src/components/data/Alias.js @@ -1,5 +1,6 @@ -import './Alias.scss' import { Tooltip } from '../ui/Tooltips' +import { ErrorIcon } from '../ui/icons' +import './Alias.scss' export default function Alias ({ alias, status, children, ellipsis = true, className }) { alias = alias || children @@ -29,6 +30,8 @@ export default function Alias ({ alias, status, children, ellipsis = true, class {alias?.slice(dashIndex)} } + + {status === 'locked' && }
) diff --git a/packages/frontend/src/components/data/Alias.scss b/packages/frontend/src/components/data/Alias.scss index af3170b14..9f96c7e82 100644 --- a/packages/frontend/src/components/data/Alias.scss +++ b/packages/frontend/src/components/data/Alias.scss @@ -15,9 +15,23 @@ &--Locked { color: var(--chakra-colors-red-default); + text-decoration: line-through + } + + &--Locked & { + &__Domain { + opacity: 1; + } } &__Domain { opacity: .5; } -} \ No newline at end of file + + &__LockedIcon { + display: inline-block; + width: 18px !important; + height: 18px !important; + margin-left: 8px; + } +} diff --git a/packages/frontend/src/components/ui/icons/index.js b/packages/frontend/src/components/ui/icons/index.js index 02d55a095..8b3606bff 100644 --- a/packages/frontend/src/components/ui/icons/index.js +++ b/packages/frontend/src/components/ui/icons/index.js @@ -59,12 +59,10 @@ const SuccessIcon = (props) => ( ) const ErrorIcon = (props) => ( - - - - - - + + + + ) @@ -92,7 +90,7 @@ const BroadcastedIcon = (props) => ( - + ) From 0aedf76da11e262954616a7f037f454a6a2d457a Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 12 Dec 2024 12:30:22 +0300 Subject: [PATCH 53/80] Implement brand scroll to tabs list in InfoContainer --- .../frontend/src/components/ui/containers/InfoContainer.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/frontend/src/components/ui/containers/InfoContainer.scss b/packages/frontend/src/components/ui/containers/InfoContainer.scss index 07f534437..af9e4059f 100644 --- a/packages/frontend/src/components/ui/containers/InfoContainer.scss +++ b/packages/frontend/src/components/ui/containers/InfoContainer.scss @@ -44,6 +44,7 @@ } .chakra-tabs__tablist { + @include mixins.BrandScroll; @include mixins.InfoContainerPadding(padding-left, -8px, true); @include mixins.InfoContainerPadding(padding-right, -8px, true); overflow-y: hidden; From eed2128b1309071f1172560aab966ab5ab80759e Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 12 Dec 2024 13:18:23 +0300 Subject: [PATCH 54/80] Stylize Tabs on Identity page --- .../src/app/identity/[identifier]/Identity.js | 28 ++++++++++++++--- .../frontend/src/styles/components/Tabs.scss | 30 +++++++++++++++++++ packages/frontend/src/styles/theme.js | 1 + packages/frontend/src/styles/theme.scss | 1 + 4 files changed, 56 insertions(+), 4 deletions(-) create mode 100644 packages/frontend/src/styles/components/Tabs.scss diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.js b/packages/frontend/src/app/identity/[identifier]/Identity.js index c14f65427..39ef0d473 100644 --- a/packages/frontend/src/app/identity/[identifier]/Identity.js +++ b/packages/frontend/src/app/identity/[identifier]/Identity.js @@ -78,6 +78,8 @@ function Identity ({ identifier }) { }, [setBreadcrumbs, identifier]) console.log('identity', identity) + console.log('documents', documents) + console.log('dataContracts', dataContracts) if (!identity.data?.publicKeys) { identity.data.publicKeys = [ @@ -288,10 +290,28 @@ function Identity ({ identifier }) { setActiveTab(index)} index={activeTab}> - Transactions {identity.data?.totalTxs !== undefined ? `(${identity.data.totalTxs})` : ''} - Data contracts {identity.data?.totalDataContracts !== undefined ? `(${identity.data.totalDataContracts})` : ''} - Documents {identity.data?.totalDocuments !== undefined ? `(${identity.data.totalDocuments})` : ''} - Credit Transfers {identity.data?.totalTransfers !== undefined ? `(${identity.data.totalTransfers})` : ''} + Transactions {identity.data?.totalTxs !== undefined + ? + {identity.data.totalTxs} + + : ''} + + Data contracts {identity.data?.totalDataContracts !== undefined + ? + {identity.data.totalDataContracts} + + : ''} + + Documents {identity.data?.totalDocuments !== undefined + ? + {identity.data.totalDocuments} + + : ''} + + Credit Transfers {identity.data?.totalTransfers !== undefined + ? {identity.data.totalTransfers} + : ''} + diff --git a/packages/frontend/src/styles/components/Tabs.scss b/packages/frontend/src/styles/components/Tabs.scss new file mode 100644 index 000000000..4758b4b60 --- /dev/null +++ b/packages/frontend/src/styles/components/Tabs.scss @@ -0,0 +1,30 @@ +@import './../variables.scss'; + +.Tabs { + &__TabItemsCount { + display: inline-block; + padding: 6px 12px; + color: $color-brand-normal; + background: rgba(var(--chakra-colors-brand-normal-rgb), .2); + margin-left: 12px; + border-radius: 10px; + font-weight: 500; + margin-top: -4px; + margin-bottom: -2px; + transition: all $transition-time-def; + + &--Empty { + opacity: .3; + } + + .chakra-tabs__tab[aria-selected="true"] & { + background: rgba(var(--chakra-colors-brand-normal-rgb), .2); + color: $color-brand-normal; + } + + .chakra-tabs__tab[aria-selected="false"] & { + color: var(--chakra-colors-gray-250); + background-color: rgba(var(--chakra-colors-gray-250-rgb), .2); + } + } +} diff --git a/packages/frontend/src/styles/theme.js b/packages/frontend/src/styles/theme.js index d05b9ff3d..d8ff76662 100644 --- a/packages/frontend/src/styles/theme.js +++ b/packages/frontend/src/styles/theme.js @@ -132,6 +132,7 @@ export const theme = extendTheme({ 100: '#e0e3e5', 200: '#c6cacd', 250: '#93aab2', + '250-rgb': '147, 170, 178', 300: '#acb1b4', 400: '#94999c', 500: '#7b7f83', diff --git a/packages/frontend/src/styles/theme.scss b/packages/frontend/src/styles/theme.scss index effe112ea..dbb611398 100644 --- a/packages/frontend/src/styles/theme.scss +++ b/packages/frontend/src/styles/theme.scss @@ -1,6 +1,7 @@ @import 'components/Table.scss'; @import 'components/InfoBlock.scss'; @import 'components/TabsChart.scss'; +@import 'components/Tabs.scss'; @import './variables.scss'; * { From d915509d430189485250864e91a78e73a17298d3 Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 12 Dec 2024 13:23:29 +0300 Subject: [PATCH 55/80] Update Tabs responsive styles --- packages/frontend/src/styles/components/Tabs.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/frontend/src/styles/components/Tabs.scss b/packages/frontend/src/styles/components/Tabs.scss index 4758b4b60..c3b5dbe9a 100644 --- a/packages/frontend/src/styles/components/Tabs.scss +++ b/packages/frontend/src/styles/components/Tabs.scss @@ -27,4 +27,16 @@ background-color: rgba(var(--chakra-colors-gray-250-rgb), .2); } } + + @media screen and (max-width: $breakpoint-lg) { + &__TabItemsCount { + padding: 4px 12px; + } + } + + @media screen and (max-width: $breakpoint-sm) { + &__TabItemsCount { + padding: 2px 8px; + } + } } From 1148c8dcc10eb5b1a7eba2dc724e5e86601c9077 Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 12 Dec 2024 13:47:52 +0300 Subject: [PATCH 56/80] Update InfoLine offsets and fix ValidatorPage layout --- .../src/app/validator/[hash]/ValidatorPage.scss | 13 ++++++++++++- packages/frontend/src/components/data/InfoLine.scss | 2 +- .../src/components/validators/ValidatorCard.scss | 2 +- packages/frontend/src/styles/mixins.scss | 6 +----- 4 files changed, 15 insertions(+), 8 deletions(-) diff --git a/packages/frontend/src/app/validator/[hash]/ValidatorPage.scss b/packages/frontend/src/app/validator/[hash]/ValidatorPage.scss index 608174a07..402d57b89 100644 --- a/packages/frontend/src/app/validator/[hash]/ValidatorPage.scss +++ b/packages/frontend/src/app/validator/[hash]/ValidatorPage.scss @@ -129,12 +129,17 @@ } .PageDataContainer__Content { - padding: 0; border-radius: 0; background: transparent; } } + @media screen and (min-width: 421px) and (max-width: $breakpoint-lg) { + .PageDataContainer__Content { + padding: 0 !important; + } + } + @media screen and (min-width: $breakpoint-lg) and (max-width: 1100px) { &__ListPagination { .PageLink { @@ -147,4 +152,10 @@ } } } + + @media screen and (max-width: 420px) { + .PageDataContainer__Content { + padding-bottom: 0 !important; + } + } } \ 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 f38fe3719..8aa2d75d2 100644 --- a/packages/frontend/src/components/data/InfoLine.scss +++ b/packages/frontend/src/components/data/InfoLine.scss @@ -6,12 +6,12 @@ justify-content: space-between; align-items: center; font-family: $font-mono; + gap: 8px; &__Title { font-size: 0.75rem; color: var(--chakra-colors-gray-250); flex-shrink: 0; - margin-right: 8px; } &__Value { diff --git a/packages/frontend/src/components/validators/ValidatorCard.scss b/packages/frontend/src/components/validators/ValidatorCard.scss index b320373e2..0623bc657 100644 --- a/packages/frontend/src/components/validators/ValidatorCard.scss +++ b/packages/frontend/src/components/validators/ValidatorCard.scss @@ -81,9 +81,9 @@ .InfoLine { flex-wrap: wrap; justify-content: start; + gap: 5px; &__Title { - margin-bottom: 5px; width: 100%; } diff --git a/packages/frontend/src/styles/mixins.scss b/packages/frontend/src/styles/mixins.scss index 46f981480..7484cdbbb 100644 --- a/packages/frontend/src/styles/mixins.scss +++ b/packages/frontend/src/styles/mixins.scss @@ -418,11 +418,7 @@ } &__InfoLine { - margin-bottom: 14px; - - &:last-child { - margin-bottom: 0; - } + gap: 14px; } } From 3e7e714ef3440fcf225bbc4f7d2f0a2f7dbd85ab Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 12 Dec 2024 13:48:08 +0300 Subject: [PATCH 57/80] Update IdentityTotalCard loading styles --- .../src/app/identity/[identifier]/IdentityTotalCard.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss b/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss index 080492219..2e5e82163 100644 --- a/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss +++ b/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss @@ -23,7 +23,6 @@ &--Loading & { &__Avatar { - position: absolute !important; @include mixins.LoadingContainer; } } From 2688facf634dcb7622e41066806c4a3f45636971 Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 12 Dec 2024 14:49:20 +0300 Subject: [PATCH 58/80] Update IdentityTotalCard responsive styles --- .../src/app/identity/[identifier]/Identity.js | 16 ++++--- .../[identifier]/IdentityTotalCard.scss | 45 ++++++++++++++----- 2 files changed, 45 insertions(+), 16 deletions(-) diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.js b/packages/frontend/src/app/identity/[identifier]/Identity.js index 39ef0d473..2e30a7289 100644 --- a/packages/frontend/src/app/identity/[identifier]/Identity.js +++ b/packages/frontend/src/app/identity/[identifier]/Identity.js @@ -171,6 +171,8 @@ function Identity ({ identifier }) { console.log('identity', identity) + console.log('showPublicKeys', showPublicKeys) + return (
- + -
+
- : none + : none } loading={identity.loading} error={identity.error || (!identity.loading && identity.data?.aliases === undefined)} @@ -271,7 +273,9 @@ function Identity ({ identifier }) {
@@ -283,7 +287,9 @@ function Identity ({ identifier }) {
diff --git a/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss b/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss index 2e5e82163..d8951509d 100644 --- a/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss +++ b/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss @@ -2,11 +2,12 @@ @import '../../../styles/variables.scss'; .IdentityTotalCard { + $gap: 14px; @include mixins.EntityCard(); @include mixins.InfoContainerPadding(padding, 0px, true); display: flex; flex-direction: column; - gap: 14px; + gap: $gap; &__Title { .Alias__Name, .Alias__Domain { @@ -44,6 +45,12 @@ gap: 40px; } + &__CommonLines { + display: flex; + flex-direction: column; + gap: 24px; + } + &__Column { position: relative; width: 50%; @@ -85,6 +92,12 @@ } &__PublicKeysListContainer { + transition: .3s !important; + + &--Hidden { + margin-top: -$gap !important; + } + &--Mobile { display: none !important; } @@ -119,23 +132,21 @@ } @media screen and (max-width: $breakpoint-md) { + $gap: 12px; + &__ContentContainer { flex-direction: column; } - &__Column { - position: static; - } - - &__Column { - width: 100%; - } - - &__InfoLine { - flex-wrap: wrap; + &__ContentContainer, &__CommonLines { + gap: $gap; } &__PublicKeysListContainer { + &--Hidden { + margin-top: -$gap !important; + } + &--Mobile { display: block !important; } @@ -144,6 +155,18 @@ display: none !important; } } + + &__Column { + position: static; + } + + &__Column { + width: 100%; + } + + &__InfoLine { + flex-wrap: wrap; + } } @media screen and (max-width: $breakpoint-sm) { From c6d0185142f7ddddccae0d3d6b705c3c03579583 Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 12 Dec 2024 15:54:03 +0300 Subject: [PATCH 59/80] Update loading state of IdentityTotalCard --- .../src/app/identity/[identifier]/Identity.js | 6 ++++- .../[identifier]/IdentityDigestCard.js | 2 +- .../[identifier]/IdentityDigestCard.scss | 26 +++++++++++++++++++ .../[identifier]/IdentityTotalCard.scss | 25 ++++++++++++++++++ 4 files changed, 57 insertions(+), 2 deletions(-) diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.js b/packages/frontend/src/app/identity/[identifier]/Identity.js index 2e30a7289..c2f8b8f75 100644 --- a/packages/frontend/src/app/identity/[identifier]/Identity.js +++ b/packages/frontend/src/app/identity/[identifier]/Identity.js @@ -281,7 +281,11 @@ function Identity ({ identifier }) {
- +
+
Total Top-up’s:
diff --git a/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.scss b/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.scss index dd3b46962..c127305e2 100644 --- a/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.scss +++ b/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.scss @@ -8,11 +8,25 @@ border-radius: $border-radius-def; container-type: inline-size; + &--Loading { + .InfoLine__Value { + height: 24px; + } + } + &, &__Transfers, &__LinesContainer { display: flex; gap: 14px; } + &--Loading & { + &__Transfers { + .LoadingLine { + height: 24px; + } + } + } + &__LinesContainer { flex-direction: column; } @@ -73,6 +87,12 @@ @media screen and (min-width: $breakpoint-md) and (max-width: $breakpoint-lg), screen and (max-width: $breakpoint-sm) { + &--Loading { + .InfoLine__Value { + width: 100% !important; + } + } + &__Transfers { flex-direction: column; } @@ -94,6 +114,12 @@ } @container (max-width: 24em) { + &--Loading { + .InfoLine__Value { + width: 100% !important; + } + } + &__InfoLine { flex-direction: column; align-items: flex-start; diff --git a/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss b/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss index d8951509d..9175685dc 100644 --- a/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss +++ b/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss @@ -23,9 +23,21 @@ } &--Loading & { + &__InfoLine { + .InfoLine__Value { + height: 24px; + } + } + &__Avatar { @include mixins.LoadingContainer; } + + &__Header { + .InfoLine__Value { + width: 100% !important; + } + } } &__Header { @@ -131,6 +143,13 @@ } } + @media screen and (min-width: $breakpoint-md) and (max-width: $breakpoint-lg), + screen and (max-width: $breakpoint-md) { + &__InfoLine { + gap: 4px; + } + } + @media screen and (max-width: $breakpoint-md) { $gap: 12px; @@ -167,6 +186,12 @@ &__InfoLine { flex-wrap: wrap; } + + &--Loading { + .InfoLine__Value { + width: 100% !important; + } + } } @media screen and (max-width: $breakpoint-sm) { From ea78796511c45273e23de80daf9f0c2bc7e038b7 Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 12 Dec 2024 16:01:35 +0300 Subject: [PATCH 60/80] Update responsive styles of separator on IdentityTotalCard --- .../frontend/src/app/identity/[identifier]/Identity.js | 4 ++-- .../src/app/identity/[identifier]/IdentityTotalCard.scss | 9 +++++++++ 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.js b/packages/frontend/src/app/identity/[identifier]/Identity.js index c2f8b8f75..11c778215 100644 --- a/packages/frontend/src/app/identity/[identifier]/Identity.js +++ b/packages/frontend/src/app/identity/[identifier]/Identity.js @@ -28,11 +28,11 @@ import { // import BlocksChart from '../../validator/[hash]/BlocksChart' import { PublicKeysList } from '../../../components/publicKeys' import { InfoContainer, PageDataContainer, ValueContainer, SmoothSize } from '../../../components/ui/containers' -import './Identity.scss' -import './IdentityTotalCard.scss' import ImageGenerator from '../../../components/imageGenerator' import { HorisontalSeparator } from '../../../components/ui/separators' import { ChevronIcon } from '../../../components/ui/icons' +import './Identity.scss' +import './IdentityTotalCard.scss' const tabs = [ 'transactions', diff --git a/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss b/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss index 9175685dc..36c81054b 100644 --- a/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss +++ b/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss @@ -115,6 +115,10 @@ } } + &__Separator { + margin: 20px 0; + } + @media screen and (max-width: $breakpoint-lg) { &__InfoLine { &--Names { @@ -153,6 +157,11 @@ @media screen and (max-width: $breakpoint-md) { $gap: 12px; + &__Separator { + @include mixins.InfoContainerPadding(margin-top, 0px, true); + @include mixins.InfoContainerPadding(margin-bottom, 0px, true); + } + &__ContentContainer { flex-direction: column; } From 2601d3988ce4a4dca8e90277e7319f16baabf98f Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 12 Dec 2024 16:08:10 +0300 Subject: [PATCH 61/80] Remove comments --- .../src/app/identity/[identifier]/Identity.js | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.js b/packages/frontend/src/app/identity/[identifier]/Identity.js index 11c778215..d65911c05 100644 --- a/packages/frontend/src/app/identity/[identifier]/Identity.js +++ b/packages/frontend/src/app/identity/[identifier]/Identity.js @@ -2,30 +2,19 @@ import { useState, useEffect } from 'react' import * as Api from '../../../util/Api' -// import Link from 'next/link' import TransactionsList from '../../../components/transactions/TransactionsList' import DocumentsList from '../../../components/documents/DocumentsList' import DataContractsList from '../../../components/dataContracts/DataContractsList' import TransfersList from '../../../components/transfers/TransfersList' import { fetchHandlerSuccess, fetchHandlerError, findActiveAlias } from '../../../util' -// import { LoadingLine, LoadingList } from '../../../components/loading' import { LoadingList } from '../../../components/loading' import { ErrorMessageBlock } from '../../../components/Errors' -// import ImageGenerator from '../../../components/imageGenerator' import { usePathname, useRouter, useSearchParams } from 'next/navigation' -// import { Credits, Alias, InfoLine, Identifier, DateBlock, CreditsBlock } from '../../../components/data' import { Alias, InfoLine, CreditsBlock, Identifier, DateBlock } from '../../../components/data' import IdentityDigestCard from './IdentityDigestCard' import AliasesList from './AliasesList' import { useBreadcrumbs } from '../../../contexts/BreadcrumbsContext' -// import { RateTooltip } from '../../../components/ui/Tooltips' -import { - // Box, - // Container, - // Flex, - Tabs, TabList, TabPanels, Tab, TabPanel, Button -} from '@chakra-ui/react' -// import BlocksChart from '../../validator/[hash]/BlocksChart' +import { Tabs, TabList, TabPanels, Tab, TabPanel, Button } from '@chakra-ui/react' import { PublicKeysList } from '../../../components/publicKeys' import { InfoContainer, PageDataContainer, ValueContainer, SmoothSize } from '../../../components/ui/containers' import ImageGenerator from '../../../components/imageGenerator' From 2e4f4359ceb020f2022c9df5650b8072a1543e14 Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 12 Dec 2024 16:45:32 +0300 Subject: [PATCH 62/80] Update IdentityDigestCard error state render --- .../[identifier]/IdentityDigestCard.js | 20 ++++++++----------- .../[identifier]/IdentityTotalCard.scss | 3 +-- 2 files changed, 9 insertions(+), 14 deletions(-) diff --git a/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.js b/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.js index 78f14d07d..001d6e3a7 100644 --- a/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.js +++ b/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.js @@ -10,10 +10,6 @@ function IdentityDigestCard ({ identity, rate, className }) { const activeNetwork = networks.find(network => network.explorerBaseUrl === baseUrl) const l1explorerBaseUrl = activeNetwork?.l1explorerBaseUrl || null - if (!identity.data?.lastWithdrawal) identity.data.lastWithdrawal = '6AC5EDA942093A9275A2837CFDF2C18CAAD9D922BA211BD5EA5E6333FE904CE7' - if (!identity.data?.lastWithdrawalTime) identity.data.lastWithdrawalTime = '2024-11-21T10:26:04.053Z' - if (!identity.data?.fundingAddress) identity.data.fundingAddress = '=yS9GnnRdzX9W9G9kxihdgB5VovKWbPGjS1' - return (
@@ -37,19 +33,19 @@ function IdentityDigestCard ({ identity, rate, className }) { title={'Funding Address'} value={( - {identity.data.fundingAddress || null} + {identity.data?.fundingAddress || null} )} loading={identity.loading} - // error={} + error={identity.error || (!identity.loading && !identity.data?.fundingAddress)} /> )} loading={identity.loading} - error={identity.error} + error={identity.error || (!identity.loading && !identity.data?.lastWithdrawal)} /> } + value={} loading={identity.loading} - // error={} + error={identity.error || (!identity.loading && identity.data?.totalGasSpent === undefined)} /> } + value={} loading={identity.loading} - // error={} + error={identity.error || (!identity.loading && identity.data?.averageGasSpent === undefined)} />
diff --git a/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss b/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss index 36c81054b..9031fd43d 100644 --- a/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss +++ b/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss @@ -133,8 +133,7 @@ } - @media screen and (min-width: $breakpoint-md) and (max-width: $breakpoint-lg), - screen and (max-width: $breakpoint-sm) { + @media screen and (max-width: $breakpoint-lg) { &__InfoLine { &--Identifier, &--Balance { flex-direction: column; From dd243a7c4095de88558e00da8cee2960fe0594ff Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 12 Dec 2024 16:48:34 +0300 Subject: [PATCH 63/80] Error state on identity page --- .../src/app/identity/[identifier]/Identity.js | 36 ++++++++++++------- 1 file changed, 23 insertions(+), 13 deletions(-) diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.js b/packages/frontend/src/app/identity/[identifier]/Identity.js index d65911c05..7b8d84ddb 100644 --- a/packages/frontend/src/app/identity/[identifier]/Identity.js +++ b/packages/frontend/src/app/identity/[identifier]/Identity.js @@ -54,7 +54,7 @@ function Identity ({ identifier }) { const [transactions, setTransactions] = useState({ data: {}, loading: true, error: false }) const [transfers, setTransfers] = useState({ data: {}, loading: true, error: false }) const [rate, setRate] = useState({ data: {}, loading: true, error: false }) - const activeAlias = findActiveAlias(identity.data.aliases) + const activeAlias = findActiveAlias(identity.data?.aliases) const [activeTab, setActiveTab] = useState(tabs.indexOf(defaultTabName.toLowerCase()) !== -1 ? tabs.indexOf(defaultTabName.toLowerCase()) : 0) const [showPublicKeys, setShowPublicKeys] = useState(false) @@ -70,7 +70,18 @@ function Identity ({ identifier }) { console.log('documents', documents) console.log('dataContracts', dataContracts) - if (!identity.data?.publicKeys) { + // mock // + + if (!identity.error && !identity.data?.lastWithdrawal) identity.data.lastWithdrawal = '6AC5EDA942093A9275A2837CFDF2C18CAAD9D922BA211BD5EA5E6333FE904CE7' + if (!identity.error && !identity.data?.lastWithdrawalTime) identity.data.lastWithdrawalTime = '2024-11-21T10:26:04.053Z' + if (!identity.error && !identity.data?.fundingAddress) identity.data.fundingAddress = '=yS9GnnRdzX9W9G9kxihdgB5VovKWbPGjS1' + if (!identity.error && !identity.data?.totalGasSpent) identity.data.totalGasSpent = 1000000 + if (!identity.error && !identity.data?.averageGasSpent) identity.data.averageGasSpent = 500000 + + if (!identity.data?.publicKeys && identity.data !== null) { + console.log('identity.data', identity.data) + console.log('identity.data.publicKeys', identity.data.publicKeys) + identity.data.publicKeys = [ { contractBounds: { @@ -159,7 +170,6 @@ function Identity ({ identifier }) { }, [activeTab, router, pathname, searchParams]) console.log('identity', identity) - console.log('showPublicKeys', showPublicKeys) return ( @@ -181,7 +191,7 @@ function Identity ({ identifier }) {
{!identity.error ? setActiveTab(index)} index={activeTab}> Transactions {identity.data?.totalTxs !== undefined - ? - {identity.data.totalTxs} + ? + {identity.data?.totalTxs} : ''} Data contracts {identity.data?.totalDataContracts !== undefined - ? - {identity.data.totalDataContracts} + ? + {identity.data?.totalDataContracts} : ''} Documents {identity.data?.totalDocuments !== undefined - ? - {identity.data.totalDocuments} + ? + {identity.data?.totalDocuments} : ''} Credit Transfers {identity.data?.totalTransfers !== undefined - ? {identity.data.totalTransfers} + ? {identity.data?.totalTransfers} : ''} @@ -316,7 +326,7 @@ function Identity ({ identifier }) { {!transactions.error ? !transactions.loading - ? + ? : : } From 18de5c495fbc53f02fe7403828b14a9395e06007 Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 12 Dec 2024 17:51:41 +0300 Subject: [PATCH 64/80] Code architecture optimization --- .../src/app/identity/[identifier]/Identity.js | 271 +++++------------- .../identities}/IdentityDigestCard.js | 8 +- .../identities}/IdentityDigestCard.scss | 4 +- .../identities/IdentityTotalCard.js | 153 ++++++++++ .../identities}/IdentityTotalCard.scss | 4 +- .../src/components/identities/index.js | 6 +- 6 files changed, 233 insertions(+), 213 deletions(-) rename packages/frontend/src/{app/identity/[identifier] => components/identities}/IdentityDigestCard.js (94%) rename packages/frontend/src/{app/identity/[identifier] => components/identities}/IdentityDigestCard.scss (97%) create mode 100644 packages/frontend/src/components/identities/IdentityTotalCard.js rename packages/frontend/src/{app/identity/[identifier] => components/identities}/IdentityTotalCard.scss (97%) diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.js b/packages/frontend/src/app/identity/[identifier]/Identity.js index 7b8d84ddb..96bea6176 100644 --- a/packages/frontend/src/app/identity/[identifier]/Identity.js +++ b/packages/frontend/src/app/identity/[identifier]/Identity.js @@ -10,18 +10,11 @@ import { fetchHandlerSuccess, fetchHandlerError, findActiveAlias } from '../../. import { LoadingList } from '../../../components/loading' import { ErrorMessageBlock } from '../../../components/Errors' import { usePathname, useRouter, useSearchParams } from 'next/navigation' -import { Alias, InfoLine, CreditsBlock, Identifier, DateBlock } from '../../../components/data' -import IdentityDigestCard from './IdentityDigestCard' -import AliasesList from './AliasesList' import { useBreadcrumbs } from '../../../contexts/BreadcrumbsContext' -import { Tabs, TabList, TabPanels, Tab, TabPanel, Button } from '@chakra-ui/react' -import { PublicKeysList } from '../../../components/publicKeys' -import { InfoContainer, PageDataContainer, ValueContainer, SmoothSize } from '../../../components/ui/containers' -import ImageGenerator from '../../../components/imageGenerator' -import { HorisontalSeparator } from '../../../components/ui/separators' -import { ChevronIcon } from '../../../components/ui/icons' +import { Tabs, TabList, TabPanels, Tab, TabPanel } from '@chakra-ui/react' +import { InfoContainer, PageDataContainer } from '../../../components/ui/containers' import './Identity.scss' -import './IdentityTotalCard.scss' +import { IdentityTotalCard } from '../../../components/identities' const tabs = [ 'transactions', @@ -32,17 +25,6 @@ const tabs = [ const defaultTabName = 'transactions' -const PublicKeys = ({ className, show, publicKeys = [] }) => ( - - {publicKeys.length > 0 && - - } - -) - function Identity ({ identifier }) { const router = useRouter() const pathname = usePathname() @@ -54,9 +36,7 @@ function Identity ({ identifier }) { const [transactions, setTransactions] = useState({ data: {}, loading: true, error: false }) const [transfers, setTransfers] = useState({ data: {}, loading: true, error: false }) const [rate, setRate] = useState({ data: {}, loading: true, error: false }) - const activeAlias = findActiveAlias(identity.data?.aliases) const [activeTab, setActiveTab] = useState(tabs.indexOf(defaultTabName.toLowerCase()) !== -1 ? tabs.indexOf(defaultTabName.toLowerCase()) : 0) - const [showPublicKeys, setShowPublicKeys] = useState(false) useEffect(() => { setBreadcrumbs([ @@ -170,7 +150,6 @@ function Identity ({ identifier }) { }, [activeTab, router, pathname, searchParams]) console.log('identity', identity) - console.log('showPublicKeys', showPublicKeys) return ( -
- {activeAlias && -
- {activeAlias.alias} -
- } - -
-
-
-
- {!identity.error - ? - : 'n/a' - } -
-
- - {identity.data?.identifier} - - )} - /> - } - loading={identity.loading} - error={identity.error || !identity.data?.balance} - /> -
-
- - - -
- - } - loading={identity.loading} - error={identity.error || (!identity.loading && !identity.data?.timestamp)} - /> - - : none - } - loading={identity.loading} - error={identity.error || (!identity.loading && identity.data?.aliases === undefined)} - /> - - - )} - loading={identity.loading} - error={identity.error || (!identity.loading && identity.data?.publicKeys === undefined)} - /> - -
-
- -
- -
-
- -
- - - setActiveTab(index)} index={activeTab}> - - Transactions {identity.data?.totalTxs !== undefined - ? - {identity.data?.totalTxs} - - : ''} - - Data contracts {identity.data?.totalDataContracts !== undefined - ? - {identity.data?.totalDataContracts} - - : ''} - - Documents {identity.data?.totalDocuments !== undefined - ? - {identity.data?.totalDocuments} - - : ''} - - Credit Transfers {identity.data?.totalTransfers !== undefined - ? {identity.data?.totalTransfers} - : ''} - - - - - {!transactions.error - ? !transactions.loading - ? - : - : } - - - - {!dataContracts.error - ? !dataContracts.loading - ? - : - : } - - - - {!documents.error - ? !documents.loading - ? - : - : - } - - - - {!transfers.error - ? !transfers.loading - ? - : - : } - - - - + + + + setActiveTab(index)} index={activeTab}> + + Transactions {identity.data?.totalTxs !== undefined + ? + {identity.data?.totalTxs} + + : ''} + + Data contracts {identity.data?.totalDataContracts !== undefined + ? + {identity.data?.totalDataContracts} + + : ''} + + Documents {identity.data?.totalDocuments !== undefined + ? + {identity.data?.totalDocuments} + + : ''} + + Credit Transfers {identity.data?.totalTransfers !== undefined + ? {identity.data?.totalTransfers} + : ''} + + + + + {!transactions.error + ? !transactions.loading + ? + : + : } + + + + {!dataContracts.error + ? !dataContracts.loading + ? + : + : } + + + + {!documents.error + ? !documents.loading + ? + : + : + } + + + + {!transfers.error + ? !transfers.loading + ? + : + : } + + + + ) } diff --git a/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.js b/packages/frontend/src/components/identities/IdentityDigestCard.js similarity index 94% rename from packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.js rename to packages/frontend/src/components/identities/IdentityDigestCard.js index 001d6e3a7..1535c130a 100644 --- a/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.js +++ b/packages/frontend/src/components/identities/IdentityDigestCard.js @@ -1,9 +1,9 @@ import './IdentityDigestCard.scss' -import { CreditsBlock, DateBlock, Identifier, InfoLine } from '../../../components/data' +import { CreditsBlock, DateBlock, Identifier, InfoLine } from '../data' import Link from 'next/link' -import { ValueContainer } from '../../../components/ui/containers' -import { LoadingLine } from '../../../components/loading' -import { networks } from '../../../constants/networks' +import { ValueContainer } from '../ui/containers' +import { LoadingLine } from '../loading' +import { networks } from '../../constants/networks' function IdentityDigestCard ({ identity, rate, className }) { const baseUrl = process.env.NEXT_PUBLIC_BASE_URL diff --git a/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.scss b/packages/frontend/src/components/identities/IdentityDigestCard.scss similarity index 97% rename from packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.scss rename to packages/frontend/src/components/identities/IdentityDigestCard.scss index c127305e2..1c8c5fd05 100644 --- a/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.scss +++ b/packages/frontend/src/components/identities/IdentityDigestCard.scss @@ -1,5 +1,5 @@ -@use '../../../styles/mixins.scss'; -@import '../../../styles/variables.scss'; +@use '../../styles/mixins'; +@import '../../styles/variables'; .IdentityDigestCard { @include mixins.InfoContainerPadding(padding, 0px, false); diff --git a/packages/frontend/src/components/identities/IdentityTotalCard.js b/packages/frontend/src/components/identities/IdentityTotalCard.js new file mode 100644 index 000000000..eb038b18f --- /dev/null +++ b/packages/frontend/src/components/identities/IdentityTotalCard.js @@ -0,0 +1,153 @@ +'use client' + +import { Alias, CreditsBlock, DateBlock, Identifier, InfoLine } from '../data' +import ImageGenerator from '../imageGenerator' +import { HorisontalSeparator } from '../ui/separators' +import AliasesList from '../../app/identity/[identifier]/AliasesList' +import { SmoothSize, ValueContainer } from '../ui/containers' +import { Button } from '@chakra-ui/react' +import { ChevronIcon } from '../ui/icons' +import { IdentityDigestCard } from './index' +import { PublicKeysList } from '../publicKeys' +import { findActiveAlias } from '../../util' +import { useState } from 'react' +import './IdentityTotalCard.scss' + +const PublicKeys = ({ className, show, publicKeys = [] }) => ( + + {publicKeys.length > 0 && + + } + +) + +function IdentityTotalCard ({ identity, rate }) { + const activeAlias = findActiveAlias(identity.data?.aliases) + const [showPublicKeys, setShowPublicKeys] = useState(false) + + return ( +
+ {activeAlias && +
+ {activeAlias.alias} +
+ } + +
+
+
+
+ {!identity.error + ? + : 'n/a' + } +
+
+ + {identity.data?.identifier} + + )} + /> + } + loading={identity.loading} + error={identity.error || !identity.data?.balance} + /> +
+
+ + + +
+ + } + loading={identity.loading} + error={identity.error || (!identity.loading && !identity.data?.timestamp)} + /> + + : none + } + loading={identity.loading} + error={identity.error || (!identity.loading && identity.data?.aliases === undefined)} + /> + + + )} + loading={identity.loading} + error={identity.error || (!identity.loading && identity.data?.publicKeys === undefined)} + /> + +
+
+ +
+ +
+
+ +
+ ) +} + +export default IdentityTotalCard diff --git a/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss b/packages/frontend/src/components/identities/IdentityTotalCard.scss similarity index 97% rename from packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss rename to packages/frontend/src/components/identities/IdentityTotalCard.scss index 9031fd43d..6424a3bd4 100644 --- a/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss +++ b/packages/frontend/src/components/identities/IdentityTotalCard.scss @@ -1,5 +1,5 @@ -@use '../../../styles/mixins.scss'; -@import '../../../styles/variables.scss'; +@use '../../styles/mixins'; +@import '../../styles/variables'; .IdentityTotalCard { $gap: 14px; diff --git a/packages/frontend/src/components/identities/index.js b/packages/frontend/src/components/identities/index.js index 4444607a5..3a95e7859 100644 --- a/packages/frontend/src/components/identities/index.js +++ b/packages/frontend/src/components/identities/index.js @@ -1,10 +1,14 @@ import IdentitiesList from './IdentitiesList' import { IdentitiesCards, IdentityCard } from './Cards' import TopIdentities from './TopIdentities' +import IdentityTotalCard from './IdentityTotalCard' +import IdentityDigestCard from './IdentityDigestCard' export { IdentitiesList, IdentitiesCards, IdentityCard, - TopIdentities + TopIdentities, + IdentityTotalCard, + IdentityDigestCard } From f60fe2faaf9ff48e9f071e387a1fac551635c3f3 Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 12 Dec 2024 17:52:08 +0300 Subject: [PATCH 65/80] Fix linter error --- packages/frontend/src/app/identity/[identifier]/Identity.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.js b/packages/frontend/src/app/identity/[identifier]/Identity.js index 96bea6176..f8c14374c 100644 --- a/packages/frontend/src/app/identity/[identifier]/Identity.js +++ b/packages/frontend/src/app/identity/[identifier]/Identity.js @@ -6,15 +6,15 @@ import TransactionsList from '../../../components/transactions/TransactionsList' import DocumentsList from '../../../components/documents/DocumentsList' import DataContractsList from '../../../components/dataContracts/DataContractsList' import TransfersList from '../../../components/transfers/TransfersList' -import { fetchHandlerSuccess, fetchHandlerError, findActiveAlias } from '../../../util' +import { fetchHandlerSuccess, fetchHandlerError } from '../../../util' import { LoadingList } from '../../../components/loading' import { ErrorMessageBlock } from '../../../components/Errors' import { usePathname, useRouter, useSearchParams } from 'next/navigation' import { useBreadcrumbs } from '../../../contexts/BreadcrumbsContext' import { Tabs, TabList, TabPanels, Tab, TabPanel } from '@chakra-ui/react' import { InfoContainer, PageDataContainer } from '../../../components/ui/containers' -import './Identity.scss' import { IdentityTotalCard } from '../../../components/identities' +import './Identity.scss' const tabs = [ 'transactions', From 1747558d04606a8ed01a461a8d095cb2dd258ee4 Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 12 Dec 2024 17:52:24 +0300 Subject: [PATCH 66/80] Set 'use client' to SmoothSize.js --- packages/frontend/src/components/ui/containers/SmoothSize.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/frontend/src/components/ui/containers/SmoothSize.js b/packages/frontend/src/components/ui/containers/SmoothSize.js index 312f9d474..6d89a65b4 100644 --- a/packages/frontend/src/components/ui/containers/SmoothSize.js +++ b/packages/frontend/src/components/ui/containers/SmoothSize.js @@ -1,3 +1,5 @@ +'use client' + import { useState, useEffect, useRef } from 'react' const SmoothSize = ({ className, children, duration = 0.3, smoothHeight = true, smoothWidth = false, easing = 'ease' }) => { From 3c54f4c48c175503c063bba6ae712c34284f4a9d Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 12 Dec 2024 17:55:37 +0300 Subject: [PATCH 67/80] Fix breadcrumbs key prop warning --- .../src/components/breadcrumbs/Breadcrumbs.js | 17 ++++++++--------- .../src/components/breadcrumbs/Breadcrumbs.scss | 2 ++ 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/packages/frontend/src/components/breadcrumbs/Breadcrumbs.js b/packages/frontend/src/components/breadcrumbs/Breadcrumbs.js index 19b30bd22..43346b82c 100644 --- a/packages/frontend/src/components/breadcrumbs/Breadcrumbs.js +++ b/packages/frontend/src/components/breadcrumbs/Breadcrumbs.js @@ -21,16 +21,15 @@ const Breadcrumbs = () => {
    {breadcrumbs.map((link, i) => ( - <> -
  • - - {link.avatar && - } - {link.label} - -
    • +
  • + + {link.avatar && + } + {link.label} + + {i !== breadcrumbs.length - 1 &&
    } - +
    • ))}
diff --git a/packages/frontend/src/components/breadcrumbs/Breadcrumbs.scss b/packages/frontend/src/components/breadcrumbs/Breadcrumbs.scss index 1e9fce11c..dd8160f1b 100644 --- a/packages/frontend/src/components/breadcrumbs/Breadcrumbs.scss +++ b/packages/frontend/src/components/breadcrumbs/Breadcrumbs.scss @@ -17,6 +17,8 @@ &__Link { margin: 0; + display: flex; + align-items: center; a, span { display: flex; From 04ecd173cd809b028c28ec3d95117d9a19d3ad99 Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 12 Dec 2024 17:58:11 +0300 Subject: [PATCH 68/80] remove debug logs --- .../frontend/src/app/identity/[identifier]/Identity.js | 7 ------- 1 file changed, 7 deletions(-) diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.js b/packages/frontend/src/app/identity/[identifier]/Identity.js index f8c14374c..df0da08e0 100644 --- a/packages/frontend/src/app/identity/[identifier]/Identity.js +++ b/packages/frontend/src/app/identity/[identifier]/Identity.js @@ -59,9 +59,6 @@ function Identity ({ identifier }) { if (!identity.error && !identity.data?.averageGasSpent) identity.data.averageGasSpent = 500000 if (!identity.data?.publicKeys && identity.data !== null) { - console.log('identity.data', identity.data) - console.log('identity.data.publicKeys', identity.data.publicKeys) - identity.data.publicKeys = [ { contractBounds: { @@ -96,8 +93,6 @@ function Identity ({ identifier }) { ] } - // identity.data.publicKeys = [] - const fetchData = () => { Promise.all([ Api.getIdentity(identifier) @@ -149,8 +144,6 @@ function Identity ({ identifier }) { router.push(`${pathname}?${urlParameters.toString()}`, { scroll: false }) }, [activeTab, router, pathname, searchParams]) - console.log('identity', identity) - return ( Date: Thu, 12 Dec 2024 18:09:36 +0300 Subject: [PATCH 69/80] Fix route setting from tabs on Identity page --- .../src/app/identity/[identifier]/Identity.js | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.js b/packages/frontend/src/app/identity/[identifier]/Identity.js index df0da08e0..08f556400 100644 --- a/packages/frontend/src/app/identity/[identifier]/Identity.js +++ b/packages/frontend/src/app/identity/[identifier]/Identity.js @@ -18,9 +18,9 @@ import './Identity.scss' const tabs = [ 'transactions', - 'transfers', + 'datacontracts', 'documents', - 'datacontracts' + 'transfers' ] const defaultTabName = 'transactions' @@ -36,7 +36,10 @@ function Identity ({ identifier }) { const [transactions, setTransactions] = useState({ data: {}, loading: true, error: false }) const [transfers, setTransfers] = useState({ data: {}, loading: true, error: false }) const [rate, setRate] = useState({ data: {}, loading: true, error: false }) - const [activeTab, setActiveTab] = useState(tabs.indexOf(defaultTabName.toLowerCase()) !== -1 ? tabs.indexOf(defaultTabName.toLowerCase()) : 0) + const [activeTab, setActiveTab] = useState(tabs.indexOf(defaultTabName.toLowerCase()) !== -1 + ? tabs.indexOf(defaultTabName.toLowerCase()) + : tabs.indexOf(defaultTabName) + ) useEffect(() => { setBreadcrumbs([ @@ -46,10 +49,6 @@ function Identity ({ identifier }) { ]) }, [setBreadcrumbs, identifier]) - console.log('identity', identity) - console.log('documents', documents) - console.log('dataContracts', dataContracts) - // mock // if (!identity.error && !identity.data?.lastWithdrawal) identity.data.lastWithdrawal = '6AC5EDA942093A9275A2837CFDF2C18CAAD9D922BA211BD5EA5E6333FE904CE7' @@ -123,6 +122,9 @@ function Identity ({ identifier }) { useEffect(() => { const tab = searchParams.get('tab') + console.log('tab from url', tab) + console.log('tab && tabs.indexOf(tab.toLowerCase()) !== -1', tab && tabs.indexOf(tab.toLowerCase()) !== -1) + console.log('tabs.indexOf(tab.toLowerCase())', tabs.indexOf(tab.toLowerCase())) if (tab && tabs.indexOf(tab.toLowerCase()) !== -1) { setActiveTab(tabs.indexOf(tab.toLowerCase())) return @@ -142,7 +144,7 @@ function Identity ({ identifier }) { } router.push(`${pathname}?${urlParameters.toString()}`, { scroll: false }) - }, [activeTab, router, pathname, searchParams]) + }, [activeTab]) return ( - setActiveTab(index)} index={activeTab}> + Transactions {identity.data?.totalTxs !== undefined ? From e35d76a75a0b65a6ea7fa335ac8edc21e0b0674f Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 12 Dec 2024 18:11:54 +0300 Subject: [PATCH 70/80] remove debug log --- packages/frontend/src/app/identity/[identifier]/Identity.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.js b/packages/frontend/src/app/identity/[identifier]/Identity.js index 08f556400..c14d7c0a6 100644 --- a/packages/frontend/src/app/identity/[identifier]/Identity.js +++ b/packages/frontend/src/app/identity/[identifier]/Identity.js @@ -122,9 +122,6 @@ function Identity ({ identifier }) { useEffect(() => { const tab = searchParams.get('tab') - console.log('tab from url', tab) - console.log('tab && tabs.indexOf(tab.toLowerCase()) !== -1', tab && tabs.indexOf(tab.toLowerCase()) !== -1) - console.log('tabs.indexOf(tab.toLowerCase())', tabs.indexOf(tab.toLowerCase())) if (tab && tabs.indexOf(tab.toLowerCase()) !== -1) { setActiveTab(tabs.indexOf(tab.toLowerCase())) return From b8f13fdb766bfdfbdd9fb8d3001e84301adbeb5b Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 12 Dec 2024 19:07:00 +0300 Subject: [PATCH 71/80] Update back icon in PageDataContainer --- .../src/components/ui/containers/PageDataContainer.js | 4 ++-- packages/frontend/src/components/ui/icons/index.js | 7 +++++++ 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/frontend/src/components/ui/containers/PageDataContainer.js b/packages/frontend/src/components/ui/containers/PageDataContainer.js index b52751161..29a3cb3dc 100644 --- a/packages/frontend/src/components/ui/containers/PageDataContainer.js +++ b/packages/frontend/src/components/ui/containers/PageDataContainer.js @@ -1,6 +1,6 @@ import { Container } from '@chakra-ui/react' import Link from 'next/link' -import { ChevronLeftIcon } from '@chakra-ui/icons' +import { ChevronIcon2 } from '../icons' import './PageDataContainer.scss' function PageDataContainer ({ className, title, backLink, children }) { @@ -16,7 +16,7 @@ function PageDataContainer ({ className, title, backLink, children }) {
{backLink && - + } {title &&
{title}
}
diff --git a/packages/frontend/src/components/ui/icons/index.js b/packages/frontend/src/components/ui/icons/index.js index 8b3606bff..694fc997a 100644 --- a/packages/frontend/src/components/ui/icons/index.js +++ b/packages/frontend/src/components/ui/icons/index.js @@ -34,6 +34,12 @@ const ChevronIcon = (props) => ( ) +const ChevronIcon2 = (props) => ( + + + +) + const CircleIcon = (props) => ( @@ -120,5 +126,6 @@ export { BroadcastedIcon, CloseIcon, ChevronIcon, + ChevronIcon2, BigClockIcon } From 223972e3e2b74592af621192576bb2340cc6bd85 Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 12 Dec 2024 19:07:37 +0300 Subject: [PATCH 72/80] Optimization file architecture: AliasesList --- .../[identifier] => components/data}/AliasesList.js | 8 +++++--- .../[identifier] => components/data}/AliasesList.scss | 4 ++-- packages/frontend/src/components/data/index.js | 4 +++- .../src/components/identities/IdentityTotalCard.js | 3 +-- 4 files changed, 11 insertions(+), 8 deletions(-) rename packages/frontend/src/{app/identity/[identifier] => components/data}/AliasesList.js (87%) rename packages/frontend/src/{app/identity/[identifier] => components/data}/AliasesList.scss (85%) diff --git a/packages/frontend/src/app/identity/[identifier]/AliasesList.js b/packages/frontend/src/components/data/AliasesList.js similarity index 87% rename from packages/frontend/src/app/identity/[identifier]/AliasesList.js rename to packages/frontend/src/components/data/AliasesList.js index 65019236a..c848a1a01 100644 --- a/packages/frontend/src/app/identity/[identifier]/AliasesList.js +++ b/packages/frontend/src/components/data/AliasesList.js @@ -1,8 +1,10 @@ +'use client' + import { useState } from 'react' -import { Alias, DateBlock } from '../../../components/data' +import { Alias, DateBlock } from './index' import { Button } from '@chakra-ui/react' -import { ChevronIcon } from '../../../components/ui/icons' -import { SmoothSize } from '../../../components/ui/containers' +import { ChevronIcon } from '../ui/icons' +import { SmoothSize } from '../ui/containers' import './AliasesList.scss' function AliasesList ({ aliases = [], smallCount = 5 }) { diff --git a/packages/frontend/src/app/identity/[identifier]/AliasesList.scss b/packages/frontend/src/components/data/AliasesList.scss similarity index 85% rename from packages/frontend/src/app/identity/[identifier]/AliasesList.scss rename to packages/frontend/src/components/data/AliasesList.scss index f8784ca80..7f0019b1a 100644 --- a/packages/frontend/src/app/identity/[identifier]/AliasesList.scss +++ b/packages/frontend/src/components/data/AliasesList.scss @@ -1,5 +1,5 @@ -@use '../../../styles/mixins.scss'; -@import '../../../styles/variables.scss'; +@use '../../styles/mixins'; +@import '../../styles/variables'; .AliasesList { &, &__ItemsContainer { diff --git a/packages/frontend/src/components/data/index.js b/packages/frontend/src/components/data/index.js index 922d211e4..2e3cce213 100644 --- a/packages/frontend/src/components/data/index.js +++ b/packages/frontend/src/components/data/index.js @@ -6,6 +6,7 @@ import Endpoint from './Endpoint' import IpAddress from './IpAddress' import InfoLine from './InfoLine' import Alias from './Alias' +import AliasesList from './AliasesList' export { Identifier, @@ -15,5 +16,6 @@ export { Endpoint, IpAddress, InfoLine, - Alias + Alias, + AliasesList } diff --git a/packages/frontend/src/components/identities/IdentityTotalCard.js b/packages/frontend/src/components/identities/IdentityTotalCard.js index eb038b18f..9567ff22a 100644 --- a/packages/frontend/src/components/identities/IdentityTotalCard.js +++ b/packages/frontend/src/components/identities/IdentityTotalCard.js @@ -1,9 +1,8 @@ 'use client' -import { Alias, CreditsBlock, DateBlock, Identifier, InfoLine } from '../data' +import { Alias, AliasesList, CreditsBlock, DateBlock, Identifier, InfoLine } from '../data' import ImageGenerator from '../imageGenerator' import { HorisontalSeparator } from '../ui/separators' -import AliasesList from '../../app/identity/[identifier]/AliasesList' import { SmoothSize, ValueContainer } from '../ui/containers' import { Button } from '@chakra-ui/react' import { ChevronIcon } from '../ui/icons' From bf0f9ead4e2f737dbefa7665cfec992055024e5c Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 12 Dec 2024 19:07:48 +0300 Subject: [PATCH 73/80] Update DigestCard --- .../frontend/src/components/identities/IdentityDigestCard.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/frontend/src/components/identities/IdentityDigestCard.js b/packages/frontend/src/components/identities/IdentityDigestCard.js index 1535c130a..89b578419 100644 --- a/packages/frontend/src/components/identities/IdentityDigestCard.js +++ b/packages/frontend/src/components/identities/IdentityDigestCard.js @@ -1,9 +1,9 @@ -import './IdentityDigestCard.scss' import { CreditsBlock, DateBlock, Identifier, InfoLine } from '../data' import Link from 'next/link' import { ValueContainer } from '../ui/containers' import { LoadingLine } from '../loading' import { networks } from '../../constants/networks' +import './IdentityDigestCard.scss' function IdentityDigestCard ({ identity, rate, className }) { const baseUrl = process.env.NEXT_PUBLIC_BASE_URL From fdea8be07d89e509ad239e006c9ef052935479a8 Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 12 Dec 2024 19:08:57 +0300 Subject: [PATCH 74/80] Update chevron icon in PageDataContainer --- .../frontend/src/components/ui/containers/PageDataContainer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/frontend/src/components/ui/containers/PageDataContainer.js b/packages/frontend/src/components/ui/containers/PageDataContainer.js index 29a3cb3dc..a38d9378d 100644 --- a/packages/frontend/src/components/ui/containers/PageDataContainer.js +++ b/packages/frontend/src/components/ui/containers/PageDataContainer.js @@ -16,7 +16,7 @@ function PageDataContainer ({ className, title, backLink, children }) {
{backLink && - + } {title &&
{title}
}
From 65c8ab8ca415e0718f50eb34aecf98cc095e9bee Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 12 Dec 2024 19:11:50 +0300 Subject: [PATCH 75/80] Update useEffect dependencies --- packages/frontend/src/app/identity/[identifier]/Identity.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.js b/packages/frontend/src/app/identity/[identifier]/Identity.js index c14d7c0a6..998e931b4 100644 --- a/packages/frontend/src/app/identity/[identifier]/Identity.js +++ b/packages/frontend/src/app/identity/[identifier]/Identity.js @@ -141,7 +141,7 @@ function Identity ({ identifier }) { } router.push(`${pathname}?${urlParameters.toString()}`, { scroll: false }) - }, [activeTab]) + }, [activeTab, router, pathname]) return ( Date: Thu, 12 Dec 2024 19:12:39 +0300 Subject: [PATCH 76/80] Remove comments --- .../app/identity/[identifier]/Identity.scss | 35 ------------------- 1 file changed, 35 deletions(-) diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.scss b/packages/frontend/src/app/identity/[identifier]/Identity.scss index 8436c39c7..b4b03bb89 100644 --- a/packages/frontend/src/app/identity/[identifier]/Identity.scss +++ b/packages/frontend/src/app/identity/[identifier]/Identity.scss @@ -11,38 +11,3 @@ margin-left: auto; } } - -//.IdentityInfo { -// height: min-content; -// -// &__Avatar { -// margin-left: auto; -// width: 32px; -// height: 32px; -// } -// -// &__AliasesContainer { -// max-height: 110px; -// min-height: 21px; -// height: 100%; -// overflow-y: auto; -// } -//} -// -//.IdentityData { -// &__Tabs { -// flex-wrap: wrap; -// } -// -// @media screen and (max-width: 530px) { -// &__Tab { -// width: 50%; -// } -// } -// -// @media screen and (max-width: 320px) { -// &__Tab { -// width: 100%; -// } -// } -//} \ No newline at end of file From 5f2d4ce4a899605dbc142a5e80f1ebf853b7366c Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 12 Dec 2024 19:13:33 +0300 Subject: [PATCH 77/80] ValueCard code style --- packages/frontend/src/components/cards/ValueCard.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/frontend/src/components/cards/ValueCard.js b/packages/frontend/src/components/cards/ValueCard.js index b73bb9d5b..469d75f6a 100644 --- a/packages/frontend/src/components/cards/ValueCard.js +++ b/packages/frontend/src/components/cards/ValueCard.js @@ -19,9 +19,7 @@ export default function ValueCard ({ link, loading, colorScheme = 'default', siz } let extraClass = '' - if (link) extraClass += 'ValueCard--Clickable' - extraClass += ' ' + colorClasses?.[colorScheme] || colorClasses.default extraClass += ' ' + sizeClasses?.[size] || sizeClasses.default From 23037897bd7c50729568599d75eb833c02d1aa7e Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 12 Dec 2024 19:14:41 +0300 Subject: [PATCH 78/80] Remove unused code in styles --- .../src/components/identities/IdentityDigestCard.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/frontend/src/components/identities/IdentityDigestCard.scss b/packages/frontend/src/components/identities/IdentityDigestCard.scss index 1c8c5fd05..1ab5da09e 100644 --- a/packages/frontend/src/components/identities/IdentityDigestCard.scss +++ b/packages/frontend/src/components/identities/IdentityDigestCard.scss @@ -50,10 +50,6 @@ } } - &--TupUp { - - } - &--Withdrawals { .CreditsBlock__Usd { background-color: rgba(var(--chakra-colors-red-default-rgb), .2); From 882ccbbc2c2ffbe37325bb280eba02657e98dd3d Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 12 Dec 2024 19:16:33 +0300 Subject: [PATCH 79/80] Remove comments from styles --- .../components/validators/ValidatorCard.scss | 39 ------------------- 1 file changed, 39 deletions(-) diff --git a/packages/frontend/src/components/validators/ValidatorCard.scss b/packages/frontend/src/components/validators/ValidatorCard.scss index 0623bc657..522836e33 100644 --- a/packages/frontend/src/components/validators/ValidatorCard.scss +++ b/packages/frontend/src/components/validators/ValidatorCard.scss @@ -8,14 +8,6 @@ display: flex; width: 100%; align-items: center; - - //.InfoLine { - // margin-bottom: 20px; - // - // &:last-child { - // margin-bottom: 0; - // } - //} } .InfoLine--Loading .InfoLine { @@ -31,29 +23,6 @@ } } - //&__Avatar { - // display: flex; - // align-items: center; - // justify-content: center; - // font-family: $font-mono; - // font-size: 0.75rem; - // color: var(--chakra-colors-gray-500); - // width: 88px; - // height: 88px; - // border: 1px solid rgba(137, 126, 126, 0.1); - // flex-shrink: 0; - // margin-right: 24px; - //} - - //&__HeaderLines { - // display: flex; - // flex-direction: column; - // justify-content: space-between; - // width: 100%; - // padding: 6px 0; - // overflow: hidden; - //} - &__Separator { margin: 12px 0; } @@ -62,14 +31,6 @@ font-size: 0.813rem; } - //&__InfoLine { - // margin-bottom: 14px; - // - // &:last-child { - // margin-bottom: 0; - // } - //} - &__ProTxHash { .Identifier__SymbolsContainer { max-width: 232px; From 50c76fbee47be80cd8f11d1d110fed14b75d9f08 Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 12 Dec 2024 19:24:57 +0300 Subject: [PATCH 80/80] Theme.js code optimization --- packages/frontend/src/styles/theme.js | 41 ++------------------------- 1 file changed, 2 insertions(+), 39 deletions(-) diff --git a/packages/frontend/src/styles/theme.js b/packages/frontend/src/styles/theme.js index d8ff76662..1da2eba95 100644 --- a/packages/frontend/src/styles/theme.js +++ b/packages/frontend/src/styles/theme.js @@ -48,25 +48,6 @@ const badgeColors = { } } -const badgeBackgroundColors = { - red: '#4E3234', - green: '#2B4629', - gray: 'gray.600', - blue: 'rgba(0, 141, 228, 0.2)', - yellow: 'rgba(244, 228, 88, 0.2)', - orange: 'rgba(244, 154, 88, 0.2)', - emerald: 'rgba(88, 244, 188, 0.2)' -} -const badgeTextColor = { - red: '#F45858', - green: '#81F458', - gray: 'gray.50', - blue: 'rgb(0, 141, 228)', - yellow: '#F4E458', - orange: 'rgb(244, 154, 88)', - emerald: 'rgb(88, 244, 188)' -} - export const theme = extendTheme({ config: { useSystemColorMode: false, @@ -311,24 +292,6 @@ export const theme = extendTheme({ Badge: { baseStyle: props => { const { colorScheme } = props - // const backgroundColors = { - // red: '#4E3234', - // green: '#2B4629', - // gray: 'gray.600', - // blue: 'rgba(0, 141, 228, 0.2)', - // yellow: 'rgba(244, 228, 88, 0.2)', - // orange: 'rgba(244, 154, 88, 0.2)', - // emerald: 'rgba(88, 244, 188, 0.2)' - // } - // const textColor = { - // red: '#F45858', - // green: '#81F458', - // gray: 'gray.50', - // blue: 'rgb(0, 141, 228)', - // yellow: '#F4E458', - // orange: 'rgb(244, 154, 88)', - // emerald: 'rgb(88, 244, 188)' - // } return { borderWidth: '0px', @@ -340,8 +303,8 @@ export const theme = extendTheme({ display: 'inline-flex', alignItems: 'center', lineHeight: '20px', - bg: badgeBackgroundColors[colorScheme] || 'gray.500', - color: badgeTextColor[colorScheme] || 'white' + bg: badgeColors[colorScheme].bg || 'gray.500', + color: badgeColors[colorScheme].text || 'white' } } },