Skip to content
This repository has been archived by the owner on Jun 24, 2022. It is now read-only.

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

Merged
merged 6 commits into from
Aug 20, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
49 changes: 0 additions & 49 deletions src/components/AccountDetails/Copy.tsx

This file was deleted.

2 changes: 1 addition & 1 deletion src/components/AccountDetails/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
5 changes: 5 additions & 0 deletions src/custom/components/AccountDetails/Transaction.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down
66 changes: 22 additions & 44 deletions src/custom/components/AccountDetails/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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}>
Expand Down Expand Up @@ -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 : ''}>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

ENSName or account should exist from the parent ternary. But added the empty string as the fallback here to satisfy the Copy type. Better solutions welcome. General aim is to consolidate code/markup as much as possible.

Copy link
Contributor

Choose a reason for hiding this comment

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

In this case, I think we want to always copy the address, no?
Even when ENS is present.
At least that was the default behaviour.

<Copy toCopy={account}>

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It's what I wondered too. I thought when there's the ENSName you perhaps want to copy the ENS Name instead? Otherwise can see it making sense to copy the address.

Copy link
Contributor

Choose a reason for hiding this comment

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

Hmm. Ok, I guess copying the ENS name makes sense when that's available.

There's still the link to etherscan below, so that should be enough for covering both cases.

<WalletNameAddress>{ENSName ? ENSName : account && shortenAddress(account)}</WalletNameAddress>
</Copy>
)}
</div>

<WalletActions>
Expand All @@ -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>

Expand Down
13 changes: 10 additions & 3 deletions src/custom/components/AccountDetails/styled.ts
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -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;

Expand Down
59 changes: 59 additions & 0 deletions src/custom/components/Copy/CopyMod.tsx
Original file line number Diff line number Diff line change
@@ -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>
</>
)
}
56 changes: 9 additions & 47 deletions src/custom/components/Copy/index.tsx
Original file line number Diff line number Diff line change
@@ -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'
24 changes: 22 additions & 2 deletions src/custom/components/Header/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@ import HeaderMod, {
Title,
HeaderLinks,
HeaderRow,
HeaderControls,
HeaderControls as HeaderControlsUni,
BalanceText as BalanceTextUni,
HeaderElement,
HideSmall,
BalanceText,
AccountElement,
HeaderElementWrap,
StyledNavLink as StyledNavLinkUni,
Expand Down Expand Up @@ -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;
Expand All @@ -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)`
Expand Down
2 changes: 1 addition & 1 deletion src/custom/pages/Rewards/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down