Merge pull request #767 from iron-fish/roll-back-bridge-launch

Roll back bridge launch

Author: dgca

components/BridgeDropdown/BridgeDropdown.tsx

@@ -28,14 +28,21 @@ export function BridgeDropdown() {
   return (
     <Box position="relative">
       <ButtonContents hidden />
-      <ButtonContents position="absolute" top={0} left={0} zIndex={1} />
+      <ButtonContents
+        disabled
+        position="absolute"
+        top={0}
+        left={0}
+        zIndex={1}
+      />
     </Box>
   );
 }
 
 function ButtonContents({
   hidden,
   children,
+  disabled,
   ...rest
 }: BoxProps & {
   hidden?: boolean;
@@ -54,11 +61,36 @@ function ButtonContents({
       borderRadius={28}
       onClick={toggleIsOpen}
       w="100%"
+      disabled={disabled}
+      _disabled={{
+        cursor: "not-allowed",
+        bg: "#F3F3F4",
+      }}
       {...rest}
     >
-      <Flex px={10} h={14} alignItems="center" gap={2} justifyContent="center">
-        <Text fontSize="xl">Bridge</Text>
-        {isOpen ? <IoChevronUp size={20} /> : <IoChevronDown size={20} />}
+      <Flex
+        flexDir="column"
+        px={10}
+        h={14}
+        alignItems="center"
+        gap={disabled ? 0 : 2}
+        justifyContent="center"
+      >
+        {disabled ? (
+          <>
+            <Text lineHeight="1.2" fontSize="sm" color="#686868">
+              {formatMessage(messages.bridge)}
+            </Text>
+            <Text whiteSpace="nowrap" fontSize="xs" color="#686868">
+              {formatMessage(messages.comingSoon)}
+            </Text>
+          </>
+        ) : (
+          <>
+            <Text fontSize="xl">Bridge</Text>
+            {isOpen ? <IoChevronUp size={20} /> : <IoChevronDown size={20} />}
+          </>
+        )}
       </Flex>
       {!hidden && isOpen && (
         <>

components/HomePage/Hero/Hero.tsx

@@ -117,15 +117,15 @@ export function Hero() {
         >
           <Box width="100%">
             <AspectRatio position="relative" ratio={657 / 424}>
-              <VideoPopup videoUrl="https://x3mk3ilmgdzxy3rj.public.blob.vercel-storage.com/hero-video-vGWSDl6a97OlvBkJuv3tXnzqGJOwDD.mp4">
-                <Image
-                  priority
-                  src="/images/home/hero-video.png"
-                  alt=""
-                  style={{ objectFit: "contain" }}
-                  fill
-                />
-              </VideoPopup>
+              {/* <VideoPopup videoUrl="https://x3mk3ilmgdzxy3rj.public.blob.vercel-storage.com/hero-video-vGWSDl6a97OlvBkJuv3tXnzqGJOwDD.mp4"> */}
+              <Image
+                priority
+                src="/images/home/hero-video.png"
+                alt=""
+                style={{ objectFit: "contain" }}
+                fill
+              />
+              {/* </VideoPopup> */}
             </AspectRatio>
           </Box>
         </GridItem>

components/HomePage/Safety/Safety.tsx

@@ -178,6 +178,7 @@ export function Safety() {
         >
           <GridItem display="flex" alignItems="stretch">
             <ItemCard
+              comingSoon
               name={formatMessage(messages.chainPortBridge)}
               description={formatMessage(messages.chainPortBridgeDescription)}
               href="https://app.chainport.io/?from=ETHEREUM&token=USDC&to=IRONFISH&token=USDC"
@@ -198,6 +199,7 @@ export function Safety() {
 
           <GridItem display="flex" alignItems="stretch">
             <ItemCard
+              comingSoon
               name="Bridge.IronFish"
               description={formatMessage(messages.ironFishBridgeDescription)}
               href="https://bridge.ironfish.network/"
@@ -261,6 +263,7 @@ type ItemCardProps = {
   linkText: string;
   imageSrc: StaticImageData;
   imageContainerProps?: ComponentProps<typeof HStack>;
+  comingSoon?: boolean;
 } & Omit<ShadowBoxProps, "children">;
 
 function ItemCard({
@@ -270,14 +273,21 @@ function ItemCard({
   linkText,
   imageSrc,
   imageContainerProps,
+  comingSoon,
   ...rest
 }: ItemCardProps) {
+  const linkProps = comingSoon
+    ? null
+    : {
+        as: Link,
+        href,
+        target: href.startsWith("http") ? "_blank" : undefined,
+        rel: href.startsWith("http") ? "noreferrer" : undefined,
+      };
+
   return (
     <ShadowBox
-      as={Link}
-      href={href}
-      target={href.startsWith("http") ? "_blank" : undefined}
-      rel={href.startsWith("http") ? "noreferrer" : undefined}
+      {...linkProps}
       bg="#242424"
       borderColor="#3B3B3B"
       shadowColor="#242424"
@@ -311,7 +321,15 @@ function ItemCard({
       <Text color="white" textStyle="md" mb={8}>
         {description}
       </Text>
-      <FancyLink color="pink.400">{linkText}</FancyLink>
+      {comingSoon ? (
+        <Box mb={8} bg="#2F3A1F" borderRadius="4px">
+          <Text px={6} py={2} color="#C7F182">
+            Coming Soon
+          </Text>
+        </Box>
+      ) : (
+        <FancyLink color="pink.400">{linkText}</FancyLink>
+      )}
 
       <HStack flexGrow={1} alignItems="flex-end" {...imageContainerProps}>
         <Image src={imageSrc} alt={name} />