diff --git a/services/gatekeeper/client/src/App.js b/services/gatekeeper/client/src/App.js
index 2701222a..fc47570f 100644
--- a/services/gatekeeper/client/src/App.js
+++ b/services/gatekeeper/client/src/App.js
@@ -111,12 +111,18 @@ function App() {
                     keymaster={keymaster}
                     title={'Keymaster Browser Wallet Demo'}
                     challengeDID={challengeDID}
-                    encryptWallet={openEncryptModal}
-                    decryptWallet={decryptWallet}
-                    isWalletEncrypted={isEncrypted}
-                    isCryptoAvailable={isCryptoAvailable}
+                    encryption={
+                        isCryptoAvailable
+                            ? {
+                                encryptWallet: openEncryptModal,
+                                decryptWallet: decryptWallet,
+                                isWalletEncrypted: isEncrypted,
+                            }
+                            : undefined
+                    }
                 />
             )}
+
         </>
     );
 }
diff --git a/services/gatekeeper/client/src/KeymasterUI.js b/services/gatekeeper/client/src/KeymasterUI.js
index 111cb7bb..28a70336 100644
--- a/services/gatekeeper/client/src/KeymasterUI.js
+++ b/services/gatekeeper/client/src/KeymasterUI.js
@@ -4,7 +4,7 @@ import { Table, TableBody, TableRow, TableCell, TextField, Typography } from '@m
 import axios from 'axios';
 import './App.css';
 
-function KeymasterUI({ keymaster, title, challengeDID, encryptWallet, decryptWallet, isWalletEncrypted, isCryptoAvailable }) {
+function KeymasterUI({ keymaster, title, challengeDID, encryption }) {
 
     const [tab, setTab] = useState(null);
     const [currentId, setCurrentId] = useState('');
@@ -887,9 +887,9 @@ function KeymasterUI({ keymaster, title, challengeDID, encryptWallet, decryptWal
         }
     }
 
-    async function handleDecryptWallet() {
-        await decryptWallet();
-    }
+    // async function handleDecryptWallet() {
+    //     await decryptWallet();
+    // }
 
     return (
         <div className="App">
@@ -1849,16 +1849,16 @@ function KeymasterUI({ keymaster, title, challengeDID, encryptWallet, decryptWal
                                 </Grid>
                             </Grid>
                             <p />
-                            {isCryptoAvailable && (
+                            {encryption && (
                                 <>
                                     <Grid container direction="row" justifyContent="flex-start" alignItems="center" spacing={3}>
                                         <Grid item>
-                                            { isWalletEncrypted ? (
-                                                <Button variant="contained" color="primary" onClick={handleDecryptWallet}>
+                                            { encryption.isWalletEncrypted ? (
+                                                <Button variant="contained" color="primary" onClick={encryption.decryptWallet}>
                                                     Decrypt Wallet
                                                 </Button>
                                             ) : (
-                                                <Button variant="contained" color="primary" onClick={encryptWallet}>
+                                                <Button variant="contained" color="primary" onClick={encryption.encryptWallet}>
                                                     Encrypt Wallet
                                                 </Button>
                                             )}