diff --git a/components/Footer/index.tsx b/components/Footer/index.tsx index f1955b8ff..fea233a80 100644 --- a/components/Footer/index.tsx +++ b/components/Footer/index.tsx @@ -26,7 +26,7 @@ const Footer = () => { padding: '16px 0px', color: 'figma.grey.300', fontWeight: '500', - mt: 8, + mt: 4, }} > Exactly Protocol © {date.getFullYear()} diff --git a/components/MobileTabs/index.tsx b/components/MobileTabs/index.tsx index efa16fd30..9e71d0772 100644 --- a/components/MobileTabs/index.tsx +++ b/components/MobileTabs/index.tsx @@ -1,6 +1,7 @@ -import React, { ReactNode, useState } from 'react'; +import React, { ReactNode, useState, useEffect, useRef } from 'react'; import { Box, Button } from '@mui/material'; import { track } from 'utils/mixpanel'; +import { useRouter } from 'next/router'; export type MobileTab = { title: string; @@ -12,11 +13,25 @@ type Props = { }; function MobileTabs({ tabs }: Props) { - const [selected, setSelected] = useState(0); + const { query } = useRouter(); + const contentRef = useRef(null); + + const tabType = query.tab === 'b' ? 1 : 0; + const [selected, setSelected] = useState(tabType); + + useEffect(() => { + setSelected(tabType); + }, [tabType]); + + useEffect(() => { + if (query.tab && tabType === 1 && contentRef.current) { + contentRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' }); + } + }, [query.tab, tabType]); return ( <> - + {tabs.map(({ title }, i) => ( - - ), - imgPath: '/img/assets/EXTRA.svg', - }, ].filter((s) => s.chainId === chain.id || s.chainId === undefined), - [chain.id, extraRate, query, t, veloRate], + [chain.id, query, t, veloRate], ); return (