Merge branch 'main' into releases/mainnet/v1.3.0

.env

@@ -5,3 +5,4 @@ REACT_APP_MULTICALL_ADDRESS=$MULTICALL_ADDRESS
 
 REACT_APP_FEATURE_FLAG_TBTC_V2=false
 REACT_APP_FEATURE_FLAG_MULTI_APP_STAKING=true
+REACT_APP_FEATURE_FLAG_POSTHOG=false

.env.production

@@ -4,3 +4,6 @@ REACT_APP_ETH_HOSTNAME_WS=$ETH_HOSTNAME_WS
 
 REACT_APP_FEATURE_FLAG_TBTC_V2=false
 REACT_APP_FEATURE_FLAG_MULTI_APP_STAKING=true
+REACT_APP_FEATURE_FLAG_POSTHOG=$POSTHOG_SUPPORT
+REACT_APP_POSTHOG_API_KEY=$POSTHOG_API_KEY
+REACT_APP_POSTHOG_HOSTNAME_HTTP=$POSTHOG_HOSTNAME_HTTP

.github/workflows/dashboard-mainnet.yml

@@ -57,6 +57,9 @@ jobs:
           CHAIN_ID: 1
           ETH_HOSTNAME_HTTP: ${{ secrets.MAINNET_ETH_HOSTNAME_HTTP }}
           ETH_HOSTNAME_WS: ${{ secrets.MAINNET_ETH_HOSTNAME_WS }}
+          POSTHOG_SUPPORT: true
+          POSTHOG_API_KEY: ${{ secrets.MAINNET_POSTHOG_API_KEY }}
+          POSTHOG_HOSTNAME_HTTP: ${{ secrets.MAINNET_POSTHOG_HOSTNAME_HTTP }}
 
       - uses: actions/upload-artifact@v3
         with:

package.json

@@ -59,6 +59,7 @@
     "formik": "^2.2.9",
     "framer-motion": "^4",
     "numeral": "^2.0.6",
+    "posthog-js": "^1.32.2",
     "random-gradient": "^0.0.2",
     "react": "^17.0.2",
     "react-confetti": "^6.0.1",

src/App.tsx

@@ -46,6 +46,7 @@ import {
   useSubscribeToOperatorRegisteredEvent,
 } from "./hooks/staking-applications"
 import { useSaveConnectedAddressToStore } from "./hooks/useSaveConnectedAddressToStore"
+import { usePosthog } from "./hooks/posthog"
 
 const Web3EventHandlerComponent = () => {
   useSubscribeToVendingMachineContractEvents()
@@ -137,6 +138,7 @@ const AppBody = () => {
     dispatch(fetchETHPriceUSD())
   }, [dispatch])
 
+  usePosthog()
   useCheckBonusEligibility()
   useFetchStakingRewards()
   useSaveConnectedAddressToStore()

src/components/AnnouncementBanner/index.tsx

@@ -1,17 +1,16 @@
 import { FC } from "react"
-import { Link as RouterLink } from "react-router-dom"
 import {
   Card,
   H4,
   LabelMd,
-  Button,
   CloseButton,
   Stack,
   useDisclosure,
   Image,
   BoxProps,
   useMultiStyleConfig,
 } from "@threshold-network/components"
+import ButtonLink from "../ButtonLink"
 
 interface AnnouncementBannerProps {
   imgSrc: any
@@ -59,9 +58,9 @@ const AnnouncementBanner: FC<AnnouncementBannerProps & BoxProps> = ({
           {preTitle && <LabelMd sx={styles.preTitle}>{preTitle}</LabelMd>}
           <H4 sx={styles.title}>{title}</H4>
         </Stack>
-        <Button as={RouterLink} to={href} sx={styles.ctaButton}>
+        <ButtonLink to={href} sx={styles.ctaButton}>
           {buttonText}
-        </Button>
+        </ButtonLink>
       </Stack>
     </Card>
   )

src/components/ButtonLink/index.tsx

@@ -0,0 +1,23 @@
+import { FC } from "react"
+import { Button, ButtonProps, forwardRef } from "@threshold-network/components"
+import Link, { LinkProps } from "../Link"
+
+const style = {
+  textDecoration: "none",
+}
+
+const ButtonLink: FC<ButtonProps & LinkProps> = forwardRef(
+  ({ ...props }, ref) => {
+    return (
+      <Button
+        as={Link}
+        ref={ref}
+        textDecoration="none"
+        _hover={style}
+        {...props}
+      />
+    )
+  }
+)
+
+export default ButtonLink

src/components/CopyToClipboard/index.tsx

@@ -33,6 +33,7 @@ const CopyToClipboard: FC<CopyToClipboardProps> = ({
       >
         <IconButton
           icon={<CopyIcon />}
+          color="gray.500"
           onClick={onCopy}
           aria-label={copyTextMsg}
           variant="ghost"
@@ -54,7 +55,7 @@ export const CopyAddressToClipboard: FC<CopyAddressToClipboardProps> = ({
   address,
   ...restProps
 }) => {
-  const addressColor = useColorModeValue("brand.500", "brand.550")
+  const addressColor = useColorModeValue("brand.500", "brand.100")
   return (
     <CopyToClipboard textToCopy={address}>
       <BodyMd color={addressColor} {...restProps}>

src/components/DetailedLinkListItem/index.tsx

@@ -1,17 +1,16 @@
 import { FC } from "react"
-import { Link as RouterLink } from "react-router-dom"
 import {
   BodyLg,
   BodySm,
   BoxProps,
-  Button,
   Flex,
   Image,
   Square,
   Stack,
   useMultiStyleConfig,
 } from "@threshold-network/components"
-import ExternalLink from "../ExternalLink"
+import Link from "../Link"
+import ButtonLink from "../ButtonLink"
 
 export interface DetailedLinkListItemProps extends BoxProps {
   imgSrc?: any
@@ -50,22 +49,25 @@ const DetailedLinkListItem: FC<DetailedLinkListItemProps> = ({
         spacing={0}
         my={{ base: "2", sm: undefined }}
         mr={{ sm: "auto !important" }}
+        flex={1}
+        minWidth="0"
       >
         <BodyLg sx={styles.title}>{title}</BodyLg>
-        <BodySm sx={styles.subtitle}>{subtitle}</BodySm>
+        <BodySm sx={styles.subTitle}>{subtitle}</BodySm>
       </Stack>
       {isExternal ? (
-        <ExternalLink
+        <Link
+          isExternal
           href={href}
           sx={styles.link}
-          text={_linkText}
-          withArrow
           color={styles.link.color as string}
-        />
+        >
+          {_linkText}
+        </Link>
       ) : (
-        <Button sx={styles.link} variant="link" as={RouterLink} to={href}>
+        <ButtonLink sx={styles.link} variant="link" to={href}>
           {_linkText}
-        </Button>
+        </ButtonLink>
       )}
     </Flex>
   )

src/components/Forms/FormikInput.tsx

@@ -19,7 +19,7 @@ export const FormikInput: FC<
     name: string
     label: string
     secondaryLabel?: string
-    helperText?: string
+    helperText?: string | JSX.Element
     placeholder?: string
     tooltip?: string
   }

src/components/Forms/TokenAmountForm.tsx

@@ -1,5 +1,5 @@
 import { FC, Ref } from "react"
-import { Icon, Box } from "@chakra-ui/react"
+import { Icon, Box, ButtonProps, BodySm } from "@threshold-network/components"
 import { withFormik, FormikProps, FormikErrors } from "formik"
 import ThresholdCircleBrand from "../../static/icons/ThresholdCircleBrand"
 import { FormikTokenBalanceInput } from "./FormikTokenBalanceInput"
@@ -28,6 +28,7 @@ export type TokenAmountFormBaseProps = {
   token?: { decimals: number; symbol: string }
   placeholder?: string
   minTokenAmount?: string | number
+  submitButtonVariant?: ButtonProps["variant"]
 }
 
 export const TokenAmountFormBase: FC<
@@ -43,6 +44,7 @@ export const TokenAmountFormBase: FC<
   shouldValidateForm = true,
   shouldDisplayMaxAmountInLabel = false,
   placeholder,
+  submitButtonVariant = "solid",
   ...formikProps
 }) => {
   return (
@@ -53,12 +55,12 @@ export const TokenAmountFormBase: FC<
           shouldDisplayMaxAmountInLabel ? (
             <>
               <Box as="span">{label} </Box>
-              <Box as="span" float="right">
+              <BodySm as="span" float="right" color="gray.500">
                 {maxTokenAmount
                   ? formatTokenAmount(maxTokenAmount, undefined, token.decimals)
                   : "--"}{" "}
                 {token.symbol}
-              </Box>
+              </BodySm>
             </>
           ) : (
             label
@@ -76,6 +78,8 @@ export const TokenAmountFormBase: FC<
         w="100%"
         mt="6"
         submitText={submitButtonText}
+        variant={submitButtonVariant}
+        isDisabled={isDisabled}
       />
     </Form>
   )

src/components/InfoBox/index.tsx

@@ -11,7 +11,7 @@ const InfoBox: FC<{ text?: string; variant?: any } & StackProps> = ({
   const styles = useStyleConfig("InfoBox", { variant })
 
   return (
-    <Stack sx={styles} {...props}>
+    <Stack __css={styles} {...props}>
       {text && <H3>{text}</H3>}
       {children}
     </Stack>

src/components/ExternalLink/SharedLinks.tsx → src/components/Link/SharedLinks.tsx

@@ -4,8 +4,6 @@ import { BodySm } from "@threshold-network/components"
 import ViewInBlockExplorer from "../ViewInBlockExplorer"
 import { useTStakingContract } from "../../web3/hooks"
 import { ExplorerDataType } from "../../utils/createEtherscanLink"
-import { ExternalHref } from "../../enums"
-import ExternalLink from "."
 
 type StakingContractLearnMoreProps = ComponentProps<typeof BodySm>
 
@@ -30,17 +28,3 @@ export const StakingContractLearnMore: FC<StakingContractLearnMoreProps> = (
 
   return null
 }
-
-type StakingBonusReadMoreProps = ComponentProps<typeof BodySm>
-
-export const StakingBonusReadMore: FC<StakingBonusReadMoreProps> = (props) => {
-  return (
-    <BodySm mt="16" textAlign="center" {...props}>
-      Read more about the{" "}
-      <ExternalLink
-        href={ExternalHref.stakingBonusDocs}
-        text="Staking Bonus."
-      />
-    </BodySm>
-  )
-}

src/components/Link/index.tsx

@@ -0,0 +1,52 @@
+import { FC, ReactElement } from "react"
+import { Link as RouterLink } from "react-router-dom"
+import {
+  forwardRef,
+  Icon,
+  Link as ChakraLink,
+  LinkProps as ChakraLinkProps,
+  useColorModeValue,
+} from "@threshold-network/components"
+import { FiArrowUpRight } from "react-icons/all"
+
+interface CommonLinkProps {
+  icon?: ReactElement
+}
+
+type ConditionalLinkProps =
+  | { isExternal?: false; to: string; href?: never }
+  | { isExternal: true; to?: never; href: string }
+
+export type LinkProps = CommonLinkProps & ConditionalLinkProps
+
+const Link: FC<ChakraLinkProps & LinkProps> = forwardRef(
+  ({ isExternal, href, to, icon, children, ...props }, ref) => {
+    const defaultColor = useColorModeValue("brand.500", "white")
+    const finalColor = props.color ? props.color : defaultColor
+
+    return (
+      <ChakraLink
+        as={isExternal ? "a" : RouterLink}
+        ref={isExternal ? ref : undefined}
+        href={isExternal ? href : undefined}
+        to={isExternal ? undefined : to}
+        target={isExternal ? "_blank" : undefined}
+        rel={isExternal ? "noopener noreferrer" : undefined}
+        color={finalColor}
+        textDecoration="underline"
+        {...props}
+      >
+        {children}
+        {icon ? (
+          icon
+        ) : isExternal ? (
+          <Icon boxSize="12px" ml="1" as={FiArrowUpRight} />
+        ) : null}
+      </ChakraLink>
+    )
+  }
+)
+
+export * from "./SharedLinks"
+
+export default Link