Runtime API types update

package.json

@@ -19,63 +19,43 @@
     "url": "https://github.com/camfairchild/tensor-wallet.git"
   },
   "dependencies": {
-    "@emotion/react": "^11.10.0",
-    "@emotion/styled": "^11.10.0",
-    "@material-ui/core": "^4.12.4",
-    "@material-ui/icons": "^4.11.3",
-    "@material-ui/lab": "^4.0.0-alpha.61",
-    "@mui/icons-material": "^5.8.4",
-    "@mui/material": "^5.10.0",
-    "@mui/styles": "^5.11.13",
-    "@polkadot/api": "^12.4.2",
-    "@polkadot/api-augment": "^12.4.2",
-    "@polkadot/app-settings": "^0.39.1",
-    "@polkadot/apps-config": "^0.143.2",
-    "@polkadot/extension-dapp": "^0.52.3",
-    "@polkadot/keyring": "^13.0.2",
-    "@polkadot/react-hooks": "^0.39.1",
-    "@polkadot/react-identicon": "^3.9.1",
-    "@polkadot/rpc-provider": "^12.4.2",
-    "@polkadot/types": "^12.4.2",
-    "@polkadot/ui-keyring": "^3.9.1",
-    "@polkadot/util": "^13.0.2",
-    "@polkadot/util-crypto": "^13.0.2",
-    "@types/node": "^18.7.3",
-    "@types/react": "^18.0.17",
-    "@types/react-dom": "^18.0.6",
-    "copy-webpack-plugin": "^11.0.0",
-    "crypto-browserify": "^3.12.0",
-    "css-loader": "^6.7.3",
-    "html-webpack-plugin": "^5.5.0",
-    "jss-preset-default": "^10.10.0",
-    "qrcode.react": "^3.1.0",
-    "react": "^18.1.0",
-    "react-currency-input-field": "^3.6.9",
-    "react-dom": "^18.2.0",
-    "react-is": "^18.1.0",
-    "react-jss": "^10.10.0",
-    "react-router": "^6.3.0",
-    "react-router-dom": "^6.3.0",
-    "react-window": "^1.8.8",
-    "regenerator-runtime": "^0.13.9",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^6.4.3",
+    "@mui/material": "^6.4.3",
+    "@mui/styles": "^6.4.3",
+    "@polkadot/api": "^15.5.2",
+    "@polkadot/api-augment": "^15.5.2",
+    "@polkadot/extension-dapp": "^0.58.2",
+    "@polkadot/keyring": "^13.3.1",
+    "@polkadot/networks": "^13.3.1",
+    "@polkadot/react-identicon": "^3.12.1",
+    "@polkadot/rpc-provider": "^15.5.2",
+    "@polkadot/types": "^15.5.2",
+    "@polkadot/util": "^13.3.1",
+    "@polkadot/util-crypto": "^13.3.1",
+    "@types/react": "18.3.12",
+    "copy-webpack-plugin": "^12.0.2",
+    "crypto-browserify": "^3.12.1",
+    "css-loader": "^7.1.2",
+    "html-webpack-plugin": "^5.6.3",
+    "qrcode.react": "^4.2.0",
+    "react": "^18.3.1",
+    "react-currency-input-field": "^3.9.0",
+    "react-dom": "^18.3.1",
+    "react-is": "^18.3.1",
     "stream-browserify": "^3.0.0",
-    "typescript": "^4.7.4",
-    "webpack": "^5.74.0"
+    "style-loader": "^4.0.0",
+    "ts-import-plugin": "^3.0.0",
+    "ts-loader": "^9.5.2",
+    "typescript": "^5.7.3",
+    "webpack": "^5.97.1",
+    "webpack-bundle-analyzer": "^4.10.2"
   },
   "devDependencies": {
-    "@babel/plugin-transform-typescript": "^7.18.12",
-    "@babel/preset-typescript": "^7.18.6",
-    "babel-loader": "^8.2.5",
-    "babel-plugin-direct-import": "^1.0.0",
-    "buffer": "^6.0.3",
-    "gh-pages": "^4.0.0",
-    "style-loader": "^3.3.1",
-    "ts-import-plugin": "^2.0.0",
-    "ts-loader": "^9.3.1",
-    "ts-node": "^10.9.1",
-    "uglifyjs-webpack-plugin": "^2.2.0",
-    "webpack-bundle-analyzer": "^4.6.0",
-    "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.10.0"
+    "@types/react-dom": "^19.0.3",
+    "@types/store": "^2.0.5",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.0"
   }
 }

src/App.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react"
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from '@mui/styles';
 import { ApiContext, AccountContext } from "./utils/contexts"
 import { ApiCtx, LocalStorageAccountCtx } from "./utils/types"
 import { useApiCreate, useLocalStorage } from "./hooks"
@@ -40,7 +40,7 @@ const useStyles = makeStyles((theme) => ({
   },
   main: {
     width: "100%",
-    maxWidth: `${theme.spacing(3) + 650}px`,
+    maxWidth: `calc(${theme.spacing(3)} + 650px)`,
     padding: theme.spacing(2),
     flex: 1,
   },

src/Home.tsx

@@ -1,7 +1,5 @@
 import { useState, useEffect, FunctionComponent, useContext } from "react"
-import {
-  makeStyles
-} from "@material-ui/core/styles"
+import makeStyles from '@mui/styles/makeStyles';
 
 import Paper from "@mui/material/Paper"
 import Box from "@mui/material/Box"
@@ -108,11 +106,12 @@ const Home: FunctionComponent<Props> = ({ loader, accounts }: Props) => {
                 size="large"
                 style={{ width: "100%", justifyContent: "flex-end" }}
                 colored
+                round={false}
               />
               <IconButton
                 style={{ borderRadius: 4 }}
                 onClick={() => setBalanceVisibility(!balanceVisibility)}
-              >
+                size="large">
                 {balanceVisibility ? <VisibilityIcon /> : <VisibilityOffIcon />}
               </IconButton>
             </Box>
@@ -122,7 +121,7 @@ const Home: FunctionComponent<Props> = ({ loader, accounts }: Props) => {
         <NavTabs />
       </BalanceVisibleContext.Provider>
     )
-  )
+  );
 }
 
 export default Home

src/components/AccountCard.tsx

@@ -1,16 +1,16 @@
 import { FunctionComponent, useState } from "react";
 import Identicon from "@polkadot/react-identicon";
 
-import { makeStyles } from "@material-ui/styles";
+import { makeStyles } from "@mui/styles";
 import Typography from "@mui/material/Typography";
 import Box from "@mui/material/Box";
-import Snackbar from "@material-ui/core/Snackbar";
+import Snackbar from "@mui/material/Snackbar";
 import Stack from "@mui/material/Stack";
 
 import MuiAlert, { AlertProps } from "@mui/material/Alert";
 import { Account } from "../utils/types";
 import { copyToClipboard } from "../utils/utils";
-import { Theme } from "@material-ui/core";
+import { Theme } from "@mui/material";
 
 const useStyles = makeStyles((theme: Theme) => ({
   root: {
@@ -71,7 +71,7 @@ const AccountCard: FunctionComponent<Props> = ({
           className={classes.root}
         >
           {account.name !== "" && (
-            <Typography variant="h6" className={classes.typo} >{account.name}</Typography>
+            <Typography variant="h2" sx={{ fontWeight: "bold", fontSize: "1.2em", whiteSpace: "wrap", width: "10em" }} className={classes.typo} >{account.name}</Typography>
           )}
           <Typography variant="caption" className={classes.typo} sx={addressFormat === "Full" ? {} : (addressFormat === "Short" ? {
             textOverflow: "ellipsis",

src/components/AccountMenu.tsx

@@ -9,8 +9,8 @@ import ListItem from "@mui/material/ListItem"
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore"
 import { Theme } from "@mui/material/styles/createTheme"
 
-import makeStyles from "@material-ui/core/styles/makeStyles"
-import createStyles from "@material-ui/core/styles/createStyles"
+import makeStyles from '@mui/styles/makeStyles';
+import createStyles from '@mui/styles/createStyles';
 
 import { BurnrDivider } from "."
 
@@ -69,55 +69,52 @@ export default function AccountMenu({accounts}: Props) {
   );*/
 
 
-  return (
-    <>
-      <IconButton onClick={handleClick}>
-        <ExpandMoreIcon style={{ color: grey[500] }} />
-      </IconButton>
-
-      <Menu
-        transformOrigin={{ vertical: -40, horizontal: "left" }}
-        anchorEl={anchorEl}
-        keepMounted
-        open={Boolean(anchorEl)}
-        onClose={() => setAnchorEl(null)}
-        className={classes.menu}
-      >
-        <ListItem dense autoFocus={false} selected={false}>
-          <Typography variant="overline">Block explorers</Typography>
-        </ListItem>
-
-        <MenuItem onClick={() => openInNewTab(polkadotjsexplorerUri)}>
-          PolkadotJS Explorer
+  return (<>
+    <IconButton onClick={handleClick} size="large">
+      <ExpandMoreIcon style={{ color: grey[500] }} />
+    </IconButton>
+    <Menu
+      transformOrigin={{ vertical: -40, horizontal: "left" }}
+      anchorEl={anchorEl}
+      keepMounted
+      open={Boolean(anchorEl)}
+      onClose={() => setAnchorEl(null)}
+      className={classes.menu}
+    >
+      <ListItem dense autoFocus={false} component="div">
+        <Typography variant="overline">Block explorers</Typography>
+      </ListItem>
+
+      <MenuItem onClick={() => openInNewTab(polkadotjsexplorerUri)}>
+        PolkadotJS Explorer
+      </MenuItem>
+
+      <MenuItem onClick={() => openInNewTab(scantensor)}>
+        ScanTensor Explorer
+      </MenuItem>
+
+      <MenuItem onClick={() => openInNewTab(taostats)}>
+        TAOStats Explorer
+      </MenuItem>
+
+      <BurnrDivider />
+
+      <ListItem dense autoFocus={false} component="div">
+        <Typography variant="overline">Swtich Account</Typography>
+      </ListItem>
+      { accounts?.map(({ address, meta }, index) => (
+
+        <MenuItem key={address} onClick={() => setCurrentAccount(
+          {
+            accountAddress: address,
+            accountName: meta?.name || '',
+            userHistory: [],
+          }
+        )}>
+          { meta?.name || address.toString() }
         </MenuItem>
-
-        <MenuItem onClick={() => openInNewTab(scantensor)}>
-          ScanTensor Explorer
-        </MenuItem>
-
-        <MenuItem onClick={() => openInNewTab(taostats)}>
-          TAOStats Explorer
-        </MenuItem>
-
-        <BurnrDivider />
-
-        <ListItem dense autoFocus={false} selected={false}>
-          <Typography variant="overline">Swtich Account</Typography>
-        </ListItem>
-        { accounts?.map(({ address, meta }, index) => (
-
-          <MenuItem key={address} onClick={() => setCurrentAccount(
-            {
-              accountAddress: address,
-              accountName: meta?.name || '',
-              userHistory: [],
-            }
-          )}>
-            { meta?.name || address.toString() }
-          </MenuItem>
-        ))}
-
-      </Menu>
-    </>
-  )
+      ))}
+
+    </Menu>
+  </>);
 }

src/components/BalanceValue.tsx

@@ -1,10 +1,10 @@
-import { FunctionComponent, memo } from "react"
+import { CSSProperties, FunctionComponent, memo } from "react"
 
-import { makeStyles, Theme } from "@material-ui/core/styles"
-import { Box, Typography } from "@material-ui/core"
+import { Theme } from "@mui/material/styles";
+import makeStyles from '@mui/styles/makeStyles';
+import { Box, Typography } from "@mui/material"
 import { SizeScale } from "../utils/types"
 import { prettyBalance } from "../utils/utils"
-import { CSSProperties } from "@material-ui/core/styles/withStyles"
 import { Balance } from "@polkadot/types/interfaces"
 import { bnToBn } from "@polkadot/util"
 import { useApi } from "../hooks"
@@ -15,6 +15,7 @@ interface Props extends SizeScale {
   unit?: string
   style?: CSSProperties
   colored?: boolean
+  round?: boolean
 }
 interface StyleProps {
   colored?: boolean
@@ -54,10 +55,11 @@ const BalanceValue: FunctionComponent<Props> = ({
   size,
   style,
   colored = false,
+  round = true,
 }: Props) => {
   const apiCtx = useApi()
   const value_bn = bnToBn(value)
-  const fBalance = prettyBalance(value_bn, apiCtx.api)
+  const fBalance = prettyBalance(value_bn, apiCtx.api, round)
   const classes = useStyles({ colored, visible: isVisible })
 
   const TypographyVariant = size === "large" ? "subtitle1" : "subtitle2"

src/components/Banner.tsx

@@ -11,7 +11,7 @@ export default function Banner() {
     const [open, setOpen] = useState<boolean>(true);
 
     return (
-    <Modal keepMounted
+    <Modal
         open={open}
         aria-labelledby="modal-modal-title"
         aria-describedby="modal-modal-description"