diff --git a/src/components/table/balancesTable/parseData/parseTokenCentricView.tsx b/src/components/table/balancesTable/parseData/parseTokenCentricView.tsx index 1e52438..a71ed78 100644 --- a/src/components/table/balancesTable/parseData/parseTokenCentricView.tsx +++ b/src/components/table/balancesTable/parseData/parseTokenCentricView.tsx @@ -452,6 +452,7 @@ function getChildrenBalances ({ tokenId, priceValue, loading, + isMobile, onTransferClick, t, }: GetChildrenBalanceParams) { @@ -497,11 +498,14 @@ function getChildrenBalances ({ childrenBalances.children = [ ...accountData.reverse() ] + const hideIcon = isMulti && isMobile + const chain = ( diff --git a/src/components/table/balancesTable/utils/index.tsx b/src/components/table/balancesTable/utils/index.tsx index 6e83bcc..06f3052 100644 --- a/src/components/table/balancesTable/utils/index.tsx +++ b/src/components/table/balancesTable/utils/index.tsx @@ -296,7 +296,6 @@ export const PnlInDollars = ({ title='pnl' className='d-flex align-items-center justify-content-end' > - e.stopPropagation()} @@ -331,7 +330,6 @@ export const PriceChangedOn = ({ symbol, className }: PriceChangesProps) => { title='persentage' className='d-flex align-items-center justify-content-end' > - e.stopPropagation()} diff --git a/src/components/table/customCard/BalancesCard.module.sass b/src/components/table/customCard/BalancesCard.module.sass index 2483609..6b9aba9 100644 --- a/src/components/table/customCard/BalancesCard.module.sass +++ b/src/components/table/customCard/BalancesCard.module.sass @@ -80,7 +80,7 @@ .LinksButton align-self: center - max-width: 40px + max-width: 30px width: 100% display: flex justify-content: flex-end @@ -89,6 +89,9 @@ padding: 3px !important align-items: center display: flex + min-width: 22px !important + height: 22px + width: 22px \:global .anticon vertical-align: 0 !important @@ -186,9 +189,11 @@ color: $color_gray_icon font-size: 18px !important display: flex + justify-content: flex-end + + .InnerCollapseButton + // padding-right: 9px svg justify-self: center margin-top: 5px - margin-left: 6px - width: 100% diff --git a/src/components/table/customCard/BalancesSectionCard.tsx b/src/components/table/customCard/BalancesSectionCard.tsx index d572fbb..a577072 100644 --- a/src/components/table/customCard/BalancesSectionCard.tsx +++ b/src/components/table/customCard/BalancesSectionCard.tsx @@ -20,13 +20,18 @@ type BalancesSectionCardProps = { isLastElement?: boolean } +const offsetByIndex = [0, 13, 63] + +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 const isMulti = useIsMulti() @@ -152,6 +157,7 @@ const BalancesSectionCard = ({ childrenBalances={children as T[]} leftOffset={(balanceInfoRef.current as any)?.offsetLeft} className={clsx(styles.ChildrenBalances)} + level={level + 1} /> {open && haveChildren && ( @@ -168,14 +174,16 @@ type InnerCildrenBalancesProps = { className?: string leftOffset: number isLastElement?: boolean + level: number } const InnerChildrenBalances = ({ value, leftOffset, isLastElement, + level, }: InnerCildrenBalancesProps) => { - const [ open, setOpen ] = useState(false) + const [open, setOpen] = useState(false) const { balancesVariant } = useTableContext() const { @@ -203,9 +211,15 @@ const InnerChildrenBalances = ({ const childrenOffsetLeft = childrenRowContentRef.current?.offsetLeft || 0 - let childrenOffset = [ 'reserved', 'locked', 'free' ].includes(key) - ? leftOffset + (balancesVariant === 'tokens' || isMulti ? 56 : 8) - : leftOffset + 7 + let childrenOffset = leftOffset + offsetByIndex[level] + + if (['reserved', 'locked', 'free'].includes(key)) { + const chainCentricOffset = isMulti ? 62 : 11 + const tokenCentricOffset = isMulti ? 31 : 63 + + childrenOffset = + leftOffset + (balancesVariant === 'tokens' ? tokenCentricOffset : chainCentricOffset) + } return (
@@ -214,13 +228,15 @@ const InnerChildrenBalances = ({ className={styles.CollapseButton} style={{ width: childrenOffset }} > - {haveChildren && ( - - )} +
+ {haveChildren && ( + + )} +
({ childrenBalances={innerChildren as T[]} leftOffset={childrenOffsetLeft} className={clsx(styles.ChildrenBalances)} + level={level + 1} />
{haveChildren && !isLastElement && open && ( @@ -260,12 +277,14 @@ type ChildrenBalancesProps = { childrenBalances: T[] className?: string leftOffset: number + level: number } const ChildrenBalances = ({ childrenBalances, className, leftOffset, + level, }: ChildrenBalancesProps) => { return (
@@ -277,6 +296,7 @@ const ChildrenBalances = ({ leftOffset={leftOffset} className={styles.ChildrenBalances} isLastElement={i === childrenBalances.length - 1} + level={level} /> ) })} diff --git a/src/components/table/utils.tsx b/src/components/table/utils.tsx index dac11c7..58adc91 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 @@ -396,6 +396,7 @@ type ChainProps = { icon: string | JSX.Element name?: string isShortAddress?: boolean + withIcon?: boolean withCopy?: boolean avatarSize?: AvatarSize halfLength?: number @@ -455,6 +456,7 @@ export const ChainData = ({ withCopy = true, halfLength = 6, isMonosizedFont = true, + withIcon = true, withQr = true, isBoldName = true, desc, @@ -478,11 +480,13 @@ export const ChainData = ({ return (
- + {withIcon && ( + + )}
{name && (
{ - useFetchIdentities([ account ], identityLoadNotRequired) + useFetchIdentities([account], identityLoadNotRequired) const identities = useIdentities(account) const address = ( @@ -873,7 +877,7 @@ export const getParentBalances = ( priceValue, balance, total, - totalTokensValueBN + totalTokensValueBN, } }