Claim flow styles (#2042)

* Claim modal styles WIP. * Claim modal styles WIP. * Claim modal styles WIP. * Claim modal styles WIP. * Claim modal styles WIP. * Claim modal styles WIP. * Claim modal styles WIP. * Claim modal styles WIP. * Claim modal styles WIP. * Claim modal styles WIP. * Claim modal styles WIP. * Claim modal styles WIP. * Claim modal styles WIP. * Claim modal styles WIP. * Claim modal styles WIP. * Claim modal styles WIP. * Claim modal styles WIP.
gnosis · Jan 3, 2022 · 956c342 · 956c342
1 parent d2060bb
commit 956c342
Show file tree

Hide file tree

Showing 10 changed files with 1,388 additions and 136 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -2,4 +2,4 @@
   "semi": false,
   "singleQuote": true,
   "printWidth": 120
-}
+}
diff --git a/public/audio/mooooo-send.mp3.asd b/public/audio/mooooo-send.mp3.asd
diff --git a/src/custom/assets/cow-swap/cowprotocol.svg b/src/custom/assets/cow-swap/cowprotocol.svg
diff --git a/src/custom/components/CowProtocolLogo/index.tsx b/src/custom/components/CowProtocolLogo/index.tsx
@@ -0,0 +1,34 @@
+import styled from 'styled-components/macro'
+import CowProtocolIcon from 'assets/cow-swap/cowprotocol.svg'
+
+export const Icon = styled.span<Props>`
+  ${({ theme }) => theme.cowToken.background};
+  ${({ theme }) => theme.cowToken.boxShadow};
+  height: ${({ size }) => (size ? `${size}px` : '24px')};
+  width: ${({ size }) => (size ? `${size}px` : '24px')};
+  display: inline-block;
+  margin: 0;
+  border-radius: ${({ size }) => (size ? `${size}px` : '24px')};
+  position: relative;
+
+  &::after {
+    content: '';
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 8%;
+    bottom: 0;
+    margin: auto;
+    background: url(${CowProtocolIcon}) no-repeat center/70%;
+  }
+`
+
+interface Props {
+  size?: number | undefined
+}
+
+export default function CowProtocolLogo({ size }: Props) {
+  return <Icon size={size} />
+}
diff --git a/src/custom/components/Header/index.tsx b/src/custom/components/Header/index.tsx
@@ -3,8 +3,8 @@ import { useState, useEffect } from 'react'
 import { SupportedChainId as ChainId } from 'constants/chains'
 import { Dots } from 'components/swap/styleds'
 import Web3Status from 'components/Web3Status'
-import { CardNoise } from 'components/earn/styled'
-import { ExternalLink, TYPE } from 'theme'
+import { ExternalLink } from 'theme'
+import { useHistory } from 'react-router-dom'
 
 import HeaderMod, {
   Title,
@@ -18,7 +18,7 @@ import HeaderMod, {
   StyledNavLink as StyledNavLinkUni,
   StyledMenuButton,
   HeaderFrame,
-  UNIAmount,
+  UNIAmount as UNIAmountMod,
   UNIWrapper,
 } from './HeaderMod'
 import Menu from 'components/Menu'
@@ -37,13 +37,18 @@ import { supportedChainId } from 'utils/supportedChainId'
 import { formatSmart } from 'utils/format'
 import NetworkCard, { NetworkInfo } from './NetworkCard'
 import SVG from 'react-inlinesvg'
-import { useModalOpen, useShowClaimPopup, useToggleSelfClaimModal } from 'state/application/hooks'
+import {
+  useModalOpen,
+  useShowClaimPopup,
+  // useToggleSelfClaimModal
+} from 'state/application/hooks'
 import { useUserHasAvailableClaim } from 'state/claim/hooks'
 import { useUserHasSubmittedClaim } from 'state/transactions/hooks'
 
 import Modal from 'components/Modal'
-import ClaimModal from 'components/claim/ClaimModal'
+// import ClaimModal from 'components/claim/ClaimModal'
 import UniBalanceContent from 'components/Header/UniBalanceContent'
+import CowProtocolLogo from 'components/CowProtocolLogo'
 
 export const NETWORK_LABELS: { [chainId in ChainId]?: string } = {
   [ChainId.RINKEBY]: 'Rinkeby',
@@ -200,6 +205,15 @@ const UniIcon = styled.div`
   }
 `
 
+const VCowAmount = styled(UNIAmountMod)`
+  ${({ theme }) => theme.cowToken.background};
+  ${({ theme }) => theme.cowToken.boxShadow};
+  color: white;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+`
+
 export default function Header() {
   const { account, chainId: connectedChainId } = useActiveWeb3React()
   const chainId = supportedChainId(connectedChainId)
@@ -208,7 +222,7 @@ export default function Header() {
   const nativeToken = chainId && (CHAIN_CURRENCY_LABELS[chainId] || 'ETH')
   const [darkMode, toggleDarkMode] = useDarkModeManager()
 
-  const toggleClaimModal = useToggleSelfClaimModal()
+  // const toggleClaimModal = useToggleSelfClaimModal()
   const availableClaim: boolean = useUserHasAvailableClaim(account)
   const { claimTxn } = useUserHasSubmittedClaim(account ?? undefined)
   const [showUniBalanceModal, setShowUniBalanceModal] = useState(false)
@@ -219,6 +233,9 @@ export default function Header() {
   const openOrdersPanel = () => setIsOrdersPanelOpen(true)
   const isMenuOpen = useModalOpen(ApplicationModal.MENU)
 
+  const history = useHistory()
+  const handleOnClickClaim = () => history.push('/claim')
+
   // Toggle the 'noScroll' class on body, whenever the orders panel or flyout menu is open.
   // This removes the inner scrollbar on the page body, to prevent showing double scrollbars.
   useEffect(() => {
@@ -231,7 +248,6 @@ export default function Header() {
     <Wrapper>
       <HeaderModWrapper>
         <HeaderRow marginRight="0">
-          <ClaimModal />
           <Modal isOpen={showUniBalanceModal} onDismiss={() => setShowUniBalanceModal(false)}>
             <UniBalanceContent setShowUniBalanceModal={setShowUniBalanceModal} />
           </Modal>
@@ -249,19 +265,19 @@ export default function Header() {
           <NetworkCard />
           <HeaderElement>
             {availableClaim && !showClaimPopup && (
-              <UNIWrapper onClick={toggleClaimModal}>
-                <UNIAmount active={!!account && !availableClaim} style={{ pointerEvents: 'auto' }}>
-                  <TYPE.white padding="0 2px">
-                    {claimTxn && !claimTxn?.receipt ? (
-                      <Dots>
-                        <Trans>Claiming vCOW</Trans>
-                      </Dots>
-                    ) : (
+              <UNIWrapper onClick={handleOnClickClaim}>
+                <VCowAmount active={!!account && !availableClaim} style={{ pointerEvents: 'auto' }}>
+                  {claimTxn && !claimTxn?.receipt ? (
+                    <Dots>
+                      <Trans>Claiming vCOW...</Trans>
+                    </Dots>
+                  ) : (
+                    <>
+                      <CowProtocolLogo />
                       <Trans>Claim vCOW</Trans>
-                    )}
-                  </TYPE.white>
-                </UNIAmount>
-                <CardNoise />
+                    </>
+                  )}
+                </VCowAmount>
               </UNIWrapper>
             )}
             <AccountElement active={!!account} style={{ pointerEvents: 'auto' }}>

diff --git a/src/custom/components/Modal/index.ts b/src/custom/components/Modal/index.ts
@@ -5,10 +5,11 @@ import { HeaderRow, ContentWrapper, CloseIcon, HoverText } from 'components/Wall
 export * from '@src/components/Modal'
 export { default } from '@src/components/Modal'
 
-export const GpModal = styled(Modal)`
+export const GpModal = styled(Modal)<{ maxWidth?: number; backgroundColor?: string; border?: string }>`
   > [data-reach-dialog-content] {
-    background-color: ${({ theme }) => theme.bg1};
-    max-width: 470px;
+    background-color: ${({ backgroundColor, theme }) => (backgroundColor ? backgroundColor : theme.bg1)};
+    max-width: ${({ maxWidth }) => (maxWidth ? `${maxWidth}px` : '470px')};
+    border: ${({ border }) => (border ? border : 'inherit')};
     z-index: 100;
 
     ${({ theme }) => theme.mediaWidth.upToSmall`