feat: delegation panel

package.json

@@ -11,7 +11,7 @@
     "lint:fix": "next lint --fix"
   },
   "dependencies": {
-    "@aleph-front/core": "^1.32.0",
+    "@aleph-front/core": "^1.32.1",
     "@aleph-sdk/account": "^1.2.0",
     "@aleph-sdk/avalanche": "^1.5.0",
     "@aleph-sdk/base": "^1.5.0",

src/components/common/CopyToClipboard/cmp.tsx

@@ -0,0 +1,22 @@
+import { memo } from 'react'
+import { useCopyToClipboardAndNotify } from '@aleph-front/core'
+import { StyledCopytoClipboard, StyledIcon } from './styles'
+import { CopyToClipboardProps } from './types'
+
+export const CopytoClipboard = ({
+  text,
+  textToCopy,
+  iconColor = 'purple3',
+}: CopyToClipboardProps) => {
+  const handleCopy = useCopyToClipboardAndNotify(textToCopy || '')
+
+  return (
+    <StyledCopytoClipboard onClick={handleCopy}>
+      {text}
+      <StyledIcon name="copy" $color={iconColor} size="0.8em" />
+    </StyledCopytoClipboard>
+  )
+}
+CopytoClipboard.displayName = 'CopytoClipboard'
+
+export default memo(CopytoClipboard)

src/components/common/CopyToClipboard/index.ts

@@ -0,0 +1 @@
+export { default } from './cmp'

src/components/common/CopyToClipboard/styles.ts

@@ -0,0 +1,23 @@
+import { Icon } from '@aleph-front/core'
+import styled, { css } from 'styled-components'
+import tw from 'twin.macro'
+
+export const StyledCopytoClipboard = styled.div`
+  ${({ theme }) => css`
+    ${tw`cursor-pointer flex gap-x-2 items-center`}
+
+    &:hover ${StyledIcon} {
+      color: ${theme.color.main0};
+    }
+  `}
+`
+
+export const StyledIcon = styled(Icon)<{ $color: string }>`
+  ${({ theme, $color }) => css`
+    color: ${theme.color[$color]};
+
+    transition-property: color;
+    transition-duration: ${theme.transition.duration.fast}ms;
+    transition-timing-function: ${theme.transition.timing};
+  `}
+`

src/components/common/CopyToClipboard/types.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react'
+
+export type CopyToClipboardProps = {
+  text?: ReactNode
+  iconColor?: string
+  textToCopy?: string
+}

src/components/common/CountBadge/cmp.tsx

@@ -0,0 +1,17 @@
+import React, { memo } from 'react'
+import { CountBadgeProps } from './types'
+
+export const CountBadge = ({ count }: CountBadgeProps) => {
+  return (
+    <div
+      tw="flex items-center min-w-4 min-h-4 w-fit py-1 px-1.5 rounded-md"
+      className="bg-purple4 fs-10 tp-info"
+    >
+      {count}
+    </div>
+  )
+}
+
+CountBadge.displayName = 'CountBadge'
+
+export default memo(CountBadge) as typeof CountBadge

src/components/common/CountBadge/index.ts

@@ -0,0 +1,2 @@
+export { default } from './cmp'
+export * from './types'

src/components/common/CountBadge/types.ts

@@ -0,0 +1,3 @@
+export type CountBadgeProps = {
+  count: number
+}

src/components/common/DashboardCardWithSideImage/cmp.tsx

@@ -33,7 +33,7 @@ export const DashboardCardWithSideImage = ({
             <TextGradient as="h2" type="h3">
               {title}
             </TextGradient>
-            {description}
+            <div className="tp-body1">{description}</div>
           </div>
           {(withButton || externalLinkUrl) && (
             <div tw="mt-6 flex flex-wrap items-center justify-between gap-6">

src/components/common/DashboardCardWithSideImage/types.ts

@@ -1,7 +1,9 @@
+import { ReactNode } from 'react'
+
 export type DashboardCardWithSideImageProps = {
   info: string
   title: string
-  description: string
+  description: ReactNode
   imageSrc: string
   imageAlt: string
   withButton?: boolean

src/components/common/PermissionsDetail/cmp.tsx

@@ -0,0 +1,84 @@
+import React, { memo } from 'react'
+import { PermissionsDetailProps } from './types'
+import { NoisyContainer, ObjectImg } from '@aleph-front/core'
+import CopyToClipboard from '../CopyToClipboard'
+import Form from '@/components/form/Form'
+import { usePermissionsDetailForm } from './hook'
+import PermissionsConfiguration from '@/components/form/PermissionsConfiguration'
+
+export const PermissionsDetail = ({
+  permissions,
+  onSubmit,
+  onUpdate,
+  channelsPanelOrder = 1,
+}: PermissionsDetailProps) => {
+  const { handleSubmit, errors, control } = usePermissionsDetailForm({
+    permissions,
+    onSubmitSuccess: onSubmit,
+    onUpdate,
+  })
+
+  return (
+    <>
+      <Form
+        tw="overflow-y-auto"
+        id="permissions-detail-form"
+        onSubmit={handleSubmit}
+        errors={errors}
+      >
+        <div tw="flex flex-col gap-y-12">
+          <div tw="flex flex-col gap-y-2">
+            <div className="tp-info fs-14">Recipient details</div>
+            <NoisyContainer>
+              <div tw="flex gap-x-4">
+                <div>
+                  <ObjectImg id="Object12" size={90} color="main0" />
+                </div>
+                <div tw="flex flex-col gap-y-2">
+                  {/* <div>
+                <div className="tp-info fs-10 text-main0">Created at</div>
+                <div className="tp-body2">
+                  {permissions.created_at || 'Unknown'}
+                </div>
+              </div> */}
+                  <div>
+                    <div className="tp-info fs-10 text-main0">
+                      Recipient account address
+                    </div>
+                    <div>
+                      <CopyToClipboard
+                        text={
+                          <span className="tp-body1 fs-12">
+                            {permissions.id}
+                          </span>
+                        }
+                        textToCopy={permissions.id}
+                      />
+                    </div>
+                  </div>
+                  <div>
+                    <div className="tp-info fs-10 text-main0">
+                      Recipient alias
+                    </div>
+                    <div className="tp-body2">{permissions.alias || '-'}</div>
+                  </div>
+                </div>
+              </div>
+            </NoisyContainer>
+          </div>
+          <div tw="flex flex-col gap-y-2">
+            <div className="tp-info fs-14">Permissions details</div>
+            <PermissionsConfiguration
+              control={control}
+              name=""
+              channelsPanelOrder={channelsPanelOrder}
+            />
+          </div>
+        </div>
+      </Form>
+    </>
+  )
+}
+PermissionsDetail.displayName = 'PermissionsDetail'
+
+export default memo(PermissionsDetail) as typeof PermissionsDetail

src/components/common/PermissionsDetail/hook.ts

@@ -0,0 +1,88 @@
+import { useCallback, useEffect } from 'react'
+import { useWatch } from 'react-hook-form'
+import { useForm } from '@/hooks/common/useForm'
+import {
+  AccountPermissions,
+  MessageTypePermissions,
+} from '@/domain/permissions'
+
+export type PermissionsDetailFormState = {
+  channels: string[]
+  messageTypes: MessageTypePermissions[]
+  revoked: boolean
+}
+
+export type UsePermissionsDetailFormProps = {
+  permissions: AccountPermissions
+  onSubmitSuccess?: (updatedPermission: AccountPermissions) => void
+  onUpdate?: (updatedPermission: AccountPermissions) => void
+}
+
+export function usePermissionsDetailForm({
+  permissions,
+  onSubmitSuccess,
+  onUpdate,
+}: UsePermissionsDetailFormProps) {
+  const defaultValues: PermissionsDetailFormState = {
+    channels: permissions.channels,
+    messageTypes: permissions.messageTypes,
+    revoked: permissions.revoked,
+  }
+
+  const onSubmit = useCallback(
+    async (state: PermissionsDetailFormState) => {
+      const updatedPermission: AccountPermissions = {
+        id: permissions.id,
+        alias: permissions.alias,
+        ...state,
+      }
+      console.log('Updated permissions:', updatedPermission)
+
+      onSubmitSuccess?.(updatedPermission)
+    },
+    [permissions.id, permissions.alias, onSubmitSuccess],
+  )
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors, isDirty },
+  } = useForm({
+    defaultValues,
+    onSubmit,
+    onSuccess: () => Promise.resolve(),
+  })
+
+  // Watch form values for real-time updates
+  const watchedValues = useWatch({ control })
+
+  useEffect(() => {
+    if (onUpdate) {
+      const updatedPermission: AccountPermissions = {
+        id: permissions.id,
+        alias: permissions.alias,
+        channels: watchedValues.channels ?? permissions.channels,
+        messageTypes:
+          (watchedValues.messageTypes as MessageTypePermissions[]) ??
+          permissions.messageTypes,
+        revoked: permissions.revoked,
+      }
+      onUpdate(updatedPermission)
+    }
+  }, [
+    watchedValues,
+    permissions.id,
+    permissions.alias,
+    permissions.channels,
+    permissions.messageTypes,
+    permissions.revoked,
+    onUpdate,
+  ])
+
+  return {
+    control,
+    handleSubmit,
+    errors,
+    isDirty,
+  }
+}

src/components/common/PermissionsDetail/index.tsx

@@ -0,0 +1 @@
+export { default } from './cmp'

src/components/common/PermissionsDetail/types.tsx

@@ -0,0 +1,9 @@
+import { AccountPermissions } from '@/domain/permissions'
+
+export type PermissionsDetailProps = {
+  permissions: AccountPermissions
+  onSubmit?: (updatedPermission: AccountPermissions) => void
+  onUpdate?: (updatedPermission: AccountPermissions) => void
+  channelsPanelOrder?: number
+  onCancel?: () => void
+}

src/components/common/Portal/cmp.tsx

@@ -0,0 +1,22 @@
+import { memo, useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { PortalProps } from './types'
+
+export const Portal = ({ children, containerRef }: PortalProps) => {
+  const [SSR, setSSR] = useState(true)
+  const container = containerRef?.current
+
+  const shouldRender = container || !SSR
+
+  useEffect(() => {
+    if (container) return
+    setSSR(false)
+  }, [container])
+
+  return shouldRender
+    ? createPortal(children, container || window.document.body)
+    : null
+}
+Portal.displayName = 'Portal'
+
+export default memo(Portal) as typeof Portal

src/components/common/Portal/index.tsx

@@ -0,0 +1,2 @@
+export { default as Portal } from './cmp'
+export type { PortalProps } from './types'

src/components/common/Portal/types.ts

@@ -0,0 +1,6 @@
+import { ReactNode, RefObject } from 'react'
+
+export type PortalProps = {
+  containerRef?: RefObject<HTMLElement>
+  children: ReactNode
+}