Next of kin user interface

[walterthesmart]

#NextOfKin Smart Contract User Interface

Overview

This pull request introduces a user interface for the NextOfKin smart contract. The NextOfKin contract is a Clarity-based smart contract deployed on the Stacks blockchain, designed to automatically distribute a user's STX and BTC to designated beneficiaries after a specified period of wallet inactivity.

Changes Introduced

1. Created a new React component (App.js) to serve as the main interface for the NextOfKin contract.
2. Implemented wallet connection functionality using @stacks/connect.
3. Added a responsive navbar with a wallet connection button.
4. Set up state management for user address using React's useState hook.
5. Implemented session storage to persist user connection state.

Detailed Description

Wallet Connection

The UI now includes a "Connect Wallet" button that, when clicked, initiates the Stacks wallet connection process. This is crucial for users to interact with the NextOfKin contract. The connection process is handled by the showConnect function from @stacks/connect.

User Session Management

We've implemented a UserSession object to manage the user's session. This allows us to retrieve and store the user's Stacks address securely.

State Management

The component uses React's useState hook to manage the user's address state. This state is updated when the wallet is connected and is used to display the appropriate button text ("Connect Wallet" or "Wallet Connected").

Session Persistence

To improve user experience, we've implemented session storage. This allows the user's connection state to persist across page reloads, reducing the need for repeated wallet connections.

UI Design

The interface features a clean, responsive navbar with the application title and the wallet connection button. We've used Tailwind CSS for styling, ensuring a modern and consistent look.

How This Relates to the NextOfKin Smart Contract

While this PR doesn't directly interact with the NextOfKin smart contract yet, it lays the groundwork for future interactions. The wallet connection is a crucial first step, as it will allow us to:

1. Retrieve the user's Stacks address, which will be necessary for interacting with the contract.
2. Set up beneficiaries and inactivity periods in future iterations.
3. Display contract-related information such as current beneficiaries, inactivity period, and fund distribution status.

Next Steps

1. Implement functions to interact directly with the NextOfKin smart contract.
2. Create forms for users to set up beneficiaries and inactivity periods.
3. Develop a dashboard to display contract-related information.
4. Implement error handling and user feedback for contract interactions.

Testing

• Tested wallet connection functionality on testnet.
• Verified that the user's address is correctly stored and retrieved from session storage.
• Ensured responsive design works across various screen sizes.

Dependencies

• @stacks/connect: For Stacks wallet integration
• React: For building the user interface
• Tailwind CSS: For styling

Notes for Reviewers

• Please check the wallet connection flow and ensure it's working as expected.
• Verify that the user's address is correctly managed in both state and session storage.
• Provide feedback on the UI design and suggest any improvements.

This PR sets the foundation for the NextOfKin contract's user interface. Future PRs will build upon this to create a full-featured interface for managing beneficiaries and interacting with the contract.