setup layer2onboard component for cexonboard

Author: corwintines

src/components/Layer2/Layer2Onboard.tsx

@@ -3,6 +3,7 @@ import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image"
 import React, { useState } from "react"
 import styled from "@emotion/styled"
 import { useIntl } from "react-intl"
+import { Stack, Text } from "@chakra-ui/react"
 
 // Components
 import ButtonLink from "../ButtonLink"
@@ -211,9 +212,13 @@ const Layer2Onboard: React.FC<IProps> = ({
 }) => {
   const intl = useIntl()
 
-  const [selectedCexOnboard, setSelectedCexOnboard] = useState<CexOnboard>()
-  const [selectedExchange, setSelectedExchange] = useState<Exchange>()
-  const [selectedL2, setSelectedL2] = useState<Layer2>()
+  const [selectedCexOnboard, setSelectedCexOnboard] = useState<
+    CexOnboard | undefined
+  >(undefined)
+  const [selectedExchange, setSelectedExchange] = useState<
+    Exchange | undefined
+  >(undefined)
+  const [selectedL2, setSelectedL2] = useState<Layer2 | undefined>(undefined)
 
   const layer2Options: Array<Layer2Option> = layer2DataCombined.map((l2) => {
     return {
@@ -243,6 +248,41 @@ const Layer2Onboard: React.FC<IProps> = ({
     }
   )
 
+  const formatGroupLabel = (data) => {
+    console.log(data)
+    return data.label ? (
+      <Stack borderTop="2px solid" m={0}>
+        <Text mb={0} mt={2} textTransform="none" color="body">
+          {data.label}
+        </Text>
+      </Stack>
+    ) : (
+      <></>
+    )
+  }
+
+  const selectExchangeOnboard = (option: ExchangeOption | CexOnboardOption) => {
+    if (Object.hasOwn(option, "cex")) {
+      trackCustomEvent({
+        eventCategory: `Selected cex to onboard`,
+        eventAction: `Clicked`,
+        eventName: `${option.cex.name} selected`,
+        eventValue: `${option.cex.name}`,
+      })
+      setSelectedExchange(option.cex)
+      setSelectedCexOnboard(undefined)
+    } else {
+      trackCustomEvent({
+        eventCategory: `Selected cexOnboard to onboard`,
+        eventAction: `Clicked`,
+        eventName: `${option.cexOnboard.name} selected`,
+        eventValue: `${option.cexOnboard.name}`,
+      })
+      setSelectedCexOnboard(option.cexOnboard)
+      setSelectedExchange(undefined)
+    }
+  }
+
   return (
     <Content>
       <Description>
@@ -325,39 +365,31 @@ const Layer2Onboard: React.FC<IProps> = ({
         </RightDescription>
         <RightSelect>
           <StyledSelect
-            // TODO: style this label
             className="react-select-container"
             classNamePrefix="react-select"
             options={[
               {
                 options: [...cexSupportOptions],
               },
               {
-                // TODO: Add cex onboard label here
-                label: "Test",
+                label:
+                  "Don't see you exchange? Use dapps to bridge directly from exchanges to layer 2.",
                 options: [...cexOnboardOptions],
               },
             ]}
-            onChange={(selectedOption: ExchangeOption) => {
-              trackCustomEvent({
-                eventCategory: `Selected cex to onboard`,
-                eventAction: `Clicked`,
-                eventName: `${selectedOption.cex.name} selected`,
-                eventValue: `${selectedOption.cex.name}`,
-              })
-              // TODO: refactor this to use both selected exchange and selected cex onboard
-              setSelectedExchange(selectedOption.cex)
+            onChange={(selectedOption: ExchangeOption | CexOnboardOption) => {
+              selectExchangeOnboard(selectedOption)
             }}
             placeholder={translateMessageId(
               "layer-2-onboard-exchange-input-placeholder",
               intl
             )}
+            formatGroupLabel={formatGroupLabel}
           />
         </RightSelect>
         <EthLogo>
           <Image image={ethIcon} objectFit="contain" alt={ethIconAlt} />
         </EthLogo>
-        {/* TODO: Add markdown for rendering cex onboard content */}
         {selectedExchange && (
           <RightSelected>
             <SelectedContainer>
@@ -391,6 +423,21 @@ const Layer2Onboard: React.FC<IProps> = ({
             </SelectedContainer>
           </RightSelected>
         )}
+        {selectedCexOnboard && (
+          <RightSelected>
+            <SelectedContainer>
+              <H3>Supported exchanges</H3>
+              <p>{selectedCexOnboard.cex_support.join(", ")}</p>
+              <H3>Supported layer 2s</H3>
+              <p>{selectedCexOnboard.network_support.join(", ")}</p>
+              <ButtonLink to={selectedCexOnboard.url}>
+                {`${translateMessageId("layer-2-go-to", intl)} ${
+                  selectedCexOnboard.name
+                }`}
+              </ButtonLink>
+            </SelectedContainer>
+          </RightSelected>
+        )}
       </Grid>
     </Content>
   )