Fix mobile view for multi account view

dappforce · Jan 29, 2024 · fb8fd84 · fb8fd84
1 parent 1f8b666
commit fb8fd84
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 28 deletions.
diff --git 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 = (
       <ChainData
         icon={icon}
         name={name}
         avatarSize={'small'}
+        withIcon={!hideIcon}
         isBoldName={false}
         eventSource='balance_table'
       />

diff --git 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'
     >
-      <InfoCircleOutlined className='GrayIcon bs-mr-2' />
       <span
         className={clsx(getPnlClassName(pnlBN), className)}
         onClick={(e) => e.stopPropagation()}
@@ -331,7 +330,6 @@ export const PriceChangedOn = ({ symbol, className }: PriceChangesProps) => {
       title='persentage'
       className='d-flex align-items-center justify-content-end'
     >
-      <InfoCircleOutlined className='GrayIcon bs-mr-2' />
       <span
         className={clsx(getPnlClassName(priceChange24h), className)}
         onClick={(e) => e.stopPropagation()}

diff --git 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
@@ -20,13 +20,18 @@ type BalancesSectionCardProps<T extends TableInfo> = {
   isLastElement?: boolean
 }
 
+const offsetByIndex = [0, 13, 63]
+
+const collapseIconOffset = [ 0, 12, 10]
+
 const BalancesSectionCard = <T extends TableInfo>({
   value,
   isLastElement,
 }: BalancesSectionCardProps<T>) => {
-  const [ open, setOpen ] = useState<boolean>(false)
+  const [open, setOpen] = useState<boolean>(false)
   const balanceInfoRef = React.useRef<HTMLDivElement>(null)
   const prices = usePrices()
+  const level = 0
 
   const isMulti = useIsMulti()
 
@@ -152,6 +157,7 @@ const BalancesSectionCard = <T extends TableInfo>({
           childrenBalances={children as T[]}
           leftOffset={(balanceInfoRef.current as any)?.offsetLeft}
           className={clsx(styles.ChildrenBalances)}
+          level={level + 1}
         />
       </div>
       {open && haveChildren && (
@@ -168,14 +174,16 @@ type InnerCildrenBalancesProps<T extends TableInfo> = {
   className?: string
   leftOffset: number
   isLastElement?: boolean
+  level: number
 }
 
 const InnerChildrenBalances = <T extends TableInfo>({
   value,
   leftOffset,
   isLastElement,
+  level,
 }: InnerCildrenBalancesProps<T>) => {
-  const [ open, setOpen ] = useState<boolean>(false)
+  const [open, setOpen] = useState<boolean>(false)
   const { balancesVariant } = useTableContext()
 
   const {
@@ -203,9 +211,15 @@ const InnerChildrenBalances = <T extends TableInfo>({
 
   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 (
     <div className={styles.InnerChildrenWrapper}>
@@ -214,13 +228,15 @@ const InnerChildrenBalances = <T extends TableInfo>({
           className={styles.CollapseButton}
           style={{ width: childrenOffset }}
         >
-          {haveChildren && (
-            <MdKeyboardArrowRight
-              className={clsx(styles.ArrowRight, styles.InnerChildrenArrow, {
-                [styles.RotateArrow]: open && haveChildren,
-              })}
-            />
-          )}
+          <div className={styles.InnerCollapseButton} style={{ paddingRight: collapseIconOffset[level] }}>
+            {haveChildren && (
+              <MdKeyboardArrowRight
+                className={clsx(styles.ArrowRight, styles.InnerChildrenArrow, {
+                  [styles.RotateArrow]: open && haveChildren,
+                })}
+              />
+            )}
+          </div>
         </div>
         <div
           key={key}
@@ -245,6 +261,7 @@ const InnerChildrenBalances = <T extends TableInfo>({
           childrenBalances={innerChildren as T[]}
           leftOffset={childrenOffsetLeft}
           className={clsx(styles.ChildrenBalances)}
+          level={level + 1}
         />
       </div>
       {haveChildren && !isLastElement && open && (
@@ -260,12 +277,14 @@ type ChildrenBalancesProps<T extends TableInfo> = {
   childrenBalances: T[]
   className?: string
   leftOffset: number
+  level: number
 }
 
 const ChildrenBalances = <T extends TableInfo>({
   childrenBalances,
   className,
   leftOffset,
+  level,
 }: ChildrenBalancesProps<T>) => {
   return (
     <div className={clsx(styles.ChildrenWrapper, className)}>
@@ -277,6 +296,7 @@ const ChildrenBalances = <T extends TableInfo>({
             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
@@ -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: <MenuOutlined />, value: 'table' },
@@ -317,11 +317,11 @@ export const BalancePart = <T extends TableInfo>({
 
   useEffect(() => {
     store.set(storeTableView, tableView)
-  }, [ tableView ])
+  }, [tableView])
 
   useEffect(() => {
     store.set(storeShowZeroBalance, showZeroBalances)
-  }, [ showZeroBalances ])
+  }, [showZeroBalances])
 
   if (!data || !skeleton) return <TableLoading loadingLabel={loadingLabel} />
 
@@ -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 (
     <div className={clsx({ ['d-flex']: !isMobile }, 'align-items-center')}>
       <div className='d-flex align-items-center'>
-        <AvatarOrSkeleton
-          icon={icon}
-          size={avatarSize}
-          className='bs-mr-2 align-items-start flex-shrink-none'
-        />
+        {withIcon && (
+          <AvatarOrSkeleton
+            icon={icon}
+            size={avatarSize}
+            className='bs-mr-2 align-items-start flex-shrink-none'
+          />
+        )}
         <div>
           {name && (
             <div
@@ -786,7 +790,7 @@ export const AccountPreview = ({
   nameClassName,
   identityLoadNotRequired,
 }: AccountPreviewProps) => {
-  useFetchIdentities([ account ], identityLoadNotRequired)
+  useFetchIdentities([account], identityLoadNotRequired)
   const identities = useIdentities(account)
 
   const address = (
@@ -873,7 +877,7 @@ export const getParentBalances = <T extends TableInfo>(
     priceValue,
     balance,
     total,
-    totalTokensValueBN
+    totalTokensValueBN,
   }
 }