This repository has been archived by the owner on Feb 2, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
12 changed files
with
643 additions
and
33 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
43 changes: 43 additions & 0 deletions
43
src/apps/explorer/components/SolverDetailsTableWidget/SolverDetailsTableWithData.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import React, { useContext, useState, useEffect } from 'react' | ||
|
|
||
| import { EmptyItemWrapper } from 'components/common/StyledUserDetailsTable' | ||
| import useFirstRender from 'hooks/useFirstRender' | ||
| import { useMediaBreakpoint } from 'hooks/useMediaBreakPoint' | ||
| import { SettlementsTableContext } from 'apps/explorer/components/SettlementsTableWidget/context/SettlementsTableContext' | ||
| import { DEFAULT_TIMEOUT } from 'const' | ||
| import SolverDetailsTable from 'components/solver/SolverDetailsTable' | ||
| import CowLoading from 'components/common/CowLoading' | ||
|
|
||
| export const SolverDetailsTableWithData: React.FC = () => { | ||
| const { data: settlements, networkId, tableState } = useContext(SettlementsTableContext) | ||
| const isFirstRender = useFirstRender() | ||
| const [isFirstLoading, setIsFirstLoading] = useState(true) | ||
| const isDesktop = useMediaBreakpoint(['xl', 'lg']) | ||
|
|
||
| useEffect(() => { | ||
| setIsFirstLoading(true) | ||
| }, [networkId]) | ||
|
|
||
| useEffect(() => { | ||
| let timeOutMs = 0 | ||
| if (!settlements) { | ||
| timeOutMs = DEFAULT_TIMEOUT | ||
| } | ||
|
|
||
| const timeOutId: NodeJS.Timeout = setTimeout(() => { | ||
| setIsFirstLoading(false) | ||
| }, timeOutMs) | ||
|
|
||
| return (): void => { | ||
| clearTimeout(timeOutId) | ||
| } | ||
| }, [settlements, settlements?.length]) | ||
|
|
||
| return isFirstRender || isFirstLoading ? ( | ||
| <EmptyItemWrapper> | ||
| <CowLoading /> | ||
| </EmptyItemWrapper> | ||
| ) : ( | ||
| <SolverDetailsTable settlements={settlements} tableState={tableState} showBorderTable={isDesktop} /> | ||
| ) | ||
| } |
78 changes: 78 additions & 0 deletions
78
src/apps/explorer/components/SolverDetailsTableWidget/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| import React from 'react' | ||
| import styled from 'styled-components' | ||
| import { Network, UiError } from 'types' | ||
| import TablePagination from 'apps/explorer/components/common/TablePagination' | ||
| import { SolverDetailsTableWithData } from './SolverDetailsTableWithData' | ||
| import { SettlementsTableContext } from '../SettlementsTableWidget/context/SettlementsTableContext' | ||
| import { useTable } from 'hooks/useTable' | ||
| import { Settlement } from 'hooks/useGetSettlements' | ||
| import { ConnectionStatus } from 'components/ConnectionStatus' | ||
| import { Notification } from 'components/Notification' | ||
| import { EmptyItemWrapper } from 'components/common/StyledUserDetailsTable' | ||
| import CowLoading from 'components/common/CowLoading' | ||
|
|
||
| const Wrapper = styled.div` | ||
| display: flex; | ||
| flex: 1; | ||
| flex-direction: column; | ||
| ` | ||
| const TableHeader = styled.div` | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| margin-bottom: 2rem; | ||
| ` | ||
|
|
||
| type Props = { | ||
| settlements: Settlement[] | ||
| isLoading: boolean | ||
| error: UiError | undefined | ||
| networkId: Network | undefined | ||
| } | ||
|
|
||
| const SolverDetailsTableWidget: React.FC<Props> = ({ settlements, isLoading, error, networkId }) => { | ||
| const { | ||
| state: tableState, | ||
| setPageSize, | ||
| handleNextPage, | ||
| setPageOffset, | ||
| handlePreviousPage, | ||
| } = useTable({ initialState: { pageOffset: 0, pageSize: 20 } }) | ||
|
|
||
| tableState['hasNextPage'] = tableState.pageOffset + tableState.pageSize < settlements.length | ||
| tableState['totalResults'] = settlements.length | ||
|
|
||
| return ( | ||
| <SettlementsTableContext.Provider | ||
| value={{ | ||
| data: settlements.slice(tableState.pageOffset, tableState.pageOffset + tableState.pageSize), | ||
| error, | ||
| isLoading, | ||
| networkId, | ||
| tableState, | ||
| setPageSize, | ||
| setPageOffset, | ||
| handleNextPage, | ||
| handlePreviousPage, | ||
| }} | ||
| > | ||
| <ConnectionStatus /> | ||
| <Wrapper> | ||
| <TableHeader> | ||
| <h2>Settlements</h2> | ||
| {error && <Notification type={error.type} message={error.message} />} | ||
| <TablePagination context={SettlementsTableContext} /> | ||
| </TableHeader> | ||
| {isLoading ? ( | ||
| <EmptyItemWrapper> | ||
| <CowLoading /> | ||
| </EmptyItemWrapper> | ||
| ) : ( | ||
| <SolverDetailsTableWithData /> | ||
| )} | ||
| </Wrapper> | ||
| </SettlementsTableContext.Provider> | ||
| ) | ||
| } | ||
|
|
||
| export default SolverDetailsTableWidget |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,159 @@ | ||
| import React from 'react' | ||
| import styled from 'styled-components' | ||
| import { useParams } from 'react-router' | ||
| import { Helmet } from 'react-helmet' | ||
| import { isAddress } from 'web3-utils' | ||
| import { abbreviateString } from 'utils' | ||
| import { useGetSettlements } from 'hooks/useGetSettlements' | ||
| import { useSolversInfo } from 'hooks/useSolversInfo' | ||
| import { useMediaBreakpoint } from 'hooks/useMediaBreakPoint' | ||
| import { media } from 'theme/styles/media' | ||
|
|
||
| import RedirectToSearch from 'components/RedirectToSearch' | ||
| import { Card, CardContent } from 'components/common/Card' | ||
| import { CardRow } from 'components/common/CardRow' | ||
| import { DateDisplay } from 'components/common/DateDisplay' | ||
| import { BlockExplorerLink } from 'components/common/BlockExplorerLink' | ||
| import Identicon from 'components/common/Identicon' | ||
| import { HelpTooltip } from 'components/Tooltip' | ||
| import { Wrapper, FlexContainerVar, TitleAddress } from 'apps/explorer/pages/styled' | ||
| import SolverDetailsTableWidget from 'apps/explorer/components/SolverDetailsTableWidget' | ||
| import { numberFormatter } from 'apps/explorer/components/SummaryCardsWidget/utils' | ||
| import { APP_TITLE } from 'apps/explorer/const' | ||
| import { useNetworkId } from 'state/network' | ||
|
|
||
| const DESKTOP_TEXT_SIZE = 1.8 // rem | ||
| const MOBILE_TEXT_SIZE = 1.65 // rem | ||
|
|
||
| const HeaderContainer = styled.div` | ||
| display: flex; | ||
| align-items: center; | ||
| span:first-child { | ||
| margin: 0 0 0 0.5rem; | ||
| } | ||
| ` | ||
|
|
||
| const StyledCard = styled(Card)` | ||
| ${media.mediumDown} { | ||
| .card-container { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: space-between; | ||
| height: 60px; | ||
| } | ||
| } | ||
| @media (max-width: 600px) { | ||
| .card-container { | ||
| height: auto; | ||
| } | ||
| } | ||
| ` | ||
|
|
||
| const AddressContainer = styled(TitleAddress)` | ||
| margin: 0 0 0 1rem; | ||
| ` | ||
| const SolverInfoContainer = styled.div` | ||
| display: flex; | ||
| align-items: baseline; | ||
| ` | ||
|
|
||
| const TableContainer = styled.div` | ||
| display: flex; | ||
| align-items: center; | ||
| margin-top: 6rem; | ||
| ` | ||
| const SolverName = styled.p` | ||
| font-size: 1.6rem; | ||
| margin: 0 0 0 1rem; | ||
| ` | ||
|
|
||
| const SolverDetails: React.FC = () => { | ||
| const { solverAddress } = useParams<{ solverAddress: string }>() | ||
| const networkId = useNetworkId() || undefined | ||
| const solversInfo = useSolversInfo(networkId) | ||
| const { settlements, isLoading, error } = useGetSettlements(networkId, [], solverAddress) | ||
| const solverName = solversInfo?.find((solver) => solver.address.toLowerCase() === solverAddress.toLowerCase())?.name | ||
| const totalVolumeUSD = settlements.reduce((acc, settlement) => acc + settlement.totalVolumeUsd, 0) | ||
| const isDesktop = useMediaBreakpoint(['xl', 'lg']) | ||
| const valueTextSize = isDesktop ? DESKTOP_TEXT_SIZE : MOBILE_TEXT_SIZE | ||
|
|
||
| if (!isAddress(solverAddress.toLowerCase())) { | ||
| return <RedirectToSearch from="solvers" /> | ||
| } | ||
|
|
||
| return ( | ||
| <Wrapper> | ||
| <Helmet> | ||
| <title>Solver Details - {APP_TITLE}</title> | ||
| </Helmet> | ||
| <h1>Solver Details</h1> | ||
| <FlexContainerVar> | ||
| <HeaderContainer> | ||
| <Identicon address={solverAddress} size="md" /> | ||
| <SolverInfoContainer> | ||
| {solverName && <SolverName>{solverName}</SolverName>} | ||
| <AddressContainer | ||
| textToCopy={solverAddress} | ||
| contentsToDisplay={ | ||
| <BlockExplorerLink | ||
| showLogo | ||
| type="address" | ||
| networkId={networkId} | ||
| identifier={solverAddress} | ||
| label={abbreviateString(solverAddress, 6, 4)} | ||
| /> | ||
| } | ||
| /> | ||
| </SolverInfoContainer> | ||
| </HeaderContainer> | ||
| </FlexContainerVar> | ||
| <CardRow> | ||
| <StyledCard xs={6} sm={3} md={3} lg={3}> | ||
| <CardContent | ||
| variant="double" | ||
| label1="Total trades" | ||
| icon1={<HelpTooltip tooltip="Total trades settled by this solver" />} | ||
| value1={numberFormatter(settlements[0]?.solver.numberOfTrades || 0)} | ||
| loading={isLoading} | ||
| valueSize={valueTextSize} | ||
| /> | ||
| </StyledCard> | ||
| <StyledCard xs={6} sm={3} md={3} lg={3}> | ||
| <CardContent | ||
| variant="double" | ||
| icon1={<HelpTooltip tooltip="Total volume settled by this solver" />} | ||
| label1="Total volume" | ||
| value1={`$${Number(totalVolumeUSD) ? numberFormatter(totalVolumeUSD) : 0}`} | ||
| loading={isLoading} | ||
| valueSize={valueTextSize} | ||
| /> | ||
| </StyledCard> | ||
| <StyledCard xs={6} sm={3} md={3} lg={3}> | ||
| <CardContent | ||
| variant="double" | ||
| label1="Total settlements" | ||
| icon1={<HelpTooltip tooltip="Total settlements by this solver" />} | ||
| value1={numberFormatter(settlements.length)} | ||
| loading={isLoading} | ||
| valueSize={valueTextSize} | ||
| /> | ||
| </StyledCard> | ||
| <StyledCard xs={6} sm={3} md={3} lg={3}> | ||
| <CardContent | ||
| variant="double" | ||
| label1="Active since" | ||
| icon1={<HelpTooltip tooltip="When the solver became active as was able to submit solutions" />} | ||
| value1={<DateDisplay date={new Date()} showIcon={true} />} | ||
| loading={isLoading} | ||
| valueSize={valueTextSize} | ||
| /> | ||
| </StyledCard> | ||
| </CardRow> | ||
| <TableContainer> | ||
| <SolverDetailsTableWidget settlements={settlements} isLoading={isLoading} error={error} networkId={networkId} /> | ||
| </TableContainer> | ||
| </Wrapper> | ||
| ) | ||
| } | ||
|
|
||
| export default SolverDetails |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.