Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

UI header and navigation for DXswap #56

Merged
merged 12 commits into from
Oct 29, 2020
Merged

UI header and navigation for DXswap #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
7ea216d
refactor(settings-button): Merge menu component into settings component
Oct 28, 2020
1721326
feat(header): Governance link with coming soon badge
Oct 28, 2020
1f060eb
refactor(wallet-icons): Remove wallet icon used as identicon
Oct 28, 2020
82edb47
refactor(header): Remove bottom border from header
Oct 28, 2020
ede5115
refactor(header): Minow style changes in header icon and main logo
Oct 28, 2020
b7958e6
fix(header): Fix coMMing soon typo
Oct 28, 2020
a37af9f
fix(navigation-ui): Fix ui display for smaller screens
Oct 29, 2020
ae5fdfd
fix(header): Make governence link not clickable
Oct 29, 2020
caf74d9
chore(header): Add TODO for badge style to convert to component
Oct 29, 2020
862408a
refactor(header-ui): Hide link with badge instead of external link in…
Oct 29, 2020
95979a8
feat(settings): Center settings options on small screens
Oct 29, 2020
2937c38
fix(settings): Display settings more vertically aligned
Oct 29, 2020
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
9 changes: 0 additions & 9 deletions src/assets/images/coinbaseWalletIcon.svg
View file
Open in desktop

This file was deleted.

Binary file removed src/assets/images/fortmaticIcon.png
View file
Open in desktop
Binary file not shown.
Binary file removed src/assets/images/portisIcon.png
View file
Open in desktop
Binary file not shown.
9 changes: 0 additions & 9 deletions src/assets/images/walletConnectIcon.svg
View file
Open in desktop

This file was deleted.

93 changes: 1 addition & 92 deletions src/components/AccountDetails/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,9 @@ import { AutoRow } from '../Row'
import Copy from './Copy'
import Transaction from './Transaction'

import { SUPPORTED_WALLETS } from '../../constants'
import { ReactComponent as Close } from '../../assets/images/x.svg'
import { getEtherscanLink } from '../../utils'
import { injected, walletconnect, walletlink, fortmatic, portis } from '../../connectors'
import CoinbaseWalletIcon from '../../assets/images/coinbaseWalletIcon.svg'
import WalletConnectIcon from '../../assets/images/walletConnectIcon.svg'
import FortmaticIcon from '../../assets/images/fortmaticIcon.png'
import PortisIcon from '../../assets/images/portisIcon.png'
import Identicon from '../Identicon'
import { injected, walletlink } from '../../connectors'
import { ButtonSecondary } from '../Button'
import { ExternalLink as LinkIcon } from 'react-feather'
import { ExternalLink, LinkStyledButton, TYPE } from '../../theme'
Expand Down Expand Up @@ -158,28 +152,6 @@ const CloseColor = styled(Close)`
}
`

const WalletName = styled.div`
width: initial;
font-size: 0.825rem;
font-weight: 500;
color: ${({ theme }) => theme.text3};
`

const IconWrapper = styled.div<{ size?: number }>`
${({ theme }) => theme.flexColumnNoWrap};
align-items: center;
justify-content: center;
margin-right: 8px;
& > img,
span {
height: ${({ size }) => (size ? size + 'px' : '32px')};
width: ${({ size }) => (size ? size + 'px' : '32px')};
}
${({ theme }) => theme.mediaWidth.upToMedium`
align-items: flex-end;
`};
`

const TransactionListWrapper = styled.div`
${({ theme }) => theme.flexColumnNoWrap};
`
Expand All @@ -196,10 +168,6 @@ const WalletAction = styled(ButtonSecondary)`
}
`

const MainWalletAction = styled(WalletAction)`
color: ${({ theme }) => theme.primary1};
`

function renderTransactions(transactions: string[]) {
return (
<TransactionListWrapper>
Expand Down Expand Up @@ -229,62 +197,6 @@ export default function AccountDetails({
const theme = useContext(ThemeContext)
const dispatch = useDispatch<AppDispatch>()

function formatConnectorName() {
const { ethereum } = window
const isMetaMask = !!(ethereum && ethereum.isMetaMask)
const name = Object.keys(SUPPORTED_WALLETS)
.filter(
k =>
SUPPORTED_WALLETS[k].connector === connector && (connector !== injected || isMetaMask === (k === 'METAMASK'))
)
.map(k => SUPPORTED_WALLETS[k].name)[0]
return <WalletName>Connected with {name}</WalletName>
}

function getStatusIcon() {
if (connector === injected) {
return (
<IconWrapper size={16}>
<Identicon />
</IconWrapper>
)
} else if (connector === walletconnect) {
return (
<IconWrapper size={16}>
<img src={WalletConnectIcon} alt={'wallet connect logo'} />
</IconWrapper>
)
} else if (connector === walletlink) {
return (
<IconWrapper size={16}>
<img src={CoinbaseWalletIcon} alt={'coinbase wallet logo'} />
</IconWrapper>
)
} else if (connector === fortmatic) {
return (
<IconWrapper size={16}>
<img src={FortmaticIcon} alt={'fortmatic logo'} />
</IconWrapper>
)
} else if (connector === portis) {
return (
<>
<IconWrapper size={16}>
<img src={PortisIcon} alt={'portis logo'} />
<MainWalletAction
onClick={() => {
portis.portis.showPortis()
}}
>
Show Portis
</MainWalletAction>
</IconWrapper>
</>
)
}
return null
}

const clearAllTransactionsCallback = useCallback(() => {
if (chainId) dispatch(clearAllTransactions({ chainId }))
}, [dispatch, chainId])
Expand All @@ -300,7 +212,6 @@ export default function AccountDetails({
<YourAccount>
<InfoCard>
<AccountGroupingRow>
{formatConnectorName()}
<div>
{connector !== injected && connector !== walletlink && (
<WalletAction
Expand All @@ -327,14 +238,12 @@ export default function AccountDetails({
{ENSName ? (
<>
<div>
{getStatusIcon()}
<p> {ENSName}</p>
</div>
</>
) : (
<>
<div>
{getStatusIcon()}
<p> {account && shortenAddress(account)}</p>
</div>
</>
Expand Down
Loading