Profile: Conditional 'Add Token' vs 'Copy contract address': Waterfal…

…l 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
cowprotocol · Apr 6, 2022 · fe65eaa · fe65eaa
1 parent bfb7a5f
commit fe65eaa
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 6 deletions.
diff --git 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() {
               <ExtLink href={getBlockExplorerUrl(chainId || 1, V_COW_CONTRACT_ADDRESS[chainId || 1], 'address')}>
                 Contract ↗
               </ExtLink>
+              <CopyHelper toCopy={V_COW_CONTRACT_ADDRESS[chainId || 1]}>
+                <div title="Click to copy token contract address">Copy contract</div>
+              </CopyHelper>
             </CardActions>
           </Card>
         )}
@@ -223,11 +227,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 || 1, COW_CONTRACT_ADDRESS[chainId || 1], 'address')}
+            >
               Contract ↗
             </ExtLink>
 
-            <AddToMetamask shortLabel={true} currency={COW[chainId || 1] as Currency | undefined} />
+            {library?.provider?.isMetaMask && (
+              <AddToMetamask shortLabel={true} currency={COW[chainId || 1] as Currency | undefined} />
+            )}
+
+            {!library?.provider?.isMetaMask && (
+              <CopyHelper toCopy={COW_CONTRACT_ADDRESS[chainId || 1]}>
+                <div title="Click to copy token contract address">Copy contract</div>
+              </CopyHelper>
+            )}
 
             <Link to={`/swap?outputCurrency=${COW_CONTRACT_ADDRESS[chainId || 1]}`}>Buy COW</Link>
           </CardActions>

diff --git 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 }>`