From eda9bf74b494721285a075100df570fef093c7d9 Mon Sep 17 00:00:00 2001
From: fairlighteth <31534717+fairlighteth@users.noreply.github.com>
Date: Tue, 5 Apr 2022 18:28:38 +0100
Subject: [PATCH 1/2] Add to metamask and vcow contract.

---
 src/custom/components/AddToMetamask/index.tsx |  2 +-
 src/custom/pages/Profile/index.tsx            | 20 +++++++-----
 src/custom/pages/Profile/styled.tsx           | 31 ++++++++++++++++---
 3 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/src/custom/components/AddToMetamask/index.tsx b/src/custom/components/AddToMetamask/index.tsx
index cf2abdd72a..bd754bbb98 100644
--- a/src/custom/components/AddToMetamask/index.tsx
+++ b/src/custom/components/AddToMetamask/index.tsx
@@ -12,7 +12,7 @@ export type AddToMetamaskProps = {
   currency: Currency | undefined
 }
 
-const ButtonCustom = styled.button`
+export const ButtonCustom = styled.button`
   display: flex;
   flex: 1 1 auto;
   align-self: center;
diff --git a/src/custom/pages/Profile/index.tsx b/src/custom/pages/Profile/index.tsx
index bcf99b8d7a..a595c499e6 100644
--- a/src/custom/pages/Profile/index.tsx
+++ b/src/custom/pages/Profile/index.tsx
@@ -1,4 +1,5 @@
 import { useCallback } from 'react'
+import { Currency } from '@uniswap/sdk-core'
 import { Txt } from 'assets/styles/styled'
 import {
   FlexCol,
@@ -45,14 +46,13 @@ 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'
 
 const COW_DECIMALS = COW[ChainId.MAINNET].decimals
 
@@ -204,6 +204,12 @@ export default function Profile() {
                 )}
               </ButtonPrimary>
             </ConvertWrapper>
+
+            <CardActions>
+              <ExtLink href={getBlockExplorerUrl(chainId || 1, V_COW_CONTRACT_ADDRESS[chainId || 1], 'address')}>
+                Contract ↗
+              </ExtLink>
+            </CardActions>
           </Card>
         )}
 
@@ -217,11 +223,11 @@ export default function Profile() {
           </BalanceDisplay>
           <CardActions>
             <ExtLink href={getBlockExplorerUrl(chainId || 1, COW_CONTRACT_ADDRESS[chainId || 1], 'address')}>
-              {chainId === ChainId.XDAI ? 'Blockscout' : 'Etherscan'} ↗
-            </ExtLink>
-            <ExtLink href={'#'}>
-              <img src={MetamaskIcon} alt="MetaMask" width="15" height="14" /> Add to MetaMask
+              Contract ↗
             </ExtLink>
+
+            <AddToMetamask currency={COW[chainId || 1] as Currency | undefined} />
+
             <ExtLink href={'#'}>Buy COW ↗</ExtLink>
           </CardActions>
         </Card>
diff --git a/src/custom/pages/Profile/styled.tsx b/src/custom/pages/Profile/styled.tsx
index 641bb276ad..51d19a091f 100644
--- a/src/custom/pages/Profile/styled.tsx
+++ b/src/custom/pages/Profile/styled.tsx
@@ -5,6 +5,7 @@ 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'
 
 export const Container = styled.div`
   max-width: 910px;
@@ -263,6 +264,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 &&
@@ -434,16 +436,37 @@ export const CardActions = styled.div`
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
+  margin: auto 0 0;
 
-  > a {
-    font-size: 14px;
+  > a,
+  ${AddToMetaMask} {
+    font-size: 13px;
+    height: 100%;
+    font-weight: 500;
     line-height: 1;
     color: ${({ theme }) => theme.text1};
     display: flex;
     align-items: flex-end;
+  }
+
+  ${AddToMetaMask} {
+    border: 0;
+    padding: 0;
+    min-height: initial;
+    margin: 0;
+    border-radius: initial;
+
+    &:hover {
+      background: transparent;
+
+      > div {
+        text-decoration: underline;
+      }
+    }
 
-    > img {
-      margin: 0 3px 0 0;
+    > div > img {
+      width: 15px;
+      margin: 0 6px 0 0;
     }
   }
 `

From ba7624a102678ecb523b65909b5fa7ed45ee2e16 Mon Sep 17 00:00:00 2001
From: fairlight <31534717+fairlighteth@users.noreply.github.com>
Date: Wed, 6 Apr 2022 19:44:16 +0100
Subject: [PATCH 2/2] Profile: Buy COW token. Waterfall PR[4]  (#379)

* Buy COW route

* Profile: Orange link hover and shorter Add to Metamask label: Waterfall PR[5] (#381)

* Orange link on hover.

* Add shorter label option.

* Profile: Conditional 'Add Token' vs 'Copy contract address': Waterfall PR[6] (#383)

* Detect MetaMask: conditional AddToMetaMask button

* Click to copy token contract address.

* Profile: Make elements responsive: Waterfall PR[7] (#384)

* Mobile responsive.

* Mobile responsive fix + add copy contract vCOW

* Use string directly

* Replace 1 by ChainId

* Add check

* Set default mainnet chain when deconstructing.

* Update src/custom/pages/Profile/index.tsx

Co-authored-by: dave <david.sato64@gmail.com>

* Remove conditional check

Co-authored-by: dave <david.sato64@gmail.com>

Co-authored-by: dave <david.sato64@gmail.com>
---
 src/custom/components/AddToMetamask/index.tsx |  5 +--
 src/custom/pages/Profile/index.tsx            | 29 +++++++++++----
 src/custom/pages/Profile/styled.tsx           | 36 ++++++++++++++++---
 3 files changed, 57 insertions(+), 13 deletions(-)

diff --git a/src/custom/components/AddToMetamask/index.tsx b/src/custom/components/AddToMetamask/index.tsx
index bd754bbb98..da5ad40594 100644
--- a/src/custom/components/AddToMetamask/index.tsx
+++ b/src/custom/components/AddToMetamask/index.tsx
@@ -10,6 +10,7 @@ import MetaMaskLogo from 'assets/images/metamask.png'
 
 export type AddToMetamaskProps = {
   currency: Currency | undefined
+  shortLabel?: boolean
 }
 
 export const ButtonCustom = styled.button`
@@ -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)
@@ -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>
diff --git a/src/custom/pages/Profile/index.tsx b/src/custom/pages/Profile/index.tsx
index a595c499e6..f587d8aaed 100644
--- a/src/custom/pages/Profile/index.tsx
+++ b/src/custom/pages/Profile/index.tsx
@@ -1,5 +1,4 @@
 import { useCallback } from 'react'
-import { Currency } from '@uniswap/sdk-core'
 import { Txt } from 'assets/styles/styled'
 import {
   FlexCol,
@@ -53,12 +52,14 @@ import { OperationType } from 'components/TransactionConfirmationModal'
 import useTransactionConfirmationModal from 'hooks/useTransactionConfirmationModal'
 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 = ChainId.MAINNET, library } = useActiveWeb3React()
   const { profileData, isLoading, error } = useFetchProfile()
   const lastUpdated = useTimeAgo(profileData?.lastUpdated)
   const isTradesTooltipVisible = account && chainId == 1 && !!profileData?.totalTrades
@@ -161,6 +162,8 @@ export default function Profile() {
     </>
   )
 
+  const currencyCOW = COW[chainId]
+
   return (
     <Container>
       <TransactionConfirmationModal />
@@ -206,9 +209,12 @@ export default function Profile() {
             </ConvertWrapper>
 
             <CardActions>
-              <ExtLink href={getBlockExplorerUrl(chainId || 1, V_COW_CONTRACT_ADDRESS[chainId || 1], 'address')}>
+              <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>
+              </CopyHelper>
             </CardActions>
           </Card>
         )}
@@ -222,13 +228,22 @@ export default function Profile() {
             </span>
           </BalanceDisplay>
           <CardActions>
-            <ExtLink href={getBlockExplorerUrl(chainId || 1, COW_CONTRACT_ADDRESS[chainId || 1], 'address')}>
+            <ExtLink
+              title="View contract"
+              href={getBlockExplorerUrl(chainId, COW_CONTRACT_ADDRESS[chainId], 'address')}
+            >
               Contract ↗
             </ExtLink>
 
-            <AddToMetamask currency={COW[chainId || 1] as Currency | undefined} />
+            {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>
+            )}
 
-            <ExtLink href={'#'}>Buy COW ↗</ExtLink>
+            <Link to={`/swap?outputCurrency=${COW_CONTRACT_ADDRESS[chainId]}`}>Buy COW</Link>
           </CardActions>
         </Card>
 
@@ -272,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>
                   )}
diff --git a/src/custom/pages/Profile/styled.tsx b/src/custom/pages/Profile/styled.tsx
index 51d19a091f..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,22 +439,43 @@ 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;
     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;
+
+    ${({ theme }) => theme.mediaWidth.upToSmall`
+      font-size: 15px;
+      margin: 0 auto;
+    `};
+
+    &:hover {
+      text-decoration-color: ${({ theme }) => theme.primary1};
+      color: ${({ theme }) => theme.primary1};
+    }
   }
 
   ${AddToMetaMask} {
     border: 0;
-    padding: 0;
     min-height: initial;
-    margin: 0;
     border-radius: initial;
 
     &:hover {
@@ -464,11 +486,17 @@ export const CardActions = styled.div`
       }
     }
 
-    > div > img {
+    > 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 }>`