Polish Safenet UI for Security Checks #4486
Conversation
Branch preview✅ Deploy successful! Storybook: |
📦 Next.js Bundle Analysis for safe-wallet-webThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
1013.59 KB (🟡 +1.29 KB) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
New Page Added
The following page was added to the bundle from the code in this PR:
| Page | Size (compressed) | First Load |
|---|---|---|
/settings/safenet |
185.32 KB |
1.17 MB |
Twenty-three Pages Changed Size
The following pages changed size from the code in this PR compared to its base branch:
| Page | Size (compressed) | First Load |
|---|---|---|
/apps |
47.15 KB (🟢 -1.28 KB) |
1.04 MB |
/apps/custom |
38.78 KB (🟢 -1.28 KB) |
1.03 MB |
/apps/open |
55.28 KB (🟡 +99 B) |
1.04 MB |
/balances |
30.52 KB (🟢 -7.75 KB) |
1.02 MB |
/balances/nfts |
19.21 KB (🟡 +2 B) |
1.01 MB |
/home |
57.33 KB (🟢 -2.18 KB) |
1.05 MB |
/new-safe/advanced-create |
36.71 KB (🟡 +1.73 KB) |
1.03 MB |
/new-safe/create |
35.97 KB (🟡 +1.73 KB) |
1.02 MB |
/new-safe/load |
16.61 KB (🟡 +1.83 KB) |
1.01 MB |
/settings |
451 B (🟡 +1 B) |
1014.03 KB |
/settings/cookies |
7.68 KB (🟢 -1 B) |
1021.27 KB |
/settings/data |
7.58 KB (🟢 -3 B) |
1021.17 KB |
/settings/environment-variables |
9.17 KB (🟡 +3 B) |
1022.76 KB |
/settings/modules |
9.84 KB (🟢 -3 B) |
1023.43 KB |
/settings/notifications |
27.05 KB (-2 B) |
1.02 MB |
/settings/setup |
36 KB (-1 B) |
1.02 MB |
/stake |
597 B (🟡 +1 B) |
1014.18 KB |
/transactions |
73.69 KB (-7 B) |
1.06 MB |
/transactions/history |
73.66 KB (-7 B) |
1.06 MB |
/transactions/messages |
39.2 KB (🟢 -7 B) |
1.03 MB |
/transactions/msg |
29.53 KB (🟢 -7 B) |
1.02 MB |
/transactions/queue |
31.3 KB (🟢 -10 B) |
1.02 MB |
/transactions/tx |
21.08 KB (🟢 -8 B) |
1.01 MB |
Details
Only the gzipped size is provided here based on an expert tip.
First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this.
Coverage report
Show new covered files 🐣
Test suite run success1573 tests passing in 208 suites. Report generated by 🧪jest coverage report action from 40efe73 |
| <Button variant="outlined" size="small" href={link} sx={{ width: '100%', py: 0.5 }}> | ||
| Share verification link | ||
| </Button> |
There was a problem hiding this comment.
We might want to use either
target="_blank"to open a new tab- Copy to clipboard
so the user stays on the transaction page if he clicks.
There was a problem hiding this comment.
so the user stays on the transaction page if he clicks.
target blank will open a new tab (so the user will not stay on the tx page)
I think the way to do is here is to use a copy to clipboard button + display the link as text because sometimes the clipboard can not function properly (privacy settings etc)
There was a problem hiding this comment.
I decided to go with target='_blank' for simplicity's sake. I also changed the wording a bit, since opening a window isn't "sharing a verification link":
I also added an icon to indicate it is opening a new page:
|
As discussed, we now copy to clipboard:
|
What it solves
Designs for the Safenet UI included changes to the security check UI elements; this PR implements those styling changes.
How this PR fixes it
A new
GradientBoxSafenetUI element was created that wraps an inner element in a box. This was done because implementing gradients on borders is kind of annoying, and so having a component to abstract this away was nice.UI was changed in both the TX details view in the queue, but also for the signing and execution flow.
Screenshots
Transaction Details
Sign and Execute Flow
Verification Link