Merge branch 'main' into welcome-component

thesis · Nov 13, 2024 · 6b30218 · 6b30218
2 parents 8471acd + eb85811
commit 6b30218
Show file tree

Hide file tree

Showing 29 changed files with 175 additions and 267 deletions.
diff --git a/dapp/.env b/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"

diff --git a/dapp/src/assets/icons/Info.tsx b/dapp/src/assets/icons/Info.tsx
diff --git a/dapp/src/assets/icons/index.ts b/dapp/src/assets/icons/index.ts
@@ -1,4 +1,3 @@
-export * from "./Info"
 export * from "./ArrowUpRight"
 export * from "./AcreLogo"
 export * from "./Pause"

diff --git a/dapp/src/assets/images/mezo-bees.svg b/dapp/src/assets/images/mezo-bees.svg
diff --git a/dapp/src/components/ConnectWalletModal/ConnectWalletButton.tsx b/dapp/src/components/ConnectWalletModal/ConnectWalletButton.tsx
@@ -189,8 +189,9 @@ export default function ConnectWalletButton({
       rounded="lg"
       mb={3}
       _last={{ mb: 0 }}
+      p={0}
     >
-      <CardHeader p={0}>
+      <CardHeader>
         <ArrivingSoonTooltip shouldDisplayTooltip={connector.isDisabled}>
           <Button
             variant="ghost"
@@ -232,7 +233,6 @@ export default function ConnectWalletButton({
             initial="collapsed"
             animate="expanded"
             exit="collapsed"
-            p={0}
             overflow="hidden"
             sx={{ flex: undefined }} // To override the default flex: 1
           >

diff --git a/dapp/src/components/Header/ConnectWallet.tsx b/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"

diff --git a/dapp/src/components/MezoBeehiveModal.tsx b/dapp/src/components/MezoBeehiveModal.tsx
@@ -59,10 +59,7 @@ function MezoBeehiveModalBase() {
         <VStack>
           <Card
             gap={2}
-            p={5}
-            rounded="xl"
             bg="grey.700"
-            borderWidth={0}
             color="gold.300"
             align="start"
             textAlign="start"
@@ -82,11 +79,11 @@ function MezoBeehiveModalBase() {
               translateY: "-100%",
             }}
           >
-            <CardHeader p={0} as={HStack}>
+            <CardHeader as={HStack}>
               <Icon as={IconChartPieFilled} color="brand.400" boxSize={5} />
             </CardHeader>
 
-            <CardBody p={0}>
+            <CardBody>
               <TextMd lineHeight={5}>
                 In the event of a reward distribution, your share is calculated
                 by deposit amount and duration, and you can claim it directly
@@ -95,11 +92,10 @@ function MezoBeehiveModalBase() {
             </CardBody>
           </Card>
 
-          <Card bg="gold.200" borderWidth={0} rounded="xl">
+          <Card>
             <CardBody
               as={HStack}
               spacing={6}
-              p={5}
               color="grey.700"
               textAlign="start"
             >

diff --git a/dapp/src/components/Sidebar.tsx b/dapp/src/components/Sidebar.tsx
@@ -93,7 +93,6 @@ export default function Sidebar() {
                     flexDirection="row"
                     justifyContent="space-between"
                     alignItems="center"
-                    py={0}
                     px={4}
                   >
                     <TextSm fontWeight="semibold">{name}</TextSm>

diff --git a/.../src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx b/.../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>

diff --git a/dapp/src/components/shared/CurrencyBalance/index.tsx b/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>
     )

diff --git a/dapp/src/components/shared/InfoTooltip.tsx b/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>
   )
 }
diff --git a/dapp/src/constants/featureFlags.ts b/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,

diff --git a/dapp/src/hooks/useAcrePoints.ts b/dapp/src/hooks/useAcrePoints.ts
@@ -1,6 +1,6 @@
 import { useMutation, useQuery } from "@tanstack/react-query"
 import { acreApi } from "#/utils"
-import { queryKeysFactory } from "#/constants"
+import { queryKeysFactory, REFETCH_INTERVAL_IN_MILLISECONDS } from "#/constants"
 import { MODAL_TYPES } from "#/types"
 import { useWallet } from "./useWallet"
 import { useModal } from "./useModal"
@@ -15,6 +15,7 @@ type UseAcrePointsReturnType = {
   claimPoints: () => void
   updateUserPointsData: () => Promise<unknown>
   updatePointsData: () => Promise<unknown>
+  totalPoolBalance: number
 }
 
 export default function useAcrePoints(): UseAcrePointsReturnType {
@@ -30,6 +31,7 @@ export default function useAcrePoints(): UseAcrePointsReturnType {
   const pointsDataQuery = useQuery({
     queryKey: [...acreKeys.pointsData()],
     queryFn: async () => acreApi.getPointsData(),
+    refetchInterval: REFETCH_INTERVAL_IN_MILLISECONDS,
   })
 
   const { mutate: claimPoints } = useMutation({
@@ -51,12 +53,13 @@ export default function useAcrePoints(): UseAcrePointsReturnType {
   })
 
   return {
-    totalBalance: userPointsDataQuery.data?.claimed ?? 0,
-    claimableBalance: userPointsDataQuery.data?.unclaimed ?? 0,
+    totalBalance: userPointsDataQuery.data?.claimed || 0,
+    claimableBalance: userPointsDataQuery.data?.unclaimed || 0,
     nextDropTimestamp: pointsDataQuery.data?.dropAt,
     isCalculationInProgress: pointsDataQuery.data?.isCalculationInProgress,
     claimPoints,
     updateUserPointsData: userPointsDataQuery.refetch,
     updatePointsData: pointsDataQuery.refetch,
+    totalPoolBalance: pointsDataQuery.data?.totalPool || 0,
   }
 }