antonnell · MakeBetterConsulting · Jun 3, 2021 · Jun 3, 2021 · Jun 4, 2021 · Jun 7, 2021
diff --git a/components/explorer/history.js b/components/explorer/history.js
@@ -15,6 +15,7 @@ function History({ theme }) {
 
   useEffect(function () {
     const swapHistoryReturned = (history) => {
+      console.log(history);
       setSwapHistory(history);
     };
 
@@ -37,7 +38,6 @@ function History({ theme }) {
       stores.dispatcher.dispatch({ type: GET_EXPLORER, content: { value: search } });
     }
   }
-
   return (
     <Paper elevation={0} className={classes.historyContainer}>
       <TextField

diff --git a/components/explorer/historyTable.js b/components/explorer/historyTable.js
@@ -288,6 +288,7 @@ export default function EnhancedTable({ swapHistory }) {
                     tabIndex={-1}
                     key={row.txid}
                   >
+
                     <TableCell className={ classes.cell }>
                       <div className={ classes.inline }>
                         <img src={`${row.tokenMetadata ? row.tokenMetadata.icon : '/tokens/unknown-logo.png'}`} width={ 40 } height={ 40 } className={ classes.icon } />
@@ -321,6 +322,7 @@ export default function EnhancedTable({ swapHistory }) {
                     <TableCell className={ `${getStatus(row.status) === 'Success' ? classes.cellSuccess : classes.cell }` }>
                       <Typography variant='h5'>{ getStatus(row.status) }</Typography>
                     </TableCell>
+
                   </TableRow>
                 );
               })}

diff --git a/components/layout/layout.js b/components/layout/layout.js
@@ -1,16 +1,44 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
 import Head from 'next/head'
 import classes from './layout.module.css'
 import Link from 'next/link'
-import Header from '../header'
 import Navigation from '../navigation'
 import SnackbarController from '../snackbar'
 
+import classNames from 'classnames';
+import SideMenu from '../../components_multichain/sidebar/SideBarMenu';
+import AppInfo from '../../components_multichain/sidebar/AppInfo';
+import SocialMedia from '../../components_multichain/sidebar/SocialMedia';
+import SiteActions from '../../components_multichain/siteActions/SiteActions';
+
+
+import 'font-awesome/css/font-awesome.min.css';
+import styles from '../../styles/layout.module.scss';
+
+const menuImg = { open: '/images/menu.svg', close: '/images/closeIcon.svg' };
+
 export const siteTitle = 'Multichain.xyz'
 
-export default function Layout({ children, configure, backClicked, changeTheme }) {
+function Layout({ children, configure, backClicked, changeTheme, isMobile }) {
+  const [menuVisible, setMenuVisible] = useState(true);
+  const showContent = !isMobile || (isMobile && !menuVisible);
+
+  const toggleMenuVisibility = () => isMobile && setMenuVisible(!menuVisible);
+
+  const rootClass = classNames(styles.container, {
+    [styles.isMobile]: isMobile,
+    isMobile: true,
+  });
+
+  const sideMenuClass = classNames(styles.sideMenu, {
+    [styles.hidden]: !menuVisible,
+  });
+  const menuIcon = menuVisible ? menuImg.close : menuImg.open;
 
   return (
-    <div className={ classes.container }>
+    <div className={rootClass}>
       <Head>
         <link rel="icon" href="/favicon.png" />
         <link
@@ -32,16 +60,58 @@ export default function Layout({ children, configure, backClicked, changeTheme }
         <meta name="og:title" content="Multichain" />
         <meta name="twitter:card" content="summary_large_image" />
       </Head>
-      {!configure && (
-        <Navigation backClicked={backClicked} changeTheme={ changeTheme } />
-      )}
-      <div className={ classes.content }>
-        {!configure && (
-          <Header backClicked={backClicked} changeTheme={ changeTheme } />
+      <div className={styles.main}>
+        <div className={sideMenuClass}>
+        <div className={styles.appTitle}>
+            <span className={styles.appName}>multichain</span>
+            <div
+              className={styles.appMenu}
+              onClick={toggleMenuVisibility}
+              onKeyDown={toggleMenuVisibility}
+              role="button"
+              tabIndex="0"
+            >
+              <img
+                src={menuIcon}
+                className={styles.menuImg}
+                alt={menuVisible ? 'close menu' : 'open menu'}
+              />
+            </div>
+          </div>
+          {menuVisible && (
+            <>
+              <div className={styles.topPanel}>
+                <SiteActions variant="mobile" />
+              </div>
+              <SideMenu onSelect={toggleMenuVisibility} />
+              <div className={styles.sideMenuEndLine} />
+
+              <div className={styles.sideBarFooter}>
+                <div className={styles.separtor} />
+                <AppInfo  version={'1.0.1'}/>
+                {/* <SocialMedia /> */}
+              </div>
+            </>
+          )}
+          </div>   
+          {showContent && <main className={ styles.content }>{children}</main>}
+          {!isMobile && (
+          <div className={styles.topPanel}>
+            <SiteActions />
+          </div>
         )}
-        <main className={ classes.main }>{children}</main>
-        <SnackbarController />
-      </div>
+          <SnackbarController />
+
+          </div>
     </div>
   )
 }
+Layout.propTypes = {
+  children: PropTypes.node.isRequired,
+  isMobile: PropTypes.bool,
+};
+Layout.defaultProps = {
+  isMobile: false,
+};
+
+export default Layout
diff --git a/components/tokens/package.json b/components/tokens/package.json
diff --git a/components/tokens/tokens.js b/components/tokens/tokens.js
diff --git a/components/tokens/tokens.module.css b/components/tokens/tokens.module.css