Skip to content
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.

Sign up for GitHub

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

Profile: Add COW to Metamask: Waterfall PR[3] #378

Merged
merged 2 commits into from
Apr 6, 2022
Merged

Profile: Add COW to Metamask: Waterfall PR[3] #378

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eda9bf7
Add to metamask and vcow contract.
fairlighteth Apr 5, 2022
ba7624a
Profile: Buy COW token. Waterfall PR[4] (#379)
fairlighteth Apr 6, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions src/custom/components/AddToMetamask/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,10 @@ import MetaMaskLogo from 'assets/images/metamask.png'

export type AddToMetamaskProps = {
currency: Currency | undefined
shortLabel?: boolean
}

const ButtonCustom = styled.button`
export const ButtonCustom = styled.button`
display: flex;
flex: 1 1 auto;
align-self: center;
Expand Down Expand Up @@ -59,7 +60,7 @@ const CheckCircleCustom = styled(CheckCircle)`
`

export default function AddToMetamask(props: AddToMetamaskProps) {
const { currency } = props
const { currency, shortLabel } = props
const theme = useContext(ThemeContext)
const { library } = useActiveWeb3React()
const { addToken, success } = useAddTokenToMetamask(currency)
Expand All @@ -72,7 +73,7 @@ export default function AddToMetamask(props: AddToMetamaskProps) {
<ButtonCustom onClick={addToken}>
{!success ? (
<RowFixed>
<StyledIcon src={MetaMaskLogo} /> Add {currency.symbol} to Metamask
<StyledIcon src={MetaMaskLogo} /> {shortLabel ? 'Add Token' : `Add ${currency.symbol} to Metamask`}
</RowFixed>
) : (
<RowFixed>
Expand Down
43 changes: 32 additions & 11 deletions src/custom/pages/Profile/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,20 +45,21 @@ import CowImage from 'assets/cow-swap/cow_v2.svg'
import CowProtocolImage from 'assets/cow-swap/cowprotocol.svg'
import { useTokenBalance } from 'state/wallet/hooks'
import { useVCowData, useSwapVCowCallback, useSetSwapVCowStatus, useSwapVCowStatus } from 'state/cowToken/hooks'
import { COW_CONTRACT_ADDRESS, AMOUNT_PRECISION } from 'constants/index'
import { V_COW_CONTRACT_ADDRESS, COW_CONTRACT_ADDRESS, AMOUNT_PRECISION } from 'constants/index'
import { COW } from 'constants/tokens'
import { useErrorModal } from 'hooks/useErrorMessageAndModal'
import { OperationType } from 'components/TransactionConfirmationModal'
import useTransactionConfirmationModal from 'hooks/useTransactionConfirmationModal'
import { SwapVCowStatus } from 'state/cowToken/actions'
import MetamaskIcon from 'assets/images/metamask.png'
import {} from 'constants/index'
import AddToMetamask from 'components/AddToMetamask'
import { Link } from 'react-router-dom'
import CopyHelper from 'components/Copy'

const COW_DECIMALS = COW[ChainId.MAINNET].decimals

export default function Profile() {
const referralLink = useReferralLink()
const { account, chainId } = useActiveWeb3React()
const { account, chainId = ChainId.MAINNET, library } = useActiveWeb3React()
const { profileData, isLoading, error } = useFetchProfile()
const lastUpdated = useTimeAgo(profileData?.lastUpdated)
const isTradesTooltipVisible = account && chainId == 1 && !!profileData?.totalTrades
Expand Down Expand Up @@ -161,6 +162,8 @@ export default function Profile() {
</>
)

const currencyCOW = COW[chainId]

return (
<Container>
<TransactionConfirmationModal />
Expand Down Expand Up @@ -204,6 +207,15 @@ export default function Profile() {
)}
</ButtonPrimary>
</ConvertWrapper>

<CardActions>
<ExtLink href={getBlockExplorerUrl(chainId, V_COW_CONTRACT_ADDRESS[chainId], 'address')}>
Contract ↗
</ExtLink>
<CopyHelper toCopy={V_COW_CONTRACT_ADDRESS[chainId]}>
<div title="Click to copy token contract address">Copy contract</div>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

Are we sure we prefer to copy the contract address over sending the user to Etherscan?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In this case it was not added as a preference per se: You've got both options there (View Contract and Copy Contract).

Rather it was a ported action from the COW balance card, where if you are not connected with MetaMask we show you 'Copy Contract' instead of 'Add Token' as a fall back.

Discussed with @elena-zh that it might not make sense to have 'Add Token' (to MetaMask) for vCOW (given it's non transferable anyway..) but might be OK to have the 'Copy contract' action.

Let me know your thoughts.

</CopyHelper>
</CardActions>
</Card>
)}

Expand All @@ -216,13 +228,22 @@ export default function Profile() {
</span>
</BalanceDisplay>
<CardActions>
<ExtLink href={getBlockExplorerUrl(chainId || 1, COW_CONTRACT_ADDRESS[chainId || 1], 'address')}>
{chainId === ChainId.XDAI ? 'Blockscout' : 'Etherscan'} ↗
<ExtLink
title="View contract"
href={getBlockExplorerUrl(chainId, COW_CONTRACT_ADDRESS[chainId], 'address')}
>
Contract ↗
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

More than contract, could be View Token and send you to Etherscan Token page?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i.e.

https://etherscan.io/token/0xDEf1CA1fb7FBcDC777520aa7f396b4E015F497aB

https://blockscout.com/xdai/mainnet/token/0x177127622c4A00F3d409B75571e12cB3c8973d3c/token-transfers

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes that might be a better destination. Agree View Token looks more clear. Will check how it fits with the other labels.

</ExtLink>
<ExtLink href={'#'}>
<img src={MetamaskIcon} alt="MetaMask" width="15" height="14" /> Add to MetaMask
</ExtLink>
<ExtLink href={'#'}>Buy COW ↗</ExtLink>

{library?.provider?.isMetaMask && <AddToMetamask shortLabel currency={currencyCOW} />}

{!library?.provider?.isMetaMask && (
<CopyHelper toCopy={COW_CONTRACT_ADDRESS[chainId]}>
<div title="Click to copy token contract address">Copy contract</div>
</CopyHelper>
)}

<Link to={`/swap?outputCurrency=${COW_CONTRACT_ADDRESS[chainId]}`}>Buy COW</Link>
</CardActions>
</Card>

Expand Down Expand Up @@ -266,7 +287,7 @@ export default function Profile() {
)}
</Txt>
{hasOrders && (
<ExtLink href={getExplorerAddressLink(chainId || 1, account)}>
<ExtLink href={getExplorerAddressLink(chainId, account)}>
<Txt secondary>View all orders ↗</Txt>
</ExtLink>
)}
Expand Down
59 changes: 55 additions & 4 deletions src/custom/pages/Profile/styled.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import { BannerExplainer } from 'pages/Claim/styled'
import * as CSS from 'csstype'
import { transparentize } from 'polished'
import { ExternalLink } from 'theme'
import { ButtonCustom as AddToMetaMask } from 'components/AddToMetamask'
import { CopyIcon as ClickToCopy } from 'components/Copy'

export const Container = styled.div`
max-width: 910px;
Expand Down Expand Up @@ -263,6 +265,7 @@ export const Card = styled.div<{ showLoader?: boolean }>`
gap: 24px 0;
border-radius: 16px;
border: 1px solid ${({ theme }) => theme.cardBorder};
align-items: flex-end;

${({ showLoader, theme }) =>
showLoader &&
Expand Down Expand Up @@ -434,18 +437,66 @@ export const CardActions = styled.div`
display: flex;
flex-flow: row wrap;
justify-content: space-between;
margin: auto 0 0;

> a {
font-size: 14px;
${({ theme }) => theme.mediaWidth.upToSmall`
justify-content: center;
align-items: center;
flex-flow: column wrap;
gap: 32px 0;
margin: 12px 0;
`};

> a,
${AddToMetaMask}, > ${ClickToCopy} {
font-size: 13px;
height: 100%;
font-weight: 500;
margin: auto 0 0;
padding: 0;
line-height: 1;
color: ${({ theme }) => theme.text1};
display: flex;
align-items: flex-end;
text-decoration: underline;
text-decoration-color: transparent;
transition: text-decoration-color 0.2s ease-in-out, color 0.2s ease-in-out;

> img {
margin: 0 3px 0 0;
${({ theme }) => theme.mediaWidth.upToSmall`
font-size: 15px;
margin: 0 auto;
`};

&:hover {
text-decoration-color: ${({ theme }) => theme.primary1};
color: ${({ theme }) => theme.primary1};
}
}

${AddToMetaMask} {
border: 0;
min-height: initial;
border-radius: initial;

&:hover {
background: transparent;

> div {
text-decoration: underline;
}
}

> div > img,
> div > svg {
width: 15px;
margin: 0 6px 0 0;
}
}

> ${ClickToCopy} svg {
width: 15px;
margin: 0 4px 0 0;
}
`

export const BalanceDisplay = styled.div<{ titleSize?: number; altColor?: boolean; hAlign?: string }>`
Expand Down