diff --git a/dapp/.env b/dapp/.env.example similarity index 50% rename from dapp/.env rename to dapp/.env.example index 977362387..745d7f59b 100644 --- a/dapp/.env +++ b/dapp/.env.example @@ -1,34 +1,32 @@ +# Network VITE_USE_TESTNET=true -# Configuration of sentry.io -VITE_SENTRY_SUPPORT=false -# TODO: Sentry DSN will be added during the application building process when it is ready -VITE_SENTRY_DSN="" - -# TODO: Use a more general source -VITE_ETH_HOSTNAME_HTTP="https://sepolia.infura.io/v3/c80e8ccdcc4c4a809bce4fc165310617" +# Basic UI settings VITE_REFERRAL=0 -# ENDPOINTS -VITE_TBTC_API_ENDPOINT="" +# Endpoints +VITE_ETH_HOSTNAME_HTTP="" VITE_ACRE_API_ENDPOINT="http://localhost:8788/api/v1/" +VITE_TBTC_API_ENDPOINT="http://localhost:8788/tbtc-api/v1/" -# API KEYS +# API keys VITE_GELATO_RELAY_API_KEY="htaJCy_XHj8WsE3w53WBMurfySDtjLP_TrNPPa6IPIc_" # this key should not be used on production -# Get the API key from: https://thegraph.com/studio/apikeys/. VITE_SUBGRAPH_API_KEY="" +# Sentry +VITE_SENTRY_SUPPORT=false +VITE_SENTRY_DSN="" + # Posthog VITE_POSTHOG_API_HOST="https://us.i.posthog.com" VITE_POSTHOG_API_KEY="" # Feature flags -VITE_FEATURE_FLAG_WITHDRAWALS_ENABLED="false" -VITE_FEATURE_FLAG_OKX_WALLET_ENABLED="false" -VITE_FEATURE_FLAG_XVERSE_WALLET_ENABLED="false" +VITE_FEATURE_FLAG_WITHDRAWALS_ENABLED="true" +VITE_FEATURE_FLAG_OKX_WALLET_ENABLED="true" +VITE_FEATURE_FLAG_XVERSE_WALLET_ENABLED="true" VITE_FEATURE_FLAG_ACRE_POINTS_ENABLED="true" VITE_FEATURE_FLAG_TVL_ENABLED="true" VITE_FEATURE_GATING_DAPP_ENABLED="true" -VITE_FEATURE_POSTHOG_ENABLED="true" +VITE_FEATURE_POSTHOG_ENABLED="false" VITE_FEATURE_MOBILE_MODE_ENABLED="true" - diff --git a/dapp/src/assets/icons/ArrowUpRight.tsx b/dapp/src/assets/icons/ArrowUpRight.tsx deleted file mode 100644 index a61f54b38..000000000 --- a/dapp/src/assets/icons/ArrowUpRight.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from "react" -import { createIcon } from "@chakra-ui/react" - -export const ArrowUpRight = createIcon({ - displayName: "ArrowUpRight", - viewBox: "0 0 16 17", - path: ( - - ), -}) diff --git a/dapp/src/assets/icons/BoltFilled.tsx b/dapp/src/assets/icons/BoltFilled.tsx deleted file mode 100644 index 8252422d9..000000000 --- a/dapp/src/assets/icons/BoltFilled.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from "react" -import { createIcon } from "@chakra-ui/react" - -export default createIcon({ - displayName: "BoltFilled", - viewBox: "0 0 24 24", - path: [ - , - ], -}) diff --git a/dapp/src/assets/icons/index.ts b/dapp/src/assets/icons/index.ts index 7a8fe57c2..eb50fc819 100644 --- a/dapp/src/assets/icons/index.ts +++ b/dapp/src/assets/icons/index.ts @@ -1,4 +1,3 @@ -export * from "./ArrowUpRight" export * from "./AcreLogo" export * from "./Pause" export { default as LoadingSpinnerSuccessIcon } from "./LoadingSpinnerSuccessIcon" @@ -8,4 +7,3 @@ export * from "./MezoSignIcon" export * from "./AcreSignIcon" export * from "./BitcoinsStackErrorIcon" export { default as MatsIcon } from "./MatsIcon" -export { default as BoltFilled } from "./BoltFilled" diff --git a/dapp/src/components/Footer.tsx b/dapp/src/components/Footer.tsx index d80161d7f..c32c4c7ed 100644 --- a/dapp/src/components/Footer.tsx +++ b/dapp/src/components/Footer.tsx @@ -10,8 +10,9 @@ import { Icon, } from "@chakra-ui/react" import { EXTERNAL_HREF } from "#/constants" -import { AcreSignIcon, ArrowUpRight } from "#/assets/icons" +import { AcreSignIcon } from "#/assets/icons" import { useMobileMode } from "#/hooks" +import { IconArrowUpRight } from "@tabler/icons-react" type FooterListItem = Pick @@ -64,7 +65,7 @@ const getItemsList = ( as={Link} __css={styles.link} iconSpacing={0} - rightIcon={} + rightIcon={} {...link} isExternal /> diff --git a/dapp/src/components/Header/ConnectWallet.tsx b/dapp/src/components/Header/ConnectWallet.tsx index 248b31b8c..8040b47da 100644 --- a/dapp/src/components/Header/ConnectWallet.tsx +++ b/dapp/src/components/Header/ConnectWallet.tsx @@ -97,7 +97,7 @@ export default function ConnectWallet() { id: "Disconnect", icon: IconLogout, label: "Disconnect", - onClick: onDisconnect, + onClick: handleDisconnectWallet, closeOnSelect: true, isSupported: true, }, @@ -191,17 +191,6 @@ export default function ConnectWallet() { ), )} - - - } - px={2} - boxSize={5} - onClick={handleDisconnectWallet} - /> - diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx index 2fc4dcc7b..25e0bd84b 100644 --- a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx +++ b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx @@ -19,7 +19,7 @@ import { IconReload, IconServerBolt, } from "@tabler/icons-react" -// import InfoTooltip from "#/components/shared/InfoTooltip" +// import TooltipIcon from "#/components/shared/TooltipIcon" export default function ServerErrorModal({ isLoading, @@ -66,7 +66,7 @@ export default function ServerErrorModal({ System status {/* TODO: ADD a tooltip */} - {/* */} + {/* */} Partial Outage diff --git a/dapp/src/components/TransactionModal/FeesTooltip/FeesTooltip.tsx b/dapp/src/components/TransactionModal/FeesTooltip/FeesTooltip.tsx index d976bf810..4c630bbbd 100644 --- a/dapp/src/components/TransactionModal/FeesTooltip/FeesTooltip.tsx +++ b/dapp/src/components/TransactionModal/FeesTooltip/FeesTooltip.tsx @@ -1,6 +1,6 @@ import React from "react" import { List } from "@chakra-ui/react" -import InfoTooltip from "#/components/shared/InfoTooltip" +import TooltipIcon from "#/components/shared/TooltipIcon" import { FeesTooltipItem } from "./FeesTooltipItem" import { Fee as AcreFee } from "../../../types/fee" @@ -21,7 +21,7 @@ const mapFeeToLabel = (feeId: keyof AcreFee) => { export function FeesTooltip({ fees }: Props) { return ( - diff --git a/dapp/src/components/shared/ButtonLink.tsx b/dapp/src/components/shared/ButtonLink.tsx index dcd65de61..3f8f13af0 100644 --- a/dapp/src/components/shared/ButtonLink.tsx +++ b/dapp/src/components/shared/ButtonLink.tsx @@ -1,16 +1,16 @@ import React from "react" import { Button, ButtonProps, Icon, Link, LinkProps } from "@chakra-ui/react" -import { ArrowUpRight } from "#/assets/icons" +import { IconArrowUpRight, TablerIcon } from "@tabler/icons-react" type ButtonLinkProps = ButtonProps & LinkProps & { - icon?: typeof Icon + icon?: TablerIcon iconColor?: string } export default function ButtonLink({ children, - icon = ArrowUpRight, + icon = IconArrowUpRight, iconColor = "brand.400", variant = "outline", ...props diff --git a/dapp/src/components/shared/ProgressBar.tsx b/dapp/src/components/shared/ProgressBar.tsx index e5467bc2d..ca8b52c1d 100644 --- a/dapp/src/components/shared/ProgressBar.tsx +++ b/dapp/src/components/shared/ProgressBar.tsx @@ -1,6 +1,6 @@ import React from "react" import { Progress, ProgressProps, ProgressLabel, Icon } from "@chakra-ui/react" -import { BoltFilled } from "#/assets/icons" +import { IconBolt } from "@tabler/icons-react" type ProgressBarProps = ProgressProps & { withBoltIcon?: boolean @@ -23,7 +23,8 @@ function ProgressBar(props: ProgressBarProps) { transform="auto" translateX="-100%" translateY="-50%" - as={BoltFilled} + as={IconBolt} + fill="currentcolor" mx={-1} /> )} diff --git a/dapp/src/components/shared/Tooltip.tsx b/dapp/src/components/shared/Tooltip.tsx index 924e0e950..6c6944593 100644 --- a/dapp/src/components/shared/Tooltip.tsx +++ b/dapp/src/components/shared/Tooltip.tsx @@ -1,5 +1,5 @@ import React, { useState } from "react" -import { Box, Tooltip as ChakraTooltip, TooltipProps } from "@chakra-ui/react" +import { Tooltip as ChakraTooltip, TooltipProps, Flex } from "@chakra-ui/react" export default function Tooltip(props: TooltipProps) { const { children, ...restProps } = props @@ -7,13 +7,13 @@ export default function Tooltip(props: TooltipProps) { return ( - setIsOpen(true)} onMouseLeave={() => setIsOpen(false)} onClick={() => setIsOpen(true)} > {children} - + ) } diff --git a/dapp/src/components/shared/InfoTooltip.tsx b/dapp/src/components/shared/TooltipIcon.tsx similarity index 50% rename from dapp/src/components/shared/InfoTooltip.tsx rename to dapp/src/components/shared/TooltipIcon.tsx index a9394b460..1ef97745f 100644 --- a/dapp/src/components/shared/InfoTooltip.tsx +++ b/dapp/src/components/shared/TooltipIcon.tsx @@ -1,16 +1,21 @@ import React from "react" -import { IconInfoCircleFilled } from "@tabler/icons-react" +import { IconInfoCircleFilled, TablerIcon } from "@tabler/icons-react" import { Icon, TooltipProps } from "@chakra-ui/react" import Tooltip from "./Tooltip" // TODO: Define in the new color palette const ICON_COLOR = "#3A3328" -export default function InfoTooltip(props: Omit) { +type TooltipIconProps = Omit & { + icon?: TablerIcon +} + +export default function TooltipIcon(props: TooltipIconProps) { + const { icon, ...restProps } = props return ( - + - Your drop is being prepared. - - + + + {tvl.isCapExceeded ? ( diff --git a/dapp/src/pages/DashboardPage/BeehiveCard.tsx b/dapp/src/pages/DashboardPage/BeehiveCard.tsx index 9168d0b5b..d768e94d7 100644 --- a/dapp/src/pages/DashboardPage/BeehiveCard.tsx +++ b/dapp/src/pages/DashboardPage/BeehiveCard.tsx @@ -1,5 +1,12 @@ import React from "react" +import { MezoSignIcon } from "#/assets/icons" +import beehiveIllustrationSrc from "#/assets/images/beehive-illustration.svg" +import TooltipIcon from "#/components/shared/TooltipIcon" import { H6, TextMd, TextSm } from "#/components/shared/Typography" +import UserDataSkeleton from "#/components/shared/UserDataSkeleton" +import { useMats, useModal } from "#/hooks" +import { MODAL_TYPES } from "#/types" +import { numberToLocaleString } from "#/utils" import { Box, Button, @@ -12,13 +19,6 @@ import { Image, VStack, } from "@chakra-ui/react" -import { MezoSignIcon } from "#/assets/icons" -import { useMats, useModal } from "#/hooks" -import { MODAL_TYPES } from "#/types" -import beehiveIllustrationSrc from "#/assets/images/beehive-illustration.svg" -import UserDataSkeleton from "#/components/shared/UserDataSkeleton" -import { numberToLocaleString } from "#/utils" -import InfoTooltip from "#/components/shared/InfoTooltip" export default function BeehiveCard(props: CardProps) { const { openModal } = useModal() @@ -32,7 +32,7 @@ export default function BeehiveCard(props: CardProps) { Additional rewards - diff --git a/dapp/src/pages/DashboardPage/PositionDetails.tsx b/dapp/src/pages/DashboardPage/PositionDetails.tsx index db3dbdb06..d1839940a 100644 --- a/dapp/src/pages/DashboardPage/PositionDetails.tsx +++ b/dapp/src/pages/DashboardPage/PositionDetails.tsx @@ -7,6 +7,7 @@ import { useStatistics, useWallet, useMobileMode, + useActivities, } from "#/hooks" import { ACTION_FLOW_TYPES } from "#/types" import { @@ -21,6 +22,8 @@ import ArrivingSoonTooltip from "#/components/ArrivingSoonTooltip" import UserDataSkeleton from "#/components/shared/UserDataSkeleton" import { featureFlags } from "#/constants" import { TextMd } from "#/components/shared/Typography" +import { IconClockHour5Filled } from "@tabler/icons-react" +import TooltipIcon from "#/components/shared/TooltipIcon" import AcreTVLMessage from "./AcreTVLMessage" const isWithdrawalFlowEnabled = featureFlags.WITHDRAWALS_ENABLED @@ -51,12 +54,21 @@ export default function PositionDetails() { const isDisabledForMobileMode = isMobileMode && !featureFlags.MOBILE_MODE_ENABLED + const { hasPendingActivities } = useActivities() + return ( {/* TODO: Component should be moved to `CardHeader` */} - - Your Acre balance + + Your Acre balance + {hasPendingActivities && ( + + )} {/* TODO: Uncomment when position will be implemented */} {/* {positionPercentage && ( )} */} - + sortActivitiesByTimestamp(activities), ) +export const selectHasPendingActivities = createSelector( + (state: RootState) => state.wallet.activities, + (activities) => + activities.some( + (activity) => + activity.status === "pending" && activity.type === "deposit", + ), +) + export const selectAllActivitiesCount = createSelector( (state: RootState) => state.wallet.activities, (activities) => activities.length,