Merge branch 'main' into copy-update-tbtc

Author: r-czajkowski

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,15 @@
+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} style={style} {...props} />
+  }
+)
+
+export default ButtonLink

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
@@ -55,17 +54,18 @@ const DetailedLinkListItem: FC<DetailedLinkListItemProps> = ({
         <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/ExternalLink/index.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/InternalLink/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

src/components/ExternalLink/SharedLinks.tsx renamed to src/components/Link/SharedLinks.tsx

@@ -16,7 +16,7 @@ import {
   ListItem,
 } from "@threshold-network/components"
 import { useDispatch, useSelector } from "react-redux"
-import { StakingContractLearnMore } from "../../ExternalLink/SharedLinks"
+import { StakingContractLearnMore } from "../../Link/SharedLinks"
 import InfoBox from "../../InfoBox"
 import { BaseModalProps } from "../../../types"
 import withBaseModal from "../withBaseModal"

src/components/Link/index.tsx

@@ -19,7 +19,7 @@ import AdvancedParamsForm, { FormValues } from "./AdvancedParamsForm"
 import { useStakingState } from "../../../hooks/useStakingState"
 import { ModalType } from "../../../enums"
 import InfoBox from "../../InfoBox"
-import { StakingContractLearnMore } from "../../ExternalLink"
+import { StakingContractLearnMore } from "../../Link"
 import StakingStats from "../../StakingStats"
 import useCheckDuplicateProviderAddress from "../../../web3/hooks/useCheckDuplicateProviderAddress"
 import { featureFlags } from "../../../constants"

src/components/Modal/ClaimingRewards/index.tsx

@@ -26,6 +26,7 @@ import withBaseModal from "../withBaseModal"
 import { useStakingState } from "../../../hooks/useStakingState"
 import { getStakeTitle } from "../../../utils/getStakeTitle"
 import { isAddress, isSameETHAddress } from "../../../web3/utils"
+import ButtonLink from "../../ButtonLink"
 
 const NewAppsToAuthorizeModal: FC<BaseModalProps> = ({ closeModal }) => {
   const { stakes } = useStakingState()
@@ -108,16 +109,15 @@ const NewAppsToAuthorizeModal: FC<BaseModalProps> = ({ closeModal }) => {
         <Button onClick={closeModal} variant="outline" mr={2}>
           Dismiss
         </Button>
-        <Button
+        <ButtonLink
           mr={2}
-          as={RouterLink}
           to={`/staking/${selectedProviderAddress}/authorize`}
           onClick={closeModal}
           disabled={!selectedProviderAddress}
           style={{ pointerEvents: selectedProviderAddress ? "auto" : "none" }}
         >
           Continue
-        </Button>
+        </ButtonLink>
       </ModalFooter>
     </>
   )