diff --git a/src/components/table/Table.module.sass b/src/components/table/Table.module.sass
index fe1c808..72b265b 100644
--- a/src/components/table/Table.module.sass
+++ b/src/components/table/Table.module.sass
@@ -27,6 +27,16 @@ $zero_margin: 0
.DfCol
width: 100%
+.RowTitle
+ font-size: $font_normal
+
+.RowTitleBold
+ font-weight: 600
+
+@media ( max-width: $max_mobile_width )
+ .RowTitle
+ font-size: 15px
+
.RowValue
display: flex
flex-direction: column
diff --git a/src/components/table/balancesTable/parseData/parseBalanceInfo.tsx b/src/components/table/balancesTable/parseData/parseBalanceInfo.tsx
index 5e4f666..a7203b4 100644
--- a/src/components/table/balancesTable/parseData/parseBalanceInfo.tsx
+++ b/src/components/table/balancesTable/parseData/parseBalanceInfo.tsx
@@ -47,16 +47,22 @@ const getAccountData = (info: AccountInfoByChain, t: TFunction) => {
key: 'locked',
label: t('table.balances.locked'),
value: lockedBalance?.toString() || '0',
+ tooltipText:
+ 'Tokens that are locked, and cannot be transferred to another account. One token can be locked by multiple things at the same time, such as governance and staking.',
},
{
key: 'reserved',
label: t('table.balances.reserved'),
value: reservedBalance?.toString() || '0',
+ tooltipText:
+ 'Tokens that are reserved by one specific thing, such as setting an on-chain identity, and cannot be transferred to another account.',
},
{
key: 'free',
label: t('table.balances.free'),
value: freeBalance,
+ tooltipText:
+ 'Tokens that are not reserved or locked, and can be transferred to another account.',
},
]
}
@@ -269,8 +275,7 @@ export const parseBalancesTableInfo = ({
totalTokensValue = totalTokensValue.plus(totalValue)
return {
- key: symbol,
- chain: <>>,
+ key: `detailed-balances-${symbol}`,
balance: {balance} ,
price,
balanceValue: balanceValue,
@@ -286,7 +291,7 @@ export const parseBalancesTableInfo = ({
const { decimal } = getDecimalsAndSymbol(chainInfo, nativeSymbol)
const accountDataArray: BalancesTableInfo[] = accountData.map(
- ({ key, label, value }: any) => {
+ ({ key, label, value, tooltipText }: any) => {
const valueWithDecimal = getBalanceWithDecimals({
totalBalance: value,
decimals: decimal,
@@ -302,7 +307,7 @@ export const parseBalancesTableInfo = ({
const chain = (
{label}
@@ -315,9 +320,10 @@ export const parseBalancesTableInfo = ({
key,
chain: (
{chain}
@@ -391,7 +397,13 @@ export const parseBalancesTableInfo = ({
}
const chainValue = (
-
{isMulti ?
{chain}
: chain}
+
+ {isMulti ? (
+
{chain}
+ ) : (
+ chain
+ )}
+
)
return {
@@ -410,7 +422,9 @@ export const parseBalancesTableInfo = ({
balanceWithoutChildren: getBalancePart(false),
balanceValue,
balanceView: getBalancePart(true),
- links: isMulti ? [] : (
+ links: isMulti ? (
+ []
+ ) : (
),
- showLinks: (isShow: boolean) => (
- !isMulti &&
- ),
+ showLinks: (isShow: boolean) =>
+ !isMulti && (
+
+ ),
transferAction: !isMulti && (
{chain} : chain,
+ chain: isMulti ? (
+ {chain}
+ ) : (
+ chain
+ ),
balance: getBalancePart(balance, true),
price: !isMulti ? priceView : <>>,
total: totalView,
@@ -452,7 +456,6 @@ function getChildrenBalances ({
tokenId,
priceValue,
loading,
- isMobile,
onTransferClick,
t,
}: GetChildrenBalanceParams) {
@@ -498,7 +501,7 @@ function getChildrenBalances ({
childrenBalances.children = [ ...accountData.reverse() ]
- const hideIcon = isMulti && isMobile
+ const hideIcon = isMulti
const chain = (
{chain} ,
+ chain: (
+ {chain}
+ ),
balance: getBalancePart(balance, true),
price: <>>,
total: ,
@@ -588,16 +593,22 @@ function getAccountDataValues ({ t, ...info }: GetAccountDataValuesParams) {
key: 'locked',
label: t('table.balances.locked'),
value: lockedBalance?.toString() || '0',
+ tooltipText:
+ 'Tokens that are locked, and cannot be transferred to another account. One token can be locked by multiple things at the same time, such as governance and staking.',
},
{
key: 'reserved',
label: t('table.balances.reserved'),
value: reservedBalance?.toString() || '0',
+ tooltipText:
+ 'Tokens that are reserved by one specific thing, such as setting an on-chain identity, and cannot be transferred to another account.',
},
{
key: 'free',
label: t('table.balances.free'),
value: freeBalance,
+ tooltipText:
+ 'Tokens that are locked, and cannot be transferred to another account. One token can be locked by multiple things at the same time, such as governance and staking.',
},
]
}
@@ -624,7 +635,7 @@ function getAccountDataRows ({
...accountDataValuesParams,
})
- return accountDataValues.map(({ key, label, value }: any) => {
+ return accountDataValues.map(({ key, label, tooltipText, value }: any) => {
const valueWithDecimal = getBalanceWithDecimals({
totalBalance: value,
decimals: decimal,
@@ -639,7 +650,7 @@ function getAccountDataRows ({
const chain = (
-
+
{label}
@@ -647,12 +658,13 @@ function getAccountDataRows ({
)
return {
- key,
+ key: `detailed-balances-${key}`,
chain: (
{chain}
diff --git a/src/components/table/balancesTable/utils/index.tsx b/src/components/table/balancesTable/utils/index.tsx
index aa03166..c348472 100644
--- a/src/components/table/balancesTable/utils/index.tsx
+++ b/src/components/table/balancesTable/utils/index.tsx
@@ -292,7 +292,7 @@ export const PnlInDollars = ({
return (
{
return (
= {
isLastElement?: boolean
}
-const offsetByIndex = [0, 13, 63]
+const offsetByIndex = [ 0, 13, 63 ]
-const collapseIconOffset = [ 0, 12, 10]
+const collapseIconOffset = [ 0, 12, 10 ]
const BalancesSectionCard = ({
value,
isLastElement,
}: BalancesSectionCardProps) => {
- const [open, setOpen] = useState(false)
+ const [ open, setOpen ] = useState(false)
const balanceInfoRef = React.useRef(null)
const prices = usePrices()
const level = 0
@@ -183,7 +183,7 @@ const InnerChildrenBalances = ({
isLastElement,
level,
}: InnerCildrenBalancesProps) => {
- const [open, setOpen] = useState(false)
+ const [ open, setOpen ] = useState(false)
const { balancesVariant } = useTableContext()
const {
@@ -191,6 +191,7 @@ const InnerChildrenBalances = ({
chain,
balanceValue,
totalValue,
+ symbol,
showLinks,
children: innerChildren,
} = value
@@ -213,22 +214,28 @@ const InnerChildrenBalances = ({
let childrenOffset = leftOffset + offsetByIndex[level]
- if (['reserved', 'locked', 'free'].includes(key)) {
+ const isDetailedBalances = key.includes('detailed-balances')
+
+ if (isDetailedBalances) {
const chainCentricOffset = isMulti ? 62 : 11
const tokenCentricOffset = isMulti ? 31 : 63
childrenOffset =
- leftOffset + (balancesVariant === 'tokens' ? tokenCentricOffset : chainCentricOffset)
+ leftOffset +
+ (balancesVariant === 'tokens' ? tokenCentricOffset : chainCentricOffset)
}
return (
-
+
setOpen(!open)}>
-
+
{haveChildren && (
({
key={key}
ref={childrenRowContentRef}
className={styles.ChildrenRowContent}
- onClick={() => setOpen(!open)}
>
- {chain}
+
+ {chain || symbol}
+
{tokenBalance}
${balanceInDollats}
diff --git a/src/components/table/types.ts b/src/components/table/types.ts
index 42da49c..5d582d2 100644
--- a/src/components/table/types.ts
+++ b/src/components/table/types.ts
@@ -40,7 +40,7 @@ export type CommonTableInfo = {
icon: string | JSX.Element
key: string
- chain: React.ReactNode
+ chain?: React.ReactNode
balance: React.ReactNode
balanceValue: BN
diff --git a/src/components/table/utils.tsx b/src/components/table/utils.tsx
index 2eea0e5..845dd7e 100644
--- a/src/components/table/utils.tsx
+++ b/src/components/table/utils.tsx
@@ -68,9 +68,9 @@ const { TabPane } = Tabs
export type TableKind = 'balances' | 'crowdloans' | 'assets'
-export const relayChains: RelayChain[] = ['kusama', 'polkadot']
+export const relayChains: RelayChain[] = [ 'kusama', 'polkadot' ]
-export const disableContributionButton = ['acala']
+export const disableContributionButton = [ 'acala' ]
export const tailsViewOpt: TableViewOption[] = [
{ label:
, value: 'table' },
@@ -317,11 +317,11 @@ export const BalancePart =
({
useEffect(() => {
store.set(storeTableView, tableView)
- }, [tableView])
+ }, [ tableView ])
useEffect(() => {
store.set(storeShowZeroBalance, showZeroBalances)
- }, [showZeroBalances])
+ }, [ showZeroBalances ])
if (!data || !skeleton) return
@@ -491,8 +491,8 @@ export const ChainData = ({
{name && (
{name}
@@ -790,7 +790,7 @@ export const AccountPreview = ({
nameClassName,
identityLoadNotRequired,
}: AccountPreviewProps) => {
- useFetchIdentities([account], identityLoadNotRequired)
+ useFetchIdentities([ account ], identityLoadNotRequired)
const identities = useIdentities(account)
const address = (
@@ -830,10 +830,10 @@ export const AccountPreview = ({
/>
)}
-
+
{withName && accountName}
- {withAddress &&
{address}
}
+ {withAddress &&
{address}
}