Features/upgrade next13 (#3)

* update next version * upgrade all Links * update nextjs-auth0 + sentry/nextjs version * update next packages * update next image legacy * npm audit fix * prettier fix * fixes
akash-network · Aug 28, 2023 · 76550b4 · 76550b4
1 parent f113d48
commit 76550b4
Show file tree

Hide file tree

Showing 126 changed files with 17,279 additions and 39,152 deletions.
diff --git a/deploy-web/package-lock.json b/deploy-web/package-lock.json
diff --git a/deploy-web/package.json b/deploy-web/package.json
@@ -9,11 +9,12 @@
     "dev": "next -p 3000",
     "build": "next build",
     "start": "next start",
-    "type-check": "tsc"
+    "type-check": "tsc",
+    "pretty": "prettier --write \"./**/*.{js,jsx,ts,tsx,json}\""
   },
   "dependencies": {
     "@akashnetwork/akashjs": "^0.4.9",
-    "@auth0/nextjs-auth0": "^1.9.1",
+    "@auth0/nextjs-auth0": "^3.1.0",
     "@cosmjs/encoding": "^0.29.5",
     "@cosmjs/stargate": "^0.29.5",
     "@emotion/cache": "^11.7.1",
@@ -28,14 +29,15 @@
     "@nivo/line": "^0.80.0",
     "@nivo/pie": "^0.80.0",
     "@react-spring/web": "^9.3.1",
-    "@sentry/nextjs": "7.11.1",
+    "@sentry/nextjs": "^7.64.0",
     "@stripe/react-stripe-js": "^1.12.0",
     "@stripe/stripe-js": "^1.41.0",
     "@textea/json-viewer": "^3.0.0",
     "auth0": "^2.42.0",
     "axios": "^0.27.2",
     "cosmjs-types": "^0.6.1",
     "date-fns": "^2.29.3",
+    "eslint-config-next": "^13.4.18",
     "file-saver": "^2.0.5",
     "http-proxy": "^1.18.1",
     "jotai": "^2.0.4",
@@ -46,12 +48,12 @@
     "lodash": "^4.17.21",
     "material-ui-popup-state": "^4.0.2",
     "nanoid": "^3.3.4",
-    "next": "^12.3.4",
+    "next": "^13.4.18",
     "next-dark-mode": "^3.0.0",
     "next-pwa": "^5.6.0",
     "next-qrcode": "^2.1.0",
-    "next-seo": "^5.5.0",
-    "nextjs-google-analytics": "^2.0.0",
+    "next-seo": "^6.1.0",
+    "nextjs-google-analytics": "^2.3.3",
     "notistack": "^2.0.5",
     "nprogress": "^0.2.0",
     "react": "^18.2.0",
@@ -87,6 +89,7 @@
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.1",
     "@types/react-simple-maps": "^3.0.0",
+    "prettier": "^3.0.2",
     "typescript": "^4.5.5"
   }
 }
diff --git a/deploy-web/public/sw.js b/deploy-web/public/sw.js
diff --git a/deploy-web/public/sw.js.map b/deploy-web/public/sw.js.map
diff --git a/deploy-web/public/workbox-19663cdd.js b/deploy-web/public/workbox-19663cdd.js
diff --git a/deploy-web/public/workbox-19663cdd.js.map b/deploy-web/public/workbox-19663cdd.js.map
diff --git a/deploy-web/src/components/address/Delegations.tsx b/deploy-web/src/components/address/Delegations.tsx
@@ -42,9 +42,7 @@ export const Delegations: React.FunctionComponent<Props> = ({ delegations }) =>
           {delegations.map(delegation => (
             <CustomTableRow key={delegation.validator.operatorAddress}>
               <TableCell>
-                <Link href={UrlService.validator(delegation.validator.operatorAddress)}>
-                  <a>{getShortText(delegation.validator.moniker, 20)}</a>
-                </Link>
+                <Link href={UrlService.validator(delegation.validator.operatorAddress)}>{getShortText(delegation.validator.moniker, 20)}</Link>
               </TableCell>
               <TableCell align="right">
                 <AKTAmount uakt={delegation.amount} showAKTLabel />

diff --git a/deploy-web/src/components/address/Redelegations.tsx b/deploy-web/src/components/address/Redelegations.tsx
@@ -44,14 +44,10 @@ export const Redelegations: React.FunctionComponent<Props> = ({ redelegations })
           {redelegations.map(redelegation => (
             <CustomTableRow key={`${redelegation.srcAddress.operatorAddress}_${redelegation.dstAddress.operatorAddress}`}>
               <TableCell>
-                <Link href={UrlService.validator(redelegation.srcAddress.operatorAddress)}>
-                  <a>{getShortText(redelegation.srcAddress.moniker, 20)}</a>
-                </Link>
+                <Link href={UrlService.validator(redelegation.srcAddress.operatorAddress)}>{getShortText(redelegation.srcAddress.moniker, 20)}</Link>
               </TableCell>
               <TableCell>
-                <Link href={UrlService.validator(redelegation.dstAddress.operatorAddress)}>
-                  <a>{getShortText(redelegation.dstAddress.moniker, 20)}</a>
-                </Link>
+                <Link href={UrlService.validator(redelegation.dstAddress.operatorAddress)}>{getShortText(redelegation.dstAddress.moniker, 20)}</Link>
               </TableCell>
               <TableCell align="right">
                 <AKTAmount uakt={redelegation.amount} showAKTLabel />

diff --git a/deploy-web/src/components/blockchain/BlockRow.tsx b/deploy-web/src/components/blockchain/BlockRow.tsx
@@ -23,17 +23,13 @@ export const BlockRow: React.FunctionComponent<Props> = ({ block }) => {
   return (
     <CustomTableRow>
       <TableCell align="center">
-        <Link href={UrlService.block(block.height)}>
-          <a>{block.height}</a>
-        </Link>
+        <Link href={UrlService.block(block.height)}>{block.height}</Link>
       </TableCell>
       <TableCell align="center">
         <Link href={UrlService.validator(block.proposer.operatorAddress)}>
-          <a>
-            <Box component="span" className="text-truncate" sx={{ maxWidht: "150px" }}>
-              {getShortText(block.proposer.moniker, 20)}
-            </Box>
-          </a>
+          <Box component="span" className="text-truncate" sx={{ maxWidht: "150px" }}>
+            {getShortText(block.proposer.moniker, 20)}
+          </Box>
         </Link>
       </TableCell>
       <TableCell

diff --git a/deploy-web/src/components/blockchain/TransactionRow.tsx b/deploy-web/src/components/blockchain/TransactionRow.tsx
@@ -30,8 +30,8 @@ export const TransactionRow: React.FunctionComponent<Props> = ({ transaction, bl
   return (
     <CustomTableRow>
       <TableCell>
-        <Link href={UrlService.transaction(transaction.hash)}>
-          <a target="_blank">{txHash}</a>
+        <Link href={UrlService.transaction(transaction.hash)} target="_blank">
+          {txHash}
         </Link>
       </TableCell>
       <TableCell align="center">
@@ -54,9 +54,7 @@ export const TransactionRow: React.FunctionComponent<Props> = ({ transaction, bl
         </>
       )}
       <TableCell align="center">
-        <Link href={UrlService.block(blockHeight)}>
-          <a>{blockHeight}</a>
-        </Link>
+        <Link href={UrlService.block(blockHeight)}>{blockHeight}</Link>
       </TableCell>
       <TableCell align="center">
         <Typography variant="caption">

diff --git a/deploy-web/src/components/dashboard/Dashboard.tsx b/deploy-web/src/components/dashboard/Dashboard.tsx
@@ -418,11 +418,9 @@ export const Dashboard: React.FunctionComponent<IDashboardProps> = ({ dashboardD
               </Table>
             </TableContainer>
 
-            <Link href={UrlService.blocks()} passHref>
-              <Button variant="outlined" color="inherit" className={classes.loadMoreButton}>
-                Load More
-              </Button>
-            </Link>
+            <Button component={Link} href={UrlService.blocks()} variant="outlined" color="inherit" className={classes.loadMoreButton}>
+              Load More
+            </Button>
           </Paper>
         </Grid>
 
@@ -455,11 +453,9 @@ export const Dashboard: React.FunctionComponent<IDashboardProps> = ({ dashboardD
               </Table>
             </TableContainer>
 
-            <Link href={UrlService.transactions()} passHref>
-              <Button variant="outlined" color="inherit" className={classes.loadMoreButton}>
-                Load More
-              </Button>
-            </Link>
+            <Button component={Link} href={UrlService.transactions()} variant="outlined" color="inherit" className={classes.loadMoreButton}>
+              Load More
+            </Button>
           </Paper>
         </Grid>
       </Grid>

diff --git a/deploy-web/src/components/dashboard/StatsCard.tsx b/deploy-web/src/components/dashboard/StatsCard.tsx
@@ -135,14 +135,12 @@ export const StatsCard: React.FunctionComponent<IStatsCardProps> = ({
 
       {graphPath && (
         <CardActions sx={{ alignSelf: "flex-start", padding: 0, paddingBottom: ".5rem", paddingLeft: "1rem" }}>
-          <Link href={graphPath} passHref>
-            <Button aria-label="graph" size="small" classes={{ text: classes.actionButtonLabel }}>
-              <Box component="span" marginRight=".5rem">
-                Graph
-              </Box>
-              <TimelineIcon className={classes.actionIcon} />
-            </Button>
-          </Link>
+          <Button component={Link} href={graphPath} aria-label="graph" size="small" classes={{ text: classes.actionButtonLabel }}>
+            <Box component="span" marginRight=".5rem">
+              Graph
+            </Box>
+            <TimelineIcon className={classes.actionIcon} />
+          </Button>
 
           {actionButton}
         </CardActions>

diff --git a/deploy-web/src/components/deployment/DeploymentListRow.tsx b/deploy-web/src/components/deployment/DeploymentListRow.tsx
@@ -271,9 +271,7 @@ export const DeploymentListRow: React.FunctionComponent<Props> = ({ deployment,
         <TableCell align="center">
           {hasLeases && (
             <Box sx={{ display: "flex", alignItems: "center", flexWrap: "wrap" }}>
-              {filteredLeases?.map(lease => (
-                <LeaseChip key={lease.id} lease={lease} providers={providers} />
-              ))}
+              {filteredLeases?.map(lease => <LeaseChip key={lease.id} lease={lease} providers={providers} />)}
             </Box>
           )}
           {isLoadingLeases && <CircularProgress size="1rem" color="secondary" />}

diff --git a/deploy-web/src/components/deployment/DeploymentRow.tsx b/deploy-web/src/components/deployment/DeploymentRow.tsx
@@ -22,16 +22,16 @@ export const DeploymentRow: React.FunctionComponent<Props> = ({ deployment }) =>
   return (
     <CustomTableRow>
       <TableCell>
-        <Link href={UrlService.publicDeploymentDetails(deployment.owner, deployment.dseq)}>
-          <a target="_blank">{deployment.dseq}</a>
+        <Link href={UrlService.publicDeploymentDetails(deployment.owner, deployment.dseq)} target="_blank">
+          {deployment.dseq}
         </Link>
       </TableCell>
       <TableCell align="center">
         <Chip label={deployment.status} size="small" color={getStatusColor(deployment.status)} sx={{ height: "1rem", fontSize: ".75rem", maxWidth: "120px" }} />
       </TableCell>
       <TableCell align="center">
-        <Link href={UrlService.block(deployment.createdHeight)}>
-          <a target="_blank">{deployment.createdHeight}</a>
+        <Link href={UrlService.block(deployment.createdHeight)} target="_blank">
+          {deployment.createdHeight}
         </Link>
       </TableCell>
       <TableCell>

diff --git a/deploy-web/src/components/get-started/GetStartedStepper.tsx b/deploy-web/src/components/get-started/GetStartedStepper.tsx
@@ -90,11 +90,9 @@ export const GetStartedStepper: React.FunctionComponent<Props> = () => {
             <Button variant="contained" color="secondary" onClick={handleNext} sx={{ mt: 1, mr: 1 }}>
               Next
             </Button>
-            <Link href={UrlService.getStartedWallet()} passHref>
-              <Box component="a" sx={{ marginLeft: "1rem" }}>
-                Learn how
-              </Box>
-            </Link>
+            <Box component={Link} href={UrlService.getStartedWallet()} sx={{ marginLeft: "1rem" }}>
+              Learn how
+            </Box>
           </Box>
 
           {!isKeplrInstalled && (
@@ -177,11 +175,9 @@ export const GetStartedStepper: React.FunctionComponent<Props> = () => {
               <ExternalLink href="https://docs.docker.com/get-started/" text="Learn how" />
             </Box>
 
-            <Link href={UrlService.templates()} passHref>
-              <Box component="a" sx={{ marginLeft: "1rem", padding: "1rem 0" }}>
-                Explore Marketplace
-              </Box>
-            </Link>
+            <Box href={UrlService.templates()} component={Link} sx={{ marginLeft: "1rem", padding: "1rem 0" }}>
+              Explore Marketplace
+            </Box>
           </Box>
         </StepContent>
       </Step>
@@ -196,11 +192,15 @@ export const GetStartedStepper: React.FunctionComponent<Props> = () => {
             <ExternalLink href="https://github.com/maxmaxlabs/hello-akash-world" text="source code here" />.
           </Typography>
           <Box sx={{ mb: 2, mt: 2 }}>
-            <Link href={UrlService.newDeployment({ templateId: "hello-world", step: RouteStepKeys.editDeployment })} passHref>
-              <Button variant="contained" endIcon={<RocketLaunchIcon />} color="secondary">
-                Deploy!
-              </Button>
-            </Link>
+            <Button
+              component={Link}
+              href={UrlService.newDeployment({ templateId: "hello-world", step: RouteStepKeys.editDeployment })}
+              variant="contained"
+              endIcon={<RocketLaunchIcon />}
+              color="secondary"
+            >
+              Deploy!
+            </Button>
 
             <Button onClick={handleReset} sx={{ ml: 2 }} endIcon={<RestartAltIcon />}>
               Reset

diff --git a/deploy-web/src/components/get-started/NoKeplrSection.tsx b/deploy-web/src/components/get-started/NoKeplrSection.tsx
@@ -32,11 +32,9 @@ export const NoKeplrSection: React.FunctionComponent<Props> = ({}) => {
 
   return (
     <Box>
-      <Link href={UrlService.getStartedWallet()} passHref>
-        <Button startIcon={<ChevronLeftIcon />} sx={{ color: theme.palette.secondary.main }}>
-          Back
-        </Button>
-      </Link>
+      <Button href={UrlService.getStartedWallet()} component={Link} startIcon={<ChevronLeftIcon />} sx={{ color: theme.palette.secondary.main }}>
+        Back
+      </Button>
       <Box component="ul" className={classes.list}>
         <li>
           Install <ExternalLink href="https://chrome.google.com/webstore/detail/keplr/dmkamcknogkgcdfhhbddcghachkejeap" text="Keplr" />

diff --git a/deploy-web/src/components/get-started/NoWalletSection.tsx b/deploy-web/src/components/get-started/NoWalletSection.tsx
@@ -32,11 +32,9 @@ export const NoWalletSection: React.FunctionComponent<Props> = ({}) => {
 
   return (
     <Box>
-      <Link href={UrlService.getStartedWallet()} passHref>
-        <Button startIcon={<ChevronLeftIcon />} sx={{ color: theme.palette.secondary.main }}>
-          Back
-        </Button>
-      </Link>
+      <Button component={Link} href={UrlService.getStartedWallet()} startIcon={<ChevronLeftIcon />} sx={{ color: theme.palette.secondary.main }}>
+        Back
+      </Button>
       <Box component="ul" className={classes.list}>
         <li>
           Install <ExternalLink href="https://chrome.google.com/webstore/detail/keplr/dmkamcknogkgcdfhhbddcghachkejeap" text="Keplr" />

diff --git a/deploy-web/src/components/get-started/WithKeplrSection.tsx b/deploy-web/src/components/get-started/WithKeplrSection.tsx
@@ -30,11 +30,9 @@ export const WithKeplrSection: React.FunctionComponent<Props> = ({}) => {
 
   return (
     <Box>
-      <Link href={UrlService.getStartedWallet()} passHref>
-        <Button startIcon={<ChevronLeftIcon />} sx={{ color: theme.palette.secondary.main }}>
-          Back
-        </Button>
-      </Link>
+      <Button component={Link} href={UrlService.getStartedWallet()} startIcon={<ChevronLeftIcon />} sx={{ color: theme.palette.secondary.main }}>
+        Back
+      </Button>
       <Box component="ul" className={classes.list}>
         <li>
           Swap <ExternalLink href="https://app.osmosis.zone/?from=USDC&to=AKT" text="some tokens to AKT" />

diff --git a/deploy-web/src/components/home/YourAccount.tsx b/deploy-web/src/components/home/YourAccount.tsx
@@ -159,10 +159,7 @@ export const YourAccount: React.FunctionComponent<Props> = ({ balances, isLoadin
                 <Typography variant="body1" sx={{ marginLeft: activeDeployments.length > 0 ? "1rem" : 0 }}>
                   You have{" "}
                   <Link href={UrlService.deploymentList()} passHref>
-                    <a>
-                      {activeDeployments.length} active{" "}
-                      <FormattedPlural value={activeDeployments.length} zero="deployment" one="deployment" other="deployments" />
-                    </a>
+                    {activeDeployments.length}active <FormattedPlural value={activeDeployments.length} zero="deployment" one="deployment" other="deployments" />
                   </Link>
                 </Typography>
               </Box>
@@ -214,12 +211,18 @@ export const YourAccount: React.FunctionComponent<Props> = ({ balances, isLoadin
                   </Box>
                 </>
               ) : (
-                <Link href={UrlService.newDeployment()} passHref>
-                  <Button variant="contained" size="medium" color="secondary" sx={{ marginTop: "1rem" }} onClick={onDeployClick}>
-                    Deploy
-                    <RocketLaunchIcon sx={{ marginLeft: "1rem" }} fontSize="small" />
-                  </Button>
-                </Link>
+                <Button
+                  href={UrlService.newDeployment()}
+                  component={Link}
+                  variant="contained"
+                  size="medium"
+                  color="secondary"
+                  sx={{ marginTop: "1rem" }}
+                  onClick={onDeployClick}
+                >
+                  Deploy
+                  <RocketLaunchIcon sx={{ marginLeft: "1rem" }} fontSize="small" />
+                </Button>
               )}
             </Box>
 

diff --git a/deploy-web/src/components/layout/Footer.tsx b/deploy-web/src/components/layout/Footer.tsx
@@ -128,8 +128,8 @@ export const Footer: React.FunctionComponent<IFooterProps> = ({}) => {
               Cloudmos
             </Typography>
             <Typography variant="body2" className={classes.subSitle}>
-              Cloudmos is the #1 platform to deploy docker containers on the Akash Network, a decentralized cloud compute
-              marketplace. Explore, deploy and track all in one place!
+              Cloudmos is the #1 platform to deploy docker containers on the Akash Network, a decentralized cloud compute marketplace. Explore, deploy and track
+              all in one place!
             </Typography>
           </Grid>
           <Grid item xs={12} sm={2}>
@@ -176,25 +176,19 @@ export const Footer: React.FunctionComponent<IFooterProps> = ({}) => {
           </ul>
 
           <Box sx={{ margin: { xs: ".5rem 0 1rem", sm: 0 }, display: "flex", alignItems: "center" }}>
-            <Link href={UrlService.termsOfService()}>
-              <a className={classes.privacyLink}>
-                <Typography variant="caption">Terms of Service</Typography>
-              </a>
+            <Link href={UrlService.termsOfService()} className={classes.privacyLink}>
+              <Typography variant="caption">Terms of Service</Typography>
             </Link>
 
             <Box sx={{ marginLeft: "1rem" }}>
-              <Link href={UrlService.privacyPolicy()}>
-                <a className={classes.privacyLink}>
-                  <Typography variant="caption">Privacy Policy</Typography>
-                </a>
+              <Link href={UrlService.privacyPolicy()} className={classes.privacyLink}>
+                <Typography variant="caption">Privacy Policy</Typography>
               </Link>
             </Box>
-            
+
             <Box sx={{ marginLeft: "1rem" }}>
-              <Link href={UrlService.contact()}>
-                <a className={classes.privacyLink}>
-                  <Typography variant="caption">Contact</Typography>
-                </a>
+              <Link href={UrlService.contact()} className={classes.privacyLink}>
+                <Typography variant="caption">Contact</Typography>
               </Link>
             </Box>
           </Box>