Feat: set mock wallet address via UI #1062

MatthewCYLau · 2022-08-26T11:02:28Z

Address #578

What has been done

Web3Provider, expose function to set mock wallet address i.e. setMockWalletAddress
Inside of WalletSelector, added input to allow for setting mock wallet address i.e. invoke setInputMockWalletAddress
Note, the Watch Address button is only enabled when input contains a valid address (via utils.isAddress)
Render relevant visual cues in WalletWidget if mockAddress is present in useWeb3Context. Added new buttons to Switch Wallet, and Disconnect; removed the old Disconnect list item
When user clicks Switch Wallet, render wallet selector modal and hide wallet widget
In Borrow modal, render warning text of mock wallet address is present
Disable transaction button if mock address is present
Remove "Switch Network" error from modals if mock address is present

… feat/578-set-mock-wallet-address

0x4Graham · 2022-08-26T11:25:10Z

--Edit---

I see that this is still listed as one of the the to-do's

gm Matthew. This is great!

Just one behaviour that should not happen. When I enter a value in a text field such as withdraw, the buton should stay disabled.

See the behaviour that is a bug:

Screen.Recording.2022-08-26.at.13.22.52.mov

iamanastasia · 2022-08-26T13:10:31Z

Can we validate wallet address? Seems I can enter any text right now, and app will allow me to 'watch'.

Would love to see 2 buttons in profile dropdown — Switch account and Disconnect. Switching account saves 1 click if I want to exit watching mode and re-connect with a wallet. Here is the design:

Also we probably need to remove 'Wrong network' message. Since user doesn'y care much about it, and there is no way for him to switch network.

github-actions · 2022-08-29T13:55:11Z

✅ CI run has succeded!
You can find tests and deployment logs at https://github.com/aave/interface/actions/runs/2949079449'

github-actions · 2022-08-29T13:55:50Z

📦 Next.js Bundle Analysis

This analysis was generated by the next.js bundle analysis action 🤖

⚠️ Global Bundle Size Increased

Page	Size (compressed)
`global`	`506.87 KB` (🟡 +1.3 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!

Eight Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load
`/`	`39.33 KB` (🟡 +1 B)	546.2 KB
`/faucet`	`21.86 KB` (🟡 +1 B)	528.72 KB
`/governance`	`63.48 KB` (🟡 +13 B)	570.35 KB
`/governance/ipfs-preview`	`104.28 KB` (🟡 +26 B)	611.15 KB
`/governance/proposal`	`104.44 KB` (🟡 +25 B)	611.3 KB
`/governance/proposal/[proposalId]`	`59.2 KB` (🟡 +25 B)	566.07 KB
`/reserve-overview`	`60.57 KB` (-1 B)	567.43 KB
`/staking`	`32.33 KB` (🟡 +59 B)	539.19 KB

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.

github-actions · 2022-08-29T14:04:52Z

Ipfs hash: bafybeifcq2wx2y3f2g2efeunccaaczrpjrabu7aavceukwwy63lflurr5i
Ipfs preview link: https://bafybeifcq2wx2y3f2g2efeunccaaczrpjrabu7aavceukwwy63lflurr5i.ipfs.cf-ipfs.com/

iamanastasia · 2022-09-22T11:24:09Z

@MatthewCYLau thank you so much! everything looks amazing

grothem · 2022-09-22T17:20:39Z

@MatthewCYLau could you merge in latest main when you get a chance

defispartan · 2022-09-22T17:39:15Z

@MatthewCYLau Looks like there is one unused variable in WalletWidget that the ci is complaining about

MatthewCYLau · 2022-09-22T22:36:45Z

👋 @grothem @defispartan feature branch has been updated with latest main plus removed the un-used import inside of WalletWidget

@iamanastasia could I get some steering on a styling edge case, that is mobile dark mode, the background colour for Switch Wallet, and Disconnect CTAs? 👇 Currently, they blend to the dark mode background. Should we go for an even darker shade of grey for these CTAs their background colour?

iamanastasia · 2022-09-23T10:00:03Z

@MatthewCYLau yeah, that would be great. I think, that's because:

Menu background color doesn't follow design (not your fault, just legacy).
Buttons should have an outlined border (like button 'Details' in the dashboard in dark mode).

So for the background (both top bar and layout) let's change color to #1B2030 (Probably there is a style called 'header' in the dark theme). Would be great, if we can add little transparency 98% (optional).
Current app:

New color for the backround:

As for the buttons, reference would be 'Details' button in dark mode. Same style, size L. Border: 1px solid rgba(235, 235, 237, 0.12) (style is called 'Outlined Resting Border').

I updated Figma file as well.

MatthewCYLau · 2022-09-24T10:20:46Z

Hi 👋 @iamanastasia thank you for the steering 🙏 I've updated the styling based on your feedback. Screenshot below is the latest mobile menu in dark mode. Note the key changes that are top bar, and layout background colour plus buttons.

src/components/WalletConnection/WalletSelector.tsx

src/components/infoTooltips/WatchOnlyModeTooltip.tsx

src/components/WalletConnection/WalletSelector.tsx

src/components/transactions/ClaimRewards/ClaimRewardsModalContent.tsx

drewcook · 2022-09-26T14:08:25Z

src/layouts/AppHeader.tsx

@@ -94,7 +94,7 @@ export function AppHeader() {
          top: 0,
          transition: theme.transitions.create('top'),
          zIndex: theme.zIndex.appBar,
-          bgcolor: 'background.header',
+          bgcolor: '#1B2030',


@MatthewCYLau - Instead of us updating this for this singular spot, I believe we need to update the background.header value in theme.tsx instead.

@iamanastasia - Do these color updates need to get applied to several areas also? Because updating out theme is the right answer to keep things consistent and easy to scale. I think you'd need to vet what gets affected design-wise with this.

src/layouts/WalletWidget.tsx

drewcook · 2022-09-26T14:13:13Z

src/layouts/components/DrawerWrapper.tsx

@@ -18,7 +18,7 @@ export const DrawerWrapper = ({ open, setOpen, children, headerHeight }: DrawerW
      sx={{ top: `${headerHeight}px` }}
      PaperProps={{
        sx: {
-          background: 'rgba(56, 61, 81, 0.88)',
+          background: 'rgba(27, 32, 48, 0.98)',


@MatthewCYLau @iamanastasia Here as well, See previous comment #1062 (comment) - i.e. what else gets these new color updates in the UI?

src/libs/web3-data-provider/Web3Provider.tsx

drewcook · 2022-09-26T15:21:29Z

@MatthewCYLau I will be breaking out all these code style changes into a separate PR and will take care of them and merge into this branch

…error

github-actions · 2022-09-27T00:16:05Z

❌ CI run has failed!
Please see logs at https://github.com/aave/interface/actions/runs/3131992770'

github-actions · 2022-09-27T00:25:24Z

Ipfs hash: bafybeiasfljo46vp5uo3hlypivmp6yjpdoz4p2pihkps7jlusyj4bx2ygi
Ipfs preview link: https://bafybeiasfljo46vp5uo3hlypivmp6yjpdoz4p2pihkps7jlusyj4bx2ygi.ipfs.cf-ipfs.com/

iamanastasia · 2022-09-27T10:39:49Z

Hi @MatthewCYLau and @drewcook New fixes of the mobile menu color affected current nav bar color for the desktop

Can we fix that before publishing?
So in light theme header background will be 2B2D3C (style is called header)

In the dark theme it's 1B2030 (style is called header as well but dark mode)

MatthewCYLau · 2022-09-28T12:25:32Z

👋 @drewcook Thank you for picking-up the feedback improvement points off my branch 🙏 Would you like me to close this particular PR, so that we could focus on your PR 👉 #1178

With regards to the nav bar colour issue @iamanastasia has kindly spotted, @drewcook on your PR branch, would you be able to help revert my changes inside of AppHeader.tsx on line 97 to bgcolor. I mis-understood the requirements when I made the change.

Thank you all! 🙏

drewcook · 2022-09-28T14:52:40Z

@MatthewCYLau Yes, I'll rollback those changes. We will close this PR in favor of #1178.

Thank you so much for your contribution on this! Amazing work!

MatthewCYLau added 15 commits August 22, 2022 15:58

feat(WalletWidget): added Alert component

f30249b

feat(mockWalletAddressContext): added mockWalletAddressContext

071d9f3

feat(WalletSelector): added input to wallet selector for mock address

b9cfa76

feat(WatchOnlyModeTooltip): added WatchOnlyMode tooltip

58632a6

feat(WalletSelector): use web3 context for set mock adddress

c9022d5

chore(WalletWidget): removed console log

eac8a37

chore: merge with latest main

ee9c4c6

feat(WalletWidget): added warning icon

7824af7

chore: updated message.js

92e0567

chore: update with main

aa1a46b

chore: updated message.js

c293c3f

feat(Web3Provider): updated condition to render Wallet Modal

f57cc68

feat(TxActionsWrapper): render warning text when using mockAddress

3a836cc

chore: updated messages

87b0d25

Merge branch 'main' of https://github.com/MatthewCYLau/interface into…

3c6417a

… feat/578-set-mock-wallet-address

defispartan linked an issue Aug 26, 2022 that may be closed by this pull request

Allow setting mockWalletAddress via ui #578

Closed

5 tasks

MatthewCYLau added 2 commits August 26, 2022 23:26

feat(WalletSelector): use utils to check if mock address is valid

d5bd722

feat(TxActionsWrapper): disabled button if mockAddress is present

89a6dfa

MatthewCYLau added 7 commits September 5, 2022 15:08

chore(cypress.config): added eslint ignore

9db5194

chore: updated message.js

892e62f

feat: do not render ChangeNetworkWarning when mockAddress is present

bb3347f

feat(WalletWidget): added buttons to switch network and disconnect

7242db2

feat(WalletWidget): adjusted margin

64f734c

chore(WalletWidget): removed Disconnect Wallet button

b1879d0

chore: removed temp value for max amount to borrow

4c7360e

MatthewCYLau added 3 commits September 22, 2022 22:52

chore: merge with main

1541aed

chore(WalletWidget): removed un-used improt

df2233f

feat(WalletWidget): fine-tune warning icon color

04b9336

MatthewCYLau added 3 commits September 24, 2022 11:23

feat(WalletWidget): updated styling to background and CTA buttons

4c2831e

feat(WalletWidget): added Divider

99af72f

chore(WalletWidget): updated copy

a4b418a

drewcook suggested changes Sep 26, 2022

View reviewed changes

MatthewCYLau added 6 commits September 26, 2022 20:42

feat(WalletSelector): use fullWifth props for button

3bf300e

feat(WalletSelector): use fullWidfth props for input

c25eeac

feat(WatchOnlyModeTooltip): re-named component with correct casing

91c0766

feat(WalletSelector): added boolean state to check for valid address …

4e1e4c2

…error

feat(WalletWidget): added handle switch wallet method

7c8313f

chore: updated messages.js

42de845

drewcook mentioned this pull request Sep 27, 2022

feat: add watch mode only wallet address #1178

Merged

14 tasks

MatthewCYLau added 2 commits September 27, 2022 19:14

feat(useWeb3Context): update setWatchModeOnlyAddress method name

f6c63d1

chore: updated with latest main

62b2fa2

drewcook closed this Sep 28, 2022

MatthewCYLau deleted the feat/578-set-mock-wallet-address branch September 28, 2022 15:26

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat: set mock wallet address via UI #1062

Feat: set mock wallet address via UI #1062

MatthewCYLau commented Aug 26, 2022 •

edited

Loading

0x4Graham commented Aug 26, 2022 •

edited

Loading

iamanastasia commented Aug 26, 2022

github-actions bot commented Aug 29, 2022 •

edited

Loading

github-actions bot commented Aug 29, 2022 •

edited

Loading

github-actions bot commented Aug 29, 2022

iamanastasia commented Sep 22, 2022

grothem commented Sep 22, 2022

defispartan commented Sep 22, 2022

MatthewCYLau commented Sep 22, 2022 •

edited

Loading

iamanastasia commented Sep 23, 2022

MatthewCYLau commented Sep 24, 2022 •

edited

Loading

drewcook Sep 26, 2022 •

edited

Loading

drewcook Sep 26, 2022 •

edited

Loading

drewcook commented Sep 26, 2022

github-actions bot commented Sep 27, 2022 •

edited

Loading

github-actions bot commented Sep 27, 2022

iamanastasia commented Sep 27, 2022

MatthewCYLau commented Sep 28, 2022 •

edited

Loading

drewcook commented Sep 28, 2022

Feat: set mock wallet address via UI #1062

Feat: set mock wallet address via UI #1062

Conversation

MatthewCYLau commented Aug 26, 2022 • edited Loading

0x4Graham commented Aug 26, 2022 • edited Loading

iamanastasia commented Aug 26, 2022

github-actions bot commented Aug 29, 2022 • edited Loading

github-actions bot commented Aug 29, 2022 • edited Loading

📦 Next.js Bundle Analysis

⚠️ Global Bundle Size Increased

Eight Pages Changed Size

github-actions bot commented Aug 29, 2022

iamanastasia commented Sep 22, 2022

grothem commented Sep 22, 2022

defispartan commented Sep 22, 2022

MatthewCYLau commented Sep 22, 2022 • edited Loading

iamanastasia commented Sep 23, 2022

MatthewCYLau commented Sep 24, 2022 • edited Loading

drewcook Sep 26, 2022 • edited Loading

Choose a reason for hiding this comment

drewcook Sep 26, 2022 • edited Loading

Choose a reason for hiding this comment

drewcook commented Sep 26, 2022

github-actions bot commented Sep 27, 2022 • edited Loading

github-actions bot commented Sep 27, 2022

iamanastasia commented Sep 27, 2022

MatthewCYLau commented Sep 28, 2022 • edited Loading

drewcook commented Sep 28, 2022

MatthewCYLau commented Aug 26, 2022 •

edited

Loading

0x4Graham commented Aug 26, 2022 •

edited

Loading

github-actions bot commented Aug 29, 2022 •

edited

Loading

github-actions bot commented Aug 29, 2022 •

edited

Loading

MatthewCYLau commented Sep 22, 2022 •

edited

Loading

MatthewCYLau commented Sep 24, 2022 •

edited

Loading

drewcook Sep 26, 2022 •

edited

Loading

drewcook Sep 26, 2022 •

edited

Loading

github-actions bot commented Sep 27, 2022 •

edited

Loading

MatthewCYLau commented Sep 28, 2022 •

edited

Loading