From 49ba9ac41b24f426401ba17245390fb8e759993b Mon Sep 17 00:00:00 2001 From: Jakub Date: Thu, 28 Nov 2024 12:37:32 +0100 Subject: [PATCH 01/22] Move dapp tests to the root test folder For consistency with other packages and projects we are moving the dapp tests to the root test folder. There are many possible approaches to organize the tests, but here we are following the same structure as the other packages. If we need to change this in the future, we can discuss and find the best approach. --- dapp/src/tests/factories.ts | 14 -------------- dapp/{src => test}/sentry.test.ts | 2 +- .../tests => test/store}/walletSlice.test.ts | 19 ++++++++++++++++--- .../tests => test/utils}/activities.test.ts | 2 +- .../tests => test/utils}/numbers.test.ts | 2 +- .../ledger-live}/bitcoin-provider.test.ts | 2 +- 6 files changed, 20 insertions(+), 21 deletions(-) delete mode 100644 dapp/src/tests/factories.ts rename dapp/{src => test}/sentry.test.ts (97%) rename dapp/{src/store/tests => test/store}/walletSlice.test.ts (89%) rename dapp/{src/utils/tests => test/utils}/activities.test.ts (96%) rename dapp/{src/utils/tests => test/utils}/numbers.test.ts (96%) rename dapp/{src/utils/orangekit/ledger-live/tests => test/utils/orangekit/ledger-live}/bitcoin-provider.test.ts (99%) diff --git a/dapp/src/tests/factories.ts b/dapp/src/tests/factories.ts deleted file mode 100644 index 8f3d66c41..000000000 --- a/dapp/src/tests/factories.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { Activity } from "#/types" -import { dateToUnixTimestamp, randomInteger } from "#/utils" - -export const createActivity = ( - overrides: Partial = {}, -): Activity => ({ - id: crypto.randomUUID(), - initializedAt: dateToUnixTimestamp() - randomInteger(0, 1000000), - amount: BigInt(randomInteger(1000000, 1000000000)), - txHash: "c9625ecc138bbd241439f158f65f43e152968ff35e203dec89cfb78237d6a2d8", - status: "completed", - type: "deposit", - ...overrides, -}) diff --git a/dapp/src/sentry.test.ts b/dapp/test/sentry.test.ts similarity index 97% rename from dapp/src/sentry.test.ts rename to dapp/test/sentry.test.ts index 7543d8d1d..cb7e9d896 100644 --- a/dapp/src/sentry.test.ts +++ b/dapp/test/sentry.test.ts @@ -1,6 +1,6 @@ import { describe, expect, it, vi } from "vitest" import * as Sentry from "@sentry/react" -import sentry from "./sentry" +import sentry from "#/sentry" describe("sentry", () => { describe("setUser", () => { diff --git a/dapp/src/store/tests/walletSlice.test.ts b/dapp/test/store/walletSlice.test.ts similarity index 89% rename from dapp/src/store/tests/walletSlice.test.ts rename to dapp/test/store/walletSlice.test.ts index b29009f60..8fbea1955 100644 --- a/dapp/src/store/tests/walletSlice.test.ts +++ b/dapp/test/store/walletSlice.test.ts @@ -1,8 +1,21 @@ import { beforeEach, describe, expect, it } from "vitest" -import { createActivity } from "#/tests/factories" import { Activity } from "#/types" -import { WalletState } from "../wallet" -import reducer, { initialState, setActivities } from "../wallet/walletSlice" +import reducer, { + WalletState, + initialState, + setActivities, +} from "#/store/wallet/walletSlice" +import { dateToUnixTimestamp, randomInteger } from "#/utils" + +const createActivity = (overrides: Partial = {}): Activity => ({ + id: crypto.randomUUID(), + initializedAt: dateToUnixTimestamp() - randomInteger(0, 1000000), + amount: BigInt(randomInteger(1000000, 1000000000)), + txHash: "c9625ecc138bbd241439f158f65f43e152968ff35e203dec89cfb78237d6a2d8", + status: "completed", + type: "deposit", + ...overrides, +}) const isSignedMessage = false const hasFetchedActivities = true diff --git a/dapp/src/utils/tests/activities.test.ts b/dapp/test/utils/activities.test.ts similarity index 96% rename from dapp/src/utils/tests/activities.test.ts rename to dapp/test/utils/activities.test.ts index fcafa84a7..c25c4f93a 100644 --- a/dapp/src/utils/tests/activities.test.ts +++ b/dapp/test/utils/activities.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from "vitest" -import { getEstimatedDuration } from "../activities" +import { getEstimatedDuration } from "#/utils/activities" describe("Utils functions for activities", () => { describe("getEstimatedDuration", () => { diff --git a/dapp/src/utils/tests/numbers.test.ts b/dapp/test/utils/numbers.test.ts similarity index 96% rename from dapp/src/utils/tests/numbers.test.ts rename to dapp/test/utils/numbers.test.ts index 6151a888a..1699ee0d7 100644 --- a/dapp/src/utils/tests/numbers.test.ts +++ b/dapp/test/utils/numbers.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from "vitest" -import { roundUp } from "../numbers" +import { roundUp } from "#/utils/numbers" describe("Utils functions for numbers", () => { describe("roundUp", () => { diff --git a/dapp/src/utils/orangekit/ledger-live/tests/bitcoin-provider.test.ts b/dapp/test/utils/orangekit/ledger-live/bitcoin-provider.test.ts similarity index 99% rename from dapp/src/utils/orangekit/ledger-live/tests/bitcoin-provider.test.ts rename to dapp/test/utils/orangekit/ledger-live/bitcoin-provider.test.ts index 58d1d0f89..36ed0375e 100644 --- a/dapp/src/utils/orangekit/ledger-live/tests/bitcoin-provider.test.ts +++ b/dapp/test/utils/orangekit/ledger-live/bitcoin-provider.test.ts @@ -8,7 +8,7 @@ import { Balance } from "@orangekit/react/dist/src/wallet/bitcoin-wallet-provide import { AcreMessageType } from "@ledgerhq/wallet-api-acre-module" import { ZeroAddress } from "ethers" import BigNumber from "bignumber.js" -import AcreLedgerLiveBitcoinProvider from "../bitcoin-provider" +import AcreLedgerLiveBitcoinProvider from "#/utils/orangekit/ledger-live/bitcoin-provider" describe("AcreLedgerLiveBitcoinProvider", () => { const bitcoinAddress = "mjc2zGWypwpNyDi4ZxGbBNnUA84bfgiwYc" From 291b9294b63a5958ebef5b5c599c0af7b2f262fa Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Fri, 29 Nov 2024 13:37:28 +0100 Subject: [PATCH 02/22] Add tooltip if activities are pending --- dapp/src/components/shared/Tooltip.tsx | 14 +++++++-- dapp/src/hooks/store/useActivities.ts | 9 +++++- .../pages/DashboardPage/PositionDetails.tsx | 30 +++++++++++++++++-- .../TransactionHistory/TransactionTable.tsx | 6 +++- 4 files changed, 52 insertions(+), 7 deletions(-) diff --git a/dapp/src/components/shared/Tooltip.tsx b/dapp/src/components/shared/Tooltip.tsx index 924e0e950..03a2ffd22 100644 --- a/dapp/src/components/shared/Tooltip.tsx +++ b/dapp/src/components/shared/Tooltip.tsx @@ -1,8 +1,17 @@ import React, { useState } from "react" -import { Box, Tooltip as ChakraTooltip, TooltipProps } from "@chakra-ui/react" +import { + Box, + BoxProps, + Tooltip as ChakraTooltip, + TooltipProps as ChakraTooltipProps, +} from "@chakra-ui/react" + +type TooltipProps = ChakraTooltipProps & { + wrapperProps?: BoxProps +} export default function Tooltip(props: TooltipProps) { - const { children, ...restProps } = props + const { children, wrapperProps, ...restProps } = props const [isOpen, setIsOpen] = useState(false) return ( @@ -11,6 +20,7 @@ export default function Tooltip(props: TooltipProps) { onMouseEnter={() => setIsOpen(true)} onMouseLeave={() => setIsOpen(false)} onClick={() => setIsOpen(true)} + {...wrapperProps} > {children} diff --git a/dapp/src/hooks/store/useActivities.ts b/dapp/src/hooks/store/useActivities.ts index b9f022b29..17512427a 100644 --- a/dapp/src/hooks/store/useActivities.ts +++ b/dapp/src/hooks/store/useActivities.ts @@ -2,5 +2,12 @@ import { selectActivities } from "#/store/wallet" import { useAppSelector } from "./useAppSelector" export default function useActivities() { - return useAppSelector(selectActivities) + const data = useAppSelector(selectActivities) + const status: "pending" | "idle" = data.some( + (activity) => activity.status === "pending", + ) + ? "pending" + : "idle" + + return { data, status } } diff --git a/dapp/src/pages/DashboardPage/PositionDetails.tsx b/dapp/src/pages/DashboardPage/PositionDetails.tsx index f5b2e30b4..b17db415e 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 { @@ -14,6 +15,7 @@ import { ButtonProps, Flex, HStack, + Icon, // Tag, VStack, } from "@chakra-ui/react" @@ -22,6 +24,8 @@ import UserDataSkeleton from "#/components/shared/UserDataSkeleton" import { featureFlags } from "#/constants" import { TextMd } from "#/components/shared/Typography" import AcreTVLMessage from "./AcreTVLMessage" +import Tooltip from "#/components/shared/Tooltip" +import { IconClockHour5Filled } from "@tabler/icons-react" const isWithdrawalFlowEnabled = featureFlags.WITHDRAWALS_ENABLED @@ -35,6 +39,9 @@ const buttonStyles: ButtonProps = { h: "auto", } +// TODO: Define in the new color palette +const TOOLTIP_ICON_COLOR = "#3A3328" + export default function PositionDetails() { const { data } = useBitcoinPosition() const bitcoinAmount = data?.estimatedBitcoinBalance ?? 0n @@ -51,12 +58,29 @@ export default function PositionDetails() { const isDisabledForMobileMode = isMobileMode && !featureFlags.MOBILE_MODE_ENABLED + const activities = useActivities() + return ( {/* TODO: Component should be moved to `CardHeader` */} - - Your balance + + Your balance + {activities.status === "pending" && ( + + + + )} {/* TODO: Uncomment when position will be implemented */} {/* {positionPercentage && ( )} */} - + + {(pageData: Activity[]) => pageData.map((activity) => ( From 2030aafee2cd266c84be9c4646c327fb2baf6515 Mon Sep 17 00:00:00 2001 From: osrm <90407222+osrm@users.noreply.github.com> Date: Mon, 2 Dec 2024 22:30:59 +0900 Subject: [PATCH 03/22] cleanup README.md fix typos and grammars --- dapp/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/dapp/README.md b/dapp/README.md index 349464532..3d3f02761 100644 --- a/dapp/README.md +++ b/dapp/README.md @@ -1,10 +1,10 @@ # Acre dApp -The application is integrate with OrangeKit and allows people to earn yield on their Bitcoin via yield farming on Ethereum. +The application is integrated with OrangeKit and allows people to earn yield on their Bitcoin via yield farming on Ethereum. This project was bootstrapped with [Create Vite](https://github.com/vitejs/vite/tree/main/packages/create-vite). -To access the dApp in Ledger Live import manifest as described in the +To access the dApp in Ledger Live import the manifest as described in the [Ledger Live Setup](#ledger-live-setup) section. ### Development @@ -29,7 +29,7 @@ Install dependencies and start the dApp: ### Environmental variables -To make sure dApp is running correctly, include the following variables in `.env` file: +To make sure dApp is running correctly, include the following variables in the `.env` file: ```bash VITE_TBTC_API_ENDPOINT= From 614d412c8892d03066432e87cbd5ac0a258e8eb9 Mon Sep 17 00:00:00 2001 From: osrm <90407222+osrm@users.noreply.github.com> Date: Mon, 2 Dec 2024 22:31:25 +0900 Subject: [PATCH 04/22] fix typo README.md --- solidity/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/solidity/README.md b/solidity/README.md index e842e5564..da86c24f0 100644 --- a/solidity/README.md +++ b/solidity/README.md @@ -18,7 +18,7 @@ pnpm install ### Testing -To run the test execute: +To run the tests execute: ``` $ pnpm test From 796d38fec071cda9800de0dfd6cd529586001b34 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Tue, 3 Dec 2024 16:55:31 +0100 Subject: [PATCH 05/22] Remove gamification features --- dapp/.env | 1 - .../assets/images/benefits/bibos-beehive.svg | 60 ---------------- dapp/src/assets/images/benefits/index.ts | 4 -- .../images/benefits/rewards-boost-arrow.svg | 68 ------------------- .../assets/images/benefits/rewards-boost.svg | 1 - .../src/assets/images/benefits/season-key.svg | 1 - dapp/src/components/Sidebar.tsx | 51 +------------- .../UnstakeFormModal/UnstakeDetails.tsx | 14 +--- .../UnstakeFormModal/WithdrawWarning.tsx | 59 ---------------- .../UnstakeFormModal/index.tsx | 2 +- dapp/src/constants/benefits.ts | 31 --------- dapp/src/constants/featureFlags.ts | 4 -- dapp/src/constants/index.ts | 1 - dapp/src/vite-env.d.ts | 1 - 14 files changed, 5 insertions(+), 293 deletions(-) delete mode 100644 dapp/src/assets/images/benefits/bibos-beehive.svg delete mode 100644 dapp/src/assets/images/benefits/index.ts delete mode 100644 dapp/src/assets/images/benefits/rewards-boost-arrow.svg delete mode 100644 dapp/src/assets/images/benefits/rewards-boost.svg delete mode 100644 dapp/src/assets/images/benefits/season-key.svg delete mode 100644 dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/WithdrawWarning.tsx delete mode 100644 dapp/src/constants/benefits.ts diff --git a/dapp/.env b/dapp/.env index fdb71b35d..fd447e796 100644 --- a/dapp/.env +++ b/dapp/.env @@ -19,7 +19,6 @@ VITE_GELATO_RELAY_API_KEY="htaJCy_XHj8WsE3w53WBMurfySDtjLP_TrNPPa6IPIc_" # this VITE_SUBGRAPH_API_KEY="" # Feature flags -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" diff --git a/dapp/src/assets/images/benefits/bibos-beehive.svg b/dapp/src/assets/images/benefits/bibos-beehive.svg deleted file mode 100644 index 784888e3c..000000000 --- a/dapp/src/assets/images/benefits/bibos-beehive.svg +++ /dev/null @@ -1,60 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/dapp/src/assets/images/benefits/index.ts b/dapp/src/assets/images/benefits/index.ts deleted file mode 100644 index 072363998..000000000 --- a/dapp/src/assets/images/benefits/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export { default as rewardsBoostImage } from "#/assets/images/benefits/rewards-boost.svg" -export { default as seasonKeyImage } from "#/assets/images/benefits/season-key.svg" -export { default as rewardsBoostArrowImage } from "#/assets/images/benefits/rewards-boost-arrow.svg" -export { default as bibosBeehiveImage } from "#/assets/images/benefits/bibos-beehive.svg" diff --git a/dapp/src/assets/images/benefits/rewards-boost-arrow.svg b/dapp/src/assets/images/benefits/rewards-boost-arrow.svg deleted file mode 100644 index b8cb985cf..000000000 --- a/dapp/src/assets/images/benefits/rewards-boost-arrow.svg +++ /dev/null @@ -1,68 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/dapp/src/assets/images/benefits/rewards-boost.svg b/dapp/src/assets/images/benefits/rewards-boost.svg deleted file mode 100644 index 70d7f5144..000000000 --- a/dapp/src/assets/images/benefits/rewards-boost.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/dapp/src/assets/images/benefits/season-key.svg b/dapp/src/assets/images/benefits/season-key.svg deleted file mode 100644 index e40917ff3..000000000 --- a/dapp/src/assets/images/benefits/season-key.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/dapp/src/components/Sidebar.tsx b/dapp/src/components/Sidebar.tsx index b2e010259..b521add95 100644 --- a/dapp/src/components/Sidebar.tsx +++ b/dapp/src/components/Sidebar.tsx @@ -1,22 +1,8 @@ import React, { ComponentProps, useEffect } from "react" -import { - Box, - Card, - CardBody, - Flex, - useMultiStyleConfig, - Image, -} from "@chakra-ui/react" +import { Box, useMultiStyleConfig } from "@chakra-ui/react" import { useScrollbarVisibility, useSidebar } from "#/hooks" -import { - EXTERNAL_HREF, - REWARD_BOOST, - SEASON_KEY, - featureFlags, -} from "#/constants" -import { rewardsBoostArrowImage } from "#/assets/images/benefits" +import { EXTERNAL_HREF } from "#/constants" import ButtonLink from "./shared/ButtonLink" -import { TextSm } from "./shared/Typography" const CHAKRA_MODAL_CONTAINER_SELECTOR = ".chakra-modal__content-container" @@ -47,11 +33,6 @@ const BUTTONS: Partial>[] = [ }, ] -const BENEFITS = [ - { ...REWARD_BOOST, imageSrc: rewardsBoostArrowImage }, - SEASON_KEY, -].map((benefit) => ({ ...benefit, name: `1x ${benefit.name}` })) - export default function Sidebar() { const { isOpen } = useSidebar() const { isVisible, scrollbarWidth, refreshState } = useScrollbarVisibility( @@ -76,34 +57,6 @@ export default function Sidebar() { mr={isVisible ? scrollbarWidth : 0} > - {featureFlags.GAMIFICATION_ENABLED && ( - <> - {/* TODO: Update the component when logic of losing rewards is ready */} - Rewards you’ll unlock - - {BENEFITS.map(({ name, imageSrc }) => ( - - - {name} - - - - ))} - - - )} - {BUTTONS.map((buttonProps) => ( ( TOKEN_AMOUNT_FIELD_NAME, ) @@ -31,9 +24,6 @@ function UnstakeDetails({ return ( - {featureFlags.GAMIFICATION_ENABLED && ( - - )} ( - TOKEN_AMOUNT_FIELD_NAME, - ) - const amount = value ?? 0n - - const { symbol } = getCurrencyByType(currency) - - const minimumBalanceText = `${formatSatoshiAmount( - MINIMUM_BALANCE, - )} ${symbol} ` - - const newBalance = balance - amount - const isMinimumBalanceExceeded = newBalance < MINIMUM_BALANCE - - if (isMinimumBalanceExceeded && isValid) { - return ( - - - - - The new balance is below the required minimum of - {minimumBalanceText}. Withdrawing your funds - will result in the loss of your current rewards. - - - ) - } - - return ( - - - - - A minimum balance of - {minimumBalanceText} is required to keep all - rewards active. - - - ) -} - -export default WithdrawWarning diff --git a/dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/index.tsx b/dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/index.tsx index afab79189..a27f677d1 100644 --- a/dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/index.tsx +++ b/dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/index.tsx @@ -38,7 +38,7 @@ function UnstakeFormModal({ withMaxButton defaultAmount={defaultAmount} > - + Withdraw diff --git a/dapp/src/constants/benefits.ts b/dapp/src/constants/benefits.ts deleted file mode 100644 index 0de946a2e..000000000 --- a/dapp/src/constants/benefits.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { - rewardsBoostImage, - seasonKeyImage, - bibosBeehiveImage, -} from "#/assets/images/benefits" - -type BenefitDetails = { - name: string - description: string - imageSrc: string -} - -export const REWARD_BOOST: BenefitDetails = { - name: "Rewards Boost", - description: "Boosts your APY when Acre fully launches", - imageSrc: rewardsBoostImage, -} - -export const SEASON_KEY: BenefitDetails = { - name: "All Seasons Key", - description: "First dibs access to upcoming seasons", - imageSrc: seasonKeyImage, -} - -export const BIBOS_BEEHIVE: BenefitDetails = { - name: "Bibo's Beehive", - description: "Get rewards from top Bitcoin projects", - imageSrc: bibosBeehiveImage, -} - -export const BENEFITS = [SEASON_KEY, BIBOS_BEEHIVE] diff --git a/dapp/src/constants/featureFlags.ts b/dapp/src/constants/featureFlags.ts index ddc1ef2ee..97321d55f 100644 --- a/dapp/src/constants/featureFlags.ts +++ b/dapp/src/constants/featureFlags.ts @@ -1,6 +1,3 @@ -const GAMIFICATION_ENABLED = - import.meta.env.VITE_FEATURE_FLAG_GAMIFICATION_ENABLED === "true" - const OKX_WALLET_ENABLED = import.meta.env.VITE_FEATURE_FLAG_OKX_WALLET_ENABLED === "true" @@ -22,7 +19,6 @@ const MOBILE_MODE_ENABLED = import.meta.env.VITE_FEATURE_MOBILE_MODE_ENABLED === "true" const featureFlags = { - GAMIFICATION_ENABLED, OKX_WALLET_ENABLED, XVERSE_WALLET_ENABLED, WITHDRAWALS_ENABLED, diff --git a/dapp/src/constants/index.ts b/dapp/src/constants/index.ts index 122333c6f..33234115f 100644 --- a/dapp/src/constants/index.ts +++ b/dapp/src/constants/index.ts @@ -1,4 +1,3 @@ -export * from "./benefits" export * from "./chains" export * from "./currency" export { default as env } from "./env" diff --git a/dapp/src/vite-env.d.ts b/dapp/src/vite-env.d.ts index 564bf6a80..225cf8def 100644 --- a/dapp/src/vite-env.d.ts +++ b/dapp/src/vite-env.d.ts @@ -7,7 +7,6 @@ interface ImportMetaEnv { readonly VITE_REFERRAL: number readonly VITE_TBTC_API_ENDPOINT: string readonly VITE_GELATO_RELAY_API_KEY: string - readonly VITE_FEATURE_FLAG_GAMIFICATION_ENABLED: string readonly VITE_FEATURE_FLAG_WITHDRAWALS_ENABLED: string readonly VITE_FEATURE_FLAG_OKX_WALLET_ENABLED: string readonly VITE_FEATURE_FLAG_XVERSE_WALLET_ENABLED: string From f90c9a53f00d74921a36be0de0ac3ae2ec414ca9 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Tue, 3 Dec 2024 17:42:14 +0100 Subject: [PATCH 06/22] Remove `Sidebar` component --- dapp/.env | 1 - dapp/src/DApp.tsx | 13 +- dapp/src/components/Layout.tsx | 2 - .../components/ModalRoot/withBaseModal.tsx | 11 +- dapp/src/components/Sidebar.tsx | 117 ------------------ dapp/src/contexts/SidebarContext.tsx | 49 -------- dapp/src/contexts/index.tsx | 1 - dapp/src/hooks/index.ts | 1 - dapp/src/hooks/useSidebar.ts | 12 -- dapp/src/theme/Sidebar.ts | 38 ------ dapp/src/theme/index.ts | 2 - dapp/src/theme/utils/semanticTokens.ts | 3 - dapp/src/theme/utils/zIndices.ts | 1 - 13 files changed, 7 insertions(+), 244 deletions(-) delete mode 100644 dapp/src/components/Sidebar.tsx delete mode 100644 dapp/src/contexts/SidebarContext.tsx delete mode 100644 dapp/src/hooks/useSidebar.ts delete mode 100644 dapp/src/theme/Sidebar.ts diff --git a/dapp/.env b/dapp/.env index fdb71b35d..fd447e796 100644 --- a/dapp/.env +++ b/dapp/.env @@ -19,7 +19,6 @@ VITE_GELATO_RELAY_API_KEY="htaJCy_XHj8WsE3w53WBMurfySDtjLP_TrNPPa6IPIc_" # this VITE_SUBGRAPH_API_KEY="" # Feature flags -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" diff --git a/dapp/src/DApp.tsx b/dapp/src/DApp.tsx index 587d248ef..9e4992e53 100644 --- a/dapp/src/DApp.tsx +++ b/dapp/src/DApp.tsx @@ -9,7 +9,6 @@ import { AcreSdkProvider } from "./acre-react/contexts" import GlobalStyles from "./components/GlobalStyles" import { DocsDrawerContextProvider, - SidebarContextProvider, WalletConnectionAlertContextProvider, } from "./contexts" import { useInitApp } from "./hooks" @@ -66,13 +65,11 @@ function DAppProviders() { - - - - - - - + + + + + diff --git a/dapp/src/components/Layout.tsx b/dapp/src/components/Layout.tsx index 42bc526a7..c9cec76f8 100644 --- a/dapp/src/components/Layout.tsx +++ b/dapp/src/components/Layout.tsx @@ -6,7 +6,6 @@ import { DappMode } from "#/types" import DocsDrawer from "./DocsDrawer" import Header from "./Header" import ModalRoot from "./ModalRoot" -import Sidebar from "./Sidebar" import MobileModeBanner from "./MobileModeBanner" import Footer from "./Footer" @@ -46,7 +45,6 @@ function Layout() { > - diff --git a/dapp/src/components/ModalRoot/withBaseModal.tsx b/dapp/src/components/ModalRoot/withBaseModal.tsx index 5eeb2396a..b15a22cf6 100644 --- a/dapp/src/components/ModalRoot/withBaseModal.tsx +++ b/dapp/src/components/ModalRoot/withBaseModal.tsx @@ -1,7 +1,7 @@ import React, { ComponentType, useCallback } from "react" import { Modal, ModalContent, ModalOverlay, ModalProps } from "@chakra-ui/react" import { BaseModalProps } from "#/types" -import { useAppNavigate, useSidebar } from "#/hooks" +import { useAppNavigate } from "#/hooks" const MODAL_BASE_SIZE = "lg" @@ -12,7 +12,6 @@ function withBaseModal( return function ModalBase(props: T) { const { closeModal, closeOnEsc, navigateToOnClose } = props - const { isOpen: isSidebarOpen } = useSidebar() const navigate = useAppNavigate() const handleCloseModal = useCallback(() => { @@ -33,13 +32,7 @@ function withBaseModal( {...modalProps} > - + diff --git a/dapp/src/components/Sidebar.tsx b/dapp/src/components/Sidebar.tsx deleted file mode 100644 index b2e010259..000000000 --- a/dapp/src/components/Sidebar.tsx +++ /dev/null @@ -1,117 +0,0 @@ -import React, { ComponentProps, useEffect } from "react" -import { - Box, - Card, - CardBody, - Flex, - useMultiStyleConfig, - Image, -} from "@chakra-ui/react" -import { useScrollbarVisibility, useSidebar } from "#/hooks" -import { - EXTERNAL_HREF, - REWARD_BOOST, - SEASON_KEY, - featureFlags, -} from "#/constants" -import { rewardsBoostArrowImage } from "#/assets/images/benefits" -import ButtonLink from "./shared/ButtonLink" -import { TextSm } from "./shared/Typography" - -const CHAKRA_MODAL_CONTAINER_SELECTOR = ".chakra-modal__content-container" - -const BUTTONS: Partial>[] = [ - { - children: "Docs", - variant: "solid", - href: EXTERNAL_HREF.DOCS, - isExternal: true, - }, - { - children: "FAQ", - colorScheme: "gold", - href: EXTERNAL_HREF.FAQ, - isExternal: true, - }, - { - children: "Contracts", - colorScheme: "gold", - href: EXTERNAL_HREF.CONTRACTS, - isExternal: true, - }, - { - children: "Blog", - colorScheme: "gold", - href: EXTERNAL_HREF.BLOG, - isExternal: true, - }, -] - -const BENEFITS = [ - { ...REWARD_BOOST, imageSrc: rewardsBoostArrowImage }, - SEASON_KEY, -].map((benefit) => ({ ...benefit, name: `1x ${benefit.name}` })) - -export default function Sidebar() { - const { isOpen } = useSidebar() - const { isVisible, scrollbarWidth, refreshState } = useScrollbarVisibility( - CHAKRA_MODAL_CONTAINER_SELECTOR, - ) - const styles = useMultiStyleConfig("Sidebar") - - useEffect(() => { - if (!isOpen) return - refreshState() - }, [isOpen, refreshState]) - - return ( - - - {featureFlags.GAMIFICATION_ENABLED && ( - <> - {/* TODO: Update the component when logic of losing rewards is ready */} - Rewards you’ll unlock - - {BENEFITS.map(({ name, imageSrc }) => ( - - - {name} - - - - ))} - - - )} - - {BUTTONS.map((buttonProps) => ( - - ))} - - - ) -} diff --git a/dapp/src/contexts/SidebarContext.tsx b/dapp/src/contexts/SidebarContext.tsx deleted file mode 100644 index 125b871a1..000000000 --- a/dapp/src/contexts/SidebarContext.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import useIsEmbed from "#/hooks/useIsEmbed" -import React, { createContext, useCallback, useMemo, useState } from "react" - -type SidebarContextValue = { - isOpen: boolean - onOpen: () => void - onClose: () => void -} - -export const SidebarContext = createContext({ - isOpen: false, - onOpen: () => {}, - onClose: () => {}, -}) - -export function SidebarContextProvider({ - children, -}: { - children: React.ReactNode -}): React.ReactElement { - const { isEmbed } = useIsEmbed() - - const [isOpen, setIsOpen] = useState(false) - - const onOpen = useCallback(() => { - if (isEmbed) return - - setIsOpen(true) - }, [isEmbed]) - - const onClose = useCallback(() => { - setIsOpen(false) - }, []) - - const contextValue: SidebarContextValue = useMemo( - () => ({ - isOpen, - onOpen, - onClose, - }), - [isOpen, onClose, onOpen], - ) - - return ( - - {children} - - ) -} diff --git a/dapp/src/contexts/index.tsx b/dapp/src/contexts/index.tsx index 658feecbd..263951aec 100644 --- a/dapp/src/contexts/index.tsx +++ b/dapp/src/contexts/index.tsx @@ -1,5 +1,4 @@ export * from "./DocsDrawerContext" -export * from "./SidebarContext" export * from "./StakeFlowContext" export * from "./PaginationContext" export * from "./WalletConnectionAlertContext" diff --git a/dapp/src/hooks/index.ts b/dapp/src/hooks/index.ts index 91b1cfeb6..b075db2e4 100644 --- a/dapp/src/hooks/index.ts +++ b/dapp/src/hooks/index.ts @@ -2,7 +2,6 @@ export * from "./store" export * from "./sdk" export * from "./orangeKit" export * from "./useDetectThemeMode" -export * from "./useSidebar" export * from "./useDocsDrawer" export * from "./useTransactionDetails" export * from "./useStakeFlowContext" diff --git a/dapp/src/hooks/useSidebar.ts b/dapp/src/hooks/useSidebar.ts deleted file mode 100644 index 944364076..000000000 --- a/dapp/src/hooks/useSidebar.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { useContext } from "react" -import { SidebarContext } from "#/contexts" - -export function useSidebar() { - const context = useContext(SidebarContext) - - if (!context) { - throw new Error("SidebarContext used outside of SidebarContext component") - } - - return context -} diff --git a/dapp/src/theme/Sidebar.ts b/dapp/src/theme/Sidebar.ts deleted file mode 100644 index 1b1a431b1..000000000 --- a/dapp/src/theme/Sidebar.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react" - -const PARTS = ["sidebarContainer", "sidebar"] - -const baseStyleSidebarContainer = defineStyle({ - top: 0, - right: 0, - h: "100vh", - position: "fixed", - overflow: "hidden", - zIndex: "sidebar", - transition: "width 0.3s", -}) - -const baseStyleSidebar = defineStyle({ - p: 4, - height: "100%", - w: "sidebar_width", - bg: "gold.200", - borderTop: "2px", - borderLeft: "2px", - borderColor: "gold.100", - borderTopLeftRadius: "xl", - display: "flex", - flexDirection: "column", - gap: 3, -}) - -const multiStyleConfig = createMultiStyleConfigHelpers(PARTS) - -const baseStyle = multiStyleConfig.definePartsStyle({ - sidebarContainer: baseStyleSidebarContainer, - sidebar: baseStyleSidebar, -}) - -export const sidebarTheme = multiStyleConfig.defineMultiStyleConfig({ - baseStyle, -}) diff --git a/dapp/src/theme/index.ts b/dapp/src/theme/index.ts index aaf6f4765..4c306df41 100644 --- a/dapp/src/theme/index.ts +++ b/dapp/src/theme/index.ts @@ -13,7 +13,6 @@ import { modalTheme } from "./Modal" import { cardTheme } from "./Card" import { tooltipTheme } from "./Tooltip" import { headingTheme } from "./Heading" -import { sidebarTheme } from "./Sidebar" import { currencyBalanceTheme } from "./CurrencyBalance" import { tokenBalanceInputTheme } from "./TokenBalanceInput" import { inputTheme } from "./Input" @@ -61,7 +60,6 @@ const defaultTheme = { Input: inputTheme, Link: linkTheme, Modal: modalTheme, - Sidebar: sidebarTheme, Spinner: spinnerTheme, Tag: tagTheme, TokenBalanceInput: tokenBalanceInputTheme, diff --git a/dapp/src/theme/utils/semanticTokens.ts b/dapp/src/theme/utils/semanticTokens.ts index 8ad1298ba..e33367d84 100644 --- a/dapp/src/theme/utils/semanticTokens.ts +++ b/dapp/src/theme/utils/semanticTokens.ts @@ -5,7 +5,4 @@ export const semanticTokens = { modal_shift: "9.75rem", // 156px dashboard_card_padding: 5, }, - sizes: { - sidebar_width: 80, - }, } diff --git a/dapp/src/theme/utils/zIndices.ts b/dapp/src/theme/utils/zIndices.ts index 3e9fb1a4b..f0be28d85 100644 --- a/dapp/src/theme/utils/zIndices.ts +++ b/dapp/src/theme/utils/zIndices.ts @@ -1,5 +1,4 @@ export const zIndices = { - sidebar: 1450, drawer: 1470, mobileBanner: 1500, header: 1400, From 5f7db576cae78709cefd42e93c494d196b8042b5 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Tue, 3 Dec 2024 17:45:15 +0100 Subject: [PATCH 07/22] Revert `.env` changes --- dapp/.env | 1 + 1 file changed, 1 insertion(+) diff --git a/dapp/.env b/dapp/.env index fd447e796..fdb71b35d 100644 --- a/dapp/.env +++ b/dapp/.env @@ -19,6 +19,7 @@ VITE_GELATO_RELAY_API_KEY="htaJCy_XHj8WsE3w53WBMurfySDtjLP_TrNPPa6IPIc_" # this VITE_SUBGRAPH_API_KEY="" # Feature flags +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" From 6e4c0aa2e5944c4b387506f0ac851ee521a64cf6 Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Wed, 4 Dec 2024 13:21:11 +0100 Subject: [PATCH 08/22] Pull the existing components one level up If there's only an index file, there's no need to have a directory with an index.* file. The idea with using index.tsx is that imports can remain unchanged in cases where we upgrade from having a single-file component to needing scoped sibling components. --- .../src/components/{DocsDrawer/index.tsx => DocsDrawer.tsx} | 0 .../components/{GlobalStyles/index.tsx => GlobalStyles.tsx} | 0 .../{BlockExplorerLink/index.tsx => BlockExplorerLink.tsx} | 0 .../shared/{ButtonLink/index.tsx => ButtonLink.tsx} | 0 .../{CurrencyBalance/index.tsx => CurrencyBalance.tsx} | 2 +- .../index.tsx => CurrencyBalanceWithConversion.tsx} | 2 +- .../{NumberFormatInput/index.tsx => NumberFormatInput.tsx} | 0 .../components/shared/{Skeleton/index.tsx => Skeleton.tsx} | 0 .../components/shared/{Spinner/index.tsx => Spinner.tsx} | 0 .../{TokenBalanceInput/index.tsx => TokenBalanceInput.tsx} | 6 +++--- 10 files changed, 5 insertions(+), 5 deletions(-) rename dapp/src/components/{DocsDrawer/index.tsx => DocsDrawer.tsx} (100%) rename dapp/src/components/{GlobalStyles/index.tsx => GlobalStyles.tsx} (100%) rename dapp/src/components/shared/{BlockExplorerLink/index.tsx => BlockExplorerLink.tsx} (100%) rename dapp/src/components/shared/{ButtonLink/index.tsx => ButtonLink.tsx} (100%) rename dapp/src/components/shared/{CurrencyBalance/index.tsx => CurrencyBalance.tsx} (98%) rename dapp/src/components/shared/{CurrencyBalanceWithConversion/index.tsx => CurrencyBalanceWithConversion.tsx} (85%) rename dapp/src/components/shared/{NumberFormatInput/index.tsx => NumberFormatInput.tsx} (100%) rename dapp/src/components/shared/{Skeleton/index.tsx => Skeleton.tsx} (100%) rename dapp/src/components/shared/{Spinner/index.tsx => Spinner.tsx} (100%) rename dapp/src/components/shared/{TokenBalanceInput/index.tsx => TokenBalanceInput.tsx} (96%) diff --git a/dapp/src/components/DocsDrawer/index.tsx b/dapp/src/components/DocsDrawer.tsx similarity index 100% rename from dapp/src/components/DocsDrawer/index.tsx rename to dapp/src/components/DocsDrawer.tsx diff --git a/dapp/src/components/GlobalStyles/index.tsx b/dapp/src/components/GlobalStyles.tsx similarity index 100% rename from dapp/src/components/GlobalStyles/index.tsx rename to dapp/src/components/GlobalStyles.tsx diff --git a/dapp/src/components/shared/BlockExplorerLink/index.tsx b/dapp/src/components/shared/BlockExplorerLink.tsx similarity index 100% rename from dapp/src/components/shared/BlockExplorerLink/index.tsx rename to dapp/src/components/shared/BlockExplorerLink.tsx diff --git a/dapp/src/components/shared/ButtonLink/index.tsx b/dapp/src/components/shared/ButtonLink.tsx similarity index 100% rename from dapp/src/components/shared/ButtonLink/index.tsx rename to dapp/src/components/shared/ButtonLink.tsx diff --git a/dapp/src/components/shared/CurrencyBalance/index.tsx b/dapp/src/components/shared/CurrencyBalance.tsx similarity index 98% rename from dapp/src/components/shared/CurrencyBalance/index.tsx rename to dapp/src/components/shared/CurrencyBalance.tsx index bf7f65750..1b5aa3be7 100644 --- a/dapp/src/components/shared/CurrencyBalance/index.tsx +++ b/dapp/src/components/shared/CurrencyBalance.tsx @@ -12,7 +12,7 @@ import { numberToLocaleString, } from "#/utils" import { CurrencyType, AmountType } from "#/types" -import Tooltip from "../Tooltip" +import Tooltip from "./Tooltip" export type CurrencyBalanceProps = { currency: CurrencyType diff --git a/dapp/src/components/shared/CurrencyBalanceWithConversion/index.tsx b/dapp/src/components/shared/CurrencyBalanceWithConversion.tsx similarity index 85% rename from dapp/src/components/shared/CurrencyBalanceWithConversion/index.tsx rename to dapp/src/components/shared/CurrencyBalanceWithConversion.tsx index 5d19dd126..ea9f64850 100644 --- a/dapp/src/components/shared/CurrencyBalanceWithConversion/index.tsx +++ b/dapp/src/components/shared/CurrencyBalanceWithConversion.tsx @@ -1,6 +1,6 @@ import React from "react" import { useCurrencyConversion } from "#/hooks" -import { CurrencyBalance, CurrencyBalanceProps } from "../CurrencyBalance" +import { CurrencyBalance, CurrencyBalanceProps } from "./CurrencyBalance" export function CurrencyBalanceWithConversion({ from, diff --git a/dapp/src/components/shared/NumberFormatInput/index.tsx b/dapp/src/components/shared/NumberFormatInput.tsx similarity index 100% rename from dapp/src/components/shared/NumberFormatInput/index.tsx rename to dapp/src/components/shared/NumberFormatInput.tsx diff --git a/dapp/src/components/shared/Skeleton/index.tsx b/dapp/src/components/shared/Skeleton.tsx similarity index 100% rename from dapp/src/components/shared/Skeleton/index.tsx rename to dapp/src/components/shared/Skeleton.tsx diff --git a/dapp/src/components/shared/Spinner/index.tsx b/dapp/src/components/shared/Spinner.tsx similarity index 100% rename from dapp/src/components/shared/Spinner/index.tsx rename to dapp/src/components/shared/Spinner.tsx diff --git a/dapp/src/components/shared/TokenBalanceInput/index.tsx b/dapp/src/components/shared/TokenBalanceInput.tsx similarity index 96% rename from dapp/src/components/shared/TokenBalanceInput/index.tsx rename to dapp/src/components/shared/TokenBalanceInput.tsx index cd92ff160..69067f35d 100644 --- a/dapp/src/components/shared/TokenBalanceInput/index.tsx +++ b/dapp/src/components/shared/TokenBalanceInput.tsx @@ -21,9 +21,9 @@ import { useCurrencyConversion } from "#/hooks" import NumberFormatInput, { NumberFormatInputValues, NumberFormatInputProps, -} from "../NumberFormatInput" -import { CurrencyBalance } from "../CurrencyBalance" -import HelperErrorText, { HelperErrorTextProps } from "../Form/HelperErrorText" +} from "./NumberFormatInput" +import { CurrencyBalance } from "./CurrencyBalance" +import HelperErrorText, { HelperErrorTextProps } from "./Form/HelperErrorText" type FiatCurrencyBalanceProps = { amount: bigint From ef61f7dc8a47b7330dc67e8dcd59354857fcc8e5 Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Wed, 4 Dec 2024 14:22:18 +0100 Subject: [PATCH 09/22] Update component file names MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We should not decouple file name from component name—these should match. --- .../ActiveStakingStep/StakeFormModal/StakeDetails.tsx | 4 ++-- .../ActiveUnstakingStep/UnstakeFormModal/UnstakeDetails.tsx | 4 ++-- .../FeesDetails/{FeesItem.tsx => FeesDetailsAmountItem.tsx} | 0 .../{AmountItem.tsx => TransactionDetailsAmountItem.tsx} | 0 4 files changed, 4 insertions(+), 4 deletions(-) rename dapp/src/components/shared/FeesDetails/{FeesItem.tsx => FeesDetailsAmountItem.tsx} (100%) rename dapp/src/components/shared/TransactionDetails/{AmountItem.tsx => TransactionDetailsAmountItem.tsx} (100%) diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/StakeDetails.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/StakeDetails.tsx index ac51f54cd..05fb8ad5c 100644 --- a/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/StakeDetails.tsx +++ b/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/StakeDetails.tsx @@ -1,7 +1,7 @@ import React from "react" import { List } from "@chakra-ui/react" -import TransactionDetailsAmountItem from "#/components/shared/TransactionDetails/AmountItem" -import FeesDetailsAmountItem from "#/components/shared/FeesDetails/FeesItem" +import TransactionDetailsAmountItem from "#/components/shared/TransactionDetails/TransactionDetailsAmountItem" +import FeesDetailsAmountItem from "#/components/shared/FeesDetails/FeesDetailsAmountItem" import { TOKEN_AMOUNT_FIELD_NAME } from "#/components/shared/TokenAmountForm/TokenAmountFormBase" import { FeesTooltip } from "#/components/TransactionModal/FeesTooltip" import { diff --git a/dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/UnstakeDetails.tsx b/dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/UnstakeDetails.tsx index b457f1347..b69ce1a4a 100644 --- a/dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/UnstakeDetails.tsx +++ b/dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/UnstakeDetails.tsx @@ -1,6 +1,6 @@ import React from "react" import { Flex, List } from "@chakra-ui/react" -import TransactionDetailsAmountItem from "#/components/shared/TransactionDetails/AmountItem" +import TransactionDetailsAmountItem from "#/components/shared/TransactionDetails/TransactionDetailsAmountItem" import { TOKEN_AMOUNT_FIELD_NAME } from "#/components/shared/TokenAmountForm/TokenAmountFormBase" import { useFormField, @@ -9,7 +9,7 @@ import { } from "#/hooks" import { ACTION_FLOW_TYPES, CurrencyType } from "#/types" import { DESIRED_DECIMALS_FOR_FEE, featureFlags } from "#/constants" -import FeesDetailsAmountItem from "#/components/shared/FeesDetails/FeesItem" +import FeesDetailsAmountItem from "#/components/shared/FeesDetails/FeesDetailsAmountItem" import WithdrawWarning from "./WithdrawWarning" import { FeesTooltip } from "../../FeesTooltip" diff --git a/dapp/src/components/shared/FeesDetails/FeesItem.tsx b/dapp/src/components/shared/FeesDetails/FeesDetailsAmountItem.tsx similarity index 100% rename from dapp/src/components/shared/FeesDetails/FeesItem.tsx rename to dapp/src/components/shared/FeesDetails/FeesDetailsAmountItem.tsx diff --git a/dapp/src/components/shared/TransactionDetails/AmountItem.tsx b/dapp/src/components/shared/TransactionDetails/TransactionDetailsAmountItem.tsx similarity index 100% rename from dapp/src/components/shared/TransactionDetails/AmountItem.tsx rename to dapp/src/components/shared/TransactionDetails/TransactionDetailsAmountItem.tsx From 36051ba10e38bf2a35ebf2195f0fac4c64cb1ffd Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Thu, 5 Dec 2024 14:08:10 +0100 Subject: [PATCH 10/22] Resolve ESLint error --- dapp/src/pages/DashboardPage/PositionDetails.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dapp/src/pages/DashboardPage/PositionDetails.tsx b/dapp/src/pages/DashboardPage/PositionDetails.tsx index 69a34e89f..836de6279 100644 --- a/dapp/src/pages/DashboardPage/PositionDetails.tsx +++ b/dapp/src/pages/DashboardPage/PositionDetails.tsx @@ -23,9 +23,9 @@ import ArrivingSoonTooltip from "#/components/ArrivingSoonTooltip" import UserDataSkeleton from "#/components/shared/UserDataSkeleton" import { featureFlags } from "#/constants" import { TextMd } from "#/components/shared/Typography" -import AcreTVLMessage from "./AcreTVLMessage" import Tooltip from "#/components/shared/Tooltip" import { IconClockHour5Filled } from "@tabler/icons-react" +import AcreTVLMessage from "./AcreTVLMessage" const isWithdrawalFlowEnabled = featureFlags.WITHDRAWALS_ENABLED From 1e2d62f50e259e1ce03551433b4903d1ec9ed1bd Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Thu, 5 Dec 2024 14:09:38 +0100 Subject: [PATCH 11/22] Update `Tooltip` component --- dapp/src/components/shared/Tooltip.tsx | 18 ++++-------------- .../pages/DashboardPage/PositionDetails.tsx | 3 --- 2 files changed, 4 insertions(+), 17 deletions(-) diff --git a/dapp/src/components/shared/Tooltip.tsx b/dapp/src/components/shared/Tooltip.tsx index 03a2ffd22..6c6944593 100644 --- a/dapp/src/components/shared/Tooltip.tsx +++ b/dapp/src/components/shared/Tooltip.tsx @@ -1,29 +1,19 @@ import React, { useState } from "react" -import { - Box, - BoxProps, - Tooltip as ChakraTooltip, - TooltipProps as ChakraTooltipProps, -} from "@chakra-ui/react" - -type TooltipProps = ChakraTooltipProps & { - wrapperProps?: BoxProps -} +import { Tooltip as ChakraTooltip, TooltipProps, Flex } from "@chakra-ui/react" export default function Tooltip(props: TooltipProps) { - const { children, wrapperProps, ...restProps } = props + const { children, ...restProps } = props const [isOpen, setIsOpen] = useState(false) return ( - setIsOpen(true)} onMouseLeave={() => setIsOpen(false)} onClick={() => setIsOpen(true)} - {...wrapperProps} > {children} - + ) } diff --git a/dapp/src/pages/DashboardPage/PositionDetails.tsx b/dapp/src/pages/DashboardPage/PositionDetails.tsx index 836de6279..8f3e85c9c 100644 --- a/dapp/src/pages/DashboardPage/PositionDetails.tsx +++ b/dapp/src/pages/DashboardPage/PositionDetails.tsx @@ -70,9 +70,6 @@ export default function PositionDetails() { Date: Thu, 5 Dec 2024 14:15:00 +0100 Subject: [PATCH 12/22] Refactor `InfoTooltip` to `TooltipIcon` --- .../StakingErrorModal/ServerErrorModal.tsx | 4 ++-- .../FeesTooltip/FeesTooltip.tsx | 4 ++-- .../shared/{InfoTooltip.tsx => TooltipIcon.tsx} | 13 +++++++++---- dapp/src/pages/DashboardPage/AcrePointsCard.tsx | 6 +++--- dapp/src/pages/DashboardPage/BeehiveCard.tsx | 17 ++++++++--------- 5 files changed, 24 insertions(+), 20 deletions(-) rename dapp/src/components/shared/{InfoTooltip.tsx => TooltipIcon.tsx} (50%) 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/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. - Additional rewards - From 18a4238cd93990483f789bcba4cc3edf065533e0 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Thu, 5 Dec 2024 14:25:08 +0100 Subject: [PATCH 13/22] Refactor `useActivities` hook --- dapp/src/hooks/store/useActivities.ts | 12 ++++------- dapp/src/pages/DashboardPage/BeehiveCard.tsx | 1 + .../pages/DashboardPage/PositionDetails.tsx | 21 ++++++------------- .../TransactionHistory/TransactionTable.tsx | 8 ++----- dapp/src/store/wallet/walletSelector.ts | 5 +++++ 5 files changed, 18 insertions(+), 29 deletions(-) diff --git a/dapp/src/hooks/store/useActivities.ts b/dapp/src/hooks/store/useActivities.ts index 17512427a..d1a04765c 100644 --- a/dapp/src/hooks/store/useActivities.ts +++ b/dapp/src/hooks/store/useActivities.ts @@ -1,13 +1,9 @@ -import { selectActivities } from "#/store/wallet" +import { selectActivities, selectHasPendingActivities } from "#/store/wallet" import { useAppSelector } from "./useAppSelector" export default function useActivities() { - const data = useAppSelector(selectActivities) - const status: "pending" | "idle" = data.some( - (activity) => activity.status === "pending", - ) - ? "pending" - : "idle" + const activities = useAppSelector(selectActivities) + const hasPendingActivities = useAppSelector(selectHasPendingActivities) - return { data, status } + return { activities, hasPendingActivities } } diff --git a/dapp/src/pages/DashboardPage/BeehiveCard.tsx b/dapp/src/pages/DashboardPage/BeehiveCard.tsx index 440ac0ea4..d768e94d7 100644 --- a/dapp/src/pages/DashboardPage/BeehiveCard.tsx +++ b/dapp/src/pages/DashboardPage/BeehiveCard.tsx @@ -1,3 +1,4 @@ +import React from "react" import { MezoSignIcon } from "#/assets/icons" import beehiveIllustrationSrc from "#/assets/images/beehive-illustration.svg" import TooltipIcon from "#/components/shared/TooltipIcon" diff --git a/dapp/src/pages/DashboardPage/PositionDetails.tsx b/dapp/src/pages/DashboardPage/PositionDetails.tsx index 8f3e85c9c..4ae453181 100644 --- a/dapp/src/pages/DashboardPage/PositionDetails.tsx +++ b/dapp/src/pages/DashboardPage/PositionDetails.tsx @@ -15,7 +15,6 @@ import { ButtonProps, Flex, HStack, - Icon, // Tag, VStack, } from "@chakra-ui/react" @@ -23,8 +22,8 @@ import ArrivingSoonTooltip from "#/components/ArrivingSoonTooltip" import UserDataSkeleton from "#/components/shared/UserDataSkeleton" import { featureFlags } from "#/constants" import { TextMd } from "#/components/shared/Typography" -import Tooltip from "#/components/shared/Tooltip" import { IconClockHour5Filled } from "@tabler/icons-react" +import TooltipIcon from "#/components/shared/TooltipIcon" import AcreTVLMessage from "./AcreTVLMessage" const isWithdrawalFlowEnabled = featureFlags.WITHDRAWALS_ENABLED @@ -39,9 +38,6 @@ const buttonStyles: ButtonProps = { h: "auto", } -// TODO: Define in the new color palette -const TOOLTIP_ICON_COLOR = "#3A3328" - export default function PositionDetails() { const { data } = useBitcoinPosition() const bitcoinAmount = data?.estimatedBitcoinBalance ?? 0n @@ -58,7 +54,7 @@ export default function PositionDetails() { const isDisabledForMobileMode = isMobileMode && !featureFlags.MOBILE_MODE_ENABLED - const activities = useActivities() + const { hasPendingActivities } = useActivities() return ( @@ -66,17 +62,12 @@ export default function PositionDetails() { {/* TODO: Component should be moved to `CardHeader` */} Your Acre balance - {activities.status === "pending" && ( - - - + /> )} {/* TODO: Uncomment when position will be implemented */} {/* {positionPercentage && ( diff --git a/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx b/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx index 04bc7ea9c..c713130c0 100644 --- a/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx +++ b/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx @@ -20,15 +20,11 @@ import EstimatedDuration from "./EstimatedDuration" const BLOCK_EXPLORER_CELL_MIN_WIDTH = 16 export default function TransactionTable() { - const activities = useActivities() + const { activities } = useActivities() const isMobileMode = useMobileMode() return ( - + {(pageData: Activity[]) => pageData.map((activity) => ( diff --git a/dapp/src/store/wallet/walletSelector.ts b/dapp/src/store/wallet/walletSelector.ts index db8194cd6..dadb55c4d 100644 --- a/dapp/src/store/wallet/walletSelector.ts +++ b/dapp/src/store/wallet/walletSelector.ts @@ -13,6 +13,11 @@ export const selectActivities = createSelector( (activities) => sortActivitiesByTimestamp(activities), ) +export const selectHasPendingActivities = createSelector( + (state: RootState) => state.wallet.activities, + (activities) => activities.some((activity) => activity.status === "pending"), +) + export const selectAllActivitiesCount = createSelector( (state: RootState) => state.wallet.activities, (activities) => activities.length, From 8ccb337ba8b1e39a0ac094c252f1a7575efacbe5 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Thu, 5 Dec 2024 15:00:17 +0100 Subject: [PATCH 14/22] Remove redundant wrapper element --- .../UnstakeFormModal/UnstakeDetails.tsx | 52 +++++++++---------- 1 file changed, 25 insertions(+), 27 deletions(-) diff --git a/dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/UnstakeDetails.tsx b/dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/UnstakeDetails.tsx index 7af9d4cf0..079c88279 100644 --- a/dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/UnstakeDetails.tsx +++ b/dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/UnstakeDetails.tsx @@ -1,5 +1,5 @@ import React from "react" -import { Flex, List } from "@chakra-ui/react" +import { List } from "@chakra-ui/react" import TransactionDetailsAmountItem from "#/components/shared/TransactionDetails/AmountItem" import { TOKEN_AMOUNT_FIELD_NAME } from "#/components/shared/TokenAmountForm/TokenAmountFormBase" import { @@ -23,32 +23,30 @@ function UnstakeDetails({ currency }: { currency: CurrencyType }) { const { total, ...restFees } = details.transactionFee return ( - - - } - from={{ - currency, - amount: total, - desiredDecimals: DESIRED_DECIMALS_FOR_FEE, - withRoundUp: true, - }} - to={{ - currency: "usd", - }} - /> - - - + + } + from={{ + currency, + amount: total, + desiredDecimals: DESIRED_DECIMALS_FOR_FEE, + withRoundUp: true, + }} + to={{ + currency: "usd", + }} + /> + + ) } From 2a810b885fdcfa710a611f73414cada427662f9d Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Thu, 5 Dec 2024 16:07:39 +0100 Subject: [PATCH 15/22] Bump siww package to `v1.0.0-beta.7` This version adds support for Bitcoin Legacy testnet address starting with `n`. --- dapp/package.json | 2 +- pnpm-lock.yaml | 18 +++++++++--------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/dapp/package.json b/dapp/package.json index b384d7b43..cf3d222b3 100644 --- a/dapp/package.json +++ b/dapp/package.json @@ -24,7 +24,7 @@ "@ledgerhq/wallet-api-acre-module": "0.1.0", "@ledgerhq/wallet-api-client": "1.6.0", "@orangekit/react": "1.0.0-beta.34", - "@orangekit/sign-in-with-wallet": "1.0.0-beta.6", + "@orangekit/sign-in-with-wallet": "1.0.0-beta.7", "@reduxjs/toolkit": "^2.2.0", "@rehooks/local-storage": "^2.4.5", "@safe-global/safe-core-sdk-types": "^5.0.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 53c684f24..8681fa1f8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -42,8 +42,8 @@ importers: specifier: 1.0.0-beta.34 version: 1.0.0-beta.34(@react-native-async-storage/async-storage@1.23.1(react-native@0.74.2(@babel/core@7.24.7)(@babel/preset-env@7.24.7(@babel/core@7.24.7))(@types/react@18.3.3)(bufferutil@4.0.8)(encoding@0.1.13)(react@18.3.1)(utf-8-validate@5.0.10)))(@tanstack/query-core@5.45.0)(@tanstack/react-query@5.45.0(react@18.3.1))(@types/react@18.3.3)(bufferutil@4.0.8)(encoding@0.1.13)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react-native@0.74.2(@babel/core@7.24.7)(@babel/preset-env@7.24.7(@babel/core@7.24.7))(@types/react@18.3.3)(bufferutil@4.0.8)(encoding@0.1.13)(react@18.3.1)(utf-8-validate@5.0.10))(rollup@4.18.0)(typescript@5.4.5)(utf-8-validate@5.0.10)(zod@3.23.8) '@orangekit/sign-in-with-wallet': - specifier: 1.0.0-beta.6 - version: 1.0.0-beta.6(bech32@2.0.0)(ethers@6.13.0(bufferutil@4.0.8)(utf-8-validate@5.0.10)) + specifier: 1.0.0-beta.7 + version: 1.0.0-beta.7(bech32@2.0.0)(ethers@6.13.0(bufferutil@4.0.8)(utf-8-validate@5.0.10)) '@reduxjs/toolkit': specifier: ^2.2.0 version: 2.2.5(react-redux@9.1.2(@types/react@18.3.3)(react@18.3.1)(redux@5.0.1))(react@18.3.1) @@ -2698,11 +2698,11 @@ packages: '@orangekit/sdk@1.0.0-beta.19': resolution: {integrity: sha512-sIqzu3QTb0WkB4Ir4zHX4tP7hf+uZBXX60q/ww6UzwPjoqGL3dOdui59lTZSNygdMbydLE3y9FSNZPNkQvm+gA==} - '@orangekit/sign-in-with-wallet-parser@1.0.0-beta.6': - resolution: {integrity: sha512-Yi6ohSJV4/Ovrq5c7jD+kPE8pZxLhWtFbZjKRwUW8JL60P/tcyT5o0etul0reqcY2iBlIo5aoC2Hh0noRGl86w==} + '@orangekit/sign-in-with-wallet-parser@1.0.0-beta.7': + resolution: {integrity: sha512-C7gmliw2TJOQzIMpuhDZhIGlp7zFSqNsa/oevNaqnB+i0zFIsXZjsKg2oddr8smYG1+KhbX+V+O3AeaPCSsK9A==} - '@orangekit/sign-in-with-wallet@1.0.0-beta.6': - resolution: {integrity: sha512-UzNG8QHehem2wayWDyMBd13z1lQUBKsSq+NjGK6KHYWUbet6EizBeVZK7jSruzTHba3gDI8I3NH071E6sxTFtQ==} + '@orangekit/sign-in-with-wallet@1.0.0-beta.7': + resolution: {integrity: sha512-o2U5oi8b+2cc0Lel4p7myp1pQ6J2OLCdVTRhYQ4Te4+iqVFns1UlHx28pEo0zvGCJ5CwHQBmJHX6QguL02Kj4Q==} peerDependencies: bech32: '=2.0.0' ethers: ^6.0.8 @@ -14891,16 +14891,16 @@ snapshots: - supports-color - utf-8-validate - '@orangekit/sign-in-with-wallet-parser@1.0.0-beta.6': + '@orangekit/sign-in-with-wallet-parser@1.0.0-beta.7': dependencies: '@noble/hashes': 1.4.0 apg-js: 4.4.0 uri-js: 4.4.1 valid-url: 1.0.9 - '@orangekit/sign-in-with-wallet@1.0.0-beta.6(bech32@2.0.0)(ethers@6.13.0(bufferutil@4.0.8)(utf-8-validate@5.0.10))': + '@orangekit/sign-in-with-wallet@1.0.0-beta.7(bech32@2.0.0)(ethers@6.13.0(bufferutil@4.0.8)(utf-8-validate@5.0.10))': dependencies: - '@orangekit/sign-in-with-wallet-parser': 1.0.0-beta.6 + '@orangekit/sign-in-with-wallet-parser': 1.0.0-beta.7 '@stablelib/random': 1.0.2 bech32: 2.0.0 ethers: 6.13.0(bufferutil@4.0.8)(utf-8-validate@5.0.10) From 86dc681e74aac1ae45b2afdf25f7e9e0acd59bac Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Fri, 6 Dec 2024 08:55:05 +0100 Subject: [PATCH 16/22] Fix eslint issue --- .../ActiveUnstakingStep/UnstakeFormModal/UnstakeDetails.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/UnstakeDetails.tsx b/dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/UnstakeDetails.tsx index 1879c7100..4ac3b86ad 100644 --- a/dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/UnstakeDetails.tsx +++ b/dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/UnstakeDetails.tsx @@ -8,9 +8,9 @@ import { } from "#/hooks" import { ACTION_FLOW_TYPES, CurrencyType } from "#/types" import { DESIRED_DECIMALS_FOR_FEE } from "#/constants" -import { FeesTooltip } from "../../FeesTooltip" import FeesDetailsAmountItem from "#/components/shared/FeesDetails/FeesDetailsAmountItem" import TransactionDetailsAmountItem from "#/components/shared/TransactionDetails/TransactionDetailsAmountItem" +import { FeesTooltip } from "../../FeesTooltip" function UnstakeDetails({ currency }: { currency: CurrencyType }) { const { value = 0n } = useFormField( From 528be241c0e1b5a4da2903c0b7352ad30ff715f7 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Fri, 6 Dec 2024 13:03:57 +0100 Subject: [PATCH 17/22] Fix condition --- dapp/src/pages/DashboardPage/PositionDetails.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dapp/src/pages/DashboardPage/PositionDetails.tsx b/dapp/src/pages/DashboardPage/PositionDetails.tsx index 4ae453181..d1839940a 100644 --- a/dapp/src/pages/DashboardPage/PositionDetails.tsx +++ b/dapp/src/pages/DashboardPage/PositionDetails.tsx @@ -62,7 +62,7 @@ export default function PositionDetails() { {/* TODO: Component should be moved to `CardHeader` */} Your Acre balance - {!hasPendingActivities && ( + {hasPendingActivities && ( Date: Fri, 6 Dec 2024 13:05:39 +0100 Subject: [PATCH 18/22] Remove `useScrollbarVisibility` hook --- dapp/src/hooks/index.ts | 1 - dapp/src/hooks/useScrollbarVisibility.ts | 32 ------------------------ 2 files changed, 33 deletions(-) delete mode 100644 dapp/src/hooks/useScrollbarVisibility.ts diff --git a/dapp/src/hooks/index.ts b/dapp/src/hooks/index.ts index b075db2e4..7758c4fd7 100644 --- a/dapp/src/hooks/index.ts +++ b/dapp/src/hooks/index.ts @@ -33,7 +33,6 @@ export { default as useTriggerConnectWalletModal } from "./useTriggerConnectWall export { default as useLastUsedBtcAddress } from "./useLastUsedBtcAddress" export { default as useAcrePoints } from "./useAcrePoints" export { default as useSignMessageAndCreateSession } from "./useSignMessageAndCreateSession" -export { default as useScrollbarVisibility } from "./useScrollbarVisibility" export { default as useAccessCode } from "./useAccessCode" export { default as useFormField } from "./useFormField" export { default as useDepositBTCTransaction } from "./useDepositBTCTransaction" diff --git a/dapp/src/hooks/useScrollbarVisibility.ts b/dapp/src/hooks/useScrollbarVisibility.ts deleted file mode 100644 index c1ce79034..000000000 --- a/dapp/src/hooks/useScrollbarVisibility.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { useCallback, useEffect, useState } from "react" - -const SCROLLBAR_WIDTH = `${window.innerWidth - document.body.offsetWidth}px` - -function isScrollbarVisible(selector: string) { - const element = document.querySelector(selector) - - if (!element) return false - - return element?.scrollHeight > element?.clientHeight -} - -export default function useScrollbarVisibility(selector: string) { - const [isVisible, setIsVisible] = useState(false) - - useEffect(() => { - const handleResize = () => { - setIsVisible(isScrollbarVisible(selector)) - } - window.addEventListener("resize", handleResize) - - return () => { - window.removeEventListener("resize", handleResize) - } - }, [selector]) - - const refreshState = useCallback(() => { - setIsVisible(isScrollbarVisible(selector)) - }, [selector]) - - return { isVisible, scrollbarWidth: SCROLLBAR_WIDTH, refreshState } -} From d4d447647c090356ed3cbb9edb4318f755d72044 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Fri, 6 Dec 2024 13:07:46 +0100 Subject: [PATCH 19/22] Remove redundant z index --- dapp/src/components/ModalRoot/withBaseModal.tsx | 2 +- dapp/src/theme/utils/zIndices.ts | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/dapp/src/components/ModalRoot/withBaseModal.tsx b/dapp/src/components/ModalRoot/withBaseModal.tsx index b15a22cf6..b5d8cb4d5 100644 --- a/dapp/src/components/ModalRoot/withBaseModal.tsx +++ b/dapp/src/components/ModalRoot/withBaseModal.tsx @@ -32,7 +32,7 @@ function withBaseModal( {...modalProps} > - + diff --git a/dapp/src/theme/utils/zIndices.ts b/dapp/src/theme/utils/zIndices.ts index f0be28d85..0b8c0d5e5 100644 --- a/dapp/src/theme/utils/zIndices.ts +++ b/dapp/src/theme/utils/zIndices.ts @@ -3,6 +3,5 @@ export const zIndices = { mobileBanner: 1500, header: 1400, footer: 1380, - modalContent: 1410, modalOverlay: 1390, } From 715a85d831a549efbf0d694ac7b7a37122704eaa Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Mon, 9 Dec 2024 14:23:13 +0100 Subject: [PATCH 20/22] Update selector condition --- dapp/src/store/wallet/walletSelector.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/dapp/src/store/wallet/walletSelector.ts b/dapp/src/store/wallet/walletSelector.ts index dadb55c4d..9e2372513 100644 --- a/dapp/src/store/wallet/walletSelector.ts +++ b/dapp/src/store/wallet/walletSelector.ts @@ -15,7 +15,11 @@ export const selectActivities = createSelector( export const selectHasPendingActivities = createSelector( (state: RootState) => state.wallet.activities, - (activities) => activities.some((activity) => activity.status === "pending"), + (activities) => + activities.some( + (activity) => + activity.status === "pending" && activity.type === "deposit", + ), ) export const selectAllActivitiesCount = createSelector( From 6deb2e1272bf3003029116539d7fd1b0f5206a1c Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Tue, 10 Dec 2024 09:38:37 +0100 Subject: [PATCH 21/22] Remove unneeded disconnect button --- dapp/src/components/Header/ConnectWallet.tsx | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) 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} - /> - From 8a5912f228745923615d9f16274ef70894b9bf66 Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Tue, 10 Dec 2024 10:39:39 +0100 Subject: [PATCH 22/22] Use icons from `tabler` package --- dapp/src/assets/icons/ArrowUpRight.tsx | 16 ---------------- dapp/src/assets/icons/BoltFilled.tsx | 13 ------------- dapp/src/assets/icons/index.ts | 2 -- dapp/src/components/Footer.tsx | 5 +++-- dapp/src/components/shared/ButtonLink.tsx | 6 +++--- dapp/src/components/shared/ProgressBar.tsx | 5 +++-- dapp/src/pages/DashboardPage/AcreTVLMessage.tsx | 6 ++++-- 7 files changed, 13 insertions(+), 40 deletions(-) delete mode 100644 dapp/src/assets/icons/ArrowUpRight.tsx delete mode 100644 dapp/src/assets/icons/BoltFilled.tsx 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/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/pages/DashboardPage/AcreTVLMessage.tsx b/dapp/src/pages/DashboardPage/AcreTVLMessage.tsx index 0960e95af..ad75cefdd 100644 --- a/dapp/src/pages/DashboardPage/AcreTVLMessage.tsx +++ b/dapp/src/pages/DashboardPage/AcreTVLMessage.tsx @@ -1,7 +1,7 @@ import React from "react" import { Box, HStack, StackProps, VStack } from "@chakra-ui/react" import { useAllActivitiesCount, useStatistics, useWallet } from "#/hooks" -import { BoltFilled } from "#/assets/icons" +import { IconBolt } from "@tabler/icons-react" import { TextMd } from "#/components/shared/Typography" import { CurrencyBalance } from "#/components/shared/CurrencyBalance" @@ -20,7 +20,9 @@ export default function AcreTVLMessage(props: AcreTVLMessageProps) { return ( - + + + {tvl.isCapExceeded ? (