Update UI of Beehive Component

dapp/.env

@@ -23,7 +23,6 @@ VITE_FEATURE_FLAG_GAMIFICATION_ENABLED="false"
 VITE_FEATURE_FLAG_WITHDRAWALS_ENABLED="false"
 VITE_FEATURE_FLAG_OKX_WALLET_ENABLED="false"
 VITE_FEATURE_FLAG_XVERSE_WALLET_ENABLED="false"
-VITE_FEATURE_FLAG_BEEHIVE_COMPONENT_ENABLED="false"
 VITE_FEATURE_FLAG_ACRE_POINTS_ENABLED="true"
 VITE_FEATURE_FLAG_TVL_ENABLED="true"
 VITE_FEATURE_GATING_DAPP_ENABLED="true"

dapp/src/assets/icons/index.ts

@@ -1,4 +1,3 @@
-export * from "./Info"
 export * from "./ArrowUpRight"
 export * from "./AcreLogo"
 export * from "./Pause"

dapp/src/components/Header/ConnectWallet.tsx

@@ -98,11 +98,8 @@ export default function ConnectWallet() {
           divider={<StackDivider borderColor="gold.500" />}
         >
           <Tooltip
-            fontSize="xs"
+            size="xs"
             label={hasCopied ? "Address copied" : "Copy"}
-            color="gold.200"
-            px={3}
-            py={2}
             closeOnClick={false}
           >
             <IconButton
@@ -116,13 +113,7 @@ export default function ConnectWallet() {
           </Tooltip>
 
           {isChangeAccountFeatureSupported(embeddedApp) && (
-            <Tooltip
-              fontSize="xs"
-              label="Change account"
-              color="gold.200"
-              px={3}
-              py={2}
-            >
+            <Tooltip size="xs" label="Change account">
               <IconButton
                 variant="ghost"
                 aria-label="Change account"
@@ -134,13 +125,7 @@ export default function ConnectWallet() {
             </Tooltip>
           )}
 
-          <Tooltip
-            fontSize="xs"
-            label="Disconnect"
-            color="gold.200"
-            px={3}
-            py={2}
-          >
+          <Tooltip size="xs" label="Disconnect">
             <IconButton
               variant="ghost"
               aria-label="Disconnect"

dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx

@@ -9,9 +9,8 @@ import {
   ModalCloseButton,
   ModalFooter,
   ModalHeader,
-  Tooltip,
 } from "@chakra-ui/react"
-import { CableWithPlugIcon, Info } from "#/assets/icons"
+import { CableWithPlugIcon } from "#/assets/icons"
 import { TextMd } from "#/components/shared/Typography"
 import { EXTERNAL_HREF } from "#/constants"
 import IconWrapper from "#/components/shared/IconWrapper"
@@ -20,6 +19,7 @@ import {
   IconReload,
   IconServerBolt,
 } from "@tabler/icons-react"
+// import InfoTooltip from "#/components/shared/InfoTooltip"
 
 export default function ServerErrorModal({
   isLoading,
@@ -66,9 +66,7 @@ export default function ServerErrorModal({
           <HStack>
             <TextMd fontWeight="bold">System status</TextMd>
             {/* TODO: ADD a tooltip */}
-            <Tooltip label="Tooltip text" placement="top">
-              <Icon as={Info} boxSize={4} color="grey.400" />
-            </Tooltip>
+            {/* <InfoTooltip label="Tooltip text" placement="top" /> */}
           </HStack>
           <TextMd color="red.400">Partial Outage</TextMd>
         </Flex>

dapp/src/components/shared/CurrencyBalance/index.tsx

@@ -102,7 +102,7 @@ export function CurrencyBalance({
     const tooltipLabel = `${getBalance({ withFullPrecision: true })} ${symbol}`
 
     return (
-      <Tooltip label={tooltipLabel} shouldWrapChildren>
+      <Tooltip size="xs" label={tooltipLabel} shouldWrapChildren>
         {content}
       </Tooltip>
     )

dapp/src/components/shared/InfoTooltip.tsx

@@ -1,11 +1,20 @@
 import React from "react"
-import { Info } from "#/assets/icons"
+import { IconInfoCircleFilled } from "@tabler/icons-react"
 import { Icon, Tooltip, TooltipProps } from "@chakra-ui/react"
 
+// TODO: Define in the new color palette
+const ICON_COLOR = "#3A3328"
+
 export default function InfoTooltip(props: Omit<TooltipProps, "children">) {
   return (
     <Tooltip placement="bottom" {...props}>
-      <Icon as={Info} boxSize={4} cursor="pointer" color="grey.400" />
+      <Icon
+        as={IconInfoCircleFilled}
+        boxSize="1.125rem" // 18px
+        cursor="pointer"
+        color={ICON_COLOR}
+        opacity={0.25}
+      />
     </Tooltip>
   )
 }

dapp/src/constants/featureFlags.ts

@@ -10,9 +10,6 @@ const XVERSE_WALLET_ENABLED =
 const WITHDRAWALS_ENABLED =
   import.meta.env.VITE_FEATURE_FLAG_WITHDRAWALS_ENABLED === "true"
 
-const BEEHIVE_COMPONENT_ENABLED =
-  import.meta.env.VITE_FEATURE_FLAG_BEEHIVE_COMPONENT_ENABLED === "true"
-
 const ACRE_POINTS_ENABLED =
   import.meta.env.VITE_FEATURE_FLAG_ACRE_POINTS_ENABLED === "true"
 
@@ -26,7 +23,6 @@ const featureFlags = {
   OKX_WALLET_ENABLED,
   XVERSE_WALLET_ENABLED,
   WITHDRAWALS_ENABLED,
-  BEEHIVE_COMPONENT_ENABLED,
   ACRE_POINTS_ENABLED,
   TVL_ENABLED,
   GATING_DAPP_ENABLED,

dapp/src/pages/DashboardPage/AcrePointsCard.tsx

@@ -7,16 +7,13 @@ import {
   CardHeader,
   CardProps,
   HStack,
-  Icon,
   Stack,
-  Tooltip,
   VStack,
 } from "@chakra-ui/react"
 import Countdown from "#/components/shared/Countdown"
 import { logPromiseFailure, numberToLocaleString } from "#/utils"
 import { useAcrePoints, useWallet } from "#/hooks"
 import Spinner from "#/components/shared/Spinner"
-import { IconInfoCircle } from "@tabler/icons-react"
 import UserDataSkeleton from "#/components/shared/UserDataSkeleton"
 import InfoTooltip from "#/components/shared/InfoTooltip"
 import useDebounce from "#/hooks/useDebounce"
@@ -77,15 +74,13 @@ export default function AcrePointsCard(props: CardProps) {
                   <HStack spacing={0}>
                     <Spinner mr={3} size="sm" />
                     <TextMd>Your drop is being prepared.</TextMd>
-                    <Tooltip
+                    <InfoTooltip
                       label={`
-                      We need some time to calculate your points. It may take up to 30 minutes. 
-                      ${claimableBalance ? "You can still claim points from previous drops." : ""}
-                    `}
+                        We need some time to calculate your points. It may take up to 30 minutes. 
+                        ${claimableBalance ? "You can still claim points from previous drops." : ""}
+                      `}
                       maxW={72}
-                    >
-                      <Icon ml={1.5} as={IconInfoCircle} />
-                    </Tooltip>
+                    />
                   </HStack>
                 </VStack>
               ) : (