Merge pull request #750 from iron-fish/website-bridge-launch

Makes video and all links live for launch

Author: dgca

components/BridgeDropdown/BridgeDropdown.tsx

@@ -28,21 +28,14 @@ export function BridgeDropdown() {
   return (
     <Box position="relative">
       <ButtonContents hidden />
-      <ButtonContents
-        disabled
-        position="absolute"
-        top={0}
-        left={0}
-        zIndex={1}
-      />
+      <ButtonContents position="absolute" top={0} left={0} zIndex={1} />
     </Box>
   );
 }
 
 function ButtonContents({
   hidden,
   children,
-  disabled,
   ...rest
 }: BoxProps & {
   hidden?: boolean;
@@ -61,36 +54,11 @@ function ButtonContents({
       borderRadius={28}
       onClick={toggleIsOpen}
       w="100%"
-      disabled={disabled}
-      _disabled={{
-        cursor: "not-allowed",
-        bg: "#F3F3F4",
-      }}
       {...rest}
     >
-      <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 px={10} h={14} alignItems="center" gap={2} justifyContent="center">
+        <Text fontSize="xl">Bridge</Text>
+        {isOpen ? <IoChevronUp size={20} /> : <IoChevronDown size={20} />}
       </Flex>
       {!hidden && isOpen && (
         <>
@@ -115,7 +83,7 @@ function BridgeLink({ direction }: { direction: "out" | "in" }) {
       href={
         direction === "out"
           ? "https://bridge.ironfish.network/"
-          : "https://app.chainport.io/?from=ETHEREUM&to=IRONFISH"
+          : "https://app.chainport.io/?from=ETHEREUM&token=USDC&to=IRONFISH&token=USDC"
       }
       target="_blank"
       rel="noreferrer"

components/HomePage/Hero/Hero.tsx

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

@@ -137,7 +137,7 @@ export function Safety() {
               name={formatMessage(messages.nodeApp)}
               description={formatMessage(messages.nodeAppDescription)}
               href="/use/node-app"
-              ctaText={formatMessage(messages.nodeAppLink)}
+              linkText={formatMessage(messages.nodeAppLink)}
               imageSrc={nodeAppImage}
             />
           </GridItem>
@@ -147,7 +147,7 @@ export function Safety() {
               name={formatMessage(messages.oreoWallet)}
               description={formatMessage(messages.oreoWalletDescription)}
               href="https://oreowallet.com/"
-              ctaText={formatMessage(messages.oreoWalletLink)}
+              linkText={formatMessage(messages.oreoWalletLink)}
               imageSrc={oreoWalletImage}
             />
           </GridItem>
@@ -180,8 +180,8 @@ export function Safety() {
             <ItemCard
               name={formatMessage(messages.chainPortBridge)}
               description={formatMessage(messages.chainPortBridgeDescription)}
-              // href="https://app.chainport.io/?from=ETHEREUM&to=IRONFISH"
-              ctaText="COMING SOON"
+              href="https://app.chainport.io/?from=ETHEREUM&to=IRONFISH"
+              linkText={formatMessage(messages.chainPortBridgeLink)}
               imageSrc={chainportImage}
               imageContainerProps={{
                 paddingTop: {
@@ -200,8 +200,8 @@ export function Safety() {
             <ItemCard
               name="Bridge.IronFish"
               description={formatMessage(messages.ironFishBridgeDescription)}
-              // href="https://bridge.ironfish.network/"
-              ctaText="COMING SOON"
+              href="https://bridge.ironfish.network/"
+              linkText={formatMessage(messages.ironFishBridgeLink)}
               imageSrc={bridgeIronFishImage}
               imageContainerProps={{
                 padding: {
@@ -257,8 +257,8 @@ function FancyLink({
 type ItemCardProps = {
   name: string;
   description: string;
-  href?: string;
-  ctaText: string;
+  href: string;
+  linkText: string;
   imageSrc: StaticImageData;
   imageContainerProps?: ComponentProps<typeof HStack>;
 } & Omit<ShadowBoxProps, "children">;
@@ -267,24 +267,17 @@ function ItemCard({
   name,
   description,
   href,
-  ctaText,
+  linkText,
   imageSrc,
   imageContainerProps,
   ...rest
 }: ItemCardProps) {
-  const isLink = !!href;
-  const linkProps = isLink
-    ? {
-        as: Link,
-        href,
-        target: href.startsWith("http") ? "_blank" : undefined,
-        rel: href.startsWith("http") ? "noreferrer" : undefined,
-      }
-    : null;
-
   return (
     <ShadowBox
-      {...linkProps}
+      as={Link}
+      href={href}
+      target={href.startsWith("http") ? "_blank" : undefined}
+      rel={href.startsWith("http") ? "noreferrer" : undefined}
       bg="#242424"
       borderColor="#3B3B3B"
       shadowColor="#242424"
@@ -312,21 +305,13 @@ function ItemCard({
       }}
       {...rest}
     >
-      <Text mb={8} as="h3" textStyle="h4" color="white">
+      <Text as="h3" textStyle="h4" color="white" mb={8}>
         {name}
       </Text>
       <Text color="white" textStyle="md" mb={8}>
         {description}
       </Text>
-      {isLink ? (
-        <FancyLink color="pink.400">{ctaText}</FancyLink>
-      ) : (
-        <Box mb={8} bg="#2F3A1F" borderRadius="4px">
-          <Text px={6} py={2} color="#C7F182">
-            {ctaText}
-          </Text>
-        </Box>
-      )}
+      <FancyLink color="pink.400">{linkText}</FancyLink>
 
       <HStack flexGrow={1} alignItems="flex-end" {...imageContainerProps}>
         <Image src={imageSrc} alt={name} />