merge #7 to dev + fix 2 bugs: favorite when filtered, table alignment

TeSC-app · Feb 22, 2021 · 9ea416b · 9ea416b
2 parents e8801c6 + 93d8667
commit 9ea416b
Show file tree

Hide file tree

Showing 39 changed files with 867 additions and 477 deletions.
diff --git a/src/components/App.js b/src/components/App.js
@@ -93,9 +93,15 @@ const App = ({ web3 }) => {
                 <Route path='/' exact component={LandingPage} />
                 :
                 <div className='layout'>
-                    <Sidebar collapsed={collapsed} toggled={toggled} handleToggleSidebar={setToggled} handleCollapseSidebar={handleCollapseSidebar} />
+                    <Sidebar
+                        collapsed={collapsed}
+                        toggled={toggled}
+                        handleToggleSidebar={setToggled}
+                        handleCollapseSidebar={handleCollapseSidebar}
+                        sidebarCollapsed={collapsed}
+                    />
                     <div style={{ width: '100vw', height: '100vh' }}>
-                        <Navbar hasWalletAddress={hasWalletAddress} selectedAccount={account} handleCollapseSidebar={handleCollapseSidebar} sidebarCollapsed={collapsed} />
+                        <Navbar hasWalletAddress={hasWalletAddress} selectedAccount={account} />
 
                         <div className="page">
                             {/* <Segment className='main-segment' raised> */}
@@ -122,7 +128,7 @@ const App = ({ web3 }) => {
                             {/* </Segment> */}
                         </div>
                     </div>
-                    <ToastContainer autoClose={10000}/>
+                    <ToastContainer autoClose={10000} />
                 </div>
             }
             <Dimmer active={screenBlocked} style={{ zIndex: '9999' }}>

diff --git a/src/components/ButtonRegistryAddRemove.js b/src/components/ButtonRegistryAddRemove.js
@@ -70,7 +70,7 @@ const ButtonRegistryAddRemove = ({ contractAddress, domain, isOwner, verbose, on
     return isOwner ? (
         <Popup inverted
             content={`${isInRegistry ? 'Remove entry from' : 'Add entry to'} the TeSC Registry. 
-            This would cost around ${costsEstimatedRegistryAction.eth} ETH (~ ${costsEstimatedRegistryAction.usd} USD).`} 
+            This would cost around ${costsEstimatedRegistryAction.eth} ETH (~ ${costsEstimatedRegistryAction.eur} EUR).`} 
             trigger={
                 <Button
                     basic

diff --git a/src/components/Navbar.js b/src/components/Navbar.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Menu, Icon, Label, Image, Button } from 'semantic-ui-react';
 
-const Navbar = ({ handleCollapseSidebar, sidebarCollapsed, hasWalletAddress, selectedAccount }) => {
+const Navbar = ({  hasWalletAddress, selectedAccount }) => {
 
     //if metamask is installed but not connected
     const handleConnect = () => {
@@ -19,9 +19,9 @@ const Navbar = ({ handleCollapseSidebar, sidebarCollapsed, hasWalletAddress, sel
     return (
         <div className='navbar' >
             <Menu className='navbar--menu' size='huge' style={{ borderRadius: '0px', alignItems: 'center' }}>
-                <div style={{width: 'max-content', height: 'max-content', marginLeft: '10px'}} onClick={handleCollapseSidebar}>
+                {/* <div style={{width: 'max-content', height: 'max-content', marginLeft: '10px'}} onClick={handleCollapseSidebar}>
                     <Icon name={sidebarCollapsed ? 'chevron right' :'chevron left'} size='large' link color='purple'/>
-                </div>
+                </div> */}
 
 
                 {/* <Menu.Item onClick={handleCollapseSidebar} style={{ width: "60px" }}>

diff --git a/src/components/SearchBox.js b/src/components/SearchBox.js
@@ -7,12 +7,17 @@ const SearchBox = ({ label, value, onChange, placeholder, onSubmit, icon, childr
             <Form.Field>
                 <Input
                     value={value}
-                    label={{ content: label, color: 'purple' }}
+                    // label={{ content: label, color: 'purple', basic: 'true' }}
                     placeholder={placeholder}
                     onChange={e => { onChange(e.target.value); }}
                     size='large'
                     icon={icon}
                     className='search-box__input'
+                    actionPosition='left'
+                    action={{
+                        color: 'purple',
+                        content: label,
+                    }}
                 />
             </Form.Field>
             {children}

diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js
@@ -6,13 +6,13 @@ import { Icon, Label, Image, Button, Grid, Popup } from 'semantic-ui-react';
 
 import 'react-pro-sidebar/dist/css/styles.css';
 
-import { FaScroll, FaChartBar, FaAddressBook, FaWallet } from 'react-icons/fa';
+import { FaScroll, FaChartBar, FaAddressBook, FaWallet, FaBars } from 'react-icons/fa';
 import AppContext from '../appContext';
 import sidebarBg from '../static/images/bg1.jpg';
 import axios from 'axios'
 
 
-const Sidebar = ({ image, collapsed, toggled, handleToggleSidebar, handleCollapseSidebar }) => {
+const Sidebar = ({ image, collapsed, toggled, handleToggleSidebar, handleCollapseSidebar, sidebarCollapsed, }) => {
     const { hasWalletAddress, account, networkId } = useContext(AppContext);
     const [blockChainUrl, setBlockChainUrl] = useState('')
 
@@ -63,7 +63,7 @@ const Sidebar = ({ image, collapsed, toggled, handleToggleSidebar, handleCollaps
     };
 
     const renderNetworkLabel = () => {
-        console.log(networkId)
+        console.log(networkId);
         let network = '';
         switch (networkId) {
             case 1:
@@ -88,7 +88,7 @@ const Sidebar = ({ image, collapsed, toggled, handleToggleSidebar, handleCollaps
                 network = 'TeSC Test Net';
                 break;
             default:
-                network = blockChainUrl
+                network = blockChainUrl;
         }
         if (window.ethereum) {
             return network;
@@ -106,9 +106,18 @@ const Sidebar = ({ image, collapsed, toggled, handleToggleSidebar, handleCollaps
             onToggle={handleToggleSidebar}
             className='sidebar'
         >
+            <div id='div-toggle' style={{ width: '100%' }}>
+                <FaBars
+                    size='1.5em'
+                    link
+                    onClick={handleCollapseSidebar}
+                    style={{ margin: `${collapsed ? '10px 20px' : '10px 0 5px 85%'}`, cursor: 'pointer', color: '#a333c8' }}
+                />
+            </div>
+
             <SidebarHeader>
                 <NavLink to='/'>
-                    <Image src={collapsed ? '../images/tesc-logo-notext.png' : '../images/tesc-logo.png'} size='small' style={{ margin: '20px auto', padding: `${collapsed ? '0 5px' : '0'}` }} />
+                    <Image src={collapsed ? '../images/tesc-logo-notext.png' : '../images/tesc-logo.png'} size='small' style={{ margin: '5px auto 10px auto', padding: `${collapsed ? '0 5px' : '0'}` }} />
                 </NavLink>
             </SidebarHeader>
             <SidebarContent>
@@ -129,9 +138,9 @@ const Sidebar = ({ image, collapsed, toggled, handleToggleSidebar, handleCollaps
                         <MenuItem onClick={(e) => handlePageNavigation(e, "/registry/inspect")} >
                             Explore
                         </MenuItem>
-                        <MenuItem onClick={(e) => handlePageNavigation(e, '/registry/add')} >
+                        {/* <MenuItem onClick={(e) => handlePageNavigation(e, '/registry/add')} >
                             Add entry
-                        </MenuItem>
+                        </MenuItem> */}
                         <MenuItem onClick={(e) => handlePageNavigation(e, '/registry/analytics')} >
                             Analytics
                         </MenuItem>

diff --git a/src/components/TableEntry.js b/src/components/TableEntry.js
@@ -126,8 +126,8 @@ function TableEntry(props) {
 
 
     return (
-        <Table.Row key={contractAddress} >
-            <Table.Cell >
+        <Table.Row key={contractAddress} textAlign='center'>
+            <Table.Cell textAlign="left">
                 {!cols.has(COL.TSC) ?
                     <span>
                         {own && hasAllColumns(cols) ?
@@ -139,16 +139,16 @@ function TableEntry(props) {
                     </span> : renderDomainForRegistryInspect()
                 }
             </Table.Cell>
-            <Table.Cell textAlign='center'>{hasAllColumns(cols) ? renderDomain() : !cols.has(COL.TSC) && !hasAllColumns(cols) ? renderDomainForRegistryInspect() : renderTescContractCount()}</Table.Cell>
-            <Table.Cell textAlign='center'>{!cols.has(COL.TSC) ? moment.unix(parseInt(expiry)).format('DD/MM/YYYY') : renderPieChartForVerified()}</Table.Cell>
+            <Table.Cell>{hasAllColumns(cols) ? renderDomain() : !cols.has(COL.TSC) && !hasAllColumns(cols) ? renderDomainForRegistryInspect() : renderTescContractCount()}</Table.Cell>
+            <Table.Cell>{!cols.has(COL.TSC) ? moment.unix(parseInt(expiry)).format('DD/MM/YYYY') : renderPieChartForVerified()}</Table.Cell>
             {!cols.has(COL.TSC) && <TableCellVerification {...tableCellVerifProps} />}
             {cols.has(COL.REG) &&
-                <Table.Cell textAlign="center">
+                <Table.Cell >
                     <ButtonRegistryAddRemove contractAddress={contractAddress} domain={domain} isOwner={own} />
                 </Table.Cell>
             }
             {cols.has(COL.FAV) &&
-                <Table.Cell textAlign="center">
+                <Table.Cell>
                     {renderFavourites()}
                 </Table.Cell>
             }