fixes/redesign (#1193)

Author: dimakorzhovnik

.vscode/settings.json

@@ -26,7 +26,7 @@
     "typescriptreact"
   ],
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "css.validate": false,
   "less.validate": false,

src/components/HydrogenBalance/HydrogenBalance.tsx

@@ -3,7 +3,7 @@ import SideButtonLink from '../sideButtonLink/SideButtonLink';
 import { routes } from 'src/routes';
 import IconsNumber from '../IconsNumber/IconsNumber';
 
-function HydrogenBalance({ address }) {
+function HydrogenBalance({ address, isVertical }) {
   const { totalAmountInLiquid } = useGetBalanceBostrom(address);
 
   return (
@@ -14,7 +14,7 @@ function HydrogenBalance({ address }) {
       <IconsNumber
         value={totalAmountInLiquid.currentCap}
         type="hydrogen"
-        isVertical
+        isVertical={isVertical}
       />
     </SideButtonLink>
   );

src/components/IconsNumber/IconsNumber.module.scss

@@ -1,3 +1,9 @@
+.wrapper {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
 .icon {
   display: flex;
   flex-direction: row;

src/components/IconsNumber/IconsNumber.tsx

@@ -63,7 +63,7 @@ export default function IconsNumber({ value, type, isVertical }: Props) {
   });
 
   return (
-    <>
+    <span className={styles.wrapper}>
       {number}{' '}
       <Tooltip
         tooltip={
@@ -77,6 +77,6 @@ export default function IconsNumber({ value, type, isVertical }: Props) {
           {i}
         </div>
       </Tooltip>
-    </>
+    </span>
   );
 }

src/components/actionBar/index.tsx

@@ -13,7 +13,6 @@ import { CHAIN_ID } from 'src/constants/config';
 import ButtonIcon from '../buttons/ButtonIcon';
 import styles from './styles.module.scss';
 import Button from '../btnGrd';
-import { createPortal } from 'react-dom';
 
 const back = require('../../image/arrow-left-img.svg');
 

src/components/index.js

@@ -1,22 +1,13 @@
 import {
-  JsonTransaction,
   TransactionSubmitted,
   Confirmed,
-  ConnectLadger,
-  Cyberlink,
   StartStageSearchActionBar,
   Delegate,
   ActionBarSend,
-  GovernanceStartStageActionBar,
-  CommunityPool,
-  TextProposal,
   RewardsDelegators,
   ReDelegate,
   TransactionError,
   ActionBarContentText,
-  CheckAddressInfo,
-  GovernanceChangeParam,
-  GovernanceSoftwareUpgrade,
   ConnectAddress,
 } from './ledger/stageActionBar';
 import Account from './account/account';

src/components/ledger/stageActionBar.jsx

@@ -1,12 +1,10 @@
 import LocalizedStrings from 'react-localization';
 import { Link } from 'react-router-dom';
-import { ActionBar, Pane, Text } from '@cybercongress/gravity';
-
+import { Pane, Text } from '@cybercongress/gravity';
 import { BondStatus } from 'cosmjs-types/cosmos/staking/v1beta1/staking';
 import { useBackend } from 'src/contexts/backend/backend';
 import { CHAIN_ID, BASE_DENOM } from 'src/constants/config';
 import { KEY_TYPE } from 'src/pages/Keys/types';
-
 import { ContainetLedger } from './container';
 import { Dots } from '../ui/Dots';
 import Account from '../account/account';
@@ -17,7 +15,7 @@ import { i18n } from '../../i18n/en';
 
 import Button from '../btnGrd';
 import { InputNumber, Input } from '../Input';
-import ActionBarContainer from '../actionBar';
+import ActionBar from '../actionBar';
 import ButtonIcon from '../buttons/ButtonIcon';
 import { Color } from '../LinearGradientContainer/LinearGradientContainer';
 import AddFileButton from '../buttons/AddFile/AddFile';
@@ -28,12 +26,6 @@ const imgSecrets = require('../../image/secrets_icon.png');
 
 const T = new LocalizedStrings(i18n);
 
-// const toPascalCase = (str) =>
-//   str
-//     .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[a-zA-Z0-9]+/g)
-//     .map((cht) => cht.charAt(0).toUpperCase() + cht.substr(1).toLowerCase())
-//     .join('');
-
 export function ActionBarContentText({ children, ...props }) {
   return (
     <Pane
@@ -50,54 +42,50 @@ export function ActionBarContentText({ children, ...props }) {
   );
 }
 
+// const toPascalCase = (str) =>
+//   str
+//     .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[a-zA-Z0-9]+/g)
+//     .map((cht) => cht.charAt(0).toUpperCase() + cht.substr(1).toLowerCase())
+//     .join('');
+
 export function TransactionSubmitted() {
   return (
     <ActionBar>
-      <ActionBarContentText>
-        Please wait while we confirm the transaction on the blockchain{' '}
-        <Dots big />
-      </ActionBarContentText>
+      Please wait while we confirm the transaction on the blockchain{' '}
+      <Dots big />
     </ActionBar>
   );
 }
 
 export function Confirmed({ txHash, txHeight, cosmos, onClickBtnClose }) {
   return (
-    <ActionBar>
-      <ActionBarContentText display="inline">
-        <Pane display="inline">Transaction</Pane>{' '}
-        {cosmos ? (
-          <LinkWindow to={`https://www.mintscan.io/txs/${txHash}`}>
-            {trimString(txHash, 6, 6)}
-          </LinkWindow>
-        ) : (
-          <Link to={`/network/bostrom/tx/${txHash}`}>
-            {trimString(txHash, 6, 6)}
-          </Link>
-        )}{' '}
-        {txHeight && (
-          <Pane display="inline">
-            was included in the block <br /> at height{' '}
-            {formatNumber(parseFloat(txHeight))}
-          </Pane>
-        )}
-      </ActionBarContentText>
-      <Button style={{ margin: '0 10px' }} onClick={onClickBtnClose}>
-        Fuck Google
-      </Button>
+    <ActionBar button={{ text: ' Fuck Google', onClick: onClickBtnClose }}>
+      <Pane display="inline">Transaction</Pane>{' '}
+      {cosmos ? (
+        <LinkWindow to={`https://www.mintscan.io/txs/${txHash}`}>
+          {trimString(txHash, 6, 6)}
+        </LinkWindow>
+      ) : (
+        <Link to={`/network/bostrom/tx/${txHash}`}>
+          {trimString(txHash, 6, 6)}
+        </Link>
+      )}{' '}
+      {txHeight && (
+        <Pane display="inline">
+          was included in the block <br /> at height{' '}
+          {formatNumber(parseFloat(txHeight))}
+        </Pane>
+      )}
     </ActionBar>
   );
 }
 
 export function TransactionError({ onClickBtn, errorMessage }) {
   return (
-    <ActionBar>
-      <ActionBarContentText display="block">
-        Message Error: {errorMessage}
-      </ActionBarContentText>
-      <Button style={{ margin: '0 10px' }} onClick={onClickBtn}>
-        {T.actionBar.confirmedTX.continue}
-      </Button>
+    <ActionBar
+      button={{ text: T.actionBar.confirmedTX.continue, onClick: onClickBtn }}
+    >
+      Message Error: {errorMessage}
     </ActionBar>
   );
 }
@@ -118,7 +106,7 @@ export function StartStageSearchActionBar({
   const { isIpfsInitialized } = useBackend();
   return (
     // use NodeIsLoadingButton component
-    <ActionBarContainer
+    <ActionBar
       button={{
         disabled: !isIpfsInitialized || !contentHash.length,
         onClick: onClickBtn,
@@ -166,7 +154,7 @@ export function StartStageSearchActionBar({
           />
         </Pane>
       </Pane>
-    </ActionBarContainer>
+    </ActionBar>
   );
 }
 
@@ -226,7 +214,7 @@ export function Delegate({
   available,
 }) {
   return (
-    <ActionBarContainer
+    <ActionBar
       onClickBack={onClickBack}
       button={{
         text: T.actionBar.delegate.generate,
@@ -253,7 +241,7 @@ export function Delegate({
       <Text marginLeft={10} fontSize="16px" color="#fff">
         {BASE_DENOM.toUpperCase()}
       </Text>
-    </ActionBarContainer>
+    </ActionBar>
   );
 }
 
@@ -270,7 +258,7 @@ export function ReDelegate({
   onClickBack,
 }) {
   return (
-    <ActionBarContainer
+    <ActionBar
       onClickBack={onClickBack}
       button={{
         text: T.actionBar.delegate.generate,
@@ -315,7 +303,7 @@ export function ReDelegate({
             </option>
           ))}
       </select>
-    </ActionBarContainer>
+    </ActionBar>
   );
 }
 
@@ -329,7 +317,7 @@ export function ActionBarSend({
   onClickBack,
 }) {
   return (
-    <ActionBarContainer
+    <ActionBar
       onClickBack={onClickBack}
       button={{
         text: 'Generate Tx',
@@ -352,7 +340,7 @@ export function ActionBarSend({
           autoFocus={false}
         />
       </div>
-    </ActionBarContainer>
+    </ActionBar>
   );
 }
 
@@ -413,7 +401,7 @@ export function ConnectAddress({
   onClickBack,
 }) {
   return (
-    <ActionBarContainer
+    <ActionBar
       button={{
         disabled: !selectNetwork || !selectMethod,
         text: selectMethod === KEY_TYPE.secrets ? 'Add' : 'Connect',
@@ -462,6 +450,6 @@ export function ConnectAddress({
           text={CHAIN_ID}
         />
       </Pane>
-    </ActionBarContainer>
+    </ActionBar>
   );
 }

src/containers/application/Header/CurrentApp/CurrentApp.module.scss

@@ -61,25 +61,6 @@
   position: relative;
 }
 
-.networkBtnImgIconMenu {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transition: 0.2s;
-  transform: translate(-50%, -50%) rotate(-90deg);
-
-  &Close {
-    transform: translate(-50%, -50%) rotate(0deg);
-  }
-
-  div {
-    width: 35px;
-    height: 5px;
-    background-color: black;
-    margin: 6px 0;
-  }
-}
-
 .btnContainerText {
   border: none;
   font-size: 16px;

src/containers/application/Header/CurrentApp/CurrentApp.tsx

@@ -1,5 +1,4 @@
-import { useMemo } from 'react';
-import cx from 'classnames';
+import { useMemo, useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { routes } from 'src/routes';
 import { CHAIN_ID } from 'src/constants/config';
@@ -12,21 +11,32 @@ import styles from './CurrentApp.module.scss';
 import { selectNetworkImg } from '../../../../utils/utils';
 import ChainInfo from './ui/ChainInfo/ChainInfo';
 import findSelectAppByUrl from './utils/findSelectAppByUrl';
+import AppSideBar from './ui/AppSideBar/AppSideBar';
+import { menuButtonId } from './utils/const';
 
-export const menuButtonId = 'menu-button';
-
-function CurrentApp({ onClickOpenMenu, openMenu }) {
+function CurrentApp() {
   const mediaQuery = useMediaQuery('(min-width: 768px)');
   const location = useLocation();
   const address = useAppSelector(selectCurrentAddress);
   const { passport } = usePassportByAddress(address);
+  const [openMenu, setOpenMenu] = useState(true);
 
   const getRoute = useMemo(() => {
     const { pathname } = location;
 
     return findSelectAppByUrl(pathname, passport, address);
   }, [location, address, passport]);
 
+  const toggleMenu = (newState: boolean) => {
+    setOpenMenu(newState);
+  };
+
+  const closeMenu = () => {
+    toggleMenu(false);
+  };
+
+  const toggleMenuFc = useMemo(() => () => toggleMenu(!openMenu), [openMenu]);
+
   return (
     <>
       <div className={styles.buttonWrapper}>
@@ -45,9 +55,15 @@ function CurrentApp({ onClickOpenMenu, openMenu }) {
       </div>
 
       {getRoute && getRoute[0] && (
-        <div className={cx(styles.containerSubItems, styles.tooltipContainer)}>
-          <SubMenu selectedApp={getRoute[0]} closeMenu={onClickOpenMenu} />
-        </div>
+        <AppSideBar
+          menuProps={{
+            isOpen: mediaQuery || openMenu,
+            toggleMenu: toggleMenuFc,
+            closeMenu,
+          }}
+        >
+          <SubMenu selectedApp={getRoute[0]} closeMenu={closeMenu} />
+        </AppSideBar>
       )}
     </>
   );