Merge pull request #46 from etclabscore/fix/add-empty-card-loading-si…

…gning fix: add emptycard for loading and signing
etclabscore · Oct 1, 2020 · 2ec7c60 · 2ec7c60
2 parents d163b52 + 8f5e729
commit 2ec7c60
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 26 deletions.
diff --git a/src/components/EmptyCard.tsx b/src/components/EmptyCard.tsx
@@ -0,0 +1,57 @@
+import React from "react";
+import { Card, CardContent, Grid, LinearProgress } from "@material-ui/core";
+import { grey } from "@material-ui/core/colors";
+
+const styles = {
+  card: {
+    minHeight: "150px",
+    width: "300px",
+    borderRadius: "10px",
+    background: grey[500],
+    opacity: 0.2,
+    margin: "0px",
+    display: "flex",
+  },
+  cardContent: {
+    flexGrow: 1,
+    padding: 0,
+    margin: "16px",
+    display: "flex",
+  },
+  cardItem: {
+    borderRadius: "10px",
+    width: "145px",
+    minHeight: "115px",
+  },
+  listItem: {
+    width: "145px",
+    minHeight: "115px",
+    borderRadius: "10px",
+  },
+  listItemIcon: {
+    minWidth: "auto",
+  },
+};
+
+interface IProps {
+  content?: JSX.Element;
+}
+
+const EmptyCard: React.FC<IProps> = (props) => {
+  return (
+    <Card style={styles.card}>
+      <CardContent style={styles.cardContent}>
+        <Grid container direction="column" justify="space-between" style={{ width: "265px" }}>
+          <Grid container justify="space-between">
+            <Grid container item justify="space-around" alignItems="center">
+              {props.content}
+            </Grid>
+            <LinearProgress style={{ width: "100%", height: "15px", marginTop: props.content ? "35px" : "105px" }} />
+          </Grid>
+        </Grid>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default EmptyCard;
diff --git a/src/containers/CardsList.tsx b/src/containers/CardsList.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { ButtonBase } from "@material-ui/core";
 import { ICard } from "../machines/appMachine";
 import CardView from "./CardView";
+import EmptyCard from "../components/EmptyCard";
 
 interface IProps {
   cards: ICard[];
@@ -13,6 +14,7 @@ const TAB_INDEX_START = 3;
 const CardsList: React.FC<IProps> = ({ cards, onCardSelect }) => {
   return (
     <>
+      {cards.length === 0 && <EmptyCard />}
       {cards.map((card, i) => (
         <ButtonBase key={i}
           onClick={() => onCardSelect && onCardSelect(card)}

diff --git a/src/containers/FormPanel.tsx b/src/containers/FormPanel.tsx
@@ -77,11 +77,9 @@ const FormPanel: React.FC<IProps> = (props) => {
               }}
               onClick={() => {
                 setOpen(false);
-                setTimeout(() => {
-                  if (props.onCancel) {
-                    props.onCancel();
-                  }
-                }, 90);
+                if (props.onCancel) {
+                  props.onCancel();
+                }
               }}>
               <Close />
             </IconButton>

diff --git a/src/containers/MyApp.tsx b/src/containers/MyApp.tsx
@@ -8,7 +8,6 @@ import {
   MuiThemeProvider,
   CssBaseline,
   Paper,
-  CircularProgress,
   Typography,
   FormControlLabel,
   Checkbox,
@@ -18,7 +17,7 @@ import {
 import SignatoryOpenRPCDocument from "../openrpc.json";
 import CardView from "./CardView";
 import refParser, { JSONSchema } from "@apidevtools/json-schema-ref-parser";
-import { ArrowBackIos, Close } from "@material-ui/icons";
+import { ArrowBackIos, Close, ScreenLockPortrait } from "@material-ui/icons";
 import CardsList from "./CardsList";
 import { Flipper } from "react-flip-toolkit";
 import AppBar from "./AppBar";
@@ -41,6 +40,7 @@ import { capabilities } from "../capabilities";
 import { RpcCapDomainEntry } from "@xops.net/rpc-cap";
 import AccountSelectList from "../components/AccountSelectList";
 import { Account } from "@etclabscore/signatory-core";
+import EmptyCard from "../components/EmptyCard";
 
 export const matchesMachineState = (
   states: string[],
@@ -412,7 +412,12 @@ const MyApp = () => {
         state.matches("signingTransaction") ||
         state.matches("signingTypedData")) &&
         <Grid container justify="center" alignItems="center" style={{ paddingTop: "30px" }}>
-          <CircularProgress />
+          <EmptyCard content={
+            <Grid container direction="column" justify="center" alignItems="center">
+              <ScreenLockPortrait fontSize="large" />
+              <Typography color="textSecondary">{state.value.includes("signing") ? "Signing" : "Creating"}</Typography>
+            </Grid>
+          } />
         </Grid>
       }
       {

diff --git a/src/machines/appMachine.tsx b/src/machines/appMachine.tsx
@@ -245,7 +245,7 @@ export const rawAppMachine: any = {
                 const keyfile = await signatoryCore.exportAccount(e.address);
                 saveJSON(keyfile, `${e.address}-keyfile.json`);
                 resolve();
-              }, 200);
+              }, 300);
             });
           },
         },
@@ -363,7 +363,7 @@ export const rawAppMachine: any = {
                 saveJSON(keyfile, `${r}-keyfile.json`);
                 resolve(r);
               }).catch(reject);
-            }, 200);
+            }, 300);
           });
         },
         onDone: {
@@ -389,7 +389,7 @@ export const rawAppMachine: any = {
           return new Promise((resolve: any, reject: any) => {
             setTimeout(() => {
               signatoryCore.importMnemonic(event.importMnemonicOptions).then(resolve).catch(reject);
-            }, 200);
+            }, 300);
           });
         },
         onDone: {
@@ -431,7 +431,7 @@ export const rawAppMachine: any = {
                 .signTransaction(event.transaction, event.passphrase, event.chainId)
                 .then(resolve)
                 .catch(reject);
-            }, 200);
+            }, 300);
           });
         },
         onDone: {
@@ -452,7 +452,7 @@ export const rawAppMachine: any = {
             setTimeout(() => {
               signatoryCore
                 .sign(event.dataToSign, event.address, event.passphrase, event.chainId).then(resolve).catch(reject);
-            }, 200);
+            }, 300);
           });
         },
         onDone: {

diff --git a/src/openrpc.json b/src/openrpc.json
@@ -375,19 +375,6 @@
         }
       ]
     },
-    {
-      "name": "importKeyfile",
-      "summary": "Import an account from Keyfile",
-      "description": "Import a new account from an external keyfile. should comply with the [Web3 Secret Storage Definition](https://github.com/ethereumproject/wiki/wiki/Web3-Secret-Storage-Definition)",
-      "params": [
-        {
-          "$ref": "#/components/contentDescriptors/Keyfile"
-        }
-      ],
-      "result": {
-        "$ref": "#/components/contentDescriptors/Address"
-      }
-    },
     {
       "name": "generateMnemonic",
       "summary": "Generate a mnemonic phrase",