mirror of
https://github.com/status-im/safe-react.git
synced 2025-01-11 02:25:40 +00:00
Bug: Use link tag instead of javascript navigation in apps list (#1770)
* Use list instead of programmable navigation * move color style to appcard * use color from theme * add declaration for styled-components theme
This commit is contained in:
Mikhail Mikheev
GitHub
parent
8a774f2e66
commit
1a50b59404
@ -15,6 +15,7 @@ const StyledAppCard = styled(Card)`
|
||||
height: 232px !important;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
color: ${({ theme }) => theme.colors.secondary};
|
||||
|
||||
:hover {
|
||||
box-shadow: 1px 2px 16px 0 ${({ theme }) => fade(theme.colors.shadow.color, 0.35)};
|
||||
|
||||
@ -6,7 +6,7 @@ import { GenericModal, IconText, Loader, Menu } from '@gnosis.pm/safe-react-comp
|
||||
import { safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
|
||||
import AppCard from 'src/routes/safe/components/Apps/components/AppCard'
|
||||
import AddAppIcon from 'src/routes/safe/components/Apps/assets/addApp.svg'
|
||||
import { useRouteMatch, useHistory } from 'react-router-dom'
|
||||
import { useRouteMatch, Link } from 'react-router-dom'
|
||||
import { SAFELIST_ADDRESS } from 'src/routes/routes'
|
||||
|
||||
import { useAppList } from '../hooks/useAppList'
|
||||
@ -19,6 +19,10 @@ const Wrapper = styled.div`
|
||||
flex-direction: column;
|
||||
`
|
||||
|
||||
const StyledLink = styled(Link)`
|
||||
text-decoration: none;
|
||||
`
|
||||
|
||||
const centerCSS = css`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -53,17 +57,11 @@ const Breadcrumb = styled.div`
|
||||
`
|
||||
|
||||
const AppsList = (): React.ReactElement => {
|
||||
const history = useHistory()
|
||||
const matchSafeWithAddress = useRouteMatch<{ safeAddress: string }>({ path: `${SAFELIST_ADDRESS}/:safeAddress` })
|
||||
const safeAddress = useSelector(safeParamAddressFromStateSelector)
|
||||
const { appList } = useAppList()
|
||||
const [isAddAppModalOpen, setIsAddAppModalOpen] = useState<boolean>(false)
|
||||
|
||||
const onAddAppHandler = (url: string) => () => {
|
||||
const goToApp = `${matchSafeWithAddress?.url}/apps?appUrl=${encodeURI(url)}`
|
||||
history.push(goToApp)
|
||||
}
|
||||
|
||||
const openAddAppModal = () => setIsAddAppModalOpen(true)
|
||||
|
||||
const closeAddAppModal = () => setIsAddAppModalOpen(false)
|
||||
@ -92,14 +90,9 @@ const AppsList = (): React.ReactElement => {
|
||||
{appList
|
||||
.filter((a) => a.fetchStatus !== SAFE_APP_FETCH_STATUS.ERROR)
|
||||
.map((a) => (
|
||||
<AppCard
|
||||
isLoading={isAppLoading(a)}
|
||||
key={a.url}
|
||||
iconUrl={a.iconUrl}
|
||||
name={a.name}
|
||||
description={a.description}
|
||||
onClick={onAddAppHandler(a.url)}
|
||||
/>
|
||||
<StyledLink key={a.url} to={`${matchSafeWithAddress?.url}/apps?appUrl=${encodeURI(a.url)}`}>
|
||||
<AppCard isLoading={isAppLoading(a)} iconUrl={a.iconUrl} name={a.name} description={a.description} />
|
||||
</StyledLink>
|
||||
))}
|
||||
</CardsWrapper>
|
||||
|
||||
|
||||
9
src/types/definitions.d.ts
vendored
9
src/types/definitions.d.ts
vendored
@ -1,3 +1,8 @@
|
||||
import 'styled-components'
|
||||
import { theme } from '@gnosis.pm/safe-react-components'
|
||||
|
||||
type Theme = typeof theme
|
||||
|
||||
export {}
|
||||
declare global {
|
||||
interface Window {
|
||||
@ -10,3 +15,7 @@ declare global {
|
||||
}
|
||||
declare module '@openzeppelin/contracts/build/contracts/ERC721'
|
||||
declare module 'currency-flags/dist/currency-flags.min.css'
|
||||
|
||||
declare module 'styled-components' {
|
||||
export interface DefaultTheme extends Theme {} // eslint-disable-line
|
||||
}
|
||||
|
||||
47
yarn.lock
47
yarn.lock
@ -3558,18 +3558,6 @@
|
||||
semver "^7.3.2"
|
||||
tsutils "^3.17.1"
|
||||
|
||||
"@typescript-eslint/experimental-utils@4.12.0":
|
||||
version "4.12.0"
|
||||
resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.12.0.tgz#372838e76db76c9a56959217b768a19f7129546b"
|
||||
integrity sha512-MpXZXUAvHt99c9ScXijx7i061o5HEjXltO+sbYfZAAHxv3XankQkPaNi5myy0Yh0Tyea3Hdq1pi7Vsh0GJb0fA==
|
||||
dependencies:
|
||||
"@types/json-schema" "^7.0.3"
|
||||
"@typescript-eslint/scope-manager" "4.12.0"
|
||||
"@typescript-eslint/types" "4.12.0"
|
||||
"@typescript-eslint/typescript-estree" "4.12.0"
|
||||
eslint-scope "^5.0.0"
|
||||
eslint-utils "^2.0.0"
|
||||
|
||||
"@typescript-eslint/experimental-utils@4.13.0", "@typescript-eslint/experimental-utils@^4.0.1":
|
||||
version "4.13.0"
|
||||
resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.13.0.tgz#9dc9ab375d65603b43d938a0786190a0c72be44e"
|
||||
@ -3603,14 +3591,6 @@
|
||||
"@typescript-eslint/typescript-estree" "4.13.0"
|
||||
debug "^4.1.1"
|
||||
|
||||
"@typescript-eslint/scope-manager@4.12.0":
|
||||
version "4.12.0"
|
||||
resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.12.0.tgz#beeb8beca895a07b10c593185a5612f1085ef279"
|
||||
integrity sha512-QVf9oCSVLte/8jvOsxmgBdOaoe2J0wtEmBr13Yz0rkBNkl5D8bfnf6G4Vhox9qqMIoG7QQoVwd2eG9DM/ge4Qg==
|
||||
dependencies:
|
||||
"@typescript-eslint/types" "4.12.0"
|
||||
"@typescript-eslint/visitor-keys" "4.12.0"
|
||||
|
||||
"@typescript-eslint/scope-manager@4.13.0":
|
||||
version "4.13.0"
|
||||
resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.13.0.tgz#5b45912a9aa26b29603d8fa28f5e09088b947141"
|
||||
@ -3624,11 +3604,6 @@
|
||||
resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-3.10.1.tgz#1d7463fa7c32d8a23ab508a803ca2fe26e758727"
|
||||
integrity sha512-+3+FCUJIahE9q0lDi1WleYzjCwJs5hIsbugIgnbB+dSCYUxl8L6PwmsyOPFZde2hc1DlTo/xnkOgiTLSyAbHiQ==
|
||||
|
||||
"@typescript-eslint/types@4.12.0":
|
||||
version "4.12.0"
|
||||
resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.12.0.tgz#fb891fe7ccc9ea8b2bbd2780e36da45d0dc055e5"
|
||||
integrity sha512-N2RhGeheVLGtyy+CxRmxdsniB7sMSCfsnbh8K/+RUIXYYq3Ub5+sukRCjVE80QerrUBvuEvs4fDhz5AW/pcL6g==
|
||||
|
||||
"@typescript-eslint/types@4.13.0":
|
||||
version "4.13.0"
|
||||
resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.13.0.tgz#6a7c6015a59a08fbd70daa8c83dfff86250502f8"
|
||||
@ -3648,20 +3623,6 @@
|
||||
semver "^7.3.2"
|
||||
tsutils "^3.17.1"
|
||||
|
||||
"@typescript-eslint/typescript-estree@4.12.0":
|
||||
version "4.12.0"
|
||||
resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.12.0.tgz#3963418c850f564bdab3882ae23795d115d6d32e"
|
||||
integrity sha512-gZkFcmmp/CnzqD2RKMich2/FjBTsYopjiwJCroxqHZIY11IIoN0l5lKqcgoAPKHt33H2mAkSfvzj8i44Jm7F4w==
|
||||
dependencies:
|
||||
"@typescript-eslint/types" "4.12.0"
|
||||
"@typescript-eslint/visitor-keys" "4.12.0"
|
||||
debug "^4.1.1"
|
||||
globby "^11.0.1"
|
||||
is-glob "^4.0.1"
|
||||
lodash "^4.17.15"
|
||||
semver "^7.3.2"
|
||||
tsutils "^3.17.1"
|
||||
|
||||
"@typescript-eslint/typescript-estree@4.13.0":
|
||||
version "4.13.0"
|
||||
resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.13.0.tgz#cf6e2207c7d760f5dfd8d18051428fadfc37b45e"
|
||||
@ -3683,14 +3644,6 @@
|
||||
dependencies:
|
||||
eslint-visitor-keys "^1.1.0"
|
||||
|
||||
"@typescript-eslint/visitor-keys@4.12.0":
|
||||
version "4.12.0"
|
||||
resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.12.0.tgz#a470a79be6958075fa91c725371a83baf428a67a"
|
||||
integrity sha512-hVpsLARbDh4B9TKYz5cLbcdMIOAoBYgFPCSP9FFS/liSF+b33gVNq8JHY3QGhHNVz85hObvL7BEYLlgx553WCw==
|
||||
dependencies:
|
||||
"@typescript-eslint/types" "4.12.0"
|
||||
eslint-visitor-keys "^2.0.0"
|
||||
|
||||
"@typescript-eslint/visitor-keys@4.13.0":
|
||||
version "4.13.0"
|
||||
resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.13.0.tgz#9acb1772d3b3183182b6540d3734143dce9476fe"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user