fix(collectibles): fix setup and unlock (#3724)

Fix the user experience when running collectibles for the first time. 
* Hide sidebar during lock screen
* Remove Wallets from menu because they did not have a screen to view anything

applications/tari_collectibles/web-app/src/App.js

@@ -225,7 +225,7 @@ function App() {
           <Box sx={{ display: "flex" }}>
             <CssBaseline />
 
-            <Drawer variant="permanent">
+            <Drawer variant="permanent" hidden={!walletId}>
               <RouterLink to="/">
                 <Toolbar sx={{ display: "flex", color: "white" }}>
                   Tari Collectibles
@@ -250,13 +250,13 @@ function App() {
                   to="/create"
                   icon={<CreateIcon />}
                 />
-                <Divider></Divider>
-                <ListSubheader>My Wallet</ListSubheader>
-                <ListItemLink
-                  primary="Main"
-                  to={`/wallets/${walletId}`}
-                  icon={<AccountBalanceWalletIcon />}
-                />
+                {/*<Divider></Divider>*/}
+                {/*<ListSubheader>My Wallet</ListSubheader>*/}
+                {/*<ListItemLink*/}
+                {/*  primary="Main"*/}
+                {/*  to={`/wallets/${walletId}`}*/}
+                {/*  icon={<AccountBalanceWalletIcon />}*/}
+                {/*/>*/}
               </List>
             </Drawer>
             <Box
@@ -299,11 +299,15 @@ function App() {
                   />
                 </Route>
                 <Route path="/unlock">
-                  <Setup />
+                  <Setup setAuthenticated={(id, password) => {
+                    setWalletId(id);
+                    setPassword(password);
+                    setAuthenticated(true);
+                  }}/>
                 </Route>
-                <Route path="/" >
+                <ProtectedRoute path="/"  authenticated={authenticated} >
                   <Dashboard />
-                </Route>
+                </ProtectedRoute>
               </Switch>
             </Box>
           </Box>

applications/tari_collectibles/web-app/src/Dashboard.js

@@ -41,6 +41,7 @@ class DashboardContent extends React.Component {
   }
 
   async componentDidMount() {
+    console.log("Dashboard loaded");
     this.setState({
       isLoading: true,
     });

applications/tari_collectibles/web-app/src/Setup.js

@@ -31,7 +31,7 @@ import {
 import React, { useState, useEffect } from "react";
 import { Spinner } from "./components";
 import binding from "./binding";
-import { withRouter, useParams } from "react-router-dom";
+import {withRouter, useParams, useHistory} from "react-router-dom";
 
 const chunk = (arr, len) => {
   const chunks = [];
@@ -45,9 +45,10 @@ const chunk = (arr, len) => {
   return chunks;
 };
 
-const SeedWords = ({ wallet, password, history }) => {
+const SeedWords = ({ wallet, password}) => {
   const [seedWords, setSeedWords] = useState([]);
   const [error, setError] = useState("");
+  const history= useHistory();
   useEffect(() => {
     binding
       .command_wallets_seed_words(wallet.id, password)
@@ -90,24 +91,28 @@ const SeedWords = ({ wallet, password, history }) => {
       {display(seedWords)}
       <Button
         disabled={seedWords.length === 0}
-        onClick={() => history.push(`/dashboard`)}
+        onClick={() => history.push(`/`)}
       >
         I have saved my seed words
       </Button>
     </div>
   );
 };
 
-const CreateWallet = ({ history }) => {
+const CreateWallet = ({ setAuthenticated }) => {
   const [password, setPassword] = useState("");
   const [password2, setPassword2] = useState("");
   const [creating, setCreating] = useState(false);
   const [wallet, setWallet] = useState(undefined);
   const [error, setError] = useState("");
+  const history = useHistory();
 
-  if (wallet)
-    return <SeedWords wallet={wallet} password={password} history={history} />;
-
+  if (wallet) {
+    setAuthenticated(wallet.id, password);
+    //return <SeedWords wallet={wallet} password={password} history={history} />;
+    history.push(`/`);
+    return <Spinner />;
+  }
   let valid = false;
   let helperText = "Passwords must match.";
   if (password === password2) {
@@ -146,6 +151,7 @@ const CreateWallet = ({ history }) => {
             variant="filled"
             color="primary"
             value={password}
+            required="true"
             onChange={(e) => setPassword(e.target.value)}
           ></TextField>
           <TextField
@@ -157,6 +163,7 @@ const CreateWallet = ({ history }) => {
             value={password2}
             helperText={helperText}
             error={!valid}
+            required="true"
             onChange={(e) => setPassword2(e.target.value)}
           ></TextField>
           <Button disabled={!valid || creating} onClick={create}>
@@ -168,19 +175,20 @@ const CreateWallet = ({ history }) => {
   );
 };
 
-const OpenWallet = ({ history, setAuthenticated }) => {
+const OpenWallet = ({ setAuthenticated }) => {
   const { id } = useParams();
   const [password, setPassword] = useState("");
   const [unlocking, setUnlocking] = useState(false);
   const [error, setError] = useState("");
   const isError = error !== "";
+  const history = useHistory();
 
   const unlock = async () => {
     setUnlocking(true);
     try {
       await binding.command_wallets_unlock(id, password);
       setAuthenticated(id, password);
-      history.push("/dashboard");
+      history.push("/");
     } catch (e) {
       console.error("error: ", e);
       setUnlocking(false);
@@ -218,9 +226,9 @@ const OpenWallet = ({ history, setAuthenticated }) => {
   );
 };
 
-const Setup = ({ history }) => {
+const Setup = ({ setAuthenticated }) => {
   const [loading, setLoading] = useState(true);
-
+const history= useHistory();
   useEffect(() => {
     binding
       .command_wallets_list()
@@ -243,7 +251,7 @@ const Setup = ({ history }) => {
 
   return (
     <Container maxWidth="md" sx={{ mt: 4, mb: 4, py: 8 }}>
-      <CreateWallet history={history} />
+      <CreateWallet setAuthenticated={setAuthenticated } />
     </Container>
   );
 };