default badges
This commit is contained in:
parent
a699012a52
commit
579e9dca6c
|
@ -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
|
|
@ -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 |
|
@ -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 />
|
|
@ -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)
|
||||
|
|
Loading…
Reference in New Issue