Skip to content
This repository was archived by the owner on Nov 10, 2023. It is now read-only.

SafeApps new layout#1600

Merged
dasanra merged 55 commits intodevelopmentfrom
issue-1294
Nov 26, 2020
Merged

SafeApps new layout#1600
dasanra merged 55 commits intodevelopmentfrom
issue-1294

Conversation

@nicosampler
Copy link
Contributor

@nicosampler nicosampler commented Nov 12, 2020

Closes #1294 #1282.

It's there some kind of delay until all the apps finished the loading. I'll be taking a look tomorrow.
All the functionality should be implemented.

@nicosampler nicosampler self-assigned this Nov 12, 2020
@github-actions
Copy link

CLA Assistant Lite All Contributors have signed the CLA.

@github-actions
Copy link

github-actions bot commented Nov 12, 2020

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

@ghost
Copy link

ghost commented Nov 12, 2020

Travis automatic deployment:
https://pr1600--safereact.review.gnosisdev.com/volta/app

@ghost
Copy link

ghost commented Nov 12, 2020

Travis automatic deployment:
https://pr1600--safereact.review.gnosisdev.com/rinkeby/app

@lukasschor
Copy link
Contributor

Looks pretty neat!

image

It seems to be missing the app titles on the top though.

@lukasschor
Copy link
Contributor

Also, every time I open an app, it shows the legal disclaimer for a split second.

@ghost
Copy link

ghost commented Nov 20, 2020

Travis automatic deployment:
https://pr1600--safereact.review.gnosisdev.com/rinkeby/app

@ghost
Copy link

ghost commented Nov 20, 2020

Travis automatic deployment:
https://pr1600--safereact.review.gnosisdev.com/volta/app

@nicosampler nicosampler requested a review from dasanra November 24, 2020 18:46
@ghost
Copy link

ghost commented Nov 24, 2020

Travis automatic deployment:
https://pr1600--safereact.review.gnosisdev.com/volta/app

@ghost
Copy link

ghost commented Nov 24, 2020

Travis automatic deployment:
https://pr1600--safereact.review.gnosisdev.com/rinkeby/app

{ selectedApp, safeAddress, network, appIsLoading, granted, onIframeLoad },
iframeRef,
): React.ReactElement {
const AppFrame = ({ appUrl }: Props): React.ReactElement => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AppFrame was meant to be a component that is responsible for displaying the app inside an iframe and not hold any logic. Why did you move the logic here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before this change, separating the logic made sense, mixing the app list logic with the app frame was chaos. Now App frame is rendered in a new URL and the logic here is merely to determine what to render.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mixing the app list logic with the app frame

app list logic was hidden inside useAppList hook, wasn't it?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, but we don't want to make use of useAppList in AppFrame, it will load the complete app list for no reason.
That's why I moved to AppFrame the removeApp functionality.
I can create another hook for that functionality if you think, we can also move the logic that checks if an app.url exits in the static list

Comment on lines 55 to 63
const handleSubmit = () => {
closeModal()
onAppAdded(appInfo)
const newAppList = [
{ url: appInfo.url, disabled: false },
...appList.map(({ url, disabled }) => ({ url, disabled })),
]
saveToStorage(APPS_STORAGE_KEY, newAppList)
const goToApp = `${matchSafeWithAddress?.url}/apps?appUrl=${encodeURI(appInfo.url)}`
history.push(goToApp)
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This only updates the stored app list and not app's state, is it intended?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sorry, what do you mean by app's state?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we hold an apps list in state inside useAppList hook

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ahh, I see what you mean. No, it's not needed anymore, because the useAppList is only used in /apps URL, when we add a new app, we redirect it to /apps/new_app_url.
then, if the user goes back to /apps it will load the just added_app because it's already in the storage.

@ghost
Copy link

ghost commented Nov 24, 2020

Travis automatic deployment:
https://pr1600--safereact.review.gnosisdev.com/rinkeby/app

@ghost
Copy link

ghost commented Nov 24, 2020

Travis automatic deployment:
https://pr1600--safereact.review.gnosisdev.com/volta/app

@ghost
Copy link

ghost commented Nov 25, 2020

Travis automatic deployment:
https://pr1600--safereact.review.gnosisdev.com/rinkeby/app

@ghost
Copy link

ghost commented Nov 25, 2020

Travis automatic deployment:
https://pr1600--safereact.review.gnosisdev.com/volta/app

@ghost
Copy link

ghost commented Nov 25, 2020

Travis automatic deployment:
https://pr1600--safereact.review.gnosisdev.com/volta/app

@ghost
Copy link

ghost commented Nov 25, 2020

Travis automatic deployment:
https://pr1600--safereact.review.gnosisdev.com/rinkeby/app

@ghost
Copy link

ghost commented Nov 25, 2020

Travis automatic deployment:
https://pr1600--safereact.review.gnosisdev.com/volta/app

@ghost
Copy link

ghost commented Nov 25, 2020

Travis automatic deployment:
https://pr1600--safereact.review.gnosisdev.com/rinkeby/app

@ghost
Copy link

ghost commented Nov 26, 2020

Travis automatic deployment:
https://pr1600--safereact.review.gnosisdev.com/volta/app

@ghost
Copy link

ghost commented Nov 26, 2020

Travis automatic deployment:
https://pr1600--safereact.review.gnosisdev.com/rinkeby/app

@francovenica
Copy link
Contributor

I've checked the list in Chrome, Firefox and Brave and the list looks fine.
I've been toying around with the zoom and port view of the page and the icons seem to fit well on every case
I've been adding and removing apps checking that the list adapts properly

I've check the correction of the issues reported in previous comments:
The margin at the top
The button to add new apps not being fully clickable
The button "Help" margin
The fitting of the cards regarding the size
The info text stepping over the footer

Looks good to me

@dasanra dasanra merged commit ba680f7 into development Nov 26, 2020
@dasanra dasanra deleted the issue-1294 branch November 26, 2020 17:40
@github-actions github-actions bot locked and limited conversation to collaborators Nov 26, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

New layout: Safe apps overview page and app page.

7 participants