From bec172e4f278bf32dfc5af149d58a0c046be60f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rui=20Sim=C3=A3o?= Date: Fri, 14 Jun 2024 14:53:43 +0100 Subject: [PATCH] feat: final --- .husky/pre-commit | 2 +- apps/evm/src/assets/onramp-btc.svg | 44 ------------- apps/evm/src/pages/Bridge/Bridge.style.tsx | 41 +----------- apps/evm/src/pages/Bridge/Bridge.tsx | 33 +++++++++- .../components/BannerCarousel/Banner.tsx | 11 ++-- .../BannerCarousel/BannerCarousel.style.tsx | 21 ++++-- .../BannerCarousel/BannerCarousel.tsx | 65 ++++++++++--------- .../BannerCarousel/EcosystemBanner.tsx | 30 ++++----- .../BannerCarousel/OnrampBanner.tsx | 30 +++++---- .../components/BridgeForm/BridgeForm.tsx | 18 +++-- knip.config.js | 7 +- package.json | 2 +- .../ui/src/components/Card/Card.style.tsx | 2 +- 13 files changed, 138 insertions(+), 168 deletions(-) delete mode 100644 apps/evm/src/assets/onramp-btc.svg diff --git a/.husky/pre-commit b/.husky/pre-commit index 954c6561d..028b445f6 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -6,4 +6,4 @@ if [ -t 2 ]; then exec >/dev/tty 2>&1 fi -pnpm lint-staged -c .lintstagedrc +pnpm lint-staged -c .lintstagedrc && pnpm files:check diff --git a/apps/evm/src/assets/onramp-btc.svg b/apps/evm/src/assets/onramp-btc.svg deleted file mode 100644 index 0ac95639c..000000000 --- a/apps/evm/src/assets/onramp-btc.svg +++ /dev/null @@ -1,44 +0,0 @@ - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/apps/evm/src/pages/Bridge/Bridge.style.tsx b/apps/evm/src/pages/Bridge/Bridge.style.tsx index 222bae5e0..1de0a9331 100644 --- a/apps/evm/src/pages/Bridge/Bridge.style.tsx +++ b/apps/evm/src/pages/Bridge/Bridge.style.tsx @@ -1,5 +1,5 @@ -import { Button, Card, Flex } from '@gobob/ui'; -import styled, { css } from 'styled-components'; +import { Card, Flex } from '@gobob/ui'; +import styled from 'styled-components'; const StyledFlex = styled(Flex)` width: 100%; @@ -9,39 +9,4 @@ const StyledCard = styled(Card)` width: 100%; `; -const StyledBannerContent = styled(Flex)` - z-index: 1; -`; - -const StyledBanner = styled(Card)` - position: relative; - text-decoration: none; - overflow: hidden; -`; - -const StyledBannerImg = styled.img` - position: absolute; - right: 0; - top: 0; - height: 100%; - opacity: 0.5; - - ${({ theme }) => { - return css` - transform: scale(4); - - @media ${theme.breakpoints.up('s')} { - transform: scale(6) translateX(-15%); - } - `; - }} -`; - -const StyledBannerCloseBtn = styled(Button)` - position: absolute; - top: ${({ theme }) => theme.spacing('s')}; - right: ${({ theme }) => theme.spacing('s')}; - z-index: 2; -`; - -export { StyledFlex, StyledCard, StyledBannerImg, StyledBannerContent, StyledBannerCloseBtn, StyledBanner }; +export { StyledCard, StyledFlex }; diff --git a/apps/evm/src/pages/Bridge/Bridge.tsx b/apps/evm/src/pages/Bridge/Bridge.tsx index ece9166d0..99a5938f9 100644 --- a/apps/evm/src/pages/Bridge/Bridge.tsx +++ b/apps/evm/src/pages/Bridge/Bridge.tsx @@ -1,9 +1,10 @@ import { Tabs, TabsItem } from '@gobob/ui'; import { Key, useCallback, useEffect, useState } from 'react'; -import { useLocation, useSearchParams } from 'react-router-dom'; +import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'; +import { ChainId } from '@gobob/chains'; import { Main } from '../../components'; -import { L1_CHAIN, L2_CHAIN } from '../../constants'; +import { L1_CHAIN, L2_CHAIN, RoutesPath } from '../../constants'; import { StyledCard, StyledFlex } from './Bridge.style'; import { BannerCarousel, BridgeForm, TransactionList } from './components'; @@ -17,13 +18,17 @@ const Bridge = () => { const location = useLocation(); const [type, setType] = useState<'deposit' | 'withdraw'>('deposit'); const [bridgeOrigin, setBridgeOrigin] = useState(BridgeOrigin.INTERNAL); + const [chain, setChain] = useState(L1_CHAIN); const [searchParams, setSearchParams] = useSearchParams(new URLSearchParams('action=deposit')); + const navigate = useNavigate(); + const handleChangeTab = useCallback( (key: any) => { setType(key as any); setBridgeOrigin(key === 'deposit' ? BridgeOrigin.INTERNAL : BridgeOrigin.EXTERNAL); + setChain(L1_CHAIN); setSearchParams(() => { const newParams = new URLSearchParams(); @@ -53,6 +58,23 @@ const Bridge = () => { const handleChangeOrigin = useCallback((origin: BridgeOrigin) => setBridgeOrigin(origin), []); + const handleChangeChain = useCallback((chain: ChainId | 'BTC') => setChain(chain), []); + + const handlePressEcosystemBanner = useCallback( + () => navigate(RoutesPath.FUSION, { state: { scrollEcosystem: true } }), + // eslint-disable-next-line react-hooks/exhaustive-deps + [] + ); + + const handlePressOnrampBanner = useCallback( + () => { + setChain('BTC'); + setBridgeOrigin(BridgeOrigin.INTERNAL); + }, + // eslint-disable-next-line react-hooks/exhaustive-deps + [] + ); + useEffect(() => { const selectedTabKey = searchParams.get('type') || undefined; @@ -62,7 +84,10 @@ const Bridge = () => { return (
- + @@ -75,8 +100,10 @@ const Bridge = () => { diff --git a/apps/evm/src/pages/Bridge/components/BannerCarousel/Banner.tsx b/apps/evm/src/pages/Bridge/components/BannerCarousel/Banner.tsx index 154256db9..46941de35 100644 --- a/apps/evm/src/pages/Bridge/components/BannerCarousel/Banner.tsx +++ b/apps/evm/src/pages/Bridge/components/BannerCarousel/Banner.tsx @@ -1,10 +1,13 @@ -import { Flex, FlexProps } from '@gobob/ui'; +import { CardProps } from '@gobob/ui'; -type BannerProps = FlexProps; +import { StyledBanner } from './BannerCarousel.style'; + +type BannerProps = CardProps; const Banner = (props: BannerProps) => { - return ; + return ( + + ); }; export { Banner }; -export type { BannerProps }; diff --git a/apps/evm/src/pages/Bridge/components/BannerCarousel/BannerCarousel.style.tsx b/apps/evm/src/pages/Bridge/components/BannerCarousel/BannerCarousel.style.tsx index fefb298b5..704c1a3b4 100644 --- a/apps/evm/src/pages/Bridge/components/BannerCarousel/BannerCarousel.style.tsx +++ b/apps/evm/src/pages/Bridge/components/BannerCarousel/BannerCarousel.style.tsx @@ -9,7 +9,7 @@ function getImageUrl(name: string) { return new URL(`../../../../assets/${name}`, import.meta.url).href; } -const StyledCard = styled(Card)` +const StyledCarouselWrapper = styled(Card)` position: relative; text-decoration: none; overflow: hidden; @@ -56,6 +56,7 @@ const StyledSlider = styled(Slider)` width: auto; height: auto; z-index: 1; + transition: ${({ theme }) => theme.transition('colors', 'fast')}; &::before { content: unset; @@ -70,7 +71,7 @@ const StyledSlider = styled(Slider)` .slick-dots li button:before { font-size: 10px; color: ${({ theme }) => theme.color('grey-100')}; - transition: ${({ theme }) => theme.transition('colors', 'normal')}; + transition: ${({ theme }) => theme.transition('colors', 'fast')}; } .slick-dots li { @@ -86,8 +87,6 @@ const StyledSlider = styled(Slider)` `; const StyledOnrampBanner = styled(Banner)` - position: relative; - background-image: url(${getImageUrl('cubs-group.svg')}); background-repeat: no-repeat; background-size: cover; @@ -120,4 +119,16 @@ const StyledOnrampGraphic = styled(OnrampGraphic)` }} `; -export { StyledCard, StyledSlider, StyledOnrampBanner, StyledOnrampGraphic, StyledBannerContent, StyledBannerImg }; +const StyledBanner = styled(Card)` + position: relative; +`; + +export { + StyledCarouselWrapper, + StyledSlider, + StyledOnrampBanner, + StyledOnrampGraphic, + StyledBannerContent, + StyledBanner, + StyledBannerImg +}; diff --git a/apps/evm/src/pages/Bridge/components/BannerCarousel/BannerCarousel.tsx b/apps/evm/src/pages/Bridge/components/BannerCarousel/BannerCarousel.tsx index 999deac90..5ce439bba 100644 --- a/apps/evm/src/pages/Bridge/components/BannerCarousel/BannerCarousel.tsx +++ b/apps/evm/src/pages/Bridge/components/BannerCarousel/BannerCarousel.tsx @@ -5,44 +5,47 @@ import { ChevronLeft, ChevronRight, useMediaQuery } from '@gobob/ui'; import { useTheme } from 'styled-components'; import { EcosystemBanner } from './EcosystemBanner'; -import { StyledCard, StyledSlider } from './BannerCarousel.style'; +import { StyledCarouselWrapper, StyledSlider } from './BannerCarousel.style'; import { OnrampBanner } from './OnrampBanner'; -const BannerCarousel = () => { +const settings: Settings = { + dots: true, + infinite: true, + autoplay: true, + speed: 500, + autoplaySpeed: 10000, + cssEase: 'linear', + slidesToShow: 1, + slidesToScroll: 1, + pauseOnHover: true, + nextArrow: ( + + ), + prevArrow: ( + + ) +}; + +type BannerCarouselProps = { + onPressOnrampBanner: () => void; + onPressEcosystemBanner: () => void; +}; + +const BannerCarousel = ({ onPressOnrampBanner, onPressEcosystemBanner }: BannerCarouselProps) => { const theme = useTheme(); const isDesktop = useMediaQuery(theme.breakpoints.up('s')); - const settings: Settings = { - dots: true, - fade: true, - infinite: true, - arrows: isDesktop, - autoplay: true, - speed: 1000, - autoplaySpeed: 10000, - cssEase: 'linear', - slidesToShow: 1, - slidesToScroll: 1, - pauseOnHover: true, - nextArrow: ( - - ), - prevArrow: ( - - ) - }; - return ( - - - - + + + + - + ); }; diff --git a/apps/evm/src/pages/Bridge/components/BannerCarousel/EcosystemBanner.tsx b/apps/evm/src/pages/Bridge/components/BannerCarousel/EcosystemBanner.tsx index 395345618..801898076 100644 --- a/apps/evm/src/pages/Bridge/components/BannerCarousel/EcosystemBanner.tsx +++ b/apps/evm/src/pages/Bridge/components/BannerCarousel/EcosystemBanner.tsx @@ -2,23 +2,23 @@ import { Flex, H1, P } from '@gobob/ui'; import bannerSrc from '../../../../assets/ecosystem-banner.png'; -import { StyledBannerContent, StyledBannerImg } from './BannerCarousel.style'; +import { StyledBannerImg } from './BannerCarousel.style'; import { Banner } from './Banner'; -const EcosystemBanner = () => { - return ( - - - -

- BOB Ecosystem -

- -

Discover the most exciting projects on BOB.

- - - - ); +type EcosystemBannerProps = { + onPress?: () => void; }; +const EcosystemBanner = ({ onPress }: EcosystemBannerProps) => ( + + +

+ BOB Ecosystem +

+ +

Discover the most exciting projects on BOB.

+ + +); + export { EcosystemBanner }; diff --git a/apps/evm/src/pages/Bridge/components/BannerCarousel/OnrampBanner.tsx b/apps/evm/src/pages/Bridge/components/BannerCarousel/OnrampBanner.tsx index 4bf02fed2..0d007a5ab 100644 --- a/apps/evm/src/pages/Bridge/components/BannerCarousel/OnrampBanner.tsx +++ b/apps/evm/src/pages/Bridge/components/BannerCarousel/OnrampBanner.tsx @@ -2,20 +2,22 @@ import { Flex, H1, P } from '@gobob/ui'; import { StyledBannerContent, StyledOnrampBanner, StyledOnrampGraphic } from './BannerCarousel.style'; -const OnrampBanner = () => { - return ( - - - -

- BOB Onramp is live! -

- -

The fastest anda easiest way to bridge BTC to BOB

- - - - ); +type OnrampBannerProps = { + onPress?: () => void; }; +const OnrampBanner = ({ onPress }: OnrampBannerProps) => ( + + + +

+ BOB Onramp is live! +

+ +

The fastest and easiest way to bridge BTC to BOB

+ + + +); + export { OnrampBanner }; diff --git a/apps/evm/src/pages/Bridge/components/BridgeForm/BridgeForm.tsx b/apps/evm/src/pages/Bridge/components/BridgeForm/BridgeForm.tsx index e800e7294..9904f3b0b 100644 --- a/apps/evm/src/pages/Bridge/components/BridgeForm/BridgeForm.tsx +++ b/apps/evm/src/pages/Bridge/components/BridgeForm/BridgeForm.tsx @@ -1,7 +1,7 @@ import { ChainId } from '@gobob/chains'; import { TBTC } from '@gobob/tokens'; import { ArrowRight, Divider, Flex, InformationCircle, P, RadioGroup } from '@gobob/ui'; -import { Key, useCallback, useEffect, useMemo, useState } from 'react'; +import { Key, useCallback, useMemo, useState } from 'react'; import { L1_CHAIN, L2_CHAIN } from '../../../../constants'; import { FeatureFlags, useFeatureFlag, useTokens } from '../../../../hooks'; @@ -30,11 +30,13 @@ type OnRampTransactionModalState = { }; type BridgeFormProps = { + chain: ChainId | 'BTC'; type: 'deposit' | 'withdraw'; ticker?: string; bridgeOrigin?: BridgeOrigin; onChangeNetwork?: (network: Key) => void; onChangeOrigin?: (origin: BridgeOrigin) => void; + onChangeChain?: (chain: ChainId | 'BTC') => void; }; const allNetworks = [ @@ -54,8 +56,10 @@ const BridgeForm = ({ type = 'deposit', bridgeOrigin, ticker, + chain, onChangeNetwork, - onChangeOrigin + onChangeOrigin, + onChangeChain }: BridgeFormProps): JSX.Element => { const isBtcOnRampEnabled = useFeatureFlag(FeatureFlags.BTC_ONRAMP); @@ -70,12 +74,6 @@ const BridgeForm = ({ step: 'confirmation' }); - const [chain, setChain] = useState(L1_CHAIN); - - useEffect(() => { - setChain(L1_CHAIN); - }, [type]); - const handleStartBridge = (data: L2BridgeData) => { setBridgeModalState({ isOpen: true, data, step: 'confirmation' }); }; @@ -109,11 +107,11 @@ const BridgeForm = ({ (network: Key) => { const parsedNetwork = network === 'BTC' ? network : (Number(network) as ChainId); - setChain(parsedNetwork); + onChangeChain?.(parsedNetwork); onChangeNetwork?.(parsedNetwork); }, - [onChangeNetwork] + [onChangeNetwork, onChangeChain] ); const { data: tokens } = useTokens(L2_CHAIN); diff --git a/knip.config.js b/knip.config.js index 5a78fc3ac..0d8a5a9e5 100644 --- a/knip.config.js +++ b/knip.config.js @@ -2,7 +2,12 @@ const config = { ignoreWorkspaces: ['apps/e2e'], ignoreBinaries: ['synpress:run'], - ignore: ['apps/evm/src/pages/Home/**', 'apps/evm/api/**', 'packages/currency/src/constants.ts'] + ignore: [ + 'apps/evm/src/pages/Home/**', + 'apps/evm/api/**', + 'packages/currency/src/constants.ts', + 'apps/evm/vite.config.ts' + ] }; export default config; diff --git a/package.json b/package.json index e188fd851..b26935f2d 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "typecheck": "turbo typecheck", "format:check": "prettier --check packages/**/src apps/**/src --cache", "format:write": "prettier --write packages/**/src apps/**/src --cache", - "files:check": "pnpm knip --config knip.config.js", + "files:check": "knip --config knip.config.js", "build": "turbo run build", "build:sb": "storybook build", "test": "jest --verbose --config ./jest.config.js packages/ui", diff --git a/packages/ui/src/components/Card/Card.style.tsx b/packages/ui/src/components/Card/Card.style.tsx index 08d880126..596cd8446 100644 --- a/packages/ui/src/components/Card/Card.style.tsx +++ b/packages/ui/src/components/Card/Card.style.tsx @@ -32,7 +32,7 @@ const StyledCard = styled(Flex)` ${baseCss} &:focus { - ${$isPressable && theme.card.focus} + ${$isPressable && $bordered && theme.card.focus} } `; }}