[IMPLEMENTATION] Add create profile functionality to build profile page

[BravarDev]

Task: Implement Save Profile Integration Using User Management Hook

Description

Extend the existing onboarding flow to allow users to save their profile through the user_management smart contract. When the “Build Profile” button is pressed on the welcome page, the frontend should call the contract using the existing useUserManagement hook to persist user information on the Stellar testnet.

---

Prerequisites

1. The useUserManagement hook must already be implemented and functional with createUser, updateUser, and getUser methods.

• [INTEGRATION] Hook for user profile operations #263

3. The wallet provider must supply the connected address and signer context.
4. The user_management contract binding should be available in src/contract_connections/user_management_binding.

---

Requirements

1. UI Update in Welcome Page

   • File: src/app/welcome/page.tsx

   • Add or update the “Build Profile” button handler to:

     • Retrieve the wallet address from context.
     • Collect user profile data from form inputs or static defaults.
     • Call the createUser function from the hook.
     • Display feedback (success or error) to the user.

2. Contract Interaction

   • Import the useUserManagement hook.

   • Initialize the hook by passing required parameters (e.g., contractId, server, etc.).

   • Call:

     await createUser(address, profileData);

   • After a successful transaction, redirect to /dashboard.

3. Error & UX Handling

   • Show loading state while the transaction is pending.
   • Catch and display any contract errors clearly.
   • Disable the button during contract execution.

4. Testing

   • Verify that a new user profile is created on testnet.
   • Confirm redirection to /dashboard after success.
   • Validate error and loading feedback.

---

Deliverables

• Updated src/app/welcome/page.tsx with integrated createUser logic.
• Functional “Build Profile” button that triggers contract interaction.
• User redirection to /dashboard after successful profile save.

---

Acceptance Criteria

• Pressing “Build Profile” successfully triggers the contract call through the hook.
• The hook receives wallet and contract parameters externally (no context inside the hook).
• User profile creation works on Stellar testnet.
• UX provides proper feedback for success, errors, and loading state.
• Code follows clean and modular TypeScript standards.

[Emmzyemms]

I’d like to work on this frontend issue. I have experience with Web3 UI integration, wallet connections, and responsive React-based interfaces.
I can start immediately. Thanks!