chore: attempt to fix dapp (#59)

* chore: attempt to fix dapp * fix lockdown * upgrade mui * remove unused lockdown file
Agoric · Aug 31, 2022 · a02e584 · a02e584
1 parent 0771f00
commit a02e584
Show file tree

Hide file tree

Showing 16 changed files with 446 additions and 255 deletions.
diff --git a/api/deploy.js b/api/deploy.js
@@ -92,7 +92,7 @@ export default async function deployApi(homePromise, { pathResolve }) {
   /**
    * @type {ERef<Issuer>}
    */
-  const moneyIssuerP = E(home.agoricNames).lookup('issuer', 'RUN');
+  const moneyIssuerP = E(home.agoricNames).lookup('issuer', 'IST');
 
   const moneyBrandP = E(moneyIssuerP).getBrand();
   const [moneyIssuer, moneyBrand, { decimalPlaces = 0 }] = await Promise.all([

diff --git a/ui/package.json b/ui/package.json
@@ -4,6 +4,7 @@
   "description": "dapp Frontend",
   "author": "Agoric",
   "license": "Apache-2.0",
+  "type": "module",
   "homepage": ".",
   "scripts": {
     "build": "yarn build:ses && yarn build:react",
@@ -70,7 +71,7 @@
   },
   "eslintIgnore": [
     "dist/",
-    "conf/",
+    "src/conf/",
     "build/",
     ".cache",
     "node_modules"
@@ -96,12 +97,15 @@
     "@endo/marshal": "^0.5.4",
     "@agoric/notifier": "dev",
     "@agoric/ui-components": "dev",
-    "@material-ui/core": "^4.11.3",
-    "@material-ui/icons": "^4.11.2",
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0",
+    "@mui/material": "5.10.3",
+    "@mui/icons-material": "5.10.3",
+    "@mui/styles": "5.10.3",
+    "@emotion/react": "11.10.4",
+    "@emotion/styled": "11.10.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
-    "ses": "^0.15.7"
+    "ses": "^0.15.21"
   },
   "devDependencies": {
     "@endo/eslint-plugin": "^0.4.1",

diff --git a/ui/public/index.html b/ui/public/index.html
@@ -2,14 +2,22 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <script src="lockdown.umd.js"></script>
+    <script src="%PUBLIC_URL%/lockdown.umd.js"></script>
     <script>
-      if ("%NODE_ENV%" === 'production') {
-        const { pow: mathPow } = Math;
-        Math.pow = (base, exp) => (typeof base === 'bigint' && typeof exp ==='bigint') ? base ** exp : mathPow(base, exp);
-        lockdown({ errorTaming: 'unsafe', overrideTaming: 'severe' });
-        console.log("lockdown done.");
-      }
+      const { pow: mathPow } = Math;
+      Math.pow = (base, exp) =>
+        typeof base === 'bigint' && typeof exp === 'bigint'
+          ? base ** exp
+          : mathPow(base, exp);
+
+      const safetyMode = '%NODE_ENV%' === 'development' ? 'unsafe' : 'safe';
+      lockdown({
+        errorTaming: safetyMode,
+        overrideTaming: 'severe',
+        consoleTaming: safetyMode,
+      });
+
+      console.log('lockdown done.');
     </script>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />

diff --git a/ui/src/App.js b/ui/src/App.js
@@ -2,7 +2,8 @@ import React, { useState, useEffect, useRef } from 'react';
 import { makeCapTP, E } from '@endo/captp';
 import { makeAsyncIterableFromNotifier as iterateNotifier } from '@agoric/notifier';
 import { Far } from '@endo/marshal';
-
+import { ThemeProvider } from '@mui/styles';
+import { createTheme } from '@mui/material';
 import {
   activateWebSocket,
   deactivateWebSocket,
@@ -29,6 +30,8 @@ const {
   brandBoardIds: { Money: MONEY_BRAND_BOARD_ID, Card: CARD_BRAND_BOARD_ID },
 } = dappConstants;
 
+const theme = createTheme();
+
 function App() {
   const [walletConnected, setWalletConnected] = useState(false);
   const [dappApproved, setDappApproved] = useState(true);
@@ -179,26 +182,34 @@ function App() {
   };
 
   return (
-    <div className="App">
-      <Header walletConnected={walletConnected} dappApproved={dappApproved} />
-      <CardDisplay playerNames={availableCards} handleClick={handleCardClick} />
-      <CardDetailModal
-        open={!!activeCard}
-        onClose={handleCardModalClose}
-        onGetCardDetail={handleGetCardDetail}
-        onBidCard={submitCardOffer}
-        playerName={activeCard}
-        tokenPurses={tokenPurses}
-        tokenPetname={tokenPetname}
-        tokenDisplayInfo={tokenDisplayInfo}
-      />
-      <EnableAppDialog
-        open={openEnableAppDialog}
-        handleClose={handleDialogClose}
-      />
-      <ApproveOfferSnackbar open={needToApproveOffer} onClose={handleOnClose} />
-      <BoughtCardSnackbar open={boughtCard} onClose={handleOnClose} />
-    </div>
+    <ThemeProvider theme={theme}>
+      <div className="App">
+        <Header walletConnected={walletConnected} dappApproved={dappApproved} />
+        <CardDisplay
+          playerNames={availableCards}
+          handleClick={handleCardClick}
+        />
+        <CardDetailModal
+          open={!!activeCard}
+          onClose={handleCardModalClose}
+          onGetCardDetail={handleGetCardDetail}
+          onBidCard={submitCardOffer}
+          playerName={activeCard}
+          tokenPurses={tokenPurses}
+          tokenPetname={tokenPetname}
+          tokenDisplayInfo={tokenDisplayInfo}
+        />
+        <EnableAppDialog
+          open={openEnableAppDialog}
+          handleClose={handleDialogClose}
+        />
+        <ApproveOfferSnackbar
+          open={needToApproveOffer}
+          onClose={handleOnClose}
+        />
+        <BoughtCardSnackbar open={boughtCard} onClose={handleOnClose} />
+      </div>
+    </ThemeProvider>
   );
 }
 

diff --git a/ui/src/components/ApproveOfferSnackbar.jsx b/ui/src/components/ApproveOfferSnackbar.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import Snackbar from '@material-ui/core/Snackbar';
+import Snackbar from '@mui/material/Snackbar';
 
 const ApproveOfferSnackbar = ({ open, onClose }) => {
   // The snackbar to approve the offer will be closed by code not timeout.

diff --git a/ui/src/components/AuctionSessionDetail.jsx b/ui/src/components/AuctionSessionDetail.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import Box from '@material-ui/core/Box';
+import Box from '@mui/material/Box';
 
-import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@mui/material/Typography';
+import { makeStyles } from '@mui/styles';
 import { stringifyValue } from '../utils/amount';
 
 const toDateString = (bigIntTs) => {

diff --git a/ui/src/components/BaseballCard.jsx b/ui/src/components/BaseballCard.jsx
@@ -1,11 +1,11 @@
 import React, { Fragment } from 'react';
-import Card from '@material-ui/core/Card';
-import CardMedia from '@material-ui/core/CardMedia';
-import CardActionArea from '@material-ui/core/CardActionArea';
-import CardContent from '@material-ui/core/CardContent';
-import Typography from '@material-ui/core/Typography';
+import Card from '@mui/material/Card';
+import CardMedia from '@mui/material/CardMedia';
+import CardActionArea from '@mui/material/CardActionArea';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
 
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 
 import { images } from '../images';
 

diff --git a/ui/src/components/BoughtCardSnackbar.jsx b/ui/src/components/BoughtCardSnackbar.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import Snackbar from '@material-ui/core/Snackbar';
+import Snackbar from '@mui/material/Snackbar';
 
 const BoughtCardSnackbar = ({ open, onClose }) => {
   return (

diff --git a/ui/src/components/CardAuctionForm.jsx b/ui/src/components/CardAuctionForm.jsx
@@ -1,13 +1,13 @@
 import React, { useState } from 'react';
-import Box from '@material-ui/core/Box';
-import Select from '@material-ui/core/Select';
-import TextField from '@material-ui/core/TextField';
-import Button from '@material-ui/core/Button';
-import MenuItem from '@material-ui/core/MenuItem';
-import FormControl from '@material-ui/core/FormControl';
-import InputLabel from '@material-ui/core/InputLabel';
-import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@mui/material/Box';
+import Select from '@mui/material/Select';
+import TextField from '@mui/material/TextField';
+import Button from '@mui/material/Button';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import Typography from '@mui/material/Typography';
+import { makeStyles } from '@mui/styles';
 
 import { makeValue, stringifyValue } from '../utils/amount';
 

diff --git a/ui/src/components/CardDetailModal.jsx b/ui/src/components/CardDetailModal.jsx
@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from 'react';
-import Box from '@material-ui/core/Box';
-import Modal from '@material-ui/core/Modal';
-import Typography from '@material-ui/core/Typography';
-import IconButton from '@material-ui/core/IconButton';
-import CloseIcon from '@material-ui/icons/Close';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@mui/material/Box';
+import Modal from '@mui/material/Modal';
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import CircularProgress from '@mui/material/CircularProgress';
+import { makeStyles } from '@mui/styles';
 
 import BaseballCard from './BaseballCard.jsx';
 import AuctionSessionDetail from './AuctionSessionDetail.jsx';

diff --git a/ui/src/components/CardDisplay.jsx b/ui/src/components/CardDisplay.jsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
-import Paper from '@material-ui/core/Paper';
-import Container from '@material-ui/core/Container';
-import CircularProgress from '@material-ui/core/CircularProgress';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import Paper from '@mui/material/Paper';
+import Container from '@mui/material/Container';
+import CircularProgress from '@mui/material/CircularProgress';
 
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 
 import BaseballCard from './BaseballCard.jsx';
 

diff --git a/ui/src/components/EnableAppDialog.jsx b/ui/src/components/EnableAppDialog.jsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import Dialog from '@material-ui/core/Dialog';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import DialogActions from '@material-ui/core/DialogActions';
-import Button from '@material-ui/core/Button';
+import DialogTitle from '@mui/material/DialogTitle';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogActions from '@mui/material/DialogActions';
+import Button from '@mui/material/Button';
 
 import enableDappPng from '../assets/enable-dapp.png';
 

diff --git a/ui/src/components/Header.jsx b/ui/src/components/Header.jsx
@@ -1,10 +1,9 @@
 import React from 'react';
-import Typography from '@material-ui/core/Typography';
-import PowerSettingsNewIcon from '@material-ui/icons/PowerSettingsNew';
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
-
-import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@mui/material/Typography';
+import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import { makeStyles } from '@mui/styles';
 
 const useStyles = makeStyles((theme) => {
   return {

diff --git a/ui/src/index.js b/ui/src/index.js
@@ -1,8 +1,9 @@
-import './install-ses-lockdown.js';
+import '@endo/eventual-send/shim.js';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import './index.css';
 import App from './App.js';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);
diff --git a/ui/src/install-ses-lockdown.js b/ui/src/install-ses-lockdown.js