Home page Epic

.github/workflows/ci.yml

@@ -28,7 +28,7 @@ jobs:
       - name: Set up node
         uses: actions/setup-node@v2
         with:
-          node-version: 12
+          node-version: 16
 
       - name: Set output of cache
         id: yarn-cache
@@ -67,7 +67,7 @@ jobs:
       - name: Set up node
         uses: actions/setup-node@v2
         with:
-          node-version: 12
+          node-version: 16
 
       - name: Load dependencies
         id: cache-node-modules
@@ -98,7 +98,7 @@ jobs:
       - name: Set up node
         uses: actions/setup-node@v2
         with:
-          node-version: 12
+          node-version: 16
 
       - name: Load dependencies
         id: cache-node-modules
@@ -132,7 +132,7 @@ jobs:
       - name: Set up node
         uses: actions/setup-node@v2
         with:
-          node-version: 12
+          node-version: 16
 
       - name: Load dependencies
         id: cache-node-modules

package.json

@@ -5,7 +5,7 @@
   "main": "src/index.js",
   "sideEffects": false,
   "engines": {
-    "node": "12"
+    "node": "16"
   },
   "scripts": {
     "start": "npm run start:explorer",
@@ -52,7 +52,7 @@
   "dependencies": {
     "@amcharts/amcharts4": "^4.9.12",
     "@apollo/client": "^3.1.5",
-    "@cowprotocol/cow-sdk": "^0.0.9",
+    "@cowprotocol/cow-sdk": "^0.0.12",
     "@fortawesome/fontawesome-svg-core": "^1.2.26",
     "@fortawesome/free-regular-svg-icons": "^5.12.0",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
@@ -83,11 +83,12 @@
     "detect-browser": "^5.1.0",
     "eth-json-rpc-middleware": "^4.4.1",
     "ethers": "^5.0.26",
-    "graphql": "^15.3.0",
+    "flexsearch": "^0.7.21",
+    "graphql": "^16.5.0",
     "inter-ui": "^3.15.0",
     "joi": "^17.2.0",
     "json-rpc-engine": "5.3.0",
-    "lightweight-charts": "^3.2.0",
+    "lightweight-charts": "^3.8.0",
     "modali": "^1.2.0",
     "node-cache": "^5.1.0",
     "npm-run-all": "^4.1.5",
@@ -133,6 +134,7 @@
     "@types/cytoscape-popper": "^2.0.0",
     "@types/enzyme": "^3.10.4",
     "@types/enzyme-adapter-react-16": "^1.0.5",
+    "@types/flexsearch": "^0.7.3",
     "@types/hapi__joi": "^16.0.12",
     "@types/jest": "^26.0.8",
     "@types/node": "^14.0.14",
@@ -167,7 +169,7 @@
     "eslint-plugin-react": "^7.21.2",
     "eslint-plugin-react-hooks": "^4.1.2",
     "eslint-utils": ">=2.1.0",
-    "favicons-webpack-plugin": "^3.0.1",
+    "favicons-webpack-plugin": "^4.0.0",
     "file-loader": "^6.0.0",
     "fork-ts-checker-webpack-plugin": "^4.0.3",
     "frontmatter-markdown-loader": "^3.2.1",

src/apps/explorer/components/OrdersTableWidget/OrdersTableWithData.tsx

@@ -10,7 +10,7 @@ import CowLoading from 'components/common/CowLoading'
 
 export const OrdersTableWithData: React.FC = () => {
   const {
-    orders,
+    data: orders,
     addressAccountParams: { ownerAddress, networkId },
   } = useContext(OrdersTableContext)
   const isFirstRender = useFirstRender()

src/apps/explorer/components/OrdersTableWidget/context/OrdersTableContext.tsx

@@ -8,9 +8,9 @@ export type BlockchainNetwork = Network | undefined
 
 type CommonState = {
   addressAccountParams: { networkId: BlockchainNetwork; ownerAddress: string }
-  orders: Order[] | undefined
+  data: Order[] | undefined
   error?: UiError
-  isOrdersLoading: boolean
+  isLoading: boolean
   tableState: TableState
 } & TableStateSetters
 

src/apps/explorer/components/OrdersTableWidget/index.tsx

@@ -2,11 +2,11 @@ import React from 'react'
 import styled from 'styled-components'
 
 import ExplorerTabs from 'apps/explorer/components/common/ExplorerTabs/ExplorerTabs'
+import TablePagination from 'apps/explorer/components/common/TablePagination'
 import { TabItemInterface } from 'components/common/Tabs/Tabs'
 import { useTable } from './useTable'
 import { OrdersTableWithData } from './OrdersTableWithData'
 import { OrdersTableContext, BlockchainNetwork } from './context/OrdersTableContext'
-import PaginationOrdersTable from './PaginationOrdersTable'
 import { useGetAccountOrders } from 'hooks/useGetOrders'
 import Spinner from 'components/common/Spinner'
 import { ConnectionStatus } from 'components/ConnectionStatus'
@@ -44,7 +44,7 @@ const WrapperExtraComponents = styled.div`
 
 const ExtraComponentNode: React.ReactNode = (
   <WrapperExtraComponents>
-    <PaginationOrdersTable />
+    <TablePagination context={OrdersTableContext} />
   </WrapperExtraComponents>
 )
 interface Props {
@@ -61,7 +61,7 @@ const OrdersTableWidget: React.FC<Props> = ({ ownerAddress, networkId }) => {
   } = useTable({ initialState: { pageOffset: 0, pageSize: 20 } })
   const {
     orders,
-    isLoading: isOrdersLoading,
+    isLoading,
     error,
     isThereNext: isThereNextOrder,
   } = useGetAccountOrders(ownerAddress, tableState.pageSize, tableState.pageOffset, tableState.pageIndex)
@@ -72,9 +72,9 @@ const OrdersTableWidget: React.FC<Props> = ({ ownerAddress, networkId }) => {
     <OrdersTableContext.Provider
       value={{
         addressAccountParams,
-        orders,
+        data: orders,
         error,
-        isOrdersLoading,
+        isLoading,
         tableState,
         setPageSize,
         handleNextPage,
@@ -83,7 +83,7 @@ const OrdersTableWidget: React.FC<Props> = ({ ownerAddress, networkId }) => {
     >
       <ConnectionStatus />
       {error && <Notification type={error.type} message={error.message} />}
-      <StyledExplorerTabs tabItems={tabItems(isOrdersLoading)} extra={ExtraComponentNode} />
+      <StyledExplorerTabs tabItems={tabItems(isLoading)} extra={ExtraComponentNode} />
     </OrdersTableContext.Provider>
   )
 }

src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx

@@ -0,0 +1,145 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+import { media } from 'theme/styles/media'
+import { formatDistanceToNowStrict } from 'date-fns'
+
+import { Card, CardContent } from 'components/common/Card'
+import { CardRow } from 'components/common/CardRow'
+import { TotalSummaryResponse } from './useGetSummaryData'
+import { abbreviateString } from 'utils'
+import { useMediaBreakpoint } from 'hooks/useMediaBreakPoint'
+import { calcDiff, getColorBySign } from 'components/common/Card/card.utils'
+import { CopyButton } from 'components/common/CopyButton'
+import { LinkWithPrefixNetwork } from 'components/common/LinkWithPrefixNetwork'
+import { numberFormatter } from './utils'
+
+const BatchInfoHeight = '21.6rem'
+const DESKTOP_TEXT_SIZE = 1.8 // rem
+const MOBILE_TEXT_SIZE = 1.65 // rem
+
+const DoubleContentSize = css`
+  min-height: ${BatchInfoHeight};
+`
+const WrapperColumnChart = styled(Card)`
+  background: transparent;
+  & > div:first-child {
+    all: unset;
+    border: 1px solid ${({ theme }): string => theme.borderPrimary};
+    border-radius: 0.4rem;
+    overflow: hidden;
+  }
+`
+
+const DoubleCardStyle = css`
+  ${DoubleContentSize}
+
+  ${media.xSmallDown}, ${media.tinyDown} {
+    min-height: 15rem;
+  }
+`
+const WrappedDoubleCard = styled(Card)`
+  ${DoubleCardStyle}
+`
+
+const WrapperDoubleContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 3rem;
+
+  ${media.mediumDownMd} {
+    gap: 2rem;
+  }
+`
+
+interface SummaryCardsProps {
+  summaryData: TotalSummaryResponse | undefined
+  children: React.ReactNode
+}
+
+export function SummaryCards({ summaryData, children }: SummaryCardsProps): JSX.Element {
+  const { batchInfo, dailyTransactions, totalTokens, volumeUsd, dailyFees, isLoading } = summaryData || {}
+  const isDesktop = useMediaBreakpoint(['xl', 'lg'])
+  const valueTextSize = isDesktop ? DESKTOP_TEXT_SIZE : MOBILE_TEXT_SIZE
+  const rowsByCard = isDesktop ? '2row' : '3row'
+  const diffTransactions = (dailyTransactions && calcDiff(dailyTransactions.now, dailyTransactions.before)) || 0
+  const diffFees = (dailyFees && calcDiff(dailyFees.now, dailyFees.before)) || 0
+
+  return (
+    <CardRow>
+      <WrapperColumnChart xs={12} sm={8} md={8} lg={5}>
+        {children}
+      </WrapperColumnChart>
+      <WrappedDoubleCard xs={12} sm={4} md={4} lg={3}>
+        <WrapperDoubleContent>
+          <CardContent
+            variant="3row"
+            label1="Last Batch"
+            value1={batchInfo && formatDistanceToNowStrict(batchInfo.lastBatchDate, { addSuffix: true })}
+            loading={isLoading}
+            valueSize={valueTextSize}
+          />
+          <CardContent
+            variant={rowsByCard}
+            label1="Batch ID"
+            value1={
+              batchInfo && (
+                <>
+                  <LinkWithPrefixNetwork to={`/tx/${batchInfo.batchId}`}>
+                    {abbreviateString(batchInfo?.batchId, 6, 4)}
+                  </LinkWithPrefixNetwork>
+                  <CopyButton heightIcon={1.35} text={batchInfo?.batchId || ''} />
+                </>
+              )
+            }
+            loading={isLoading}
+            valueSize={valueTextSize}
+          />
+        </WrapperDoubleContent>
+      </WrappedDoubleCard>
+      <Card emptyContent xs={12} sm={12} md={12} lg={4}>
+        <CardRow>
+          <Card xs={6} sm={3} md={3} lg={6}>
+            <CardContent
+              variant={rowsByCard}
+              label1="24h Transactions"
+              value1={dailyTransactions?.now.toLocaleString()}
+              caption1={`${diffTransactions.toFixed(2)}%`}
+              captionColor={getColorBySign(diffTransactions)}
+              loading={isLoading}
+              valueSize={valueTextSize}
+            />
+          </Card>
+          <Card xs={6} sm={3} md={3} lg={6}>
+            <CardContent
+              variant="2row"
+              label1="Total Tokens"
+              value1={totalTokens?.toLocaleString()}
+              loading={isLoading}
+              valueSize={valueTextSize}
+            />
+          </Card>
+          <Card xs={6} sm={3} md={3} lg={6}>
+            <CardContent
+              variant={rowsByCard}
+              label1="24h Fees"
+              value1={`$${numberFormatter(dailyFees?.now || 0)}`}
+              caption1={`${diffFees.toFixed(2)}%`}
+              captionColor={getColorBySign(diffFees)}
+              loading={isLoading}
+              valueSize={valueTextSize}
+            />
+          </Card>
+          <Card xs={6} sm={3} md={3} lg={6}>
+            <CardContent
+              variant={rowsByCard}
+              label1="Total Volume"
+              value1={`$${numberFormatter(volumeUsd || 0)}`}
+              loading={isLoading}
+              valueSize={valueTextSize}
+            />
+          </Card>
+        </CardRow>
+      </Card>
+    </CardRow>
+  )
+}

src/apps/explorer/components/SummaryCardsWidget/VolumeChart/VolumeChart.stories.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { Story, Meta } from '@storybook/react'
+import styled from 'styled-components'
+
+import { GlobalStyles, ThemeToggler } from 'storybook/decorators'
+import { VolumeChart, VolumeChartProps } from './VolumeChart'
+import { VolumePeriod } from './VolumeChartWidget'
+import volumeDataJson from './volumeData.json'
+import { buildVolumeData } from './useGetVolumeData'
+
+export default {
+  title: 'ExplorerApp/Chart',
+  component: VolumeChart,
+  decorators: [GlobalStyles, ThemeToggler],
+  argTypes: {
+    label: { control: 'text' },
+    variant: { control: 'default' },
+    size: { control: 'default' },
+    as: { control: null },
+    theme: { control: null },
+    forwardedAs: { control: null },
+  },
+} as Meta
+
+const WrapperVolumeChart = styled.div`
+  height: 19.6rem;
+`
+
+const Template: Story<VolumeChartProps> = (args) => (
+  <WrapperVolumeChart>
+    <VolumeChart {...args} />
+  </WrapperVolumeChart>
+)
+
+export const Default = Template.bind({})
+Default.args = {
+  volumeData: {
+    ...buildVolumeData(volumeDataJson, VolumePeriod.YEARLY),
+    isLoading: false,
+  },
+}