From 75ef68843d2700ecff8ecc62747b0184a8bee642 Mon Sep 17 00:00:00 2001 From: Sahil Kashetwar Date: Fri, 10 Feb 2023 14:10:15 +0530 Subject: [PATCH 1/8] fix: menu styling in mobile view. --- .../src/components/mainMenu/menuItems/MenuItems.styles.js | 4 ++-- .../components/mainMenu/themeSwitcher/ThemeSwitcher.styles.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/boba/gateway/src/components/mainMenu/menuItems/MenuItems.styles.js b/packages/boba/gateway/src/components/mainMenu/menuItems/MenuItems.styles.js index 410e410dd4..eaea9041ba 100644 --- a/packages/boba/gateway/src/components/mainMenu/menuItems/MenuItems.styles.js +++ b/packages/boba/gateway/src/components/mainMenu/menuItems/MenuItems.styles.js @@ -12,7 +12,7 @@ export const Nav = styled('nav')(({ theme }) => ({ flexWrap: 'wrap', [ theme.breakpoints.down('md') ]: { width: '100%', - gap: '20px', + gap: '10px', height: '250px', marginTop: '20px', flexWrap: 'nowrap', @@ -31,7 +31,7 @@ export const MenuListItem = styled(NavLink)(({ theme }) => ({ [ theme.breakpoints.down('md') ]: { fontSize: '20px', fontWeight: '400', - marginLeft: '20px' + padding: '0 24px', }, color: 'inherit', '&:hover': { diff --git a/packages/boba/gateway/src/components/mainMenu/themeSwitcher/ThemeSwitcher.styles.js b/packages/boba/gateway/src/components/mainMenu/themeSwitcher/ThemeSwitcher.styles.js index fe29660700..1233b32947 100644 --- a/packages/boba/gateway/src/components/mainMenu/themeSwitcher/ThemeSwitcher.styles.js +++ b/packages/boba/gateway/src/components/mainMenu/themeSwitcher/ThemeSwitcher.styles.js @@ -7,7 +7,7 @@ export const ThemeSwitcherTag = styled(Box)(({ theme }) => ({ [ theme.breakpoints.down('md') ]: { width: '100%', marginTop: '20px', - marginLeft: '10px' + padding: '0px 20px' } })); From d1fc0b568b9522850de3d68646431236bbed744f Mon Sep 17 00:00:00 2001 From: Sahil Kashetwar Date: Fri, 10 Feb 2023 14:28:04 +0530 Subject: [PATCH 2/8] disable link if it has invalid tx reference --- packages/boba/gateway/src/containers/history/TX_Transfers.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/boba/gateway/src/containers/history/TX_Transfers.js b/packages/boba/gateway/src/containers/history/TX_Transfers.js index 620eb48fad..c24a35d35b 100644 --- a/packages/boba/gateway/src/containers/history/TX_Transfers.js +++ b/packages/boba/gateway/src/containers/history/TX_Transfers.js @@ -56,7 +56,7 @@ function TX_Transfers({ searchHistory, transactions, chainLink }) { oriChain={chain} oriHash={i.hash} amountTx={amountTx} - tx_ref={i.reference} + tx_ref={!!i.reference ? i.reference : null} eventType={i.event_type} toChain={i.destination_chain} /> From ed99925794d39707dd2f698ae4c86a8e90749b23 Mon Sep 17 00:00:00 2001 From: Sahil Kashetwar Date: Fri, 10 Feb 2023 15:59:12 +0530 Subject: [PATCH 3/8] fix: history page font update. --- .../src/components/transaction/Transaction.js | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/boba/gateway/src/components/transaction/Transaction.js b/packages/boba/gateway/src/components/transaction/Transaction.js index f2ea3de07d..005bfa2b36 100644 --- a/packages/boba/gateway/src/components/transaction/Transaction.js +++ b/packages/boba/gateway/src/components/transaction/Transaction.js @@ -124,25 +124,25 @@ function Transaction({ md={6} >
- {chain} - {time} + {chain} + {time} {completion === '' && -   +   } {completion !== '' && - {completion} + {completion} } - {toChain && + {toChain && {toChain} } - + {oriChain} Hash:  {isMobile ? truncate(oriHash, 6, 6, '...') : oriHash} @@ -156,19 +156,19 @@ function Transaction({ md={3} >
- + {blockNumber} - + {typeTX} - {eventType ? + {eventType ? {eventType} : null} {amountTx ? {amountTx} : null @@ -183,7 +183,7 @@ function Transaction({ > {!!detail && {setDropDownBox(!dropDownBox)}} > From a44101f18964f01e9133ffee01848c4633178bba Mon Sep 17 00:00:00 2001 From: Sahil Kashetwar Date: Fri, 10 Feb 2023 19:56:48 +0530 Subject: [PATCH 4/8] fix: added show more, show less on ecosystem page card. --- .../showMoreShowLess/ShowMoreShowLess.js | 36 +++++++++++++++++++ .../containers/ecosystem/Ecosystem.styles.js | 6 +++- .../src/containers/ecosystem/Projects.js | 22 +++++++++--- 3 files changed, 58 insertions(+), 6 deletions(-) create mode 100644 packages/boba/gateway/src/components/showMoreShowLess/ShowMoreShowLess.js diff --git a/packages/boba/gateway/src/components/showMoreShowLess/ShowMoreShowLess.js b/packages/boba/gateway/src/components/showMoreShowLess/ShowMoreShowLess.js new file mode 100644 index 0000000000..02b6a032f6 --- /dev/null +++ b/packages/boba/gateway/src/components/showMoreShowLess/ShowMoreShowLess.js @@ -0,0 +1,36 @@ +import React, { useState } from 'react' +import Button from 'components/button/Button'; +import { Typography } from '@mui/material'; + +const ShowMoreShowLess = ({ + children, + limit = 50, + sx +}) => { + const text = children; + + const [ showMore, setshowMore ] = useState(false); + + return ( + + {showMore ? text : text.substr(0, limit)} + {text.length > limit ? + setshowMore(!showMore)} + > + {showMore ? 'show less' : '... show more'} + + : null} + + ) + +} + +export default ShowMoreShowLess diff --git a/packages/boba/gateway/src/containers/ecosystem/Ecosystem.styles.js b/packages/boba/gateway/src/containers/ecosystem/Ecosystem.styles.js index d07b2fe3e2..2a88b2fcf1 100644 --- a/packages/boba/gateway/src/containers/ecosystem/Ecosystem.styles.js +++ b/packages/boba/gateway/src/containers/ecosystem/Ecosystem.styles.js @@ -69,7 +69,11 @@ export const ProjectContent = styled(Box)(({ theme }) => ({ gap: 1, marginTop: '50px', width: '100%', - height: '140px' + height: '140px', + [ theme.breakpoints.down('md') ]: { + minHeight: '140px', + height: 'auto' + }, })) export const ImageContainer = styled(Box)(({ theme, ...props }) => ({ diff --git a/packages/boba/gateway/src/containers/ecosystem/Projects.js b/packages/boba/gateway/src/containers/ecosystem/Projects.js index 8cd4944481..03b2b0a6dc 100644 --- a/packages/boba/gateway/src/containers/ecosystem/Projects.js +++ b/packages/boba/gateway/src/containers/ecosystem/Projects.js @@ -10,11 +10,13 @@ import Tooltip from 'components/tooltip/Tooltip' import { useParams } from 'react-router-dom' import * as S from './Ecosystem.styles' import { loadProjectByCategory, loadBobaProjectByCategory } from './project.list' -import { SvgIcon } from '@mui/material' +import { SvgIcon, useMediaQuery, useTheme } from '@mui/material' +import ShowMoreShowLess from 'components/showMoreShowLess/ShowMoreShowLess' const Projects = ({projectType}) => { const [ projectByCategory, setprojectByCategory ] = useState({}) - + const theme = useTheme() + const isMobile = useMediaQuery(theme.breakpoints.down('md')) const params = useParams(); useEffect(() => { @@ -48,9 +50,19 @@ const Projects = ({projectType}) => { {project.title} - - {project.description} - + {isMobile ? + {project.description} + : + {project.description} + } Date: Fri, 10 Feb 2023 20:02:41 +0530 Subject: [PATCH 5/8] close menu in case of mobile on selection of other menu Item. --- .../src/components/mainMenu/menuItems/MenuItems.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/boba/gateway/src/components/mainMenu/menuItems/MenuItems.js b/packages/boba/gateway/src/components/mainMenu/menuItems/MenuItems.js index ac6914f067..c708967e3c 100644 --- a/packages/boba/gateway/src/components/mainMenu/menuItems/MenuItems.js +++ b/packages/boba/gateway/src/components/mainMenu/menuItems/MenuItems.js @@ -7,8 +7,14 @@ import { MENU_LIST } from './menu.config' import * as S from './MenuItems.styles' import { PAGES_BY_NETWORK } from 'util/constant' import { selectActiveNetwork } from 'selectors/networkSelector' +import { useTheme, useMediaQuery } from '@mui/material' -const MenuItems = () => { +const MenuItems = ({ + setOpen +}) => { + + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down('md')); const menuList = MENU_LIST; @@ -46,6 +52,7 @@ const MenuItems = () => { key={item.key} to={item.url} activeclassname="active" + onClick={() => isMobile ? setOpen(false): null} > {item.title} From bf363c49c061aff67e181b7ef91598a7048b8997 Mon Sep 17 00:00:00 2001 From: Sahil Kashetwar Date: Fri, 10 Feb 2023 20:07:55 +0530 Subject: [PATCH 6/8] stake modal styling fixes for button --- .../src/containers/modals/farm/FarmDepositModal.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/boba/gateway/src/containers/modals/farm/FarmDepositModal.js b/packages/boba/gateway/src/containers/modals/farm/FarmDepositModal.js index 3703cc26d1..cf6b1f8130 100644 --- a/packages/boba/gateway/src/containers/modals/farm/FarmDepositModal.js +++ b/packages/boba/gateway/src/containers/modals/farm/FarmDepositModal.js @@ -332,8 +332,9 @@ class FarmDepositModal extends React.Component { @@ -361,8 +362,9 @@ class FarmDepositModal extends React.Component { From 0320f24dd698786f02b473d9c453fa44e22812f9 Mon Sep 17 00:00:00 2001 From: Sahil Kashetwar Date: Fri, 10 Feb 2023 20:08:27 +0530 Subject: [PATCH 7/8] clean up farm page --- packages/boba/gateway/src/containers/farm/Farm.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/boba/gateway/src/containers/farm/Farm.js b/packages/boba/gateway/src/containers/farm/Farm.js index 56b43bae4a..de014dec75 100644 --- a/packages/boba/gateway/src/containers/farm/Farm.js +++ b/packages/boba/gateway/src/containers/farm/Farm.js @@ -211,7 +211,6 @@ class Farm extends React.Component { render() { - console.log(['props', this.props]) const { poolInfo, From ad6cb87c6143e981ce75ec52e34bf64c0b1511f9 Mon Sep 17 00:00:00 2001 From: Sahil Kashetwar Date: Sat, 11 Feb 2023 00:39:52 +0530 Subject: [PATCH 8/8] removed unused vars --- .../gateway/src/components/showMoreShowLess/ShowMoreShowLess.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/boba/gateway/src/components/showMoreShowLess/ShowMoreShowLess.js b/packages/boba/gateway/src/components/showMoreShowLess/ShowMoreShowLess.js index 02b6a032f6..baf67aea08 100644 --- a/packages/boba/gateway/src/components/showMoreShowLess/ShowMoreShowLess.js +++ b/packages/boba/gateway/src/components/showMoreShowLess/ShowMoreShowLess.js @@ -1,5 +1,4 @@ import React, { useState } from 'react' -import Button from 'components/button/Button'; import { Typography } from '@mui/material'; const ShowMoreShowLess = ({