Merge pull request #161 from curvefi/fix/mobile-view-supply-button

fix: lend mobile view buttons

Author: amytsang

apps/lend/src/components/PageMarketList/components/TableRowViewContentTable/TableRowMobile.tsx

@@ -118,7 +118,7 @@ const TableRowMobile = ({
         <MobileLabelWrapper flexAlignItems="center" grid gridTemplateColumns={userHaveLoan ? '20px 1fr' : '1fr'}>
           {userHaveLoan && <CellInPool {...cellProps} isInMarket />}
           <MobileLabelContent>
-            <Box flex gridGap={3}>
+            <Box flex gridGap={3} onClick={(evt) => handleCellClick()}>
               <Box>
                 <TextCaption isBold isCaps>
                   Collateral
@@ -139,10 +139,10 @@ const TableRowMobile = ({
         </MobileLabelWrapper>
 
         <MobileTableContentWrapper className={isHideDetail ? '' : 'show'}>
-          <MobileTableContent onClick={(evt) => handleCellClick(evt.target)}>
+          <MobileTableContent>
             {!isHideDetail && (
               <>
-                <DetailsContent>
+                <DetailsContent onClick={(evt) => handleCellClick(evt.target)}>
                   {content[isBorrow ? 'borrow' : 'supply'].map((details, idx) => {
                     const detailsKey = `details-${idx}`
                     const show = details.some(({ show }) => _showContent(show))
@@ -194,11 +194,11 @@ const TableRowMobile = ({
                 </DetailsContent>
                 <MobileTableActions>
                   {isBorrow ? (
-                    <Button variant="filled" onClick={(evt) => handleCellClick(evt.target)}>
+                    <Button variant="filled" onClick={(evt) => handleCellClick()}>
                       {loanExists ? t`Manage Loan` : t`Get Loan`}
                     </Button>
                   ) : (
-                    <Button variant="filled" onClick={(evt) => handleCellClick(evt.target)}>
+                    <Button variant="filled" onClick={(evt) => handleCellClick()}>
                       {t`Supply ${borrowed_token?.symbol ?? ''}`}
                     </Button>
                   )}

apps/lend/src/components/PageMarketList/components/TableRowViewContentTable/index.tsx

@@ -98,25 +98,24 @@ const TableRowViewContentTable = ({
             const userActiveKey = helpers.getUserActiveKey(api, owmDataCachedOrApi)
             const loanExists = loansExistsMapper[userActiveKey]?.loanExists
 
-            const handleCellClick = (target: EventTarget) => {
-              const { nodeName } = target as HTMLElement
-              if (nodeName !== 'BUTTON') {
-                // update view
-                if (filterTypeKey === 'borrow') {
-                  setMarketsStateByKey('marketDetailsView', loanExists ? 'user' : 'market')
-                } else if (filterTypeKey === 'supply') {
-                  const { gauge = '0', vaultShares = '0' } = marketsBalancesMapper[userActiveKey] ?? {}
-                  const haveSupply = +gauge + +vaultShares > 0
-                  setMarketsStateByKey('marketDetailsView', haveSupply ? 'user' : 'market')
-                }
-
-                if (filterTypeKey === 'supply') {
-                  navigate(getVaultPathname(params, owmId, 'deposit'))
-                } else if (loanExists) {
-                  navigate(getLoanManagePathname(params, owmId, 'loan'))
-                } else {
-                  navigate(getLoanCreatePathname(params, owmId, 'create'))
-                }
+            const handleCellClick = (target?: EventTarget) => {
+              if (target && (target as HTMLElement).nodeName === 'BUTTON') return
+
+              // update view
+              if (filterTypeKey === 'borrow') {
+                setMarketsStateByKey('marketDetailsView', loanExists ? 'user' : 'market')
+              } else if (filterTypeKey === 'supply') {
+                const { gauge = '0', vaultShares = '0' } = marketsBalancesMapper[userActiveKey] ?? {}
+                const haveSupply = +gauge + +vaultShares > 0
+                setMarketsStateByKey('marketDetailsView', haveSupply ? 'user' : 'market')
+              }
+
+              if (filterTypeKey === 'supply') {
+                navigate(getVaultPathname(params, owmId, 'deposit'))
+              } else if (loanExists) {
+                navigate(getLoanManagePathname(params, owmId, 'loan'))
+              } else {
+                navigate(getLoanCreatePathname(params, owmId, 'create'))
               }
             }
 

apps/lend/src/components/PageMarketList/types.ts

@@ -101,7 +101,7 @@ export type TableRowProps = Pick<PageMarketList, 'rChainId' | 'api' | 'searchPar
   showBorrowSignerCell: boolean
   showSupplySignerCell: boolean
   userActiveKey: string
-  handleCellClick(evt: EventTarget): void
+  handleCellClick(target?: EventTarget): void // only pass evt.target if there is a child button node
 }
 
 export type TableCellProps = {