Export identity (#46)

* Export identity * Update icon
rarimo · Feb 13, 2024 · d8ee1e2 · d8ee1e2
1 parent 35ffe13
commit d8ee1e2
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 11 deletions.
diff --git a/src/common/ProfileMenu.tsx b/src/common/ProfileMenu.tsx
@@ -8,15 +8,16 @@ import {
   Typography,
   useTheme,
 } from '@mui/material'
-import { useState } from 'react'
+import { useCallback, useState } from 'react'
 import { Link } from 'react-router-dom'
 
+import { zkpSnap } from '@/api/clients'
 import { UserAvatar } from '@/common'
 import { config } from '@/config'
 import { BusEvents } from '@/enums'
-import { bus, formatDid } from '@/helpers'
+import { bus, ErrorHandler, formatDid } from '@/helpers'
 import { useAuth, useCopyToClipboard } from '@/hooks'
-import { UiIcon, UiIconButton, UiTooltip } from '@/ui'
+import { UiIcon, UiIconButton } from '@/ui'
 
 interface ProfileMenuProps {
   userDid: string
@@ -27,6 +28,7 @@ export default function ProfileMenu({ userDid }: ProfileMenuProps) {
   const { logout } = useAuth()
   const { copy, isCopied } = useCopyToClipboard()
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null)
+  const [isExporting, setIsExporting] = useState(false)
 
   const menuItemSx: SxProps = { py: 2.5, px: 4 }
 
@@ -38,6 +40,16 @@ export default function ProfileMenu({ userDid }: ProfileMenuProps) {
     }
   }
 
+  const exportIdentity = useCallback(async () => {
+    try {
+      setIsExporting(true)
+      await zkpSnap.exportIdentity()
+    } catch (error) {
+      ErrorHandler.process(error)
+    }
+    setIsExporting(false)
+  }, [])
+
   return (
     <>
       <UiIconButton onClick={event => setAnchorEl(event.currentTarget)}>
@@ -71,20 +83,20 @@ export default function ProfileMenu({ userDid }: ProfileMenuProps) {
             >
               {formatDid(userDid)}
             </Typography>
-            <UiTooltip title={'Copied'} open={isCopied && !!anchorEl}>
-              <UiIconButton onClick={copyUserDid}>
-                <UiIcon componentName={'contentCopy'} size={4} />
-              </UiIconButton>
-            </UiTooltip>
+            <UiIconButton onClick={copyUserDid} color={isCopied ? 'success' : 'primary'}>
+              <UiIcon componentName={isCopied ? 'check' : 'contentCopy'} size={4} />
+            </UiIconButton>
           </Stack>
         </Stack>
         <Divider sx={{ mb: 2 }} />
         {/*TODO: Add handler*/}
-        <MenuItem sx={menuItemSx}>
+        <MenuItem onClick={exportIdentity} sx={menuItemSx} disabled={isExporting}>
           <ListItemIcon>
-            <UiIcon componentName={'qrCode'} size={5} sx={{ color: palette.text.secondary }} />
+            <UiIcon componentName={'key'} size={5} sx={{ color: palette.text.secondary }} />
           </ListItemIcon>
-          <Typography variant={'caption1'}>QR login</Typography>
+          <Typography variant={'caption1'}>
+            {isExporting ? 'Exporting...' : 'Export Identity'}
+          </Typography>
         </MenuItem>
         <MenuItem
           component={Link}

diff --git a/src/enums/icons.ts b/src/enums/icons.ts
@@ -15,6 +15,7 @@ import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'
 import FolderOff from '@mui/icons-material/FolderOff'
 import InfoIcon from '@mui/icons-material/Info'
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'
+import Key from '@mui/icons-material/Key'
 import KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined'
 import Layers from '@mui/icons-material/Layers'
 import LightModeOutlined from '@mui/icons-material/LightModeOutlined'
@@ -58,6 +59,7 @@ export const ICON_COMPONENTS = {
   folderOff: FolderOff,
   info: InfoIcon,
   infoOutlined: InfoOutlinedIcon,
+  key: Key,
   keyboardArrowDownOutlined: KeyboardArrowDownOutlinedIcon,
   layers: Layers,
   lightModeOutlined: LightModeOutlined,