feat: add fraud proofs banner to bridge

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')}
                     </NavItem>
-                    <NavItem isExternal size='s' to='https://docs.gobob.xyz/'>
+                    <NavItem isExternal size='s' to={DocsLinks.HOME}>
                       {t('navigation.dev')}
                     </NavItem>
                     <NavItem isExternal size='s' to='https://gobob.xyz/'>

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')}
               </NavItem>
-              <NavItem isExternal to='https://docs.gobob.xyz/'>
+              <NavItem isExternal to={DocsLinks.HOME}>
                 {t('navigation.dev')}
               </NavItem>
               <NavItem isExternal to='https://gobob.xyz/'>

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 = ({
   <Flex gap={gap} justifyContent={justifyContent} {...props}>
     {showDocs && (
       <Button asChild isIconOnly size='s' variant={variant}>
-        <a href='https://docs.gobob.xyz/' rel='noreferrer' target='_blank'>
+        <a href={DocsLinks.HOME} rel='noreferrer' target='_blank'>
           Docs
         </a>
       </Button>

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 };

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 };

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 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 @@
     setBridgeOrigin(BridgeOrigin.INTERNAL);
   }, []);
 
+  const handleCloseFaultProofNotice = useCallback(() => {
+    setFaultProofNoticeHidden(true);
+  }, [setFaultProofNoticeHidden]);
+
   useEffect(() => {
     const searchParams = new URLSearchParams(window.location.search);
 
@@ -113,66 +121,80 @@
   }, [chain]);
 
   return (
-    <Main maxWidth='5xl' padding='md'>
-      {isBtcOnRampEnabled ? (
-        <BannerCarousel
-          onPressEcosystemBanner={handlePressEcosystemBanner}
-          onPressOnrampBanner={handlePressOnrampBanner}
-        />
-      ) : (
-        !isEcosystemBannerHidden && (
-          <StyledBanner
-            isHoverable
-            isPressable
-            aria-label='navigate to ecosystem section in fusion page'
-            paddingX='2xl'
-            paddingY='4xl'
-            onPress={() => navigate(RoutesPath.FUSION, { state: { scrollEcosystem: true } })}
-          >
-            <StyledBannerCloseBtn
-              isIconOnly
-              aria-label='close banner'
-              size='s'
-              variant='ghost'
-              onPress={() => setEcosystemBannerVisibility(true)}
-            >
-              <XMark />
-            </StyledBannerCloseBtn>
-            <StyledBannerContent direction='column'>
-              <Flex alignItems='center'>
-                <H1 size='2xl' weight='bold'>
-                  BOB Ecosystem <ArrowTopRightOnSquare size='s' />
-                </H1>
-              </Flex>
-              <P>Discover the most exciting projects on BOB.</P>
-            </StyledBannerContent>
-            <StyledBannerImg alt='BOB ecosystem banner' src={bannerSrc} />
-          </StyledBanner>
-        )
-      )}
-      <StyledFlex alignItems='flex-start' direction={{ base: 'column', md: 'row' }} gap='2xl' marginTop='xl'>
-        <StyledCard>
-          <Tabs fullWidth selectedKey={type} size='lg' onSelectionChange={handleChangeTab}>
-            <TabsItem key='deposit' title='Deposit'>
-              <></>
-            </TabsItem>
-            <TabsItem key='withdraw' title='Withdraw'>
-              <></>
-            </TabsItem>
-          </Tabs>
-          <BridgeForm
-            bridgeOrigin={bridgeOrigin}
-            chain={chain}
-            ticker={location.state?.ticker}
-            type={type}
-            onChangeChain={handleChangeChain}
-            onChangeNetwork={handleChangeNetwork}
-            onChangeOrigin={handleChangeOrigin}
+    <>
+      <Main maxWidth='5xl' padding='md'>
+        {isBtcOnRampEnabled ? (
+          <BannerCarousel
+            onPressEcosystemBanner={handlePressEcosystemBanner}
+            onPressOnrampBanner={handlePressOnrampBanner}
           />
-        </StyledCard>
-        <TransactionList />
-      </StyledFlex>
-    </Main>
+        ) : (
+          !isEcosystemBannerHidden && (
+            <StyledBanner
+              isHoverable
+              isPressable
+              aria-label='navigate to ecosystem section in fusion page'
+              paddingX='2xl'
+              paddingY='4xl'
+              onPress={() => navigate(RoutesPath.FUSION, { state: { scrollEcosystem: true } })}
+            >
+              <StyledBannerCloseBtn
+                isIconOnly
+                aria-label='close banner'
+                size='s'
+                variant='ghost'
+                onPress={() => setEcosystemBannerVisibility(true)}
+              >
+                <XMark />
+              </StyledBannerCloseBtn>
+              <StyledBannerContent direction='column'>
+                <Flex alignItems='center'>
+                  <H1 size='2xl' weight='bold'>
+                    BOB Ecosystem <ArrowTopRightOnSquare size='s' />
+                  </H1>
+                </Flex>
+                <P>Discover the most exciting projects on BOB.</P>
+              </StyledBannerContent>
+              <StyledBannerImg alt='BOB ecosystem banner' src={bannerSrc} />
+            </StyledBanner>
+          )
+        )}
+        {!isFaultProofNoticeHidden && (
+          <Alert marginTop='xl' status='info' onClose={handleCloseFaultProofNotice}>
+            <P size='s'>
+              <Strong size='inherit'>NOTICE: Fault Proofs are coming to BOB.</Strong> 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.{' '}
+              <TextLink external icon href={`${DocsLinks.OP_STACK}#settlement`} size='inherit'>
+                Click here for more info.
+              </TextLink>
+            </P>
+          </Alert>
+        )}
+        <StyledFlex alignItems='flex-start' direction={{ base: 'column', md: 'row' }} gap='2xl' marginTop='xl'>
+          <StyledCard>
+            <Tabs fullWidth selectedKey={type} size='lg' onSelectionChange={handleChangeTab}>
+              <TabsItem key='deposit' title='Deposit'>
+                <></>
+              </TabsItem>
+              <TabsItem key='withdraw' title='Withdraw'>
+                <></>
+              </TabsItem>
+            </Tabs>
+            <BridgeForm
+              bridgeOrigin={bridgeOrigin}
+              chain={chain}
+              ticker={location.state?.ticker}
+              type={type}
+              onChangeChain={handleChangeChain}
+              onChangeNetwork={handleChangeNetwork}
+              onChangeOrigin={handleChangeOrigin}
+            />
+          </StyledCard>
+          <TransactionList />
+        </StyledFlex>
+      </Main>
+    </>
   );
 };
 

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';
 

packages/ui/src/icons/MedalBronze.tsx → 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<SVGSVGElement, IconProps>((props, ref) => (
   <Icon ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' {...props}>
     <path

packages/ui/src/icons/MedalGold.tsx → packages/icons/src/MedalGold.tsx

@@ -1,7 +1,6 @@
+import { Icon, IconProps } from '@gobob/ui';
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../components';
-
 const MedalGold = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' {...props}>
     <path

packages/ui/src/icons/MedalSilver.tsx → packages/icons/src/MedalSilver.tsx

@@ -1,6 +1,5 @@
 import { forwardRef } from 'react';
-
-import { Icon, IconProps } from '../components';
+import { Icon, IconProps } from '@gobob/ui';
 
 const MedalSilver = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' {...props}>

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';

packages/ui/src/components/TextLink/TextLink.style.tsx

@@ -26,8 +26,9 @@ const BaseTextLink = styled.a<BaseTextLinkProps>`
 
 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;
 `;
 

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';

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';