From 5438ba8dc8ffd3adedef6e76b40b0ea6331ff4ea Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Thu, 5 Dec 2024 14:51:19 +0100 Subject: [PATCH 1/3] 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 8f4faffaaaf6ce16c347755d2f31e737ff934313 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Tue, 10 Dec 2024 16:27:09 +0100 Subject: [PATCH 2/3] 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 1ebfc884ad43a4c861b67f11589cf9f28e05e191 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Wed, 11 Dec 2024 12:18:27 +0100 Subject: [PATCH 3/3] 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 (