successfulTransactionModal

Overview

The SuccessfulTransactionModal component provides a visually appealing modal for displaying successful transaction messages. It supports both light and dark themes and includes an animated appearance using Framer Motion.

Installation

  npm i @brightcodeui/beta-ui

Example

Code

import React, { useState } from "react";
import {SuccessfulTransactionModal} from "@brightcodeui/beta-ui";

const App = () => {
  const [isOpen, setIsOpen] = useState(false);
  const transactionHash = "0x1234567890abcdef";

  const handleTransaction = () => {
    setIsOpen(true);
    // Simulate transaction success
    setTimeout(() => {
      setIsOpen(false);
    }, 2000);
  };

  return (
    <div>
      <SuccessfulTransactionModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        transactionHash={transactionHash}
        theme="dark"
      />
    </div>
  );
};

export default App;

Props

Prop Name	Type	Description	Default Value
isOpen	boolean	Controls whether the modal is visible.	false
onClose	() => void	Function to close the modal.	-
transactionHash	string	The hash of the successful transaction.	-
theme	`'light'	'dark'`	Determines the modal's appearance.

Usage

Theming

The theme prop allows you to switch between light and dark themes:

• Light Theme (Default)

      <SuccessfulTransactionModal 
        isOpen={true} 
        transactionHash="0x1234567890abcdef" 
        theme="light" onClose={() => {}} 
      />

• Dark Theme

    <SuccessfulTransactionModal 
      isOpen={true} 
      transactionHash="0x1234567890abcdef" 
      theme="dark" onClose={() => {}} 
    />

Example with Storybook

This component is also available in Storybook with different configurations:

export const Default: Story = {
  args: {
    isOpen: true,
    transactionHash: "0x1234567890abcdef",
    theme: "light",
  },
};

export const DarkMode: Story = {
  args: {
    ...Default.args,
    theme: "dark",
  },
};

Conclusion

The SuccessfulTransactionModal component is an elegant and reusable solution for displaying transaction confirmations. It integrates smoothly into any React project and supports customizable themes.