feat(hackathon-surplus): show surplus modal when confirmation modal i…

…s closed (#2773)

* refactor: remove ModalMod mod file and move it to index

* refactor: move styled modal stuff to styled file

* chore: typo on comment

* chore: remove TransactionConfirmationModal from ConfirmSwapModal

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

* feat: add SurplusModalSetup to wrap SurplusModal

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

* feat: sync confirmation modal status to surplusModal state

* feat: add SurplusModal to SwapModals

* fix: add fn to hook deps array

* Revert "chore: remove TransactionConfirmationModal from ConfirmSwapModal"

This reverts commit 4a45dea.

* refactor: rename GpModal to CowModal

* feat: add `an extra` to twitter share msg

* fix: move SurplusModal inside Section to fix css

* chore: add `class` from api reponse to `OrderInfoApi`

* chore: only add surplus modal for market orders

src/common/containers/MultipleOrdersCancellationModal/index.tsx

@@ -12,7 +12,7 @@ import { useWalletInfo } from 'modules/wallet'
 
 import { ordersToCancelAtom, updateOrdersToCancelAtom } from 'common/hooks/useMultipleOrdersCancellation/state'
 import { useCancelMultipleOrders } from 'common/hooks/useMultipleOrdersCancellation/useCancelMultipleOrders'
-import { GpModal as Modal } from 'common/pure/Modal'
+import { CowModal as Modal } from 'common/pure/Modal'
 import { TransactionErrorContent } from 'common/pure/TransactionErrorContent'
 
 interface Props {

src/common/containers/ZeroApprovalModal/ZeroApprovalModal.tsx

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useState } from 'react'
 import { useWalletDetails, useWalletDisplayedAddress } from 'modules/wallet'
 
 import { ConfirmationPendingContent } from 'common/pure/ConfirmationPendingContent'
-import { GpModal } from 'common/pure/Modal'
+import { CowModal } from 'common/pure/Modal'
 import { useZeroApprovalState } from 'common/state/useZeroApprovalState'
 
 import { useWalletStatusIcon } from '../../hooks/useWalletStatusIcon'
@@ -36,7 +36,7 @@ export function ZeroApprovalModal({ onDismiss = () => {} }: ZeroApprovalModalPro
   const symbol = currency?.symbol?.toUpperCase() ?? 'Unknown Currency' // This should never happen.
 
   return (
-    <GpModal isOpen={shouldShow} onDismiss={handleDismiss}>
+    <CowModal isOpen={shouldShow} onDismiss={handleDismiss}>
       <ConfirmationPendingContent
         onDismiss={handleDismiss}
         statusIcon={statusIcon}
@@ -51,6 +51,6 @@ export function ZeroApprovalModal({ onDismiss = () => {} }: ZeroApprovalModalPro
         walletAddress={walletAddress}
         operationLabel="token approval"
       />
-    </GpModal>
+    </CowModal>
   )
 }

src/common/pure/CancellationModal/index.tsx

@@ -5,7 +5,7 @@ import { LegacyConfirmationPendingContent } from 'legacy/components/TransactionC
 import { shortenOrderId } from 'legacy/utils'
 
 import { CancellationModalContext } from 'common/hooks/useCancelOrder/state'
-import { GpModal as Modal } from 'common/pure/Modal'
+import { CowModal as Modal } from 'common/pure/Modal'
 import { TransactionErrorContent } from 'common/pure/TransactionErrorContent'
 
 import { RequestCancellationModal } from './RequestCancellationModal'

src/common/pure/ConfirmationModal/ConfirmationModal.tsx

@@ -1,7 +1,7 @@
 import { Trans } from '@lingui/macro'
 import styled from 'styled-components/macro'
 
-import Modal, { ContentWrapper } from 'common/pure/Modal'
+import { ContentWrapper, Modal } from 'common/pure/Modal'
 
 import { ConfirmationModalHeader } from './ConfirmationModalHeader'
 

src/common/pure/ConfirmationPendingContent/ConfirmationPendingContent.cosmos.tsx

@@ -2,11 +2,11 @@ import { Identicon } from 'modules/wallet'
 
 import { ConfirmationPendingContent } from './ConfirmationPendingContent'
 
-import { GpModal } from '../Modal'
+import { CowModal } from '../Modal'
 
 const Fixtures = {
   default: (
-    <GpModal onDismiss={console.log} isOpen={true}>
+    <CowModal onDismiss={console.log} isOpen={true}>
       <ConfirmationPendingContent
         onDismiss={() => alert('dismiss')}
         statusIcon={<Identicon size={56} />}
@@ -20,7 +20,7 @@ const Fixtures = {
         walletAddress="walletAddress"
         operationLabel="token approval"
       />
-    </GpModal>
+    </CowModal>
   ),
 }
 

src/common/pure/ExpertModeModal/index.tsx

@@ -2,7 +2,7 @@ import { Trans } from '@lingui/macro'
 import { X } from 'react-feather'
 import styled from 'styled-components/macro'
 
-import Modal from 'common/pure/Modal'
+import { Modal } from 'common/pure/Modal'
 
 import { ConfirmedButton } from '../ConfirmedButton'
 

src/common/pure/Modal/ModalMod.tsx → src/common/pure/Modal/index.tsx

@@ -1,80 +1,14 @@
 import React from 'react'
 
-import { DialogContent, DialogOverlay } from '@reach/dialog'
-import { animated, useSpringValue, useTransition } from '@react-spring/web'
+import { useSpringValue, useTransition } from '@react-spring/web'
 import { useGesture } from '@use-gesture/react'
-import { transparentize } from 'polished'
-import styled, { css } from 'styled-components/macro'
+import styled from 'styled-components/macro'
 
 import { isMobile } from 'legacy/utils/userAgent'
 
-const AnimatedDialogOverlay = animated(DialogOverlay)
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const StyledDialogOverlay = styled(AnimatedDialogOverlay)`
-  &[data-reach-dialog-overlay] {
-    z-index: 2;
-    background-color: transparent;
-    overflow: hidden;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    background-color: ${({ theme }) => theme.modalBG};
-  }
-`
-
-const AnimatedDialogContent = animated(DialogContent)
-// destructure to not pass custom props to Dialog DOM element
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const StyledDialogContent = styled(({ ...rest }) => <AnimatedDialogContent {...rest} />).attrs({
-  'aria-label': 'dialog',
-})`
-  overflow-y: auto;
-
-  &[data-reach-dialog-content] {
-    margin: 0 0 2rem 0;
-    background-color: ${({ theme }) => theme.bg0};
-    border: 1px solid ${({ theme }) => theme.bg1};
-    box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.95, theme.shadow1)};
-    padding: 0px;
-    width: 50vw;
-    overflow-y: auto;
-    overflow-x: hidden;
-
-    align-self: ${({ mobile }) => (mobile ? 'flex-end' : 'center')};
+import { CloseIcon, ContentWrapper, HeaderRow, HoverText, StyledDialogContent, StyledDialogOverlay } from './styled'
 
-    max-width: 420px;
-    ${({ maxHeight }) =>
-      maxHeight &&
-      css`
-        max-height: ${maxHeight}vh;
-      `}
-    ${({ minHeight }) =>
-      minHeight &&
-      css`
-        min-height: ${minHeight}vh;
-      `}
-    display: flex;
-    border-radius: 20px;
-    ${({ theme }) => theme.mediaWidth.upToMedium`
-      width: 65vw;
-      margin: 0;
-    `}
-    ${({ theme, mobile }) => theme.mediaWidth.upToSmall`
-      width:  85vw;
-      ${
-        mobile &&
-        css`
-          width: 100vw;
-          border-radius: 20px;
-          border-bottom-left-radius: 0;
-          border-bottom-right-radius: 0;
-        `
-      }
-    `}
-  }
-`
+export * from './styled'
 
 interface ModalProps {
   isOpen: boolean
@@ -86,7 +20,7 @@ interface ModalProps {
   children?: React.ReactNode
 }
 
-export default function Modal({
+export function Modal({
   isOpen,
   onDismiss,
   minHeight = false,
@@ -148,3 +82,62 @@ export default function Modal({
     </>
   )
 }
+
+export const CowModal = styled(Modal)<{
+  maxWidth?: number | string
+  backgroundColor?: string
+  border?: string
+  padding?: string
+}>`
+  > [data-reach-dialog-content] {
+    color: ${({ theme }) => theme.text1};
+    width: 100%;
+    max-width: ${({ maxWidth = 470 }) => `${maxWidth}px`};
+    border: ${({ border = 'inherit' }) => `${border}`};
+    z-index: 100;
+    padding: ${({ padding = '0px' }) => `${padding}`};
+    margin: auto;
+    transition: max-width 0.4s ease;
+    background-color: ${({ theme }) => theme.bg1};
+    overflow: hidden;
+
+    ${({ theme }) => theme.mediaWidth.upToSmall`
+      max-height: 100vh;
+      max-width: 100%;
+      height: 100%;
+      width: 100vw;
+      border-radius: 0;
+    `}
+
+    ${HeaderRow} {
+      ${({ theme }) => theme.mediaWidth.upToSmall`
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        padding: 16px;
+        background: ${({ theme }) => theme.bg1};
+        z-index: 20;
+      `}
+    }
+
+    ${CloseIcon} {
+      ${({ theme }) => theme.mediaWidth.upToSmall`
+        z-index: 21;
+        position: fixed;
+      `}
+    }
+
+    ${HoverText} {
+      ${({ theme }) => theme.mediaWidth.upToSmall`
+        white-space: nowrap;
+      `}
+    }
+
+    ${ContentWrapper} {
+      ${({ theme }) => theme.mediaWidth.upToSmall`
+        margin: 62px auto 0;
+      `}
+    }
+  }
+`