diff --git a/frontend/src/components/atoms/nav-item/index.tsx b/frontend/src/components/atoms/nav-item/index.tsx index fafd0000..5307e621 100644 --- a/frontend/src/components/atoms/nav-item/index.tsx +++ b/frontend/src/components/atoms/nav-item/index.tsx @@ -11,11 +11,13 @@ interface INavItemProps extends FlexProps { children: ReactNode path: string highlightMenu: PathRoute + comingSoon?: boolean } export const NavItem: React.FC = ({ icon, path, highlightMenu, + comingSoon, children, ...rest }: INavItemProps) => { @@ -28,6 +30,7 @@ export const NavItem: React.FC = ({ return ( { + if (comingSoon) return if (path === PathRoute.BLOCKCHAIN_EXPLORER) { window.open(`${STELLAR_EXPERT_URL}`, '_blank') return @@ -39,14 +42,13 @@ export const NavItem: React.FC = ({ > = ({ icon={item.icon} path={item.path} highlightMenu={highlightMenu} + comingSoon={item.comingSoon} > {item.name} + {item.comingSoon && ( + + Coming soon + + )} ))} @@ -91,7 +107,7 @@ export const SidebarContent: React.FC = ({ > Administration - + , path: PathRoute.SOROBAN_SMART_CONTRACTS, + comingSoon: true, }, { name: 'Treasury', @@ -89,4 +101,4 @@ export const Sidebar: React.FC = ({ children, highlightMenu }) => { ) -} \ No newline at end of file +} diff --git a/frontend/src/components/templates/dashboards/components/asset-item/index.tsx b/frontend/src/components/templates/dashboards/components/asset-item/index.tsx index 19a61854..f1b5ee71 100644 --- a/frontend/src/components/templates/dashboards/components/asset-item/index.tsx +++ b/frontend/src/components/templates/dashboards/components/asset-item/index.tsx @@ -4,20 +4,19 @@ import React, { Dispatch, SetStateAction } from 'react' import { getCurrencyIcon } from 'utils/constants/constants' import { toCrypto } from 'utils/formatter' -import { ChevronDownIcon } from 'components/icons' - interface IAssetItem { asset: Hooks.UseAssetsTypes.IAssetDto assetSelected: Hooks.UseAssetsTypes.IAssetDto | undefined setAssetSelected: Dispatch< SetStateAction > + onSelectAsset(asset: Hooks.UseAssetsTypes.IAssetDto): void } export const AssetItem: React.FC = ({ asset, assetSelected, - setAssetSelected, + onSelectAsset, }) => { return ( = ({ cursor="pointer" bg={asset.id === assetSelected?.id ? 'primary.normal' : undefined} onClick={(): void => { - setAssetSelected(assetSelected?.id === asset.id ? undefined : asset) + onSelectAsset(asset) }} + _hover={asset.id === assetSelected?.id ? undefined : { bg: 'purple.50' }} > = ({ {toCrypto(Number(asset.assetData?.amount || 0))} - {asset.id === assetSelected?.id ? ( - - - - ) : ( - - )} ) diff --git a/frontend/src/components/templates/dashboards/components/assets-list/index.tsx b/frontend/src/components/templates/dashboards/components/assets-list/index.tsx index 11fbaa32..2b4f54ee 100644 --- a/frontend/src/components/templates/dashboards/components/assets-list/index.tsx +++ b/frontend/src/components/templates/dashboards/components/assets-list/index.tsx @@ -1,15 +1,16 @@ -import { Text, Container, Flex, Box } from '@chakra-ui/react' +import { Text, Container, Flex, Divider } from '@chakra-ui/react' import React, { Dispatch, SetStateAction, useEffect, useState } from 'react' +import { useAssets } from 'hooks/useAssets' import { useDashboards } from 'hooks/useDashboards' import { useHorizon } from 'hooks/useHorizon' import { useVaults } from 'hooks/useVaults' import { formatAccount } from 'utils/formatter' -import { ChevronDownIcon } from 'components/icons' import { AccountsChart } from 'components/molecules/accounts-chart' import { ChartPayments } from 'components/molecules/chart-payments' import { TChartPeriod } from 'components/molecules/chart-period' +import { BalanceChart } from 'components/templates/distribute-asset/components/balance-chart' import { AssetItem } from '../asset-item' import { ChartHolders } from '../chart-holders' @@ -44,6 +45,7 @@ export const AssetsList: React.FC = ({ useDashboards() const { getAssetAccounts } = useHorizon() const { getVaults } = useVaults() + const { getAssetById } = useAssets() useEffect(() => { if (assetSelected) { @@ -116,7 +118,7 @@ export const AssetsList: React.FC = ({ })) setTopHolders(filteredAccounts || []) - const groupedValues = [0, 0, 0, 0, 0] + const groupedValues = [0, 0, 0, 0, 0, 0, 0] const divisorValue = (filteredAccounts ? filteredAccounts[0].amount : 0) / 5 @@ -132,16 +134,20 @@ export const AssetsList: React.FC = ({ balance.asset_issuer === assetSelected.issuer.key.publicKey )?.balance || 0 ) - if (amount < divisorValue) { + if (amount < 1000) { groupedValues[0]++ - } else if (amount < divisorValue * 2) { + } else if (amount >= 1000 && amount < 10000) { groupedValues[1]++ - } else if (amount < divisorValue * 3) { + } else if (amount >= 10000 && amount < 100000) { groupedValues[2]++ - } else if (amount < divisorValue * 4) { + } else if (amount >= 100000 && amount < 1000000) { groupedValues[3]++ - } else { + } else if (amount >= 1000000 && amount < 10000000) { groupedValues[4]++ + } else if (amount >= 10000000 && amount < 100000000) { + groupedValues[5]++ + } else { + groupedValues[6]++ } }) @@ -151,6 +157,10 @@ export const AssetsList: React.FC = ({ } }, [assetSelected, getAssetAccounts, getVaults]) + const onSelectAsset = (asset: Hooks.UseAssetsTypes.IAssetDto): void => { + getAssetById(asset.id.toString()).then(asset => setAssetSelected(asset)) + } + return ( @@ -159,16 +169,18 @@ export const AssetsList: React.FC = ({ variant="primary" w="fit-content" justifyContent="center" - p="0.5rem" + py="0.5rem" + px="1.25rem" mr="0.5rem" cursor="pointer" bg={!assetSelected ? 'primary.normal' : undefined} onClick={(): void => { setAssetSelected(undefined) }} + _hover={!assetSelected?.id ? undefined : { bg: 'purple.50' }} > - + = ({ All assets - {!assetSelected ? ( - - - - ) : ( - - )} } @@ -192,27 +197,24 @@ export const AssetsList: React.FC = ({ asset={asset} assetSelected={assetSelected} setAssetSelected={setAssetSelected} + onSelectAsset={onSelectAsset} /> ))} + {assetSelected && ( - - - - + + + + {paymentsAsset && ( = ({ /> )} - + + + + + + Accounts authorization + = ({ authorizedLabel={'Authorized'} unauthorizedLabel={'Pending authorization'} /> - - - - - {paymentsAsset && ( - - )} - - - + - + - - )} - {supplyAsset && ( - + + + + {paymentsAsset && ( + + )} + + + + + + + + {supplyAsset && ( + + )} + )} ) diff --git a/frontend/src/components/templates/dashboards/components/chart-holders/index.tsx b/frontend/src/components/templates/dashboards/components/chart-holders/index.tsx index f7e247d9..c6b41e06 100644 --- a/frontend/src/components/templates/dashboards/components/chart-holders/index.tsx +++ b/frontend/src/components/templates/dashboards/components/chart-holders/index.tsx @@ -9,18 +9,17 @@ import { import React from 'react' import Chart from 'react-apexcharts' -import { toCrypto } from 'utils/formatter' - interface IChartHolders { loadingChart: boolean groupedValues: number[] groupValue: number + assetCode: string } export const ChartHolders: React.FC = ({ groupedValues, loadingChart, - groupValue, + assetCode, }) => { const { colorMode } = useColorMode() @@ -52,15 +51,17 @@ export const ChartHolders: React.FC = ({ }, dataLabels: { enabled: true, - enabledOnSeries: [1], }, xaxis: { - categories: [1, 2, 3, 4, 5].map( - position => - `${toCrypto(groupValue * (position - 1))} - ${toCrypto( - groupValue * position - )}` - ), + categories: [ + `0 - 1k ${assetCode}`, + `1k - 10k ${assetCode}`, + `10k - 100k ${assetCode}`, + `100k - 1M ${assetCode}`, + `1M - 10M ${assetCode}`, + `10M - 100M ${assetCode}`, + `> 100M ${assetCode}`, + ], labels: { show: true, formatter: function (value: string): string { @@ -72,7 +73,7 @@ export const ChartHolders: React.FC = ({ { labels: { formatter: function (value: number): string { - return `${toCrypto(value)}` + return `${value}` }, }, }, @@ -83,6 +84,7 @@ export const ChartHolders: React.FC = ({ { type: 'column', data: groupedValues, + name: 'Holders', }, ] @@ -97,7 +99,7 @@ export const ChartHolders: React.FC = ({ > - Holders + Holders distribution diff --git a/frontend/src/components/templates/dashboards/components/chart-supply/index.tsx b/frontend/src/components/templates/dashboards/components/chart-supply/index.tsx index 3371dc3d..66f2a1b0 100644 --- a/frontend/src/components/templates/dashboards/components/chart-supply/index.tsx +++ b/frontend/src/components/templates/dashboards/components/chart-supply/index.tsx @@ -104,10 +104,11 @@ export const ChartSupply: React.FC = ({ w="full" maxW="full" mt="1rem" + mb="2rem" > - Payments timeline + Supply diff --git a/frontend/src/components/templates/dashboards/components/top-holders/index.tsx b/frontend/src/components/templates/dashboards/components/top-holders/index.tsx index 2f45c038..b5111f2d 100644 --- a/frontend/src/components/templates/dashboards/components/top-holders/index.tsx +++ b/frontend/src/components/templates/dashboards/components/top-holders/index.tsx @@ -26,25 +26,25 @@ export const TopHolders: React.FC = ({ holders }) => { px={0} w="full" maxW="full" - mt="1rem" + mt="0.5rem" > - + Top holders - +
- - + - {holders?.map((holder, index) => ( - - + {holders?.map(holder => ( + - + ))} diff --git a/frontend/src/components/templates/dashboards/index.tsx b/frontend/src/components/templates/dashboards/index.tsx index 85e3054a..8a06728d 100644 --- a/frontend/src/components/templates/dashboards/index.tsx +++ b/frontend/src/components/templates/dashboards/index.tsx @@ -1,8 +1,6 @@ import { Flex, Text } from '@chakra-ui/react' import React, { Dispatch, SetStateAction, useState } from 'react' -import { MAX_PAGE_WIDTH } from 'utils/constants/sizes' - import { AssetsList } from './components/assets-list' import { ChartPayments } from './components/chart-payments' import { LastPayments } from './components/last-payments' @@ -38,7 +36,7 @@ export const DashboardsTemplate: React.FC = ({ return ( - + Dashboards diff --git a/frontend/src/components/templates/distribute-asset/components/balance-chart/index.tsx b/frontend/src/components/templates/distribute-asset/components/balance-chart/index.tsx index c4369c0d..0c506919 100644 --- a/frontend/src/components/templates/distribute-asset/components/balance-chart/index.tsx +++ b/frontend/src/components/templates/distribute-asset/components/balance-chart/index.tsx @@ -9,16 +9,18 @@ interface IBalanceChart { supply: number mainVault: number assetCode: string + modeClean?: boolean } export const BalanceChart: React.FC = ({ supply, mainVault, assetCode, + modeClean, }) => { return ( = ({ > - Balance in the Main Vault + Balance in the Main Vault - - - + {!modeClean && ( + + + + )} - + {`${toCrypto(mainVault)} ${assetCode}`} /{' '} {`${toCrypto(supply)} ${assetCode}`} = ({ - diff --git a/frontend/src/components/templates/team-members/item-user/index.tsx b/frontend/src/components/templates/team-members/item-user/index.tsx index 9da5b9b2..6001d39e 100644 --- a/frontend/src/components/templates/team-members/item-user/index.tsx +++ b/frontend/src/components/templates/team-members/item-user/index.tsx @@ -50,7 +50,6 @@ export const ItemUser: React.FC = ({ -
HolderAmountAmount
{index + 1}
{holder.name}{toCrypto(holder.amount)} + {toCrypto(holder.amount)} +
ID Member RoleEmail
{user.id} {user.name} {user.role}{user.email} {havePermission(Permissions.EDIT_USERS_ROLE, permissions) && ( diff --git a/frontend/src/config/theme/index.tsx b/frontend/src/config/theme/index.tsx index bd7f5387..ba3a8caf 100644 --- a/frontend/src/config/theme/index.tsx +++ b/frontend/src/config/theme/index.tsx @@ -109,6 +109,7 @@ const theme = extendTheme({ 500: '#E85858', }, purple: { + 50: '#faf5ff', 200: '#F5F2FF', 300: '#9CADCE', 500: '#AA99EC', diff --git a/frontend/src/hooks/useVaults/context.tsx b/frontend/src/hooks/useVaults/context.tsx index 2e5f9318..c187c547 100644 --- a/frontend/src/hooks/useVaults/context.tsx +++ b/frontend/src/hooks/useVaults/context.tsx @@ -243,7 +243,12 @@ export const VaultsProvider: React.FC = ({ children }) => { name: vaults?.find( vault => vault.wallet.key.publicKey === assetAccount.id - )?.name || formatAccount(assetAccount.id), + )?.name || + formatAccount( + assetAccount.id, + assetAccount.id, + asset.distributor.key.publicKey + ), isAuthorized: assetAccount.balances.find( balance => diff --git a/frontend/src/utils/formatter/index.tsx b/frontend/src/utils/formatter/index.tsx index d856fbe5..3e6de074 100644 --- a/frontend/src/utils/formatter/index.tsx +++ b/frontend/src/utils/formatter/index.tsx @@ -60,7 +60,14 @@ export const formatDateFull = (date: string): string => { return formattedDate } -export const formatAccount = (account: string): string => { +export const formatAccount = ( + account: string, + wallet?: string, + distributor?: string +): string => { + if (wallet && distributor && wallet === distributor) { + return 'Main vault' + } return `${account.substring(0, 4)}...${account.substring( account.length - 4, account.length