feat(wallet-ui): preview mode

Agoric · Sep 4, 2022 · fedf049 · fedf049
1 parent caf2b00
commit fedf049
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 30 deletions.
diff --git a/packages/wallet/ui/src/components/NavMenu.jsx b/packages/wallet/ui/src/components/NavMenu.jsx
@@ -9,6 +9,7 @@ import DashboardIcon from '@mui/icons-material/Dashboard';
 import Apps from '@mui/icons-material/Apps';
 import People from '@mui/icons-material/People';
 import AddCircle from '@mui/icons-material/AddCircle';
+import { withApplicationContext } from '../contexts/Application';
 
 const useStyles = makeStyles(theme => ({
   nav: {
@@ -69,7 +70,7 @@ const ListItemLink = ({ icon, primary, to, onClick }) => {
   );
 };
 
-const NavMenu = ({ setDrawerOpened }) => {
+const NavMenu = ({ setDrawerOpened, previewEnabled }) => {
   const styles = useStyles(useTheme());
   const onLinkClick = () => {
     if (setDrawerOpened) {
@@ -93,21 +94,27 @@ const NavMenu = ({ setDrawerOpened }) => {
           primary="Dapps"
           icon={<Apps />}
         />
-        <ListItemLink
-          onClick={onLinkClick}
-          to="/contacts"
-          primary="Contacts"
-          icon={<People />}
-        />
-        <ListItemLink
-          onClick={onLinkClick}
-          to="/issuers"
-          primary="Asset Issuers"
-          icon={<AddCircle />}
-        />
+        {previewEnabled && (
+          <ListItemLink
+            onClick={onLinkClick}
+            to="/contacts"
+            primary="Contacts"
+            icon={<People />}
+          />
+        )}
+        {previewEnabled && (
+          <ListItemLink
+            onClick={onLinkClick}
+            to="/issuers"
+            primary="Asset Issuers"
+            icon={<AddCircle />}
+          />
+        )}
       </List>
     </nav>
   );
 };
 
-export default NavMenu;
+export default withApplicationContext(NavMenu, context => ({
+  previewEnabled: context.previewEnabled,
+}));
diff --git a/packages/wallet/ui/src/components/Purses.jsx b/packages/wallet/ui/src/components/Purses.jsx
@@ -12,7 +12,11 @@ import Loading from './Loading';
 import './Purses.scss';
 
 // Exported for testing only.
-export const PursesWithoutContext = ({ purses, pendingTransfers }) => {
+export const PursesWithoutContext = ({
+  purses,
+  pendingTransfers,
+  previewEnabled,
+}) => {
   const [openPurse, setOpenPurse] = useState(null);
 
   const handleClickOpen = purse => {
@@ -36,21 +40,23 @@ export const PursesWithoutContext = ({ purses, pendingTransfers }) => {
             />
           </ErrorBoundary>
         </div>
-        <div className="Right">
-          {pendingTransfers.has(purse.id) ? (
-            <div className="PurseProgressWrapper">
-              <CircularProgress size={30} />
-            </div>
-          ) : (
-            <Button
-              variant="outlined"
-              size="small"
-              onClick={() => handleClickOpen(purse)}
-            >
-              Send
-            </Button>
-          )}
-        </div>
+        {previewEnabled && (
+          <div className="Right">
+            {pendingTransfers.has(purse.id) ? (
+              <div className="PurseProgressWrapper">
+                <CircularProgress size={30} />
+              </div>
+            ) : (
+              <Button
+                variant="outlined"
+                size="small"
+                onClick={() => handleClickOpen(purse)}
+              >
+                Send
+              </Button>
+            )}
+          </div>
+        )}
       </CardItem>
     );
   };
@@ -69,4 +75,5 @@ export const PursesWithoutContext = ({ purses, pendingTransfers }) => {
 export default withApplicationContext(PursesWithoutContext, context => ({
   purses: context.purses,
   pendingTransfers: context.pendingTransfers,
+  previewEnabled: context.previewEnabled,
 }));
diff --git a/packages/wallet/ui/src/components/Transfer.jsx b/packages/wallet/ui/src/components/Transfer.jsx
@@ -182,6 +182,7 @@ export const TransferInternal = ({
             value={type}
             onChange={handleTypeChange}
           >
+            {/* TODO by default hide "within wallet" until https://github.com/Agoric/agoric-sdk/issues/6126 */}
             <FormControlLabel
               value={transferTypes.WITHIN_WALLET}
               control={<Radio color="primary" />}

diff --git a/packages/wallet/ui/src/components/tests/Purses.test.jsx b/packages/wallet/ui/src/components/tests/Purses.test.jsx
@@ -59,6 +59,8 @@ const pendingTransfers = new Set([0]);
 const withApplicationContext =
   (Component, _) =>
   ({ ...props }) => {
+    // Test the preview features
+    props.previewEnabled = true;
     return (
       <Component
         purses={purses}

diff --git a/packages/wallet/ui/src/contexts/Provider.jsx b/packages/wallet/ui/src/contexts/Provider.jsx
@@ -132,6 +132,9 @@ const Provider = ({ children }) => {
   const [schemaActions, setSchemaActions] = useState(null);
   const [connectionComponent, setConnectionComponent] = useState(null);
   const [backendErrorHandler, setBackendErrorHandler] = useState(null);
+  const [previewEnabled, setPreviewEnabled] = useState(false);
+  // expose for development
+  window.setPreviewEnabled = setPreviewEnabled;
 
   const RESTORED_CONNECTION_CONFIGS = [...DEFAULT_CONNECTION_CONFIGS];
   const userConnectionConfigs = maybeLoad('userConnectionConfigs');
@@ -435,6 +438,7 @@ const Provider = ({ children }) => {
     setBackendErrorHandler,
     keplrConnection,
     tryKeplrConnect,
+    previewEnabled,
   };
 
   useDebugLogging(state, [
@@ -451,6 +455,7 @@ const Provider = ({ children }) => {
     pendingOffers,
     declinedOffers,
     closedOffers,
+    previewEnabled,
   ]);
 
   return (