Staking sub-menu wallet information

[kimpers]

Needs to be hooked up with the wallet logic once that has been implemented.

Mobile: no wallet connected

Mobile: wallet connected

Desktop: no wallet connected

Desktop: wallet connected

[rensverschuren]

Hi Kim,

In the design the submenu background seems to have a different color than the one in the frontend (a slightly greenish tint):

Is this feature easy to test without the wallet logic? I have MetaMask enabled.

Rens

[kimpers]

Hi Kim,

In the design the submenu background seems to have a different color than the one in the frontend (a slightly greenish tint):

Is this feature easy to test without the wallet logic? I have MetaMask enabled.

Rens

Good catch! I missed the background color of the menu.

In order to avoid re-wiring these core components to support override colors I suggest we start using a staking theme based off the light theme with staking specific changes. What do you think?

Unfortunately the component is not functional until we get the blockchain connection setup but you can fake it by making some code changes

diff --git a/ts/components/staking/header/header.tsx b/ts/components/staking/header/header.tsx
index e42ba2f..466eb0d 100644
--- a/ts/components/staking/header/header.tsx
+++ b/ts/components/staking/header/header.tsx
@@ -16,7 +16,7 @@ import { FlexWrap } from 'ts/components/newLayout';
 import { IThemeValuesInterface } from 'ts/style/theme';
 import { zIndex } from 'ts/style/z_index';
 
-import { WebsitePaths } from 'ts/types';
+import { Providers, WebsitePaths } from 'ts/types';
 
 interface IHeaderProps {
     location?: Location;
@@ -73,8 +73,15 @@ export const Header: React.FC<IHeaderProps> = ({ isNavToggled, toggleMobileNav }
         console.log('TODO: logout wallet');
     };
 
-    const subMenu = <SubMenu openConnectWalletDialogCB={openConnectWalletDialog} logoutWalletCB={logoutWallet} />;
-    const isWalletConnected = false;
+    const subMenu = (
+        <SubMenu
+            openConnectWalletDialogCB={openConnectWalletDialog}
+            logoutWalletCB={logoutWallet}
+            userEthAddress="0x32Be343B94f860124dC4fEe278FDCBD38C102D88"
+            providerName={Providers.Metamask}
+        />
+    );
+    const isWalletConnected = true;
 
     return (
         <Headroom

If you are on a Mac you can copy the patch (make sure you get the space in <Headroom ) and apply it with pbpaste | git apply -

[kimpers]

Merging this so that I can hook it up with the connect wallet dialog. If there are any follow up comments I'll circle back to them in a new branch.