Merge pull request #160 from QuickSwap/hotfix/preformance-improve

Improve performance
QuickSwap · May 25, 2022 · 36ee4d4 · 36ee4d4
2 parents 770cb94 + b29c15e
commit 36ee4d4
Show file tree

Hide file tree

Showing 17 changed files with 30 additions and 44,498 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,10 +23,6 @@
     "@types/react-window": "^1.8.5",
     "@types/styled-components": "^5.1.15",
     "@types/testing-library__cypress": "^5.0.5",
-    "@types/wcag-contrast": "^3.0.0",
-    "@types/workbox-core": "^4.3.1",
-    "@types/workbox-precaching": "^4.3.1",
-    "@types/workbox-routing": "^4.3.1",
     "@typescript-eslint/eslint-plugin": "^5.3.1",
     "@typescript-eslint/parser": "^5.3.1",
     "@uniswap/governance": "^1.0.2",
@@ -66,7 +62,6 @@
     "lodash.flatmap": "^4.5.0",
     "multicodec": "^3.0.1",
     "multihashes": "^3.0.1",
-    "node-vibrant": "^3.1.5",
     "polished": "^3.3.2",
     "prettier": "^1.17.0",
     "qs": "^6.9.4",
@@ -86,11 +81,7 @@
     "source-map-explorer": "^2.5.2",
     "start-server-and-test": "^1.11.0",
     "typescript": "^4.1.2",
-    "wcag-contrast": "^3.0.0",
-    "web3": "^1.3.5",
-    "workbox-core": "^6.1.0",
-    "workbox-precaching": "^6.1.0",
-    "workbox-routing": "^6.1.0"
+    "web3": "^1.3.5"
   },
   "resolutions": {
     "yargs-parser": "^13.1.2",
@@ -107,8 +98,7 @@
     "glob-parent": "^5.1.2",
     "browserslist": "^4.16.5",
     "ajv": "^6.12.3",
-    "async": "^3.2.2",
-    "moment": "^2.29.2"
+    "async": "^3.2.2"
   },
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",
@@ -144,7 +134,6 @@
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.60",
     "apexcharts": "3.32.1",
-    "moment": "^2.29.2",
     "react-apexcharts": "1.3.9",
     "react-cool-inview": "^2.0.8",
     "react-error-overlay": "^6.0.10",

diff --git a/public/index.html b/public/index.html
@@ -2,14 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/quickIcon.svg" />
+    <link rel="icon" href="%PUBLIC_URL%/logo_circle.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/quickIcon.svg" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo_circle.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

diff --git a/public/logo_circle.png b/public/logo_circle.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -1,21 +1,18 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "QuickSwap",
+  "name": "QuickSwap Interface",
   "icons": [
     {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
+      "src": "./logo_circle.png",
+      "sizes": "50x150",
       "type": "image/png",
-      "sizes": "192x192"
+      "purpose": "any maskable"
     },
     {
-      "src": "logo512.png",
+      "src": "./logo_circle.png",
+      "sizes": "50x50",
       "type": "image/png",
-      "sizes": "512x512"
+      "purpose": "any maskable"
     }
   ],
   "start_url": ".",

diff --git a/public/quickIcon.svg b/public/quickIcon.svg
diff --git a/src/components/AreaChart/AreaChart.tsx b/src/components/AreaChart/AreaChart.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { createStyles, makeStyles } from '@material-ui/core/styles';
 import { Box, Typography } from '@material-ui/core';
 import Chart from 'react-apexcharts';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { useIsDarkMode } from 'state/user/hooks';
 import { formatCompact, formatNumber } from 'utils';
 
@@ -155,7 +155,7 @@ const AreaChart: React.FC<AreaChartProps> = ({
           }; border-radius: 12px 12px 0 0; background: ${
             dark ? 'rgba(0, 0, 0, 0.91)' : 'rgba(255, 255, 255, 0.91)'
           }; color: ${dark ? '#646464' : '#8D97A0'};">` +
-          moment(dates[dataPointIndex] * 1000).format('MMM DD, YYYY') +
+          dayjs(dates[dataPointIndex] * 1000).format('MMM DD, YYYY') +
           '</span>' +
           `<span style="padding: 0.5rem; border: 1px solid ${
             dark ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.15)'

diff --git a/src/components/TransactionsTable/TransactionsTable.tsx b/src/components/TransactionsTable/TransactionsTable.tsx
@@ -5,8 +5,10 @@ import { useTranslation } from 'react-i18next';
 import { CustomTable } from 'components';
 import { formatNumber, getEtherscanLink, shortenTx } from 'utils';
 import { useActiveWeb3React } from 'hooks';
-import moment from 'moment';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
 import { TxnType } from 'constants/index';
+dayjs.extend(relativeTime);
 
 const useStyles = makeStyles(({}) => ({
   priceChangeWrapper: {
@@ -204,7 +206,7 @@ const TransactionsTable: React.FC<TransactionsTableProps> = ({ data }) => {
         <Box className={classes.mobileRow}>
           <Typography variant='body1'>Time</Typography>
           <Typography variant='body1' color='textPrimary'>
-            {moment(Number(txn.transaction.timestamp) * 1000).fromNow()}
+            {dayjs(Number(txn.transaction.timestamp) * 1000).fromNow()}
           </Typography>
         </Box>
       </Box>
@@ -273,7 +275,7 @@ const TransactionsTable: React.FC<TransactionsTableProps> = ({ data }) => {
       {
         html: (
           <Typography variant='body1' color='textPrimary'>
-            {moment(Number(txn.transaction.timestamp) * 1000).fromNow()}
+            {dayjs(Number(txn.transaction.timestamp) * 1000).fromNow()}
           </Typography>
         ),
       },

diff --git a/src/index.tsx b/src/index.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
-import * as serviceWorkerRegistration from './serviceWorkerRegistration';
 import { HashRouter } from 'react-router-dom';
 
 ReactDOM.render(
@@ -13,7 +12,3 @@ ReactDOM.render(
   </React.StrictMode>,
   document.getElementById('root'),
 );
-
-if (process.env.REACT_APP_SERVICE_WORKER !== 'false') {
-  serviceWorkerRegistration.register();
-}
diff --git a/src/pages/AnalyticsPage/AnalyticsLiquidityChart.tsx b/src/pages/AnalyticsPage/AnalyticsLiquidityChart.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState, useMemo } from 'react';
 import { Box, Typography } from '@material-ui/core';
 import { useTheme } from '@material-ui/core/styles';
 import Skeleton from '@material-ui/lab/Skeleton';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { useGlobalData } from 'state/application/hooks';
 import {
   formatCompact,
@@ -112,7 +112,7 @@ const AnalyticsLiquidityChart: React.FC = () => {
       )}
       <Box>
         <Typography style={{ color: palette.text.disabled }} variant='caption'>
-          {moment().format('MMM DD, YYYY')}
+          {dayjs().format('MMM DD, YYYY')}
         </Typography>
       </Box>
       <Box mt={2}>
@@ -123,7 +123,7 @@ const AnalyticsLiquidityChart: React.FC = () => {
             )}
             yAxisValues={yAxisValues}
             dates={globalChartData.map((value: any) =>
-              moment(value.date * 1000)
+              dayjs(value.date * 1000)
                 .add(1, 'day')
                 .unix(),
             )}

diff --git a/src/pages/AnalyticsPairDetails/AnalyticsPairChart.tsx b/src/pages/AnalyticsPairDetails/AnalyticsPairChart.tsx
@@ -3,7 +3,7 @@ import { useRouteMatch } from 'react-router-dom';
 import { Box, Typography } from '@material-ui/core';
 import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { Skeleton } from '@material-ui/lab';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import {
   formatCompact,
   getPairChartData,
@@ -162,7 +162,7 @@ const AnalyticsPairChart: React.FC<{ pairData: any }> = ({ pairData }) => {
                 </Box>
                 <Box>
                   <Typography variant='caption'>
-                    {moment().format('MMM DD, YYYY')}
+                    {dayjs().format('MMM DD, YYYY')}
                   </Typography>
                 </Box>
               </>
@@ -196,7 +196,7 @@ const AnalyticsPairChart: React.FC<{ pairData: any }> = ({ pairData }) => {
             data={chartData}
             yAxisValues={getYAXISValuesAnalytics(chartData)}
             dates={pairChartData.map((value: any) =>
-              moment(value.date * 1000)
+              dayjs(value.date * 1000)
                 .add(1, 'day')
                 .unix(),
             )}

diff --git a/src/pages/AnalyticsTokenDetails/AnalyticsTokenChart.tsx b/src/pages/AnalyticsTokenDetails/AnalyticsTokenChart.tsx
@@ -3,7 +3,7 @@ import { useRouteMatch } from 'react-router-dom';
 import { Box, Typography } from '@material-ui/core';
 import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { Skeleton } from '@material-ui/lab';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import {
   formatCompact,
   getFormattedPrice,
@@ -145,7 +145,7 @@ const AnalyticsTokenChart: React.FC<{ token: any }> = ({ token }) => {
                 </Box>
                 <Box>
                   <Typography variant='caption'>
-                    {moment().format('MMM DD, YYYY')}
+                    {dayjs().format('MMM DD, YYYY')}
                   </Typography>
                 </Box>
               </>
@@ -179,7 +179,7 @@ const AnalyticsTokenChart: React.FC<{ token: any }> = ({ token }) => {
             data={chartData}
             yAxisValues={getYAXISValuesAnalytics(chartData)}
             dates={tokenChartData.map((value: any) =>
-              moment(value.date * 1000)
+              dayjs(value.date * 1000)
                 .add(1, 'day')
                 .unix(),
             )}

diff --git a/src/service-worker.ts b/src/service-worker.ts