default badges

This commit is contained in:
Mikhail Mikheev 2019-09-18 18:40:53 +04:00
parent a699012a52
commit 579e9dca6c
4 changed files with 77 additions and 14 deletions

View File

@ -0,0 +1,36 @@
// @flow
import * as React from 'react'
import { makeStyles } from '@material-ui/core/styles'
import Img from '~/components/layout/Img'
import Block from '~/components/layout/Block'
import Paragraph from '~/components/layout/Paragraph'
import { primary, sm } from '~/theme/variables'
import StarIcon from './assets/star.svg'
const useStyles = makeStyles({
container: {
background: primary,
padding: '5px',
boxSizing: 'border-box',
width: '73px',
justifyContent: 'space-around',
marginLeft: sm,
color: '#fff',
borderRadius: '3px',
},
})
const DefaultBadge = () => {
const classes = useStyles()
return (
<Block align="left" className={classes.container}>
<Img src={StarIcon} alt="Star Icon" />
<Paragraph noMargin size="xs">
default
</Paragraph>
</Block>
)
}
export default DefaultBadge

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
<path fill="#FFF" fill-rule="nonzero" d="M6 0L3.852 3.336 0 4.344l2.52 3.084-.228 3.972L6 9.954 9.708 11.4 9.48 7.428 12 4.344 8.148 3.336 6 0zM4.428 4.8c.372 0 .672.3.672.678 0 .371-.3.672-.672.672a.672.672 0 0 1-.678-.672c0-.378.3-.678.678-.678zm3.15 0c.372 0 .672.3.672.678 0 .371-.3.672-.672.672a.672.672 0 0 1-.678-.672c0-.378.3-.678.678-.678zM4.2 7.5h3.6a1.95 1.95 0 0 1-3.6 0z"/>
</svg>

After

Width:  |  Height:  |  Size: 482 B

View File

@ -14,14 +14,16 @@ import Identicon from '~/components/Identicon'
import {
mediumFontSize, sm, secondary, primary,
} from '~/theme/variables'
import { shortVersionOf } from '~/logic/wallets/ethAddresses'
import { shortVersionOf, sameAddress } from '~/logic/wallets/ethAddresses'
import { type Safe } from '~/routes/safe/store/models/safe'
import { SAFELIST_ADDRESS } from '~/routes/routes'
import DefaultBadge from './DefaultBadge'
type SafeListProps = {
safes: List<Safe>,
onSafeClick: Function,
setDefaultSafe: Function,
defaultSafe: string,
}
const useStyles = makeStyles({
@ -39,9 +41,15 @@ const useStyles = makeStyles({
color: primary,
fontSize: mediumFontSize,
},
makeDefaultBtn: {
padding: 0,
marginLeft: sm,
},
})
const SafeList = ({ safes, onSafeClick, setDefaultSafe }: SafeListProps) => {
const SafeList = ({
safes, onSafeClick, setDefaultSafe, defaultSafe,
}: SafeListProps) => {
const classes = useStyles()
return (
@ -63,14 +71,22 @@ const SafeList = ({ safes, onSafeClick, setDefaultSafe }: SafeListProps) => {
{' '}
ETH
</Paragraph>
<ButtonLink
size="sm"
onClick={() => {
setDefaultSafe(safe.address)
}}
>
Make default
</ButtonLink>
{sameAddress(defaultSafe, safe.address) ? (
<DefaultBadge />
) : (
<ButtonLink
className={classes.makeDefaultBtn}
size="sm"
onClick={(e) => {
e.preventDefault()
e.stopPropagation()
setDefaultSafe(safe.address)
}}
>
Make default
</ButtonLink>
)}
</ListItem>
</Link>
<Hairline />

View File

@ -13,7 +13,7 @@ import Spacer from '~/components/Spacer'
import Hairline from '~/components/layout/Hairline'
import Row from '~/components/layout/Row'
import { type Safe } from '~/routes/safe/store/models/safe'
import { safesListSelector } from '~/routes/safeList/store/selectors'
import { safesListSelector, defaultSafeSelector } from '~/routes/safeList/store/selectors'
import setDefaultSafe from '~/routes/safe/store/actions/setDefaultSafe'
import useSidebarStyles from './style'
import SafeList from './SafeList'
@ -35,6 +35,7 @@ type SidebarProps = {
children: React.Node,
safes: List<Safe>,
setDefaultSafeAction: Function,
defaultSafe: string,
}
const filterBy = (filter: string, safes: List<Safe>): List<Safe> => safes.filter(
@ -43,7 +44,9 @@ const filterBy = (filter: string, safes: List<Safe>): List<Safe> => safes.filter
|| safe.name.toLowerCase().includes(filter.toLowerCase()),
)
const Sidebar = ({ children, safes, setDefaultSafeAction }: SidebarProps) => {
const Sidebar = ({
children, safes, setDefaultSafeAction, defaultSafe,
}: SidebarProps) => {
const [isOpen, setIsOpen] = useState<boolean>(false)
const [filter, setFilter] = useState<string>('')
const classes = useSidebarStyles()
@ -112,7 +115,12 @@ const Sidebar = ({ children, safes, setDefaultSafeAction }: SidebarProps) => {
<Spacer />
</Row>
<Hairline />
<SafeList safes={filteredSafes} onSafeClick={toggleSidebar} setDefaultSafe={setDefaultSafeAction} />
<SafeList
safes={filteredSafes}
onSafeClick={toggleSidebar}
setDefaultSafe={setDefaultSafeAction}
defaultSafe={defaultSafe}
/>
</Drawer>
</ClickAwayListener>
{children}
@ -122,6 +130,6 @@ const Sidebar = ({ children, safes, setDefaultSafeAction }: SidebarProps) => {
export default connect<Object, Object, ?Function, ?Object>(
// $FlowFixMe
(state) => ({ safes: safesListSelector(state) }),
(state) => ({ safes: safesListSelector(state), defaultSafe: defaultSafeSelector(state) }),
{ setDefaultSafeAction: setDefaultSafe },
)(Sidebar)