fix: missing event details

[roderik]

Summary by Sourcery

New Features:

• Adds detail components for UserAllowed and UserDisallowed events, displaying user information.

[sourcery-ai]

Reviewer's Guide by Sourcery

This pull request adds support for displaying details for UserAllowedEvent and UserDisallowedEvent in the EventDetailSheet component. It introduces two new components, UserAllowedDetails and UserDisallowedDetails, to handle the rendering of these event details, utilizing existing components like EvmAddress, EvmAddressBalances, and DetailsCard.

Updated class diagram for EventDetailSheet

classDiagram
  class EventDetailSheet {
    +event: any
    +onClose: () => void
  }
  EventDetailSheet *-- UserAllowedDetails : Uses
  EventDetailSheet *-- UserDisallowedDetails : Uses

  class UserAllowedDetails {
    +details: UserAllowedEvent
  }

  class UserDisallowedDetails {
    +details: UserDisallowedEvent
  }

  class DetailsCard {
    +details: any[]
  }

  UserAllowedDetails *-- DetailsCard : Uses
  UserDisallowedDetails *-- DetailsCard : Uses

  class EvmAddress {
    +address: string
  }

  class EvmAddressBalances {
    +address: string
  }

  DetailsCard *-- EvmAddress : Uses
  EvmAddress *-- EvmAddressBalances : Uses

  note for EventDetailSheet "Renders details for various event types, including UserAllowedEvent and UserDisallowedEvent."
  note for UserAllowedDetails "Displays details for UserAllowedEvent."
  note for UserDisallowedDetails "Displays details for UserDisallowedEvent."

Loading

File-Level Changes

Change	Details	Files
Added UserAllowedEvent and UserDisallowedEvent to the EventDetailSheet component.	Imported UserAllowedDetails and UserDisallowedDetails components. Added cases for UserAllowedEvent and UserDisallowedEvent to render the corresponding detail components.	kit/dapp/src/components/blocks/asset-events-table/detail-sheet.tsx
Created UserAllowedDetails component.	Implemented a new component to display details for UserAllowedEvent. Utilized EvmAddress and EvmAddressBalances components to display user information. Used DetailsCard component to structure the details.	kit/dapp/src/components/blocks/asset-events-table/details/user-allowed.tsx
Created UserDisallowedDetails component.	Implemented a new component to display details for UserDisallowedEvent. Utilized EvmAddress and EvmAddressBalances components to display user information. Used DetailsCard component to structure the details.	kit/dapp/src/components/blocks/asset-events-table/details/user-disallowed.tsx

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!
• Generate a plan of action for an issue: Comment @sourcery-ai plan on
  an issue to generate a plan of action for it.

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey @roderik - I've reviewed your changes - here's some feedback:

Overall Comments:

• Consider extracting the common logic in UserAllowedDetails and UserDisallowedDetails into a shared component or helper function to reduce duplication.

Here's what I looked at during the review

• 🟡 General issues: 1 issue found
• 🟢 Security: all looks good
• 🟢 Review instructions: all looks good
• 🟢 Testing: all looks good
• 🟡 Complexity: 1 issue found
• 🟢 Documentation: all looks good

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[sourcery-ai]

suggestion: Consider reducing duplicate logic between user event components.

Both UserAllowedDetails and UserDisallowedDetails render an EvmAddress with balances using almost identical logic. Abstracting this repeated pattern into a shared component or utility function could simplify maintenance as additional user event types are added.

[sourcery-ai]

issue (complexity): Consider creating a generic details component that accepts event details and labels as props to avoid repeating the same logic in multiple components, such as the allowed and disallowed event components, and then updating the allowed/disallowed components to use the new generic component..

You can reduce complexity by abstracting the repeated details logic into a single parameterized component. Instead of having nearly identical components for allowed and disallowed events, create a generic details component that accepts event details and any labels or other minor variations as props. For example:

interface EventDetailsProps<T> {
  details: T;
  userLabel: string;
}

export function EventDetails<T extends { user: { id: string } }>({
  details,
  userLabel,
}: EventDetailsProps<T>) {
  const detailItems = [
    {
      key: "user",
      label: userLabel,
      value: (
        <EvmAddress address={details.user.id}>
          <EvmAddressBalances address={details.user.id} />
        </EvmAddress>
      ),
    },
  ];

  return <DetailsCard details={detailItems} />;
}

Then update your allowed/disallowed components to use the new generic component. For example:

import { useTranslations } from "next-intl";

interface UserDisallowedDetailsProps {
  details: UserDisallowedEvent;
}

export function UserDisallowedDetails({ details }: UserDisallowedDetailsProps) {
  const t = useTranslations("components.asset-events-table.details");
  return <EventDetails details={details} userLabel={t("user")} />;
}

This refactoring keeps all functionality intact while reducing redundant code and simplifying future maintenance.