Resolve: [Header] Add wallet selector (#2392)

- [x] Add wallet selection in `HeaderLock`
- [x] Extract `HeaderLockMobile` from `HeaderLock`
- [x] Update misc. styles
- [x] Bump "Electron": "^19.0.15" (trying to make CI happy)

CHANGELOG.md

@@ -1,5 +1,9 @@
 # 1.18.1 (2022-xx-xx)
 
+## Add
+
+[Header] Add wallet selector [#1576](https://github.com/thorchain/asgardex-electron/issues/1576)
+
 ## Fix
 
 Add validation of wallet names to avoid duplications [#2386](https://github.com/thorchain/asgardex-electron/issues/2386)

package.json

@@ -171,7 +171,7 @@
     "concurrently": "^7.2.1",
     "cross-env": "^7.0.3",
     "crypto-browserify": "^3.12.0",
-    "electron": "^19.0.14",
+    "electron": "^19.0.15",
     "electron-builder": "^23.0.3",
     "electron-devtools-installer": "^3.2.0",
     "electron-notarize": "^1.2.1",

src/renderer/components/header/Header.tsx

@@ -6,7 +6,8 @@ import { useObservableState } from 'observable-hooks'
 
 import { useMidgardContext } from '../../contexts/MidgardContext'
 import { useThorchainContext } from '../../contexts/ThorchainContext'
-import { useWalletContext } from '../../contexts/WalletContext'
+import { useKeystoreState } from '../../hooks/useKeystoreState'
+import { useKeystoreWallets } from '../../hooks/useKeystoreWallets'
 import { useNetwork } from '../../hooks/useNetwork'
 import { usePricePools } from '../../hooks/usePricePools'
 import { useRunePrice } from '../../hooks/useRunePrice'
@@ -16,10 +17,9 @@ import { SelectedPricePoolAsset } from '../../services/midgard/types'
 import { HeaderComponent } from './HeaderComponent'
 
 export const Header: React.FC = (): JSX.Element => {
-  const { keystoreService } = useWalletContext()
+  const { lock, state: keystoreState, change$: changeWalletHandler$ } = useKeystoreState()
+  const { walletsUI } = useKeystoreWallets()
   const { mimir$ } = useThorchainContext()
-  const { lock } = keystoreService
-  const keystore = useObservableState(keystoreService.keystoreState$, O.none)
   const mimir = useObservableState(mimir$, RD.initial)
   const { service: midgardService } = useMidgardContext()
   const {
@@ -44,8 +44,10 @@ export const Header: React.FC = (): JSX.Element => {
   return (
     <HeaderComponent
       network={network}
-      keystore={keystore}
+      keystore={keystoreState}
+      wallets={walletsUI}
       lockHandler={lock}
+      changeWalletHandler$={changeWalletHandler$}
       pricePools={pricePools}
       setSelectedPricePool={setSelectedPricePool}
       runePrice={runePriceRD}

src/renderer/components/header/HeaderComponent.tsx

@@ -20,11 +20,12 @@ import * as poolsRoutes from '../../routes/pools'
 import * as walletRoutes from '../../routes/wallet'
 import { InboundAddressRD, MidgardUrlRD, PriceRD, SelectedPricePoolAsset } from '../../services/midgard/types'
 import { MimirRD } from '../../services/thorchain/types'
-import { KeystoreState } from '../../services/wallet/types'
+import { ChangeKeystoreWalletHandler, KeystoreState, KeystoreWalletsUI } from '../../services/wallet/types'
 import { isLocked } from '../../services/wallet/util'
 import { PricePoolAsset, PricePoolAssets, PricePools } from '../../views/pools/Pools.types'
 import * as Styled from './HeaderComponent.styles'
 import { HeaderLock } from './lock/'
+import { HeaderLockMobile } from './lock/HeaderLockMobile'
 import { HeaderNetStatus } from './netstatus'
 import { HeaderPriceSelector } from './price'
 import { HeaderSettings } from './settings'
@@ -46,8 +47,10 @@ type Tab = {
 
 export type Props = {
   keystore: KeystoreState
+  wallets: KeystoreWalletsUI
   network: Network
   lockHandler: FP.Lazy<void>
+  changeWalletHandler$: ChangeKeystoreWalletHandler
   setSelectedPricePool: (asset: PricePoolAsset) => void
   pricePools: O.Option<PricePools>
   runePrice: PriceRD
@@ -65,6 +68,7 @@ export type Props = {
 export const HeaderComponent: React.FC<Props> = (props): JSX.Element => {
   const {
     keystore,
+    wallets,
     network,
     pricePools: oPricePools,
     runePrice: runePriceRD,
@@ -75,6 +79,7 @@ export const HeaderComponent: React.FC<Props> = (props): JSX.Element => {
     reloadVolume24Price,
     selectedPricePoolAsset: oSelectedPricePoolAsset,
     lockHandler,
+    changeWalletHandler$,
     setSelectedPricePool,
     midgardUrl: midgardUrlRD,
     thorchainNodeUrl,
@@ -237,11 +242,6 @@ export const HeaderComponent: React.FC<Props> = (props): JSX.Element => {
     [hasPricePools, isDesktopView, oSelectedPricePoolAsset, pricePoolAssets, currencyChangeHandler]
   )
 
-  const renderHeaderLock = useMemo(
-    () => <HeaderLock isDesktopView={isDesktopView} keystoreState={keystore} onPress={clickLockHandler} />,
-    [isDesktopView, clickLockHandler, keystore]
-  )
-
   const renderHeaderSettings = useMemo(
     () => <HeaderSettings isDesktopView={isDesktopView} onPress={clickSettingsHandler} />,
     [isDesktopView, clickSettingsHandler]
@@ -319,7 +319,12 @@ export const HeaderComponent: React.FC<Props> = (props): JSX.Element => {
                   {renderHeaderNetStatus}
                   <HeaderTheme isDesktopView={isDesktopView} />
                   {renderHeaderCurrency}
-                  {renderHeaderLock}
+                  <HeaderLock
+                    keystoreState={keystore}
+                    wallets={wallets}
+                    lockHandler={clickLockHandler}
+                    changeWalletHandler$={changeWalletHandler$}
+                  />
                   {renderHeaderSettings}
                 </Row>
               </Col>
@@ -374,7 +379,9 @@ export const HeaderComponent: React.FC<Props> = (props): JSX.Element => {
             <Styled.HeaderDrawerItem>
               <HeaderTheme isDesktopView={isDesktopView} />
             </Styled.HeaderDrawerItem>
-            <Styled.HeaderDrawerItem>{renderHeaderLock}</Styled.HeaderDrawerItem>
+            <Styled.HeaderDrawerItem>
+              <HeaderLockMobile keystoreState={keystore} onPress={clickLockHandler} />
+            </Styled.HeaderDrawerItem>
             <Styled.HeaderDrawerItem>{renderHeaderSettings}</Styled.HeaderDrawerItem>
             {renderHeaderNetStatus}
           </Styled.HeaderDrawer>

src/renderer/components/header/HeaderMenu.styles.ts

@@ -51,7 +51,7 @@ export const HeaderDropdownTitle = styled(Text)`
 export const HeaderDropdownMenuItemText = styled(Text)`
   text-transform: uppercase;
   font-family: 'MainFontBold';
-  color: ${palette('text', 0)};
-  font-size: 18px;
+  color: ${palette('text', 1)};
+  font-size: 16px;
   background: transparent;
 `

src/renderer/components/header/lock/HeaderLock.stories.tsx

@@ -13,11 +13,10 @@ const meta: ComponentMeta<typeof Component> = {
   title: 'Components/HeaderLock',
   argTypes: {
     keystoreState: AT.keystore,
-    onPress: { action: 'onPress' }
+    lockHandler: { action: 'onPress' }
   },
   args: {
-    keystoreState: O.none,
-    isDesktopView: false
+    keystoreState: O.none
   }
 }
 

src/renderer/components/header/lock/HeaderLock.styles.tsx

@@ -6,8 +6,6 @@ import Text from 'antd/lib/typography/Text'
 import styled from 'styled-components'
 import { palette } from 'styled-theme'
 
-import { ReactComponent as LockWarningIconUI } from '../../../assets/svg/icon-lock-warning.svg'
-import { ReactComponent as UnlockWarningIconUI } from '../../../assets/svg/icon-unlock-warning.svg'
 import { media } from '../../../helpers/styleHelper'
 
 type Props = RowProps & { disabled: boolean }
@@ -28,16 +26,6 @@ export const HeaderLockWrapper = styled(Wrapper)`
   `}
 `
 
-export const LockIcon = styled(LockWarningIconUI)`
-  font-size: '1.5em';
-  cursor: pointer;
-`
-
-export const UnlockIcon = styled(UnlockWarningIconUI)`
-  font-size: '1.5em';
-  cursor: pointer;
-`
-
 export const Label = styled(Text)`
   text-transform: uppercase;
   color: ${palette('text', 0)};