Orders Sidebar --> Click to copy move. (#1269)

* Click to copy move. * Icon wrapper remove. * Mobile header fixes. * Re-factor Copy component.
gnosis · Aug 20, 2021 · 52d52e0 · 52d52e0
1 parent 350135f
commit 52d52e0
Show file tree

Hide file tree

Showing 9 changed files with 129 additions and 147 deletions.
diff --git a/src/components/AccountDetails/Copy.tsx b/src/components/AccountDetails/Copy.tsx
diff --git a/src/components/AccountDetails/index.tsx b/src/components/AccountDetails/index.tsx
@@ -5,7 +5,7 @@ import { clearAllTransactions } from '../../state/transactions/actions'
 import { shortenAddress } from 'utils'
 import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
 import { AutoRow } from '../Row'
-import Copy from './Copy'
+import Copy from 'components/Copy'
 import Transaction from 'components/AccountDetails/Transaction'
 
 import { SUPPORTED_WALLETS } from 'constants/index'

diff --git a/src/custom/components/AccountDetails/Transaction.tsx b/src/custom/components/AccountDetails/Transaction.tsx
@@ -206,9 +206,14 @@ const TransactionStatusText = styled.div`
     margin: 0 auto 0 0;
   `};
 
+  &.copied,
   &:hover {
     text-decoration: none;
   }
+
+  &.copied {
+    background: red;
+  }
 `
 
 const StatusLabelWrapper = styled.div`

diff --git a/src/custom/components/AccountDetails/index.tsx b/src/custom/components/AccountDetails/index.tsx
@@ -6,7 +6,7 @@ import { AppDispatch } from 'state'
 import { clearAllTransactions } from 'state/transactions/actions'
 import { getExplorerLabel, shortenAddress } from 'utils'
 
-import Copy from 'components/AccountDetails/Copy'
+import Copy from 'components/Copy'
 import { Trans } from '@lingui/macro'
 
 import { SUPPORTED_WALLETS } from 'constants/index'
@@ -92,11 +92,7 @@ export function getStatusIcon(connector?: AbstractConnector, walletInfo?: Connec
       </IconWrapper>
     )
   } else if (connector === injected) {
-    return (
-      <IconWrapper size={16}>
-        <Identicon />
-      </IconWrapper>
-    )
+    return <Identicon />
   } else if (connector === walletconnect) {
     return (
       <IconWrapper size={16}>
@@ -182,7 +178,12 @@ export default function AccountDetails({
                 <NetworkCard title={NETWORK_LABELS[chainId]}>{NETWORK_LABELS[chainId]}</NetworkCard>
               )}
               {getStatusIcon(connector, walletInfo)}
-              <WalletNameAddress>{ENSName ? ENSName : account && shortenAddress(account)}</WalletNameAddress>
+
+              {(ENSName || account) && (
+                <Copy toCopy={ENSName ? ENSName : account ? account : ''}>
+                  <WalletNameAddress>{ENSName ? ENSName : account && shortenAddress(account)}</WalletNameAddress>
+                </Copy>
+              )}
             </div>
 
             <WalletActions>
@@ -204,43 +205,20 @@ export default function AccountDetails({
           </AccountControl>
         </AccountGroupingRow>
         <AccountGroupingRow>
-          {ENSName ? (
-            <>
-              <AccountControl>
-                <WalletLowerActions>
-                  {account && (
-                    <Copy toCopy={account}>
-                      <span style={{ marginLeft: '4px' }}>Copy Address</span>
-                    </Copy>
-                  )}
-                  {chainId && account && (
-                    <AddressLink hasENS={!!ENSName} isENS={true} href={getEtherscanLink(chainId, ENSName, 'address')}>
-                      <LinkIcon size={16} />
-                      <span style={{ marginLeft: '4px' }}>{explorerLabel}</span>
-                    </AddressLink>
-                  )}
-                </WalletLowerActions>
-              </AccountControl>
-            </>
-          ) : (
-            <>
-              <AccountControl>
-                <WalletLowerActions>
-                  {account && (
-                    <Copy toCopy={account}>
-                      <span style={{ marginLeft: '4px' }}>Copy Address</span>
-                    </Copy>
-                  )}
-                  {chainId && account && (
-                    <AddressLink hasENS={!!ENSName} isENS={false} href={getEtherscanLink(chainId, account, 'address')}>
-                      <LinkIcon size={16} />
-                      <span style={{ marginLeft: '4px' }}>{explorerLabel}</span>
-                    </AddressLink>
-                  )}
-                </WalletLowerActions>
-              </AccountControl>
-            </>
-          )}
+          <AccountControl>
+            <WalletLowerActions>
+              {chainId && account && (
+                <AddressLink
+                  hasENS={!!ENSName}
+                  isENS={ENSName ? true : false}
+                  href={getEtherscanLink(chainId, ENSName ? ENSName : account, 'address')}
+                >
+                  <LinkIcon size={16} />
+                  <span style={{ marginLeft: '4px' }}>{explorerLabel}</span>
+                </AddressLink>
+              )}
+            </WalletLowerActions>
+          </AccountControl>
         </AccountGroupingRow>
       </InfoCard>
 

diff --git a/src/custom/components/AccountDetails/styled.ts b/src/custom/components/AccountDetails/styled.ts
@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import { CopyIcon } from 'components/AccountDetails/Copy'
+import { CopyIcon, TransactionStatusText } from 'components/Copy'
 import { LinkStyledButton } from 'theme'
 import { NetworkCard as NetworkCardUni } from 'components/Header/HeaderMod'
 import {
@@ -51,13 +51,20 @@ export const Wrapper = styled.div`
     color: ${({ theme }) => theme.text1};
     opacity: 0.7;
     transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out;
+    margin: 0;
 
-    &:not(${WalletName}):hover {
+    &:hover {
       opacity: 1;
-      text-decoration: underline;
     }
   }
 
+  ${TransactionStatusText} {
+    order: 2;
+    margin: 0 0 0 8px;
+    align-self: center;
+    font-size: 21px;
+  }
+
   ${WalletName} {
     text-align: right;
 

diff --git a/src/custom/components/Copy/CopyMod.tsx b/src/custom/components/Copy/CopyMod.tsx
@@ -0,0 +1,59 @@
+import React from 'react'
+import styled from 'styled-components/macro'
+import useCopyClipboard from 'hooks/useCopyClipboard'
+
+import { LinkStyledButton } from 'theme'
+import { CheckCircle, Copy } from 'react-feather'
+import { Trans } from '@lingui/macro'
+import { TransactionStatusText } from 'components/Copy' // mod
+
+export const CopyIcon = styled(LinkStyledButton)`
+  color: ${({ theme }) => theme.text3};
+  flex-shrink: 0;
+  display: flex;
+  text-decoration: none;
+  font-size: 0.825rem;
+  :hover,
+  :active,
+  :focus {
+    text-decoration: none;
+    color: ${({ theme }) => theme.text2};
+  }
+`
+
+/* const TransactionStatusText = styled.span`
+  margin-left: 0.25rem;
+  font-size: 0.825rem;
+  ${({ theme }) => theme.flexRowNoWrap};
+  align-items: center;
+` */
+
+export default function CopyHelper(props: { toCopy: string; children?: React.ReactNode; clickableLink?: boolean }) {
+  const { toCopy, children, clickableLink } = props
+  const [isCopied, setCopied] = useCopyClipboard()
+
+  return (
+    <>
+      {clickableLink && <LinkStyledButton onClick={() => setCopied(toCopy)}>{toCopy}</LinkStyledButton>}
+      <CopyIcon onClick={() => setCopied(toCopy)}>
+        {isCopied ? (
+          <TransactionStatusText
+            isCopied={isCopied} // mod
+          >
+            <CheckCircle size={'16'} />
+            <TransactionStatusText
+              isCopied={isCopied} // mod
+            >
+              <Trans>Copied</Trans>
+            </TransactionStatusText>
+          </TransactionStatusText>
+        ) : (
+          <TransactionStatusText>
+            <Copy size={'16'} />
+          </TransactionStatusText>
+        )}
+        {isCopied ? '' : children}
+      </CopyIcon>
+    </>
+  )
+}
diff --git a/src/custom/components/Copy/index.tsx b/src/custom/components/Copy/index.tsx
@@ -1,53 +1,15 @@
-import React from 'react'
 import styled from 'styled-components/macro'
-import useCopyClipboard from 'hooks/useCopyClipboard'
+import { CopyIcon } from './CopyMod'
 
-import { LinkStyledButton } from 'theme'
-import { CheckCircle, Copy } from 'react-feather'
-import { Trans } from '@lingui/macro'
-
-export const CopyIcon = styled(LinkStyledButton)`
-  color: ${({ theme }) => theme.text3};
-  flex-shrink: 0;
-  display: flex;
-  text-decoration: none;
-  font-size: 0.825rem;
-  :hover,
-  :active,
-  :focus {
-    text-decoration: none;
-    color: ${({ theme }) => theme.text2};
-  }
-`
-const TransactionStatusText = styled.span`
-  margin-left: 0.25rem;
-  font-size: 0.825rem;
+export const TransactionStatusText = styled.span<{ isCopied?: boolean }>`
+  color: ${({ theme, isCopied }) => (isCopied ? theme.green1 : theme.text3)};
   ${({ theme }) => theme.flexRowNoWrap};
   align-items: center;
-`
 
-export default function CopyHelper(props: { toCopy: string; children?: React.ReactNode; clickableLink?: boolean }) {
-  const { toCopy, children, clickableLink } = props
-  const [isCopied, setCopied] = useCopyClipboard()
+  ${CopyIcon} {
+    color: ${({ theme, isCopied }) => (isCopied ? theme.green1 : theme.text3)};
+  }
+`
 
-  return (
-    <>
-      {clickableLink && <LinkStyledButton onClick={() => setCopied(toCopy)}>{toCopy}</LinkStyledButton>}
-      <CopyIcon onClick={() => setCopied(toCopy)}>
-        {isCopied ? (
-          <TransactionStatusText>
-            <CheckCircle size={'16'} />
-            <TransactionStatusText>
-              <Trans>Copied</Trans>
-            </TransactionStatusText>
-          </TransactionStatusText>
-        ) : (
-          <TransactionStatusText>
-            <Copy size={'16'} />
-          </TransactionStatusText>
-        )}
-        {isCopied ? '' : children}
-      </CopyIcon>
-    </>
-  )
-}
+export * from './CopyMod'
+export { default } from './CopyMod'
diff --git a/src/custom/components/Header/index.tsx b/src/custom/components/Header/index.tsx
@@ -8,10 +8,10 @@ import HeaderMod, {
   Title,
   HeaderLinks,
   HeaderRow,
-  HeaderControls,
+  HeaderControls as HeaderControlsUni,
+  BalanceText as BalanceTextUni,
   HeaderElement,
   HideSmall,
-  BalanceText,
   AccountElement,
   HeaderElementWrap,
   StyledNavLink as StyledNavLinkUni,
@@ -59,6 +59,18 @@ const StyledNavLink = styled(StyledNavLinkUni)`
   }
 `
 
+const BalanceText = styled(BalanceTextUni)`
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    display: none;
+  `};
+`
+
+const HeaderControls = styled(HeaderControlsUni)`
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    max-width: 100%;
+  `};
+`
+
 export const HeaderModWrapper = styled(HeaderMod)`
   ${Title} {
     margin: 0;
@@ -74,6 +86,14 @@ export const HeaderModWrapper = styled(HeaderMod)`
 const NetworkCard = styled(NetworkCardUni)`
   background-color: ${({ theme }) => theme.networkCard.background};
   color: ${({ theme }) => theme.networkCard.text};
+
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    margin: 0 0 0 8px;
+  `};
+
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    display: none;
+  `};
 `
 
 const TwitterLink = styled(StyledMenuButton)`

diff --git a/src/custom/pages/Rewards/index.tsx b/src/custom/pages/Rewards/index.tsx
@@ -3,7 +3,7 @@ import Page, { Title, Content, GdocsListStyle } from 'components/Page'
 import styled from 'styled-components'
 import { Trans } from '@lingui/macro'
 import CowsImg from 'assets/images/cows.png'
-import CopyHelper from '@src/components/AccountDetails/Copy'
+import CopyHelper from 'components/Copy'
 
 const ButtonGroup = styled.div`
   display: flex;