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

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

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c00ce53
Click to copy move.
Aug 17, 2021
73f0d4e
Icon wrapper remove.
Aug 17, 2021
2d3419b
Merge branch 'orders-panel-1' of gno.github.com:gnosis/cowswap into o…
Aug 17, 2021
6d6f333
Merge branch 'orders-panel-1' of gno.github.com:gnosis/cowswap into o…
Aug 18, 2021
1eb0417
Mobile header fixes.
Aug 18, 2021
d22769f
Re-factor Copy component.
Aug 19, 2021
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
2 changes: 1 addition & 1 deletion src/components/AccountDetails/Copy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export const CopyIcon = styled(LinkStyledButton)`
color: ${({ theme }) => theme.text2};
}
`
const TransactionStatusText = styled.span`
export const TransactionStatusText = styled.span`
margin-left: 0.25rem;
font-size: 0.825rem;
${({ theme }) => theme.flexRowNoWrap};
Expand Down
64 changes: 21 additions & 43 deletions src/custom/components/AccountDetails/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
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
9 changes: 8 additions & 1 deletion src/custom/components/AccountDetails/styled.ts
View file
Open in desktop
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/AccountDetails/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 {
opacity: 1;
text-decoration: underline;
}
}

${TransactionStatusText} {
order: 2;
margin: 0 0 0 8px;
align-self: center;
}

${WalletName} {
text-align: right;

Expand Down