diff --git a/src/custom/pages/Profile/index.tsx b/src/custom/pages/Profile/index.tsx index f71cc7d7db..54ad5a401d 100644 --- a/src/custom/pages/Profile/index.tsx +++ b/src/custom/pages/Profile/index.tsx @@ -54,12 +54,13 @@ import useTransactionConfirmationModal from 'hooks/useTransactionConfirmationMod import { SwapVCowStatus } from 'state/cowToken/actions' 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, library } = useActiveWeb3React() const { profileData, isLoading, error } = useFetchProfile() const lastUpdated = useTimeAgo(profileData?.lastUpdated) const isTradesTooltipVisible = account && chainId == 1 && !!profileData?.totalTrades @@ -210,6 +211,9 @@ export default function Profile() { Contract ↗ + +
Copy contract
+
)} @@ -223,11 +227,22 @@ export default function Profile() { - + Contract ↗ - + {library?.provider?.isMetaMask && ( + + )} + + {!library?.provider?.isMetaMask && ( + +
Copy contract
+
+ )} Buy COW
diff --git a/src/custom/pages/Profile/styled.tsx b/src/custom/pages/Profile/styled.tsx index 1dc4412cef..c6edaec647 100644 --- a/src/custom/pages/Profile/styled.tsx +++ b/src/custom/pages/Profile/styled.tsx @@ -6,6 +6,7 @@ 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; @@ -438,11 +439,21 @@ export const CardActions = styled.div` justify-content: space-between; margin: auto 0 0; + ${({ theme }) => theme.mediaWidth.upToSmall` + justify-content: center; + align-items: center; + flex-flow: column wrap; + gap: 32px 0; + margin: 12px 0; + `}; + > a, - ${AddToMetaMask} { + ${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; @@ -451,6 +462,11 @@ export const CardActions = styled.div` text-decoration-color: transparent; transition: text-decoration-color 0.2s ease-in-out, color 0.2s ease-in-out; + ${({ theme }) => theme.mediaWidth.upToSmall` + font-size: 15px; + margin: 0 auto; + `}; + &:hover { text-decoration-color: ${({ theme }) => theme.primary1}; color: ${({ theme }) => theme.primary1}; @@ -459,9 +475,7 @@ export const CardActions = styled.div` ${AddToMetaMask} { border: 0; - padding: 0; min-height: initial; - margin: 0; border-radius: initial; &:hover { @@ -478,6 +492,11 @@ export const CardActions = styled.div` 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 }>`