feat: external account redesign

geyserfund · Aug 31, 2023 · c20a23a · c20a23a
1 parent 6f4e9e3
commit c20a23a
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 29 deletions.
diff --git a/src/pages/profile/components/ExternalAccountBody.tsx b/src/pages/profile/components/ExternalAccountBody.tsx
@@ -1,16 +1,16 @@
-import { HStack, StackProps } from '@chakra-ui/react'
+import { useState } from 'react'
+import { HStack, StackProps, Icon, Tooltip, Box } from '@chakra-ui/react'
+import { CheckIcon, CopyIcon, CloseIcon } from '@chakra-ui/icons'
 import { BsTwitter } from 'react-icons/bs'
 
-import { CloseIconButton } from '../../../components/buttons'
 import { BoltSvgIcon, NostrSvgIcon } from '../../../components/icons'
 import { Body2 } from '../../../components/typography'
 import { socialColors } from '../../../styles'
 import { ExternalAccountType } from '../../auth'
+import { useNotification } from '../../../utils'
 
 const externalAccountColorMap = {
   [ExternalAccountType.twitter]: socialColors.twitter,
-  [ExternalAccountType.lightning]: socialColors.lightning,
-  [ExternalAccountType.nostr]: socialColors.nostr,
 } as { [key: string]: string }
 
 const externalAccountIconMap = {
@@ -23,6 +23,7 @@ interface ExternalAccountBodyProps extends StackProps {
   type: ExternalAccountType
   username: string
   handleDelete?: () => void
+  handleCopy?: () => void
   isLoading?: boolean
   as?: any
   to?: string
@@ -34,10 +35,13 @@ export const ExternalAccountBody = ({
   type,
   username,
   handleDelete,
+  handleCopy,
   isLoading,
   ...rest
 }: ExternalAccountBodyProps) => {
+  const [copy, setCopy] = useState(false)
   const Icon = externalAccountIconMap[type]
+  const { toast } = useNotification()
 
   const handleOnCloseClick = handleDelete
     ? (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -46,23 +50,50 @@ export const ExternalAccountBody = ({
       }
     : undefined
 
+  const handleOnCopy = handleCopy
+    ? () => {
+        handleCopy()
+        setCopy(true)
+        toast({
+          title: 'Copied!',
+        })
+        setTimeout(() => {
+          setCopy(false)
+        }, 1000)
+      }
+    : undefined
+
+  const text =
+    type === ExternalAccountType.nostr
+      ? `${username.slice(0, 10)}...${username.slice(-4)}`
+      : username
+
   return (
     <>
       <HStack
         w="100%"
-        backgroundColor="neutral.100"
-        borderRadius="8px"
         color={externalAccountColorMap[type]}
         padding="5px 10px"
         justifyContent="space-between"
         _hover={{ cursor: 'pointer' }}
         {...rest}
       >
         <HStack overflow="hidden">
-          <Icon height="20px" width="20px" />
-          <Body2 isTruncated>{username}</Body2>
+          <Icon boxSize={5} />
+          <Body2 isTruncated fontWeight="bold">
+            {text}
+          </Body2>
+          {handleOnCopy && (
+            <Icon
+              as={copy ? CheckIcon : CopyIcon}
+              boxSize={3}
+              onClick={handleOnCopy}
+            />
+          )}
+          {handleOnCloseClick && (
+            <Icon as={CloseIcon} boxSize={2} onClick={handleOnCloseClick} />
+          )}
         </HStack>
-        {handleOnCloseClick && <CloseIconButton onClick={handleOnCloseClick} />}
       </HStack>
     </>
   )

diff --git a/src/pages/profile/components/ExternalAccountDisplay.tsx b/src/pages/profile/components/ExternalAccountDisplay.tsx
@@ -1,7 +1,6 @@
 import { useMutation } from '@apollo/client'
-import { Box, Link, Tooltip, useDisclosure } from '@chakra-ui/react'
+import { Link, useDisclosure } from '@chakra-ui/react'
 import { nip19 } from 'nostr-tools'
-import { useState } from 'react'
 
 import { MUTATION_UNLINK_ACCOUNT } from '../../../graphql'
 import { ExternalAccount } from '../../../types'
@@ -25,14 +24,8 @@ export const ExternalAccountDisplay = ({
   const { toast } = useNotification()
   const { isOpen, onOpen, onClose } = useDisclosure()
 
-  const [copy, setCopy] = useState(false)
-
   const handleCopyPubkey = (npub: string) => {
     copyTextToClipboard(npub)
-    setCopy(true)
-    setTimeout(() => {
-      setCopy(false)
-    }, 1000)
   }
 
   const [unlinkAccount, { loading: unlinkAccountLoading }] = useMutation(
@@ -76,18 +69,13 @@ export const ExternalAccountDisplay = ({
     if (isNostr) {
       const npub = nip19.npubEncode(account.externalId)
       return (
-        <Tooltip label={copy ? 'copied!' : 'copy'} placement="top-start">
-          <Box w="full">
-            <ExternalAccountBody
-              type={account.accountType as ExternalAccountType}
-              username={npub}
-              handleDelete={isEdit ? onOpen : undefined}
-              onClick={() => handleCopyPubkey(npub)}
-              backgroundColor={copy ? 'primary.400' : 'neutral.100'}
-              isLoading={unlinkAccountLoading}
-            />
-          </Box>
-        </Tooltip>
+        <ExternalAccountBody
+          type={account.accountType as ExternalAccountType}
+          username={npub}
+          handleDelete={isEdit ? onOpen : undefined}
+          handleCopy={() => handleCopyPubkey(npub)}
+          isLoading={unlinkAccountLoading}
+        />
       )
     }