Merge branch 'main' into remove-max-limit

dapp/src/components/LiquidStakingTokenPopover.tsx

@@ -0,0 +1,73 @@
+import React from "react"
+import { Info } from "#/assets/icons"
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverCloseButton,
+  PopoverBody,
+  PopoverProps,
+  IconButton,
+} from "@chakra-ui/react"
+import { SizeType } from "#/types"
+import { useDocsDrawer, useWalletContext } from "#/hooks"
+import { TextMd, TextSm } from "./shared/Typography"
+import Alert from "./shared/Alert"
+import { CurrencyBalance } from "./shared/CurrencyBalance"
+
+type LiquidStakingTokenPopoverProps = PopoverProps & { popoverSize: SizeType }
+
+export function LiquidStakingTokenPopover({
+  popoverSize,
+  ...props
+}: LiquidStakingTokenPopoverProps) {
+  const { isConnected } = useWalletContext()
+  const { onOpen: openDocsDrawer } = useDocsDrawer()
+
+  return (
+    <Popover variant="no-transform" {...props}>
+      <PopoverTrigger>
+        <IconButton
+          variant="ghost"
+          justifyContent="end"
+          icon={
+            <Info boxSize={5} color={isConnected ? "grey.700" : "grey.400"} />
+          }
+          _disabled={{
+            cursor: "default",
+          }}
+          isDisabled={!isConnected}
+          aria-label="Liquid staking details"
+        />
+      </PopoverTrigger>
+      <PopoverContent
+        width={popoverSize.width + 16}
+        height={popoverSize.height}
+        top={-2}
+        left={-2}
+      >
+        <PopoverCloseButton />
+        <PopoverBody p={0}>
+          <TextMd fontWeight="bold">Liquid staking token</TextMd>
+          <CurrencyBalance
+            amount="912312331"
+            variant="greater-balance-xl"
+            currency="stbtc"
+          />
+          <Alert
+            mt={5}
+            status="info"
+            withAlertIcon={false}
+            withActionIcon
+            onclick={openDocsDrawer}
+          >
+            <TextSm>
+              Your tokens are this Ethereum address once the staking transaction
+              is finalized.
+            </TextSm>
+          </Alert>
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  )
+}

dapp/src/components/shared/ActivityBar/ActivityCard.tsx

@@ -51,11 +51,7 @@ function ActivityCard({ activity, onRemove }: ActivityCardType) {
           />
           {isCompleted ? (
             <Tooltip label="Remove" placement="top">
-              <CloseButton
-                size="sm"
-                onClick={onClose}
-                _hover={{ backgroundColor: undefined }}
-              />
+              <CloseButton size="sm" onClick={onClose} />
             </Tooltip>
           ) : (
             <Icon

dapp/src/hooks/index.ts

@@ -17,3 +17,4 @@ export * from "./useInitApp"
 export * from "./useCurrencyConversion"
 export * from "./useDepositTelemetry"
 export * from "./useFetchBTCPriceUSD"
+export * from "./useSize"

dapp/src/hooks/useSize.ts

@@ -0,0 +1,33 @@
+import { useRef, useState, useEffect } from "react"
+import { SizeType } from "#/types"
+
+const initialSize = {
+  width: 0,
+  height: 0,
+}
+
+export function useSize() {
+  const ref = useRef<HTMLDivElement>()
+  const [size, setSize] = useState<SizeType>(initialSize)
+
+  useEffect(() => {
+    const onResize = () => {
+      const newSize = ref.current
+        ? {
+            width: ref.current.clientWidth,
+            height: ref.current.clientHeight,
+          }
+        : initialSize
+
+      setSize(newSize)
+    }
+
+    onResize()
+    window.addEventListener("resize", onResize)
+    return () => {
+      window.removeEventListener("resize", onResize)
+    }
+  }, [])
+
+  return { ref, size }
+}

dapp/src/pages/OverviewPage/PositionDetails.tsx

@@ -1,8 +1,6 @@
 import React, { useCallback, useState } from "react"
 import {
   Button,
-  Tooltip,
-  Icon,
   CardBody,
   Card,
   CardFooter,
@@ -11,11 +9,14 @@ import {
 } from "@chakra-ui/react"
 import { CurrencyBalanceWithConversion } from "#/components/shared/CurrencyBalanceWithConversion"
 import { TextMd } from "#/components/shared/Typography"
-import { Info } from "#/assets/icons"
 import { ACTION_FLOW_TYPES, ActionFlowType } from "#/types"
 import TransactionModal from "#/components/TransactionModal"
+import { LiquidStakingTokenPopover } from "#/components/LiquidStakingTokenPopover"
+import { useSize } from "#/hooks"
 
 export default function PositionDetails(props: CardProps) {
+  const { ref, size } = useSize()
+
   const [actionFlowType, setActionFlowType] = useState<
     ActionFlowType | undefined
   >(undefined)
@@ -25,14 +26,11 @@ export default function PositionDetails(props: CardProps) {
   }, [])
 
   return (
-    <Card {...props}>
+    <Card ref={ref} {...props}>
       <CardBody>
         <HStack justifyContent="space-between">
           <TextMd fontWeight="bold">Your position</TextMd>
-          {/* TODO: Add correct text for tooltip */}
-          <Tooltip label="Template" placement="top">
-            <Icon as={Info} color="grey.700" />
-          </Tooltip>
+          <LiquidStakingTokenPopover popoverSize={size} />
         </HStack>
         <CurrencyBalanceWithConversion
           from={{

dapp/src/theme/CloseButton.ts

@@ -0,0 +1,9 @@
+import { defineStyle, defineStyleConfig } from "@chakra-ui/react"
+
+const baseStyle = defineStyle({
+  bg: "transparent",
+})
+
+export const closeButtonTheme = defineStyleConfig({
+  baseStyle,
+})

dapp/src/theme/Popover.ts

@@ -0,0 +1,41 @@
+import { popoverAnatomy as parts } from "@chakra-ui/anatomy"
+import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react"
+
+const multiStyleConfig = createMultiStyleConfigHelpers(parts.keys)
+
+const baseStyleCloseButton = defineStyle({
+  top: 5,
+  right: 5,
+})
+
+const baseStyleContent = defineStyle({
+  borderRadius: "xl",
+  bg: "gold.100",
+  borderWidth: 0.5,
+  borderColor: "white",
+  p: 5,
+
+  _focusVisible: {
+    boxShadow: "none",
+  },
+})
+
+const variantNoTransform = multiStyleConfig.definePartsStyle({
+  popper: {
+    transform: "none !important",
+  },
+})
+
+const variants = {
+  "no-transform": variantNoTransform,
+}
+
+const baseStyle = multiStyleConfig.definePartsStyle({
+  content: baseStyleContent,
+  closeButton: baseStyleCloseButton,
+})
+
+export const popoverTheme = multiStyleConfig.defineMultiStyleConfig({
+  baseStyle,
+  variants,
+})

dapp/src/theme/index.ts

@@ -25,6 +25,8 @@ import { currencyIconTheme } from "./CurrencyIcon"
 import { statusInfoTheme } from "./StatusInfo"
 import { linkTheme } from "./Link"
 import { skeletonTheme } from "./Skeleton"
+import { popoverTheme } from "./Popover"
+import { closeButtonTheme } from "./CloseButton"
 
 const defaultTheme = {
   // TODO: Remove when dark mode is ready
@@ -49,6 +51,7 @@ const defaultTheme = {
     Alert: alertTheme,
     Button: buttonTheme,
     Card: cardTheme,
+    CloseButton: closeButtonTheme,
     CurrencyBalance: currencyBalanceTheme,
     Drawer: drawerTheme,
     Form: formTheme,
@@ -58,6 +61,7 @@ const defaultTheme = {
     Input: inputTheme,
     Link: linkTheme,
     Modal: modalTheme,
+    Popover: popoverTheme,
     Sidebar: sidebarTheme,
     Spinner: spinnerTheme,
     Stepper: stepperTheme,

dapp/src/types/index.ts

@@ -10,3 +10,4 @@ export * from "./location"
 export * from "./charts"
 export * from "./activity"
 export * from "./coingecko"
+export * from "./size"

dapp/src/types/size.ts

@@ -0,0 +1,4 @@
+export type SizeType = {
+  width: number
+  height: number
+}