From 37b718af9e1e37dad4570d7932a25242319e506e Mon Sep 17 00:00:00 2001 From: Jakub Date: Thu, 28 Nov 2024 00:38:51 +0100 Subject: [PATCH 01/11] Add retry logic to tBTC API calls We observed that the tBTC API calls are failing intermittently, which may be related to unstable Cloudflare workers infrastructure. This PR adds retry logic to the tBTC API calls to handle these failures. Requests to the tBTC API will be retried up to 5 times with an exponential backoff strategy. --- sdk/src/lib/api/HttpApi.ts | 39 +++++++++++++++++++++++++++++++++++++- sdk/src/lib/api/TbtcApi.ts | 32 +++++++++++++++---------------- 2 files changed, 53 insertions(+), 18 deletions(-) diff --git a/sdk/src/lib/api/HttpApi.ts b/sdk/src/lib/api/HttpApi.ts index d1759d6d2..696156715 100644 --- a/sdk/src/lib/api/HttpApi.ts +++ b/sdk/src/lib/api/HttpApi.ts @@ -1,11 +1,48 @@ +import { backoffRetrier, RetryOptions } from "../utils" + /** * Represents an abstract HTTP API. */ export default abstract class HttpApi { #apiUrl: string - constructor(apiUrl: string) { + /** + * Retry options for API requests. + */ + #retryOptions: RetryOptions + + constructor( + apiUrl: string, + retryOptions: RetryOptions = { + retries: 5, + backoffStepMs: 1000, + }, + ) { this.#apiUrl = apiUrl + this.#retryOptions = retryOptions + } + + /** + * Makes an HTTP request with retry logic. + * @param requestFn Function that returns a Promise of the HTTP response. + * @returns The HTTP response. + * @throws Error if the request fails after all retries. + */ + async requestWithRetry( + requestFn: () => Promise, + ): Promise { + return backoffRetrier( + this.#retryOptions.retries, + this.#retryOptions.backoffStepMs, + )(async () => { + const response = await requestFn() + + if (!response.ok) { + throw new Error(`Request failed: ${await response.text()}`) + } + + return response + }) } /** diff --git a/sdk/src/lib/api/TbtcApi.ts b/sdk/src/lib/api/TbtcApi.ts index 931e36601..a1baf46c4 100644 --- a/sdk/src/lib/api/TbtcApi.ts +++ b/sdk/src/lib/api/TbtcApi.ts @@ -38,12 +38,11 @@ export default class TbtcApi extends HttpApi { * otherwise. */ async saveReveal(revealData: SaveRevealRequest): Promise { - const response = await this.postRequest("reveals", revealData) - - if (!response.ok) - throw new Error( - `Reveal not saved properly in the database, response: ${response.status}`, - ) + const response = await this.requestWithRetry(async () => + this.postRequest("reveals", revealData), + ).catch((error) => { + throw new Error(`Failed to save reveal: ${error}`) + }) const { success } = (await response.json()) as { success: boolean } @@ -60,11 +59,11 @@ export default class TbtcApi extends HttpApi { depositStatus: DepositStatus fundingOutpoint: BitcoinTxOutpoint }> { - const response = await this.postRequest("deposits", depositData) - if (!response.ok) - throw new Error( - `Bitcoin deposit creation failed, response: ${response.status}`, - ) + const response = await this.requestWithRetry(async () => + this.postRequest("deposits", depositData), + ).catch((error) => { + throw new Error(`Failed to create deposit: ${error}`) + }) const responseData = (await response.json()) as CreateDepositResponse @@ -83,12 +82,11 @@ export default class TbtcApi extends HttpApi { * @returns All owner deposits, including queued deposits. */ async getDepositsByOwner(depositOwner: ChainIdentifier): Promise { - const response = await this.getRequest( - `deposits/${depositOwner.identifierHex}`, - ) - - if (!response.ok) - throw new Error(`Failed to fetch deposits: ${response.status}`) + const response = await this.requestWithRetry(async () => + this.getRequest(`deposits/${depositOwner.identifierHex}`), + ).catch((error) => { + throw new Error(`Failed to fetch deposits: ${error}`) + }) const responseData = (await response.json()) as Deposit[] From 5438ba8dc8ffd3adedef6e76b40b0ea6331ff4ea Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Thu, 5 Dec 2024 14:51:19 +0100 Subject: [PATCH 02/11] Make conection rejected alert status of info --- .../ConnectWalletModal/ConnectWalletAlert.tsx | 29 ++++++++++++++----- .../components/ConnectWalletModal/index.tsx | 4 +-- dapp/src/components/shared/Alert.tsx | 2 +- .../contexts/WalletConnectionAlertContext.tsx | 12 ++------ dapp/src/theme/Alert.ts | 5 ++++ dapp/src/theme/Modal.ts | 10 +++---- 6 files changed, 37 insertions(+), 25 deletions(-) diff --git a/dapp/src/components/ConnectWalletModal/ConnectWalletAlert.tsx b/dapp/src/components/ConnectWalletModal/ConnectWalletAlert.tsx index 553d9ff56..127b7cead 100644 --- a/dapp/src/components/ConnectWalletModal/ConnectWalletAlert.tsx +++ b/dapp/src/components/ConnectWalletModal/ConnectWalletAlert.tsx @@ -1,5 +1,5 @@ import React from "react" -import { Box, Link, VStack } from "@chakra-ui/react" +import { AlertStatus, Box, Link, VStack } from "@chakra-ui/react" import { AnimatePresence, Variants, motion } from "framer-motion" import { EXTERNAL_HREF } from "#/constants" import { @@ -18,6 +18,15 @@ export enum ConnectionAlert { Default = "DEFAULT", } +type ConnectionAlerts = Record< + ConnectionAlert, + { + title: string + description?: React.ReactNode + status?: AlertStatus + } +> + function ContactSupport() { return ( @@ -36,10 +45,10 @@ function ContactSupport() { ) } -const CONNECTION_ALERTS = { +const CONNECTION_ALERTS: ConnectionAlerts = { [ConnectionAlert.Rejected]: { - title: "Wallet connection rejected.", - description: "If you encountered an error, please try again.", + title: "Please connect your wallet to start using Acre", + status: "info", }, [ConnectionAlert.NotSupported]: { title: "Not supported.", @@ -66,10 +75,12 @@ const collapseVariants: Variants = { expanded: { height: "auto" }, } -type ConnectWalletAlertProps = AlertProps & { type?: ConnectionAlert } +type ConnectWalletAlertProps = Omit & { + type?: ConnectionAlert +} export default function ConnectWalletAlert(props: ConnectWalletAlertProps) { - const { type, status, ...restProps } = props + const { type, ...restProps } = props const data = type ? CONNECTION_ALERTS[type] : undefined @@ -85,11 +96,13 @@ export default function ConnectWalletAlert(props: ConnectWalletAlertProps) { overflow="hidden" w="full" > - + {data.title} - {data.description} + {data.description && ( + {data.description} + )} diff --git a/dapp/src/components/ConnectWalletModal/index.tsx b/dapp/src/components/ConnectWalletModal/index.tsx index 1653d1e11..23404c9b9 100644 --- a/dapp/src/components/ConnectWalletModal/index.tsx +++ b/dapp/src/components/ConnectWalletModal/index.tsx @@ -30,7 +30,7 @@ export function ConnectWalletModalBase({ })) const [selectedConnectorId, setSelectedConnectorId] = useState() - const { type, status, resetConnectionAlert } = useWalletConnectionAlert() + const { type, resetConnectionAlert } = useWalletConnectionAlert() const isSignedMessage = useIsSignedMessage() const handleButtonOnClick = (connector: OrangeKitConnector) => { @@ -59,7 +59,7 @@ export function ConnectWalletModalBase({ {`Select your ${isEmbed ? "account" : "wallet"}`} - + {enabledConnectors.map((connector) => ( void + setConnectionAlert: (type: ConnectionAlert) => void resetConnectionAlert: () => void } @@ -20,17 +18,14 @@ export function WalletConnectionAlertContextProvider({ children: React.ReactNode }): React.ReactElement { const [type, setType] = useState() - const [status, setStatus] = useState("error") const resetConnectionAlert = useCallback(() => { setType(undefined) - setStatus("error") }, [setType]) const setConnectionAlert = useCallback( - (connectionAlert: ConnectionAlert, alertStatus: AlertStatus = "error") => { + (connectionAlert: ConnectionAlert) => { setType(connectionAlert) - setStatus(alertStatus) }, [setType], ) @@ -39,11 +34,10 @@ export function WalletConnectionAlertContextProvider({ useMemo( () => ({ type, - status, setConnectionAlert, resetConnectionAlert, }), - [resetConnectionAlert, setConnectionAlert, status, type], + [resetConnectionAlert, setConnectionAlert, type], ) return ( diff --git a/dapp/src/theme/Alert.ts b/dapp/src/theme/Alert.ts index 005dbb32f..905c63e97 100644 --- a/dapp/src/theme/Alert.ts +++ b/dapp/src/theme/Alert.ts @@ -15,6 +15,11 @@ const baseStyle = multiStyleConfig.definePartsStyle({ p: 4, rounded: "xl", }, + title: { + fontWeight: "semibold", + mr: 0, + }, + description: { fontWeight: "medium", textAlign: "start", diff --git a/dapp/src/theme/Modal.ts b/dapp/src/theme/Modal.ts index bab2047b2..31c36fd29 100644 --- a/dapp/src/theme/Modal.ts +++ b/dapp/src/theme/Modal.ts @@ -38,8 +38,8 @@ const baseStyleHeader = defineStyle({ fontSize: "xl", lineHeight: "xl", fontWeight: "bold", - pt: { sm: 10 }, - px: { sm: 10 }, + pt: { sm: 8 }, + px: { sm: 8 }, pb: 8, }) @@ -51,15 +51,15 @@ const baseStyleBody = defineStyle({ alignItems: "center", gap: 6, pt: 0, - px: { base: 0, sm: 10 }, - pb: { base: 0, sm: 10 }, + px: { base: 0, sm: 8 }, + pb: { base: 0, sm: 8 }, }) const baseStyleFooter = defineStyle({ flexDirection: "column", gap: 6, px: { base: 0, sm: 8 }, - pb: { base: 0, sm: 10 }, + pb: { base: 0, sm: 8 }, }) const multiStyleConfig = createMultiStyleConfigHelpers(parts.keys) From 2196fe39c1555a809a1668e9ca15813821f18528 Mon Sep 17 00:00:00 2001 From: Jakub Nowakowski Date: Fri, 6 Dec 2024 10:49:38 +0100 Subject: [PATCH 03/11] Enable retries for all HTTP requests in SDK Previously we were only retrying HTTP requests in the SDK for tBTC API calls. We can generalize this solution and apply it to all HTTP requests. --- sdk/src/lib/api/HttpApi.ts | 28 ++++++++++++++++------------ sdk/src/lib/api/TbtcApi.ts | 24 ++++++++++++------------ 2 files changed, 28 insertions(+), 24 deletions(-) diff --git a/sdk/src/lib/api/HttpApi.ts b/sdk/src/lib/api/HttpApi.ts index 696156715..eb9be45ca 100644 --- a/sdk/src/lib/api/HttpApi.ts +++ b/sdk/src/lib/api/HttpApi.ts @@ -28,7 +28,7 @@ export default abstract class HttpApi { * @returns The HTTP response. * @throws Error if the request fails after all retries. */ - async requestWithRetry( + async #requestWithRetry( requestFn: () => Promise, ): Promise { return backoffRetrier( @@ -55,10 +55,12 @@ export default abstract class HttpApi { endpoint: string, requestInit?: RequestInit, ): Promise { - return fetch(new URL(endpoint, this.#apiUrl), { - credentials: "include", - ...requestInit, - }) + return this.#requestWithRetry(async () => + fetch(new URL(endpoint, this.#apiUrl), { + credentials: "include", + ...requestInit, + }), + ) } /** @@ -73,12 +75,14 @@ export default abstract class HttpApi { body: unknown, requestInit?: RequestInit, ): Promise { - return fetch(new URL(endpoint, this.#apiUrl), { - method: "POST", - body: JSON.stringify(body), - credentials: "include", - headers: { "Content-Type": "application/json" }, - ...requestInit, - }) + return this.#requestWithRetry(async () => + fetch(new URL(endpoint, this.#apiUrl), { + method: "POST", + body: JSON.stringify(body), + credentials: "include", + headers: { "Content-Type": "application/json" }, + ...requestInit, + }), + ) } } diff --git a/sdk/src/lib/api/TbtcApi.ts b/sdk/src/lib/api/TbtcApi.ts index a1baf46c4..c4ce503c4 100644 --- a/sdk/src/lib/api/TbtcApi.ts +++ b/sdk/src/lib/api/TbtcApi.ts @@ -38,11 +38,11 @@ export default class TbtcApi extends HttpApi { * otherwise. */ async saveReveal(revealData: SaveRevealRequest): Promise { - const response = await this.requestWithRetry(async () => - this.postRequest("reveals", revealData), - ).catch((error) => { - throw new Error(`Failed to save reveal: ${error}`) - }) + const response = await this.postRequest("reveals", revealData).catch( + (error) => { + throw new Error(`Failed to save reveal: ${error}`) + }, + ) const { success } = (await response.json()) as { success: boolean } @@ -59,11 +59,11 @@ export default class TbtcApi extends HttpApi { depositStatus: DepositStatus fundingOutpoint: BitcoinTxOutpoint }> { - const response = await this.requestWithRetry(async () => - this.postRequest("deposits", depositData), - ).catch((error) => { - throw new Error(`Failed to create deposit: ${error}`) - }) + const response = await this.postRequest("deposits", depositData).catch( + (error) => { + throw new Error(`Failed to create deposit: ${error}`) + }, + ) const responseData = (await response.json()) as CreateDepositResponse @@ -82,8 +82,8 @@ export default class TbtcApi extends HttpApi { * @returns All owner deposits, including queued deposits. */ async getDepositsByOwner(depositOwner: ChainIdentifier): Promise { - const response = await this.requestWithRetry(async () => - this.getRequest(`deposits/${depositOwner.identifierHex}`), + const response = await this.getRequest( + `deposits/${depositOwner.identifierHex}`, ).catch((error) => { throw new Error(`Failed to fetch deposits: ${error}`) }) From 6deb2e1272bf3003029116539d7fd1b0f5206a1c Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Tue, 10 Dec 2024 09:38:37 +0100 Subject: [PATCH 04/11] 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 05/11] 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 ? ( From 3351c5e3dd5f05ee7b97b12b248c124308c7c70a Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Tue, 10 Dec 2024 11:35:38 +0100 Subject: [PATCH 06/11] Moved .env to .env.example We should not commit the .env file, only .env.example should be committed. --- dapp/{.env => .env.example} | 28 +++++++++++++--------------- 1 file changed, 13 insertions(+), 15 deletions(-) rename dapp/{.env => .env.example} (54%) diff --git a/dapp/.env b/dapp/.env.example similarity index 54% rename from dapp/.env rename to dapp/.env.example index 977362387..aa19345b5 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_MOBILE_MODE_ENABLED="true" - From 4a0325d77b17e11fa25691314b3093bdf83283c8 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Tue, 10 Dec 2024 15:25:41 +0100 Subject: [PATCH 07/11] Remove `DocsDrawer` component --- dapp/src/DApp.tsx | 21 +++++------- dapp/src/components/DocsDrawer.tsx | 25 -------------- dapp/src/components/Layout.tsx | 2 -- dapp/src/contexts/DocsDrawerContext.tsx | 44 ------------------------- dapp/src/contexts/index.tsx | 1 - dapp/src/hooks/index.ts | 1 - dapp/src/hooks/useDocsDrawer.ts | 14 -------- dapp/src/theme/Drawer.ts | 33 ------------------- dapp/src/theme/index.ts | 2 -- dapp/src/theme/utils/zIndices.ts | 1 - 10 files changed, 8 insertions(+), 136 deletions(-) delete mode 100644 dapp/src/components/DocsDrawer.tsx delete mode 100644 dapp/src/contexts/DocsDrawerContext.tsx delete mode 100644 dapp/src/hooks/useDocsDrawer.ts delete mode 100644 dapp/src/theme/Drawer.ts diff --git a/dapp/src/DApp.tsx b/dapp/src/DApp.tsx index c8fc3f954..51149f8f7 100644 --- a/dapp/src/DApp.tsx +++ b/dapp/src/DApp.tsx @@ -7,10 +7,7 @@ import { QueryClientProvider } from "@tanstack/react-query" import { ReactQueryDevtools } from "@tanstack/react-query-devtools" import { AcreSdkProvider } from "./acre-react/contexts" import GlobalStyles from "./components/GlobalStyles" -import { - DocsDrawerContextProvider, - WalletConnectionAlertContextProvider, -} from "./contexts" +import { WalletConnectionAlertContextProvider } from "./contexts" import { useInitApp } from "./hooks" import { router } from "./router" import { store } from "./store" @@ -65,15 +62,13 @@ function DAppProviders() { - - - - - - - - - + + + + + + + diff --git a/dapp/src/components/DocsDrawer.tsx b/dapp/src/components/DocsDrawer.tsx deleted file mode 100644 index 060c6e731..000000000 --- a/dapp/src/components/DocsDrawer.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from "react" -import { - Drawer, - DrawerBody, - DrawerContent, - DrawerOverlay, -} from "@chakra-ui/react" -import { useDocsDrawer } from "#/hooks" -import { TextMd } from "#/components/shared/Typography" - -export default function DocsDrawer() { - const { isOpen, onClose } = useDocsDrawer() - - return ( - - - - - {/* TODO: Add a documentation */} - Documentation - - - - ) -} diff --git a/dapp/src/components/Layout.tsx b/dapp/src/components/Layout.tsx index 24ba593e9..d229f45cf 100644 --- a/dapp/src/components/Layout.tsx +++ b/dapp/src/components/Layout.tsx @@ -4,7 +4,6 @@ import { Flex, VStack } from "@chakra-ui/react" import { useIsEmbed, useMobileMode } from "#/hooks" import { DappMode } from "#/types" import { usePostHogPageViewCapture } from "#/hooks/posthog" -import DocsDrawer from "./DocsDrawer" import Header from "./Header" import ModalRoot from "./ModalRoot" import MobileModeBanner from "./MobileModeBanner" @@ -50,7 +49,6 @@ function Layout() { > - diff --git a/dapp/src/contexts/DocsDrawerContext.tsx b/dapp/src/contexts/DocsDrawerContext.tsx deleted file mode 100644 index f5097fc96..000000000 --- a/dapp/src/contexts/DocsDrawerContext.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import React, { createContext, useCallback, useMemo, useState } from "react" - -type DocsDrawerContextValue = { - isOpen: boolean - onOpen: () => void - onClose: () => void -} - -export const DocsDrawerContext = createContext({ - isOpen: false, - onOpen: () => {}, - onClose: () => {}, -}) - -export function DocsDrawerContextProvider({ - children, -}: { - children: React.ReactNode -}): React.ReactElement { - const [isOpen, setIsOpen] = useState(false) - - const onOpen = useCallback(() => { - setIsOpen(true) - }, []) - - const onClose = useCallback(() => { - setIsOpen(false) - }, []) - - const contextValue: DocsDrawerContextValue = useMemo( - () => ({ - isOpen, - onOpen, - onClose, - }), - [isOpen, onClose, onOpen], - ) - - return ( - - {children} - - ) -} diff --git a/dapp/src/contexts/index.tsx b/dapp/src/contexts/index.tsx index 263951aec..e3f7fa1aa 100644 --- a/dapp/src/contexts/index.tsx +++ b/dapp/src/contexts/index.tsx @@ -1,4 +1,3 @@ -export * from "./DocsDrawerContext" export * from "./StakeFlowContext" export * from "./PaginationContext" export * from "./WalletConnectionAlertContext" diff --git a/dapp/src/hooks/index.ts b/dapp/src/hooks/index.ts index 7758c4fd7..5f3c7a336 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 "./useDocsDrawer" export * from "./useTransactionDetails" export * from "./useStakeFlowContext" export * from "./useInitApp" diff --git a/dapp/src/hooks/useDocsDrawer.ts b/dapp/src/hooks/useDocsDrawer.ts deleted file mode 100644 index 3536dba2a..000000000 --- a/dapp/src/hooks/useDocsDrawer.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { useContext } from "react" -import { DocsDrawerContext } from "#/contexts" - -export function useDocsDrawer() { - const context = useContext(DocsDrawerContext) - - if (!context) { - throw new Error( - "DocsDrawerContext used outside of DocsDrawerContext component", - ) - } - - return context -} diff --git a/dapp/src/theme/Drawer.ts b/dapp/src/theme/Drawer.ts deleted file mode 100644 index b904c74c0..000000000 --- a/dapp/src/theme/Drawer.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { drawerAnatomy as parts } from "@chakra-ui/anatomy" -import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react" - -const baseStyleDialogContainer = defineStyle({ - zIndex: "drawer", -}) - -const baseStyleDialog = defineStyle({ - borderTop: "2px", - borderLeft: "2px", - boxShadow: "none", - borderColor: "white", - borderTopLeftRadius: "xl", - bg: "gold.100", -}) - -const baseStyleOverlay = defineStyle({ - bg: "none", - backdropFilter: "auto", - backdropBlur: "8px", -}) - -const multiStyleConfig = createMultiStyleConfigHelpers(parts.keys) - -const baseStyle = multiStyleConfig.definePartsStyle({ - dialogContainer: baseStyleDialogContainer, - dialog: baseStyleDialog, - overlay: baseStyleOverlay, -}) - -export const drawerTheme = multiStyleConfig.defineMultiStyleConfig({ - baseStyle, -}) diff --git a/dapp/src/theme/index.ts b/dapp/src/theme/index.ts index 4c306df41..181376184 100644 --- a/dapp/src/theme/index.ts +++ b/dapp/src/theme/index.ts @@ -8,7 +8,6 @@ import { styles, zIndices, } from "./utils" -import { drawerTheme } from "./Drawer" import { modalTheme } from "./Modal" import { cardTheme } from "./Card" import { tooltipTheme } from "./Tooltip" @@ -52,7 +51,6 @@ const defaultTheme = { Card: cardTheme, CloseButton: closeButtonTheme, CurrencyBalance: currencyBalanceTheme, - Drawer: drawerTheme, Form: formTheme, FormLabel: formLabelTheme, FormError: formErrorTheme, diff --git a/dapp/src/theme/utils/zIndices.ts b/dapp/src/theme/utils/zIndices.ts index 0b8c0d5e5..3ada56278 100644 --- a/dapp/src/theme/utils/zIndices.ts +++ b/dapp/src/theme/utils/zIndices.ts @@ -1,5 +1,4 @@ export const zIndices = { - drawer: 1470, mobileBanner: 1500, header: 1400, footer: 1380, From 8f4faffaaaf6ce16c347755d2f31e737ff934313 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Tue, 10 Dec 2024 16:27:09 +0100 Subject: [PATCH 08/11] Fix alert colors issue --- .../ConnectWalletModal/ConnectWalletAlert.tsx | 19 +++++++++++++------ dapp/src/components/shared/Alert.tsx | 2 +- 2 files changed, 14 insertions(+), 7 deletions(-) diff --git a/dapp/src/components/ConnectWalletModal/ConnectWalletAlert.tsx b/dapp/src/components/ConnectWalletModal/ConnectWalletAlert.tsx index 127b7cead..ba36508d7 100644 --- a/dapp/src/components/ConnectWalletModal/ConnectWalletAlert.tsx +++ b/dapp/src/components/ConnectWalletModal/ConnectWalletAlert.tsx @@ -24,6 +24,7 @@ type ConnectionAlerts = Record< title: string description?: React.ReactNode status?: AlertStatus + colorScheme?: string } > @@ -49,6 +50,7 @@ const CONNECTION_ALERTS: ConnectionAlerts = { [ConnectionAlert.Rejected]: { title: "Please connect your wallet to start using Acre", status: "info", + colorScheme: "blue", }, [ConnectionAlert.NotSupported]: { title: "Not supported.", @@ -82,11 +84,16 @@ type ConnectWalletAlertProps = Omit & { export default function ConnectWalletAlert(props: ConnectWalletAlertProps) { const { type, ...restProps } = props - const data = type ? CONNECTION_ALERTS[type] : undefined + const { + status = "error", + title, + description, + ...restData + } = type ? CONNECTION_ALERTS[type] : {} return ( - {data && ( + {type && ( - + - {data.title} - {data.description && ( - {data.description} + {title} + {description && ( + {description} )} diff --git a/dapp/src/components/shared/Alert.tsx b/dapp/src/components/shared/Alert.tsx index 61f29d234..53f82c406 100644 --- a/dapp/src/components/shared/Alert.tsx +++ b/dapp/src/components/shared/Alert.tsx @@ -22,7 +22,7 @@ import Spinner from "./Spinner" const STATUSES = { info: { icon: IconInfoCircle, - colorScheme: "blue", + colorScheme: "gold", }, warning: { icon: IconExclamationCircle, From 795814037f0c2c5e35a0cf722e00231fec068ab5 Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Wed, 11 Dec 2024 08:22:31 +0100 Subject: [PATCH 09/11] Disable feature flag for `VITE_FEATURE_POSTHOG_ENABLED`. --- dapp/.env.example | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dapp/.env.example b/dapp/.env.example index aa19345b5..745d7f59b 100644 --- a/dapp/.env.example +++ b/dapp/.env.example @@ -28,5 +28,5 @@ 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" From a700cd48db7f7681af8392810b5b830f9adeac1e Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Wed, 11 Dec 2024 12:04:35 +0100 Subject: [PATCH 10/11] Remove unused theme tokens --- dapp/src/theme/utils/semanticTokens.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/dapp/src/theme/utils/semanticTokens.ts b/dapp/src/theme/utils/semanticTokens.ts index e33367d84..90801b7b3 100644 --- a/dapp/src/theme/utils/semanticTokens.ts +++ b/dapp/src/theme/utils/semanticTokens.ts @@ -1,7 +1,5 @@ export const semanticTokens = { space: { - header_height: 28, - header_height_xl: 36, modal_shift: "9.75rem", // 156px dashboard_card_padding: 5, }, From 1ebfc884ad43a4c861b67f11589cf9f28e05e191 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Wed, 11 Dec 2024 12:18:27 +0100 Subject: [PATCH 11/11] Resolve linter error --- .../ConnectWalletModal/ConnectWalletAlert.tsx | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/dapp/src/components/ConnectWalletModal/ConnectWalletAlert.tsx b/dapp/src/components/ConnectWalletModal/ConnectWalletAlert.tsx index ba36508d7..44a499d87 100644 --- a/dapp/src/components/ConnectWalletModal/ConnectWalletAlert.tsx +++ b/dapp/src/components/ConnectWalletModal/ConnectWalletAlert.tsx @@ -18,15 +18,14 @@ export enum ConnectionAlert { Default = "DEFAULT", } -type ConnectionAlerts = Record< - ConnectionAlert, - { - title: string - description?: React.ReactNode - status?: AlertStatus - colorScheme?: string - } -> +type ConnectionAlertData = { + title: string + description?: React.ReactNode + status?: AlertStatus + colorScheme?: string +} + +type ConnectionAlerts = Record function ContactSupport() { return ( @@ -89,7 +88,7 @@ export default function ConnectWalletAlert(props: ConnectWalletAlertProps) { title, description, ...restData - } = type ? CONNECTION_ALERTS[type] : {} + } = (type ? CONNECTION_ALERTS[type] : {}) as ConnectionAlertData return (