From 11e5b3e0c3447ec0e69faa71ec78995e2a47a619 Mon Sep 17 00:00:00 2001 From: Kristie Huang Date: Tue, 5 Jul 2022 13:11:40 -0400 Subject: [PATCH 1/3] feat: desaturate & opacity for unapproved tokens` --- src/components/TokenImg.tsx | 4 +++- src/components/TokenSelect/TokenButton.tsx | 5 +++-- src/components/TokenSelect/index.tsx | 23 +++++++++++++++++++++- 3 files changed, 28 insertions(+), 4 deletions(-) diff --git a/src/components/TokenImg.tsx b/src/components/TokenImg.tsx index 11dc3dde1..0a0ce5c2c 100644 --- a/src/components/TokenImg.tsx +++ b/src/components/TokenImg.tsx @@ -43,7 +43,7 @@ function TokenImg({ token, ...rest }: TokenImgProps) { return {alt} } -export default styled(TokenImg)<{ size?: number }>` +export default styled(TokenImg)<{ size?: number; unapproved?: boolean }>` // radial-gradient calculates distance from the corner, not the edge: divide by sqrt(2) background: radial-gradient( ${({ theme }) => theme.module} calc(100% / ${Math.sqrt(2)} - 1.5px), @@ -52,4 +52,6 @@ export default styled(TokenImg)<{ size?: number }>` border-radius: 100%; height: ${({ size }) => size || 1}em; width: ${({ size }) => size || 1}em; + + ${({ unapproved }) => unapproved && 'filter: grayscale(100%) opacity(60%)'} ` diff --git a/src/components/TokenSelect/TokenButton.tsx b/src/components/TokenSelect/TokenButton.tsx index bff20b394..b83a149a0 100644 --- a/src/components/TokenSelect/TokenButton.tsx +++ b/src/components/TokenSelect/TokenButton.tsx @@ -41,10 +41,11 @@ interface TokenButtonProps { value?: Currency collapsed: boolean disabled?: boolean + isUnapprovedToken?: boolean onClick: () => void } -export default function TokenButton({ value, collapsed, disabled, onClick }: TokenButtonProps) { +export default function TokenButton({ value, collapsed, disabled, isUnapprovedToken, onClick }: TokenButtonProps) { const buttonBackgroundColor = useMemo(() => (value ? 'interactive' : 'accent'), [value]) const contentColor = useMemo(() => (value || disabled ? 'onInteractive' : 'onAccent'), [value, disabled]) @@ -85,7 +86,7 @@ export default function TokenButton({ value, collapsed, disabled, onClick }: Tok > {value ? ( <> - + {value.symbol} ) : ( diff --git a/src/components/TokenSelect/index.tsx b/src/components/TokenSelect/index.tsx index 62ca97df9..6d7ff428e 100644 --- a/src/components/TokenSelect/index.tsx +++ b/src/components/TokenSelect/index.tsx @@ -1,10 +1,15 @@ import { t, Trans } from '@lingui/macro' import { Currency } from '@uniswap/sdk-core' +import { useIsPendingApproval } from 'components/Swap/SwapButton/useApprovalData' +import { useSwapInfo } from 'hooks/swap' +import { useSwapRouterAddress } from 'hooks/swap/useSwapApproval' import useActiveWeb3React from 'hooks/useActiveWeb3React' +import { ApprovalState, useApprovalStateForSpender } from 'hooks/useApproval' import { useCurrencyBalances } from 'hooks/useCurrencyBalance' import useNativeCurrency from 'hooks/useNativeCurrency' import useTokenList, { useIsTokenListLoaded, useQueryTokens } from 'hooks/useTokenList' import { ElementRef, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react' +import { Field } from 'state/swap' import styled from 'styled-components/macro' import { ThemedText } from 'theme' @@ -137,9 +142,25 @@ export default memo(function TokenSelect({ value, collapsed, disabled, onSelect }, [onSelect, setOpen] ) + + const { + [Field.INPUT]: { currency, amount: amountIn }, + trade, + } = useSwapInfo() + const isInputToken = value && currency?.equals(value) + const approvalState = useApprovalStateForSpender(amountIn, useSwapRouterAddress(trade.trade), useIsPendingApproval) + const isUnapprovedToken = + isInputToken && (approvalState === ApprovalState.NOT_APPROVED || approvalState === ApprovalState.PENDING) + return ( <> - + {open && setOpen(false)} />} ) From b6805306df3c6d7398597186657f56531db0b277 Mon Sep 17 00:00:00 2001 From: Kristie Huang Date: Wed, 6 Jul 2022 12:02:59 -0400 Subject: [PATCH 2/3] fix: use approve & permit --- src/components/TokenSelect/index.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/TokenSelect/index.tsx b/src/components/TokenSelect/index.tsx index 6d7ff428e..a1b782ce5 100644 --- a/src/components/TokenSelect/index.tsx +++ b/src/components/TokenSelect/index.tsx @@ -2,7 +2,7 @@ import { t, Trans } from '@lingui/macro' import { Currency } from '@uniswap/sdk-core' import { useIsPendingApproval } from 'components/Swap/SwapButton/useApprovalData' import { useSwapInfo } from 'hooks/swap' -import { useSwapRouterAddress } from 'hooks/swap/useSwapApproval' +import { ApproveOrPermitState, useApproveOrPermit, useSwapRouterAddress } from 'hooks/swap/useSwapApproval' import useActiveWeb3React from 'hooks/useActiveWeb3React' import { ApprovalState, useApprovalStateForSpender } from 'hooks/useApproval' import { useCurrencyBalances } from 'hooks/useCurrencyBalance' @@ -146,11 +146,11 @@ export default memo(function TokenSelect({ value, collapsed, disabled, onSelect const { [Field.INPUT]: { currency, amount: amountIn }, trade, + slippage, } = useSwapInfo() const isInputToken = value && currency?.equals(value) - const approvalState = useApprovalStateForSpender(amountIn, useSwapRouterAddress(trade.trade), useIsPendingApproval) - const isUnapprovedToken = - isInputToken && (approvalState === ApprovalState.NOT_APPROVED || approvalState === ApprovalState.PENDING) + const { approvalState } = useApproveOrPermit(trade.trade, slippage.allowed, useIsPendingApproval, amountIn) + const isUnapprovedToken = isInputToken && approvalState !== ApproveOrPermitState.APPROVED return ( <> From 3198eaee18f2ceba3c975a036d65798175069080 Mon Sep 17 00:00:00 2001 From: Lint Action Date: Wed, 6 Jul 2022 16:03:59 +0000 Subject: [PATCH 3/3] style(lint): lint action with ESLint --- src/components/TokenSelect/index.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/TokenSelect/index.tsx b/src/components/TokenSelect/index.tsx index a1b782ce5..55325910e 100644 --- a/src/components/TokenSelect/index.tsx +++ b/src/components/TokenSelect/index.tsx @@ -2,9 +2,8 @@ import { t, Trans } from '@lingui/macro' import { Currency } from '@uniswap/sdk-core' import { useIsPendingApproval } from 'components/Swap/SwapButton/useApprovalData' import { useSwapInfo } from 'hooks/swap' -import { ApproveOrPermitState, useApproveOrPermit, useSwapRouterAddress } from 'hooks/swap/useSwapApproval' +import { ApproveOrPermitState, useApproveOrPermit } from 'hooks/swap/useSwapApproval' import useActiveWeb3React from 'hooks/useActiveWeb3React' -import { ApprovalState, useApprovalStateForSpender } from 'hooks/useApproval' import { useCurrencyBalances } from 'hooks/useCurrencyBalance' import useNativeCurrency from 'hooks/useNativeCurrency' import useTokenList, { useIsTokenListLoaded, useQueryTokens } from 'hooks/useTokenList'