From 1a50b59404e03952f8e0dc6c03eee2336667729e Mon Sep 17 00:00:00 2001 From: Mikhail Mikheev Date: Wed, 13 Jan 2021 17:28:10 +0400 Subject: [PATCH 1/2] 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 --- .../Apps/components/AppCard/index.tsx | 1 + .../components/Apps/components/AppsList.tsx | 23 ++++----- src/types/definitions.d.ts | 9 ++++ yarn.lock | 47 ------------------- 4 files changed, 18 insertions(+), 62 deletions(-) diff --git a/src/routes/safe/components/Apps/components/AppCard/index.tsx b/src/routes/safe/components/Apps/components/AppCard/index.tsx index a28053d0..234e6116 100644 --- a/src/routes/safe/components/Apps/components/AppCard/index.tsx +++ b/src/routes/safe/components/Apps/components/AppCard/index.tsx @@ -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)}; diff --git a/src/routes/safe/components/Apps/components/AppsList.tsx b/src/routes/safe/components/Apps/components/AppsList.tsx index 89933d2b..378e4780 100644 --- a/src/routes/safe/components/Apps/components/AppsList.tsx +++ b/src/routes/safe/components/Apps/components/AppsList.tsx @@ -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(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) => ( - + + + ))} diff --git a/src/types/definitions.d.ts b/src/types/definitions.d.ts index e153daf5..c4022c69 100644 --- a/src/types/definitions.d.ts +++ b/src/types/definitions.d.ts @@ -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 +} diff --git a/yarn.lock b/yarn.lock index 74f066ad..86b9265f 100644 --- a/yarn.lock +++ b/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" From 188dc8091289c64552a89b111e343cda29f96ddc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= Date: Fri, 15 Jan 2021 16:06:05 -0300 Subject: [PATCH 2/2] Fix asset value column alignment (#1778) --- src/routes/safe/components/Balances/Coins/styles.ts | 1 - src/routes/safe/components/Balances/dataFetcher.ts | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/safe/components/Balances/Coins/styles.ts b/src/routes/safe/components/Balances/Coins/styles.ts index 5df6bf51..3c10059d 100644 --- a/src/routes/safe/components/Balances/Coins/styles.ts +++ b/src/routes/safe/components/Balances/Coins/styles.ts @@ -46,7 +46,6 @@ export const styles = createStyles({ marginRight: sm, }, currencyValueRow: { - maxWidth: '125px', textAlign: 'right', }, }) diff --git a/src/routes/safe/components/Balances/dataFetcher.ts b/src/routes/safe/components/Balances/dataFetcher.ts index c7a3f2d4..e950560e 100644 --- a/src/routes/safe/components/Balances/dataFetcher.ts +++ b/src/routes/safe/components/Balances/dataFetcher.ts @@ -105,6 +105,7 @@ export const generateColumns = (): List => { const value: TableColumn = { id: BALANCE_TABLE_VALUE_ID, + align: 'right', order: true, label: 'Value', custom: false,