-
Notifications
You must be signed in to change notification settings - Fork 89
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(permit): modals SWAP #3158
Merged
Merged
Changes from all commits
Commits
Show all changes
18 commits
Select commit
Hold shift + click to select a range
ab20e17
refactor: extract NewModal into its own folder
alfetopito a7e4787
refactor: only set permitInfo if there is not enough allowance
alfetopito 79ae98d
refactor: use setter to load current state rather than relying on sta…
alfetopito ad70d4a
feat: store permit status on swap state
alfetopito 8202816
fix: remove hasEnoughAllowance from TradeFlowContext
alfetopito 33b97b0
chore: use relative imports inside the module
alfetopito 30bac00
feat: add PermitModal pure and container
alfetopito 8a63009
chore: export cosmos command for easier access
alfetopito 5fa20a8
refactor: simplify TokenAmount interface (it was doubling Nullish<>)
alfetopito 78d1230
refactor: sort imports
alfetopito 1d99fa8
chore: pass trade and swapConfirmState to TransactionConfirmationModal
alfetopito 995dbc1
feat: add PermitModal to TransactionConfirmationModal
alfetopito a433727
chore: redid the logic to update the signature requesting
alfetopito f884d5b
refactor: always set permitSignatureState
alfetopito c06a2d1
chore: remove stale comment
alfetopito 88159b3
chore: update handlePermit export to fix build warning
alfetopito e1a49b3
chore: outputAmountWithoutFee never needed to be optional
alfetopito a0dc493
chore: use TradeAmounts instead of TradeGp
alfetopito File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
15 changes: 15 additions & 0 deletions
15
apps/cowswap-frontend/src/common/containers/PermitModal/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import { useMemo } from 'react' | ||
|
||
import { Identicon, useWalletInfo } from '@cowprotocol/wallet' | ||
|
||
import { PermitModal as Pure, PermitModalProps } from '../../pure/PermitModal' | ||
|
||
export type PermitModalContainerProps = Omit<PermitModalProps, 'icon'> | ||
|
||
export function PermitModal(props: PermitModalContainerProps) { | ||
const { account } = useWalletInfo() | ||
|
||
const icon = useMemo(() => (account ? <Identicon account={account} size={80} /> : undefined), [account]) | ||
|
||
return <Pure {...props} icon={icon} /> | ||
} |
73 changes: 10 additions & 63 deletions
73
apps/cowswap-frontend/src/common/pure/Modal/index.cosmos.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,99 +1,46 @@ | ||
import ICON_ARROW from 'assets/icon/arrow.svg' | ||
import SVG from 'react-inlinesvg' | ||
import styled from 'styled-components/macro' | ||
|
||
import { MOCK_TOKEN, IMAGE_ACCOUNT } from 'common/constants/cosmos'; | ||
import { UI } from 'common/constants/theme' | ||
import { IconSpinner } from 'common/pure/IconSpinner' | ||
import { Stepper } from 'common/pure/Stepper' | ||
|
||
import { Modal, CowModal, NewModal, NewModalContentTop, NewModalContentBottom } from './index' | ||
import { CowModal, Modal } from './index' | ||
|
||
const Wrapper = styled.div` | ||
width: 100vw; | ||
height: 100vh; | ||
` | ||
|
||
const ArrowRight = styled(SVG)` | ||
--size: 12px; | ||
width: var(--size); | ||
height: var(--size); | ||
margin: auto; | ||
|
||
> path { | ||
fill: var(${UI.COLOR_TEXT2}); | ||
} | ||
` | ||
|
||
const ModalFixtures = { | ||
'default modal': ( | ||
<Wrapper> | ||
<Modal isOpen={true} onDismiss={() => console.log("Dismissed")}> | ||
<Modal isOpen={true} onDismiss={() => console.log('Dismissed')}> | ||
Default modal content here | ||
</Modal> | ||
</Wrapper> | ||
), | ||
'modal with minHeight and maxHeight': ( | ||
<Wrapper> | ||
<Modal isOpen={true} onDismiss={() => console.log("Dismissed")} minHeight={50} maxHeight={80}> | ||
<Modal isOpen={true} onDismiss={() => console.log('Dismissed')} minHeight={50} maxHeight={80}> | ||
Modal with minHeight and maxHeight | ||
</Modal> | ||
</Wrapper> | ||
), | ||
'cow modal': ( | ||
<Wrapper> | ||
<CowModal isOpen={true} onDismiss={() => console.log("Cow Modal Dismissed")} maxWidth={400}> | ||
<CowModal isOpen={true} onDismiss={() => console.log('Cow Modal Dismissed')} maxWidth={400}> | ||
Cow Modal Content | ||
</CowModal> | ||
</Wrapper> | ||
), | ||
'cow modal with background color': ( | ||
<Wrapper> | ||
<CowModal isOpen={true} onDismiss={() => console.log("Cow Modal Dismissed")} maxWidth={400} backgroundColor="pink"> | ||
<CowModal | ||
isOpen={true} | ||
onDismiss={() => console.log('Cow Modal Dismissed')} | ||
maxWidth={400} | ||
backgroundColor="pink" | ||
> | ||
Cow Modal with Pink Background | ||
</CowModal> | ||
</Wrapper> | ||
), | ||
'new modal + content top/bottom': ( | ||
<Wrapper> | ||
<NewModal> | ||
Comment on lines
-57
to
-58
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Moved to its own file |
||
<NewModalContentTop paddingTop={90}> | ||
<IconSpinner currency={MOCK_TOKEN} size={84} /> | ||
<h3>Approve spending AAVE <br /> on CoW Swap</h3> | ||
</NewModalContentTop> | ||
|
||
<NewModalContentBottom> | ||
<p>Sign (gas-free!) in your wallet...</p> | ||
<Stepper maxWidth={'75%'} steps={[{ stepState: 'active', stepNumber: 1, label: 'Approve' }, { stepState: 'open', stepNumber: 2, label: 'Submit' },]} /> | ||
</NewModalContentBottom> | ||
</NewModal> | ||
</Wrapper> | ||
), | ||
'new modal + content top/bottom 2': ( | ||
<Wrapper> | ||
<NewModal> | ||
<NewModalContentTop paddingTop={90}> | ||
<IconSpinner image={IMAGE_ACCOUNT} size={84} /> | ||
<span> | ||
<h3>Confirm Swap</h3> | ||
<p>10 AAVE <ArrowRight src={ICON_ARROW} /> 564.7202 DAI</p> | ||
</span> | ||
</NewModalContentTop> | ||
|
||
<NewModalContentBottom> | ||
<p>Sign (gas-free!) in your wallet...</p> | ||
<Stepper maxWidth={'75%'} steps={[{ stepState: 'finished', stepNumber: 1, label: 'Approved' }, { stepState: 'active', stepNumber: 2, label: 'Submit' },]} /> | ||
</NewModalContentBottom> | ||
</NewModal> | ||
</Wrapper> | ||
), | ||
'new modal + heading title': ( | ||
<Wrapper> | ||
<NewModal title="Review transaction"> | ||
- New Modal - | ||
</NewModal> | ||
</Wrapper> | ||
), | ||
} | ||
|
||
export default ModalFixtures |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -4,8 +4,6 @@ import { isMobile } from '@cowprotocol/common-utils' | |
|
||
import { useSpringValue, useTransition } from '@react-spring/web' | ||
import { useGesture } from '@use-gesture/react' | ||
import CLOSE_ICON from 'assets/icon/x.svg' | ||
import SVG from 'react-inlinesvg' | ||
import styled from 'styled-components/macro' | ||
|
||
import { UI } from 'common/constants/theme' | ||
|
@@ -24,6 +22,9 @@ interface ModalProps { | |
children?: React.ReactNode | ||
} | ||
|
||
/** | ||
* @deprecated use common/pure/NewModal instead | ||
*/ | ||
export function Modal({ | ||
isOpen, | ||
onDismiss, | ||
|
@@ -145,160 +146,3 @@ export const CowModal = styled(Modal)<{ | |
} | ||
} | ||
` | ||
|
||
// New Modal to be used going forward ================================= | ||
const ModalInner = styled.div` | ||
Comment on lines
-148
to
-150
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Moved to its own file |
||
display: flex; | ||
flex-direction: column; | ||
width: 100%; | ||
height: auto; | ||
margin: auto; | ||
background: var(${UI.COLOR_CONTAINER_BG_01}); | ||
border-radius: var(${UI.BORDER_RADIUS_NORMAL}); | ||
box-shadow: var(${UI.BOX_SHADOW_NORMAL}); | ||
padding: 0; | ||
|
||
${({ theme }) => theme.mediaWidth.upToSmall` | ||
margin: 8vh 0 0; | ||
border-radius: 0; | ||
border-top-left-radius: var(${UI.BORDER_RADIUS_NORMAL}); | ||
border-top-right-radius: var(${UI.BORDER_RADIUS_NORMAL}); | ||
box-shadow: none; | ||
`} | ||
` | ||
|
||
const NewCowModal = styled.div<{ maxWidth?: number | string; minHeight?: number | string }>` | ||
display: flex; | ||
width: 100%; | ||
height: 100%; | ||
margin: auto; | ||
background: var(${UI.MODAL_BACKDROP}); | ||
overflow-y: auto; | ||
|
||
${ModalInner} { | ||
max-width: ${({ maxWidth }) => (maxWidth ? `${maxWidth}px` : '100%')}; | ||
min-height: ${({ minHeight }) => (minHeight ? `${minHeight}px` : '100%')}; | ||
|
||
${({ theme }) => theme.mediaWidth.upToSmall` | ||
max-width: 100%; | ||
min-height: initial; | ||
height: auto; | ||
`} | ||
} | ||
` | ||
|
||
const Heading = styled.h2` | ||
display: flex; | ||
justify-content: space-between; | ||
width: 100%; | ||
height: auto; | ||
padding: 18px; | ||
margin: 0; | ||
font-size: var(${UI.FONT_SIZE_MEDIUM}); | ||
|
||
${({ theme }) => theme.mediaWidth.upToSmall` | ||
position: sticky; | ||
top: 0; | ||
`} | ||
` | ||
|
||
const IconX = styled.div` | ||
position: fixed; | ||
top: 18px; | ||
right: 18px; | ||
cursor: pointer; | ||
opacity: 0.6; | ||
transition: opacity 0.2s ease-in-out; | ||
margin: 0 0 0 auto; | ||
|
||
> svg { | ||
width: var(${UI.ICON_SIZE_NORMAL}); | ||
height: var(${UI.ICON_SIZE_NORMAL}); | ||
fill: var(${UI.ICON_COLOR_NORMAL}); | ||
} | ||
|
||
&:hover { | ||
opacity: 1; | ||
} | ||
` | ||
|
||
const NewModalContent = styled.div<{ paddingTop?: number }>` | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
flex-flow: column wrap; | ||
flex: 1; | ||
width: 100%; | ||
height: 100%; | ||
padding: 0 var(${UI.PADDING_NORMAL}) var(${UI.PADDING_NORMAL}); | ||
|
||
h1, | ||
h2, | ||
h3 { | ||
width: 100%; | ||
font-size: var(${UI.FONT_SIZE_LARGER}); | ||
font-weight: var(${UI.FONT_WEIGHT_BOLD}); | ||
text-align: center; | ||
line-height: 1.4; | ||
margin: 0 auto; | ||
} | ||
|
||
p { | ||
font-size: var(${UI.FONT_SIZE_NORMAL}); | ||
font-weight: var(${UI.FONT_WEIGHT_NORMAL}); | ||
color: var(${UI.COLOR_TEXT2}); | ||
margin: 0 auto; | ||
padding: 0; | ||
} | ||
` | ||
|
||
export const NewModalContentTop = styled.div<{ paddingTop?: number }>` | ||
display: flex; | ||
flex-flow: column wrap; | ||
align-items: center; | ||
justify-content: center; | ||
width: 100%; | ||
margin: 0 0 auto; | ||
padding: ${({ paddingTop = 0 }) => `${paddingTop}px`} 0 0; | ||
gap: 24px; | ||
|
||
> span { | ||
gap: 6px; | ||
display: flex; | ||
flex-flow: column wrap; | ||
} | ||
|
||
p { | ||
font-size: var(${UI.FONT_SIZE_MEDIUM}); | ||
} | ||
` | ||
|
||
export const NewModalContentBottom = styled(NewModalContentTop)` | ||
margin: auto 0 0; | ||
|
||
p { | ||
font-size: var(${UI.FONT_SIZE_NORMAL}); | ||
} | ||
` | ||
interface NewModalProps { | ||
maxWidth?: number | ||
minHeight?: number | ||
title?: string | ||
onDismiss?: () => void | ||
children?: React.ReactNode | ||
} | ||
|
||
export function NewModal({ maxWidth = 450, minHeight = 450, title, children, onDismiss }: NewModalProps) { | ||
return ( | ||
<NewCowModal maxWidth={maxWidth} minHeight={minHeight}> | ||
<ModalInner> | ||
{title && <Heading>{title}</Heading>} | ||
<NewModalContent>{children}</NewModalContent> | ||
</ModalInner> | ||
|
||
<IconX onClick={() => onDismiss && onDismiss()}> | ||
<SVG src={CLOSE_ICON} /> | ||
</IconX> | ||
</NewCowModal> | ||
) | ||
} |
85 changes: 85 additions & 0 deletions
85
apps/cowswap-frontend/src/common/pure/NewModal/index.cosmos.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,85 @@ | ||
import ICON_ARROW from 'assets/icon/arrow.svg' | ||
import SVG from 'react-inlinesvg' | ||
import styled from 'styled-components/macro' | ||
|
||
import { IMAGE_ACCOUNT, MOCK_TOKEN } from 'common/constants/cosmos' | ||
import { UI } from 'common/constants/theme' | ||
import { IconSpinner } from 'common/pure/IconSpinner' | ||
import { Stepper } from 'common/pure/Stepper' | ||
|
||
import { NewModal, NewModalContentBottom, NewModalContentTop } from './index' | ||
|
||
const Wrapper = styled.div` | ||
width: 100vw; | ||
height: 100vh; | ||
` | ||
|
||
const ArrowRight = styled(SVG)` | ||
--size: 12px; | ||
width: var(--size); | ||
height: var(--size); | ||
margin: auto; | ||
|
||
> path { | ||
fill: var(${UI.COLOR_TEXT2}); | ||
} | ||
` | ||
|
||
const ModalFixtures = { | ||
'new modal + content top/bottom': ( | ||
<Wrapper> | ||
<NewModal> | ||
<NewModalContentTop paddingTop={90}> | ||
<IconSpinner currency={MOCK_TOKEN} size={84} /> | ||
<h3> | ||
Approve spending AAVE <br /> on CoW Swap | ||
</h3> | ||
</NewModalContentTop> | ||
|
||
<NewModalContentBottom> | ||
<p>Sign (gas-free!) in your wallet...</p> | ||
<Stepper | ||
maxWidth={'75%'} | ||
steps={[ | ||
{ stepState: 'active', stepNumber: 1, label: 'Approve' }, | ||
{ stepState: 'open', stepNumber: 2, label: 'Submit' }, | ||
]} | ||
/> | ||
</NewModalContentBottom> | ||
</NewModal> | ||
</Wrapper> | ||
), | ||
'new modal + content top/bottom 2': ( | ||
<Wrapper> | ||
<NewModal> | ||
<NewModalContentTop paddingTop={90}> | ||
<IconSpinner image={IMAGE_ACCOUNT} size={84} /> | ||
<span> | ||
<h3>Confirm Swap</h3> | ||
<p> | ||
10 AAVE <ArrowRight src={ICON_ARROW} /> 564.7202 DAI | ||
</p> | ||
</span> | ||
</NewModalContentTop> | ||
|
||
<NewModalContentBottom> | ||
<p>Sign (gas-free!) in your wallet...</p> | ||
<Stepper | ||
maxWidth={'75%'} | ||
steps={[ | ||
{ stepState: 'finished', stepNumber: 1, label: 'Approved' }, | ||
{ stepState: 'active', stepNumber: 2, label: 'Submit' }, | ||
]} | ||
/> | ||
</NewModalContentBottom> | ||
</NewModal> | ||
</Wrapper> | ||
), | ||
'new modal + heading title': ( | ||
<Wrapper> | ||
<NewModal title="Review transaction">- New Modal -</NewModal> | ||
</Wrapper> | ||
), | ||
} | ||
|
||
export default ModalFixtures |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We need a container to load the account and identicon