[Epic] Dashboard #3696

katspaugh · 2022-03-17T17:50:24Z

What it solves

Resolves #3693

Figma: https://www.figma.com/file/Y9HUUDQzrbOtMpC3Nye3lt/Safe-Dashboard?node-id=2%3A26

Adds a dashboard view for safes that includes a number of widgets:

Overview widget
Featured Apps widget
Pending Transactions widget
Safe Apps widget

How to test

Open the Safe app
Select a safe
Observe being navigated to the dashboard view
Observe widgets arranged in a grid layout

Screenshots

github-actions · 2022-03-17T17:50:39Z

CLA Assistant Lite All Contributors have signed the CLA.

github-actions · 2022-03-17T17:54:24Z

ESLint Summary View Full Report

Annotations are provided inline on the Files Changed tab. You can also see all annotations that were generated on the annotations page.

Type	Occurrences	Fixable
Errors	0	0
Warnings	0	0
Ignored	0	N/A

Result: ✅ success
Annotations: 0 total

^{Report generated by eslint-plus-action}

github-actions · 2022-03-17T17:58:06Z

Deployment links

🟠 Rinkeby	⚪ Mainnet	🟣 Polygon	🟡 BSC	⚫ Arbitrum	🟢 Gnosis Chain

src/routes/index.tsx

coveralls · 2022-03-17T18:10:31Z

Pull Request Test Coverage Report for Build 2200754342

32 of 203 (15.76%) changed or added relevant lines in 26 files are covered.
155 unchanged lines in 13 files lost coverage.
Overall coverage decreased (-0.4%) to 35.157%

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
src/components/SafeListSidebar/SafeList/SafeListItem.tsx	0	1	0.0%
src/routes/Home/index.tsx	0	1	0.0%
src/routes/routes.ts	2	3	66.67%
src/routes/safe/components/Apps/components/ConfirmTxModal/ReviewConfirm.tsx	0	1	0.0%
src/routes/safe/components/Settings/RemoveSafeModal/index.tsx	0	1	0.0%
src/routes/safe/components/Transactions/TxList/TxCollapsed.tsx	1	2	50.0%
src/logic/collectibles/sources/Gnosis.ts	0	2	0.0%
src/components/Dashboard/AddSafe.tsx	0	3	0.0%
src/logic/collectibles/store/actions/fetchCollectibles.ts	0	3	0.0%
src/logic/collectibles/store/reducer/collectibles.ts	2	5	40.0%

Files with Coverage Reduction	New Missed Lines	%
src/logic/collectibles/store/actions/fetchCollectibles.ts	1	9.09%
src/routes/safe/components/Apps/components/AppFrame.tsx	1	0%
src/routes/safe/components/Apps/components/ConfirmTxModal/ReviewConfirm.tsx	1	86.0%
src/utils/constants.ts	1	92.31%
src/logic/addressBook/hooks/useAddressBookSync.ts	2	0%
src/logic/safe/store/actions/utils.ts	8	75.0%
src/logic/contracts/spendingLimitContracts.ts	9	21.43%
src/logic/addressBook/store/reducer/index.ts	10	45.1%
src/routes/opening/index.tsx	10	7.58%
src/routes/safe/components/Settings/SpendingLimit/RemoveLimitModal.tsx	10	0%

Totals
Change from base Build 2155065673:	-0.4%
Covered Lines:	3579
Relevant Lines:	9217

💛 - Coveralls

github-actions · 2022-03-30T10:16:00Z

ESLint Summary View Full Report

Annotations are provided inline on the Files Changed tab. You can also see all annotations that were generated on the annotations page.

Type	Occurrences	Fixable
Errors	0	0
Warnings	0	0
Ignored	1	N/A

Result: ✅ success
Annotations: 0 total

^{Report generated by eslint-plus-action}

github-actions · 2022-04-07T09:39:35Z

ESLint Summary View Full Report

Annotations are provided inline on the Files Changed tab. You can also see all annotations that were generated on the annotations page.

Type	Occurrences	Fixable
Errors	0	0
Warnings	0	0
Ignored	5	N/A

Result: ✅ success
Annotations: 0 total

^{Report generated by eslint-plus-action}

* feat: Add safe specific dashboard route * fix: Redirect user to Dashboard when adding/loading/removing a safe * fix: Remove old dashboard route * fix: Move Dashboard component inside SafeContainer to access transactions * fix: Remove null fallback for wrapInSuspense, remove unnecessary React reference

* feat: pending transactions widget * refactor: split PendingTxs component * fix: code review remarks * fix: change selectedSafe type * fix: rename loading state variable in useOwnerSafes * feat: fetch Redux queued txs in the Dashboard * fix: revert changes in useOwnerSafes * fix: use Skeleton component from MUI * fix: return a spacer component instead of null for some TxInfo * style: tweak the UI of the Skeleton component and PendingTxListItem * fix: fetch store from inside the widget Co-authored-by: Aaron Cook <[email protected]> * fix: move location of PendingTxs files * fix: parametrize MAX_TXS_DISPLAY from the Dashboard component * fix: display one queued transaction per nonce * Refactor how txns are mapped Co-authored-by: Aaron Cook <[email protected]> Co-authored-by: katspaugh <[email protected]>

* feat: Add Safe route for dashboard (#3759) * feat: Add safe specific dashboard route * fix: Redirect user to Dashboard when adding/loading/removing a safe * fix: Remove old dashboard route * fix: Move Dashboard component inside SafeContainer to access transactions * fix: Remove null fallback for wrapInSuspense, remove unnecessary React reference * feat: add harcoded WC app * Add a redirect for Safe Apps + Bookmark handler * feat: display "official" apps after pinned apps * Add "Explore" Card * refactor: extract official app idss to enum * fix: render after safe apps info response * fix: import explore icon as module * fix: remove duplicated safe apps * fix: memoize safeApps data * fix: change useMemo dependency * fix: move related data inside the same function. Use hook isLoading. * fix: GENERIC_APPS_ROUTE route * feat: track timestamp when opening safeApp * feat: track openingCount when opening safeApp * feat: track txCount when creating a transaction from ReviewConfirm * fix: keep previous data when tracking on opening * fix: Adds ranking function for tracked safe apps * fix: unify rankTrackedSafeApps input types * fix: change localstorage prefered module * feat: display top ranked apps * fix: track opening SafeApp in a separate hook * fix: move app count tracking to a separate module * chore: Add comments to the sorting formula * chore: move app usage related functions to the same file * fix: improve the setItem in the LS logic * feat: add Skeleton Cards * fix: remove breadcrumbs in Dashboard * feat: always display the "Explore" card * rename safe app tracking methods. extract card dimensions to constants * include random apps to fill the gaps in the widget * prop drill the safeApp number id * code comments clean up * fix: make logo height fix to align SafeApp name Co-authored-by: Usame Algan <[email protected]> Co-authored-by: katspaugh <[email protected]> Co-authored-by: Usame Algan <[email protected]>

* feat: Add Safe route for dashboard (#3759) * feat: Add safe specific dashboard route * fix: Redirect user to Dashboard when adding/loading/removing a safe * fix: Remove old dashboard route * fix: Move Dashboard component inside SafeContainer to access transactions * fix: Remove null fallback for wrapInSuspense, remove unnecessary React reference * feat: Add Overview widget for dashboard * fix: Remove Load Safe Button * fix: Add loading state for safe record, show skeleton ui for overview widget * fix: Reset safe loading state when switching safes * fix: Reset nft token loaded state when switching safes * fix: await all dispatches in fetchSafe before setting loaded state, add skeletons * fix: Split up loading state and dont reset it for nfts anymore * fix: dispatch array type * fix: Split nft token actions, reset nft loaded state before they are refetched

* feat: Add featured apps widget to dashboard * refactor: Extract getSafeAppUrl * fix: Filter apps by tags * fix: Update gateway sdk package and remove old type * fix: Update gateway sdk package and remove old type * refactor: Extract featured apps const * fix: Check for tags if they exist

* wip layout * feat: Adjust Dashboard layout * fix: remove leftover prop * fix: NFT route, style container spacings * style: Adjust Overview widget style * style: Remove row, col from featured apps widget, adjust spacings * Add total transactions to sign to the PendingTxs widget title * Add view all Link * tune spacing in TxPendingListItem * fix: Remove hardcoded featured app ids, use lodash sampleSize to get random apps, adjust grid layout * fix: React prop errors * style: Adjust overview skeleton container size * style: Adjust pending txs spacing * tweaks in grid layout * fix: Update comment Co-authored-by: Diogo Soares <[email protected]>

…just empty state for pending txs widget

francovenica · 2022-04-22T12:14:59Z

Looks really good.

The only thing I found is that the "pin" icon is always the "unpinned" one, even if the app is pinned in the Apps section, so basically you can only pin apps from the dashboard. If this intended let me know

Question: I that there is no GTM track at all here. Is that out of the scope of this ticket I assume. Is there another ticket for that? or we are releasing it without any tracking at first?
cc @johannesmoormann

francovenica · 2022-04-22T16:05:38Z

Let me know if the "pin" icons of my last comment is something that should be fixed. If not, I'd agree to pass this ticket to DONE and check it in the release branch

katspaugh · 2022-04-22T17:36:05Z

Definitely need to fix them.

github-actions · 2022-04-24T10:04:15Z

ESLint Summary View Full Report

Annotations are provided inline on the Files Changed tab. You can also see all annotations that were generated on the annotations page.

Type	Occurrences	Fixable
Errors	0	0
Warnings	0	0
Ignored	5	N/A

Result: ✅ success
Annotations: 0 total

^{Report generated by eslint-plus-action}

liliya-soroka · 2022-04-25T09:19:02Z

Could we use some default icon if the safe app logo is not loaded properly?

* fix: exclude featured safe apps from top ranked * fix overlap in featured apps * style: Pending txs widget height * style: switch bookmark icons to src * style: vertical scroll in transactions view adjusted for new spacings * fix: Remove pinned apps local state * style: Hide featured apps widget if none exist * fix: Set app fallback image * fix: Adjust widget titles, revert app layout spacing * style: Adjust app frame margin for larger spaces Co-authored-by: Usame Algan <[email protected]>

usame-algan · 2022-04-25T11:43:01Z

Could we use some default icon if the safe app logo is not loaded properly?

Good idea! Added the same fallback image that we use in the safe list view.

Let me know if the "pin" icons of my last comment is something that should be fixed.

The state of pinned apps should be displayed correctly now .

francovenica · 2022-04-25T12:17:05Z

the Pin/UnPin works fine now, but the Icons are different from the ones in the Apps section. Is this intended? I think they should be the same, or at least I don't see the reason to have 2 different type of icons

katspaugh · 2022-04-25T12:19:07Z

@francovenica it's based on the latest design, the Apps will have this button soon as well.

lukasschor · 2022-04-25T13:01:16Z

With the Queue / History being now also sub-sections in the sidebar, should we remove the tabs at the top at some point? Instead I would add the current section after the "/" in the breadcrumbs, same as in settings.

francovenica · 2022-04-25T14:29:12Z

Dashboard look good to go to a release branch

Note: We are just waiting for a fix that removes a border in the Apps section that we decided to do it here so we can ship everyting

iamacook approved these changes Mar 17, 2022

View reviewed changes

src/routes/index.tsx Outdated Show resolved Hide resolved

src/routes/index.tsx Outdated Show resolved Hide resolved

katspaugh force-pushed the epic-dashboard branch from 290f8de to 8dd80ee Compare March 29, 2022 09:14

DiogoSoaress force-pushed the epic-dashboard branch from 8dd80ee to 2e08cd6 Compare March 30, 2022 10:13

katspaugh and others added 5 commits April 12, 2022 14:55

Epic: Dashboard

0e9865a

Dashboard: create/add safe widgets (#3763)

d7be0cb

fix: move PendingTxs components to Dashboard folder

a4dfa0f

usame-algan force-pushed the epic-dashboard branch from e66fbf4 to a4dfa0f Compare April 12, 2022 12:58

usame-algan and others added 7 commits April 12, 2022 16:15

feat: Add Home button to sidebar navigation (#3788)

990caee

style: Adjust font-size and bookmark icon size for safe apps grid, ad…

8aec3fe

…just empty state for pending txs widget

Chore: rm unused dashboard widgets (#3805)

0366857

johannesmoormann mentioned this pull request Apr 21, 2022

[EPIC] Safe Dashboard #3693

Closed

6 tasks

fix: show last queued in grouped transactions

2a8a2eb

usame-algan added 2 commits April 25, 2022 14:47

style: Adjust app frame height for new spacing

a9d98a1

style: Adjust layout padding to 24px instead of 40px

1d0d847

fix: lint

e4769ca

usame-algan merged commit d1a20f0 into dev Apr 26, 2022

usame-algan deleted the epic-dashboard branch April 26, 2022 08:27

github-actions bot locked and limited conversation to collaborators Apr 26, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Epic] Dashboard #3696

[Epic] Dashboard #3696

katspaugh commented Mar 17, 2022 •

edited by usame-algan

Loading

github-actions bot commented Mar 17, 2022

github-actions bot commented Mar 17, 2022 •

edited

Loading

github-actions bot commented Mar 17, 2022

coveralls commented Mar 17, 2022 •

edited

Loading

github-actions bot commented Mar 30, 2022 •

edited

Loading

github-actions bot commented Apr 7, 2022 •

edited

Loading

francovenica commented Apr 22, 2022

francovenica commented Apr 22, 2022

katspaugh commented Apr 22, 2022

github-actions bot commented Apr 24, 2022 •

edited

Loading

liliya-soroka commented Apr 25, 2022

usame-algan commented Apr 25, 2022

francovenica commented Apr 25, 2022

katspaugh commented Apr 25, 2022

lukasschor commented Apr 25, 2022

francovenica commented Apr 25, 2022

[Epic] Dashboard #3696

[Epic] Dashboard #3696

Conversation

katspaugh commented Mar 17, 2022 • edited by usame-algan Loading

What it solves

How to test

Screenshots

github-actions bot commented Mar 17, 2022

github-actions bot commented Mar 17, 2022 • edited Loading

ESLint Summary View Full Report

github-actions bot commented Mar 17, 2022

Deployment links

coveralls commented Mar 17, 2022 • edited Loading

Pull Request Test Coverage Report for Build 2200754342

💛 - Coveralls

github-actions bot commented Mar 30, 2022 • edited Loading

ESLint Summary View Full Report

github-actions bot commented Apr 7, 2022 • edited Loading

ESLint Summary View Full Report

francovenica commented Apr 22, 2022

francovenica commented Apr 22, 2022

katspaugh commented Apr 22, 2022

github-actions bot commented Apr 24, 2022 • edited Loading

ESLint Summary View Full Report

liliya-soroka commented Apr 25, 2022

usame-algan commented Apr 25, 2022

francovenica commented Apr 25, 2022

katspaugh commented Apr 25, 2022

lukasschor commented Apr 25, 2022

francovenica commented Apr 25, 2022

katspaugh commented Mar 17, 2022 •

edited by usame-algan

Loading

github-actions bot commented Mar 17, 2022 •

edited

Loading

coveralls commented Mar 17, 2022 •

edited

Loading

github-actions bot commented Mar 30, 2022 •

edited

Loading

github-actions bot commented Apr 7, 2022 •

edited

Loading

github-actions bot commented Apr 24, 2022 •

edited

Loading