diff --git a/apps/evm/src/components/Layout/Header.tsx b/apps/evm/src/components/Layout/Header.tsx index 756ec478e..2b47a1bdf 100644 --- a/apps/evm/src/components/Layout/Header.tsx +++ b/apps/evm/src/components/Layout/Header.tsx @@ -15,7 +15,7 @@ import { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useTheme } from 'styled-components'; -import { RoutesPath } from '../../constants'; +import { DocsLinks, RoutesPath } from '../../constants'; import { Logo } from '../Logo'; import { SocialsGroup } from '../SocialsGroup'; @@ -78,7 +78,7 @@ const Header = ({ isTestnet, isFusion, ...props }: HeaderProps): JSX.Element => > {t('navigation.t_and_c')} - + {t('navigation.dev')} diff --git a/apps/evm/src/components/Layout/Sidebar.tsx b/apps/evm/src/components/Layout/Sidebar.tsx index dbcecc03e..c297e5502 100644 --- a/apps/evm/src/components/Layout/Sidebar.tsx +++ b/apps/evm/src/components/Layout/Sidebar.tsx @@ -2,7 +2,7 @@ import { Button, Flex, XMark, useMediaQuery } from '@gobob/ui'; import { useTranslation } from 'react-i18next'; import { useTheme } from 'styled-components'; -import { RoutesPath } from '../../constants'; +import { DocsLinks, RoutesPath } from '../../constants'; import { Logo } from '../Logo'; import { SocialsGroup } from '../SocialsGroup'; @@ -48,7 +48,7 @@ const Sidebar = ({ isTestnet, isFusion }: SidebarProps): JSX.Element | null => { > {t('navigation.t_and_c')} - + {t('navigation.dev')} diff --git a/apps/evm/src/components/SocialsGroup/SocialsGroup.tsx b/apps/evm/src/components/SocialsGroup/SocialsGroup.tsx index 2b47dcae4..4cd441eba 100644 --- a/apps/evm/src/components/SocialsGroup/SocialsGroup.tsx +++ b/apps/evm/src/components/SocialsGroup/SocialsGroup.tsx @@ -1,6 +1,8 @@ import { Button, ButtonProps, Flex, FlexProps } from '@gobob/ui'; import { Discord, Twitter } from '@gobob/icons'; +import { DocsLinks } from '../../constants'; + type Props = { showDocs?: boolean; variant?: ButtonProps['variant']; @@ -20,7 +22,7 @@ const SocialsGroup = ({ {showDocs && ( diff --git a/apps/evm/src/constants/links.ts b/apps/evm/src/constants/links.ts index c98716f7a..1f7e73a4a 100644 --- a/apps/evm/src/constants/links.ts +++ b/apps/evm/src/constants/links.ts @@ -7,4 +7,9 @@ const NotionLinks = { 'https://build-on-bitcoin.notion.site/BOB-Launch-Partner-Checklist-12b6da11f607438c82494be34c0f0c58' }; -export { SocialLinks, NotionLinks }; +const DocsLinks = { + HOME: 'https://docs.gobob.xyz/', + OP_STACK: 'https://docs.gobob.xyz/docs/learn/bob-stack/op-stack' +}; + +export { SocialLinks, NotionLinks, DocsLinks }; diff --git a/apps/evm/src/constants/local-storage.ts b/apps/evm/src/constants/local-storage.ts index 733d96bf6..2589adb00 100644 --- a/apps/evm/src/constants/local-storage.ts +++ b/apps/evm/src/constants/local-storage.ts @@ -1,5 +1,6 @@ enum LocalStorageKey { HIDE_ECOSYSTEM_BANNER = 'hideEcosystemBanner', - HIDE_INFO_TAB_UNVISITED_MARK = 'hideInfoTabUnvisitedMark' + HIDE_INFO_TAB_UNVISITED_MARK = 'hideInfoTabUnvisitedMark', + HIDE_FAULT_PROOFS_NOTICE = 'hideFaultsProofsNotice' } export { LocalStorageKey }; diff --git a/apps/evm/src/pages/Bridge/Bridge.tsx b/apps/evm/src/pages/Bridge/Bridge.tsx index c8f0d8687..d82a90ee5 100644 --- a/apps/evm/src/pages/Bridge/Bridge.tsx +++ b/apps/evm/src/pages/Bridge/Bridge.tsx @@ -1,11 +1,11 @@ -import { ArrowTopRightOnSquare, Flex, H1, P, Tabs, TabsItem, XMark } from '@gobob/ui'; +import { Alert, ArrowTopRightOnSquare, Flex, H1, P, Strong, Tabs, TabsItem, TextLink, XMark } from '@gobob/ui'; import { Key, useCallback, useEffect, useMemo, useState } from 'react'; import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'; import { ChainId, getChainIdByChainName, getChainName } from '@gobob/chains'; import { useLocalStorage } from '@uidotdev/usehooks'; import { Main } from '../../components'; -import { L1_CHAIN, L2_CHAIN, LocalStorageKey, RoutesPath } from '../../constants'; +import { L1_CHAIN, L2_CHAIN, LocalStorageKey, DocsLinks, RoutesPath } from '../../constants'; import bannerSrc from '../../assets/ecosystem-banner.png'; import { FeatureFlags, useFeatureFlag } from '../../hooks'; @@ -56,6 +56,10 @@ const Bridge = () => { ); const isBtcOnRampEnabled = useFeatureFlag(FeatureFlags.BTC_ONRAMP); + const [isFaultProofNoticeHidden, setFaultProofNoticeHidden] = useLocalStorage( + LocalStorageKey.HIDE_FAULT_PROOFS_NOTICE + ); + const handleChangeTab = useCallback((key: any) => { setType(key as any); setBridgeOrigin(key === 'deposit' ? BridgeOrigin.INTERNAL : BridgeOrigin.EXTERNAL); @@ -92,6 +96,10 @@ const Bridge = () => { setBridgeOrigin(BridgeOrigin.INTERNAL); }, []); + const handleCloseFaultProofNotice = useCallback(() => { + setFaultProofNoticeHidden(true); + }, [setFaultProofNoticeHidden]); + useEffect(() => { const searchParams = new URLSearchParams(window.location.search); @@ -113,66 +121,80 @@ const Bridge = () => { }, [chain]); return ( -
- {isBtcOnRampEnabled ? ( - - ) : ( - !isEcosystemBannerHidden && ( - navigate(RoutesPath.FUSION, { state: { scrollEcosystem: true } })} - > - setEcosystemBannerVisibility(true)} - > - - - - -

- BOB Ecosystem -

- -

Discover the most exciting projects on BOB.

- - - - ) - )} - - - - - <> - - - <> - - - +
+ {isBtcOnRampEnabled ? ( + - - - -
+ ) : ( + !isEcosystemBannerHidden && ( + navigate(RoutesPath.FUSION, { state: { scrollEcosystem: true } })} + > + setEcosystemBannerVisibility(true)} + > + + + + +

+ BOB Ecosystem +

+ +

Discover the most exciting projects on BOB.

+ + + + ) + )} + {!isFaultProofNoticeHidden && ( + +

+ NOTICE: Fault Proofs are coming to BOB. Withdrawals starting on + July 4 will need to be proven again after July 10, requiring at least 7 days to be finalised. Consider + waiting until the upgrade is complete or using 3rd Party bridge for withdrawals during this period.{' '} + + Click here for more info. + +

+ + )} + + + + + <> + + + <> + + + + + + +
+ ); }; diff --git a/apps/evm/src/pages/Fusion/components/PartnersSection/PartnerCard.tsx b/apps/evm/src/pages/Fusion/components/PartnersSection/PartnerCard.tsx index 2263ad998..f9c05d92f 100644 --- a/apps/evm/src/pages/Fusion/components/PartnersSection/PartnerCard.tsx +++ b/apps/evm/src/pages/Fusion/components/PartnersSection/PartnerCard.tsx @@ -7,9 +7,6 @@ import { Dt, Flex, H3, - MedalBronze, - MedalGold, - MedalSilver, P, Popover, PopoverBody, @@ -21,6 +18,7 @@ import { } from '@gobob/ui'; import { ReactNode, useCallback } from 'react'; import { useTheme } from 'styled-components'; +import { MedalBronze, MedalGold, MedalSilver } from '@gobob/icons'; import { StyledCategoryTag, StyledIconWrapper, StyledLiveTag, StyledPartnerCard } from './PartnerCard.style'; diff --git a/packages/ui/src/icons/MedalBronze.tsx b/packages/icons/src/MedalBronze.tsx similarity index 98% rename from packages/ui/src/icons/MedalBronze.tsx rename to packages/icons/src/MedalBronze.tsx index cb3fc062b..1746b30d7 100644 --- a/packages/ui/src/icons/MedalBronze.tsx +++ b/packages/icons/src/MedalBronze.tsx @@ -1,7 +1,6 @@ +import { Icon, IconProps } from '@gobob/ui'; import { forwardRef } from 'react'; -import { Icon, IconProps } from '../components'; - const MedalBronze = forwardRef((props, ref) => ( ((props, ref) => ( ((props, ref) => ( diff --git a/packages/icons/src/index.ts b/packages/icons/src/index.ts index ca8e2634b..bfa5c5871 100644 --- a/packages/icons/src/index.ts +++ b/packages/icons/src/index.ts @@ -21,3 +21,6 @@ export { BNB } from './BNB'; export { Optimism } from './Optimism'; export { Base } from './Base'; export { Moonbeam } from './Moonbeam'; +export { MedalBronze } from './MedalBronze'; +export { MedalGold } from './MedalGold'; +export { MedalSilver } from './MedalSilver'; diff --git a/packages/ui/src/components/TextLink/TextLink.style.tsx b/packages/ui/src/components/TextLink/TextLink.style.tsx index 672849fd0..1ed537ec4 100644 --- a/packages/ui/src/components/TextLink/TextLink.style.tsx +++ b/packages/ui/src/components/TextLink/TextLink.style.tsx @@ -26,8 +26,9 @@ const BaseTextLink = styled.a` const StyledIcon = styled(ArrowTopRightOnSquare)` margin-left: ${({ theme }) => theme.spacing('s')}; - width: 1em; - height: 1em; + // FIXME: remove important + width: 1em !important; + height: 1em !important; color: inherit; `; diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts index 616b52035..79f53ae65 100644 --- a/packages/ui/src/components/index.ts +++ b/packages/ui/src/components/index.ts @@ -6,6 +6,8 @@ export { Avatar } from './Avatar'; export type { AvatarProps } from './Avatar'; export { BreadcrumbItem, Breadcrumbs } from './Breadcrumbs'; export type { BreadcrumbItemProps, BreadcrumbsProps } from './Breadcrumbs'; +export { Button } from './Button'; +export type { ButtonProps } from './Button'; export { CSSReset } from './CSSReset'; export { Card } from './Card'; export type { CardProps } from './Card'; @@ -17,6 +19,8 @@ export { Field, useFieldProps } from './Field'; export type { FieldProps } from './Field'; export { Flex } from './Flex'; export type { FlexProps } from './Flex'; +export { Icon } from './Icon'; +export type { IconProps } from './Icon'; export { Input } from './Input'; export type { InputProps } from './Input'; export { Label } from './Label'; @@ -27,6 +31,8 @@ export { Modal, ModalBody, ModalFooter, ModalHeader } from './Modal'; export type { ModalBodyProps, ModalFooterProps, ModalHeaderProps, ModalProps } from './Modal'; export { NumberInput } from './NumberInput'; export type { NumberInputProps } from './NumberInput'; +export { Overlay, Underlay } from './Overlay'; +export type { OverlayProps, UnderlayProps } from './Overlay'; export { Popover, PopoverBody, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger } from './Popover'; export type { PopoverBodyProps, @@ -41,9 +47,11 @@ export type { ProgressBarProps } from './ProgressBar'; export { Radio, RadioGroup } from './Radio'; export type { RadioGroupProps, RadioProps } from './Radio'; export { Item, Select, SelectTrigger } from './Select'; -export type { SelectProps, SelectTriggerProps, ListboxSelectProps, ModalSelectProps } from './Select'; +export type { ListboxSelectProps, ModalSelectProps, SelectProps, SelectTriggerProps } from './Select'; export { Spinner } from './Spinner'; export type { SpinnerProps } from './Spinner'; +export { Stepper, StepperItem } from './Stepper'; +export type { StepperItemProps, StepperProps } from './Stepper'; export { Switch } from './Switch'; export type { SwitchProps } from './Switch'; export { Table } from './Table'; @@ -56,7 +64,6 @@ export type { DlGroupProps, DlProps, DtProps, - TextProps, EmProps, H1Props, H2Props, @@ -66,7 +73,8 @@ export type { H6Props, PProps, SpanProps, - StrongProps + StrongProps, + TextProps } from './Text'; export { TextArea } from './TextArea'; export type { TextAreaProps } from './TextArea'; @@ -76,15 +84,7 @@ export { TokenInput, TokenListItem } from './TokenInput'; export type { TokenData, TokenInputProps, TokenListItemProps, TokenSelectProps } from './TokenInput'; export { Tooltip } from './Tooltip'; export type { TooltipProps } from './Tooltip'; -export { Button } from './Button'; -export type { ButtonProps } from './Button'; export { UnstyledButton } from './UnstyledButton'; export type { UnstyledButtonProps } from './UnstyledButton'; -export { Stepper, StepperItem } from './Stepper'; -export type { StepperProps, StepperItemProps } from './Stepper'; -export { Icon } from './Icon'; -export type { IconProps } from './Icon'; -export { Overlay, Underlay } from './Overlay'; -export type { OverlayProps, UnderlayProps } from './Overlay'; export { toast, useToast, useToastContainer } from './Toast'; diff --git a/packages/ui/src/icons/index.ts b/packages/ui/src/icons/index.ts index 3fe85548b..a010c43eb 100644 --- a/packages/ui/src/icons/index.ts +++ b/packages/ui/src/icons/index.ts @@ -27,9 +27,6 @@ export { EllipsisVertical } from './EllipsisVertical'; export { ExclamationCircle } from './ExclamationCircle'; export { InformationCircle } from './InformationCircle'; export { ListBullet } from './ListBullet'; -export { MedalBronze } from './MedalBronze'; -export { MedalGold } from './MedalGold'; -export { MedalSilver } from './MedalSilver'; export { PencilSquare } from './PencilSquare'; export { Photo } from './Photo'; export { PlusCircle } from './PlusCircle';