From d8ee1e2536047ce9b5d84b4ee87ff448a66441b8 Mon Sep 17 00:00:00 2001
From: Maksym <ardier16@gmail.com>
Date: Tue, 13 Feb 2024 11:36:29 +0200
Subject: [PATCH] Export identity (#46)

* Export identity

* Update icon
---
 src/common/ProfileMenu.tsx | 34 +++++++++++++++++++++++-----------
 src/enums/icons.ts         |  2 ++
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/common/ProfileMenu.tsx b/src/common/ProfileMenu.tsx
index 67ee827f..75b9abfc 100644
--- 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
index 30c2c27c..eab62a29 100644
--- 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,