feature: Let users enter an encryption password during account export

CHANGELOG.md

@@ -3,6 +3,7 @@
 ### vNext
 
 - Added multi-chain signature API to the wallet client and SDK
+- Let users enter an encryption password during account export
 
 ### v1.37.0
 

packages/ui/src/theme/index.ts

@@ -203,6 +203,22 @@ export const createTheme = ({ whiteLabel, isGame }: any = {}): Theme => {
         },
 
         styleOverrides: {
+          root: ({ theme, ownerState: props }) => {
+            const color = props.color === 'inherit' ? undefined : theme.palette[props.color || 'primary'];
+            const disabledColor = color && alpha(color.main, theme.palette.action.disabledOpacity);
+            const textColor = color && color.contrastText;
+
+            return (
+              color && {
+                '&.Mui-disabled': {
+                  borderColor: disabledColor,
+                  backgroundColor: props.variant === 'contained' ? disabledColor : undefined,
+                  color: props.variant === 'contained' ? textColor : color?.main,
+                },
+              }
+            );
+          },
+
           contained: {
             backgroundColor: isGame && '#F32758',
             borderRadius: isGame ? 4 : 30,

src/routes/Settings/Settings.tsx

@@ -10,6 +10,7 @@ import {
   Typography,
   styled,
   useIsMobile,
+  TextField,
 } from '@cere-wallet/ui';
 import { useEffect, useState } from 'react';
 
@@ -24,17 +25,37 @@ const SectionHeader = styled(CardHeader)({
 
 const SectionButton = styled(Button)({
   minWidth: 250,
-  height: 44,
+  whiteSpace: 'nowrap',
+  height: 42,
 }) as typeof Button;
 
+const downloadFile = (url: string, filename: string) => {
+  const link = document.createElement('a');
+
+  link.href = url;
+  link.download = filename;
+
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+
+  // Clean up by revoking the Blob URL
+  URL.revokeObjectURL(url);
+};
+
 export const Settings = () => {
   const isMobile = useIsMobile();
   const accountStore = useAccountStore();
   const authenticationStore = useAuthenticationStore();
   const { accountUrl } = useOpenLoginStore();
   const [accountLink, setAccountLink] = useState<string>();
-  const walletDownloadUrl = accountStore.exportAccount('ed25519');
   const cereAddress = accountStore.getAccount('ed25519')?.address;
+  const [exportPassword, setExportPassword] = useState('');
+
+  const handleExportAccount = () => {
+    downloadFile(accountStore.exportAccount('ed25519', exportPassword), `${cereAddress}.json`);
+    setExportPassword('');
+  };
 
   useEffect(() => {
     authenticationStore
@@ -74,29 +95,45 @@ export const Settings = () => {
 
         <Card>
           <SectionHeader
-            title="Account export"
+            title="Export Your Account as an Encrypted JSON File"
             avatar={
               <IconButton variant="filled" size="medium">
                 <DownloadIcon />
               </IconButton>
             }
           />
           <CardContent>
-            <Stack direction={isMobile ? 'column' : 'row'} spacing={3}>
+            <Stack spacing={1}>
+              <Typography flex={1} variant="body2" color="text.secondary">
+                This downloadable file lets you restore your account or use it with Cere Tools, even if you can't
+                connect directly to Cere Wallet. To ensure maximum security, the file will be encrypted with a password
+                you create.
+              </Typography>
+
               <Typography flex={1} variant="body2" color="text.secondary">
-                JSON backup file lets you restore your account or use it with Cere Tools, even if a direct connection to
-                Cere Wallet isn't available. Please keep it confidential and don't share it with third parties.
+                Please keep your password confidential and do not share it with anyone. Sharing your password could
+                compromise your account security.
               </Typography>
 
-              <SectionButton
-                disabled={!cereAddress}
-                download={`${cereAddress}.json`}
-                fullWidth={isMobile}
-                href={walletDownloadUrl}
-                variant="outlined"
-              >
-                Download
-              </SectionButton>
+              <Stack direction={isMobile ? 'column' : 'row'} spacing={2} paddingTop={2}>
+                <TextField
+                  label="Encryption Password"
+                  value={exportPassword}
+                  fullWidth
+                  size="small"
+                  type="password"
+                  onChange={(event) => setExportPassword(event.target.value)}
+                />
+
+                <SectionButton
+                  disabled={!cereAddress || !exportPassword}
+                  fullWidth={isMobile}
+                  variant="contained"
+                  onClick={handleExportAccount}
+                >
+                  Export Account
+                </SectionButton>
+              </Stack>
             </Stack>
           </CardContent>
         </Card>

src/stores/AccountStore/AccountStore.ts

@@ -63,9 +63,6 @@ export class AccountStore {
       throw new Error('No private key found!');
     }
 
-    /**
-     * TODO: Implement passphrase UI to not hardcode it here to be empty string ('')
-     */
     const keyData = exportAccountToJson({ privateKey: this.privateKey, type, passphrase: passphrase || '' });
     const accountBlob = new Blob([JSON.stringify(keyData)], {
       type: 'application/json',