feat(hackathon-surplus): show surplus modal when confirmation modal is closed #2773

alfetopito · 2023-06-30T17:41:39Z

Summary

Continuing #2752

Trigger surplus modal when order is fulfilled even if confirmation modal is closed

⚠️ Notes ⚠️

Styling not included, coming on feat: surplus modal #2767
Only tested SWAP, but should NOT trigger for LIMIT
I have not tested multiple orders fulfilling at the same time, might be an interesting edge case to check

To Test

Place order
Close confirmation modal

When fulfilled, modal should show up

Place order
Keep modal open

Surplus should be displayed

Close modal

No other modals should be "hidden" underneath the first one

vercel · 2023-06-30T17:41:42Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
swap-dev	✅ Ready (Inspect)	Visit Preview	💬 Add feedback

🌃 Cosmos ↗︎

alfetopito · 2023-06-30T17:42:18Z

src/common/pure/Modal/index.ts

src/modules/swap/containers/ConfirmSwapModalSetup/index.tsx

alfetopito · 2023-06-30T17:45:45Z

src/modules/swap/containers/SurplusModalSetup/index.tsx

+      <styledEl.Wrapper>
+        <styledEl.Section>
+          <styledEl.Header>
+            <styledEl.CloseIconWrapper onClick={onDismiss} />
+          </styledEl.Header>
+        </styledEl.Section>
+        <SurplusModal order={order} />
+      </styledEl.Wrapper>


Re-using the same components to works nicely with #2767 without any changes

anxolin

code review only, no test

src/common/pure/Modal/index.tsx

anxolin · 2023-06-30T17:56:50Z

src/modules/swap/containers/SwapModals/index.tsx

@@ -23,6 +25,7 @@ export const SwapModals = React.memo(function (props: SwapModalsProps) {
      {/*<CowSubsidyModal isOpen={showCowSubsidyModal} onDismiss={closeModals} /> */}
      {<ConfirmSwapModalSetup {...confirmSwapProps} />}
      {showNativeWrapModal && <EthFlowModal {...ethFlowProps} />}
+      {!showNativeWrapModal && <SurplusModalSetup />}


Is this condition correct? !showNativeWrapModal

Yes, I just want to make sure it's not displayed by accident when EthFlowModal is active

anxolin · 2023-06-30T17:57:14Z

src/modules/swap/containers/SurplusModalSetup/index.tsx

+  const order = useOrder({ id: orderId, chainId })
+
+  const onDismiss = useCallback(() => {
+    orderId && removeOrderId(orderId)


cool how you handled the queue of modals

shoom3301

Great changes!

elena-zh

Hey @alfetopito , great! I noticed that styles of the modal are a bit off, but you are aware of it.

I have also tested edge cases:

2 orders in a regular mode: the 1st progress bar is closed, the 2nd is opened: everything worked as expected. When the 1st order was filled, no Surplus modal appeared, but the progress bar changes the view when the 2nd order was filled.
Expert mode, 2 orders: 2 modals appear one after another (or under another). So it looks like I need to press on the close icon twice in order to close the Surplus modal (however, I close 2 modals as numbers are changed when I close the 1st one)). Not sure if we need to fix this
Regular mode, 2 orders with closed bars: the same behavior as in the p.2.
When my Limit order is filled, I also see the surplus modal on the Swap page!

I did not test it for TWAP order. However, let me know please if I need to.

Did not seem to be in needed as there's another instance called from within ConfirmSwap modal. Must test other use cases to be sure it still works as before

…dal" This reverts commit 4a45dea.

alfetopito · 2023-07-04T14:26:32Z

Hey @alfetopito , great! I noticed that styles of the modal are a bit off, but you are aware of it.

I was able to fix it \o/

I have also tested edge cases:

1. 2 orders in a regular mode: the 1st progress bar is closed, the 2nd is opened: everything worked as expected. When the 1st order was filled, no Surplus modal appeared, but the progress bar changes the view when the 2nd order was filled.

2. Expert mode, 2 orders: 2 modals appear one after another (or under another). So it looks like I need to press on the close icon twice in order to close the Surplus modal (however, I close 2 modals as numbers are changed when I close the 1st one)). Not sure if we need to fix this

3. Regular mode, 2 orders with closed bars: the same behavior as in the p.2.

4. When my Limit order is filled, I also see the surplus modal on the Swap page!
   ![image](https://user-images.githubusercontent.com/70885163/250882579-3a4b08a8-9eb9-41e2-99e4-900c0352b2d0.png)

Now pop up should only show for swap orders

I did not test it for TWAP order. However, let me know please if I need to.

No need, if it works for limit (by not showing) it's enough

elena-zh · 2023-07-04T15:09:48Z

Hey @alfetopito , great job!
One nitpick: can we wrap a token name by words in the modal?

alfetopito · 2023-07-04T15:20:49Z

Hey @alfetopito , great job! One nitpick: can we wrap a token name by words in the modal?

That, I'll delegate to @fairlighteth as it's out of my reach

elena-zh · 2023-07-05T09:25:52Z

That, I'll delegate to @fairlighteth as it's out of my reach

Hey @alfetopito , @fairlighteth , I have created #2790 issue for this

alfetopito self-assigned this Jun 30, 2023

alfetopito added the hackathon label Jun 30, 2023

alfetopito requested review from a team June 30, 2023 17:41

vercel bot deployed to Preview June 30, 2023 17:42 View deployment

alfetopito commented Jun 30, 2023

View reviewed changes

vercel bot deployed to Preview June 30, 2023 17:50 View deployment

anxolin approved these changes Jun 30, 2023

View reviewed changes

shoom3301 approved these changes Jul 3, 2023

View reviewed changes

alfetopito force-pushed the hackathon/surplus_modal-popup branch from ba4197a to 9151a14 Compare July 3, 2023 15:59

vercel bot deployed to Preview July 3, 2023 16:04 View deployment

alfetopito force-pushed the hackathon/surplus_modal-popup branch from 9151a14 to da10508 Compare July 4, 2023 08:23

vercel bot deployed to Preview July 4, 2023 08:28 View deployment

elena-zh requested changes Jul 4, 2023

View reviewed changes

alfetopito mentioned this pull request Jul 4, 2023

feat(hackathon-surplus): refresh surplus on swap trade #2781

Merged

alfetopito added 13 commits July 4, 2023 13:38

refactor: remove ModalMod mod file and move it to index

18930e8

refactor: move styled modal stuff to styled file

14eab4e

chore: typo on comment

cf0d4ef

chore: remove TransactionConfirmationModal from ConfirmSwapModal

11e1452

Did not seem to be in needed as there's another instance called from within ConfirmSwap modal. Must test other use cases to be sure it still works as before

feat: add state for surplusModal

cb6adf5

feat: add SurplusModalSetup to wrap SurplusModal

f26a21a

feat: when order is fulfilled, add it to surplus modal queue

bdb7987

feat: sync confirmation modal status to surplusModal state

ecd45fe

feat: add SurplusModal to SwapModals

9fa189b

fix: add fn to hook deps array

dd30249

Revert "chore: remove TransactionConfirmationModal from ConfirmSwapMo…

098cbbf

…dal" This reverts commit 4a45dea.

refactor: rename GpModal to CowModal

9582add

feat: add an extra to twitter share msg

6539aab

alfetopito force-pushed the hackathon/surplus_modal-popup branch from da10508 to 6539aab Compare July 4, 2023 13:33

vercel bot deployed to Preview July 4, 2023 13:36 View deployment

fix: move SurplusModal inside Section to fix css

af6b37b

vercel bot deployed to Preview July 4, 2023 14:09 View deployment

alfetopito added 2 commits July 4, 2023 15:23

chore: add class from api reponse to OrderInfoApi

4071e4b

chore: only add surplus modal for market orders

2d1e6be

vercel bot deployed to Preview July 4, 2023 14:29 View deployment

alfetopito requested a review from elena-zh July 4, 2023 14:51

alfetopito merged commit 645b069 into develop Jul 5, 2023
11 of 12 checks passed

alfetopito deleted the hackathon/surplus_modal-popup branch July 5, 2023 08:26

github-actions bot locked and limited conversation to collaborators Jul 5, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(hackathon-surplus): show surplus modal when confirmation modal is closed #2773

feat(hackathon-surplus): show surplus modal when confirmation modal is closed #2773

alfetopito commented Jun 30, 2023

vercel bot commented Jun 30, 2023 •

edited by github-actions bot

Loading

alfetopito Jun 30, 2023

alfetopito Jun 30, 2023

anxolin left a comment

anxolin Jun 30, 2023

alfetopito Jul 3, 2023

anxolin Jun 30, 2023

shoom3301 left a comment

elena-zh left a comment

alfetopito commented Jul 4, 2023

elena-zh commented Jul 4, 2023

alfetopito commented Jul 4, 2023 •

edited

Loading

elena-zh commented Jul 5, 2023

feat(hackathon-surplus): show surplus modal when confirmation modal is closed #2773

feat(hackathon-surplus): show surplus modal when confirmation modal is closed #2773

Conversation

alfetopito commented Jun 30, 2023

Summary

⚠️ Notes ⚠️

To Test

vercel bot commented Jun 30, 2023 • edited by github-actions bot Loading

alfetopito Jun 30, 2023

Choose a reason for hiding this comment

alfetopito Jun 30, 2023

Choose a reason for hiding this comment

anxolin left a comment

Choose a reason for hiding this comment

anxolin Jun 30, 2023

Choose a reason for hiding this comment

alfetopito Jul 3, 2023

Choose a reason for hiding this comment

anxolin Jun 30, 2023

Choose a reason for hiding this comment

shoom3301 left a comment

Choose a reason for hiding this comment

elena-zh left a comment

Choose a reason for hiding this comment

alfetopito commented Jul 4, 2023

elena-zh commented Jul 4, 2023

alfetopito commented Jul 4, 2023 • edited Loading

elena-zh commented Jul 5, 2023

vercel bot commented Jun 30, 2023 •

edited by github-actions bot

Loading

alfetopito commented Jul 4, 2023 •

edited

Loading