Fix: Scrollbar and height style for mobile and desktop view

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobanetwork/gateway",
-  "version": "0.15.0",
+  "version": "0.15.2",
   "private": true,
   "scripts": {
     "build:prod": "GENERATE_SOURCEMAP=false REACT_APP_ENV=prod react-app-rewired build",

src/components/cardList/index.tsx

@@ -0,0 +1,89 @@
+import React, { useState } from 'react'
+import { useSelector } from 'react-redux'
+import { selectTheme } from 'selectors'
+import { getEcoImage } from 'util/gitdata'
+import {
+  PlaceholderImage,
+  ExternalIcon,
+  Card,
+  Title,
+  Description,
+  CardList,
+  OutlineButton,
+} from './styles'
+import Tooltip from 'components/tooltip/Tooltip'
+import externalSvg from 'assets/external.svg'
+
+export const CardItem = ({ name, description, icon, link }) => {
+  const theme = useSelector(selectTheme)
+  const iconImage = getEcoImage(theme === 'light' ? icon.dark : icon.light)
+  return (
+    <Card>
+      <PlaceholderImage>
+        <img src={iconImage} alt={name} width="100%" />
+      </PlaceholderImage>
+      <Title href={link} target="_blank" rel="noopener noreferrer">
+        {name} <ExternalIcon src={externalSvg} />
+      </Title>
+      <Tooltip title={description}>
+        <Description>{description}</Description>
+      </Tooltip>
+    </Card>
+  )
+}
+
+export const TradeCardList = ({ items }: any) => {
+  return (
+    <CardList>
+      {items.map(
+        (item: any, index) =>
+          item.visible && (
+            <CardItem
+              key={`${item.name}-${item.pairName}` || index}
+              {...item}
+              description={item.pairName}
+            />
+          )
+      )}
+    </CardList>
+  )
+}
+
+export const EcosystemCardList = ({ items, types }) => {
+  const [selectedType, setType] = useState('all')
+
+  return (
+    <>
+      <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: '10px' }}>
+        <OutlineButton
+          className={`${'all' !== selectedType ? '' : 'active'}`}
+          onClick={() => setType('all')}
+        >
+          All
+        </OutlineButton>
+        {types.filter(Boolean).map((type) => (
+          <OutlineButton
+            className={`${type.toLowerCase() !== selectedType ? '' : 'active'}`}
+            onClick={() => setType(type.toLowerCase())}
+            key={type}
+          >
+            {type}
+          </OutlineButton>
+        ))}
+      </div>
+
+      <CardList>
+        {items
+          .filter((c: any) =>
+            selectedType === 'all'
+              ? true
+              : c.type.toLowerCase() === selectedType
+          )
+          .map(
+            (item: any, index) =>
+              item.visible && <CardItem key={item.name || index} {...item} />
+          )}
+      </CardList>
+    </>
+  )
+}

src/containers/Trade/styles.ts → src/components/cardList/styles.ts

@@ -1,32 +1,15 @@
 import styled, { css } from 'styled-components'
 import { mobile, sdesktop, tablet } from 'themes/screens'
 
-export const PageContainer = styled.div`
-  margin: 0px auto 20px auto;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  padding: 0px 50px 50px 50px;
-  width: 100%;
-  max-width: 1164px;
-  ${sdesktop(css`
-    padding: 0px 0px 50px 0px;
-  `)}
-  ${tablet(css`
-    padding: 0px 50px;
-  `)}
-  ${mobile(css`
-    padding: 0px 25px;
-    margin: auto;
-  `)}
-`
-
 export const CardList = styled.div`
   display: grid;
   gap: 15px;
   grid-template-columns: repeat(4, 1fr);
-  max-height: calc(100vh - 320px);
+  height: calc(100vh - 320px);
+  min-height: 650px;
+  max-height: 850px;
   overflow-y: scroll;
+  padding-bottom: 5px;
 
   ${sdesktop`
     grid-template-columns: repeat(4, 1fr);
@@ -39,7 +22,12 @@ export const CardList = styled.div`
 
   ${mobile`
     grid-template-columns: repeat(1, 1fr);
+    max-height: 100%;
   `}
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 `
 
 export const Card = styled.div`
@@ -72,8 +60,9 @@ export const Card = styled.div`
   ${mobile`
     padding: 16px;
     gap: 8px;
-    max-width: 350px;
-  min-width: 350px;
+    max-width: 280px;
+    min-width: 280px;
+    margin:auto;
   `}
 `
 
@@ -101,6 +90,10 @@ export const Title = styled.a`
     text-decoration: underline;
   }
 
+  ${tablet`
+   font-size: 14px;
+  `}
+
   ${(props) => css`
     color: ${props.theme.name === 'light'
       ? props.theme.colors.gray[800]

src/components/layout/Footer/FooterLinks/style.ts

@@ -1,11 +1,18 @@
 import { NavLink } from 'react-router-dom'
 import styled, { css } from 'styled-components'
-import { mobile } from 'themes/screens'
+import { mobile, tablet } from 'themes/screens'
 
 export const StyledLinks = styled.div`
   display: flex;
   align-items: center;
   gap: 24px;
+
+  ${mobile(css`
+    margin: 10px auto;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    width: 80%;
+  `)}
 `
 export const ScanContainer = styled.div`
   margin: 10px 0px;
@@ -19,6 +26,12 @@ export const LinkContainer = styled.div`
   margin: 0;
   gap: 32px;
 
+  ${tablet(css`
+    flex-direction: row;
+    align-items: center;
+    margin: 10px auto;
+  `)}
+
   ${mobile(css`
     width: 100%;
     flex-direction: column;

src/components/layout/Footer/GasWatcher/__snapshots__/index.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Footer GasWatcher should match snapshot when gas has value 1`] = `
 <DocumentFragment>
   <div
-    class="sc-eDPEul kzverb"
+    class="sc-eDPEul lanfuC"
     id="gasDetails"
   >
     <div

src/components/layout/Footer/GasWatcher/style.ts

@@ -1,14 +1,19 @@
 import { Typography } from 'components/global'
 import styled, { css } from 'styled-components'
-import { mobile } from 'themes/screens'
+import { mobile, tablet } from 'themes/screens'
 
 export const GasListContainer = styled.div`
   self-align: flex-end;
   display: flex;
   gap: 24px;
   justify-content: flex-end;
+  ${tablet(css`
+    margin: 10px auto;
+  `)}
   ${mobile(css`
-    display: none;
+    margin: 10px auto;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
   `)}
 `
 

src/components/layout/Footer/style.ts

@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components'
-import { mobile } from 'themes/screens'
+import { mobile, tablet } from 'themes/screens'
 
 export const StyledFooter = styled.div`
   display: flex;
@@ -21,4 +21,10 @@ export const Row = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
+  ${tablet(css`
+    flex-direction: column-reverse;
+  `)}
+  ${mobile(css`
+    flex-direction: column-reverse;
+  `)}
 `

src/containers/Ecosystem/index.tsx

@@ -1,86 +1,24 @@
-import Tooltip from 'components/tooltip/Tooltip'
+import { EcosystemCardList } from 'components/cardList'
+import { PageLayoutStyle } from 'containers/styles'
 import { useFetchItems } from 'hooks/UseFetchItems'
-import React, { useState } from 'react'
-import { useSelector } from 'react-redux'
-import { selectTheme } from 'selectors'
+import React from 'react'
 import { ECOSYSTEM_LIST } from 'util/constant'
-import { getEcoImage } from 'util/gitdata'
-import {
-  Card,
-  CardList,
-  Description,
-  ExternalIcon,
-  OutlineButton,
-  PageContainer,
-  PlaceholderImage,
-  Title,
-} from './styles'
-import externalSvg from 'assets/external.svg'
-
-const EcosystemCard = ({ name, description, icon, link }) => {
-  const theme = useSelector(selectTheme)
-  const iconImage = getEcoImage(theme === 'light' ? icon.dark : icon.light)
-  return (
-    <Card>
-      <PlaceholderImage>
-        <img src={iconImage} alt={name} width="100%" />
-      </PlaceholderImage>
-      <Title href={link} target="_blank" rel="noopener noreferrer">
-        {name} <ExternalIcon src={externalSvg} />
-      </Title>
-      <Tooltip title={description}>
-        <Description>{description}</Description>
-      </Tooltip>
-    </Card>
-  )
-}
 
 const Ecosystem = () => {
   const { items, types, loading } = useFetchItems(ECOSYSTEM_LIST)
-  const [selectedType, setType] = useState('all')
 
   if (loading) {
     return (
-      <PageContainer>
+      <PageLayoutStyle>
         <div>Please wait a moment...</div>
-      </PageContainer>
+      </PageLayoutStyle>
     )
   }
 
   return (
-    <PageContainer>
-      <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: '10px' }}>
-        <OutlineButton
-          className={`${'all' !== selectedType ? '' : 'active'}`}
-          onClick={() => setType('all')}
-        >
-          All
-        </OutlineButton>
-        {types.filter(Boolean).map((type) => (
-          <OutlineButton
-            className={`${type.toLowerCase() !== selectedType ? '' : 'active'}`}
-            onClick={() => setType(type.toLowerCase())}
-            key={type}
-          >
-            {type}
-          </OutlineButton>
-        ))}
-      </div>
-      <CardList>
-        {items
-          .filter((c: any) =>
-            selectedType === 'all'
-              ? true
-              : c.type.toLowerCase() === selectedType
-          )
-          .map(
-            (item: any, index) =>
-              item.visible && (
-                <EcosystemCard key={item.name || index} {...item} />
-              )
-          )}
-      </CardList>
-    </PageContainer>
+    <PageLayoutStyle>
+      <EcosystemCardList items={items} types={types} />
+    </PageLayoutStyle>
   )
 }