From 4aab98b37e5c5bd5bcb3b6d6123e16c34b26e97c Mon Sep 17 00:00:00 2001 From: nenadV91 Date: Tue, 5 Apr 2022 13:23:39 +0200 Subject: [PATCH 1/3] Update COW balance button --- .../index.tsx | 61 ++----------------- src/custom/components/Header/index.tsx | 18 ++---- src/custom/components/Menu/index.tsx | 23 +++---- 3 files changed, 19 insertions(+), 83 deletions(-) rename src/custom/components/{CowClaimButton => CowBalanceButton}/index.tsx (51%) diff --git a/src/custom/components/CowClaimButton/index.tsx b/src/custom/components/CowBalanceButton/index.tsx similarity index 51% rename from src/custom/components/CowClaimButton/index.tsx rename to src/custom/components/CowBalanceButton/index.tsx index c703cc91a3..d7a3376a98 100644 --- a/src/custom/components/CowClaimButton/index.tsx +++ b/src/custom/components/CowBalanceButton/index.tsx @@ -1,5 +1,5 @@ import { Trans } from '@lingui/macro' -import styled, { css } from 'styled-components/macro' +import styled from 'styled-components/macro' import CowProtocolLogo from 'components/CowProtocolLogo' import { useTokenBalance } from 'state/wallet/hooks' import { V_COW } from 'constants/tokens' @@ -7,7 +7,7 @@ import { ChainId } from 'state/lists/actions/actionsMod' import { formatMax, formatSmartLocaleAware } from 'utils/format' import { AMOUNT_PRECISION } from 'constants/index' -export const Wrapper = styled.div<{ isClaimPage?: boolean | null }>` +export const Wrapper = styled.div` ${({ theme }) => theme.card.boxShadow}; color: ${({ theme }) => theme.text1}; padding: 0 12px; @@ -36,65 +36,16 @@ export const Wrapper = styled.div<{ isClaimPage?: boolean | null }>` overflow: visible; max-width: initial; `}; - - &::before, - &::after { - content: ''; - position: absolute; - left: -1px; - top: -1px; - background: ${({ theme }) => - `linear-gradient(45deg, ${theme.primary1}, ${theme.primary2}, ${theme.primary3}, ${theme.bg4}, ${theme.primary1}, ${theme.primary2})`}; - background-size: 800%; - width: calc(100% + 2px); - height: calc(100% + 2px); - z-index: -1; - animation: glow 50s linear infinite; - transition: background-position 0.3s ease-in-out; - border-radius: 12px; - } - - &::after { - filter: blur(8px); - } - - &:hover::before, - &:hover::after { - animation: glow 12s linear infinite; - } - - // Stop glowing effect on claim page - ${({ isClaimPage }) => - isClaimPage && - css` - &::before, - &::after { - content: none; - } - `}; - } - - @keyframes glow { - 0% { - background-position: 0 0; - } - 50% { - background-position: 300% 0; - } - 100% { - background-position: 0 0; - } } ` -interface CowClaimButtonProps { - isClaimPage?: boolean | null | undefined +interface CowBalanceButtonProps { account?: string | null | undefined chainId: ChainId | undefined - handleOnClickClaim?: () => void + onClick?: () => void } -export default function CowClaimButton({ isClaimPage, account, chainId, handleOnClickClaim }: CowClaimButtonProps) { +export default function CowBalanceButton({ account, chainId, onClick }: CowBalanceButtonProps) { const vCowToken = chainId ? V_COW[chainId] : undefined const vCowBalance = useTokenBalance(account || undefined, vCowToken) @@ -102,7 +53,7 @@ export default function CowClaimButton({ isClaimPage, account, chainId, handleOn const formattedMaxVCowBalance = formatMax(vCowBalance, vCowToken?.decimals) return ( - + {formattedVCowBalance} vCOW diff --git a/src/custom/components/Header/index.tsx b/src/custom/components/Header/index.tsx index fc1b3bf402..dac674d7c9 100644 --- a/src/custom/components/Header/index.tsx +++ b/src/custom/components/Header/index.tsx @@ -1,7 +1,7 @@ import { useState, useEffect } from 'react' import { SupportedChainId as ChainId } from 'constants/chains' // import { ExternalLink } from 'theme' -import { useHistory, useLocation } from 'react-router-dom' +import { useHistory } from 'react-router-dom' import HeaderMod, { Title as TitleMod, @@ -44,7 +44,7 @@ import { import Modal from 'components/Modal' // import ClaimModal from 'components/claim/ClaimModal' import UniBalanceContent from 'components/Header/UniBalanceContent' -import CowClaimButton from 'components/CowClaimButton' +import CowBalanceButton from 'components/CowBalanceButton' export const NETWORK_LABELS: { [chainId in ChainId]?: string } = { [ChainId.RINKEBY]: 'Rinkeby', @@ -221,9 +221,6 @@ const VCowWrapper = styled(UNIWrapper)` ` export default function Header() { - const location = useLocation() - const isClaimPage = location.pathname === '/claim' - const { account, chainId: connectedChainId } = useActiveWeb3React() const chainId = supportedChainId(connectedChainId) @@ -242,7 +239,7 @@ export default function Header() { const isMenuOpen = useModalOpen(ApplicationModal.MENU) const history = useHistory() - const handleOnClickClaim = () => history.push('/claim') + const handleBalanceButtonClick = () => history.push('/profile') // 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. @@ -276,12 +273,7 @@ export default function Header() { - + @@ -303,7 +295,7 @@ export default function Header() { {darkMode ? : } - + {isOrdersPanelOpen && } diff --git a/src/custom/components/Menu/index.tsx b/src/custom/components/Menu/index.tsx index 0bb3af64db..b260b0b031 100644 --- a/src/custom/components/Menu/index.tsx +++ b/src/custom/components/Menu/index.tsx @@ -19,7 +19,7 @@ import { ApplicationModal } from 'state/application/reducer' import { getExplorerAddressLink } from 'utils/explorer' import { useHasOrders } from 'api/gnosisProtocol/hooks' import { useHistory } from 'react-router-dom' -import CowClaimButton, { Wrapper as ClaimButtonWrapper } from 'components/CowClaimButton' +import CowBalanceButton, { Wrapper as BalanceButtonWrapper } from 'components/CowBalanceButton' import twitterImage from 'assets/cow-swap/twitter.svg' import discordImage from 'assets/cow-swap/discord.svg' @@ -58,7 +58,7 @@ const MenuItemResponsive = styled(MenuItemResponsiveBase)` } ` -export const StyledMenu = styled(MenuMod)<{ isClaimPage: boolean }>` +export const StyledMenu = styled(MenuMod)` hr { margin: 15px 0; } @@ -98,7 +98,7 @@ export const StyledMenu = styled(MenuMod)<{ isClaimPage: boolean }>` padding: 0 6px 0 0; } - ${ClaimButtonWrapper} { + ${BalanceButtonWrapper} { margin: 0 0 12px; display: none; @@ -272,30 +272,23 @@ export const CloseMenu = styled.button` interface MenuProps { darkMode: boolean toggleDarkMode: () => void - isClaimPage: boolean } -export function Menu({ darkMode, toggleDarkMode, isClaimPage }: MenuProps) { +export function Menu({ darkMode, toggleDarkMode }: MenuProps) { const { account, chainId } = useActiveWeb3React() const hasOrders = useHasOrders(account) const showOrdersLink = account && hasOrders - /* const showVCOWClaimOption = Boolean(!!account && !!chainId) */ const close = useToggleModal(ApplicationModal.MENU) const history = useHistory() - const handleOnClickClaim = () => { + const handleBalanceButtonClick = () => { close() - history.push('/claim') + history.push('/profile') } return ( - + - + Swap From 17153e281ac8c6b4ea17fa90883ea28c42c32c41 Mon Sep 17 00:00:00 2001 From: nenadV91 Date: Tue, 5 Apr 2022 18:38:50 +0200 Subject: [PATCH 2/3] Added combined vCow-Cow balance --- .../components/CowBalanceButton/index.tsx | 16 +++++----- src/custom/state/cowToken/hooks.ts | 29 ++++++++++++++++++- 2 files changed, 35 insertions(+), 10 deletions(-) diff --git a/src/custom/components/CowBalanceButton/index.tsx b/src/custom/components/CowBalanceButton/index.tsx index d7a3376a98..09b19af6c3 100644 --- a/src/custom/components/CowBalanceButton/index.tsx +++ b/src/custom/components/CowBalanceButton/index.tsx @@ -1,8 +1,7 @@ import { Trans } from '@lingui/macro' import styled from 'styled-components/macro' import CowProtocolLogo from 'components/CowProtocolLogo' -import { useTokenBalance } from 'state/wallet/hooks' -import { V_COW } from 'constants/tokens' +import { useCombinedBalance } from 'state/cowToken/hooks' import { ChainId } from 'state/lists/actions/actionsMod' import { formatMax, formatSmartLocaleAware } from 'utils/format' import { AMOUNT_PRECISION } from 'constants/index' @@ -45,18 +44,17 @@ interface CowBalanceButtonProps { onClick?: () => void } -export default function CowBalanceButton({ account, chainId, onClick }: CowBalanceButtonProps) { - const vCowToken = chainId ? V_COW[chainId] : undefined - const vCowBalance = useTokenBalance(account || undefined, vCowToken) +export default function CowBalanceButton({ onClick }: CowBalanceButtonProps) { + const combinedBalance = useCombinedBalance() - const formattedVCowBalance = formatSmartLocaleAware(vCowBalance, AMOUNT_PRECISION) - const formattedMaxVCowBalance = formatMax(vCowBalance, vCowToken?.decimals) + const formattedBalance = formatSmartLocaleAware(combinedBalance, AMOUNT_PRECISION) + const formattedMaxBalance = formatMax(combinedBalance, AMOUNT_PRECISION) return ( - - {formattedVCowBalance} vCOW + + {formattedBalance} (v)COW ) diff --git a/src/custom/state/cowToken/hooks.ts b/src/custom/state/cowToken/hooks.ts index 6d30357dd4..a57cbca391 100644 --- a/src/custom/state/cowToken/hooks.ts +++ b/src/custom/state/cowToken/hooks.ts @@ -7,12 +7,13 @@ import { useVCowContract } from 'hooks/useContract' import { useActiveWeb3React } from 'hooks/web3' import { useSingleCallResult, Result } from 'state/multicall/hooks' import { useTransactionAdder } from 'state/enhancedTransactions/hooks' -import { V_COW } from 'constants/tokens' +import { V_COW, COW } from 'constants/tokens' import { AppState } from 'state' import { useAppDispatch, useAppSelector } from 'state/hooks' import { setSwapVCowStatus, SwapVCowStatus } from './actions' import { OperationType } from 'components/TransactionConfirmationModal' import { APPROVE_GAS_LIMIT_DEFAULT } from 'hooks/useApproveCallback/useApproveCallbackMod' +import { useTokenBalance } from 'state/wallet/hooks' export type SetSwapVCowStatusCallback = (payload: SwapVCowStatus) => void @@ -150,3 +151,29 @@ export function useSetSwapVCowStatus(): SetSwapVCowStatusCallback { export function useSwapVCowStatus() { return useAppSelector((state: AppState) => state.cowToken.swapVCowStatus) } + +/** + * Hook that returns COW balance + */ +export function useCowBalance() { + const { chainId, account } = useActiveWeb3React() + const cowToken = chainId ? COW[chainId] : undefined + return useTokenBalance(account || undefined, cowToken) +} + +/** + * Hook that returns combined vCOW + COW balance + */ +export function useCombinedBalance() { + const { total: vCowBalance } = useVCowData() + const cowBalance = useCowBalance() + + return useMemo(() => { + if (!vCowBalance || !cowBalance) { + return + } + + const sum = vCowBalance.asFraction.add(cowBalance.asFraction) + return CurrencyAmount.fromRawAmount(cowBalance.currency, sum.quotient) + }, [cowBalance, vCowBalance]) +} From cadd0b744de15d4b8faf7556fe9433d90404b77b Mon Sep 17 00:00:00 2001 From: nenadV91 Date: Wed, 6 Apr 2022 10:39:08 +0200 Subject: [PATCH 3/3] Remove the (v)COW text and set default 0 balance --- src/custom/components/CowBalanceButton/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/custom/components/CowBalanceButton/index.tsx b/src/custom/components/CowBalanceButton/index.tsx index 09b19af6c3..7a1c0ef242 100644 --- a/src/custom/components/CowBalanceButton/index.tsx +++ b/src/custom/components/CowBalanceButton/index.tsx @@ -54,7 +54,7 @@ export default function CowBalanceButton({ onClick }: CowBalanceButtonProps) { - {formattedBalance} (v)COW + {formattedBalance || 0} )