Ameerul / P2PS-4363 Banner on Buy/Sell page #401
Conversation
ameerul-deriv
commented
Nov 11, 2024
•
ameerul-deriv
commented
- Added Funds Banner in Buy/Sell
- Added Funds Modal
- Added logic on when to show the Banner In Buy/Sell Page
ameerul-deriv
requested review from
ali-hosseini-deriv,
yashim-deriv,
azmib-developer and
farrah-deriv
as code owners
| &:hover { | ||
| background-color: transparent !important; | ||
|
|
||
| & > span { | ||
| color: #0e0e0e !important; | ||
| } | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
even though I used hideHoverStyles in the button, it didn't work 😅 so i had to manually disable it here
| const { deleteQueryString, setQueryString } = useQueryString(); | ||
|
|
||
| const onToggleCurrencyDropdown = (shouldShow: boolean) => { | ||
| setShowCurrencySelector(shouldShow); | ||
| if (!isDesktop) { | ||
| if (shouldShow) setQueryString({ modal: 'CurrencyFilterModal' }); | ||
| else deleteQueryString('modal'); | ||
| } | ||
| }; |
There was a problem hiding this comment.
reason why i added this queryString to modal directly is to ensure we hide the banner if currency selector is shown. And in the index.tsx file, I have some logic that handles showing the banner if its either the RadioGroupModal or FundsModal or if there is no Modal showing at all. Below you can see the issue
Screen.Recording.2024-11-11.at.4.25.55.PM.mov
fix.mov
There was a problem hiding this comment.
also you cannot use isModalOpenFor check because it only returns true in whatever component you have called showModal in
src/routes/AppContent/index.tsx
Outdated
| useEffect(() => { | ||
| if ( | ||
| isAdvertiser && | ||
| isBuySellPage && | ||
| ((!isDesktop && | ||
| (queryString.modal === 'RadioGroupFilterModal' || | ||
| queryString.modal === 'FundsModal' || | ||
| !queryString.modal)) || | ||
| isDesktop) | ||
| ) { | ||
| setShowFundsBanner(true); | ||
| } else { | ||
| setShowFundsBanner(false); | ||
| } | ||
| }, [isAdvertiser, isBuySellPage, isDesktop, location, queryString]); | ||
|
|
There was a problem hiding this comment.
as mentioned previously in my other comment, here is where I handled showing the Banner if there is any Modal shown, this just to prevent the Banner to be shown above the Modal.
| @@ -17,6 +17,7 @@ const useActiveAccount = () => { | |||
| ? { | |||
| ...activeAccount, | |||
| balance: balanceData?.accounts?.[activeAccount?.loginid]?.balance ?? 0, | |||
| hasMigratedToWallets: activeAccount?.linked_to.some(item => item.platform === 'dwallet'), | |||
There was a problem hiding this comment.
This should be temporary until we get the flag from BE.
|
Preview Link: https://P2PS-4363-banner-on1.p2p-standalone.pages.dev
|
