Show error notifications #313
Conversation
According to styleguide, we need to update the styles for the Alert component. Additionally, the Toast component is based on the basic styles of Alert. Therefore, now the Alert component is based on the styleguide. However, a separate CardAlert component was created to contain the styles of the previous alert in one place.
✅ Deploy Preview for acre-dapp-testnet ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
kkosiorowska
force-pushed
the
show-errors
branch
from
63530d3 to
a16ae3c
Compare
Created a custom useToast hook which wraps the useToast hook from Chakra UI and provides a render function to it to customize the toast components. In addition, a special ToastType was created to easily keep all kinds of notifications in the TOASTS object. This allows us to easily trigger a notification. Changing the approach of calling toast allowed to simplify the logic and get rid of unneeded parts of the code.
For edge cases, you will have to override the global styles for chakra components. I moved these styles to a separate file to keep things in order. This will also make it easy to use the zIndices or semanticTokens file.
dapp/src/components/TransactionModal/ActiveStakingStep/DepositBTCModal.tsx
Show resolved
Hide resolved
dapp/src/components/TransactionModal/ActiveStakingStep/SignMessageModal.tsx
Show resolved
Hide resolved
| onClose: () => void | ||
| } | ||
|
|
||
| export default function Toast({ |
There was a problem hiding this comment.
We use Alert component as a wrapper for this component. In my opinion, the Toast component should be more independent in cases when we would like to use other types of toasts. What do you think about creating a more generic Toast component, and this one rename to ToastAlert?
There was a problem hiding this comment.
We use Alert component as a wrapper for this component.
Yeah, this is because the Chakra UI uses alerts as toast. The purpose of this wrapper is to standardize our Toast component based on styleguide.
In my opinion, the Toast component should be more independent in cases when we would like to use other types of toasts. What do you think about creating a more generic Toast component, and this one rename to ToastAlert?
Not quite sure what you mean. What should such a generic component Toast look like in your opinion? 🤔 I'm confused because based on the Chakra solution, it needs to be connected to the alert component.
I would stay with the generic name at this moment. We can update our approach if needed in the feature.
There was a problem hiding this comment.
Yeah, this is because the Chakra UI uses alerts as toast. The purpose of this wrapper is to standardize our Toast component based on styleguide.
Ok, so let's add a comment, that under the hood of Toast uses the Alert component because the chakra doc doesn't say anything about it explicitly.
Just says that Toast uses the same variants as the Alert component (https://chakra-ui.com/docs/components/toast#variants)
| <Flex direction="column" gap={isConnected ? 3.5 : 2} p={6}> | ||
| <Flex justifyContent="space-between"> | ||
| <HStack> | ||
| {/* TODO: Handle click actions */} | ||
| <Switch size="sm" /> | ||
| <TextSm fontWeight="bold">Show values in {USD.symbol}</TextSm> | ||
| </HStack> | ||
| {!isConnected && ( | ||
| <ButtonLink colorScheme="gold" bg="gold.200" onClick={onOpen}> | ||
| Docs | ||
| </ButtonLink> | ||
| )} | ||
| </Flex> | ||
| {/* TODO: Add animation to show activity bar */} | ||
| {isConnected && ( | ||
| <Flex marginBottom={3.5} justifyContent="space-between"> | ||
| <ActivityBar /> | ||
| <ButtonLink colorScheme="gold" bg="gold.200" onClick={onOpen}> | ||
| Docs | ||
| </ButtonLink> | ||
| </Flex> | ||
| )} |
There was a problem hiding this comment.
Regardless of what we check here(isConnected or any activities) the number of conditions remains the same so separating them into two components depending on their state will be more clear.
kkosiorowska
force-pushed
the
show-errors
branch
from
93cb8c3 to
6fc58a3
Compare
The previous changes have been restored. Updating the visual layer will be done in a separate task/PR.
Let's set the toast to be in front of the component drawer to avoid confusion.
There was a problem hiding this comment.
According to @nkuba proposal, we can conditionally merge it before your vacation, and in the future, we will try to solve the problem of calling toasts from other non-react places and use more generic approach. Please just refer to Rafał's comments.
What has been done
This PR adds support for displaying notifications to the user. The notifications will be displayed as toast. According to the styleguide, there are 3 different notification styles, so it was decided to update the already existing styles. The reason for this change is also that the Toast component is based on the Alert theme. However, to avoid repeating the implemented logic, the previous styles are included in the
CardAlertcomponent.useToasthookThis hook is created to make it easier to work with the toast component. It is a wrapper for hook (
useToast) coming from the Chakra UI library. Thanks to this, we injected the basic common settings for all components. In addition, theopenfunction has been added to simplify the logic of opening only one toast for a given id.UI
Testing
Missing accounts
Message signing and deposit transaction