Updated boba scope page (#1098)

* Fix: Crash on BobaScope * Fix: updated the test cases for history page --------- Co-authored-by: Sahil Kashetwar <sahil@enya.ai>
bobanetwork · Aug 11, 2023 · 3cbc31c · 3cbc31c
1 parent e6b1868
commit 3cbc31c
Show file tree

Hide file tree

Showing 13 changed files with 363 additions and 312 deletions.
diff --git a/packages/boba/gateway/src/components/global/searchInput/index.tsx b/packages/boba/gateway/src/components/global/searchInput/index.tsx
@@ -0,0 +1,23 @@
+import React, { ChangeEventHandler } from 'react'
+import { SearchInputContainer, Input } from './styles'
+import MagnifyingGlass from 'assets/images/icons/magnifyingGlass.svg'
+import { Svg } from 'components/global/svg'
+
+export interface SearchInputProps {
+  placeholder: string
+  value: string
+  onChange: ChangeEventHandler<HTMLInputElement>
+}
+
+export const SearchInput = (props: SearchInputProps) => {
+  return (
+    <SearchInputContainer>
+      <Svg src={MagnifyingGlass} />
+      <Input // search bar styles
+        placeholder="Search Here"
+        value={props.value}
+        onChange={props.onChange}
+      />
+    </SearchInputContainer>
+  )
+}
diff --git a/packages/boba/gateway/src/components/global/searchInput/styles.ts b/packages/boba/gateway/src/components/global/searchInput/styles.ts
@@ -0,0 +1,75 @@
+import styled, { css } from 'styled-components'
+import { screen } from 'themes/screens'
+
+export const SearchInputContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-size: 16px;
+  border-radius: 12px;
+  ${(props) =>
+    props.theme.name === 'light' &&
+    css`
+      background: ${props.theme.colors.gray[50]};
+      border: 1px solid ${props.theme.colors.gray[500]};
+      color: ${props.theme.colors.gray[600]};
+      fill: ${props.theme.colors.gray[600]};
+      &:hover {
+        border: 1px solid ${props.theme.colors.green[800]};
+      }
+    `}
+  ${(props) =>
+    props.theme.name === 'dark' &&
+    css`
+      background: ${props.theme.colors.gray[500]};
+      border: 1px solid ${props.theme.colors.gray[300]};
+      color: ${props.theme.colors.gray[200]};
+      fill: ${props.theme.colors.gray[50]};
+      &:hover {
+        border: 1px solid ${props.theme.colors.green[300]};
+      }
+    `}
+
+  div {
+    padding-left: 5px;
+    display: flex;
+  }
+  svg {
+    width: 16px;
+    height: auto;
+  }
+  @media ${screen.mobile} {
+    width: 120px;
+    height: 30px;
+    svg {
+      width: 8px;
+      height: auto;
+    }
+  }
+`
+// TODO: get rid of duplicates
+export const Input = styled.input`
+  flex: 1;
+  padding: 10px;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  background: transparent;
+  box-shadow: none;
+  outline: none;
+  border: none;
+  ${(props) =>
+    props.theme.name === 'light' &&
+    css`
+      color: ${props.theme.colors.gray[600]};
+    `}
+  ${(props) =>
+    props.theme.name === 'dark' &&
+    css`
+      color: ${props.theme.colors.gray[200]};
+    `}
+  @media ${screen.mobile} {
+    width: 120px;
+    font-size: 12px;
+  }
+`
diff --git a/packages/boba/gateway/src/components/seven/FastExit.js b/packages/boba/gateway/src/components/seven/FastExit.js
@@ -18,17 +18,13 @@ import React from 'react'
 import { Typography } from '@mui/material'
 
 import * as S from './Transaction.styles'
+import { ExitWrapper, ExitsWrapper, Hash, HashContainer } from './styles'
 
 import networkService from 'services/networkService'
 
 function FastExit({
-  link,
-  status,
-  chain,
   blockNumber,
-  oriChain,
   oriHash,
-  age,
   unixTime
 }) {
 
@@ -44,7 +40,7 @@ function FastExit({
   let timeLabel = `Fast Exit was started ${secondsAgo} seconds ago`
 
   return (
-        <S.Wrapper>
+        <ExitsWrapper>
           <S.GridContainer container
             spacing={2}
             direction="row"
@@ -59,26 +55,25 @@ function FastExit({
                 alignItems:'center',
               }}
             >
-                <div style={{display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems:'flex-start'}}>
+                <ExitWrapper>
                   <Typography variant="overline" style={{fontSize: '0.9em', lineHeight: '1.0em'}}>{blockNumber}</Typography>
                   <Typography variant="overline" style={{lineHeight: '1.0em', color: 'green'}}>
                     {timeLabel}
                   </Typography>
-                  <Typography variant="body3" style={{fontSize: '0.7em', lineHeight: '1.0em'}}>
+                  <HashContainer variant="body3">
                     Hash:&nbsp;
-                    <a
+                    <Hash
                       href={chainLink({hash:oriHash})}
                       target={'_blank'}
                       rel='noopener noreferrer'
-                      style={{ color: 'rgba(255, 255, 255, 0.3)', fontFamily: 'MessinaSB', fontSize: '0.8em'}}
                     >
                       {oriHash}
-                    </a>
-                  </Typography>
-                </div>
+                    </Hash>
+                  </HashContainer>
+                </ExitWrapper>
             </S.GridItemTag>
           </S.GridContainer>
-        </S.Wrapper>
+        </ExitsWrapper>
       )
 
 }

diff --git a/packages/boba/gateway/src/components/seven/Seven.js b/packages/boba/gateway/src/components/seven/Seven.js
@@ -18,17 +18,13 @@ import React from 'react'
 import { Typography } from '@mui/material'
 
 import * as S from './Transaction.styles'
+import { Hash, ExitsWrapper, ExitWrapper, HashContainer } from './styles'
 
 import networkService from 'services/networkService'
 
 function Seven({
-  link,
-  status,
-  chain,
   blockNumber,
-  oriChain,
   oriHash,
-  age,
   unixTime
 }) {
 
@@ -57,7 +53,7 @@ function Seven({
   }
 
     return (
-      <S.Wrapper>
+      <ExitsWrapper>
           <S.GridContainer container
             spacing={2}
             direction="row"
@@ -72,7 +68,7 @@ function Seven({
                 alignItems:'center',
               }}
             >
-                <div style={{display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems:'flex-start'}}>
+                <ExitWrapper>
                   <Typography variant="overline" style={{fontSize: '0.9em', lineHeight: '1.0em'}}>{blockNumber}</Typography>
                   {overdue < 0 &&
                     <Typography variant="overline" style={{lineHeight: '1.0em', color: 'yellow'}}>
@@ -84,21 +80,20 @@ function Seven({
                       {timeLabel}
                     </Typography>
                   }
-                  <Typography variant="body3" style={{fontSize: '0.7em', lineHeight: '1.0em'}}>
+                  <HashContainer variant="body3">
                     Hash:&nbsp;
-                    <a
+                    <Hash
                       href={chainLink({hash:oriHash})}
                       target={'_blank'}
                       rel='noopener noreferrer'
-                      style={{ color: 'rgba(255, 255, 255, 0.3)', fontFamily: 'MessinaSB', fontSize: '0.8em'}}
                     >
                       {oriHash}
-                    </a>
-                  </Typography>
-                </div>
+                    </Hash>
+                  </HashContainer>
+                </ExitWrapper>
             </S.GridItemTag>
           </S.GridContainer>
-        </S.Wrapper>
+        </ExitsWrapper>
       )
 
 }

diff --git a/packages/boba/gateway/src/components/seven/styles.ts b/packages/boba/gateway/src/components/seven/styles.ts
@@ -0,0 +1,59 @@
+import styled, { css } from 'styled-components'
+import { Typography } from 'components/global'
+
+export const ExitsWrapper = styled.div`
+  background: ${(props) => props.theme.colors.popup};
+  padding: 10px;
+  border-radius: 12px;
+  ${(props) =>
+    props.theme.name === 'light' &&
+    css`
+      border: solid 1px ${props.theme.colors.gray[400]};
+      &:hover {
+        background: ${props.theme.colors.gray[300]};
+        border: solid 1px ${props.theme.colors.gray[500]};
+      }
+    `}
+  ${(props) =>
+    props.theme.name === 'dark' &&
+    css`
+      border: solid 1px ${props.theme.colors.gray[300]};
+      &:hover {
+        background: ${props.theme.colors.gray[300]};
+      }
+    `}
+`
+
+export const ExitWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 5px;
+`
+
+export const HashContainer = styled(Typography)`
+  ${(props) =>
+    props.theme.name === 'light' &&
+    css`
+      color: ${props.theme.colors.gray[700]};
+    `}
+  ${(props) =>
+    props.theme.name === 'dark' &&
+    css`
+      color: ${props.theme.colors.gray[50]};
+    `}
+`
+
+export const Hash = styled.a`
+  ${(props) =>
+    props.theme.name === 'light' &&
+    css`
+      color: ${props.theme.colors.gray[700]};
+    `}
+  ${(props) =>
+    props.theme.name === 'dark' &&
+    css`
+      color: ${props.theme.colors.gray[50]};
+    `}
+`
diff --git a/packages/boba/gateway/src/containers/bobaScope/BobaScope.js b/packages/boba/gateway/src/containers/bobaScope/BobaScope.js
@@ -28,15 +28,16 @@ import { fetchSevens, fetchFastExits } from 'actions/networkAction'
 import { selectBaseEnabled, selectActiveDataTab, selectSevens, selectFastExits } from 'selectors'
 
 import Tabs from 'components/tabs/Tabs'
-import Input from 'components/input/Input'
 
 import Sevens from './Sevens'
 import FastExits from './FastExits'
 
 import useInterval from 'hooks/useInterval'
 
 import { POLL_INTERVAL } from 'util/constant'
-import { ContentContainer, Header, ScopePageContainer } from './History.styles';
+import {Header, BobaScopeContainer, ContentContainer} from './styles'
+import { TabComponent } from 'components/global/tabs';
+import { SearchInput } from 'components/global/searchInput';
 
 function BobaScope() {
 
@@ -70,43 +71,32 @@ function BobaScope() {
   }, POLL_INTERVAL)
 
   return (
-    <ScopePageContainer>
+    <BobaScopeContainer>
       <Header>
-        <SearchInputContainer>
-          <Input
-            size='small'
-            placeholder='Search by hash'
-            value={searchData}
-            onChange={i => { setSearchData(i.target.value) }}
-            style={{
-              flex: 1,
-              marginBottom: 0,
-              minWidth: '250px',
-            }}
-          />
-        </SearchInputContainer>
+        <SearchInput
+        placeholder='Search by hash'
+        value={searchData}
+        onChange={i => { setSearchData(i.target.value) }}/>
       </Header>
       <ContentContainer>
-        <Tabs
-          onClick={tab => { dispatch(setActiveDataTab(tab)) }}
-          activeTab={activeTab}
-          tabs={[ 'Seven Day Queue', 'Fast Exits' ]}
+      <TabComponent
+          tabs={[
+            {label:"Seven Day Queue",
+              content:(<Sevens
+                searchData={searchData}
+                sevens={sevens}
+              />)
+            },
+            {label:"Fast Exits",
+              content:(          <FastExits
+                searchData={searchData}
+                data={fastExits}
+              />)
+            }
+        ]}
         />
-
-        {activeTab === 'Seven Day Queue' && (
-          <Sevens
-            searchData={searchData}
-            sevens={sevens}
-          />
-        )}
-        {activeTab === 'Fast Exits' && (
-          <FastExits
-            searchData={searchData}
-            data={fastExits}
-          />
-        )}
       </ContentContainer>
-    </ScopePageContainer>
+    </BobaScopeContainer>
   );
 }